/* ═══════════════════════════════════════════════════════════════════
   AGROSYS — MARCA. Hoja ADITIVA, la tercera y ultima: se carga DESPUES de
   app.css (framework, se sincroniza desde Andamio) y de tambo.css (dominio).
   Aca vive SOLO lo que la identidad agrega y que no se puede expresar como
   token en config/brand.php: la tipografia, la escala de titulos, el
   wordmark y los estados de los controles en el verde de la marca.

   Lo que NO esta aca, a proposito:
   • los colores de interfaz → son tokens en config/brand.php;
   • la paleta de datos (--viz-*) → es de tambo.css y esta validada contra
     daltonismo y contraste. La marca no la pisa: un verde de identidad
     metido como serie rompe la separacion entre series.
   ═══════════════════════════════════════════════════════════════════ */

/* Nunito auto-alojada. Los .woff2 van en public/assets/fonts/ — la CSP es
   default-src 'self', asi que font-src cae en 'self' y un CDN no cargaria.
   Si los archivos no estan todavia, el stack del token cae a system-ui y la
   app se ve bien igual: la tipografia es una mejora, no una dependencia. */
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Titulos y wordmark: el mismo cuerpo tipografico en su peso mas pesado.
     Una sola familia — el sistema no carga una segunda fuente para titulos. */
  --font-display: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Los tres animales de la marca, hechos color. No son tokens de interfaz:
     los usa la identidad (marca de agua, cabecera de mail, cartel). */
  --marca-pasto: #2f6b45;
  --marca-pasto-claro: #7fb98d;
  --marca-hereford: #a34a2a;
}

/* ── Modo oscuro de la marca ──────────────────────────────────────
   app.css re-tinta los neutros a una paleta azulada (slate) y el primario a
   un celeste. Estos bloques la vuelven al verde: mismo mecanismo (preferencia
   del sistema + conmutador manual), mismos pares verificados AA. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #101510; --color-surface: #1b241c; --color-text: #edf1e9;
    --color-muted: #c3ccc0; --color-border: #33402f;
    --color-primary: #7fc79b; --color-primary-text: #0d1a12; --color-focus: #a8dcbc;
    --color-accent: #e0a184;
    --marca-pasto: #3d7f57; --marca-hereford: #e0a184;
  }
}
:root[data-theme="dark"] {
  --color-bg: #101510; --color-surface: #1b241c; --color-text: #edf1e9;
  --color-muted: #c3ccc0; --color-border: #33402f;
  --color-primary: #7fc79b; --color-primary-text: #0d1a12; --color-focus: #a8dcbc;
  --color-accent: #e0a184;
  --marca-pasto: #3d7f57; --marca-hereford: #e0a184;
}

/* ── Tipografia ───────────────────────────────────────────────────
   La jerarquia la hace el tamano, no el peso: los titulos van todos en 800
   porque Nunito en 800 sigue siendo amable, y los cuerpos en 400/600. */
.navbar-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
h1, h2, h3, .accion-titulo, .kpi-valor, .modulo-nombre {
  font-family: var(--font-display); letter-spacing: -.015em;
}
h1 { font-weight: 800; font-size: 1.75rem; line-height: 1.2; }
h2 { font-weight: 800; font-size: 1.2rem; }
h3 { font-weight: 800; }
.tablero-contexto, .kpi-label, .accion-detalle { font-weight: 400; }

/* La marca en la nav: un poco de aire entre el dibujo y el nombre. */
.navbar-brand { gap: .1rem; }

/* ── Controles en el verde de la marca ────────────────────────────
   app.css resuelve el hover del boton primario con filter: brightness(.94).
   Sobre un verde ya oscuro eso apenas se ve; el paso siguiente de la rampa
   si se ve, y mantiene el blanco del texto por encima de 4.5:1. */
.btn-primary:hover { background: #173d28; border-color: #173d28; filter: none; }
.btn-primary:active { background: #12301f; border-color: #12301f; }
:root[data-theme="dark"] .btn-primary:hover { background: #a8dcbc; border-color: #a8dcbc; }
:root[data-theme="dark"] .btn-primary:active { background: #c3e8d1; border-color: #c3e8d1; }

/* Accesos de carga: la ficha entera se tine al pasar, no solo el borde. En el
   galpon el dedo tapa el borde y el color de fondo es lo que se ve. */
.acciones-rapidas a:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.modulo:has(.modulo-link:hover) { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }

/* Enlaces: subrayado con offset, para que el verde no cargue con todo el
   trabajo de senalar que algo es un enlace. */
a { text-underline-offset: .18em; }

/* El pie lleva la marca de agua del pasto: dos briznas al ras, en el verde
   claro de la identidad. Decorativo puro, invisible para el lector de
   pantalla y sin peso: es un gradiente, no una imagen. */
.app-footer { border-top-color: var(--color-border); }
.footer-brand { font-family: var(--font-display); font-weight: 800; color: var(--color-text); }

/* ── La marca dibujada en la nav ───────────────────────────────────
   El <svg> va en linea (partials/nav.php) para que el wordmark sea texto real
   y para poder pintar el dibujo desde aca: asi el cuadro verde tambien sigue
   al modo oscuro, en vez de quedar un rectangulo oscuro sobre fondo oscuro. */
.navbar-logo .marca-fondo, .navbar-logo .marca-hueco { fill: #1f4d33; }
.navbar-logo .marca-pasto { fill: #2f6b45; }
.navbar-logo .marca-brizna { stroke: #7fb98d; }
.navbar-logo .marca-vaca { fill: #ffffff; stroke: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar-logo .marca-fondo,
  :root:not([data-theme="light"]) .navbar-logo .marca-hueco { fill: #2c6b47; }
  :root:not([data-theme="light"]) .navbar-logo .marca-pasto { fill: #3d7f57; }
  :root:not([data-theme="light"]) .navbar-logo .marca-brizna { stroke: #9ed0aa; }
}
:root[data-theme="dark"] .navbar-logo .marca-fondo,
:root[data-theme="dark"] .navbar-logo .marca-hueco { fill: #2c6b47; }
:root[data-theme="dark"] .navbar-logo .marca-pasto { fill: #3d7f57; }
:root[data-theme="dark"] .navbar-logo .marca-brizna { stroke: #9ed0aa; }

/* Seccion actual del menu. app.css marca la pagina con aria-current pero no le
   da tratamiento visual: el estado existia para el lector de pantalla y no
   para el ojo. El fondo tenido mas el peso 600 lo hacen visible sin que el
   color viaje solo. */
.nav-links a[aria-current="page"] {
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary); font-weight: 600;
}