/* ═══════════════════════════════════════════════════════════════════
   AGROSYS — módulo tambo. Hoja ADITIVA: no toca ni pisa app.css, que es
   del framework y se sincroniza desde Andamio. Acá viven sólo las piezas
   del dominio: tableros, fichas de indicador y el motor de gráficos.

   Paleta de datos: instancia validada del método de visualización.
   Pasó, contra las superficies reales de esta app y en los dos modos, la
   banda de luminosidad, el piso de croma, la separación bajo daltonismo
   (protan/deutan, ΔE ≥ 8) y el piso de visión normal (ΔE ≥ 15). En modo
   claro los tonos aqua y amarillo quedan por debajo de 3:1 contra el
   fondo: la compensación exigida son los rótulos directos y la tabla de
   datos que TODA figura trae desplegable. Los pasos oscuros no son un
   volteo automático de los claros, son sus propios pasos elegidos para
   el fondo oscuro.

   Si cambiás estos hex, volvé a correr el validador de la paleta.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Categóricos — orden FIJO, jamás cíclico ni generado */
  --viz-s1: #2a78d6;  /* azul     */
  --viz-s2: #eb6834;  /* naranja  */
  --viz-s3: #1baf7a;  /* aqua     */
  --viz-s4: #eda100;  /* amarillo */
  --viz-s5: #e87ba4;  /* magenta  */
  --viz-s6: #008300;  /* verde    */
  /* Divergente para la cascada: polos cálido/frío + gris neutro al medio */
  --viz-pos: #2a78d6;
  --viz-neg: #d03b3b;
  --viz-subtotal: #64748b;
  /* Cromo del gráfico: recesivo, un escalón por encima de la superficie */
  --viz-grid: #e2e8f0;
  --viz-ink: #1f2937;
  --viz-ink-soft: #4b5563;
  --viz-surface: #ffffff;
  /* Estados (semáforo) — reservados, nunca se reutilizan como serie */
  --viz-bien-bg: #ecfdf3;    --viz-bien-fg: #14532d;    --viz-bien-bd: #15803d;
  --viz-atencion-bg: #fefce8; --viz-atencion-fg: #713f12; --viz-atencion-bd: #a16207;
  --viz-alerta-bg: #fef2f2;   --viz-alerta-fg: #7f1d1d;   --viz-alerta-bd: #b91c1c;
  --viz-neutro-bg: #f1f5f9;   --viz-neutro-fg: #334155;   --viz-neutro-bd: #94a3b8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; --viz-s4: #c98500;
    --viz-s5: #d55181; --viz-s6: #008300;
    --viz-pos: #3987e5; --viz-neg: #e66767; --viz-subtotal: #94a3b8;
    --viz-grid: #334155; --viz-ink: #f1f5f9; --viz-ink-soft: #cbd5e1;
    --viz-surface: #1e293b;
    --viz-bien-bg: #052e1a;     --viz-bien-fg: #bbf7d0;     --viz-bien-bd: #4ade80;
    --viz-atencion-bg: #422006; --viz-atencion-fg: #fde68a; --viz-atencion-bd: #fbbf24;
    --viz-alerta-bg: #3f1d1d;   --viz-alerta-fg: #fecaca;   --viz-alerta-bd: #f87171;
    --viz-neutro-bg: #1e293b;   --viz-neutro-fg: #cbd5e1;   --viz-neutro-bd: #64748b;
  }
}
:root[data-theme="dark"] {
  --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70; --viz-s4: #c98500;
  --viz-s5: #d55181; --viz-s6: #008300;
  --viz-pos: #3987e5; --viz-neg: #e66767; --viz-subtotal: #94a3b8;
  --viz-grid: #334155; --viz-ink: #f1f5f9; --viz-ink-soft: #cbd5e1;
  --viz-surface: #1e293b;
  --viz-bien-bg: #052e1a;     --viz-bien-fg: #bbf7d0;     --viz-bien-bd: #4ade80;
  --viz-atencion-bg: #422006; --viz-atencion-fg: #fde68a; --viz-atencion-bd: #fbbf24;
  --viz-alerta-bg: #3f1d1d;   --viz-alerta-fg: #fecaca;   --viz-alerta-bd: #f87171;
  --viz-neutro-bg: #1e293b;   --viz-neutro-fg: #cbd5e1;   --viz-neutro-bd: #64748b;
}

/* ── Gráficos ──────────────────────────────────────────────────── */

.viz { margin: 0 0 1.25rem; }
.viz-title { font-weight: 600; margin-bottom: .5rem; color: var(--color-text); }
.viz-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Los gráficos anchos scrollean DENTRO de su caja — mismo mecanismo que
   .table-wrap. Encogerlos hasta 320 px vuelve ilegibles los rótulos, y hacer
   scrollear la página entera está prohibido por el gate de reflow. */
.viz-scroll { overflow-x: auto; }
.viz-scroll .viz-svg { min-width: min(30rem, 145%); }
.viz-fluido .viz-svg { min-width: 0; }

/* Marcas finas: el dato es lo único que puede gritar. */
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-area { stroke: none; opacity: .1; }
/* El anillo del color de la superficie mantiene legible el punto donde cruza la línea. */
.viz-dot  { stroke: var(--viz-surface); stroke-width: 2; }
.viz-bar  { stroke: none; }

.viz-s1 { fill: var(--viz-s1); stroke: var(--viz-s1); }
.viz-s2 { fill: var(--viz-s2); stroke: var(--viz-s2); }
.viz-s3 { fill: var(--viz-s3); stroke: var(--viz-s3); }
.viz-s4 { fill: var(--viz-s4); stroke: var(--viz-s4); }
.viz-s5 { fill: var(--viz-s5); stroke: var(--viz-s5); }
.viz-s6 { fill: var(--viz-s6); stroke: var(--viz-s6); }
.viz-line.viz-s1, .viz-line.viz-s2, .viz-line.viz-s3, .viz-line.viz-s4 { fill: none; }
.viz-dot.viz-s1, .viz-dot.viz-s2, .viz-dot.viz-s3, .viz-dot.viz-s4 { stroke: var(--viz-surface); }

.viz-pos { fill: var(--viz-pos); }
.viz-neg { fill: var(--viz-neg); }
.viz-subtotal { fill: var(--viz-subtotal); }

/* Grilla y ejes: línea de pelo SÓLIDA (punteada leería como umbral). */
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-cero { stroke: var(--viz-ink-soft); }

/* El texto NUNCA se viste del color de la serie: usa la tinta del tema. */
.viz-tick  { fill: var(--viz-ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-cat   { fill: var(--viz-ink); font-size: 12px; }
.viz-label { fill: var(--viz-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-signo { fill: var(--viz-ink-soft); font-size: 13px; font-weight: 700; }
/* Rótulo dibujado dentro de la barra: blanco con un contorno tenue, para que
   se lea sobre el relleno sin depender del tono exacto de la serie. */
.viz-label-dentro { fill: #ffffff; paint-order: stroke; stroke: rgba(0, 0, 0, .3); stroke-width: 2.5px; }

.viz-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .5rem; padding: 0; font-size: .9rem; color: var(--color-text); }
.viz-leyenda li { display: flex; align-items: center; gap: .4rem; }
.viz-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.viz-swatch.viz-s1 { background: var(--viz-s1); }
.viz-swatch.viz-s2 { background: var(--viz-s2); }
.viz-swatch.viz-s3 { background: var(--viz-s3); }
.viz-swatch.viz-s4 { background: var(--viz-s4); }
.viz-swatch.viz-s5 { background: var(--viz-s5); }
.viz-swatch.viz-s6 { background: var(--viz-s6); }

/* Igual que table.data, con clase propia: el paginador del framework engancha
   `.table-wrap table.data`, y una figura arriba de un listado le robaba la
   paginación. Ver el comentario en Grafico::figura(). */
.viz-tabla { width: 100%; border-collapse: collapse; }
.viz-tabla th, .viz-tabla td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--color-border); }
.viz-tabla thead th { border-bottom: 2px solid var(--color-border); }

.viz-datos { margin-top: .5rem; }
.viz-datos summary { cursor: pointer; color: var(--color-muted); font-size: .9rem; padding: .35rem 0; min-height: 40px; display: flex; align-items: center; }
.viz-datos summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.viz-vacia { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 1.25rem; text-align: center; }
.viz-sin-datos { color: var(--color-muted); margin: .25rem 0 0; }

/* Dona de participación. La separación entre porciones se hace con un trazo
   del color de la superficie, no con un borde dibujado. */
.viz-porcion { stroke: var(--viz-surface); stroke-width: 2; stroke-linejoin: round; }
.viz-porcion-label { fill: #ffffff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 2.5px; }
.viz-dona-total { fill: var(--viz-ink); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-dona-pie { fill: var(--viz-ink-soft); font-size: 11px; }
.viz-torta .viz-svg { max-width: 22rem; margin-inline: auto; }
.viz-leyenda-torta { flex-direction: column; gap: .3rem; margin-top: .25rem; }
.viz-leyenda-torta li { display: grid; grid-template-columns: 12px 1fr auto; gap: .5rem; align-items: center; }
.viz-leyenda-nombre { overflow-wrap: anywhere; }
.viz-leyenda-pct { font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }

.viz-spark { width: 100px; height: 26px; display: block; }
.viz-spark-line { stroke: var(--viz-s1); fill: none; }
.viz-spark-dot  { fill: var(--viz-s1); stroke: var(--viz-surface); stroke-width: 2; }

/* ── Medidor de meta ───────────────────────────────────────────── */

.viz-medidor { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.viz-medidor-track { flex: 1 1 8rem; height: 8px; background: var(--viz-neutro-bg); border: 1px solid var(--viz-neutro-bd); border-radius: 999px; overflow: hidden; }
.viz-medidor-fill { height: 100%; border-radius: 999px; }
.viz-estado-bien     { background: var(--viz-bien-bd); }
.viz-estado-atencion { background: var(--viz-atencion-bd); }
.viz-estado-alerta   { background: var(--viz-alerta-bd); }
.viz-estado-sin_meta { background: var(--viz-neutro-bd); }
.viz-medidor-texto { font-size: .85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ── Fichas de indicador (KPI) ─────────────────────────────────── */

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.kpi-label { color: var(--color-muted); font-size: .85rem; }
/* Cifras proporcionales: en tamaño grande, tabular-nums deja el número flojo. */
.kpi-valor {
  font-size: 1.75rem; font-weight: 600; line-height: 1.15; color: var(--color-text);
  /* Un importe largo se achica antes de desbordar la ficha: en un tambo
     argentino los números tienen muchos dígitos y la caja es la que manda. */
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  overflow-wrap: anywhere;
}
.kpi-unidad { font-size: .95rem; font-weight: 400; color: var(--color-muted); }
.kpi-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.kpi-hero .kpi-valor { font-size: clamp(1.35rem, 4.2vw, 2rem); }

/* Estado: fondo + borde + TEXTO. El color nunca viaja solo. */
/* El `nowrap` mantiene la píldora en una línea, que es como se lee un estado;
   el `max-width` es el seguro para que una etiqueta larga no arrastre la
   página al scroll horizontal en un teléfono de 320 px. */
.estado { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; border: 1px solid; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.estado-bien     { background: var(--viz-bien-bg);     color: var(--viz-bien-fg);     border-color: var(--viz-bien-bd); }
.estado-atencion { background: var(--viz-atencion-bg); color: var(--viz-atencion-fg); border-color: var(--viz-atencion-bd); }
.estado-alerta   { background: var(--viz-alerta-bg);   color: var(--viz-alerta-fg);   border-color: var(--viz-alerta-bd); }
.estado-sin_meta, .estado-neutro { background: var(--viz-neutro-bg); color: var(--viz-neutro-fg); border-color: var(--viz-neutro-bd); }

.variacion { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--color-muted); }

/* ── Estructura de tablero ─────────────────────────────────────── */

.tablero-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tablero-contexto { color: var(--color-muted); font-size: .9rem; margin: .15rem 0 0; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; }
.panel > h2 { margin-top: 0; }
/* Dos figuras que se leen juntas (barras + dona). Colapsa a una columna sola
   apenas no entran cómodas, sin necesidad de un breakpoint nuevo. */
.viz-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1.5rem; align-items: start; }
.viz-subtitulo { font-size: 1rem; margin: 0 0 .5rem; }

/* Accesos de carga: objetivo táctil generoso, pensado para el galpón. */
.acciones-rapidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: .75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.acciones-rapidas a { display: flex; flex-direction: column; gap: .2rem; min-height: 64px; justify-content: center; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.acciones-rapidas a:hover, .acciones-rapidas a:focus-visible { border-color: var(--color-primary); }
.acciones-rapidas a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.accion-titulo { font-weight: 600; }
.accion-detalle { font-size: .85rem; color: var(--color-muted); }

/* Racha de carga: lo que convierte cargar datos en un hábito visible. */
.racha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.racha-dias { display: flex; gap: 3px; }
.racha-dia { width: 14px; height: 22px; border-radius: 3px; border: 1px solid var(--color-border); background: var(--viz-neutro-bg); }
.racha-dia.cargado { background: var(--viz-s1); border-color: var(--viz-s1); }
.racha-texto { font-size: .9rem; color: var(--color-muted); }

/* Cascada del P&L en tabla: el mismo dato que el gráfico, en números. */
.cascada-tabla td.num, .cascada-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cascada-tabla tr.hito { font-weight: 600; background: var(--color-surface); }
.cascada-tabla tr.hito th, .cascada-tabla tr.hito td { border-top: 2px solid var(--color-border); }

/* Carga diaria: grilla de campos numéricos anchos y cómodos de tocar. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: 0 1rem; }
.form-grid .field { max-width: none; }
.total-vivo { font-size: 1.1rem; font-weight: 600; color: var(--color-text); padding: .75rem 0; }

/* ── Panel de administración por categorías ────────────────────── */

.modulo-seccion { margin: 0 0 2rem; }
.modulo-seccion-cab { margin-bottom: .85rem; }
.modulo-seccion-cab h2 { margin: 0; }
.modulo-seccion-ayuda { margin: .15rem 0 0; color: var(--color-muted); font-size: .9rem; }

.modulo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: .75rem; margin: 0; padding: 0; list-style: none; }

/* La tarjeta entera es el enlace al listado; el botón "Nuevo" va aparte para
   que no queden dos destinos dentro de un mismo control. */
.modulo { position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); overflow: hidden; }
.modulo-link { display: flex; flex-direction: column; gap: .2rem; flex: 1;
  padding: .9rem 1rem; text-decoration: none; color: var(--color-text); min-height: 64px; }
.modulo-link:hover { border-color: var(--color-primary); }
.modulo:has(.modulo-link:hover) { border-color: var(--color-primary); }
.modulo-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.modulo-nombre { font-weight: 600; overflow-wrap: anywhere; }
.modulo-conteo { font-size: .85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.modulo-nuevo { align-self: flex-start; margin: 0 1rem .85rem; min-height: 40px; }

/* Ficha del animal */
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: .75rem 1.5rem; margin: 0 0 1.5rem; }
.ficha-datos dt { color: var(--color-muted); font-size: .85rem; }
.ficha-datos dd { margin: 0; font-weight: 600; }

/* Menú principal con muchas secciones.
   El menú horizontal de Andamio asume media docena de entradas; agrosys llega
   a diez y en una tablet de 768 px —justo por encima del breakpoint donde el
   menú colapsa— la lista deja de entrar y arrastra la página entera al scroll
   horizontal. Dejar que la lista ENVUELVA la acomoda en dos renglones dentro
   de la misma barra, que ya viene con flex-wrap. El `min-width: 0` es lo que
   permite que el ítem flex se achique por debajo de su ancho de contenido. */
.navbar .nav-links { flex-wrap: wrap; min-width: 0; }

/* Único breakpoint del módulo (el mismo 720 px de app.css). Las grillas ya
   colapsan solas por sus min(); acá sólo queda lo que cambia de disposición. */
@media (max-width: 720px) {
  .tablero-cabecera { flex-direction: column; }
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
  .panel { padding: 1rem; }
}