/* Generado por scripts/build.js desde kit/kit/kit.css — no editar acá. */
/* ============================================================================
   kit.css — VA App Kit. Componentes base para dashboards/portales de cliente.
   Consume SÓLO tokens del contrato (mismo vocabulario que marca/tokens.css); nunca
   un color crudo. Se reskinea cambiando los VALORES de los tokens en la marca del
   cliente. Vocabulario de clases compatible con las apps de VA (.btn, .card, .kpi,
   .pill, .tbl, .field, .seg, .vachart, .barrow…) para que migrar sea mínimo.

   Aporta sobre el CSS a mano: foco accesible (--foco), texto sobre marca vía
   --marca-contenido, panel lateral (.sheet) y gráficos tematizados (--serie-1..5).
   ========================================================================== */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente); color: var(--tinta); background: var(--fondo);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--tinta); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.15; color: var(--tinta); letter-spacing: -.01em; }
p { margin: 0 0 .6em; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
.ico { display: inline-block; vertical-align: middle; }
.ico svg { display: block; width: 100%; height: 100%; }

/* ---------- Shell ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: var(--nav-h); background: var(--superficie); border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 16px; padding: 0 22px; position: sticky; top: 0; z-index: 40; }
.topbar__logo { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; color: var(--marca); font-size: 18px; }
.topbar__sep { width: 1px; height: 26px; background: var(--borde); }
.topbar__title { font-size: 13px; font-weight: 700; color: var(--tinta-suave); letter-spacing: .2px; text-transform: uppercase; }
.topbar__spacer { flex: 1; }
.topbar__user { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tinta-suave); }
.avatar { width: 32px; height: 32px; border-radius: var(--radio-sm); background: var(--marca); color: var(--marca-contenido); font-weight: 800; font-size: 12.5px; display: grid; place-items: center; flex: none; }
/* Botón hamburguesa: oculto en desktop, aparece <=720px para abrir la sidebar como drawer.
   La app togglea la clase .nav-open en .app (onclick del botón); el kit pone el CSS. */
.topbar__menu { display: none; border: 0; background: none; color: var(--tinta-suave); cursor: pointer; padding: 8px; margin-left: -6px; border-radius: var(--radio-sm); line-height: 0; min-height: 40px; }
.topbar__menu:hover { background: var(--superficie-alt); color: var(--tinta); }
.topbar__menu .ico { width: 22px; height: 22px; }

.shell { flex: 1; display: flex; align-items: stretch; }
.sidebar { width: var(--sidebar-w); flex: none; background: var(--superficie); border-right: 1px solid var(--borde); padding: 16px 12px; }
.side-group { margin-bottom: 18px; }
.side-group__t { font-size: 11px; text-transform: uppercase; letter-spacing: .9px; color: var(--tinta-tenue); font-weight: 800; padding: 4px 10px; margin-bottom: 4px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radio-sm); color: var(--tinta-suave); font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 2px; }
.side-link:hover { background: var(--superficie-alt); text-decoration: none; color: var(--tinta); }
.side-link.is-active { background: var(--marca); color: var(--marca-contenido); }
.side-link .ico { width: 18px; height: 18px; flex: none; color: currentColor; }
.side-link__count { margin-left: auto; font-size: 12px; font-weight: 800; background: var(--marca-suave); color: var(--marca-suave-contenido); border-radius: 20px; padding: 1px 8px; min-width: 20px; text-align: center; }
.side-link.is-active .side-link__count { background: rgba(255,255,255,.25); background: color-mix(in srgb, var(--marca-contenido) 22%, transparent); color: var(--marca-contenido); }
/* Backdrop del drawer de nav en mobile (oculto en desktop; el media query lo activa). */
.nav-back { display: none; }

.main { flex: 1; min-width: 0; padding: 26px 30px 60px; }
.container { max-width: var(--ancho-max); margin: 0 auto; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head__main { min-width: 0; }
.page-title { font-size: 25px; letter-spacing: -.02em; }
.page-sub { color: var(--tinta-tenue); font-size: 14px; margin-top: 3px; }
.page-head__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; font-size: 14px; font-weight: 700; line-height: 1; padding: 10px 16px; border-radius: var(--radio-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn--primary { background: var(--marca); color: var(--marca-contenido); }
.btn--primary:hover { background: var(--marca-fuerte); text-decoration: none; }
.btn--ghost { background: var(--superficie); color: var(--tinta-suave); border-color: var(--borde); }
.btn--ghost:hover { background: var(--superficie-alt); color: var(--tinta); text-decoration: none; }
.btn--subtle { background: var(--marca-suave); color: var(--marca-suave-contenido); }
.btn--subtle:hover { filter: brightness(.97); text-decoration: none; }
.btn--sm { min-height: 32px; padding: 7px 11px; font-size: 13px; } /* compacto: excepción de densidad explícita */
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-sm); }
.card__head { padding: 15px 18px; border-bottom: 1px solid var(--borde-suave); display: flex; align-items: center; gap: 10px; }
.card__head h3 { font-size: 15px; }
.card__head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
.grid--kpi { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--side { grid-template-columns: 2fr 1fr; align-items: start; }

/* ---------- KPI ---------- */
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra-sm); }
.kpi__label { font-size: 12.5px; color: var(--tinta-tenue); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.kpi__value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__foot { font-size: 12.5px; color: var(--tinta-tenue); margin-top: 8px; }
.kpi--accent { border-left: 3px solid var(--marca); }
.kpi--warn { border-left: 3px solid var(--atencion); }
.kpi--ok { border-left: 3px solid var(--ok); }
.kpi--error { border-left: 3px solid var(--error); }
.kpi--soft { background: var(--superficie-alt); }

/* ---------- Estado: pills / tags / delta ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: var(--radio-sm); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--atencion-bg); color: var(--atencion); }
.pill--danger { background: var(--error-bg); color: var(--error); }
.pill--neutral { background: var(--superficie-alt); color: var(--tinta-suave); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--radio-sm); background: var(--superficie-alt); color: var(--tinta-suave); }
.delta { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 30px; white-space: nowrap; }
.delta--up { color: var(--ok); background: var(--ok-bg); }
.delta--down { color: var(--error); background: var(--error-bg); }
.delta--flat { color: var(--tinta-tenue); background: var(--superficie-alt); }

/* ---------- Chips de sub-marca (acentos de categoría) ---------- */
.chip-marca { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 30px; background: var(--superficie-alt); color: var(--tinta-suave); }
.dot-marca { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--serie-2); }

/* ---------- Tablas ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } /* separate: para que el border-radius del thead tome */
.tbl thead th { background: var(--marca); color: var(--marca-contenido); font-weight: 700; text-align: left; padding: 11px 14px; white-space: nowrap; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; }
.tbl thead th:first-child { border-top-left-radius: var(--radio); }
.tbl thead th:last-child { border-top-right-radius: var(--radio); }
.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--superficie-alt); }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .muted { color: var(--tinta-tenue); }
.cell-strong { font-weight: 700; color: var(--tinta); }
.cell-nowrap { white-space: nowrap; }
.cell-2 { line-height: 1.35; }
.cell-2 small { display: block; margin-top: 1px; color: var(--tinta-tenue); font-size: 12px; }
.tbl tbody tr.row--vencido td { background: var(--error-bg); }

/* ---------- Formularios ---------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 700; color: var(--tinta-suave); margin-bottom: 6px; }
.input, .select { width: 100%; min-height: 40px; font: inherit; font-size: 14px; color: var(--tinta); padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); transition: border-color .12s, box-shadow .12s; }
/* Foco: el borde a --marca ya marca el estado; el box-shadow es el anillo. Fallback sólido
   primero, color-mix después (el navegador que no entiende color-mix se queda con el sólido). */
.input:focus, .select:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 45%, transparent); outline: none; }
.input--sm { min-height: 32px; padding: 6px 9px; font-size: 13px; }

/* segmented control (filtros) */
.seg { display: inline-flex; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 3px; gap: 2px; }
.seg__btn { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta-suave); padding: 6px 12px; border-radius: var(--radio-sm); cursor: pointer; white-space: nowrap; }
.seg__btn:hover:not(.is-on) { background: var(--superficie-alt); }
.seg__btn.is-on { background: var(--marca); color: var(--marca-contenido); }
.seg__btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Banners ---------- */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--radio); font-size: 13.5px; border: 1px solid transparent; }
.banner .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.banner strong { font-weight: 800; }
.banner--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.banner--warn { background: var(--atencion-bg); color: var(--atencion); border-color: color-mix(in srgb, var(--atencion) 22%, transparent); }
.banner--ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }

/* ---------- Sheet (panel lateral) y modal ---------- */
.sheet-back, .modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,20,.42); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sheet-back.is-open, .modal-back.is-open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; z-index: 210; background: var(--elevado); border-left: 1px solid var(--borde); box-shadow: var(--sombra-lg); transform: translateX(100%); transition: transform .24s ease; display: flex; flex-direction: column; }
.sheet.is-open { transform: translateX(0); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borde-suave); }
.sheet__head h3 { font-size: 16px; }
.sheet__x { border: 0; background: transparent; color: var(--tinta-tenue); cursor: pointer; display: inline-flex; padding: 5px; border-radius: var(--radio-sm); line-height: 0; }
.sheet__x:hover { background: var(--superficie-alt); color: var(--tinta); }
.sheet__body { padding: 18px 20px; overflow: auto; }
.dl { display: grid; grid-template-columns: 130px 1fr; gap: 9px 14px; font-size: 13.5px; }
.dl dt { color: var(--tinta-tenue); font-weight: 600; }
.dl dd { margin: 0; color: var(--tinta); font-weight: 600; }

/* ---------- Barras horizontales (desgloses) ---------- */
.barrow { display: grid; grid-template-columns: 1fr minmax(70px, auto); gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.barrow .lbl { display: flex; align-items: center; gap: 7px; }
.barrow .val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { height: 9px; background: var(--marca-suave); border-radius: 30px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--serie-1); border-radius: 30px; }

/* ---------- Sparkline y gráfico de serie temporal (charts.js) ---------- */
.spark { display: block; width: 100%; height: 40px; }
.spark__area { fill: var(--serie-1); opacity: .10; }
.spark__line { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__dot { fill: var(--serie-1); }
.vachart { position: relative; }
.vachart svg { display: block; width: 100%; height: auto; }
.vachart__grid { stroke: var(--borde-suave); stroke-width: 1; }
.vachart__ylbl { fill: var(--tinta-tenue); font-size: 13px; font-variant-numeric: tabular-nums; }
.vachart__xlbl { fill: var(--tinta-tenue); font-size: 13px; }
.vachart__area { fill: var(--serie-1); opacity: .08; }
.vachart__linea { fill: none; stroke: var(--serie-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.vachart__lineaprev { fill: none; stroke: var(--tinta-tenue); stroke-width: 1.8; stroke-dasharray: 5 5; opacity: .7; }
.vachart__dot { fill: var(--serie-1); opacity: 0; }
.vachart__dot--prev { fill: var(--elevado); stroke: var(--tinta-tenue); stroke-width: 1.5; }
.vachart__dot.is-on { opacity: 1; }
.vachart__cursor { position: absolute; top: 4%; bottom: 12%; width: 1px; background: var(--tinta-tenue); opacity: .5; pointer-events: none; }
.vachart__tip { position: absolute; top: 10px; z-index: 50; background: var(--elevado); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-lg); padding: 9px 12px; font-size: 12.5px; pointer-events: none; white-space: nowrap; }
.vachart__tip-t { font-weight: 800; margin-bottom: 4px; }
.vachart__tip .ok { color: var(--ok); font-weight: 700; }
.vachart__tip .down { color: var(--error); font-weight: 700; }
.vachart-leyenda { display: inline-flex; gap: 14px; font-size: 12.5px; color: var(--tinta-suave); }
.vachart-leyenda .leg { display: inline-flex; align-items: center; gap: 6px; }
.vachart-leyenda .leg__solid { width: 18px; height: 0; border-top: 2.5px solid var(--serie-1); }
.vachart-leyenda .leg__dash { width: 18px; height: 0; border-top: 2px dashed var(--tinta-tenue); }

/* ---------- Utilidades ---------- */
.muted { color: var(--tinta-tenue); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex { display: flex; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; }
.hr { height: 1px; background: var(--borde-suave); border: 0; margin: 16px 0; }
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--tinta-tenue); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) { .grid--kpi, .grid--3 { grid-template-columns: 1fr 1fr; } .grid--2, .grid--side { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  /* La sidebar pasa a drawer off-canvas: el botón .topbar__menu togglea .nav-open en .app.
     No se oculta seca (eso dejaría la app sin navegación en teléfono). */
  .topbar__menu { display: inline-flex; }
  .sidebar { position: fixed; top: var(--nav-h); left: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .24s ease; box-shadow: var(--sombra-lg); overflow-y: auto; }
  .app.nav-open .sidebar { transform: translateX(0); }
  .nav-back { display: block; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 55; background: rgba(20,20,20,.42); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .app.nav-open .nav-back { opacity: 1; pointer-events: auto; }
  .grid--kpi { grid-template-columns: 1fr; }
  .input, .select { font-size: 16px; }
}

/* ---------- Movimiento reducido (accesibilidad, A7) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}