/* ============================================================================
 *  EDITORIAL · Capa de patrones (dirección Suizo/Editorial)
 *  Se carga la ÚLTIMA → gana a components.css y a las CSS de vista.
 *  Retunea lo que los tokens no expresan: tipografía display, números
 *  monoespaciados tabulares, superficies planas con hairline, nav y tablas
 *  editoriales, header de tinta. Pensada para poder revertir borrando el link.
 * ========================================================================= */

/* ── TIPOGRAFÍA DISPLAY EN TITULARES ──────────────────────────────────── */
.view-header .title,
.modal-title,
.brand-name,
.topbar-title,
.hero-name,
.empty-state .title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.view-header .title { font-weight: 600; font-size: 24px; }

/* ── NÚMEROS: monoespaciados tabulares para todo el dinero/dato ────────── */
.cstat-v,
.fac-alumno-total,
.fac-linea-imp,
.fac-src-item b,
.stat-pill .value,
.mes-label {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.cstat-v { font-weight: 700; }
.table,
.table td,
.table th { font-variant-numeric: tabular-nums; }

/* ── SUPERFICIES PLANAS + HAIRLINE (sin sombras) ──────────────────────── */
.card,
.table,
.stat-pill,
.hero-card {
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-soft);
}
.card, .hero-card, .panel { box-shadow: var(--shadow-card); }
.table { border-radius: var(--radius-lg); overflow: hidden; }

/* ── BOTONES Meridian: primario cobalto plano ──────────────────────────── */
.btn { border-radius: var(--radius-md); font-weight: 600; letter-spacing: 0; font-size: 16px; }
.btn-filled { background: var(--seed); color: #fff; }
.btn-filled:hover:not(:disabled) { background: var(--seed-hover); }
.btn-filled:disabled { background: var(--surface-container); color: var(--on-surface-variant); }
.btn-outlined { border: 1px solid var(--outline); }
.btn-outlined:hover:not(:disabled) { background: var(--surface-container-low); border-color: var(--on-surface-variant); }
.btn-text { color: var(--seed); }
.btn-text:hover:not(:disabled) { background: var(--seed-soft); }
.btn-icon {
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  box-shadow: none;
}
.btn-icon:hover:not(:disabled) { background: var(--surface-container-low); border-color: var(--outline); }

/* ── INPUTS editoriales: blanco + hairline + ring de foco ──────────────── */
.input, .textarea, .select {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  min-height: 42px;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 12px;
}
.textarea { min-height: 96px; }
.input:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled),
.select:hover:not(:focus):not(:disabled) { background: var(--surface); border-color: var(--outline); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--seed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seed) 16%, transparent);
}
.select { padding-right: 38px; }

/* ── SIDEBAR + NAV: solo estructura; el COLOR lo gobierna shell.css (navy) ─ */
.brand-name { font-weight: 700; letter-spacing: -0.02em; }
.brand-sub { letter-spacing: 0.12em; }
.nav-item { border-radius: var(--radius-sm); font-weight: 500; padding: 9px 12px; }
.nav-section { letter-spacing: 0.1em; }
.profile-logout { border-radius: var(--radius-sm); }

/* ── TOPBAR / SELECTOR DE COLEGIO ─────────────────────────────────────── */
.app-topbar { border-bottom: 1px solid var(--outline-variant); }
.topbar-title { font-weight: 600; }
.select-inline { border: 1px solid var(--outline-variant); background-color: var(--surface); border-radius: var(--radius-md); }

/* ── CABECERA DE VISTA: regla hairline inferior (estructura editorial) ──── */
.view-header {
  align-items: flex-end;
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-9);
}

/* ── HEADER "HERO" → losa de tinta plana (token ya es ink) ─────────────── */
.hero-header { border-radius: 0 0 var(--radius-hero-bottom) var(--radius-hero-bottom); }
.hero-card { border: 1px solid var(--outline-variant); }

/* ── PESTAÑAS (pill-tabs y fac-tabs) planas ───────────────────────────── */
.pill-tabs, .fac-tabs {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
}
.pill-tabs .tab[aria-selected="true"],
.fac-tab[aria-selected="true"] {
  background: var(--surface);
  box-shadow: none;
  border: 1px solid var(--outline-variant);
}

/* ── BADGES + TAGS: píldora (look moderno "Neat Precision") ────────────── */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: 0; }
.fac-tag { border-radius: 999px; }

/* ── CHIPS DE FILTRO (comedor/facturación) editoriales ────────────────── */
.cmd-chip {
  border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  font-weight: 600;
}
.cmd-chip:hover { border-color: var(--outline); color: var(--on-surface); }
.cmd-chip.on { background: var(--on-surface); border-color: var(--on-surface); color: #fff; }

/* ── STATS / TARJETAS DE DATO con hairline ────────────────────────────── */
.cstat, .rec-stats .cstat {
  border: 1px solid var(--outline-variant);
  box-shadow: none;
  border-radius: var(--radius-md);
}
.fac-alumno { border-radius: var(--radius-md); box-shadow: none; }
.fac-select { border-radius: var(--radius-md); }
.fac-search { border-radius: var(--radius-md); }

/* ── TABLA "Neat Precision": cabecera de MARCA oscura + texto blanco, mono
 *    micro-caps; filas aireadas; hover en tinte de marca. ───────────────── */
.table thead th {
  background: var(--brand-ink);
  color: color-mix(in srgb, var(--brand) 8%, #fff);
  border-bottom: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 14px;
  padding-bottom: 14px;
}
/* Filas más grandes y aireadas (como pediste, tipo la referencia) */
.table tbody td { padding-top: 16px; padding-bottom: 16px; font-size: 16px; }
.table tbody tr { transition: background-color var(--duration-press) var(--ease-out); }
.table tbody tr:hover { background: var(--brand-soft); }

/* ── PILLS de estado (para tablas y listados) ─────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  letter-spacing: 0; white-space: nowrap;
  background: var(--pill-neutral-bg); color: var(--pill-neutral-fg);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.no-dot::before { display: none; }
.pill-success { background: var(--pill-success-bg); color: var(--pill-success-fg); }
.pill-warn    { background: var(--pill-warn-bg);    color: var(--pill-warn-fg); }
.pill-danger  { background: var(--pill-danger-bg);  color: var(--pill-danger-fg); }
.pill-info    { background: var(--pill-info-bg);     color: var(--pill-info-fg); }
.pill-brand   { background: var(--brand-soft);       color: var(--brand-ink); }
.pill-brand::before { background: var(--brand); }
.pill-neutral { background: var(--pill-neutral-bg);  color: var(--pill-neutral-fg); }

/* ── SELECCIÓN de texto con el acento ─────────────────────────────────── */
::selection { background: color-mix(in srgb, var(--seed) 20%, transparent); }

/* ── Botón en estado "guardando…" (spinner sobre el botón del modal) ───── */
.btn[data-loading="true"] { pointer-events: none; position: relative; color: transparent !important; }
.btn[data-loading="true"]::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
  animation: app-spin 700ms linear infinite;
}
.btn-outlined[data-loading="true"]::after,
.btn-text[data-loading="true"]::after { border-color: color-mix(in srgb, var(--seed) 25%, transparent); border-top-color: var(--seed); }

/* ══════════════════════════════════════════════════════════════════════
 *  MODAL · placement (drawer lateral derecho vs diálogo centrado)
 * ══════════════════════════════════════════════════════════════════════ */

.modal-overlay.center { align-items: center; justify-content: center; }
.modal-overlay.center .modal { transform: translateY(12px); }
.modal-overlay.center.open .modal { transform: translateY(0); }

/* Panel lateral: ocupa toda la altura, entra desde la derecha */
.modal-overlay.drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.modal-overlay.drawer .modal {
  width: 100%;
  max-width: 540px;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--outline);
  transform: translateX(28px);
}
.modal-overlay.drawer.open .modal { transform: translateX(0); }
.modal-overlay.drawer .modal.xwide  { max-width: 760px; }
.modal-overlay.drawer .modal.xxwide { max-width: 980px; }

.modal-overlay.drawer .modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  padding: 18px var(--space-10);
  margin: 0;
  border-bottom: 1px solid var(--outline-variant);
}
.modal-overlay.drawer .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-9) var(--space-10);
}
.modal-overlay.drawer .modal-actions {
  margin: 0;
  padding: var(--space-7) var(--space-10);
  border-top: 1px solid var(--outline-variant);
  background: var(--surface);
}

/* Diálogo centrado: borde fino (ya no hay sombra) */
.modal-overlay.center .modal { border: 1px solid var(--outline); }

/* Botón de cierre (X) */
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--on-surface-variant);
  cursor: pointer;
}
.modal-close:hover { background: var(--surface-container); color: var(--on-surface); }
.modal { position: relative; }
.modal-overlay.center .modal-close { top: 18px; right: 18px; }

/* ══════════════════════════════════════════════════════════════════════
 *  COMMAND PALETTE (⌘K)
 * ══════════════════════════════════════════════════════════════════════ */

.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(22, 24, 29, 0.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  z-index: var(--z-modal);
  opacity: 0; pointer-events: none;
  transition: opacity 140ms var(--ease-out);
}
.cmdk-overlay.open { opacity: 1; pointer-events: auto; }

.cmdk {
  width: 100%; max-width: 560px;
  margin: 0 var(--space-7);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 140ms var(--ease-out);
}
.cmdk-overlay.open .cmdk { transform: translateY(0); }

.cmdk-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--space-7);
  border-bottom: 1px solid var(--outline-variant);
}
.cmdk-head .ms { color: var(--on-surface-variant); font-size: 20px; }
.cmdk-head input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-base); font-size: 16px; color: var(--on-surface);
}
.cmdk-head kbd {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--on-surface-variant);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xs); padding: 2px 6px;
}

.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-surface-variant); padding: 10px 10px 4px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-base); font-size: 14px; color: var(--on-surface);
}
.cmdk-item .ms { font-size: 19px; color: var(--on-surface-variant); }
.cmdk-item.active { background: var(--surface-container); }
.cmdk-item.active .ms { color: var(--seed); }
.cmdk-label { flex: 1; }
.cmdk-hint { font-size: 12px; color: var(--on-surface-variant); }
.cmdk-empty { padding: 24px; text-align: center; color: var(--on-surface-variant); font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════
 *  KPI STRIP (primitivo compartido: dashboard + facturación)
 *  Divisores hairline vía gap+fondo → funciona con cualquier nº de columnas.
 * ══════════════════════════════════════════════════════════════════════ */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px) { .kpi-strip { --kpi-cols: 2; } }
@media (max-width: 460px) { .kpi-strip { --kpi-cols: 1; } }

.kpi {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 15px 17px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--duration-press) var(--ease-out),
              box-shadow var(--duration-press) var(--ease-out);
}
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.kpi-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant);
}
.kpi-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  margin: 9px 0 0; color: var(--on-surface);
}
.kpi-value.kpi-warn { color: var(--warning); }
.kpi-value.kpi-ok   { color: var(--success); }
.kpi-value.kpi-prov { color: var(--indigo); }
.kpi-sub { font-size: 12px; color: var(--on-surface-variant); }
.kpi-skel { min-height: 104px; background: var(--surface-container-low); box-shadow: none; }

/* KPI estilo Serenity: barra de progreso + pie con etiqueta de color */
.kpi-bar { height: 6px; border-radius: 4px; background: var(--surface-container); overflow: hidden; margin-top: 11px; }
.kpi-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.kpi-bar-ok i { background: var(--success); }
.kpi-bar-warn i { background: var(--warning); }
.kpi-bar-danger i { background: var(--danger); }
.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.kpi-tag {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; flex: none;
}
.kpi-tag-brand  { background: var(--brand-soft); color: var(--brand-ink); }
.kpi-tag-ok     { background: color-mix(in srgb, var(--success) 14%, #fff); color: color-mix(in srgb, var(--success) 78%, #000); }
.kpi-tag-warn   { background: color-mix(in srgb, var(--warning) 16%, #fff); color: color-mix(in srgb, var(--warning) 82%, #000); }
.kpi-tag-danger { background: color-mix(in srgb, var(--danger) 13%, #fff);  color: color-mix(in srgb, var(--danger) 80%, #000); }
.kpi-tag-neutral{ background: var(--surface-container); color: var(--on-surface-variant); }