/* ==========================================================================
   Ukaro Ganadero — tema "Sabana"
   --------------------------------------------------------------------------
   Redefine los tokens de ukaro-ui con los valores de la paleta Sabana
   (ver docs/prototipo/ukaro-gan-paleta-agricola.html).

   Regla de oro: acá NO se copia ni se forkea el CSS de ukaro-ui. Solo se
   reasignan sus variables. Los componentes cotton (<c-ukaro.*>) leen estas
   mismas variables, así que se re-tematizan solos y ukaro-ui se puede
   actualizar sin perder la paleta.

   Se carga DESPUÉS de ukaro.css (ver templates/base.html, slot extra_head).
   ========================================================================== */

:root {
  /* color-scheme — controles nativos del navegador (auditoría de diseño,
     2026-08-11). Sin esto, el <input type="date"> (y el scrollbar, el
     <select> nativo, etc.) siempre se pintan como si la página fuera clara,
     aunque ukaro-ui esté en modo oscuro — el ícono de calendario queda
     oscuro/apagado sobre el input oscuro, casi ilegible, en vez de
     invertirse a un ícono claro. Va DENTRO de :root/html.dark (no en un
     bloque nuevo): test_theme.py lee los tokens del primer bloque que
     matchea cada selector, un `html.dark{}` duplicado le rompe el parser. */
  color-scheme: light;

  /* --- Primario: Verde Potrero (reemplaza el azul corporativo) --- */
  --blue: #33502E;        /* Verde Potrero — nav activo, enlaces, foco */
  --blue-dark: #23361F;   /* Potrero oscuro — chips de marca/organización */
  --blue-light: #9CC17F;  /* Brote */
  --blue-700: #2A4226;    /* hover de primario */
  /* ukaro-ui v0.4.1 usa --link para el acento COMO TEXTO (enlaces, nav activo, tabs).
     var() se resuelve en el scope de uso, así que esta línea hace que --link siga al
     verde Sabana en claro, oscuro y #uk-sidebar sin repetirla. Sin esto, el acento-texto
     caería al azul corporativo (#1558C0) que ukaro-ui trae por defecto. */
  --link: var(--blue);
  --grad: linear-gradient(135deg, #33502E 0%, #23361F 100%);

  /* --- Semánticos (Sabana los tiñe de tierra, no usa los saturados) ---
     Oscurecidos respecto del prototipo (#3F8E52 / #B8721E) lo mínimo para
     llegar a WCAG AA 4.5:1 sobre los TRES fondos donde aparecen (--card, --body
     y --panel), no solo sobre --card. El spec §3 exige que el estado se
     comunique con color + ícono + TEXTO, así que estos valores se usan como
     texto y deben cumplir contraste de texto, no solo de gráfico. */
  --green: #357846;
  --green-dark: #2C6B3B;
  --warning: #985E19;
  --warning-600: #965C16;
  --danger: #A83C2E;
  --danger-600: #8C3025;

  /* --- Superficies --- */
  --body: #F1F4EC;
  --card: #FFFFFF;
  --sidebar: #1B2A18;     /* noche de potrero: oscuro también en modo claro */
  --input: #FFFFFF;
  --panel: #E9EEE2;

  /* --- Texto --- */
  --text: #201C14;        /* casi negro con tibieza de tierra */
  --text-2: #5B5A47;
  /* Oscurecido desde #8B8A73 del prototipo. El valor se elige contra --panel,
     que es el fondo MÁS CLARO sobre el que aparece este texto (la ayuda de los
     campos vive dentro de .fpanel); si se calibra solo contra --card, falla ahí
     y en el fondo de página. Lo detectó una auditoría UX externa. */
  --text-muted: #6C6C5A;

  /* --- Bordes y estados --- */
  --border: #DCE2D2;
  --border-strong: #C3CBB4;
  --hover: #E9EEE2;

  /* Borde propio de los CONTROLES (WCAG 1.4.11: 3:1 no-textual). El borde es
     la única señal del límite de un input (relleno blanco sobre tarjeta
     blanca), y con --border-strong medía 1.42:1 dentro de los paneles: los
     campos se perdían a la vista. Detectado por Simón usando el sistema.
     3.92:1 vs blanco · 3.32:1 vs panel. El hover sube a 5.75:1 para conservar
     la progresión reposo → hover → foco (el foco ya estaba en 9:1). */
  --input-border: #7A8562;
  --input-border-hover: #5C6B47;

  /* --- Tintes (fondos suaves de badges/estados) --- */
  --tint-blue: rgba(51, 80, 46, .10);
  --tint-green: rgba(63, 142, 82, .12);
  --tint-amber: rgba(217, 154, 43, .15);
  --tint-red: rgba(168, 60, 46, .10);

  /* --- Sombras: tiñen a verde, no a gris azulado --- */
  --shadow-sm: 0 1px 2px rgba(27, 42, 24, .07);
  --shadow-md: 0 6px 16px rgba(27, 42, 24, .10);
  --shadow-lg: 0 16px 34px rgba(27, 42, 24, .16);

  /* --- Radios --- */
  --r-card: .875rem;  /* 14px */
  --r: .5625rem;      /* 9px  */
  --r-sm: .375rem;    /* 6px  */

  /* --- Tokens propios de Ukaro Ganadero (no existen en ukaro-ui) --- */
  --accent-600: #C17D1F;  /* Oro de Sabana oscuro — hover de CTA */
  --accent-500: #D99A2B;  /* Oro de Sabana — CTA, cifras clave */
  --accent-200: #F3D28E;  /* Oro claro — resaltes suaves */

  /* Slab-serif para títulos. La webfont real (Zilla Slab) todavía no está
     vendorizada, por eso cae a Georgia — ver docs/PENDIENTES.md. */
  --font-display: 'Zilla Slab', 'Roboto Slab', Georgia, 'Times New Roman', serif;
}

/* ==========================================================================
   Modo oscuro — "noche de sabana"
   ukaro-ui alterna con la clase .dark en <html> (no con data-theme).
   Mantiene su regla de elevación: body < sidebar < card.
   ========================================================================== */
html.dark {
  color-scheme: dark;

  --blue: #9CC17F;        /* en oscuro el primario aclara para contrastar */
  --blue-dark: #33502E;
  --blue-light: #C0DBA8;
  --blue-700: #B4D49A;
  --grad: linear-gradient(135deg, #598A47 0%, #33502E 100%);

  --green: #6BB077;
  --green-dark: #3F8E52;
  --warning: #D99A2B;
  --warning-600: #E3A83F;
  --danger: #CE7C6E;  /* calibrado contra los 3 fondos, no solo --card */
  --danger-600: #D9705F;

  --body: #12180F;
  --card: #1C2617;
  --sidebar: #161E12;
  --input: #232F1C;
  --panel: #232F1C;

  --text: #ECEEE3;
  --text-2: #A9B49B;
  --text-muted: #8B9680;  /* aclarado desde #75816A del prototipo: AA sobre --panel */

  /* Aclarados tras la auditoría de diseño (2026-07-24): con #2C3A24 el borde
     medía 1.3:1 contra la tarjeta y las 4 tarjetas del panel se fundían con el
     fondo. Se sube a ~2:1 (visible sin volverse una línea dura). Los tokens de
     TEXTO no se tocaron: se midieron y ya cumplían AA (el peor: 4.53:1). */
  --border: #44573A;
  --border-strong: #516845;
  --hover: rgba(255, 255, 255, .055);

  /* 3.97:1 vs el fondo del input · 4.43:1 vs tarjeta. Hover 5.12:1. */
  --input-border: #7A8F63;
  --input-border-hover: #8CA470;

  --tint-blue: rgba(156, 193, 127, .15);
  --tint-green: rgba(107, 176, 119, .18);
  --tint-amber: rgba(227, 168, 63, .18);
  --tint-red: rgba(196, 96, 79, .18);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 12px 30px -10px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 55px -18px rgba(0, 0, 0, .8);

  --accent-500: #E3A83F;
  --accent-600: #D99A2B;
}

/* ==========================================================================
   Alerta informativa neutral
   --------------------------------------------------------------------------
   `alert-info` de ukaro-ui pinta con `--tint-blue` / `--blue`, que en la paleta
   Sabana son VERDE POTRERO. Una alerta informativa salía verde y se leía como
   "todo bien" cuando en realidad pedía atención.

   Se agrega un tono neutral para lo meramente informativo, y así el verde queda
   reservado para "correcto" y el ámbar para "revisar".
   ========================================================================== */
.alert-neutral {
  background: var(--panel);
  border-color: var(--border-strong);
  color: var(--text-2);
}

/* ==========================================================================
   Contraste de badges en modo oscuro (auditoría de diseño, 2026-08-11)
   --------------------------------------------------------------------------
   ukaro-ui ya aclara `.b-ok` en dark (html.dark .b-ok{color:#5FD39B}, ver
   ukaro.src.css línea 154) porque `--green-dark` no alcanza AA sobre el
   fondo semitransparente del propio badge en oscuro. Mismo problema real,
   sin resolver, en `.b-danger`: medido — `--danger-600` (#D9705F) da
   3.94:1 contra el fondo compuesto de `--tint-red` sobre `--card` oscuro,
   por debajo del mínimo WCAG AA de 4.5:1 para texto ("Vacía", "Aborto").
   Mismo patrón de fix: un tono más claro, solo para dark, verificado en
   4.94:1 contra ese mismo fondo compuesto.
   ========================================================================== */
html.dark .b-danger {
  color: #E08A78;
}

/* ==========================================================================
   Feedback de carga de HTMX en las regiones de tabla
   --------------------------------------------------------------------------
   `<c-ukaro.table.search>` apunta `hx-indicator` a la región de resultados,
   pero ukaro-ui solo estiliza `.u-btn.htmx-request` (el spinner de los
   botones): una región marcada como "cargando" no cambia en nada, así que al
   filtrar no había ninguna señal de que el sistema estuviera trabajando.

   Se atenúa y se bloquea la interacción mientras llega la respuesta. Con la
   conexión de una finca, ese lapso se nota.
   ========================================================================== */
#uk-table-region.htmx-request {
  opacity: .45;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* ==========================================================================
   Objetivos táctiles
   --------------------------------------------------------------------------
   `.u-btn-sm` de ukaro-ui trae `min-height:0`, y son los botones de acción de
   cada fila: los que se tocan con guantes, de pie en el corral y bajo sol.
   Se elevan a 40px con separación, que es el mínimo razonable en una tabla
   (44px en un botón dentro de fila deja la tabla demasiado alta).
   ========================================================================== */
.uk-tabla-acciones .u-btn-sm {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* El mínimo táctil aplica a TODO botón chico, no solo a los de tabla: la
   auditoría de diseño midió ~32px en los botones de las alertas del panel,
   que habían quedado fuera de la regla original. */
.u-btn-sm {
  min-height: 40px;
}

.uk-tabla-acciones {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;  /* separación mínima entre objetivos táctiles */
}

/* Mismo criterio, para los íconos del navbar (☰ 🔍 🌙 🔔): medían 34px y
   quedaban muy juntos entre sí (gap de 4px) — auditoría de diseño 2026-08-11.
   Se sube al mismo mínimo de 44px que un botón de acción normal; el gap ya
   crece solo al crecer el botón, no hace falta tocar el layout del navbar. */
.icon-btn {
  width: 44px;
  height: 44px;
}

/* Fila clicable: el objetivo táctil más grande posible es la fila entera. */
.uk-fila-clicable {
  cursor: pointer;
}

.uk-fila-clicable:hover {
  background: var(--hover);
}

/* ==========================================================================
   Visibilidad de los controles de formulario (WCAG 1.4.11)
   --------------------------------------------------------------------------
   ukaro-ui dibuja `.u-input` con --border-strong, calibrado para separadores
   decorativos, no para límites de controles interactivos. Acá se le da a los
   inputs su borde propio (ver tokens --input-border-*). Mismo mecanismo de
   siempre: se sobreescribe el VALOR en el tema, no se forkea el CSS.
   ========================================================================== */
.u-input {
  border-color: var(--input-border);
}

.u-input:hover:not(:focus) {
  border-color: var(--input-border-hover);
}

/* ==========================================================================
   Reglas de tabla de la auditoría de diseño (2026-07-24)
   --------------------------------------------------------------------------
   - Densidad compacta: en un listado de 42+ animales, la altura holgada de
     ukaro-ui obliga a scroll largo; con esto entran ~2x más filas.
   - Proyección: una fecha ESTIMADA (parto probable) no puede leerse igual que
     una fecha ocurrida — cursiva + color secundario + el prefijo «~» que pone
     el template.
   Documentadas en la Muestra de paleta para que las pantallas nuevas las
   hereden por defecto.
   ========================================================================== */
.uk-tabla-compacta th,
.uk-tabla-compacta td {
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.uk-proyeccion {
  font-style: italic;
  color: var(--text-2);
}

/* En los pares etiqueta-valor de las fichas, el VALOR es el dato: pesa más
   que la etiqueta (la auditoría notó que se leía al revés). */
dl > div > dd {
  font-weight: 600;
}

/* ==========================================================================
   Tarjeta de listado en móvil: menos ruido, más legible (auditoría 2026-08-11)
   --------------------------------------------------------------------------
   Cada campo traía su propia raya completa — separaba TODO por igual, sin
   agrupar nada de verdad (fecha y comprador se veían tan "distintos" entre
   sí como dos tarjetas distintas). Se quita esa raya en los campos comunes;
   queda solo bajo cell-head, que sí separa con sentido el "título" de la
   tarjeta del resto. El texto del VALOR sube a 16px (la etiqueta, en
   ::before, tiene su propio tamaño y no se toca) — es una app de campo, se
   lee de pie y a veces al sol.
   ========================================================================== */
@media (max-width: 768px) {
  .u-table.responsive tbody td:not(.cell-head):not(.cell-actions) {
    border-bottom: none;
    font-size: 1rem;
  }
}

/* ==========================================================================
   Scroll horizontal de tabla también en escritorio (corrección veterinario,
   2026-08-15)
   --------------------------------------------------------------------------
   `<c-ukaro.table>` envuelve la tabla en `overflow-x-auto md:overflow-visible`
   (ukaro-ui): a partir de 768px el scroll se apaga a propósito. Con pocas
   columnas eso no se nota, pero cualquier listado ancho de verdad (Servicios
   y diagnósticos, con 11 columnas) se desborda del `<c-ukaro.card>` y tapa el
   contenido de al lado — la columna "Acciones" queda inalcanzable. Se
   reactiva el scroll a cualquier ancho; no se toca el componente de
   ukaro-ui (submódulo, no se forkea), solo se reafirma el valor en el tema.
   ========================================================================== */
.u-card > .overflow-x-auto {
  overflow-x: auto !important;
}

/* ==========================================================================
   Cifras largas en tarjetas KPI (corrección veterinario, 2026-08-15)
   --------------------------------------------------------------------------
   `<c-ukaro.kpi>` pinta `value` en texto grande (text-3xl) sin punto de
   quiebre propio: un número sin espacios ("Bs 150.320.899.456,32" — nada
   raro acá, con la inflación) no tiene dónde partirse y se sale de la
   tarjeta en vez de bajar de línea. Con el separador de miles activado
   (ver settings.USE_THOUSAND_SEPARATOR) esto se vuelve más probable, no
   menos. Se permite partir en cualquier punto SOLO cuando no entra entero.
   ========================================================================== */
.kpi .text-3xl {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Fila de tabla con detalle desplegable (auditoría de diseño, 2026-08-11)
   --------------------------------------------------------------------------
   Solo para Servicios y diagnósticos: es el único listado donde un registro
   tiene datos en capas reales (servicio → diagnóstico por ovario → aborto),
   no un puñado de columnas planas. En vez de forzar ese detalle a la vista
   siempre (vuelve la tarjeta larguísima en el celular) o de esconderlo del
   todo (el veterinario lo necesita), se pliega detrás de un toggle — visible
   siempre en escritorio, donde ya hay lugar de sobra.

   `.uk-detalle` decora las celdas que Alpine (x-show="open") oculta/muestra.
   En escritorio se fuerza visible con !important: el toggle es un recurso
   solo para la tarjeta angosta de escritura móvil, no para la tabla ancha.
   ========================================================================== */
.uk-detalle-toggle-cell {
  /* La celda del toggle solo tiene un hijo (el botón): sin esto hereda
     justify-content:space-between de .u-table.responsive y el botón queda
     empujado al borde derecho de la tarjeta. */
  justify-content: flex-start !important;
}

.uk-detalle-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--link);
  background: none;
  border: none;
  padding: .3rem 0;
  cursor: pointer;
  min-height: 40px; /* objetivo táctil, igual que .u-btn-sm */
}

.uk-detalle-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}

.uk-detalle-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (min-width: 769px) {
  /* Arriba de 768px la tabla vuelve a ser tabla: el detalle se ve siempre y
     el toggle no tiene sentido (no hay tarjeta que acortar). */
  .uk-detalle-toggle-cell {
    display: none;
  }

  .uk-detalle {
    display: table-cell !important;
  }
}

/* ==========================================================================
   Título de sección pegado en móvil (auditoría de diseño, 2026-08-11)
   --------------------------------------------------------------------------
   El breadcrumb del navbar de ukaro-ui es `hidden md:flex`: por debajo de
   768px no existe ningún rastro del nombre de la pantalla una vez que se
   hace scroll más allá del <h1> de page_header. Se agrega una segunda barra
   pegajosa, solo en móvil, con el mismo texto — ver base.html.

   Los márgenes negativos cancelan el padding de <main id="uk-content"> (p-4
   por debajo de 768px) para que la barra llegue de borde a borde, igual que
   el navbar de arriba.
   ========================================================================== */
.uk-titulo-movil-sticky {
  display: none;
}

@media (max-width: 768px) {
  .uk-titulo-movil-sticky {
    display: block;
    position: sticky;
    top: 4rem; /* alto del navbar, h-16 */
    z-index: 10;
    margin: -1rem -1rem .75rem;
    padding: .65rem 1rem;
    font-weight: 700;
    font-size: .95rem;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
}

/* ==========================================================================
   Sidebar — reescopado de tokens
   --------------------------------------------------------------------------
   En Sabana el sidebar es verde oscuro TAMBIÉN en modo claro, pero .nav-link
   de ukaro-ui pinta con --text-2 / --text-muted, que en claro son oscuros:
   quedaría texto oscuro sobre fondo oscuro.

   Redefinir las custom properties acá alcanza para lo que SÍ declara color
   (.nav-link, .txt-muted, .icon-btn…), pero NO para lo que no lo declara: la
   marca, el nombre de la organización y el nombre del usuario no tienen clase
   de color, así que heredan el `color` ya computado de `body{color:var(--text)}`
   — oscuro en modo claro — y quedaban invisibles sobre el verde.

   Por eso hay que declarar `color` acá además de las variables: la herencia de
   CSS propaga el valor computado, no la variable.

   Bug real (veterinario, 2026-08-14): "letras del sidebar más claro". No era
   un ajuste de gusto — ukaro-ui v0.3.2 (H4b) metió una capa de indirección
   (--sidebar-text, --sidebar-text-2, --sidebar-muted, --sidebar-border,
   --sidebar-hover, --sidebar-active-bg, --sidebar-active-text) precisamente
   para no tener que reescopar acá: .nav-link/.nav-on/.txt-muted pintan con
   ESOS tokens, no con --text/--text-2/--text-muted/--blue directamente.
   Verificado con getComputedStyle() en un DOM real: --sidebar-text-2 se
   declara SOLO en :root como `var(--text-2)`, así que su valor computado
   queda fijado ahí (con el --text-2 oscuro global) ANTES de que este bloque
   redefina --text-2 — la herencia de custom properties propaga el valor ya
   sustituido, no la referencia var(), así que redefinir --text-2 acá no le
   llega. Contraste medido antes del fix: activo 1.67:1, inactivo 2.16:1,
   encabezados de sección 2.83:1 — los tres muy por debajo del mínimo AA
   (4.5:1). Los --sidebar-* de abajo SÍ resuelven bien porque apuntan (con
   var()) a tokens redefinidos en este MISMO bloque, no hace falta que nadie
   más los redeclare.
   ========================================================================== */
#uk-sidebar {
  color: var(--text);

  --text: #ECEEE3;
  --text-2: #C3CDB6;
  --text-muted: #A4B096;

  --blue: #9CC17F;        /* ítem activo: brote sobre noche de potrero */
  --blue-dark: #598A47;   /* chips de marca/organización: deben resaltar */
  --tint-blue: rgba(156, 193, 127, .15);

  --border: rgba(255, 255, 255, .10);
  --hover: rgba(255, 255, 255, .07);

  /* Indirección real que usan .nav-link/.nav-on/.txt-muted (ver comment de
     arriba) — sin esto, el sidebar completo cae al texto oscuro global. */
  --sidebar-text: var(--text);
  --sidebar-text-2: var(--text-2);
  --sidebar-muted: var(--text-muted);
  --sidebar-border: var(--border);
  --sidebar-hover: var(--hover);
  --sidebar-active-bg: var(--tint-blue);
  --sidebar-active-text: var(--blue);
}

/* ==========================================================================
   Sección de formulario plegable (auditoría de diseño, 2026-08-11)
   --------------------------------------------------------------------------
   "Registrar servicio" es un solo scroll de 4 secciones — la más larga de
   la app. Las dos menos frecuentes (Aborto, Notas) se envuelven en
   <details>: nativo, sin JS, con teclado y lector de pantalla gratis. Se
   reusan las clases .fpanel/.fpanel-title que ya trae ukaro-ui — no es un
   componente nuevo, es <details> disfrazado de la misma tarjeta de
   siempre. El template decide cuándo abrir por default (si ya hay datos o
   un error en esos campos).
   ========================================================================== */
.fpanel > summary.fpanel-title {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}

.fpanel > summary.fpanel-title::-webkit-details-marker {
  display: none;
}

.fpanel > summary.fpanel-title .uk-plegable-chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}

details[open] > summary.fpanel-title .uk-plegable-chevron {
  transform: rotate(180deg);
}

details.fpanel > .uk-plegable-body {
  margin-top: 1.1rem;
}

/* ==========================================================================
   Estado vacío compacto (auditoría de diseño, 2026-08-11)
   --------------------------------------------------------------------------
   `<c-ukaro.state.empty_state>` trae p-10 fijo (pensado para ocupar una
   página entera). En "Retiro y recordatorios" son 2 tarjetas UNO AL LADO
   DEL OTRO — con p-10 en las dos, el caso más común (nada pendiente) se ve
   como un vacío enorme. Se recorta el padding solo acá, sin tocar el
   componente (compone, no forkea).
   ========================================================================== */
.uk-empty-compacto > div {
  padding: 1.5rem 1rem;
}

/* ==========================================================================
   Botón de acción solo-ícono (listado de Animales, 2026-08-11)
   --------------------------------------------------------------------------
   `.u-btn-sm` trae padding pensado para texto+ícono (.4rem .8rem, ancho
   variable). Sin texto, el ícono queda descentrado en una caja rectangular
   angosta. Se fuerza cuadrado — mismo mínimo táctil de 40px que ya rige
   `.u-btn-sm` (ver arriba), el nombre de la acción vive en `title`/
   `aria-label`, no como texto visible.
   ========================================================================== */
.uk-btn-icon.u-btn-sm {
  width: 40px;
  padding: 0;
  gap: 0;
}