/* ══════════════════════════════════════════════════════

   EDUPAGO — SISTEMA DE DISEÑO (CRM moderno · limpio · profesional)

   Marca: navy #282d65 · green #49af54 · lime #bdcf00 (acento)

   Modo claro por defecto · modo oscuro pulido disponible

══════════════════════════════════════════════════════ */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {
  /* ══ MARCA EDUPAGO (se conserva para splash, logo y acentos de estado) ══ */
  --navy:        #282d65;
  --navy-dark:   #1c2050;
  --navy-light:  #3a4080;
  --lime:        #bdcf00;
  --lime-dark:   #8a9a00;
  --lime-glow:   rgba(189,207,0,0.14);
  --green:       #49af54;
  --green-dark:  #3a9446;
  --green-glow:  rgba(73,175,84,0.12);

  /* ══ PALETA "CONCURED" — muestreada del video de referencia ══
     Violeta primario · cian · magenta. Cambia SOLO estas 3 líneas
     para re-teñir el sistema completo.                            */
  --violet:       #6c5af0;
  --violet-dark:  #5846dd;
  --violet-light: #8e80f4;
  --cyan:         #4fd8f0;
  --magenta:      #d860f0;

  --violet-soft:  #f1effd;   /* pill de nav activo / fondos teñidos */
  --cyan-soft:    #e8faff;
  --magenta-soft: #fbeeff;

  --grad-brand:  linear-gradient(115deg, #4fd8f0 0%, #6c5af0 55%, #d860f0 100%);
  --grad-cool:   linear-gradient(135deg, #4fd8f0 0%, #6c5af0 100%);
  --grad-warm:   linear-gradient(135deg, #6c5af0 0%, #d860f0 100%);

  /* ══ MODO CLARO (por defecto) ══ */
  --bg-main:      #f4f5f9;   /* lienzo lavanda de la página */
  --bg-solid:     #ffffff;
  --bg-surface:   #ffffff;   /* tarjetas */
  --bg-surface-2: #fafafd;
  --bg-panel:     #ffffff;   /* panel principal (lienzo del contenido) */
  --bg-sidebar:   transparent;

  /* ══ SIDEBAR (ahora claro, integrado al lienzo) ══ */
  --side-bg:        transparent;
  --side-bg-2:      transparent;
  --side-border:    rgba(23,26,44,0.06);
  --side-ink:       #1e2430;   /* texto principal (oscuro sobre claro) */
  --side-ink-2:     #5b6273;
  --side-ink-3:     #8d94a5;
  --side-hover:     rgba(108,90,240,0.06);
  --side-active-bg: var(--violet-soft);

  /* ══ BORDES Y SUPERFICIES ══ */
  --border-glow:   #ebecf3;
  --border-active: var(--violet);
  --glass-light:   #f5f6fa;
  --glass-hover:   #eeeff6;
  --glass-dark:    #fafbfd;
  --shadow-glass:  0 1px 2px rgba(23,26,44,.03), 0 2px 8px rgba(23,26,44,.04);
  --shadow-md:     0 4px 14px rgba(23,26,44,.07), 0 2px 5px rgba(23,26,44,.04);
  --shadow-lg:     0 18px 44px rgba(23,26,44,.13);
  --shadow-violet: 0 8px 22px rgba(108,90,240,.28);

  /* ══ TEXTO ══ */
  --ink:    #1e2430;
  --ink-2:  #414958;
  --ink-3:  #697182;   /* 4.90:1 sobre blanco — cumple WCAG AA */
  --ink-4:  #8f97a6;   /* solo para texto decorativo/iconos */

  /* ══ ACENTOS ══ */
  --accent:          var(--violet);
  --accent-2:        var(--cyan);
  --accent-gradient: var(--grad-cool);
  --btn-gradient:    var(--violet);
  --accent-glow:     rgba(108,90,240,0.09);
  --on-accent:       #ffffff;

  /* ══ SEMÁNTICOS ══ */
  --amber:       #d97706;
  --amber-glow:  rgba(217,119,6,0.10);
  --red:         #e5484d;
  --red-glow:    rgba(229,72,77,0.09);
  --purple:      var(--violet);
  --purple-glow: rgba(108,90,240,0.10);

  /* ══ LAYOUT ══ */
  /* Alias de compatibilidad. Varias vistas usan estos nombres, que nunca
     existieron como token: sin fallback la propiedad quedaba anulada, y con
     fallback aplicaban un color oscuro en modo claro. Definirlos aquí corrige
     13 usos en Alumnos, Caja, Escuelas, Usuarios y Recordatorios. */
  --bg-2:    var(--bg-surface-2);
  --border:  var(--border-glow);
  --glass:   var(--glass-light);
  --ink-1:   var(--ink);
  --surface: var(--bg-surface);

  --radius-sm:    9px;
  --radius:       12px;
  --radius-lg:    18px;
  --radius-panel: 26px;   /* esquina del panel blanco principal */
  --radius-pill:  999px;
  --blur:      blur(12px);
  --font:      'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;
  --sidebar-w: 244px;
  --header-h:  66px;
}

/* ══ MODO OSCURO (adaptado a la misma paleta) ══ */
:root[data-theme="dark"] {
  /* Escala de elevación: cuanto más "arriba" está el elemento, más claro.
     Sin esto, panel y tarjetas quedan del mismo tono y las tarjetas se pierden. */
  --bg-main:      #0b0d18;   /* lienzo — el más oscuro */
  --bg-panel:     #13162b;   /* panel principal */
  --bg-surface:   #1b1f39;   /* tarjetas — elevadas sobre el panel */
  --bg-solid:     #1b1f39;
  --bg-surface-2: #232848;
  --bg-sidebar:   transparent;

  --border-glow:   rgba(255,255,255,0.09);
  --border-active: var(--violet-light);
  --glass-light:   rgba(255,255,255,0.05);
  --glass-hover:   rgba(255,255,255,0.08);
  --glass-dark:    rgba(0,0,0,0.28);
  --shadow-glass:  0 1px 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-md:     0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-lg:     0 22px 52px rgba(0,0,0,.62);
  --shadow-violet: 0 8px 26px rgba(108,90,240,.45);

  --ink:    #eef1f8;
  --ink-2:  #c4cad8;
  --ink-3:  #8b93a7;
  --ink-4:  #69798f;

  --side-bg:        transparent;
  --side-bg-2:      transparent;
  --side-border:    rgba(255,255,255,0.07);
  --side-ink:       #eef1f8;
  --side-ink-2:     #9aa1bb;
  --side-ink-3:     #6b7290;
  --side-hover:     rgba(255,255,255,0.05);
  --side-active-bg: rgba(108,90,240,0.20);

  --violet-soft:  rgba(108,90,240,0.18);
  --cyan-soft:    rgba(79,216,240,0.14);
  --magenta-soft: rgba(216,96,240,0.14);

  --accent:          var(--violet-light);
  /* El degradado cian daba 1.69:1 con texto blanco. Este mantiene 4.6:1+ */
  --btn-gradient:    linear-gradient(135deg, #6c5af0 0%, #9a4fe0 100%);
  --accent-glow:     rgba(108,90,240,0.18);
  --on-accent:       #ffffff;
  --amber:       #fbbf24;
  --red:         #f87171;
  --purple:      var(--violet-light);
}



html, body {

  height:100%; font-family:var(--font);

  background:var(--bg-main); color:var(--ink);

  font-size:14px; line-height:1.55;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

  overflow:hidden;

}



/* ── LAYOUT ── */

#root { height:100vh; }

.app  { display:flex; height:100vh; overflow:hidden; background:var(--bg-main); }



/* ── SIDEBAR ── */

.sidebar {

  width:var(--sidebar-w); flex-shrink:0;

  background:transparent;

  display:flex; flex-direction:column; overflow:hidden;

  border-right:none;

}

.sidebar-brand { padding:22px 24px 20px; border-bottom:none; }

.brand-logo    { display:flex; align-items:center; gap:11px; }

.brand-icon {

  width:38px; height:38px;

  background:var(--grad-brand);

  border-radius:50%; display:flex; align-items:center; justify-content:center;

  font-size:17px; box-shadow:var(--shadow-violet); color:#fff; flex-shrink:0; font-weight:800;

}

.brand-name { font-size:16.5px; font-weight:700; color:var(--side-ink); letter-spacing:-.3px; }

.brand-sub  { font-size:10px; color:var(--side-ink-3); margin-top:1px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; }



.sidebar-nav { flex:1; overflow-y:auto; padding:14px 12px; }

/* El logo es un JPEG rectangular: con width:100% el borde derecho quedaba
   recto. Se recorta a un ancho propio y se redondean las 4 esquinas. */
.sidebar-brand img {
  border-radius:12px; display:block; width:auto; max-width:100%;
  object-fit:contain; object-position:left center;
}

.sidebar-nav::-webkit-scrollbar { width:0; }

.nav-section { font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--side-ink-3); padding:18px 12px 8px; }

.nav-item {

  display:flex; align-items:center; gap:12px; padding:12px 24px;

  margin:0 -12px 2px; border-radius:0; cursor:pointer;

  transition:background .15s, color .15s;

  color:var(--side-ink-2); font-size:13.5px; font-weight:500;

  position:relative;

}

.nav-item:hover { background:var(--side-hover); color:var(--side-ink); }

.nav-item.active {

  background:var(--side-active-bg); color:var(--side-ink); font-weight:600;

}

.nav-item.active .nav-icon { color:var(--violet); }

.nav-item.active::before {

  content:''; position:absolute; right:0; top:0;

  width:3px; height:100%; border-radius:0; background:var(--violet);

}

.nav-icon  { font-size:16px; width:20px; text-align:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; }

.nav-badge {

  margin-left:auto; background:var(--red);

  color:#fff; font-size:10px; font-weight:700;

  padding:2px 7px; border-radius:20px;

  min-width:20px; height:20px; display:flex; align-items:center; justify-content:center;

}



.sidebar-footer { border-top:1px solid var(--side-border); padding:14px 12px; }

.user-card { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--radius); cursor:default; transition:background .15s; }

.user-card:hover { background:var(--side-hover); }

.avatar {

  width:34px; height:34px; border-radius:9px; display:flex; align-items:center;

  justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; font-family:var(--mono);

}

.avatar-super  { background:var(--grad-warm) !important; color:#fff !important; }

.avatar-admin  { background:var(--grad-cool) !important; color:#fff !important; }

.avatar-cajero { background:linear-gradient(135deg, var(--green), var(--green-dark)) !important; color:#fff !important; }

.user-info { flex:1; min-width:0; }

.user-name { font-size:13px; font-weight:600; color:var(--side-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.user-role { font-size:11px; color:var(--side-ink-3); margin-top:1px; }

.logout-btn { font-size:16px; color:var(--side-ink-3); cursor:pointer; padding:6px; border-radius:8px; transition:all .15s; border:none; background:none; display:flex; align-items:center; }

.logout-btn:hover { color:var(--red); background:var(--red-glow); }



/* ── MAIN ── */

.main {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-panel);
  border-radius:var(--radius-panel) 0 0 0;
  border-left:1px solid var(--border-glow);
  border-top:1px solid var(--border-glow);
  margin-top:14px;
}

.topbar {

  height:var(--header-h); background:transparent;

  border-bottom:none; display:flex; align-items:center;

  padding:0 30px; gap:14px; flex-shrink:0;

}

/* Era un bloque plano: el SVG del icono caía a su propia línea y el título
   quedaba debajo. Como fila flex, el icono se alinea a la izquierda del texto. */
.topbar-title   {
  font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.2px;
  display:flex; align-items:center; gap:9px; min-width:0;
}
.topbar-title > span { display:inline-flex; align-items:center; flex-shrink:0; }
.topbar-title svg { display:block; }

.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }

.content { flex:1; overflow-y:auto; padding:14px 30px 34px; animation:fadeIn .25s ease-out; }

.content::-webkit-scrollbar { width:8px; }

.content::-webkit-scrollbar-thumb { background:var(--border-glow); border-radius:20px; }

.content::-webkit-scrollbar-thumb:hover { background:var(--ink-4); }

@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }



/* ── BOTONES ── */

.btn {

  display:inline-flex; align-items:center; justify-content:center; gap:7px;

  padding:10px 18px; border-radius:var(--radius-pill); font-size:13px;

  font-weight:600; cursor:pointer; border:1px solid transparent;

  transition:all .15s; font-family:var(--font); white-space:nowrap; line-height:1;

}

.btn-primary {

  background:var(--btn-gradient); color:var(--on-accent);

  box-shadow:var(--shadow-violet);

}

.btn-primary:hover { filter:brightness(1.08); box-shadow:var(--shadow-md); }

.btn-secondary { background:var(--bg-solid); border-color:var(--border-glow); color:var(--ink-2); box-shadow:0 1px 2px rgba(16,24,40,.04); }

.btn-secondary:hover { background:var(--glass-light); color:var(--ink); border-color:var(--ink-4); }

.btn-ghost { background:transparent; color:var(--ink-3); padding:8px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font); }

.btn-ghost:hover { background:var(--glass-light); color:var(--ink); }



.emoji-picker-grid {

  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;

  max-height:170px; overflow-y:auto; padding-right:2px;

}

.emoji-picker-item {

  font-size:20px; background:transparent; border:none; cursor:pointer;

  border-radius:var(--radius-sm); padding:5px 0; line-height:1;

  transition:background .12s;

}

.emoji-picker-item:hover { background:var(--bg-surface-2); }

.btn-danger { background:var(--red-glow); color:var(--red); border-color:rgba(220,38,38,.2); }

.btn-danger:hover { background:rgba(220,38,38,.16); }

.btn-success { background:var(--green-glow); color:var(--green-dark); border-color:rgba(47,158,68,.22); }

:root[data-theme="dark"] .btn-success { color:var(--green); }

.btn-success:hover { background:rgba(47,158,68,.16); }

.btn-sm { padding:6px 11px !important; font-size:12px !important; border-radius:var(--radius-sm) !important; }

.btn:disabled { opacity:.5; cursor:not-allowed; filter:none!important; box-shadow:none!important; }



/* ── CARDS ── */

.card {

  background:var(--bg-surface);

  border:1px solid var(--border-glow); border-radius:var(--radius-lg);

  padding:24px; box-shadow:var(--shadow-glass);

}

.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; }

.card-title  { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.2px; }

.card-sub    { font-size:12px; color:var(--ink-3); margin-top:2px; }



/* ── STAT CARDS ── */

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-bottom:24px; }

.dash-split-grid { display:grid; grid-template-columns:1fr 320px; gap:20px; }

.stat-card {

  background:var(--bg-surface);

  border:1px solid var(--border-glow); border-radius:var(--radius-lg);

  padding:20px 22px; display:flex; flex-direction:column; gap:6px;

  position:relative; overflow:hidden;

  box-shadow:var(--shadow-glass); transition:transform .2s, box-shadow .2s, border-color .2s;

}

.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#dcdcea; }

/* Jerarquía del video: icono arriba, número grande, etiqueta debajo.
   Se reordena por CSS — el marcado de las vistas no se toca. */
.stat-card > .stat-icon  { order:1; }
.stat-card > .stat-value { order:2; }
.stat-card > .stat-label { order:3; }
.stat-card > .stat-meta  { order:4; }
/* Cualquier otro hijo (por ejemplo una mini gráfica) va al final, no al inicio:
   sin esto quedaría con order:0 y saltaría arriba del icono. */
.stat-card > *           { order:5; }
.stat-card > .stat-icon  { order:1; }
.stat-card > .stat-value { order:2; }
.stat-card > .stat-label { order:3; }
.stat-spark              { order:5; margin-top:10px; width:100%; }

.stat-icon  {
  width:44px; height:44px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:19px; margin-bottom:10px; color:var(--violet);
  background:var(--violet-soft);
}

.stat-label { font-size:12.5px; color:var(--ink-3); font-weight:500; text-transform:none; letter-spacing:0; }

.stat-value {
  font-size:29px; font-weight:700; color:var(--ink); letter-spacing:-1.1px;
  font-family:var(--font); font-variant-numeric:tabular-nums; line-height:1.12;
}

.stat-meta  { font-size:12px; color:var(--ink-3); }

.stat-meta.up   { color:var(--green-dark); font-weight:600; }

.stat-meta.down { color:var(--red); font-weight:600; }



/* ── TABLAS ── */

.table-wrap { overflow-x:auto; }

table { width:100%; border-collapse:collapse; }

th {
  padding:11px 14px; text-align:left; font-size:11.5px; font-weight:600;
  color:var(--ink-3); text-transform:none; letter-spacing:.2px;
  background:var(--glass-light); border-bottom:none; white-space:nowrap;
}
th:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
th:last-child  { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }

td { padding:13px 14px; border-bottom:1px solid var(--border-glow); font-size:13px; color:var(--ink-2); vertical-align:middle; transition:background .12s; }

tr:last-child td { border-bottom:none; }

tbody tr { transition:background .12s; }

tbody tr:hover td { background:var(--violet-soft); color:var(--ink); }



/* ── BADGES ── */

.badge        { display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }

.badge-green  { background:var(--green-glow); color:var(--green-dark); border:1px solid rgba(47,158,68,.2); }

.badge-lime   { background:var(--lime-glow);  color:var(--lime-dark); border:1px solid rgba(189,207,0,.25); }

.badge-amber  { background:var(--amber-glow); color:var(--amber); border:1px solid rgba(217,119,6,.2); }

.badge-red    { background:var(--red-glow);   color:var(--red); border:1px solid rgba(220,38,38,.2); }

.badge-blue   { background:var(--accent-glow); color:var(--violet-dark); border:1px solid rgba(108,90,240,.20); }

.badge-purple { background:var(--magenta-soft); color:#a83fc0; border:1px solid rgba(216,96,240,.22); }

.badge-gray   { background:var(--glass-light); color:var(--ink-3); border:1px solid var(--border-glow); }

:root[data-theme="dark"] .badge-green { color:var(--green); }

:root[data-theme="dark"] .badge-blue  { color:#818ccc; }



/* ── FORMULARIOS ── */

.form-group { margin-bottom:16px; }

.form-label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }

.form-input, .form-select {

  width:100%; padding:10px 13px; background:var(--bg-solid);

  border:1px solid var(--border-glow); border-radius:var(--radius);

  color:var(--ink); font-size:13.5px; font-family:var(--font);

  transition:border-color .15s, box-shadow .15s; outline:none;

}

.form-input:focus, .form-select:focus {

  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);

}

.form-input::placeholder { color:var(--ink-4); }

.form-select {

  appearance:none;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  background-repeat:no-repeat; background-position:right 12px center;

  padding-right:32px; cursor:pointer;

}

.form-select option { background:var(--bg-solid); color:var(--ink); }



/* ── MODAL ── */

.modal-backdrop {

  position:fixed; inset:0; background:rgba(16,19,40,.45); backdrop-filter:blur(4px);

  display:flex; align-items:center; justify-content:center; z-index:1000;

  animation:fadeIn .15s ease; padding:20px;

}

.modal {

  background:var(--bg-surface); border:1px solid var(--border-glow);

  border-radius:var(--radius-panel); width:100%; max-width:480px; max-height:90vh;

  overflow:hidden; display:flex; flex-direction:column;

  box-shadow:var(--shadow-lg);

  animation:slideUp .2s ease;

}

.modal-lg  { max-width:680px; }

@keyframes slideUp { from{transform:translateY(16px);opacity:0} to{transform:none;opacity:1} }

.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border-glow); flex-shrink:0; }

.modal-title  { font-size:16px; font-weight:700; color:var(--ink); }

.modal-body   { padding:20px 22px; overflow-y:auto; flex:1; }

.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border-glow); flex-shrink:0; background:var(--bg-main); }



/* ── LOGIN ── */

.login-screen {

  height:100vh; display:flex; align-items:center; justify-content:center;

  position:relative; overflow:hidden; padding-bottom:5rem;

  /* ── Colores ORIGINALES de EduPago, aislados del rediseño ──
     Redefinir los tokens aquí re-tiñe solo el login: el resto
     del sistema sigue con la paleta del video.                */

  --accent:       var(--lime);

  --accent-glow:  rgba(189,207,0,0.18);

  --btn-gradient: linear-gradient(135deg, #bdcf00 0%, #2f9e44 100%);

  --border-glow:  rgba(255,255,255,0.07);

  --bg-solid:     #272c52;

  --bg-surface:   #272c52;

  --ink:    #eef1f8;

  --ink-2:  #c4cad8;

  --ink-3:  #8b93a7;

  --ink-4:  #69798f;

  background:#272c64;

}

.login-screen::before {

  content:''; position:absolute; inset:0;

  background:

    radial-gradient(ellipse 60% 60% at 80% 15%, rgba(189,207,0,.10) 0%, transparent 60%),

    radial-gradient(ellipse 60% 60% at 15% 85%, rgba(73,175,84,.10) 0%, transparent 60%);

  pointer-events:none;

}

.login-card {

  width:390px; background:#272c52; border:1px solid rgba(255,255,255,.07);

  border-radius:var(--radius-lg); padding:34px 32px; box-shadow:0 16px 40px rgba(0,0,0,.5);

  animation:slideUp .3s ease; position:relative; z-index:1;

}

.login-logo    { text-align:center; margin-bottom:30px; }

.login-brand   { font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-1px; }

.login-tagline { font-size:12px; color:var(--green); margin-top:5px; font-weight:600; letter-spacing:.3px; }

.login-label   { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }

.login-input {

  width:100%; padding:11px 14px; 

  /*background:var(--bg-solid);*/

  border:1px solid var(--border-glow); border-radius:var(--radius);

  /*color:var(--ink);*/

  font-size:14px; font-family:var(--font); outline:none;

  transition:border-color .15s, box-shadow .15s;

}

.login-input:focus { border-color:var(--accent); 

box-shadow:0 0 0 3px var(--accent-glow); 

}

.login-btn {

  width:100%; margin-top:20px; padding:13px;

  background:var(--btn-gradient);

  color:#fff; font-size:14px; font-weight:700; border:none; border-radius:var(--radius);

  cursor:pointer; transition:all .15s; font-family:var(--font);

  letter-spacing:.2px; box-shadow:0 4px 14px rgba(47,158,68,.28);

}

.login-btn:hover:not(:disabled) { filter:brightness(1.1); box-shadow:var(--shadow-md); }

.login-btn:disabled { opacity:.6; cursor:not-allowed; }

.login-demo { display:flex; gap:8px; margin-top:16px; }

.demo-pill {

  flex:1; padding:8px 6px; background:var(--bg-solid); border:1px solid var(--border-glow);

  border-radius:var(--radius-sm); cursor:pointer; font-size:11px;

  font-weight:500; color:var(--ink-2); text-align:center; transition:all .15s;

  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

}

.demo-pill:hover { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }

.login-error { color:var(--red); font-size:12px; margin-top:8px; }



/* ── POS / CAJA ── */

.pos-layout { display:grid; grid-template-columns:1fr 360px; gap:20px; height:100%; min-height:600px; }

.pos-products { display:flex; flex-direction:column; background:var(--bg-surface); border:1px solid var(--border-glow); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-glass); }

.pos-header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-glow); flex-shrink:0; }

.pos-products-grid { flex:1; overflow-y:auto; padding:14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; align-content:start; }



.product-card {

  background:var(--bg-solid); border:1px solid var(--border-glow);

  border-radius:var(--radius); padding:14px 12px; cursor:pointer;

  transition:all .15s; text-align:center;

}

.product-card:hover { border-color:var(--violet); transform:translateY(-3px); box-shadow:var(--shadow-md); }

.product-emoji { font-size:26px; margin-bottom:7px; }

.product-name  { font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:3px; line-height:1.3; }

.product-type  { font-size:10.5px; color:var(--ink-3); margin-bottom:5px; text-transform:capitalize; }

.product-price { font-size:13.5px; font-weight:700; color:var(--violet); font-variant-numeric:tabular-nums; }

:root[data-theme="dark"] .product-price { color:var(--violet-light); }



.pos-cart { display:flex; flex-direction:column; background:var(--bg-surface); border:1px solid var(--border-glow); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-glass); }

.cart-header { padding:14px 16px; border-bottom:1px solid var(--border-glow); flex-shrink:0; }

.cart-customer {

  display:flex; align-items:center; gap:10px; padding:9px 12px;

  background:var(--glass-light); border:1px solid var(--border-glow);

  border-radius:var(--radius-sm); cursor:pointer; margin-top:8px;

  transition:all .15s;

}

.cart-customer:hover { background:var(--glass-hover); border-color:var(--accent); }

.cart-items { flex:1; overflow-y:auto; padding:10px 12px; }

.cart-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); border-bottom:1px solid var(--border-glow); }

.cart-item:last-child { border-bottom:none; }

.cart-item-info  { flex:1; min-width:0; }

.cart-item-name  { font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cart-item-qty   { display:flex; align-items:center; gap:6px; margin-top:3px; }

.qty-btn { width:22px; height:22px; border-radius:5px; border:1px solid var(--border-glow); background:var(--bg-solid); color:var(--ink); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .12s; line-height:1; font-family:var(--mono); }

.qty-btn:hover { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }

.qty-num { font-size:12.5px; font-weight:600; font-family:var(--mono); min-width:18px; text-align:center; }

.cart-item-price { font-size:13.5px; font-weight:700; font-family:var(--mono); color:var(--ink); }

.cart-remove { font-size:12px; color:var(--ink-4); cursor:pointer; display:block; margin-top:3px; transition:color .12s; text-align:right; }

.cart-remove:hover { color:var(--red); }



.cart-totals { padding:12px 16px; border-top:1px solid var(--border-glow); border-bottom:1px solid var(--border-glow); flex-shrink:0; }

.totals-row  { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:13px; color:var(--ink-3); }

.totals-total { font-size:18px; font-weight:800; font-family:var(--mono); color:var(--ink); }

.text-mono { font-family:var(--mono); }



.payment-methods { display:flex; gap:7px; padding:12px 14px; border-bottom:1px solid var(--border-glow); flex-shrink:0; flex-wrap:wrap; }

.pay-method {

  flex:1; min-width:60px; display:flex; flex-direction:column; align-items:center; gap:4px;

  padding:8px 6px; border-radius:var(--radius-sm); border:1px solid var(--border-glow);

  cursor:pointer; transition:all .15s; font-size:11px; font-weight:600; color:var(--ink-3);

  background:var(--bg-solid);

}

.pay-method:hover { background:var(--glass-light); color:var(--ink); }

.pay-method.selected { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }

.pm-icon { font-size:18px; }

.checkout-btn {

  margin:12px; padding:13px; background:var(--btn-gradient);

  color:#fff; font-size:14px; font-weight:700; border:none;

  border-radius:var(--radius); cursor:pointer; transition:all .15s;

  font-family:var(--font); box-shadow:0 1px 2px rgba(16,24,40,.12);

}

.checkout-btn:hover:not(:disabled) { filter:brightness(1.1); box-shadow:var(--shadow-md); }

.checkout-btn:disabled { opacity:.45; cursor:not-allowed; filter:none; box-shadow:none; }



/* ── SEARCH BAR ── */

.search-bar { position:relative; display:flex; align-items:center; }

.search-bar .search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px; pointer-events:none; color:var(--ink-4); }

.search-bar input {

  width:100%; padding:9px 14px 9px 38px; background:var(--bg-solid);

  border:1px solid var(--border-glow); border-radius:var(--radius-sm);

  color:var(--ink); font-size:13px; font-family:var(--font); outline:none;

  transition:border-color .15s, box-shadow .15s;

}

.search-bar input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }

.search-bar input::placeholder { color:var(--ink-4); }



/* ── EMPTY STATE ── */

.empty-state { text-align:center; padding:40px 20px; }

.empty-icon  { font-size:38px; margin-bottom:10px; opacity:.4; }

.empty-text  { font-size:14px; color:var(--ink-3); font-weight:500; }

.empty-sub   { font-size:12px; color:var(--ink-4); margin-top:4px; }



/* ── TICKET ��─ */

.ticket { background:#fff; color:#000; padding:18px 16px; border-radius:var(--radius); font-family:var(--mono); font-size:12px; max-width:280px; margin:0 auto; box-shadow:var(--shadow-md); }

.ticket-divider { border:none; border-top:1px dashed #ccc; margin:8px 0; }



/* ── SPEI BOX ── */

.spei-box {

  background:var(--grad-warm);

  border-radius:var(--radius-lg); padding:22px; margin:12px 0;

  border:none; box-shadow:var(--shadow-violet);

}

.clabe-display { font-family:var(--mono); font-size:22px; font-weight:700; color:#fff; letter-spacing:3px; text-align:center; padding:12px; background:rgba(0,0,0,.2); border-radius:var(--radius); margin:12px 0; }

.spei-info-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12px; }

.spei-label  { color:rgba(255,255,255,.55); font-size:10px; text-transform:uppercase; letter-spacing:.5px; }

.spei-value  { color:#fff; font-weight:600; font-family:var(--mono); font-size:13px; }

.copy-btn { display:flex; align-items:center; gap:6px; padding:8px 14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-sm); color:#fff; font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; font-family:var(--font); width:100%; justify-content:center; }

.copy-btn:hover  { background:rgba(255,255,255,.2); }

.copy-btn.copied { background:rgba(47,158,68,.35); border-color:rgba(47,158,68,.6); color:#fff; }



/* ── QR CoDi ── */

.codi-qr { width:180px; height:180px; margin:0 auto; background:#fff; border-radius:var(--radius); padding:10px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-glass); }

.qr-svg  { width:100%; height:100%; }



/* ── SPINNER ── */

.spinner { display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }

@keyframes spin { to { transform:rotate(360deg); } }



/* ── THEME TOGGLE ── */

.theme-toggle {
  padding:9px 11px; border-radius:var(--radius-pill); border:1px solid var(--border-glow);
  background:var(--bg-surface); cursor:pointer; font-size:15px; color:var(--ink-3);
  transition:all .15s; display:flex; align-items:center; line-height:1;
}

/* Antes esta regla era `display:none`, así que el usuario no podía cambiar de tema. */
.theme-toggle:hover { background:var(--violet-soft); color:var(--violet); border-color:var(--violet); }

/* ── MOBILE MENU BUTTON + DRAWER BACKDROP (ocultos en escritorio) ── */

.mobile-menu-btn {

  display:none; align-items:center; justify-content:center;

  width:38px; height:38px; flex-shrink:0;

  border:1px solid var(--border-glow); border-radius:var(--radius-sm);

  background:var(--bg-solid); color:var(--ink-2); cursor:pointer;

  transition:all .15s; padding:0; margin-right:2px;

}

.mobile-menu-btn:hover { background:var(--glass-light); color:var(--ink); }

.nav-backdrop { display:none; }



/* ── PROGRESS BAR ── */

.progress-bar  { height:6px; background:var(--glass-light); border-radius:10px; overflow:hidden; margin-top:8px; }

.progress-fill { height:100%; border-radius:10px; transition:width 1s ease; background:var(--grad-cool); }



/* ── VERIF ROW ── */

.verif-row { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--glass-light); border-radius:var(--radius-sm); margin-top:10px; }

.verif-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.verif-dot.pulse { animation:pulse 1.5s infinite; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }



/* ── Toast animation ── */

@keyframes slideIn {

  from { opacity:0; transform:translateY(-10px) translateX(10px); }

  to   { opacity:1; transform:translateY(0) translateX(0); }

}



/* ══════════════════════════════════════════════════════

   RESPONSIVE LAYOUT — funciona en cualquier dispositivo

   · ≥ 1025px  → sidebar fijo completo (256px)

   · 769–1024  → sidebar fijo (un poco más angosto) + grids fluidos

   · ≤ 768px   → sidebar como drawer deslizable + botón de menú

══════════════════════════════════════════════════════ */



/* ── Asegura tablas y bloques anchos con scroll horizontal limpio ── */

.table-wrap { -webkit-overflow-scrolling: touch; }



/* ── TABLETS / PANTALLAS MEDIANAS (769–1024px) ── */

@media (max-width: 1024px) and (min-width: 769px) {

  :root { --sidebar-w: 220px; }

  .content { padding: 22px; }

  .pos-layout { grid-template-columns: 1fr 320px; }

}



/* ── TABLETS GRANDES Y MENORES: POS apilado (≤900px) ── */

@media (max-width: 900px) {

  .pos-layout {

    grid-template-columns: 1fr;

    min-height: auto;

    height: auto;

  }

  .pos-cart { max-height: 60vh; }

  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

}



/* ── MÓVILES Y TABLETS VERTICALES (≤768px): SIDEBAR COMO DRAWER ── */

@media (max-width: 768px) {

  /* El layout deja de reservar espacio para el sidebar */

  .app { display: block; height: 100vh; overflow: hidden; }



  /* Botón hamburguesa visible en la topbar */

  .mobile-menu-btn { display: flex; }



  /* Sidebar fuera de pantalla, entra al activar el menú */

  .sidebar {

    position: fixed;

    top: 0;

    left: 0;

    height: 100%;

    width: 270px;

    max-width: 82vw;

    z-index: 300;

    transform: translateX(-100%);

    transition: transform .25s ease;

    box-shadow: var(--shadow-lg);

  }

  /* En modo drawer sí necesita fondo sólido y borde */

  .sidebar { background: var(--bg-surface); border-right: 1px solid var(--border-glow); }

  /* El panel principal ocupa todo el ancho: sin esquina redondeada ni margen */

  .main { border-radius:0; border-left:none; border-top:none; margin-top:0; height:100vh; }

  .topbar  { padding: 0 16px; }

  .content { padding: 4px 16px 22px; }

  /* La barra de acento vuelve al borde izquierdo dentro del drawer */

  .nav-item.active::before { right:auto; left:0; }


  .app.nav-open .sidebar { transform: translateX(0); }



  /* Fondo oscuro detrás del drawer */

  .nav-backdrop {

    display: block;

    position: fixed;

    inset: 0;

    background: rgba(16, 19, 40, .5);

    backdrop-filter: blur(2px);

    z-index: 200;

    opacity: 0;

    pointer-events: none;

    transition: opacity .25s ease;

  }

  .app.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }



  /* La zona principal ocupa todo el ancho */

  .main { height: 100vh; width: 100%; }



  .topbar { padding: 0 14px; height: 58px; gap: 10px; }

  .topbar-title { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .content { padding: 16px; }

  .card { padding: 16px; }

  .dash-split-grid { grid-template-columns: 1fr; }



  /* Modales a ancho casi completo */

  .modal { max-width: 95%; max-height: 88vh; }

  .modal-lg { max-width: 95%; }

  .modal-header { padding: 14px 16px; }

  .modal-body { padding: 16px; }

  .modal-footer { padding: 14px 16px; }



  /* Login */

  .login-card { width: 100%; max-width: 380px; padding: 28px 22px; }

  .login-brand { font-size: 24px; }

}



/* ── MÓVILES ESTÁNDAR (≤560px) ── */

@media (max-width: 560px) {

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }



  /* "Nuevo cobro" pasa a botón de ícono para ahorrar espacio */

  .topbar-actions .btn-primary { font-size: 0 !important; gap: 0 !important; padding: 9px !important; }



  .card-header { flex-wrap: wrap; }

  .pos-cart { max-height: none; }

}



/* ── MÓVILES PEQUEÑOS (≤420px) ── */

@media (max-width: 420px) {

  .topbar-title { font-size: 14px; }

  .topbar-actions { gap: 6px; }

  .content { padding: 12px; }



  .stats-grid { grid-template-columns: 1fr; }



  .pos-products-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

  .product-emoji { font-size: 22px; }

  .product-name { font-size: 11.5px; }



  .ticket { max-width: 100%; }

}



/* ── PORTAL FAMILIA: header y pestañas responsive ── */

.pf-tabs {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

}

.pf-tabs::-webkit-scrollbar { display: none; }

.pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.pf-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; }

@media (max-width: 480px) {
  .pf-grid-2, .pf-grid-1-2 { grid-template-columns: 1fr; }
}



@media (max-width: 640px) {

  .pf-header {

    height: auto !important;

    min-height: 60px;

    flex-wrap: wrap !important;

    row-gap: 6px;

    padding: 10px 14px !important;

  }

  .pf-header-actions {

    gap: 8px !important;

  }

  /* El badge de la escuela y el subtítulo "Portal Familiar" no caben

     en una pantalla chica — se ocultan y solo queda lo esencial:

     logo, nombre corto, avatar y botón de salir. */

  .pf-header-badge { display: none !important; }

  .pf-header-user-sub { display: none !important; }

  .pf-header-user-name {

    max-width: 110px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

  }

}



@media (max-width: 420px) {
  .pf-header-user-name { max-width: 78px !important; }
}

/* ══════════════════════════════════════════════════════
   COMPONENTES NUEVOS — tomados del video de referencia
   Son opcionales: se activan añadiendo la clase en la vista.
══════════════════════════════════════════════════════ */

/* ── Encabezado de sección ("Project statistics" en el video) ── */
.section-title {
  font-size:23px; font-weight:700; color:var(--ink);
  letter-spacing:-.7px; display:flex; align-items:center; gap:9px; margin-bottom:18px;
}

/* ── Grupo de píldoras / filtros segmentados (30 días · 90 días · …) ── */
.pill-group { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pill {
  padding:9px 18px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:600;
  border:1px solid var(--border-glow); background:var(--bg-surface); color:var(--ink-3);
  cursor:pointer; transition:all .15s; font-family:var(--font); white-space:nowrap; line-height:1;
}
.pill:hover { color:var(--ink); border-color:#dcdcea; }
.pill.active {
  background:var(--violet); border-color:var(--violet); color:#fff;
  box-shadow:var(--shadow-violet);
}

/* ── Tarjeta destacada con degradado (la tarjeta "Bounce Rate") ── */
.stat-card.is-featured {
  background:var(--grad-brand); border:none; color:#fff;
  box-shadow:0 10px 28px rgba(108,90,240,.30);
}
.stat-card.is-featured .stat-value { color:#fff; }
.stat-card.is-featured .stat-label { color:rgba(255,255,255,.88); }
.stat-card.is-featured .stat-meta  { color:rgba(255,255,255,.80); }
.stat-card.is-featured .stat-icon  { background:rgba(255,255,255,.22); color:#fff; }
.stat-card.is-featured:hover { border-color:transparent; }

/* ── Indicador de variación arriba a la derecha (▲ 1.2% / ▼ 2.1%) ── */
.stat-delta {
  position:absolute; top:20px; right:22px;
  font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:4px;
}
.stat-delta.up   { color:var(--green); }
.stat-delta.down { color:var(--red); }
.stat-delta::before { content:'▲'; font-size:8px; }
.stat-delta.down::before { content:'▼'; }
.stat-card.is-featured .stat-delta { color:#fff; }

/* ── Tintes para los azulejos de icono ── */
.stat-icon.tint-cyan    { background:var(--cyan-soft);    color:#1aa8c4; }
.stat-icon.tint-magenta { background:var(--magenta-soft); color:#b845d0; }
.stat-icon.tint-green   { background:var(--green-glow);   color:var(--green-dark); }
.stat-icon.tint-amber   { background:var(--amber-glow);   color:var(--amber); }
.stat-icon.tint-red     { background:var(--red-glow);     color:var(--red); }

/* ── Barras de desplazamiento discretas ── */
.content::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb { background:#dcdde8; border-radius:20px; }
* { scrollbar-width:thin; scrollbar-color:#dcdde8 transparent; }

/* ── Encabezado de sección: apila filtros en pantallas angostas ── */
@media (max-width: 768px) {
  .section-title {
    flex-direction:column; align-items:flex-start; gap:12px;
    font-size:20px; margin-bottom:16px;
  }
  .section-title .pill-group { margin-left:0 !important; width:100%; }
  .pill { padding:8px 14px; font-size:12px; }
}


/* ══════════════════════════════════════════════════════
   AJUSTES ESPECÍFICOS DEL MODO OSCURO
   Detalles que no traducen automáticamente desde el modo claro.
══════════════════════════════════════════════════════ */

/* ── El drawer móvil debe usar el panel, no la tarjeta ── */
@media (max-width: 768px) {
  :root[data-theme="dark"] .sidebar { background:var(--bg-panel); }
}

/* ── El panel se separa del lienzo con un borde superior sutil ── */
:root[data-theme="dark"] .main {
  border-left-color:rgba(255,255,255,.07);
  border-top-color:rgba(255,255,255,.07);
}

/* ── Tarjeta destacada: en oscuro el degradado a full brillo deslumbra ── */
:root[data-theme="dark"] .stat-card.is-featured {
  background:linear-gradient(115deg, #2ea8c4 0%, #5946d8 55%, #a845c0 100%);
  box-shadow:0 10px 30px rgba(108,90,240,.35);
}

/* ── Azulejos de icono: tintes translúcidos en vez de pasteles sólidos ── */
:root[data-theme="dark"] .stat-icon              { background:rgba(108,90,240,.18); color:var(--violet-light); }
:root[data-theme="dark"] .stat-icon.tint-cyan    { background:rgba(79,216,240,.15);  color:#6fdcf0; }
:root[data-theme="dark"] .stat-icon.tint-magenta { background:rgba(216,96,240,.15);  color:#e08cf5; }
:root[data-theme="dark"] .stat-icon.tint-green   { background:rgba(73,175,84,.16);   color:#5fc96c; }
:root[data-theme="dark"] .stat-icon.tint-amber   { background:rgba(217,119,6,.16);   color:#f0a63a; }
:root[data-theme="dark"] .stat-icon.tint-red     { background:rgba(229,72,77,.16);   color:#f2777a; }

/* ── Píldora inactiva: la superficie de tarjeta la haría desaparecer ── */
:root[data-theme="dark"] .pill { background:var(--bg-surface-2); }
:root[data-theme="dark"] .pill:hover { border-color:rgba(255,255,255,.20); }

/* ── Hover de fila: el violeta sólido es demasiado fuerte sobre oscuro ── */
:root[data-theme="dark"] tbody tr:hover td { background:rgba(108,90,240,.14); }

/* ── Cabecera de tabla sobre la superficie elevada ── */
:root[data-theme="dark"] th { background:rgba(255,255,255,.045); color:var(--ink-3); }

/* ── Botón secundario: necesita contraste contra la tarjeta ── */
:root[data-theme="dark"] .btn-secondary { background:var(--bg-surface-2); border-color:var(--border-glow); color:var(--ink-2); }
:root[data-theme="dark"] .btn-secondary:hover { background:rgba(255,255,255,.10); color:var(--ink); }

/* ── Campos de formulario ── */
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .search-bar input { background:var(--bg-main); color:var(--ink); }

/* ── Barras de desplazamiento ── */
:root[data-theme="dark"] .content::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); }
:root[data-theme="dark"] * { scrollbar-color:rgba(255,255,255,.14) transparent; }

/* ── Transición al cambiar de tema (se respeta reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .app, .main, .sidebar, .card, .stat-card, .topbar, .modal {
    transition:background-color .22s ease, border-color .22s ease, color .22s ease;
  }
}

/* ── Portal familiar: pestañas desplazables sin barra visible ── */
.pf-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
.pf-tabs::-webkit-scrollbar { display:none; }
@media (max-width: 640px) {
  .pf-header-user-name, .pf-header-user-sub { display:none; }
  .pf-header .badge { display:none; }
}

/* ── Portal familiar: las pestañas Facturas y Configuración quedan como
   hermanas de .pf-body en el árbol, así que se salían del contenedor.
   Esta regla les da el mismo ancho y sangrado sin reestructurar el JSX. ── */
.pf-root > div:not(.pf-header):not(.pf-body) {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(18px,3vw,30px) clamp(18px,3vw,30px);
}

/* ══ Buscador de etiquetas (Familias · Alumnos) ══ */
.buscador-etiquetas {
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  padding:8px 12px; min-height:42px; cursor:text;
  background:var(--bg-surface); border:1px solid var(--border-glow);
  border-radius:var(--radius); transition:border-color .15s, box-shadow .15s;
}
.buscador-etiquetas:focus-within { border-color:var(--violet); box-shadow:0 0 0 3px var(--accent-glow); }
.be-icono { color:var(--ink-4); display:inline-flex; align-items:center; flex-shrink:0; }
.be-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 6px 4px 11px; border-radius:var(--radius-pill);
  background:var(--violet-soft); color:var(--violet-dark);
  font-size:12.5px; font-weight:600; max-width:230px;
}
.be-chip > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.be-chip-x {
  border:none; background:rgba(108,90,240,.16); color:inherit; cursor:pointer;
  width:17px; height:17px; border-radius:50%; flex-shrink:0; line-height:1;
  font-size:13px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font); padding:0;
}
.be-chip-x:hover { background:var(--violet); color:#fff; }
.be-input {
  flex:1; min-width:130px; border:none; outline:none; background:transparent;
  font-family:var(--font); font-size:13.5px; color:var(--ink); padding:3px 0;
}
.be-input::placeholder { color:var(--ink-4); }
.be-limpiar {
  border:none; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:11.5px; font-weight:600; font-family:var(--font); padding:4px 6px;
  border-radius:var(--radius-sm); flex-shrink:0;
}
.be-limpiar:hover { background:var(--glass-light); color:var(--ink); }
.be-ayuda { font-size:11.5px; color:var(--ink-4); margin-top:6px; }
:root[data-theme="dark"] .be-chip { background:rgba(108,90,240,.22); color:#b6a9fa; }

/* ══ Menú de perfil (pie del sidebar) ══ */
.menu-perfil {
  position:absolute; bottom:calc(100% + 8px); left:0; right:0; z-index:220;
  background:var(--bg-surface); border:1px solid var(--border-glow);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:6px; animation:slideUp .15s ease;
}
.menu-perfil-item {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:9px 11px; border:none; background:transparent; cursor:pointer;
  border-radius:var(--radius-sm); font-family:var(--font); font-size:13px;
  color:var(--ink-2); text-align:left; transition:background .12s, color .12s;
}
.menu-perfil-item:hover { background:var(--violet-soft); color:var(--violet); }
.menu-perfil-item.peligro:hover { background:var(--red-glow); color:var(--red); }
.menu-perfil-sep { height:1px; background:var(--border-glow); margin:5px 2px; }
.user-card { border-radius:var(--radius); transition:background .12s; }
.user-card:hover { background:var(--side-hover); }

/* ══ Ficha técnica (credencial de alumno / tutor) ══ */
.ficha-tecnica { overflow:hidden; }
.ficha-top {
  position:relative; padding:26px 24px 20px; text-align:center;
  background:var(--grad-brand); color:#fff;
}
.ficha-cerrar {
  position:absolute; top:12px; right:12px; width:28px; height:28px;
  border:none; border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.20); display:flex; align-items:center; justify-content:center;
}
.ficha-cerrar:hover { background:rgba(255,255,255,.34); }
.ficha-foto {
  width:96px; height:96px; margin:0 auto 13px; border-radius:18px;
  overflow:hidden; background:#fff; padding:3px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.ficha-foto > * { border-radius:15px; }
.ficha-nombre { font-size:18px; font-weight:700; letter-spacing:-.4px; line-height:1.25; }
.ficha-sub { font-size:12.5px; opacity:.9; margin-top:3px; }
.ficha-escuela {
  font-size:11px; opacity:.78; margin-top:9px; text-transform:uppercase; letter-spacing:.5px;
}
.ficha-datos { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.ficha-dato-k {
  font-size:10.5px; color:var(--ink-4); text-transform:uppercase;
  letter-spacing:.4px; margin-bottom:2px;
}
.ficha-dato-v { font-size:13px; color:var(--ink); word-break:break-word; }

/* ══ Paginador reutilizable ══ */
.paginador {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 2px 4px; margin-top:4px;
}
.pag-info { font-size:12.5px; color:var(--ink-3); }
.pag-nav  { display:flex; align-items:center; gap:4px; margin-left:auto; }
.pag-btn {
  min-width:32px; height:32px; padding:0 9px; border-radius:var(--radius-sm);
  border:1px solid var(--border-glow); background:var(--bg-surface);
  color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer;
  font-family:var(--font); transition:all .12s;
}
.pag-btn:hover:not(:disabled) { border-color:var(--violet); color:var(--violet); }
.pag-btn:disabled { opacity:.4; cursor:not-allowed; }
.pag-btn.activo {
  background:var(--violet); border-color:var(--violet); color:#fff;
}
.pag-elipsis { color:var(--ink-4); padding:0 2px; font-size:12.5px; }
.pag-tam {
  height:32px; padding:0 9px; border-radius:var(--radius-sm);
  border:1px solid var(--border-glow); background:var(--bg-surface);
  color:var(--ink-3); font-size:12px; font-family:var(--font); cursor:pointer;
}
@media (max-width: 640px) {
  .pag-nav { margin-left:0; width:100%; justify-content:center; }
  .pag-tam { margin-left:auto; }
}