/* CeluCenter — tokens de diseño compartidos con el prototipo del dashboard */
:root {
  --bg:#14171a; --bg-soft:#181c1f;
  --surface:#1e2226; --surface-2:#262b30;
  --border:#33393f; --border-soft:#2a2f34;
  --text:#eef1f3; --text-dim:#98a2a9; --text-faint:#5f6b72;
  --copper:#d98a4a; --copper-soft:rgba(217,138,74,.14);
  --green:#4fd1a5; --green-soft:rgba(79,209,165,.14);
  --blue:#5b9dd9; --blue-soft:rgba(91,157,217,.14);
  --amber:#e0b04c; --amber-soft:rgba(224,176,76,.14);
  --red:#e0655a; --red-soft:rgba(224,101,90,.14);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

.ro-sidebar {
  width: 236px; background: var(--bg-soft); border-right: 1px solid var(--border-soft);
  min-height: 100vh; padding: 20px 14px;
}

/* Responsive: por debajo de 992px (tablet y celular), el sidebar pasa a ser
   un panel deslizable (off-canvas) en vez de ocupar espacio fijo siempre. */
@media (max-width: 991.98px) {
  .ro-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 1050;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 20px 0 40px rgba(0,0,0,.3);
  }
  .ro-sidebar.abierto { transform: translateX(0); }
}

.ro-sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1040;
}
.ro-sidebar-backdrop.visible { display: block; }

.ro-btn-hamburguesa {
  display: none; width: 34px; height: 34px; border-radius: 9px; background: var(--surface);
  border: 1px solid var(--border-soft); align-items: center; justify-content: center; cursor: pointer;
  color: var(--text); flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .ro-btn-hamburguesa { display: flex; }
}

.ro-nav-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:var(--text-dim); text-decoration:none; font-size:13.5px; font-weight:500;
}
.ro-nav-item:hover { background: var(--surface-2); color: var(--text); }
.ro-nav-item.active { background: var(--copper-soft); color: var(--copper); font-weight:600; }

.ro-card {
  background: var(--surface); border:1px solid var(--border-soft); border-radius:14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
}

.btn-copper {
  background: var(--copper); color:#1a1410; border:none; font-weight:700;
}
.btn-copper:hover { background:#c67c3f; color:#1a1410; }

.ro-auth-page {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, #1c2126, var(--bg));
}
.ro-auth-card {
  width: 100%; max-width: 420px; background: var(--surface); border:1px solid var(--border-soft);
  border-radius: 16px; padding: 34px 32px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
}
.form-control, .form-select {
  background: var(--surface-2) !important; border:1px solid var(--border-soft) !important; color: var(--text) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--copper) !important; box-shadow: 0 0 0 .2rem var(--copper-soft) !important;
}
label { color: var(--text-dim); font-size: 12.5px; font-weight:600; margin-bottom:4px; }

.badge-trial { background: var(--amber-soft); color: var(--amber); }
.badge-activo { background: var(--green-soft); color: var(--green); }
.badge-suspendido { background: var(--red-soft); color: var(--red); }

.ro-content-main { overflow-x: hidden; min-width: 0; }

.table-responsive {
  overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
}

/* Tablas responsive: tabla real con scroll horizontal (no se "apila"),
   con la primera columna fija a la izquierda para siempre saber a qué
   fila corresponde cada dato aunque desplaces el resto hacia la derecha. */
.table-stack th:first-child,
.table-stack td:first-child {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
}
.table-stack td:first-child {
  box-shadow: 2px 0 4px rgba(0,0,0,.25);
}
@media (max-width: 767.98px) {
  .table-stack th, .table-stack td { white-space: nowrap; }
}