/* GENERADO por build.js desde ../../../../../interna/va-app-kit/kit/kit.css — NO EDITAR ACÁ.
   Fuente de verdad: interna/va-app-kit/. */
/* ============================================================================
   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; }
/* `hidden` tiene que ganarle a las clases del kit. El `display: none` del navegador es una
   regla de su hoja, y cualquier `display` nuestro (`.btn` es inline-flex, `.pill` también)
   le pasa por encima: un botón con el atributo hidden puesto se seguía viendo, y quien lo
   escribió no tiene por qué descubrirlo mirando la pantalla. */
[hidden] { display: none !important; }
.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; }
/* El panel lateral no viaja con el scroll de la página: queda anclado abajo de la topbar
   y, si sus ítems no entran en la pantalla, scrollea por dentro. Sin esto, en una tabla
   larga la navegación se va para arriba y hay que volver al tope para cambiar de sección.
   Las tres piezas, y por qué ninguna sobra (PATRONES.md, patrón 7):
     · align-self: sin él la celda flex se estira a todo el alto del shell, el elemento
       ya ocupa su contenedor y el sticky se queda sin recorrido. Es el que más se olvida.
     · height de una pantalla: le da al panel su propio alto, para que el overflow tenga
       de dónde recortar. Con min-height el panel crece con el contenido y vuelve a viajar.
     · overflow: el scroll propio del panel cuando la nav es más larga que la pantalla.
   El main sigue con align-items: stretch del shell, así su fondo llega hasta abajo. */
.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--superficie); border-right: 1px solid var(--borde); padding: 16px 12px;
  position: sticky; top: var(--nav-h); align-self: flex-start;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));  /* dvh descuenta la barra del navegador en móvil */
  overflow: hidden auto;                /* x en hidden: un rótulo largo no abre scroll lateral */
  overscroll-behavior: contain;         /* al llegar al fin del panel la rueda no arrastra la página */
  scrollbar-width: thin;
}
.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; }

/* Tarjeta que filtra la lista de abajo (PATRONES.md, patrón 10). Prendida se tiene que
   leer sola, sin compararla con las de al lado: borde de marca más un anillo, no un gris
   apenas distinto. Vale igual sobre .kpi, que es la otra caja con un número grande. */
.card--filtro, .kpi--filtro { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.card--filtro:hover, .kpi--filtro:hover { border-color: var(--marca); }
.card--filtro:focus-visible, .kpi--filtro:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.card--filtro.is-on, .kpi--filtro.is-on {
  border-color: var(--marca);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 32%, transparent);
}

/* ---------- 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; }
/* La flecha del select: propia, no la del sistema. La nativa se dibuja distinto en cada
   SO y es el detalle que más delata una app sin terminar (PATRONES.md, patrón 1). El
   chevron va en un gris medio fijo porque un data URI no hereda currentColor; ese gris
   funciona sobre cualquier --superficie de marca. */
.select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a929c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.select::-ms-expand { display: none; }

/* ---------- Combo con buscador (los select largos, ver PATRONES.md patrón 1) ---------- */
.combo { position: relative; }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 120; max-height: 260px; overflow: auto;
  background: var(--elevado); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-lg); display: none;
}
.combo__list.is-open { display: block; }
.combo__opt { padding: 9px 12px; font-size: 13.5px; cursor: pointer; }
.combo__opt:hover, .combo__opt.is-on { background: var(--marca-suave); color: var(--marca-suave-contenido); }
.combo__opt small { display: block; color: var(--tinta-tenue); font-size: 12px; }
/* Vacío y recortado: dos de los estados obligatorios. El recorte avisado es lo que evita
   que una lista cortada se lea como completa. */
.combo__vacio { padding: 10px 12px; font-size: 13px; color: var(--tinta-tenue); }
.combo__nota { padding: 8px 12px; font-size: 12px; color: var(--tinta-tenue); border-top: 1px solid var(--borde-suave); background: var(--superficie-alt); position: sticky; bottom: 0; }

/* 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); }
/* Dos anchos más, para el panel que no es un formulario.
   El de 460 px alcanza para editar seis campos, y no alcanza para MIRAR algo que ya tiene
   su propio ancho: la vista previa de un correo se arma sobre una tabla de 600 px (es lo
   que entienden Gmail y Outlook), así que adentro de 460 sale cortada de costado. Se
   agranda el panel y no se encoge el correo: encogerlo mostraría un correo que no es el
   que va a recibir la persona, y esa vista previa existe justamente para eso.
     · --ancho (760 px): lectura de una pieza de ancho fijo, como el correo.
     · --amplio (1040 px): dos columnas adentro del panel (editar y ver al lado).
   Los dos heredan el max-width: 92vw del panel base, así que en un teléfono no desbordan. */
.sheet--ancho { width: 760px; }
.sheet--amplio { width: 1040px; }
.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; }
/* Lista de datos (rótulo a la izquierda, valor a la derecha).
   `minmax(0, 1fr)` y no `1fr`: una columna de grid nace con `min-width: auto`, así que no se
   encoge por debajo de su contenido más ancho y un valor largo empuja la tarjeta en vez de
   acomodarse adentro. Y `overflow-wrap: anywhere` en el valor porque el caso real que rompe
   esto es un mail (`administracion@industriasmagno.com.ar`): para el navegador es UNA palabra
   sin puntos de corte, así que sin permiso explícito no la parte y se sale de la tarjeta.
   Las dos reglas hacen falta juntas: la primera deja que la columna se angoste, la segunda
   deja que la palabra se corte. */
.dl { display: grid; grid-template-columns: 130px minmax(0, 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; min-width: 0; overflow-wrap: anywhere; }
/* En pantalla angosta, 130px de rótulo dejan sin aire al valor: el par pasa a dos renglones,
   que es como se lee una ficha en el celular. */
@media (max-width: 560px) {
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { margin-top: 8px; }
  .dl dt:first-child { margin-top: 0; }
}

/* ---------- 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; min-width: 0; }
.barrow .val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Desglose CON pista: la misma fila, más la barra que hace comparable la proporción de un
   vistazo. Sin la pista, "$ 4,1 M" y "$ 3,8 M" en dos renglones se leen igual de largos y
   el desglose deja de ser un desglose. */
.barrow--barra { grid-template-columns: 1fr minmax(70px, auto); row-gap: 5px; }
/* El rótulo se recorta antes de empujar la cifra. Una categoría que se llama "Honorarios
   profesionales y auditoría externa" no puede correr el importe fuera de la tarjeta. */
.barrow--barra .lbl > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow--barra .pista { grid-column: 1 / -1; height: 6px; background: var(--superficie-alt); border-radius: 999px; overflow: hidden; }
.barrow--barra .llena { display: block; height: 100%; background: var(--serie-1); border-radius: 999px; min-width: 3px; }
.barrow--barra .llena[data-tono="warn"] { background: var(--atencion); }
.barrow--barra .llena[data-tono="error"] { background: var(--error); }
.barrow--barra .llena[data-tono="ok"] { background: var(--ok); }
.barrow--barra .llena[data-tono="marca"] { background: var(--marca); }
/* Una fila de desglose que abre su detalle. Misma regla que la fila de tabla: si el dato
   se puede abrir, se abre desde la fila entera y el cursor lo anuncia. */
.barrow--clic { cursor: pointer; border-radius: var(--radio-sm); padding: 6px 8px; margin: 0 -8px; }
.barrow--clic:hover { background: var(--superficie-alt); }
.barrow--clic:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }

/* ---------- Barra de filtros de un tablero ---------- */
/* La fila de controles que decide QUÉ se está mirando (rango de fechas, unidad, alcance).
   Va arriba de las tarjetas y envuelve en pantallas angostas, porque en un teléfono cuatro
   controles en una línea salen del ancho o se aplastan hasta no poder tocarse. */
.filtros-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rangepick { position: relative; }
.rangepick__pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120; width: 360px; max-width: calc(100vw - 40px);
  background: var(--elevado); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-lg); padding: 8px;
}
.rangepick__pop[hidden] { display: none; }
.rangepick__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.rangepick__item { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--tinta-suave); text-align: left; padding: 8px 10px; border-radius: var(--radio-sm); cursor: pointer; }
.rangepick__item:hover { background: var(--superficie-alt); color: var(--tinta); }
.rangepick__item.is-on { background: var(--marca-suave); color: var(--marca-suave-contenido); }
.rangepick__custom { border-top: 1px solid var(--borde-suave); margin-top: 8px; padding: 12px 10px 6px; }
/* En un teléfono el popover se ancla a la derecha del botón: anclado a la izquierda con
   300px de ancho mínimo, se salía de la pantalla y quedaba la mitad sin poder tocarse. */
@media (max-width: 620px) {
  .rangepick__pop { left: auto; right: 0; }
  .rangepick__list { grid-template-columns: 1fr; }
}
.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); flex-wrap: wrap; }
.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); }

/* Varias series en un mismo gráfico.
   El tono no es decorativo: es el MISMO de la tarjeta que muestra ese número arriba
   (--marca para lo devengado, --ok para lo cobrado, --atencion para lo gastado). Un
   gráfico donde "cobrado" es verde abajo y la tarjeta "Cobrado" es verde arriba se lee
   sin leyenda; con colores distintos hay que ir y venir para saber qué línea es cuál. */
.vachart__linea[data-tono="marca"], .vachart-leyenda .leg__solid[data-tono="marca"] { stroke: var(--marca); border-top-color: var(--marca); }
.vachart__linea[data-tono="ok"], .vachart-leyenda .leg__solid[data-tono="ok"] { stroke: var(--ok); border-top-color: var(--ok); }
.vachart__linea[data-tono="warn"], .vachart-leyenda .leg__solid[data-tono="warn"] { stroke: var(--atencion); border-top-color: var(--atencion); }
.vachart__linea[data-tono="info"], .vachart-leyenda .leg__solid[data-tono="info"] { stroke: var(--info); border-top-color: var(--info); }
.vachart__dot[data-tono="marca"] { fill: var(--marca); }
.vachart__dot[data-tono="ok"] { fill: var(--ok); }
.vachart__dot[data-tono="warn"] { fill: var(--atencion); }
.vachart__dot[data-tono="info"] { fill: var(--info); }
.vachart__tip-linea { display: flex; align-items: center; gap: 7px; }
.vachart__tip-linea b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.vachart__tip-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--serie-1); }
.vachart__tip-punto[data-tono="marca"] { background: var(--marca); }
.vachart__tip-punto[data-tono="ok"] { background: var(--ok); }
.vachart__tip-punto[data-tono="warn"] { background: var(--atencion); }
.vachart__tip-punto[data-tono="info"] { background: var(--info); }

/* Barras con signo (un resultado mes a mes): salen de la línea del cero, verdes para
   arriba y rojas para abajo. Es la forma de un P&L: la pregunta que contesta es "en qué
   meses perdimos", y en una línea suave eso hay que deducirlo del eje. */
.vachart__barpos { fill: var(--ok); opacity: .82; }
.vachart__barneg { fill: var(--error); opacity: .82; }
.vachart__cero { stroke: var(--tinta-tenue); stroke-width: 1.4; }

/* ---------- 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; }
  /* Acá el panel ya no es sticky sino fixed, así que el alto lo fijan top/bottom:
     se anula el height de una pantalla del bloque de escritorio. */
  .sidebar { position: fixed; top: var(--nav-h); left: 0; bottom: 0; height: auto; 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; }
}