/* ════════════════════════════════════════════════════════════════
   PIXEL UI — sistema visual compartido (PROTOTIPO, no publicado)
   Tema claro inspirado en macOS · azul como acento funcional
   · oro PIXEL solo en el logotipo (lockup Halo)
   ════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  /* Superficies */
  --bg:          #f5f5f7;   /* fondo general */
  --surface:     #ffffff;   /* tarjetas, tablas, formularios */
  --surface-2:   #f5f5f7;   /* rellenos secundarios dentro de tarjetas */
  --surface-3:   #e8e8ed;   /* pistas de barras, interruptor apagado */
  --field:       #ffffff;
  --field-line:  #d2d2d7;

  /* Texto */
  --text:        #1d1d1f;
  --text-2:      #6e6e73;   /* 5.0:1 sobre blanco */
  --text-3:      #75757a;   /* 4.6:1: notas y encabezados de tabla */

  /* Líneas y rellenos neutros */
  --line:        rgba(0,0,0,.08);
  --line-strong: rgba(0,0,0,.14);
  --fill:        rgba(0,0,0,.05);   /* hover, selección neutra */
  --fill-2:      rgba(0,0,0,.08);

  /* Acento funcional: azul Apple (selección, foco, acción principal) */
  --accent:       #0071e3;
  --accent-hover: #0077ed;
  --accent-press: #0062c4;
  --accent-text:  #0066cc;
  --accent-soft:  rgba(0,113,227,.10);
  --accent-line:  rgba(0,113,227,.45);
  --on-accent:    #ffffff;

  /* Marca: oro PIXEL (solo logotipo y detalles puntuales) */
  --gold:        #b58a36;   /* solo logotipo */
  --gold-soft:   rgba(181,138,54,.12);

  /* Estados (texto oscuro suficiente para leerse en su fondo suave) */
  --ok:     #1f7a37;  --ok-soft:     rgba(52,199,89,.15);   --ok-fill:#34c759;
  --warn:   #a35200;  --warn-soft:   rgba(255,149,0,.16);
  --danger: #c4000f;  --danger-soft: rgba(255,59,48,.11);
  --info:   #0066cc;  --info-soft:   rgba(0,113,227,.10);
  --violet: #7d3ca3;  --violet-soft: rgba(175,82,222,.13);
  --teal:   #0b6f7c;  --teal-soft:   rgba(48,176,199,.15);

  /* Tipografía de sistema */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala (mínimo 12 px; cuerpo 15 px) */
  --t-caption: .75rem;    /* 12 */
  --t-small:   .8125rem;  /* 13 */
  --t-body:    .9375rem;  /* 15 */
  --t-callout: 1.0625rem; /* 17 */
  --t-title3:  1.25rem;   /* 20 */
  --t-title2:  1.5rem;    /* 24 */
  --t-title1:  2rem;      /* 32 */
  --t-hero:    2.75rem;   /* 44 */

  /* Espaciado (múltiplos de 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* Radios */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* Elevación (muy sutil) */
  --e1: 0 1px 2px rgba(0,0,0,.04);
  --e2: 0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --e3: 0 24px 64px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.10);

  /* Materiales translúcidos (solo barras, navegación y diálogos) */
  --mat-bar:     rgba(245,245,247,.78);
  --mat-side:    rgba(236,236,240,.82);
  --mat-dialog:  rgba(255,255,255,.90);
  --blur-bar:    saturate(180%) blur(20px);
  --blur-dialog: saturate(180%) blur(30px);
  --scrim:       rgba(0,0,0,.22);

  /* Movimiento */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --d-press: 120ms;
  --d-in:    200ms;
  --d-out:   160ms;
  --d-color: 150ms;

  /* Tamaños táctiles */
  --hit: 44px;
  --hit-lg: 52px;

  /* Layout */
  --sidebar-w: 240px;
  --content-max: 1280px;
  --tabbar-h: 64px;
}

/* ── 2. BASE ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font:400 var(--t-body)/1.47 var(--font); letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--text)}
h1{font-size:var(--t-title1);line-height:1.12;letter-spacing:-.024em}
h2{font-size:var(--t-title3);line-height:1.2;letter-spacing:-.016em}
h3{font-size:var(--t-callout);line-height:1.3;letter-spacing:-.012em}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-size:.9em;letter-spacing:0}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}
.caption{font-size:var(--t-caption);color:var(--text-2);line-height:1.4;letter-spacing:0}
.small{font-size:var(--t-small)}
.eyebrow{font-size:var(--t-small);font-weight:500;color:var(--text-2)}
:focus-visible{outline:3px solid rgba(0,113,227,.45);outline-offset:1px;border-radius:8px}
a{color:var(--accent-text);text-decoration:none}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:16px;height:16px}
.icon.lg{width:24px;height:24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 3. BOTONES ────────────────────────────────────────────────── */
.btn{
  --h: var(--hit);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--h);padding:0 var(--s4);border-radius:var(--r-md);
  font:500 var(--t-body)/1 var(--font);letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;
  color:var(--text);background:var(--surface);white-space:nowrap;user-select:none;
  transition:transform var(--d-press) var(--ease-out),
             background-color var(--d-color) ease, border-color var(--d-color) ease, color var(--d-color) ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:active{background:var(--accent-press)}
.btn-secondary{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--e1)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-sm{--h:36px;padding:0 var(--s3);font-size:var(--t-small);border-radius:var(--r-sm)}
.btn-lg{--h:var(--hit-lg);padding:0 var(--s6);font-size:var(--t-callout);border-radius:var(--r-lg)}
.btn-icon{width:var(--h);padding:0}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--accent-hover)}
  .btn-secondary:hover{background:#fafafa;border-color:rgba(0,0,0,.2)}
  .btn-ghost:hover{background:var(--fill);color:var(--text)}
  .btn-danger:hover{background:rgba(255,59,48,.16)}
}

/* ── 4. CAMPOS (sólidos) ───────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--t-small);font-weight:500;color:var(--text)}
.field .hint{font-size:var(--t-caption);color:var(--text-2)}
.field .err{font-size:var(--t-caption);color:var(--danger)}
.input,.select{
  min-width:0;max-width:100%;
  min-height:var(--hit);padding:0 var(--s3);border-radius:var(--r-md);
  background:var(--field);border:1px solid var(--field-line);color:var(--text);
  font:400 16px/1.2 var(--font); /* 16 px: iOS no hace zoom */
  transition:border-color var(--d-color) ease, box-shadow var(--d-color) ease;
}
.input::placeholder{color:#9a9a9f}
.input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(0,113,227,.22)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3.5px rgba(255,59,48,.14)}
.search{position:relative;display:flex;align-items:center}
.search .icon{position:absolute;left:11px;color:var(--text-2);pointer-events:none}
.search .input{padding-left:36px;width:100%}

/* Interruptor */
.switch{position:relative;width:46px;height:28px;flex:none;border-radius:var(--r-pill);background:var(--surface-3);border:0;cursor:pointer;
  transition:background-color var(--d-color) ease}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);
  transition:transform var(--d-in) var(--ease-out)}
.switch[aria-checked="true"]{background:var(--ok-fill)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}

/* Selector segmentado */
.segmented{display:inline-flex;padding:2px;gap:2px;border-radius:9px;background:var(--fill-2)}
.segmented button{min-height:30px;padding:0 var(--s3);border:0;border-radius:7px;background:transparent;color:var(--text);font:500 var(--t-small)/1 var(--font);cursor:pointer;
  transition:background-color var(--d-color) ease,color var(--d-color) ease}
.segmented button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.05)}

/* ── 5. TARJETAS ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e1)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5) 0}
.card-head h2{font-size:var(--t-callout)}
.card-body{padding:var(--s4) var(--s5) var(--s5)}
.card-link{display:inline-flex;align-items:center;gap:2px;font:500 var(--t-small)/1 var(--font);color:var(--accent-text);background:none;border:0;cursor:pointer;min-height:32px}

/* ── 6. ESTADOS (insignias) ────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--t-caption);font-weight:500;white-space:nowrap;letter-spacing:0;background:var(--fill);color:var(--text-2)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.plain::before{display:none}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.info{background:var(--info-soft);color:var(--info)}
.badge.violet{background:var(--violet-soft);color:var(--violet)}
.badge.teal{background:var(--teal-soft);color:var(--teal)}
.badge.gold{background:var(--gold-soft);color:#7d6020}
.count{min-width:22px;height:20px;padding:0 7px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--fill-2);color:var(--text-2);font-size:var(--t-caption);font-weight:600;letter-spacing:0}
.count.accent{background:var(--accent);color:#fff}

/* Barra de avance */
.meter{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.meter > span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.meter.ok > span{background:var(--ok-fill)}

/* ── 7. AVISOS ─────────────────────────────────────────────────── */
.notice{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:var(--t-small);line-height:1.5;color:var(--text)}
.notice .icon{margin-top:1px;color:var(--text-2)}
.notice.info{background:var(--info-soft);border-color:transparent}.notice.info .icon{color:var(--info)}
.notice.warn{background:var(--warn-soft);border-color:transparent}.notice.warn .icon{color:var(--warn)}
.notice.danger{background:var(--danger-soft);border-color:transparent}.notice.danger .icon{color:var(--danger)}
.notice.ok{background:var(--ok-soft);border-color:transparent}.notice.ok .icon{color:var(--ok)}
.notice b{font-weight:600}

/* Toast (entra y sale por el mismo camino) */
.toast-zone{position:fixed;left:50%;bottom:calc(var(--s6) + env(safe-area-inset-bottom));z-index:400;transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--s2);pointer-events:none;width:min(420px,calc(100vw - 32px))}
.toast{pointer-events:auto;display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-radius:var(--r-lg);
  background:var(--mat-dialog);-webkit-backdrop-filter:var(--blur-dialog);backdrop-filter:var(--blur-dialog);
  border:1px solid var(--line);box-shadow:var(--e2);font-size:var(--t-small);
  transition:transform var(--d-in) var(--ease-out),opacity var(--d-in) var(--ease-out)}
.toast .icon{color:var(--accent)}
.toast[data-state="enter"],.toast[data-state="exit"]{opacity:0;transform:translateY(12px)}
.toast[data-state="exit"]{transition-duration:var(--d-out)}

/* ── 8. DIÁLOGOS (translúcidos con velo ligero) ────────────────── */
.scrim{position:fixed;inset:0;z-index:300;background:var(--scrim);display:grid;place-items:center;padding:var(--s4);
  opacity:0;pointer-events:none;transition:opacity var(--d-out) ease}
.scrim.open{opacity:1;pointer-events:auto;transition-duration:var(--d-in)}
.dialog{width:min(560px,100%);max-height:min(86dvh,760px);overflow:auto;border-radius:var(--r-xl);
  background:var(--mat-dialog);-webkit-backdrop-filter:var(--blur-dialog);backdrop-filter:var(--blur-dialog);
  box-shadow:var(--e3);
  transform:scale(.96);opacity:0;transition:transform var(--d-out) var(--ease-out),opacity var(--d-out) var(--ease-out)}
.scrim.open .dialog{transform:none;opacity:1;transition-duration:var(--d-in)}
.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s5) var(--s6) var(--s3)}
.dialog-body{padding:0 var(--s6) var(--s5)}
.dialog-foot{display:flex;gap:var(--s3);justify-content:flex-end;padding:var(--s3) var(--s6) var(--s6)}
@media (max-width:640px){
  .scrim{place-items:end center;padding:0}
  .dialog{width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(24px)}
  .dialog-foot{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
  .dialog-foot .btn{flex:1}
}

/* ── 9. TABLAS (sólidas, luminosas, con aire) ──────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-small)}
.table th{position:sticky;top:0;text-align:left;font-weight:500;font-size:var(--t-caption);color:var(--text-3);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap;letter-spacing:0}
.table td{padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:middle;height:52px}
.table tr:last-child td{border-bottom:0}
.table td.r,.table th.r{text-align:right}
.table tbody tr{cursor:pointer;transition:background-color var(--d-color) ease}
@media (hover:hover) and (pointer:fine){ .table tbody tr:hover{background:rgba(0,0,0,.025)} }
.table .primary{font-weight:500;color:var(--text)}
.table .secondary{font-size:var(--t-caption);color:var(--text-2)}

/* ── LOGOTIPO (lockup Halo): símbolo + PIXEL + MX en un solo bloque ── */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex:none;border-radius:var(--r-pill)}
.logo-mark{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--gold);
  background:linear-gradient(145deg,#ffffff,#f0ece4);
  box-shadow:inset 0 0 0 1px rgba(181,138,54,.30),0 4px 12px rgba(70,53,23,.10)}
.logo-mark .icon{width:17px;height:17px;stroke-width:1.6}
.logo-lockup{display:inline-flex;align-items:baseline;white-space:nowrap;line-height:1}
.logo-name{font:600 17px/1 var(--font-display);letter-spacing:.03em;margin-right:-.03em;color:#1d1d1f} /* sin aire extra antes de MX */
.logo-mx{margin-left:2px;font:600 9px/1 var(--font-display);letter-spacing:.02em;color:var(--gold)}
/* Versión reducida proporcional (celular): nunca oculta MX */
.logo.compacto{gap:8px}
.logo.compacto .logo-mark{width:26px;height:26px}
.logo.compacto .logo-mark .icon{width:15px;height:15px}
.logo.compacto .logo-name{font-size:15px}
.logo.compacto .logo-mx{font-size:8px}

/* Material de barras (encabezado, barra de pestañas) */
.bar-material{background:var(--mat-bar);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar)}

/* Modo privado (ojito): conserva la función actual */
body.privado [data-privado]{filter:blur(8px);user-select:none}

/* ── 11. ESTRUCTURA DE APP Y PATRONES (compartidos por todas las apps) ── */
/* ── Estructura: barra lateral (compu) · encabezado + barra inferior (tablet/celular) ── */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100dvh}
.sidebar{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s3) var(--s4);
  background:var(--mat-side);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);border-right:1px solid var(--line);overflow-y:auto}
.nav-item .icon{color:var(--accent)}
.sidebar > .logo{margin:2px var(--s3) 0;align-self:flex-start}
.side-search{margin:var(--s3) 0 var(--s2)}
.side-search .input{min-height:36px;font-size:var(--t-small);background:rgba(0,0,0,.05);border-color:transparent}
.grupo{margin-top:var(--s3)}
.grupo-tit{font-size:var(--t-caption);font-weight:600;color:var(--text-3);padding:0 var(--s3) var(--s1)}
.nav-item{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:40px;padding:0 var(--s3);border:0;border-radius:10px;background:transparent;
  color:var(--text-2);font:400 var(--t-body)/1 var(--font);color:var(--text);cursor:pointer;text-align:left;
  transition:background-color var(--d-color) ease,color var(--d-color) ease}
.nav-item .count{margin-left:auto}
.nav-item[aria-current="page"]{background:var(--fill-2);color:var(--text);font-weight:500}
@media (hover:hover) and (pointer:fine){ .nav-item:not([aria-current]):hover{background:var(--fill)} }
.side-foot{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s2)}
.usuario{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#a1a1a6,#7c7c80);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--t-small);flex:none}
.btn-modo{justify-content:flex-start;width:100%}

.contenido{min-width:0;display:flex;flex-direction:column}
.toolbar{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
.toolbar-in{max-width:var(--content-max);margin:0 auto;height:60px;padding:0 var(--s6);display:flex;align-items:center;gap:var(--s3)}
.toolbar h1{font-size:var(--t-title3);letter-spacing:-.015em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar .logo{display:none}
.estado-sync{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-caption);color:var(--text-3);white-space:nowrap}
.estado-sync .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.contenido > main{width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--s6) var(--s6) var(--s12)}

.tabbar{display:none}

/* ── Dashboard ── */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4)}
.c12{grid-column:span 12}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}
.hero{padding:var(--s6);display:grid;grid-template-columns:minmax(260px,1.1fr) 2fr;gap:var(--s8);align-items:center}
.hero .big{font-family:var(--font-display);font-size:var(--t-hero);font-weight:600;letter-spacing:-.032em;line-height:1;margin:var(--s2) 0 var(--s3)}
.hero .meter{margin:var(--s3) 0 var(--s2);height:8px}
.desglose{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.desglose dl{display:flex;flex-direction:column;gap:var(--s2)}
.desglose dt{font-size:var(--t-caption);font-weight:600;color:var(--text-3)}
.desglose .fila{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-small);color:var(--text-2)}
.desglose .fila b{color:var(--text);font-weight:600}
.kpi{padding:var(--s5)}
.kpi .lbl{font-size:var(--t-small);color:var(--text-2);display:flex;align-items:center;gap:var(--s2)}
.kpi .val{font-family:var(--font-display);font-size:var(--t-title1);font-weight:600;letter-spacing:-.026em;line-height:1.1;margin-top:var(--s2)}
.kpi .sub{font-size:var(--t-caption);color:var(--text-3);margin-top:var(--s1)}
.kpi .lbl .icon{color:var(--accent)}
.lista{display:flex;flex-direction:column}
.fila-acc{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) 0;border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;width:100%;
  color:var(--text);font:inherit;text-align:left;cursor:pointer;border-radius:0;transition:background-color var(--d-color) ease}
.fila-acc:last-child{border-bottom:0}
.fila-acc .ico-c{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.fila-acc .t{flex:1;min-width:0}
.fila-acc .t b{display:block;font-weight:600;font-size:var(--t-body)}
.fila-acc .t span{font-size:var(--t-caption);color:var(--text-3)}
.fila-acc > .icon{color:var(--text-3)}
.dia{display:grid;grid-template-columns:190px 1fr;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);align-items:center}
.dia:last-child{border-bottom:0}
.dia .f{font-size:var(--t-small);color:var(--text-2)}
.dia.hoy .f{color:var(--accent-text);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.plantel{display:grid;grid-template-columns:52px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.plantel:last-child{border-bottom:0}
.plantel .cod{font-family:var(--font-mono);font-weight:500;font-size:var(--t-small);color:var(--text-2)}
.plantel .nom{font-size:var(--t-small);font-weight:600;margin-bottom:6px}
.plantel .cifras{text-align:right;font-size:var(--t-small)}
.plantel .cifras span{display:block;font-size:var(--t-caption);color:var(--text-3)}
.parc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.parc > div{padding:var(--s4);border-radius:var(--r-md);background:var(--surface-2)}
.parc .v{font-weight:600;font-size:var(--t-callout);margin:4px 0 8px}
.acciones{display:flex;gap:var(--s2);flex-wrap:wrap}

/* ── Alumnos ── */
.filtros{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.chip-f{flex:none;min-height:36px;padding:0 var(--s3);border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:400 var(--t-small)/1 var(--font);cursor:pointer;
  transition:background-color var(--d-color) ease,color var(--d-color) ease,border-color var(--d-color) ease}
.chip-f[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.lista-movil{display:none}
.vacio{padding:var(--s12) var(--s4);text-align:center;color:var(--text-2)}
.vacio .icon{width:40px;height:40px;color:var(--text-3);margin-bottom:var(--s3)}

/* ── Ficha (diálogo) ── */
.ficha-id{font-family:var(--font-mono);color:var(--text-2);font-size:var(--t-small);font-weight:500}
.ficha-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s4) 0}
.ficha-datos > div{background:rgba(0,0,0,.04);border-radius:var(--r-md);padding:var(--s3)}
.ficha-datos .k{font-size:var(--t-caption);color:var(--text-3)}
.ficha-datos .v{font-weight:600;font-size:var(--t-callout);margin-top:2px}
.pagos-pips{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.pip{border-radius:var(--r-md);padding:var(--s3);font-size:var(--t-caption);color:var(--text-2);background:rgba(0,0,0,.04)}
.pip b{display:block;font-size:var(--t-body);color:var(--text)}
.pip.ok{background:var(--ok-soft)} .pip.ok b{color:var(--ok)}

/* Hoja "Más" */
.mas-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.mas-lista .nav-item{min-height:52px;background:rgba(0,0,0,.04)}

/* ── TABLET (<1100): sin barra lateral; encabezado compacto; barra inferior con acción principal ── */
@media (max-width:1099px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .toolbar .logo{display:inline-flex}
  .toolbar h1{font-size:var(--t-callout);text-align:center}
  .toolbar-in{height:52px;padding:0 var(--s4)}
  .solo-compu{display:none !important}
  .contenido > main{padding:var(--s5) var(--s4) calc(var(--tabbar-h) + var(--s10) + env(safe-area-inset-bottom))}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;border-top:1px solid var(--line);
    padding:6px var(--s4) calc(6px + env(safe-area-inset-bottom));gap:var(--s1);align-items:center}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--hit-lg);border:0;background:none;border-radius:12px;
    color:var(--text-2);font:500 11.5px/1 var(--font);cursor:pointer;transition:color var(--d-color) ease}
  .tab[aria-current="page"]{color:var(--accent)}
  .tab .icon{width:24px;height:24px}
  .tab-accion{flex:none;margin-left:var(--s2)}
  .c7,.c6,.c5{grid-column:span 12}
  .hero{grid-template-columns:1fr;gap:var(--s5)}
}
@media (min-width:1100px){ .solo-movil{display:none !important} }

/* ── CELULAR (<640) ── */
@media (max-width:639px){
  .toolbar h1{display:none}
  .toolbar-in{justify-content:space-between}
  .tab-accion{width:var(--hit-lg);padding:0;border-radius:50%} .tab-accion .txt{display:none}
  .hero{padding:var(--s5)}
  .hero .big{font-size:2.25rem}
  .desglose{grid-template-columns:1fr;gap:var(--s4)}
  .kpis > .kpi{grid-column:span 6}
  .kpi .val{font-size:var(--t-title2)}
  .parc{grid-template-columns:1fr 1fr}
  .dia{grid-template-columns:1fr;gap:6px}
  .tabla-alumnos{display:none}
  .lista-movil{display:block}
  .ficha-datos{grid-template-columns:1fr 1fr}
  .estado-sync{display:none}
}
@media (min-width:640px){ .kpis > .kpi{grid-column:span 3} }
@media (min-width:640px) and (max-width:1099px){ .kpis > .kpi{grid-column:span 6} }
@media (min-width:860px) and (max-width:1099px){ .kpis > .kpi{grid-column:span 3} }
.pantalla[hidden]{display:none}

/* Selector de apps (mismo en todas) */
.apps-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.app-item{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);border-radius:var(--r-md);color:var(--text);background:rgba(0,0,0,.035);
  transition:transform var(--d-press) var(--ease-out),background-color var(--d-color) ease}
.app-item:active{transform:scale(.97)}
.app-item .tile{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent)}
.app-item b{display:block;font-weight:600;font-size:var(--t-small)}
.app-item.actual{background:var(--accent-soft)}
@media (hover:hover) and (pointer:fine){ .app-item:not(.actual):hover{background:rgba(0,0,0,.06)} }
@media (max-width:639px){ .apps-lista{grid-template-columns:1fr} }

/* Patrones extra compartidos */
.seccion-tit{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s6) 0 var(--s3)}
.seccion-tit h2{font-size:var(--t-callout)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.form-grid .full{grid-column:1/-1}
@media (max-width:639px){ .form-grid{grid-template-columns:minmax(0,1fr)} }
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2)}
.opcion{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);border-radius:var(--r-md);border:1px solid var(--field-line);background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:var(--text);
  transition:transform var(--d-press) var(--ease-out),border-color var(--d-color) ease,background-color var(--d-color) ease}
.opcion:active{transform:scale(.97)}
.opcion small{font-size:var(--t-caption);color:var(--text-2)}
.opcion[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.foto-ph{border-radius:var(--r-md);background:linear-gradient(160deg,#e9e9ee,#d9d9e0);display:grid;place-items:center;color:#8e8e93;aspect-ratio:3/4}
.foto-ph .icon{width:28px;height:28px}
.qr-ph{width:100%;aspect-ratio:1;border-radius:var(--r-md);background:
  repeating-linear-gradient(90deg,#1d1d1f 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,#1d1d1f 0 6px,#fff 6px 12px);
  background-blend-mode:difference;opacity:.9;border:10px solid #fff;box-shadow:0 0 0 1px var(--line)}
.pasos{display:flex;gap:var(--s2);align-items:center;font-size:var(--t-caption);color:var(--text-2)}
.pasos span{flex:1;height:4px;border-radius:var(--r-pill);background:var(--surface-3)}
.pasos span.hecho{background:var(--accent)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);font-size:var(--t-small)}
.kv dt{color:var(--text-2)} .kv dd{font-weight:500;text-align:right}

/* ── 10. MOVIMIENTO Y ACCESIBILIDAD ────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color !important}
  .btn:active{transform:none}
  .dialog,.scrim.open .dialog,.toast[data-state]{transform:none !important}
}
@media (prefers-reduced-transparency: reduce){
  :root{--mat-bar:#f5f5f7;--mat-side:#ececf0;--mat-dialog:#ffffff}
  .toast,.dialog,.bar-material,.sidebar{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}
@media (prefers-contrast: more){
  :root{--line:rgba(0,0,0,.24);--line-strong:rgba(0,0,0,.4);--field-line:#8e8e93;--text-2:#48484c;--text-3:#48484c}
}