/*
 * ============================================================================
 *  tokens.css  —  Tokens legacy --manto-* (El Manantial / Lactia PRO)
 * ----------------------------------------------------------------------------
 *  Extraído de public/css/index-inline.css en la Etapa A.4 (19/04/2026).
 *  Contiene EXCLUSIVAMENTE los tokens --manto-* (131 definiciones) que eran
 *  alias / piel histórica antes de la paleta SLATE unificada (18/04/2026).
 *
 *  Debe cargarse ANTES de index-inline.css — los --manto-* cuya definición
 *  usa var(--gris-*), var(--borde-*) o var(--modal-*) se resuelven en el
 *  uso (no en la carga), así que la cascada sigue coherente. El archivo
 *  index-inline.css mantiene la paleta canónica nueva (--gris-*, --texto-*,
 *  --superficie-*, --borde-*, --card-*, --modal-*) en su propio :root.
 *
 *  Regla: trabajo nuevo = paleta SLATE. Estos alias --manto-* se conservan
 *  para no romper el CSS existente hasta que termine la migración.
 * ============================================================================
 */
:root{
  /* ═══════════════════════════════════════════════════════════════════
     FIN paleta canónica. Los tokens debajo son los viejos; los que
     se correspondan con la nueva paleta se re-definen como alias al
     final de este :root para que TODO lo existente siga funcionando.
     ═══════════════════════════════════════════════════════════════════ */

  /* Ritmo vertical y gaps entre bloques (márgenes/padding estándar en UI nueva) */
  --manto-space: 8px;

  --manto-serio-panel-borde:1px solid #d1d5db;
  --manto-tab-vitreo-borde:#cbd5e1;
  --manto-serio-radius:5px;
  /* Icono principal del bloque hero (kicker + título): misma altura de dibujo en todas las secciones */
  --manto-sec-hero-ico:44px;
  /* Tope de ancho generoso: si es demasiado bajo, el escalado se limita por el ancho y el icono queda “bajo” (no llena la altura) */
  --manto-sec-hero-ico-max-w:min(calc(var(--manto-sec-hero-ico) * 3.75),46vw);
  /* Icono junto a título en barras de panel (listados / análisis; no el banner ancho de Animales) */
  --manto-sec-panel-htit-ico:28px;
  /* Cabecera modal: por defecto en toda la app (cuadrado legible) */
  --manto-newmodal-h-ico:40px;
  /* Solo sección Descartes (m-desc*, etc.): icono anclado a la tipografía; no afecta otros modales */
  --manto-desc-modal-h-ico-h:1.15em;
  --manto-desc-modal-h-ico-max-w:2.75em;
  --manto-desc-modal-h-ico-max-px:32px;
  --manto-bitacora-header-ico:var(--manto-newmodal-h-ico);
  /*
   * Selectores de período (Día, Semana, Quincena, Mes, Año…):
   * Fuente de verdad GLOBAL — altura fija (--manto-period-sel-h) y padding horizontal en páginas, modales y anidados.
   * No duplicar height/padding sueltos; usar siempre estos tokens (ver bloque «PERÍODO / chips filtro — contrato global»).
   */
  --manto-period-sel-h:26px;
  --manto-period-sel-min-h:26px;
  --manto-period-sel-max-h:26px;
  --manto-period-sel-pad-y:0px;
  --manto-period-sel-pad-x:8px;
  --manto-period-sel-fs:12px;
  --manto-period-sel-fw:600;
  --manto-period-sel-fw-active:700;
  /*
   * Chips período/filtro — recuadro blanco + pills 26px.
   * Inactivo: pill clara pero claramente distinta del fondo; activo: gris-azulado más profundo (no confundir con inactivo).
   */
  --manto-chip-ref-inner-r:5px;
  --manto-chip-ref-grad-off:linear-gradient(180deg,#ffffff 0%,#e8eef5 100%);
  /* Opción C (2026-04-18): arranque del gradiente bajado un tono (#d8e3ee → #c4d1df)
     para apagar la «raya blanca» del borde superior. El color base y el fin del
     gradiente (#8fa3b6) no cambian — a simple vista el botón se ve igual. */
  --manto-chip-ref-grad-on:linear-gradient(180deg,#c4d1df 0%,#8fa3b6 100%);
  --manto-chip-ref-brd-off:#c4cdd8;
  --manto-chip-ref-brd-on:#5a6b7e;
  --manto-chip-ref-txt-off:#64748b;
  --manto-chip-ref-txt-on:#0f172a;
  /* Sombras sin halo blanco (opción A, 2026-04-18). Con el gradiente activo rehecho
     a `#94a6b9 → #7a8ca0` ya no hay banda clara que tapar: dejamos solo un borde
     inferior sutil + drop ligero. No insets claros en ninguno de los dos estados. */
  --manto-chip-ref-shadow-off:inset 0 -1px 0 rgba(148,163,184,.22),0 1px 2px rgba(15,23,42,.04);
  --manto-chip-ref-shadow-on:inset 0 -1px 0 rgba(30,41,59,.28),0 1px 3px rgba(15,23,42,.1);
  /*
   * Detalle sesión pesaje (#m-det-sesion-pesaje): cabecera + KPI Total/Promedio/Máx
   * — misma paleta que el bloque hero de Pesaje (gradiente horizontal suave #f7fafc → #ebf2f9 → #d9e5f2;
   *   borde/sombra slate; sin cyan tipo «sky»).
   */
  --manto-pes-det-hero-bg:linear-gradient(90deg,#f7fafc 0%,#eef4fa 32%,#e6eef6 68%,#d9e5f2 100%);
  --manto-pes-det-hero-border:1px solid #c5ced9;
  --manto-pes-det-hero-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(15,23,42,.05),
    0 1px 4px rgba(15,23,42,.07);
  /*
   * Botones serio v1 — referencias:
   * B1 Tablero → Dashboard pestaña «Reproducción» (Inicio/Reproducción/Alertas)
   * B2 Primario → Leche «Registrar leche» / CTA principal oscuro
   * B3 Vitreo → Leche «Nutrición» / secundario claro degradado
   */
  --manto-btn-b1-bg:linear-gradient(180deg,#ffffff 0%,#eef2f6 100%);
  --manto-btn-b1-bg-active:linear-gradient(180deg,#eef2f6 0%,#e2e8f0 100%);
  --manto-btn-b1-border:1px solid #cbd5e1;
  --manto-btn-b1-border-active:1px solid #94a3b8;
  --manto-btn-b1-color:#0f172a;
  --manto-btn-b1-shadow:0 2px 8px rgba(15,23,42,.07),0 0 0 1px rgba(148,163,184,.1),0 1px 1px rgba(15,23,42,.03);
  --manto-btn-b1-shadow-active:0 2px 10px rgba(15,23,42,.1),0 0 0 1px rgba(100,116,139,.14),0 1px 2px rgba(15,23,42,.04);
  /* Primario: gris degradado translúcido + micro borde (app completa) */
  --manto-btn-b2-bg:linear-gradient(165deg,rgba(100,116,139,.38) 0%,rgba(71,85,105,.58) 45%,rgba(51,65,85,.72) 100%);
  --manto-btn-b2-border:1px solid rgba(148,163,184,.42);
  --manto-btn-b2-color:rgba(248,250,252,.98);
  --manto-btn-b2-shadow:0 3px 14px rgba(15,23,42,.14),0 0 0 1px rgba(30,41,59,.07),0 1px 1px rgba(15,23,42,.04);
  --manto-btn-b3-bg:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(226,232,240,.55) 100%);
  --manto-btn-b3-border:1px solid rgba(148,163,184,.36);
  --manto-btn-b3-color:#334155;
  --manto-btn-b3-shadow:0 2px 10px rgba(15,23,42,.08),0 0 0 1px rgba(100,116,139,.09),0 1px 1px rgba(15,23,42,.03);
  /*
   * Botón gris OK — nombre de estilo único (producto: «botón gris ok»):
   * recuadro slate claro, gradiente, borde #64748b, texto #0f172a, sombras inset.
   * Clase CSS: .btn-gris-ok (junto a .btn / .bitacora-btn / .dash-registro-diario-btn según contexto).
   */
  --manto-btn-gris-ok-bg:linear-gradient(180deg,#cbd5e1 0%,#a8b4c4 100%);
  --manto-btn-gris-ok-bg-active:linear-gradient(180deg,#b8c4d4 0%,#94a3b8 100%);
  --manto-btn-gris-ok-border:1px solid #64748b;
  --manto-btn-gris-ok-border-hover:1px solid #475569;
  --manto-btn-gris-ok-color:#0f172a;
  /* Sin halo blanco arriba (opción A): se elimina el inset blanco superior. */
  --manto-btn-gris-ok-shadow:
    0 1px 3px rgba(15,23,42,.12),
    0 0 0 1px rgba(71,85,105,.12);
  --manto-btn-gris-ok-shadow-hover:
    0 2px 10px rgba(15,23,42,.14),
    0 0 0 1px rgba(51,65,85,.16);
  --manto-btn-gris-ok-outline:2px solid rgba(100,116,139,.45);
  /* Destructivo / quitar / eliminar — rojo claro translúcido */
  --manto-btn-danger-bg:linear-gradient(180deg,rgba(254,226,226,.95) 0%,rgba(254,202,202,.42) 100%);
  --manto-btn-danger-border:1px solid rgba(248,113,113,.45);
  --manto-btn-danger-color:#b91c1c;
  --manto-btn-danger-shadow:0 2px 10px rgba(185,28,28,.1),0 0 0 1px rgba(248,113,113,.2),0 1px 1px rgba(127,29,29,.04);
  --manto-btn-ghost-bg:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(241,245,249,.85) 100%);
  --manto-btn-ghost-border:1px solid rgba(148,163,184,.4);
  --manto-btn-ghost-color:#334155;
  --manto-btn-ghost-shadow:0 1px 5px rgba(15,23,42,.07),0 0 0 1px rgba(100,116,139,.08),0 1px 1px rgba(15,23,42,.025);
  /* Paneles serio v1 — relieve + sombra (Leche, Insumos, modales .ins-serio-v1) */
  --manto-serio-panel-inset:inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(0,0,0,.05);
  --manto-serio-panel-drop:0 1px 2px rgba(15,23,42,.05);
  /* Excepción única Insumos: botón «Registrar uso» (gris medio, no B2/B3) */
  --manto-btn-ins-uso-bg:linear-gradient(180deg,#aeb8c6 0%,#8b97a8 100%);
  --manto-btn-ins-uso-border:1.5px solid #64748b;
  --manto-btn-ins-uso-color:#f8fafc;
  --manto-btn-ins-uso-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.22), 0 1px 3px rgba(15,23,42,.12);
  /* Excepción Descartes: botón «Registrar muerte» en página (alerta suave, no B2/B3) */
  --manto-btn-desc-muerte-bg:linear-gradient(180deg,#fff5f5 0%,#fee2e2 100%);
  --manto-btn-desc-muerte-border:1.5px solid #fecaca;
  --manto-btn-desc-muerte-color:#991b1b;
  --manto-btn-desc-muerte-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(185,28,28,.15), 0 1px 2px rgba(15,23,42,.08);
  /* SERIO V2 — modales (tokens; .modal/.mbox base sin cambiar hasta clases opt-in en HTML) */
  --manto-serio-v2-modal-z-root:300;
  --manto-serio-v2-modal-z-nested:400;
  --manto-serio-v2-mbox-root-max-width:480px;
  --manto-serio-v2-mbox-root-radius:20px;
  --manto-serio-v2-mbox-root-pad:16px 16px 24px;
  --manto-serio-v2-mbox-nested-max-width:440px;
  --manto-serio-v2-mbox-nested-radius:16px;
  --manto-serio-v2-mbox-nested-pad:14px 14px 20px;
  /* Bordes slate (alineados a --manto-serio-panel-borde); sin tinte verde */
  --manto-serio-v2-mbox-root-border:1.5px solid rgba(148,163,184,.42);
  --manto-serio-v2-mbox-root-shadow:0 8px 32px rgba(0,0,0,.4);
  --manto-serio-v2-mbox-nested-border:1.5px solid rgba(100,116,139,.45);
  --manto-serio-v2-mbox-nested-shadow:0 12px 40px rgba(0,0,0,.48),0 0 0 1px rgba(15,23,42,.06);
  /*
   * NEW MODAL — contrato único (clases: .modal-nuevo + .bitacora-serio-v2 + .serio-v2).
   * Cabecera: .bitacora-modal-h--row · Cuerpo scroll: .modal-serio-body · Pie: .ani-serio-v2-footer-shell · Regresar: .bitacora-modal-back
   * Modales anidados: misma piel; apilar con z-index --manto-serio-v2-modal-z-nested y .modal.modal--serio-v2-nested (ver styles.css)
   */
  --manto-newmodal-h-pad-y:12px;
  --manto-newmodal-h-pad-x:14px;
  --manto-newmodal-h-min-h:56px;
  /* ── Paleta unificada SLATE (18/04/2026): estos 3 tokens son ALIAS de
     los canónicos --modal-header-bg / --modal-footer-bg / --gris-400.
     Mismo valor; se mantiene el nombre para no romper el CSS existente. ── */
  --manto-newmodal-h-border:var(--borde-fino);
  --manto-newmodal-foot-border:var(--manto-newmodal-h-border);
  --manto-newmodal-h-bg-light:var(--modal-header-bg);
  --manto-newmodal-h-border-color-light:var(--gris-400);
  --manto-newmodal-foot-pad-y:12px;
  --manto-newmodal-foot-pad-x:14px;
  --manto-newmodal-foot-min-h:56px;
  --manto-newmodal-foot-pad-y-tight:8px;
  --manto-newmodal-foot-bg-light:var(--modal-footer-bg);
  --manto-newmodal-foot-row-gap:10px;
  --manto-newmodal-back-h:32px;
  --manto-newmodal-back-pad-x:12px;
  --manto-newmodal-foot-cta-h:36px;
  --manto-newmodal-foot-cta-fs:12px;
  --manto-newmodal-foot-cta-strong-min-h:40px;
  --manto-newmodal-foot-cta-strong-fs:14px;
  --manto-newmodal-foot-ico-sm:14px;
  --manto-newmodal-foot-ico-md:18px;
  /*
   * Toolbar «tipo Animales» (referencia: #pg-ani): buscador+mic, CTA tipo Agregar, chips .fp, segmento Lista/Mosaico .vb.
   * Alturas fijas: búsqueda y CTA 40px; mic 28×28; .vb min 32px. Réplica: usar solo --manto-tbar-* + selectores de la sección.
   * Frase de trabajo: «Aplica toolbar tipo Animales a [sección]» — detalle en .cursor/rules/manto-toolbar-tipo-animales.mdc
   */
  --manto-tbar-radius:var(--manto-serio-radius);
  --manto-tbar-borde:#6f7c8c;
  /* Sin halo blanco arriba (opción A): `inset-hi` queda inofensivo para no romper las listas
     de sombras que lo referencian, y `elev-premium` pierde su inset blanco interior. */
  --manto-tbar-inset-hi:0 0 transparent;
  --manto-tbar-inset-sh:inset 0 -1px 0 rgba(30,41,59,.12);
  --manto-tbar-elev:0 2px 10px rgba(15,23,42,.09),0 1px 2px rgba(15,23,42,.05);
  --manto-tbar-elev-premium:0 3px 14px rgba(15,23,42,.11),0 1px 3px rgba(15,23,42,.06);
  --manto-tbar-grad-key:linear-gradient(180deg,#c9d4e0 0%,#b4c0cf 100%);
  --manto-tbar-grad-key-a:linear-gradient(180deg,#bac6d5 0%,#a5b2c3 100%);
  --manto-tbar-grad-cta:var(--manto-tbar-grad-key);
  --manto-tbar-grad-cta-a:var(--manto-tbar-grad-key-a);
  --manto-tbar-grad-chip:linear-gradient(180deg,#e9eef4 0%,#dde3eb 100%);
  --manto-tbar-grad-chip-on:var(--manto-tbar-grad-key);
  --manto-tbar-grad-seg:linear-gradient(180deg,#eef2f7 0%,#e2e8f0 100%);
  /* Unificado 2026-04-18 con el chip activo (Opción 3): segmentos «Lista / Mosaico»
     comparten el mismo gris que chips de filtro activos (ej. Hembras, Todos). */
  --manto-tbar-grad-vb-on:var(--manto-chip-ref-grad-on);
  --manto-tbar-grad-vb-a:var(--manto-tbar-grad-key-a);
  --manto-tbar-txt:#0f172a;
  --manto-tbar-txt-sec:#64748b;
  --manto-tbar-chip-txt-off:#334155;
  --manto-tbar-search-h:40px;
  --manto-tbar-cta-h:40px;
  --manto-tbar-cta-pad-x:12px;
  --manto-tbar-voz:28px;
  --manto-tbar-vb-minh:32px;
  /* Primer bloque hero — referencia #pg-lec (Leche): espacio entre elementos del strip y del toolbar */
  --manto-hero-title-strip-gap:10px;
  --manto-hero-head-row-gap:12px;
  --manto-hero-strip-pad:8px 10px 8px;
  --manto-hero-strip-margin:0 0 8px;
  --manto-hero-toolbar-pad:6px 10px 10px;
  --manto-hero-toolbar-gap:8px;
  /* Fila buscador | CTA (Animales/Partos/Potreros): gap = --manto-hero-toolbar-gap; columnas 5fr|3fr */
  --manto-tbar-row-cols:minmax(0,5fr) minmax(0,3fr);
}