/* 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); }

/* Tablas responsive tipo "tarjeta": en pantallas chicas, cada fila deja de
   ser una fila horizontal y pasa a ser un bloque apilado con etiqueta:valor,
   así el usuario nunca tiene que deslizar ni hacer zoom para leer una tabla. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    margin-bottom: 10px; border: 1px solid var(--border-soft); border-radius: 10px;
    padding: 10px 12px; background: var(--surface-2);
  }
  .table-stack td {
    border: none !important; padding: 5px 0 !important;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: right;
  }
  .table-stack td[data-label]:not([data-label=""])::before {
    content: attr(data-label); font-weight: 600; color: var(--text-dim); font-size: 11px;
    text-align: left; flex-shrink: 0;
  }
  .table-stack td[data-label=""] { justify-content: flex-end; }
}