/* AgroStudio — overrides minimal sobre Metronic 9. Se carga DESPUÉS de assets/css/styles.css (Master.cshtml).
   Regla: separar con espacio y con tono de fondo, no con líneas. Las únicas líneas que quedan son el divisor
   entre filas de tabla/lista y el borde de los controles (inputs, botones).

   Dónde va cada cosa, y por qué:
   - Tokens y cromo (página, sidebar, header): SIN capa. styles.css declara sus tokens fuera de capa y las
     utilidades del layout (bg-background, border-e) dentro de @layer utilities; una regla sin capa les gana a las dos.
   - Componentes (card, tabla, badge): en @layer components, la misma capa de Metronic. Ganan por orden de
     carga, y una utilidad puesta a mano en una vista (border, bg-*) sigue ganando.
   Todo color nuevo tiene su par en .dark. No hay hex ni rgba fijos salvo la sombra de la card. */

/* ---------- 1. Tokens ---------- */
:root {
  --agro-canvas: oklch(97.2% 0.002 286);      /* fondo de página: en Metronic era el mismo blanco de la card */
  --agro-chrome: var(--color-white);          /* sidebar + header */
  --agro-inset: oklch(97.2% 0.002 286);       /* card dentro de card */
  --agro-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --border: oklch(95.3% 0.003 286);           /* era 94% */
  --muted-foreground: oklch(52% 0.016 286);   /* era zinc-500 (55.2%): AA también sobre el fondo gris */
}
.dark {
  --agro-canvas: var(--color-zinc-950);
  --agro-chrome: oklch(18.5% 0.006 286);
  --agro-inset: oklch(22.5% 0.006 286);
  --agro-card-shadow: 0 0 #0000;
  --card: oklch(18.5% 0.006 286);             /* era zinc-950, igual al fondo: la card dependía del borde */
  --popover: var(--color-zinc-900);
  --muted: oklch(24% 0.006 286);              /* era zinc-900: sobre la card nueva no se veía el hover */
  --accent: oklch(24% 0.006 286);
  --border: oklch(24.5% 0.006 286);           /* era zinc-800 */
  --muted-foreground: var(--color-zinc-400);  /* era zinc-500: no llegaba a AA */
}

/* ---------- 2. Cromo: página, sidebar, header ---------- */
body { background-color: var(--agro-canvas); }

/* Header más bajo (Metronic: 70 px, 60 en móvil). El breadcrumb es una línea de texto; la altura del logo del sidebar
   sale de la misma variable, así que se achican a la par. */
.demo1 { --header-height: 56px; }
@media (max-width: 64rem) { .demo1 { --header-height: 52px; } }

.demo1 .kt-sidebar {
  background-color: var(--agro-chrome);
  border-inline-end-width: 0;
}
.demo1 .kt-header {
  background-color: var(--agro-chrome);
  border-bottom-width: 0;                     /* la que agrega data-kt-sticky-class al hacer scroll */
  /* Por encima de toda barra fija del contenido (.rodeo-sticky, .dd-sticky, .settings-toolbar: 20; .ficha-sticky-anchor: 25). El header
     es un contexto de apilamiento (fixed + z-index), así que sus menús (tamaño de texto, usuario, campanita, breadcrumb) nunca pueden
     salir por encima de él: con el z-10 de Metronic quedaban tapados por esas barras al abrirse.
     El sidebar queda por encima del header, como con los valores de Metronic (en el celular no importa: el drawer de KTUI le pone z-index 100 en línea). */
  z-index: 30;
}
.demo1 .kt-sidebar { z-index: 40; }
/* El primer bloque de cada página pega más arriba: el header ya separa, no hace falta tanto aire antes de las pestañas o
   el título. Los wrappers de las vistas traen p-5 / lg:p-8 en los cuatro lados; acá solo se baja el de arriba. */
#contentContainer > .flex.flex-col { padding-top: calc(var(--spacing) * 3); }

/* Guía vertical de los submenús: la sangría ya dice que son hijos. */
.demo1 .kt-sidebar .kt-menu-accordion::before { border-inline-start-width: 0; }

/* ---------- 3. Componentes ---------- */
@layer components {
  .kt-card {
    border-width: 0;
    --tw-shadow: var(--agro-card-shadow);
    box-shadow: var(--agro-card-shadow);
  }
  /* Card dentro de card: no hay contraste de fondo que la separe, pasa a superficie hundida. */
  .kt-card .kt-card {
    background-color: var(--agro-inset);
    box-shadow: none;
  }
  .kt-card-header {
    border-bottom-width: 0;
    min-height: calc(var(--spacing) * 13);
  }
  .kt-card-header + .kt-card-content { padding-top: calc(var(--spacing) * 1); }
  .kt-card-footer {
    border-top-width: 0;
    padding-top: calc(var(--spacing) * 1);
  }

  /* Tabla: solo el divisor horizontal entre filas (el de la última ya lo saca Metronic). */
  .kt-table-border { border-width: 0; }
  .kt-table-border td,
  .kt-table-border th { border-inline-end-width: 0; }
  .kt-table thead th {
    background-color: transparent;
    color: var(--muted-foreground);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .kt-table tbody tr:has(td):hover {
    background-color: color-mix(in oklab, var(--muted) 45%, transparent);
  }
  .kt-table tfoot { background-color: transparent; }

  /* Badge "outline": queda el tinte, se va la línea. Las variantes de color fijan su propio borde con más
     especificidad; apagar el estilo las cubre a todas de una vez. */
  .kt-badge-outline { --tw-border-style: none; }
}

/* ---------- 4. Utilidades que las vistas usan y el CSS compilado no trae ----------
   Sin regla de color, border-b / border-t caen a currentColor: líneas del color del texto. */
@layer utilities {
  .border-border\/60 { border-color: var(--border); }
  .border-primary\/30 { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
}

/* ---------- 5. Tablero del tambo (Features/LiveStock/Dairy/Dashboard) ----------
   El CSS compilado no trae grid-cols-12 ni col-span-9/3: la fila de 5 indicadores y la de tres columnas iguales se arman acá. */
.dairy-row3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dairy-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 64rem) {
  .dairy-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dairy-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* El nombre ocupa siempre una línea: los cinco porcentajes quedan a la misma altura; el tooltip trae el texto completo. */
.dairy-kpi-label { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dairy-tip { position: relative; cursor: help; }
.dairy-tip::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 250px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--foreground); color: var(--background);
  font-size: 12px; line-height: 1.45;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.dairy-tip:last-child::after { left: auto; right: 0; }
.dairy-tip:hover::after, .dairy-tip:focus::after { opacity: 1; }
.dairy-secondary .dairy-tip::after { top: calc(100% + 4px); }
/* Las filas con barra y las que no ocupan lo mismo: la lista no queda escalonada. */
.dairy-secondary > .dairy-tip { min-height: 2.75rem; }

/* Semáforo del tablero: punto de color (kt-badge-*) y barra con la marca de la meta. */
.dairy-dot { display: inline-block; width: 8px; height: 8px; min-width: 8px; padding: 0; border-radius: 9999px; flex: none; }
.dairy-goal-track { position: relative; }
.dairy-goal-mark { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--foreground); }

/* styles.css (Metronic) fuerza .apexcharts-legend en columna y pisa la fila que ApexCharts usa con la leyenda abajo:
   en las tortas del tablero la leyenda va en horizontal, centrada y en varias filas si no entra. */
.dairy-donut .apexcharts-legend.apx-legend-position-bottom,
.dairy-line .apexcharts-legend.apx-legend-position-bottom { flex-direction: row; justify-content: center; }

/* "Situación actual" es una banda de lectura: lleva el color del fondo de página (en oscuro, más oscuro que las cards) con un
   borde fino y sin sombra, para que descanse la vista entre las tarjetas de arriba y las de abajo. */
.dairy-situation { background-color: var(--agro-canvas); border: 1px solid var(--border); box-shadow: none; }

/* Tortas en oscuro: ApexCharts pinta el texto en gris oscuro por defecto (leyenda inline, centro con fill de atributo) y se pierde
   sobre la card. Solo las tortas del tablero; sigue el tema solo, sin JS. */
.dark .dairy-donut .apexcharts-legend-text { color: var(--foreground) !important; }
.dark .dairy-donut .apexcharts-datalabel-label { fill: var(--muted-foreground); }
.dark .dairy-donut .apexcharts-datalabel-value { fill: var(--foreground); }

/* Los siete datos de "Situación actual" van en una sola fila mientras entren (6,25 rem como mínimo cada uno) y recién
   después bajan a otra: md:grid-cols-4 no está en el CSS compilado y xl:grid-cols-7 solo aplica desde 1280 px, así que
   entre 1024 y 1280 caía a dos columnas. */
.dairy-situation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); gap: 0.75rem; }

/* Modo de vista del tablero (Rápida / Intermedia / Avanzada). El selector es un <details> discreto: el CSS compilado no trae
   `absolute`, así que el menú se posiciona acá. */
.dd-view { position: relative; }
.dd-view > summary { list-style: none; cursor: pointer; }
.dd-view > summary::-webkit-details-marker { display: none; }
.dd-view-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 15rem;
  padding: 0.25rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--background);
}
.dd-view-item {
  display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0.5rem 0.625rem; border: 0; border-radius: 0.375rem;
  background: transparent; text-align: left; cursor: pointer; color: var(--foreground);
}
.dd-view-item:hover { background: var(--accent); }

/* Selector de período compacto (agenda, eventos, tablero): el período es el botón y el menú trae el tipo/paso y la tolerancia. */
.period-pop { position: relative; }
.period-pop > summary { list-style: none; cursor: pointer; }
.period-pop > summary::-webkit-details-marker { display: none; }
.period-pop-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 21rem; max-width: calc(100vw - 2rem);
  padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--background); box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
}
.period-seg { display: flex; border: 1px solid var(--border); border-radius: 0.375rem; overflow: hidden; }
.period-seg a { flex: 1; padding: 0.3rem 0; text-align: center; font-size: 0.75rem; color: var(--foreground); border-right: 1px solid var(--border); }
.period-seg a:last-child { border-right: 0; }
.period-seg a:hover { background: var(--accent); }
.period-seg a.active { background: var(--accent); font-weight: 500; }
/* El período va siempre a la derecha de la fila, también cuando en el celular baja debajo de las pestañas. */
.period-end { margin-left: auto; }
/* En el celular la barra baja de fila y el botón queda a la izquierda: el menú ocupa el ancho de la barra fija (el contenedor posicionado) en vez de colgar del botón. */
@media (max-width: 40rem) {
  .period-pop { position: static; }
  .period-pop-menu { left: 0; right: 0; width: auto; max-width: none; }}
.dd-view-item .dd-check { width: 1rem; flex: none; padding-top: 2px; }

/* Tarjeta principal: lo que se cobra (litros) en grande, el resto en una línea de texto. */
.dd-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.625rem; align-items: start; }
/* En el celular los tres datos siguen en UNA fila, con los números más chicos para que entren; desde 40 rem vuelven al tamaño grande. */
.dd-hero-main { font-size: 1.375rem; line-height: 1.15; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.dd-hero-sub { font-size: 1.25rem; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.dd-hero-grid .dd-unit { font-size: 0.75rem; }
@media (min-width: 40rem) {
  .dd-hero-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.5rem; }
  .dd-hero-main { font-size: 2.5rem; line-height: 1.1; white-space: normal; }
  .dd-hero-sub { font-size: 1.375rem; }
  .dd-hero-grid .dd-unit { font-size: 0.875rem; }
}
.dd-row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 64rem) { .dd-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dd-unit { font-size: 0.875rem; font-weight: 400; color: var(--muted-foreground); }
.dd-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.dd-meta b { font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; }
.dd-meta-row { padding-top: 0.75rem; margin-top: 0.875rem; border-top: 1px solid var(--border); }

/* Franja "Requiere atención": una línea, solo si hay algo. */
.dd-attn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 0.625rem 0.875rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; }
.dd-attn b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dd-attn-link { margin-left: auto; font-size: 0.8125rem; }

/* Indicadores reproductivos grandes con barra y marca de la meta. */
.dd-big-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.dd-big { padding: 0.75rem 0.875rem; border-radius: 0.5rem; background-color: var(--agro-canvas); }
.dd-big-value { font-size: 2rem; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Barra apilada (composición del rodeo): segmentos de un mismo tono, de más a menos intenso. */
.dd-bar { display: flex; gap: 2px; height: 1.25rem; }
.dd-bar > span { min-width: 2px; }
.dd-bar > span:first-child { border-radius: 4px 0 0 4px; }
.dd-bar > span:last-child { border-radius: 0 4px 4px 0; }
.dd-seg-0 { background: var(--primary); }
.dd-seg-1 { background: color-mix(in oklab, var(--primary) 70%, transparent); }
.dd-seg-2 { background: color-mix(in oklab, var(--primary) 48%, transparent); }
.dd-seg-3 { background: color-mix(in oklab, var(--primary) 30%, transparent); }
.dd-seg-4 { background: color-mix(in oklab, var(--primary) 18%, transparent); }
.dd-seg-5 { background: color-mix(in oklab, var(--primary) 10%, transparent); }
.dd-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.dd-legend i { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem; border-radius: 2px; }

/* Composición del rodeo: colores por grupo (ordeño, secas, vaquillonas, recría / vacías) y gráficos chicos. */
.dd-c0 { background: #1b84ff; }
.dd-c1 { background: #17c653; }
.dd-c2 { background: #f6c000; }
.dd-c3 { background: #99a1b7; }
.dd-s0 { stroke: #1b84ff; }
.dd-s1 { stroke: #17c653; }
.dd-s2 { stroke: #f6c000; }
.dd-s3 { stroke: #99a1b7; }
/* Cuatro mosaicos: 1 columna, 2 (2 x 2) o los 4 en una fila; nunca 3 + 1, que deja un hueco en la esquina. */
.dd-minis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2rem; }
@media (min-width: 40rem) { .dd-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 90rem) { .dd-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dd-mini { min-width: 0; }
.dd-mini-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-foreground); margin-bottom: 0.75rem; }
.dd-mini-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1rem; }
.dd-donut-wrap { position: relative; flex: none; width: 6.5rem; height: 6.5rem; }
.dd-donut { width: 100%; height: 100%; }
.dd-donut-bg { stroke: var(--border); }
.dd-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.dd-donut-center b { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dd-donut-center span { font-size: 0.6875rem; color: var(--muted-foreground); }
.dd-mini-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 11rem; min-width: 0; font-size: 0.8125rem; }
.dd-mini-legend li { display: flex; align-items: center; gap: 0.5rem; }
.dd-mini-legend i { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 3px; }
.dd-mini-legend .dd-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.dd-mini-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dd-mini-legend em { font-style: normal; white-space: nowrap; width: 2.75rem; text-align: right; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* Tendencias: cuatro mosaicos con su línea. */
.dd-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem 1.5rem; }
.dd-trend { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dd-trend-value { font-size: 1.625rem; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.dd-spark { width: 100%; height: 2.25rem; margin-top: 0.375rem; overflow: visible; }
.dd-spark polyline { stroke: #1b84ff; stroke-linejoin: round; stroke-linecap: round; }
/* Descarte: la tasa a la izquierda y doce columnas mensuales. */
.dd-culling { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: end; }
@media (min-width: 48rem) { .dd-culling { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; } }
.dd-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.375rem; height: 7rem; }
.dd-col { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0; }
.dd-col-stack { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.dd-col-n { font-size: 0.6875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.dd-col-bar { width: 70%; max-width: 1.5rem; display: flex; flex-direction: column; border-radius: 3px; overflow: hidden; }
.dd-col-bar > span { display: block; min-height: 0; }
.dd-col-label { font-size: 0.6875rem; color: var(--muted-foreground); }
/* Preñez por categoría: una barra fina por etapa. */
.dd-preg { display: flex; flex-direction: column; gap: 0.875rem; font-size: 0.8125rem; }
.dd-preg-row { display: flex; flex-direction: column; gap: 0.375rem; }
.dd-bar-thin { height: 0.625rem; }
.dd-bar-thin > span, .dd-bar-thin > span:first-child, .dd-bar-thin > span:last-child { border-radius: 999px; }
.dd-preg-n { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.dd-hbars { display: flex; flex-direction: column; gap: 0.625rem; }
.dd-hbar { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.dd-hbar-label { color: var(--muted-foreground); }
.dd-hbar-track { height: 0.625rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.dd-hbar-track > span { display: block; height: 100%; border-radius: 999px; }
.dd-hbar b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }


/* Sin scroll horizontal al fijar o soltar el menú ni al achicar la ventana. Los contenedores flex del layout (wrapper, main y
   su contenedor) tienen min-width:auto: no bajan del ancho mínimo de su contenido, y ese ancho lo marcan los gráficos de
   ApexCharts, que quedan con el ancho en píxeles que tenían al dibujarse (la curva de lactancia y la proyección miden
   unos 1000 px). Con el menú fijo el contenedor no podía achicarse, y como no se achicaba, ApexCharts tampoco se enteraba
   de que debía redibujar. Con min-width:0 el contenedor se achica y los gráficos se redibujan al ancho nuevo. */
body > .grow,
.kt-wrapper,
.kt-wrapper .grow,
#content,
#contentContainer { min-width: 0; }

/* Ícono propio: cabeza de vaca (Keenicons no trae ninguno de hacienda). Se usa igual que los otros: class="ki-filled ki-cow".
   Es una máscara, así que toma el color del texto (currentColor) y el tamaño de la fuente. */
.ki-filled.ki-cow::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2C7 3.5 5.5 3 4.5 3.2 5 4.5 6 5.5 7.5 6.2zM16 5.2C17 3.5 18.5 3 19.5 3.2 19 4.5 18 5.5 16.5 6.2zM7 7.5L3 6.5C1.8 6.2 1.5 7.6 2.5 8.4L7 9.5zM17 7.5L21 6.5C22.2 6.2 22.5 7.6 21.5 8.4L17 9.5z'/%3E%3Cpath fill-rule='evenodd' d='M7 6C7 5 8.5 4.5 12 4.5S17 5 17 6L16.5 12C16.5 14 18 15 18 17.5 18 20 15.5 21 12 21S6 20 6 17.5C6 15 7.5 14 7.5 12zM9.5 8.5a1 1 0 1 0 0 2 1 1 0 1 0 0-2zM14.5 8.5a1 1 0 1 0 0 2 1 1 0 1 0 0-2zM10.2 17.1a.9.9 0 1 0 0 1.8.9.9 0 1 0 0-1.8zM13.8 17.1a.9.9 0 1 0 0 1.8.9.9 0 1 0 0-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2C7 3.5 5.5 3 4.5 3.2 5 4.5 6 5.5 7.5 6.2zM16 5.2C17 3.5 18.5 3 19.5 3.2 19 4.5 18 5.5 16.5 6.2zM7 7.5L3 6.5C1.8 6.2 1.5 7.6 2.5 8.4L7 9.5zM17 7.5L21 6.5C22.2 6.2 22.5 7.6 21.5 8.4L17 9.5z'/%3E%3Cpath fill-rule='evenodd' d='M7 6C7 5 8.5 4.5 12 4.5S17 5 17 6L16.5 12C16.5 14 18 15 18 17.5 18 20 15.5 21 12 21S6 20 6 17.5C6 15 7.5 14 7.5 12zM9.5 8.5a1 1 0 1 0 0 2 1 1 0 1 0 0-2zM14.5 8.5a1 1 0 1 0 0 2 1 1 0 1 0 0-2zM10.2 17.1a.9.9 0 1 0 0 1.8.9.9 0 1 0 0-1.8zM13.8 17.1a.9.9 0 1 0 0 1.8.9.9 0 1 0 0-1.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Solo pantallas chicas (< 768px, el mismo corte que md:); desde md no cambia nada. styles.css es el demo de Metronic ya
   compilado y no se regenera: lo que el demo no trae va acá y no en style="" suelto en las vistas. */
@media (max-width: 767px) {
  /* El ancho útil se perdía en rellenos apilados (contenedor 24 + página 20 + panel 20 por lado): se achican. */
  #contentContainer { padding-inline: 0.75rem; }
  #contentContainer > [class~="p-5"] { padding: 0.75rem; gap: 0.75rem; }

  /* Tablas: sin el ancho mínimo por columna del escritorio (sumaban más que la pantalla y obligaban a scrollear de costado
     con filas altísimas) y con menos aire entre celdas. */
  .kt-table th,
  .kt-table td { padding: 0.5rem 0.625rem; font-size: 0.8125rem; line-height: 1.25rem; }
  .kt-table th { height: auto; }
  .kt-table th[class*="min-w-"] { min-width: 0 !important; }
  .kt-table .kt-badge { white-space: normal; }
}

/* Historial de eventos (ficha del animal) en mobile: cada fila es una tarjeta compacta en vez de una tabla de 4 columnas que
   no entra (fecha · tipo · categoría en la primera línea, el detalle ocupa todo el ancho debajo). Se oculta el encabezado. */
@media (max-width: 767px) {
  .ficha-events thead { display: none; }
  .ficha-events tbody tr { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 0.625rem; row-gap: 0.125rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
  .ficha-events tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .ficha-events tbody td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 500; white-space: nowrap; }
  .ficha-events tbody td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .ficha-events tbody td:nth-child(2) { grid-column: 3; grid-row: 1; }
  /* Columna de acciones (menú ⋮ de la Fase 2 de la ficha), si existe: arriba a la derecha de la tarjeta. */
  .ficha-events tbody td:nth-child(5) { grid-column: 4; grid-row: 1; }
  .ficha-events tbody td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; font-size: 0.75rem; line-height: 1rem; color: var(--secondary-foreground); }
  /* La fila del panel de Corregir / Anular / Editar nota (agrostudio-event-history.js) ocupa todo el ancho, no es una tarjeta de evento. */
  .ficha-events tbody tr[data-ev-panel] { display: block; padding: 0; }
  .ficha-events tbody tr[data-ev-panel] td { grid-column: auto; grid-row: auto; font-weight: 400; white-space: normal; font-size: inherit; color: inherit; }
}

/* Tablas de historial de la ficha (servicios, partos, pesajes, controles…) en mobile: cada fila es un bloque con la fecha arriba y
   debajo una línea por dato ("Rótulo  valor"), en vez de 4 columnas angostas con el texto partido en muchas líneas.
   Los rótulos (data-label) los copia el script de AnimalProfile desde el encabezado. */
@media (max-width: 767px) {
  .history-table thead { display: none; }
  .history-table tbody tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
  .history-table tbody td { display: block; padding: 0; border: 0; font-size: 0.8125rem; line-height: 1.25rem; }
  .history-table tbody td:first-child { font-weight: 600; margin-bottom: 0.125rem; }
  .history-table tbody td[data-label]:not(:first-child) { display: grid; grid-template-columns: 4.25rem 1fr; column-gap: 0.5rem; align-items: baseline; }
  .history-table tbody td .kt-badge { justify-self: start; }
  .history-table tbody td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--muted-foreground); font-size: 0.75rem; }
}

/* Indicadores de las pestañas de la ficha (Reproducción, Producción): el tamaño de escritorio vive acá y no en style="" para poder
   achicarlo en mobile, donde 17–21px de valor y 5 columnas se comían la pantalla. */
.ficha-kpi-label { font-size: 11px; letter-spacing: 0.02em; color: var(--secondary-foreground); }
.ficha-kpi-value { font-size: 17px; font-weight: 600; }
.ficha-kpi-value--lg { font-size: 21px; font-weight: 500; }
.ficha-kpi-bar { padding-left: 14px; border-left: 1px solid var(--border); }
@media (max-width: 767px) {
  .ficha-kpi-label { font-size: 10px; letter-spacing: 0; }
  .ficha-kpi-value,
  .ficha-kpi-value--lg { font-size: 14px; font-weight: 600; }
  .ficha-kpis { gap: 0.75rem 1.25rem; }
  .ficha-kpi-bar { padding-left: 10px; }
}

/* Pestañas de la ficha en mobile: son 6 y suman más que la pantalla; la tarjeta recorta lo que sobra (overflow-hidden), así que
   Ubicación y Datos no se podían alcanzar. La barra se desliza de costado, sin barra de scroll y con una sombra en el borde que
   avisa que hay más (solo aparece del lado en que queda contenido oculto). */
@media (max-width: 767px) {
  #animal-tabs {
    overflow-x: auto;
    gap: 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--background) 30%, transparent) 0 0 / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--background) 30%, transparent) 100% 0 / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent) 0 0 / 0.75rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) 100% 0 / 0.75rem 100% no-repeat scroll;
  }
  #animal-tabs::-webkit-scrollbar { display: none; }
  #animal-tabs > .kt-tab-toggle { flex: none; white-space: nowrap; }
}

/* Rodeo: la grilla de filtros se acomoda al ancho (tantas columnas de ~200 px como entren) sin puntos de corte fijos. */
.rodeo-filtros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem 1rem; }

/* Rodeo: el buscador de la barra, con la lupa adentro. Va acá porque el CSS compilado no trae "absolute", "pointer-events-none" ni el
   ancho mínimo arbitrario: ocupa lo que sobra de la barra entre 200 y 420 px y cede antes de mandar el resto a otra línea. */
/* Toggle segmentado (Animal | Lote): pista gris con la opción activa elevada en blanco. */
.seg-toggle { display: inline-flex; align-items: stretch; gap: 0.25rem; padding: 0.25rem; border-radius: 0.375rem; background: color-mix(in oklab, var(--accent) 70%, transparent); }
.seg-toggle > button { border: 0; background: transparent; padding: 0.375rem 0.625rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25; white-space: nowrap; color: var(--muted-foreground); cursor: pointer; transition: color .15s; }
.seg-toggle > button:hover { color: var(--foreground); }
.seg-toggle > button[aria-pressed="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.rodeo-search { position: relative; flex: 1 1 200px; min-width: 160px; max-width: 420px; }
.rodeo-search > .ki-filled { position: absolute; inset-inline-start: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.rodeo-search > .kt-input { padding-inline-start: 2rem; }

/* Rodeo: los menús de Filtros y Columnas miden 600 px, salvo que la pantalla sea más angosta (celular, panel chico). */
#rodeo-filtros-menu .kt-dropdown-menu, #rodeo-columnas-menu .kt-dropdown-menu { max-width: calc(100vw - 2rem); }

/* Rodeo: botón partido de Exportar (la acción + la flecha del formato), pegados y con un solo contorno redondeado. */
.rodeo-split > .kt-btn { border-start-end-radius: 0; border-end-end-radius: 0; }
.rodeo-split > [data-kt-dropdown] > .kt-btn { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: 1px; }

/* Rodeo en mobile: "Columnas" no aplica a las tarjetas; el selector de orden se estira entre "Filtros" y "Exportar".
   Las tarjetas (#rodeo-cards) y la tabla se alternan con md:hidden / hidden md:block. */
@media (max-width: 767px) {
  #rodeo-toolbar #rodeo-orden { flex: 1 1 0; min-width: 0; width: auto; }
  #rodeo-columnas-menu { display: none; }
  #rodeo-cards > a:last-child { border-bottom: 0; }
}

/* Tablero del tambo en mobile (< 768 px). Medido a 375 px: la página medía 446 px (los tooltips de 250 px, aunque invisibles, agrandan
   el área de scroll), las 10 tarjetas de indicadores ocupaban 6 filas de 84–106 px y la página 3.139 px de alto. */
@media (max-width: 767px) {
  /* Los tooltips (hover) no existen en el celular; al tocar la tarjeta (tabindex => :focus) la explicación sale fija abajo,
     a todo el ancho, y sin agrandar la página. */
  .dairy-tip::after,
  .dairy-tip:last-child::after,
  .dairy-secondary .dairy-tip::after {
    position: fixed; left: 0.75rem; right: 0.75rem; top: auto; bottom: 0.75rem; width: auto; z-index: 30;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  }
  /* Tarjetas más compactas: menos relleno y números de 20 px; la última (5.ª, impar) ocupa todo el ancho en vez de quedar sola. */
  .dairy-page .kt-card.p-4 { padding: 0.75rem; }
  .dairy-page .kt-card.p-5 { padding: 1rem; }
  .dairy-page .text-2xl { font-size: 1.25rem; line-height: 1.75rem; }
  .dairy-page .dairy-stats,
  .dairy-page .dairy-kpis { gap: 0.5rem; }
  .dairy-stats > :last-child,
  .dairy-kpis > :last-child { grid-column: 1 / -1; }
  /* El nombre del indicador se parte en hasta dos líneas (con una sola se cortaba: "Prop. preñez a primer s…"), siempre del
     mismo alto para que los porcentajes de las dos columnas queden alineados. */
  .dairy-kpi-label {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em;
  }
  .dairy-page .dairy-kpis .mt-2 { margin-top: 0.25rem; }
}

/* Pestañas de la Agenda del tambo en mobile (Para hacer / Alertas / Eventos a revisar): sumaban 440 px en 327 y la tercera
   quedaba afuera empujando toda la página. Como las de la ficha: se deslizan de costado, sin barra, con sombra en el borde.
   Acá el fondo es el de la página (no el de una tarjeta), por eso la sombra usa --agro-canvas. */
@media (max-width: 767px) {
  #agenda_tabs {
    overflow-x: auto;
    gap: 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--agro-canvas) 30%, transparent) 0 0 / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--agro-canvas) 30%, transparent) 100% 0 / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent) 0 0 / 0.75rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) 100% 0 / 0.75rem 100% no-repeat scroll;
  }
  #agenda_tabs::-webkit-scrollbar { display: none; }
  #agenda_tabs > .kt-tab-toggle { flex: none; white-space: nowrap; }
}

/* Lista de controles lecheros en mobile (< 768 px). Medido a 375 px: era una tabla de 9 columnas de 606 px en 287 (filas de 77 px). */
@media (max-width: 767px) {
  /* Lista (#controls-table, remota): cada control es una tarjeta. Fecha y descripción arriba; debajo, cada dato (de a tres) con su rótulo
     (data-label lo copia agrostudio-table-labels.js desde el encabezado, que se oculta). Un toque abre el control. */
  #controls-table thead { display: none; }
  #controls-table tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.75rem;
    padding: 0.75rem 0; border-bottom: 1px solid var(--border);
  }
  #controls-table tbody td { display: block; padding: 0; border: 0; text-align: left; font-size: 0.8125rem; min-width: 0; }
  #controls-table tbody td:nth-of-type(1) { font-weight: 600; }
  #controls-table tbody td:nth-of-type(2) { grid-column: span 2; color: var(--secondary-foreground); }
  /* El total (con sus litros por vaca) ocupa dos columnas: no se parte; brucelosis y TBC quedan juntas en la última fila. */
  #controls-table tbody td:nth-of-type(6) { grid-column: span 2; }
  #controls-table tbody td:nth-of-type(n+3)::before {
    content: attr(data-label); display: block; font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ── Carga de un control lechero (Features/LiveStock/Dairy/DairyControl/Load.cshtml) ─────────────────────────────────────────── */
.dl-progress { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.dl-progress > div { height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.25s ease; }
.dl-missing {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--muted); font-size: 0.8125rem;
}

/* Desplegable de vacas de la barra de ingreso */
.dl-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.375rem; z-index: 30; max-height: 18rem; overflow-y: auto;
  background: var(--background); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.dl-opt {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem;
  text-align: left; font-size: 0.875rem; background: transparent; border: 0; cursor: pointer;
}
.dl-opt + .dl-opt { border-top: 1px solid var(--border); }
.dl-opt:hover, .dl-opt-active { background: var(--muted); }
.dl-opt-main { font-weight: 600; color: var(--foreground); }
.dl-opt-side { font-size: 0.75rem; color: var(--secondary-foreground); white-space: nowrap; }
.dl-opt-done { color: var(--foreground); font-weight: 500; }
.dl-opt-group { padding: 0.5rem 0.875rem 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); border-top: 1px solid var(--border); }
.dl-opt-empty { padding: 0.75rem 0.875rem; font-size: 0.8125rem; color: var(--secondary-foreground); }

/* La vaca elegida */
.dl-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--muted);
}

/* Campos de la vaca: 3 por fila en el teléfono, 4 en tablet, 6 en escritorio */
.dl-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.dl-fields-off { opacity: 0.55; }
.dl-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dl-field > span { font-size: 0.75rem; color: var(--secondary-foreground); white-space: nowrap; }
.dl-field > span small { font-size: 0.6875rem; color: var(--muted-foreground); }
.dl-field .kt-input, .dl-field .kt-select { width: 100%; min-width: 0; }
.dl-field-notes { grid-column: 1 / -1; }
.dl-total {
  display: flex; align-items: center; height: 2.25rem; padding: 0 0.75rem; border-radius: 0.5rem;
  background: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .dl-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .dl-fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dl-field-notes { grid-column: span 3; }
}

.dl-msg { min-height: 1.25rem; font-size: 0.8125rem; color: var(--secondary-foreground); }
.dl-msg-ok { color: var(--foreground); }
.dl-msg-error { color: #dc2626; font-weight: 500; }

/* Filtros de la tabla */
.dl-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; }
.dl-tab { padding: 0.375rem 0.75rem; font-size: 0.8125rem; background: transparent; border: 0; cursor: pointer; color: var(--secondary-foreground); }
.dl-tab + .dl-tab { border-left: 1px solid var(--border); }
.dl-tab.active { background: var(--muted); color: var(--foreground); font-weight: 600; }
.dl-count { margin-left: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.dl-sort-mobile { display: none; align-items: center; gap: 0.375rem; }

/* Tabla */
.dl-table-wrap { transition: opacity 0.15s; }
.dl-loading { opacity: 0.55; }
.dl-table th.dl-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dl-table th.dl-sortable:hover { color: var(--foreground); }
.dl-row { cursor: pointer; }
.dl-row:hover { background: var(--muted); }
.dl-row-current { background: var(--muted); box-shadow: inset 3px 0 0 var(--primary); }
.dl-note { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; }
.sr-only-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 767px) {
  .dl-sort-mobile { display: inline-flex; }
  .dl-table-tools { width: 100%; justify-content: space-between; }
  .dl-table-tools #dl-table-search { flex: 1; min-width: 0; }

  /* Cada vaca es una tarjeta: caravana arriba (con sus acciones a la derecha) y los datos debajo, de a cuatro con su rótulo.
     El encabezado se oculta; los rótulos los copia agrostudio-table-labels.js desde él. */
  .dl-table thead { display: none; }
  .dl-table tbody tr {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  }
  .dl-table tbody td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; font-size: 0.8125rem; }
  .dl-table tbody td.dl-cow { grid-column: 1 / -1; padding-right: 6.5rem; font-size: 0.9375rem; }
  .dl-table tbody td.dl-actions { position: absolute; top: 0.375rem; right: 0.5rem; }
  .dl-table tbody td.dl-health { grid-column: 1 / -1; }
  .dl-table tbody td:not(.dl-cow):not(.dl-actions)::before {
    content: attr(data-label); display: block; font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dl-note { max-width: none; white-space: normal; }
  .dl-opt { padding: 0.75rem 0.875rem; }
}

/* Los elementos con display propio (flex) siguen respetando .hidden de la pantalla de carga */
.dl-chip.hidden, .dl-missing.hidden, .dl-results.hidden { display: none; }
.dl-search { position: relative; }
.dl-search > i { position: absolute; z-index: 1; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--secondary-foreground); pointer-events: none; }
.dl-search > input { padding-left: 2.25rem; width: 100%; }

/* Total del equipo de ordeñe, en el resumen superior de la carga */
.dl-unit { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.dl-unit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.dl-unit-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.dl-unit-actions { grid-column: 1 / -1; }
.dl-unit-result { font-size: 0.8125rem; font-weight: 500; color: var(--foreground); }
.dl-unit-result.hidden { display: none; }
@media (min-width: 640px) {
  .dl-unit-row { grid-template-columns: repeat(3, minmax(0, 8rem)) auto; }
  .dl-unit-actions { grid-column: auto; }
}

/* Borrar un control desde la lista */
#controls-table tbody td:last-child { white-space: nowrap; text-align: right; }
@media (max-width: 767px) {
  #controls-table tbody tr { position: relative; }
  #controls-table tbody td:last-child { position: absolute; top: 0.375rem; right: 0; padding: 0; }
  #controls-table tbody td:last-child::before { display: none; }
}

/* Pantalla principal de controles lecheros: últimos controles (izquierda) + curva de lactancia del elegido (derecha), 6/6 */
.dc-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .dc-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-recent-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dc-recent {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border);
  border-radius: 0.5rem; cursor: pointer; transition: background-color 0.15s;
}
.dc-recent:hover { background: var(--muted); }
.dc-recent:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dc-recent-current { background: var(--muted); border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.dc-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.dc-recent-desc { font-size: 0.75rem; color: var(--secondary-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-recent-stats { display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; font-size: 0.8125rem; color: var(--secondary-foreground); }
.dc-recent-stats b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
#lactationChart.hidden, #lactationEmpty.hidden { display: none; }

/* Franja de aviso de la ficha (ej. "¿Lo cargaste por error?"): a todo el ancho, como la barra de eventos, con el color de kt-alert-info. */
.kt-alert.kt-alert-light.ficha-banner { border-radius: 0; border-left-width: 0; border-right-width: 0; padding: 0.625rem 1.25rem; align-items: center; }
.ficha-banner .ficha-banner-close { margin-left: auto; flex-shrink: 0; }


/* Ícono propio (no está en Keenicons): bidón de leche, actividad Tambo. Se usa como cualquier ki: <i class="ki-filled ki-milk-can">.
   Máscara SVG teñida con currentColor, así hereda color y tamaño (1em) del contexto, también en oscuro. */
.ki-filled.ki-milk-can:after { content: none; }
.ki-filled.ki-milk-can:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none' stroke='black' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='192' y='26' width='128' height='46' rx='23'/%3E%3Cpath d='M222 72V108M290 72V108'/%3E%3Cpath d='M222 108L148 182M290 108L364 182'/%3E%3Crect x='140' y='182' width='232' height='298' rx='22'/%3E%3Cpath d='M140 170C60 100 50 190 134 216'/%3E%3Cpath d='M372 170C452 100 462 190 378 216'/%3E%3Cpath d='M222 438H352M176 438H190'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none' stroke='black' stroke-width='28' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='192' y='26' width='128' height='46' rx='23'/%3E%3Cpath d='M222 72V108M290 72V108'/%3E%3Cpath d='M222 108L148 182M290 108L364 182'/%3E%3Crect x='140' y='182' width='232' height='298' rx='22'/%3E%3Cpath d='M140 170C60 100 50 190 134 216'/%3E%3Cpath d='M372 170C452 100 462 190 378 216'/%3E%3Cpath d='M222 438H352M176 438H190'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ícono propio: juego de pezoneras con el colector (control lechero). Mismo mecanismo que ki-milk-can. */
.ki-filled.ki-milking:after { content: none; }
.ki-filled.ki-milking:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 40 280 280' fill='none' stroke='black' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M92 146 L70 240 Q66 268 92 268 Q114 268 122 240 L150 158'/%3E%3Cpath d='M78 140 L160 156'/%3E%3Cpath d='M54 68 C60 96 84 100 96 120 Q100 130 88 140'/%3E%3Cpath d='M90 268 Q84 290 102 302'/%3E%3Cpath d='M268 146 L290 240 Q294 268 268 268 Q246 268 238 240 L210 158'/%3E%3Cpath d='M282 140 L200 156'/%3E%3Cpath d='M306 68 C300 96 276 100 264 120 Q260 130 272 140'/%3E%3Cpath d='M270 268 Q276 290 258 302'/%3E%3Cpath d='M152 156 C152 116 208 116 208 156'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 40 280 280' fill='none' stroke='black' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M92 146 L70 240 Q66 268 92 268 Q114 268 122 240 L150 158'/%3E%3Cpath d='M78 140 L160 156'/%3E%3Cpath d='M54 68 C60 96 84 100 96 120 Q100 130 88 140'/%3E%3Cpath d='M90 268 Q84 290 102 302'/%3E%3Cpath d='M268 146 L290 240 Q294 268 268 268 Q246 268 238 240 L210 158'/%3E%3Cpath d='M282 140 L200 156'/%3E%3Cpath d='M306 68 C300 96 276 100 264 120 Q260 130 272 140'/%3E%3Cpath d='M270 268 Q276 290 258 302'/%3E%3Cpath d='M152 156 C152 116 208 116 208 156'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ícono propio: ubre con las cuatro pezoneras y sus mangueras (ordeñe). Mismo mecanismo que ki-milk-can. */
.ki-filled.ki-milking-udder:after { content: none; }
.ki-filled.ki-milking-udder:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='105 90 900 900' fill='none' stroke='black' stroke-width='21' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M172 178 C172 270 205 322 240 360 L222 402'/%3E%3Cpath d='M845 178 C845 270 812 322 778 360 L797 402'/%3E%3Cpath d='M305 405 L395 445 L390 500'/%3E%3Cpath d='M715 405 L625 445 L630 500'/%3E%3Cpath d='M470 505 L465 460 L555 460 L575 505'/%3E%3Cg transform='translate(240 440) rotate(12)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cg transform='translate(412 525) rotate(6.5)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cg transform='translate(608 525) rotate(-6.5)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cg transform='translate(780 440) rotate(-12)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cpath d='M150 665 C130 810 170 902 260 902 L975 902'/%3E%3Cpath d='M195 672 C185 790 200 858 260 858 L355 858'/%3E%3Cpath d='M352 765 C340 850 370 902 410 902'/%3E%3Cpath d='M398 765 C392 830 410 858 460 858 L630 858'/%3E%3Cpath d='M618 765 C625 840 650 902 690 902'/%3E%3Cpath d='M660 765 C665 830 690 858 740 858 L860 858'/%3E%3Cpath d='M828 678 C840 790 850 858 905 858 L975 858'/%3E%3Cpath d='M868 668 C885 770 900 902 975 902'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='105 90 900 900' fill='none' stroke='black' stroke-width='21' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M172 178 C172 270 205 322 240 360 L222 402'/%3E%3Cpath d='M845 178 C845 270 812 322 778 360 L797 402'/%3E%3Cpath d='M305 405 L395 445 L390 500'/%3E%3Cpath d='M715 405 L625 445 L630 500'/%3E%3Cpath d='M470 505 L465 460 L555 460 L575 505'/%3E%3Cg transform='translate(240 440) rotate(12)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cg transform='translate(412 525) rotate(6.5)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cg transform='translate(608 525) rotate(-6.5)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cg transform='translate(780 440) rotate(-12)'%3E%3Crect x='-78' y='-26' width='156' height='52' rx='26'/%3E%3Cpath d='M-52 26 L-70 190 Q-74 238 -30 238 Q10 238 24 190 L52 26'/%3E%3C/g%3E%3Cpath d='M150 665 C130 810 170 902 260 902 L975 902'/%3E%3Cpath d='M195 672 C185 790 200 858 260 858 L355 858'/%3E%3Cpath d='M352 765 C340 850 370 902 410 902'/%3E%3Cpath d='M398 765 C392 830 410 858 460 858 L630 858'/%3E%3Cpath d='M618 765 C625 840 650 902 690 902'/%3E%3Cpath d='M660 765 C665 830 690 858 740 858 L860 858'/%3E%3Cpath d='M828 678 C840 790 850 858 905 858 L975 858'/%3E%3Cpath d='M868 668 C885 770 900 902 975 902'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ícono propio: caravana de oreja (ficha individual). Mismo mecanismo que ki-milk-can. */
.ki-filled.ki-ear-tag:after { content: none; }
.ki-filled.ki-ear-tag:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none' stroke='black' stroke-width='24' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C422 224 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 92 224 114 216C148 204 196 184 196 150Z'/%3E%3Ccircle cx='265' cy='116' r='20'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='none' stroke='black' stroke-width='24' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C422 224 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 92 224 114 216C148 204 196 184 196 150Z'/%3E%3Ccircle cx='265' cy='116' r='20'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ícono propio: dos caravanas superpuestas, rellenas (rodeo). Mismo mecanismo que ki-milk-can. */
.ki-filled.ki-ear-tags:after { content: none; }
.ki-filled.ki-ear-tags:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='512' height='512' fill='white'/%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C426 226 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 86 226 108 218C148 204 196 184 196 150Z' transform='translate(150 74) scale(.8)' fill='black' stroke='black' stroke-width='34' stroke-linejoin='round'/%3E%3Ccircle cx='206' cy='107' r='16' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C426 226 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 86 226 108 218C148 204 196 184 196 150Z' transform='translate(-6 14) scale(.8)' fill='black'/%3E%3C/g%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C426 226 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 86 226 108 218C148 204 196 184 196 150ZM245 116a20 20 0 1 0 40 0a20 20 0 1 0 -40 0Z' transform='translate(150 74) scale(.8)' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='512' height='512' fill='white'/%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C426 226 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 86 226 108 218C148 204 196 184 196 150Z' transform='translate(150 74) scale(.8)' fill='black' stroke='black' stroke-width='34' stroke-linejoin='round'/%3E%3Ccircle cx='206' cy='107' r='16' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C426 226 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 86 226 108 218C148 204 196 184 196 150Z' transform='translate(-6 14) scale(.8)' fill='black'/%3E%3C/g%3E%3Cpath d='M196 150C196 78 218 44 265 44C312 44 334 78 334 150C334 184 368 204 404 218C426 226 432 238 432 266L432 400Q432 462 372 462L140 462Q80 462 80 400L80 266C80 238 86 226 108 218C148 204 196 184 196 150ZM245 116a20 20 0 1 0 40 0a20 20 0 1 0 -40 0Z' transform='translate(150 74) scale(.8)' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ícono propio: vaca con ejes y barras de crecimiento (actividad Cría). Mismo mecanismo que ki-milk-can. */
.ki-filled.ki-cattle-growth:after { content: none; }
.ki-filled.ki-cattle-growth:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='512' height='512' fill='white'/%3E%3Cpath d='M14 95C14 78 24 72 40 70L130 68C180 70 230 58 285 50L300 44L306 36L318 38L322 46L335 36L356 28L346 40L352 50C362 62 372 78 380 90C388 96 388 108 378 114L362 114L352 112L340 124C330 140 320 152 300 160L282 178L275 200L268 245L272 280L278 292L262 294L248 290L244 262L240 232L236 205L220 205L180 206L156 208L150 220L146 208L110 200L102 235L96 262L104 282L98 288L82 286L74 262L62 238L56 262L48 282L52 292L36 294L26 280L22 250L20 200L16 140Z' transform='translate(70 160)' fill='black' stroke='black' stroke-width='26' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='none' stroke='black' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M100 250V190H150V250'/%3E%3Cpath d='M175 250V150H225V250'/%3E%3Cpath d='M250 250V110H300V250'/%3E%3Cpath d='M325 250V70H375V250'/%3E%3C/g%3E%3Cpath d='M40 470V70'/%3E%3Cpath d='M15 98L40 66L65 98'/%3E%3Cpath d='M40 470H496'/%3E%3Cpath d='M468 444L498 470L468 496'/%3E%3C/g%3E%3Cpath d='M14 95C14 78 24 72 40 70L130 68C180 70 230 58 285 50L300 44L306 36L318 38L322 46L335 36L356 28L346 40L352 50C362 62 372 78 380 90C388 96 388 108 378 114L362 114L352 112L340 124C330 140 320 152 300 160L282 178L275 200L268 245L272 280L278 292L262 294L248 290L244 262L240 232L236 205L220 205L180 206L156 208L150 220L146 208L110 200L102 235L96 262L104 282L98 288L82 286L74 262L62 238L56 262L48 282L52 292L36 294L26 280L22 250L20 200L16 140Z' transform='translate(70 160)' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='512' height='512' fill='white'/%3E%3Cpath d='M14 95C14 78 24 72 40 70L130 68C180 70 230 58 285 50L300 44L306 36L318 38L322 46L335 36L356 28L346 40L352 50C362 62 372 78 380 90C388 96 388 108 378 114L362 114L352 112L340 124C330 140 320 152 300 160L282 178L275 200L268 245L272 280L278 292L262 294L248 290L244 262L240 232L236 205L220 205L180 206L156 208L150 220L146 208L110 200L102 235L96 262L104 282L98 288L82 286L74 262L62 238L56 262L48 282L52 292L36 294L26 280L22 250L20 200L16 140Z' transform='translate(70 160)' fill='black' stroke='black' stroke-width='26' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='none' stroke='black' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M100 250V190H150V250'/%3E%3Cpath d='M175 250V150H225V250'/%3E%3Cpath d='M250 250V110H300V250'/%3E%3Cpath d='M325 250V70H375V250'/%3E%3C/g%3E%3Cpath d='M40 470V70'/%3E%3Cpath d='M15 98L40 66L65 98'/%3E%3Cpath d='M40 470H496'/%3E%3Cpath d='M468 444L498 470L468 496'/%3E%3C/g%3E%3Cpath d='M14 95C14 78 24 72 40 70L130 68C180 70 230 58 285 50L300 44L306 36L318 38L322 46L335 36L356 28L346 40L352 50C362 62 372 78 380 90C388 96 388 108 378 114L362 114L352 112L340 124C330 140 320 152 300 160L282 178L275 200L268 245L272 280L278 292L262 294L248 290L244 262L240 232L236 205L220 205L180 206L156 208L150 220L146 208L110 200L102 235L96 262L104 282L98 288L82 286L74 262L62 238L56 262L48 282L52 292L36 294L26 280L22 250L20 200L16 140Z' transform='translate(70 160)' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Formularios de un lote por cantidad (ingreso, baja, pase, caravaneo): los campos llenan el ancho del contenedor,
   1 por fila en el teléfono, 2 desde 640 px y 3 desde 1280 px (con el menú lateral abierto, 1024 deja columnas de 190 px); .lot-field-wide ocupa toda la fila (la lista de caravanas). */
.lot-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.lot-fields > * { min-width: 0; }
.lot-fields .kt-input, .lot-fields .kt-select, .lot-fields .kt-textarea { width: 100%; min-width: 0; }
.lot-field-wide { grid-column: 1 / -1; }
@media (min-width: 640px) { .lot-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lot-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Editor de reglas: la fila impar de la lista va sombreada para distinguir una regla de otra; la elegida lleva además una barra a la izquierda. */
#rule-builder [data-rb-list] > button.rb-odd { background-color: var(--muted); }
#rule-builder [data-rb-list] > button.rb-selected { box-shadow: inset 3px 0 0 var(--primary); }

/* Los grupos de condiciones se leen por sangría: cada nivel lleva una barra a la izquierda, más tenue cuanto más adentro.
   Entre dos hermanos va una píldora «Y» / «O» que se toca para cambiar la unión de todo el grupo. */
#rule-builder .rb-group { display: grid; gap: .375rem; padding-block: .25rem; padding-inline-start: .875rem; border-inline-start: 3px solid var(--primary); }
#rule-builder .rb-group.rb-d1 { border-inline-start-color: color-mix(in oklab, var(--primary) 65%, transparent); }
#rule-builder .rb-group.rb-d2 { border-inline-start-color: color-mix(in oklab, var(--primary) 45%, transparent); }
#rule-builder .rb-group.rb-d3 { border-inline-start-color: color-mix(in oklab, var(--primary) 30%, transparent); }
#rule-builder .rb-group.rb-none { border-inline-start-style: dashed; }
#rule-builder .rb-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--secondary-foreground); }
#rule-builder .rb-item { display: flex; align-items: flex-start; gap: .5rem; }
#rule-builder .rb-item > .rb-body { flex: 1; min-width: 0; }
#rule-builder .rb-cond { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .375rem .625rem; border-radius: .5rem; background-color: var(--muted); }
#rule-builder .rb-tools { display: flex; align-items: center; flex: none; }
/* Panel «Probar con el rodeo»: los números que despliegan una lista de animales y la lista misma (con su propio desplazamiento). */
#rule-review .rb-count { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; color: var(--primary); cursor: pointer; background: none; border: none; padding: 0; }
#rule-review .rb-count.rb-active { text-decoration-style: double; }
#rule-review .rb-animals { max-height: 18rem; overflow: auto; }
#rule-review tr[data-drill] > td { background-color: var(--muted); }
#rule-builder [data-rb-editor] { min-width: 0; }
#rule-builder [data-rb-editor] .kt-select, #rule-builder [data-rb-editor] .kt-input { max-width: 100%; }
#rule-builder .rb-cond > .kt-select { width: auto; flex: 0 1 12rem; min-width: 8rem; }
#rule-builder .rb-head > .kt-select { width: auto; flex: 0 1 18rem; }
/* Selector de datos: un botón que abre un panel con buscador y la lista por grupos (la lista tiene su propio desplazamiento). */
#rule-builder .rb-pick { position: relative; display: inline-block; }
#rule-builder .rb-pick-trigger { min-width: 13rem; justify-content: space-between; gap: .5rem; }
#rule-builder .rb-pick-panel { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: .25rem; width: 23rem; max-width: 85vw; padding: .5rem; display: grid; gap: .375rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--popover, var(--background)); color: var(--foreground); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
#rule-builder .rb-pick-panel[hidden] { display: none; }
#rule-builder .rb-pick-list { max-height: 18rem; overflow: auto; display: grid; align-content: start; }
#rule-builder .rb-pick-head { padding: .5rem .5rem .1875rem; font-size: .6875rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-foreground); }
#rule-builder .rb-pick-item { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; width: 100%; padding: .375rem .5rem; border-radius: .375rem; font-size: .875rem; text-align: start; background: transparent; cursor: pointer; }
#rule-builder .rb-pick-item small { font-size: .75rem; color: var(--muted-foreground); white-space: nowrap; }
#rule-builder .rb-pick-item:hover, #rule-builder .rb-pick-item.rb-on { background: var(--muted); }
#rule-builder .rb-pick-item.rb-chosen { font-weight: 500; }
#rule-builder .rb-pick-item mark { background: color-mix(in oklab, var(--primary) 25%, transparent); color: inherit; border-radius: .1875rem; }
/* Dato de sí o no: un par Sí | No a la vista; el elegido va lleno (Sí con el color de la marca, No en oscuro) y el otro queda tenue. */
#rule-builder .rb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; background: var(--background); }
#rule-builder .rb-seg-btn { display: inline-flex; align-items: center; gap: .375rem; padding: 0 .875rem; font-size: .875rem; line-height: 2rem; color: var(--muted-foreground); background: transparent; cursor: pointer; }
#rule-builder .rb-seg-btn + .rb-seg-btn { border-inline-start: 1px solid var(--border); }
#rule-builder .rb-seg-btn:hover:not(.rb-seg-on):not(:disabled) { background: var(--muted); color: var(--foreground); }
#rule-builder .rb-seg-btn.rb-seg-on { font-weight: 500; }
#rule-builder .rb-seg-yes.rb-seg-on { background: var(--primary); color: var(--primary-foreground); }
#rule-builder .rb-seg-no.rb-seg-on { background: var(--foreground); color: var(--background); }
#rule-builder .rb-seg-btn:disabled { cursor: default; }
#rule-builder .rb-join { justify-self: start; margin-block: .125rem; padding: 0 .75rem; font-size: .75rem; line-height: 1.375rem; border: 1px solid var(--border); border-radius: 999px; background: var(--background); color: var(--secondary-foreground); cursor: pointer; }
#rule-builder .rb-join:hover { border-color: var(--primary); color: var(--primary); }
#rule-builder .rb-join.rb-static { cursor: default; }
#rule-builder .rb-join.rb-static:hover { border-color: var(--border); color: var(--secondary-foreground); }
#rule-builder .rb-add { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .25rem; }

/* Las pastillas de un grupo frente a sus reglas (_GroupPills): siempre arriba de las pestañas. */
.gpills { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.gpill { display: inline-flex; align-items: baseline; gap: .5rem; padding: .375rem .875rem; border: 1px solid var(--border); border-radius: 999px; background: var(--background); color: var(--foreground); text-decoration: none; transition: background-color .15s; }
.gpill:hover { background: var(--muted); }
.gpill .gpill-n { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gpill .gpill-l { font-size: .8125rem; color: var(--secondary-foreground); }
.gpill-enter { border-color: rgb(22 163 74 / .45); }
.gpill-enter .gpill-n { color: rgb(21 128 61); }
.gpill-leave { border-color: rgb(220 38 38 / .4); }
.gpill-leave .gpill-n { color: rgb(185 28 28); }
.gpill-zero { opacity: .55; }
.gpill-note { font-size: .8125rem; color: var(--secondary-foreground); }

/* ───────── Indicador de carga común (agrostudio-loading.js) ───────── */
@keyframes agro-spin { to { transform: rotate(360deg); } }
.agro-spinner {
    display: inline-block; width: 1.1rem; height: 1.1rem; flex: none;
    border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%;
    animation: agro-spin .7s linear infinite;
}
.agro-loading {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 2rem 1rem; font-size: .8125rem; color: var(--secondary-foreground);
}
.agro-loading-overlay {
    position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
    background-color: color-mix(in oklab, var(--background) 60%, transparent);
}
.agro-busy { position: relative; }
.kt-btn.agro-btn-busy { pointer-events: none; opacity: .7; }
.kt-btn.agro-btn-busy .agro-spinner { width: .9rem; height: .9rem; margin-inline-end: .4rem; }

/* El spinner de KTDataTable se posiciona con `absolute/top-1/2/-translate-*`, que el CSS compilado no trae: se centra acá. */
[data-kt-datatable] { position: relative; }
[data-kt-datatable-spinner="true"] {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;
}
[data-kt-datatable-spinner="true"] .kt-datatable-loading svg { animation: agro-spin .8s linear infinite; }

/* Listado de Grupos: la tabla no se parte en columnas angostas; en pantallas chicas se ocultan las columnas secundarias y el resto desliza. */
.groups-table th, .groups-table td { white-space: nowrap; padding-inline-end: 1rem; }
.groups-table td.groups-name { white-space: normal; min-width: 8rem; }
.groups-table th:last-child, .groups-table td:last-child { padding-inline-end: 0; }
@media (max-width: 767px) {
    .groups-table .groups-opt { display: none; }
}
.groups-card { padding: 1.25rem; }
@media (max-width: 639px) {
    .groups-card { padding: 0.75rem; }
    .groups-form > * { flex: 1 1 100%; min-width: 0; }
    .groups-form .kt-input, .groups-form .kt-select { width: 100%; min-width: 0; }
}

/* Reportes: arbol (panel del mapa) + panel del reporte. El panel interno del arbol es absoluto, asi que el contenedor necesita alto propio. */
.reports-shell { min-height: 26rem; height: calc(100vh - 13rem); }
#report-panel { overflow-y: auto; }
@media (max-width: 1023.98px) { .reports-shell { height: auto; } #report-panel { overflow-y: visible; } }
.reports-item:hover { background: var(--accent); }
.reports-params { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 768px) { .reports-params { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reports-format { min-width: 9rem; }

/* ── La pastilla del mapa (Views/Partials/_MapFrame.cshtml) ───────────────────────────────────────────────────────────────
   Una sola tarjeta: toolbar fija, [panel lateral | mapa] y barra de estado. Igual en todas las pantallas con mapa. */
.map-frame .agro-map-shell { gap: 0; }
.map-frame-map { position: relative; padding: 0 1rem .5rem 1rem; }
.map-frame-map [data-agro-map] { border: 0; border-radius: .75rem; overflow: hidden; }
/* Botón redondo sobre el borde del panel (escritorio): lo abre y lo cierra; con el panel plegado y el mouse encima, viaja con su borde
   (280 px menos la franja de 48). En mobile no se ve: ahí el panel es un cajón y lo maneja el interruptor de la toolbar. */
.agro-panel-edge { position: absolute; top: 1.25rem; right: -.875rem; z-index: 30; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); cursor: pointer; transition: right .2s ease; }
.agro-panel-edge:hover { color: var(--primary); }
.agro-panel-edge svg { transition: transform .2s ease; }
.agro-panel-edge[aria-checked="false"] svg { transform: rotate(180deg); }
@media (min-width: 1024px) and (hover: hover) { .agro-map-panel[data-state="collapsed"]:hover .agro-panel-edge { right: calc(-232px - .875rem); } }
@media (max-width: 1023.98px) { .agro-panel-edge { display: none; } }
@media (min-width: 1024px) {
    .map-frame .agro-panel-switch { display: none; }
    .map-frame .map-frame-panel-inner { overflow: hidden; }
    .map-frame .map-frame-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    /* Con alto de ventana: el mapa llena el espacio y solo se desplaza el árbol. */
    .map-frame--fill .agro-map-shell { height: calc(100dvh - 19rem); min-height: 30rem; }
    .map-frame--fill .map-frame-map [data-agro-map] { position: absolute; inset: 0 1rem .5rem 1rem; width: auto !important; height: auto !important; }
    /* Con árbol, el mapa arranca pegado a él (el árbol ya tiene su propio relleno a la derecha). */
    .map-frame--panel .map-frame-map { padding-left: 0; }
    .map-frame--fill.map-frame--panel .map-frame-map [data-agro-map] { left: 0; }
}
/* Con panel lateral, el botón del borde ocupa la esquina de arriba a la izquierda del mapa: el zoom baja debajo de él. */
@media (min-width: 1024px) { .map-frame--panel .map-frame-map .ol-zoom { top: 3.5rem; } }

/* ── La pastilla del mapa en pantalla chica: el panel lateral pasa a ser un desplegable bajo la toolbar ─────────────────────────
   El buscador del panel queda a la vista; el árbol (.map-frame-tree) aparece debajo solo con el panel abierto. Lo abre el buscador
   (agrostudio-facility-search.js) y se cierra al elegir un nodo o tocar afuera (agrostudio-map-panel.js). */
@media (max-width: 1023.98px) {
    .map-frame .agro-panel-switch { display: none; }
    .map-frame .agro-map-shell { flex-direction: column; }
    .map-frame .agro-map-panel { width: 100%; z-index: 30; }
    .map-frame .agro-map-panel[data-state] .map-frame-panel-inner { position: static; width: 100%; transform: none; visibility: visible; box-shadow: none; overflow: visible; padding: 0 1rem .5rem; }
    .map-frame .map-frame-title { display: none; }
    .map-frame .map-frame-tree { display: none; }
    .map-frame .agro-map-panel[data-state="open"] .map-frame-tree { display: flex; position: absolute; left: 1rem; right: 1rem; top: calc(100% - .25rem); max-height: 60vh; overflow-y: auto;
        background: var(--background); border: 1px solid var(--border); border-radius: .5rem; padding: .5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
}

/* ── Leyenda en la barra de estado del marco del mapa (map-frame-status) ─────────────────────────────────────────────────── */
.map-frame-status { position: relative; }
/* Panel con el detalle de todas las leyendas: se abre hacia arriba, sobre el mapa, pegado al borde derecho. */
.map-legend-panel { position: absolute; right: 1rem; bottom: calc(100% + .25rem); z-index: 40; display: flex; flex-direction: column; gap: .75rem; min-width: 14rem; max-width: min(24rem, 90vw);
    max-height: 50vh; overflow-y: auto; background: var(--background); border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
/* Pantalla chica: dos renglones (el texto del clic arriba, la leyenda abajo, cada uno a todo el ancho) y sin totales. */
@media (max-width: 1023.98px) {
    .map-frame-status { flex-wrap: wrap; gap: .25rem .75rem; }
    .map-frame-status > span { display: none; }
    .map-frame-status > p { flex: 1 1 100%; white-space: normal; }
    .map-frame-status > [data-map-legend] { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
}

/* Ficha individual, cabecera minimalista: avatar neutro y chico, indicadores como valor + rótulo sin caja. */
.ficha-avatar { width: 3.5rem; height: 3.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ficha-avatar--male { background: #dbeafe; }
.ficha-avatar--female { background: #fce7f3; }
.dark .ficha-avatar--male, .dark .ficha-avatar--female { background: #e8e8ea; }
.ficha-avatar img { width: 72%; height: 72%; object-fit: contain; }
@media (min-width: 768px) { .ficha-avatar { width: 4.5rem; height: 4.5rem; } }
.ficha-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.75rem; }
.ficha-stat { display: flex; flex-direction: column; min-width: 0; }
.ficha-stat-value { font-size: 1.125rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; }
.ficha-stat-unit { font-size: 0.75rem; font-weight: 400; color: var(--secondary-foreground); }
@media (min-width: 768px) {
  .ficha-stats { display: flex; gap: 2.5rem; flex-shrink: 0; }
  .ficha-stat { align-items: flex-end; text-align: right; }
}
/* Categoría del historial: texto gris, sin colores por categoría. */
.ficha-cat { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted-foreground); }


/* Cabecera de la ficha: franja con un degradé suave del color del pelaje (AnimalCoat.KindFor), claro a la izquierda donde va el texto. */
.ficha-hero { --coat: transparent; background: linear-gradient(100deg, var(--background) 0%, var(--background) 40%, var(--coat) 100%); }
.ficha-hero--holstein { --coat: #f1f1ef; }
.ficha-hero--jersey { --coat: #f7eddc; }
.ficha-hero--angus { --coat: #e9e9ed; }
.ficha-hero--hereford { --coat: #f6e5dd; }
.dark .ficha-hero--holstein { --coat: #26272b; }
.dark .ficha-hero--jersey { --coat: #3a2f22; }
.dark .ficha-hero--angus { --coat: #2b2b31; }
.dark .ficha-hero--hereford { --coat: #3b2620; }
.ficha-side { display: flex; flex-direction: column; gap: 0.5rem; }
.ficha-dest { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--secondary-foreground); }
@media (min-width: 768px) { .ficha-side { align-items: flex-end; flex-shrink: 0; } }

/* Encabezado de una sección dentro de una pestaña (ej. Historial de eventos): banda suave con el título y su menú de vista. */
.ficha-section-head { display: flex; margin-bottom: 0.875rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--accent); }
.ficha-section-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--mono, var(--foreground)); }

/* Franja de contexto de la cabecera (desde md): establecimiento, ubicación, lote, partos; madre/padre empujados a la derecha. */
.ficha-strip { margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--border); }
.ficha-strip { display: none; justify-content: center; }
@media (min-width: 768px) { .ficha-strip { display: flex; } }
.ficha-ctx { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 2.5rem; row-gap: 0.5rem; }
.ficha-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; row-gap: 0.125rem; }
/* «···» de mobile: <details> nativo, sin marcador y con el ícono que cambia al abrir. */
.ficha-more > summary { list-style: none; }
.ficha-more > summary::-webkit-details-marker { display: none; }
.ficha-more[open] .ficha-more-closed, .ficha-more:not([open]) .ficha-more-open { display: none; }
/* Aire de la cabecera: el ícono y su texto con separación, cada dato de la franja y de «···» con su propio espacio, y las líneas del título más abiertas. */
.ficha-ctx > *, .ficha-title > span, .ficha-more summary > span:first-child { display: inline-flex; align-items: center; gap: 0.4rem; }
.ficha-ctx > button, .ficha-title > span { gap: 0.4rem; }
#animal-header h1 + span { margin-inline-start: 0.125rem; }
#animal-header .ficha-title + p { margin-top: 0.25rem; }
.ficha-more .flex-col { gap: 0.625rem; }
/* Franja de contexto: los datos se reparten en columnas iguales a lo ancho, cada uno centrado en la suya (si no entran, bajan de fila). */
.ficha-strip > .ficha-ctx { flex: 1 1 auto; width: 100%; justify-content: space-evenly; column-gap: 1.5rem; }
/* Dato de contexto de la cabecera: rótulo chico gris arriba y valor abajo. En la franja, centrado en su columna; en «···», alineado a la izquierda. */
.ficha-fact { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.ficha-fact-label { font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--muted-foreground); }
.ficha-fact-value { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--foreground); text-align: start; }
a.ficha-fact-value { color: var(--primary); }
.ficha-strip .ficha-fact { align-items: center; text-align: center; }
.ficha-ctx > .ficha-fact { display: flex; }
#animal-header h1 { line-height: 1.5rem; }
#animal-header .ficha-title + p, #animal-header .ficha-title ~ p { margin-top: 0.125rem; }
/* Identificaciones junto al nombre: solo desde md (en mobile van en «···»). Regla propia porque `hidden` pierde contra el display de .ficha-title > span. */
.ficha-title > .ficha-title-id { display: inline-flex; }
/* «···» de mobile: los datos en dos columnas para aprovechar el ancho; los indicadores centrados en la suya. */
.ficha-ctx-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.875rem 1rem; }
.ficha-stat { align-items: center; text-align: center; }
@media (min-width: 768px) { .ficha-stat { align-items: flex-end; text-align: right; } }
/* Valor de un dato de contexto: texto corrido (no flex), así «Empresa › Establecimiento» fluye y baja de línea como una sola frase en vez de partirse en columnas. */
.ficha-fact-value { display: block; overflow-wrap: anywhere; }
.ficha-fact-value > i { margin-inline-end: 0.4rem; vertical-align: -1px; }
.ficha-strip .ficha-fact-value { display: inline-block; }
.ficha-ctx-m { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
/* Franja de escritorio: una sola fila, solo ícono + valor. El rótulo queda para lectores de pantalla y como tooltip del dato (title). */
.ficha-strip .ficha-fact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ficha-strip .ficha-fact { position: relative; }
/* Pestaña Datos: pares rótulo/valor sin caja ni borde, separados solo por el espacio. */
.ficha-data { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.875rem 1rem; margin: 0; }
.ficha-data dd { margin: 0; }
/* Fila de ubicación (arriba de la cabecera): una fila siempre visible, también en mobile. Mismo gris, mismo padding y misma altura que la barra
   de alerta (.ficha-banner): se distingue de los datos del animal sin cambiar de familia visual. En mobile los datos bajan de renglón si no entran. */
.ficha-loc, .ficha-loc.ficha-hero { display: flex; align-items: center; padding: 0.625rem 1.25rem; background: var(--accent); border-bottom: 1px solid var(--border); font-size: 1rem; }
@media (min-width: 1024px) { .ficha-loc { padding-inline: 1.75rem; } }
.ficha-loc-facts { flex: 1 1 auto; min-width: 0; }
.ficha-loc-facts > .ficha-ctx { width: 100%; justify-content: flex-start; column-gap: 2.5rem; row-gap: 0.25rem; }
@media (min-width: 768px) { .ficha-loc-facts { padding-inline-start: 6.25rem; } }
.ficha-loc .ficha-fact { position: relative; align-items: center; }
.ficha-loc .ficha-fact, .ficha-loc .ficha-fact-value { line-height: 1.5rem; }
.ficha-loc .ficha-fact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ficha-loc .ficha-fact-value > i { color: var(--secondary-foreground); }
/* Alerta de grupos: tono neutro con borde lateral, distinto del azul de «Registrar evento», y con un espacio antes de esa barra. */
.ficha-banner.ficha-banner--note { background: var(--accent); color: var(--foreground); border-color: var(--border); border-inline-start: 3px solid var(--primary); }
#event-bar { margin-top: 0.5rem; }
/* Ubicación alineada con el texto del animal (a la derecha del avatar) en escritorio, íconos con más contraste. */
@media (min-width: 768px) { .ficha-loc-facts { padding-inline-start: 5.5rem; } .ficha-loc-facts > .ficha-ctx { justify-content: flex-start; column-gap: 2.5rem; } }
.ficha-loc .ficha-fact-value > i { color: var(--secondary-foreground); }
/* Más aire entre el avatar y el texto del animal; la ubicación se alinea con ese texto (avatar 4.5rem + aro 0.25rem + este espacio). */
.ficha-who { gap: 1.5rem; }
@media (min-width: 768px) { .ficha-loc-facts { padding-inline-start: 6.25rem; } }
/* Mobile: la fila de ubicación muestra solo campo y lote; establecimiento, destino, lote operativo y madre/padre quedan desde md. */
@media (max-width: 767px) { .ficha-loc .ficha-fact.ficha-fact--desk { display: none; } .ficha-loc .ficha-ctx { column-gap: 1.25rem; } }
/* Ajuste: en mobile también se ven el destino y el lote operativo; solo se ocultan el establecimiento, madre/padre y el campo cuando hay lote físico. */
/* Con 5 datos o más la fila se simplifica: el campo (o, sin lote físico, el establecimiento) no se dibuja. El lote operativo es el último en irse. */
.ficha-loc .ficha-fact.ficha-fact--off { display: none; }

/* Editor de reglas: una columna en pantallas chicas, lista + editor desde tablet. */
#rule-builder .rb-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
#rule-builder .rb-placement { width: 18rem; max-width: 100%; }
@media (min-width: 768px) {
  #rule-builder .rb-layout { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  #rule-builder .kt-card-content { padding: .75rem; }
  #rule-builder .kt-card-footer { flex-direction: column; align-items: stretch; }
  #rule-builder .kt-card-footer label { flex-direction: column; align-items: stretch; }
  #rule-builder .rb-placement { width: 100%; }
  #rule-builder .rb-group { padding-inline-start: .5rem; }
  #rule-builder .rb-cond { padding: .375rem; }
  #rule-builder .rb-cond > .kt-select, #rule-builder .rb-head > .kt-select { flex: 1 1 100%; width: 100%; }
  #rule-builder .rb-cond .kt-input { flex: 1 1 100%; width: 100%; }
  #rule-builder .rb-pick, #rule-builder .rb-pick-trigger { width: 100%; min-width: 0; }
  #rule-builder .rb-pick-panel { width: auto; right: 0; max-width: none; }
  #rule-builder .rb-seg { width: 100%; }
  #rule-builder .rb-seg-btn { flex: 1; justify-content: center; }
}
/* El enlace al mapa de la fila de ubicación se ve como enlace: color primario y subrayado fino (el campo, un poco más tenue). */
.ficha-loc .ficha-fact-value[data-open-tab] { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.ficha-loc .ficha-fact-value[data-open-tab] .text-muted-foreground { color: inherit; opacity: 0.7; }
.ficha-loc .ficha-fact-value[data-open-tab] > i { color: inherit; }
.ficha-loc .ficha-fact-value[data-open-tab]:hover { text-decoration-thickness: 2px; }

/* Selector de animales de la carga rápida (agrostudio-animal-picker.js): chips dentro de una caja con el buscador, lista de coincidencias debajo. */
.ap-wrap { position: relative; }
.ap-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--background); cursor: text; }
.ap-chips { display: contents; }
.ap-input { flex: 1 1 10rem; min-width: 8rem; height: 1.75rem; border: 0; outline: 0; background: transparent; padding: 0 0.25rem; font-size: 0.875rem; }
.ap-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.25rem 0.125rem 0.625rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--muted); font-size: 0.8125rem; }
.ap-chip-group { border-color: var(--primary); color: var(--primary); background: transparent; }
.ap-chip-bad { border-color: var(--destructive); color: var(--destructive); background: transparent; }
.ap-chip-body { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: default; }
button.ap-chip-body { cursor: pointer; }
.ap-x { background: none; border: 0; padding: 0 0.375rem; color: inherit; opacity: 0.6; font-size: 1rem; line-height: 1; cursor: pointer; }
.ap-x:hover { opacity: 1; }
.ap-dd { position: absolute; z-index: 40; left: 0; right: 0; margin-top: 0.25rem; max-height: 16rem; overflow: auto; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--background); box-shadow: 0 6px 18px rgb(0 0 0 / 0.12); }
.ap-dd.hidden { display: none; }
.ap-opt { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; cursor: pointer; }
.ap-opt-on { background: var(--muted); }
.ap-opt-empty { cursor: default; color: var(--muted-foreground); }
.ap-opt-main { font-weight: 600; }
.ap-opt-detail { font-size: 0.75rem; color: var(--muted-foreground); }
.ap-members { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; padding: 0.5rem; border-radius: 0.5rem; background: var(--muted); }
.ap-member { padding: 0.125rem 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--background); font-size: 0.75rem; cursor: pointer; }
.ap-member-out { text-decoration: line-through; opacity: 0.5; }
.ap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.ap-link { background: none; border: 0; padding: 0; color: var(--primary); font-size: 0.8125rem; cursor: pointer; }
.ap-paste { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ap-paste-actions { display: flex; gap: 0.5rem; }
.ap-summary { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.ap-paste.hidden, .ap-tools .hidden { display: none; }

/* Agenda: la cabecera (período y tolerancia) se distingue del detalle de las pestañas y queda a la vista al desplazar la página. */
.agenda-header { position: sticky; top: var(--header-height, 56px); z-index: 5; background: var(--muted); border-bottom: 1px solid var(--border); border-radius: 0.75rem 0.75rem 0 0; box-shadow: 0 2px 6px rgb(0 0 0 / 0.06); }
/* La barra de período que va suelta arriba de la pantalla (eventos): es ella la que queda fija, no la cabecera de una tarjeta. */
.agenda-bar { position: sticky; top: var(--header-height, 56px); z-index: 5; }
/* Carga rápida: a quién (izquierda) y qué evento (derecha) en dos columnas en pantallas grandes. */
.carga-cols { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .carga-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* Rodeo: la tarjeta de buscador y filtros queda fija bajo el encabezado y ocupa lo mínimo (botones chicos, poco aire). Por encima de la tabla y
   de sus menús; el mismo corrimiento que la agenda (--header-height). */
.rodeo-sticky .kt-card-content { padding: 0.5rem 0.75rem; gap: 0.375rem; }
@media (min-width: 768px) {
  .rodeo-sticky { position: sticky; top: var(--header-height, 56px); z-index: 20; }
  /* Una sola línea que fluye: herramientas, filtros rápidos y (si hay) los filtros activos; Exportar al final. */
  .rodeo-sticky .kt-card-content { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rodeo-sticky #rodeo-toolbar, .rodeo-sticky .rodeo-quick-row, .rodeo-sticky #rodeo-presets { display: contents; }
  .rodeo-sticky .rodeo-quick-label { display: none; }
  .rodeo-sticky #rodeo-acciones-lotes { order: 99; }
  .rodeo-sticky #rodeo-chips { flex-basis: 100%; }
}
.rodeo-sticky .kt-btn:not(.kt-btn-icon) { height: 2rem; padding-inline: 0.625rem; font-size: 0.8125rem; gap: 0.25rem; }
.rodeo-sticky .kt-btn-icon { width: 2rem; height: 2rem; }
.rodeo-sticky .kt-input { height: 2rem; font-size: 0.8125rem; }
.rodeo-sticky #rodeo-presets, .rodeo-sticky #rodeo-toolbar { gap: 0.375rem; }

/* Ficha del animal: una línea fija con quién es, que aparece al desplazar la cabecera fuera de la pantalla. Ancla de alto 0: no mueve el contenido. */
.ficha-sticky-anchor { position: sticky; top: var(--header-height, 56px); height: 0; z-index: 25; }
.ficha-sticky-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; overflow: hidden; white-space: nowrap; font-size: 0.875rem; background: var(--background); border-bottom: 1px solid var(--border); box-shadow: 0 2px 6px rgb(0 0 0 / 0.06); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.15s ease, opacity 0.15s ease; }
.ficha-sticky-anchor.is-on .ficha-sticky-bar { transform: none; opacity: 1; pointer-events: auto; }
.ficha-sticky-details { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (min-width: 1024px) { .ficha-sticky-bar { padding-inline: 1.5rem; } }
/* La tarjeta de la ficha recorta lo que se sale (esquinas, tablas anchas) con clip y no con hidden: hidden la vuelve contenedor de scroll y la línea fija deja de pegar. */
.ficha-card { overflow: clip; }
/* Rodeo: la tarjeta fija lleva el mismo fondo que la barra fija de Sanidad y Agenda (.agenda-header): gris suave con sombra, no blanca. */
.rodeo-sticky { background: var(--muted); box-shadow: 0 2px 6px rgb(0 0 0 / 0.06); }
/* Configuración del tambo: toolbar fija bajo el encabezado, una sola línea (título a la izquierda, acciones a la derecha). */
.settings-toolbar { position: sticky; top: var(--header-height, 56px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--muted); border-radius: 0.5rem; box-shadow: 0 2px 6px rgb(0 0 0 / 0.06); }
.settings-toolbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.settings-toolbar > div { flex-shrink: 0; }
.settings-toolbar .kt-btn:not(.kt-btn-icon) { height: 2rem; padding-inline: 0.625rem; font-size: 0.8125rem; gap: 0.25rem; white-space: nowrap; }
.settings-toolbar .kt-btn-icon { width: 2rem; height: 2rem; }
/* Selector de animales: el rótulo respira sobre la caja, igual que el de "Evento" (flex-col gap-1) en la columna de al lado. */
.ap-root > .kt-form-label { display: block; margin: 0 0 0.25rem; }

/* Un <summary> con el título a la izquierda y el expansor (flecha) pegado a la derecha; la flecha gira al abrir. */
.summary-split { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; list-style: none; }
.summary-split::-webkit-details-marker { display: none; }
.summary-chevron { transition: transform 0.15s ease; }
details[open] > .summary-split .summary-chevron { transform: rotate(180deg); }

/* Zonas que se reemplazan al navegar por período (agrostudio-period-nav.js): no agregan caja (el sticky y el flex de la pantalla siguen igual); mientras cargan, lo de adentro se apaga un poco. */
[data-period-zone] { display: contents; }
[data-period-zone][aria-busy="true"] > * { opacity: 0.55; transition: opacity 0.15s ease; }

/* Tablero de tambo: la fila de pestañas, fecha de análisis y vista queda a la vista al bajar. */
.dd-sticky { position: sticky; top: var(--header-height, 56px); z-index: 20; background: var(--agro-canvas); padding-block: 0.5rem; margin-block: -0.5rem; }
.dd-lazy { min-height: 7rem; opacity: 0.45; }

/* Seguridad y accesos: las pestañas se desplazan en horizontal en pantallas angostas; las listas paginadas por AJAX se atenúan mientras piden su página. */
.access-tabs { overflow-x: auto; white-space: nowrap; }
[data-paged-list][aria-busy="true"] > * { opacity: 0.55; transition: opacity 0.15s ease; }

/* Seguridad y accesos: tarjetas de indicadores y filtros en una grilla que se acomoda sola (el CSS compilado no trae las grillas de pantalla ancha). */
.access-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem; }
.access-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; align-items: end; }
@media (min-width: 640px) { .access-filters > .access-wide { grid-column: span 2; } }