/* La Palma · página de la finca
   Sistema visual: manual de marca Longs Peak (colores, letras, esquinas).
   Los nombres de los colores son los del manual. */

:root {
  /* Colores del manual Longs Peak (v2: paleta del logo original) */
  --verde-longs: #075829;  /* color insignia */
  --pasto: #459843;        /* verde medio: solo rellenos y gráficos */
  --pasto-texto: #2F7A35;  /* verde para texto sobre claro: enlaces, datos destacados */
  --brote: #CBDB7B;        /* verde claro: fondos de etiquetas, lote listo */
  --heno: #D9A441;         /* acento cálido: solo rellenos (el arete), ≤10% */
  --heno-texto: #8A5F0E;
  --monte: #151F15;        /* tinta principal */
  --monte-suave: #56634F;  /* texto secundario */
  --leche: #F4F6EE;        /* fondo de página */
  --superficie: #FFFFFF;   /* tarjetas y tablas */
  --niebla: #D6DDCF;       /* líneas y bordes */
  --on-verde: #FFFFFF;     /* texto sobre verde-longs */
  --alerta: #A8461F;       /* solo alertas del sistema */
  /* Tintes de apoyo (calculados para contraste ≥ 4,5:1 con su texto) */
  --verde-tinte: #E4EEDF;
  --brote-tinte: #EFF4D6;
  --heno-tinte: #F6E9C9;
  --heno-oscuro: #5E4206;
  --alerta-tinte: #F8E7DF;

  /* Letras del manual */
  --f-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-texto: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-datos: "IBM Plex Mono", Consolas, monospace;

  /* Esquinas: la marca es de ángulos rectos */
  --radio-0: 0;
  --radio-1: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--leche);
  color: var(--monte);
  font: 400 16px/1.55 var(--f-texto);
}
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.15; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.005em; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--pasto-texto); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--heno); outline-offset: 2px; }

/* Cifras: la mono del manual, números tabulares */
.dato, td.n, .cifra b, .vaca .litros b, .grafica text { font-family: var(--f-datos); font-variant-numeric: tabular-nums; }

.cargando { padding: 48px 16px; text-align: center; color: var(--monte-suave); }

/* ── Marco ─────────────────────────────────────────────── */
/* Menú lateral verde a la izquierda (agrupado por área), barra arriba con
   la finca y la sección, y el contenido en tarjetas. En el celular el menú
   se esconde y se abre con ☰. */

:root {
  --lateral: 248px;
  --sombra: 0 1px 2px rgba(21, 31, 21, .06), 0 2px 8px rgba(21, 31, 21, .05);
  --sombra-alta: 0 4px 18px rgba(21, 31, 21, .12);
  --radio-2: 10px;
  --fondo-app: #F2F4EF;
}
body { background: var(--fondo-app); }

.marco { min-height: 100vh; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico.ico-vaca { --vi: currentColor; width: 24px; height: 15px; }

.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--lateral);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0A6A33 0%, var(--verde-longs) 45%, #05411F 100%);
  color: var(--on-verde);
}
.lat-marca { display: flex; align-items: center; gap: 12px; padding: 22px 20px 20px; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lat-marca img { width: 34px; height: 34px; }
.lat-marca b { display: block; font: 800 1.12rem/1.1 var(--f-display); letter-spacing: .01em; }
.lat-marca small { display: block; font-size: .8rem; opacity: .78; margin-top: 2px; }
.lateral nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
.lateral nav { padding: 14px 12px; }
.lat-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
  border-radius: 8px; color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.lat-item > span:not(.lat-flecha):not(.ico) { flex: 1; }
.lat-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.lat-item[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; }
.lat-flecha { display: grid; opacity: .75; transition: transform .18s ease; }
.lat-flecha .ico { width: 16px; height: 16px; }
.lat-modulo.abierto .lat-flecha { transform: rotate(90deg); }
.lat-sub { display: none; padding: 2px 0 8px 44px; }
.lat-modulo.abierto .lat-sub { display: block; }
.lat-sub a { position: relative; display: block; padding: 6px 10px; border-radius: 6px; color: rgba(255, 255, 255, .78);
  text-decoration: none; font-size: .87rem; font-weight: 500; }
.lat-sub a::before { content: ""; position: absolute; left: -10px; top: 50%; width: 6px; height: 1.5px; background: currentColor; opacity: .7; }
.lat-sub a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.lat-pie { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.lat-quien { flex: 1; min-width: 0; line-height: 1.2; }
.lat-quien b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lat-quien small { font-size: .76rem; opacity: .75; }
.lat-salir { background: none; border: 0; color: inherit; opacity: .8; cursor: pointer; padding: 6px; border-radius: 6px; display: grid; }
.lat-salir:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--brote); color: var(--verde-longs); font: 700 .85rem var(--f-texto); }
.avatar.chico { width: 34px; height: 34px; background: var(--verde-tinte); }

.cuerpo { margin-left: var(--lateral); min-height: 100vh; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 32px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--niebla);
}
.abrir-menu { display: none; background: none; border: 0; padding: 6px; margin-left: -6px; cursor: pointer; color: var(--monte); }
.miga { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.miga-finca { color: var(--monte-suave); font-size: .9rem; white-space: nowrap; }
.miga-sep { color: var(--niebla); }
.miga b { font: 700 1.05rem var(--f-display); color: var(--monte); white-space: nowrap; }
.barra-fecha { margin-left: auto; color: var(--monte-suave); font-size: .88rem; }

main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 96px; }

.velo { display: none; }

@media (max-width: 960px) {
  .lateral { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--sombra-alta); }
  .menu-abierto .lateral { transform: none; }
  .menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(21, 31, 21, .4); }
  .cuerpo { margin-left: 0; }
  .abrir-menu { display: grid; }
  .barra { height: 56px; padding: 0 16px; gap: 10px; }
  .barra-fecha { display: none; }
  .barra .avatar { margin-left: auto; }
  main { padding: 18px 16px 72px; }
  h1 { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition: none; } }

/* ── Piezas comunes ────────────────────────────────────── */

.seccion { margin-top: 36px; }
.seccion > h2 { margin-bottom: 12px; }
.nota { color: var(--monte-suave); font-size: .9rem; }
.tenue { color: var(--monte-suave); }
.vacio { padding: 20px; border: 1px dashed var(--niebla); border-radius: var(--radio-2); color: var(--monte-suave); background: var(--superficie); }

.panel { background: var(--superficie); border: 1px solid #E3E8DE; border-radius: var(--radio-2); box-shadow: var(--sombra); overflow: hidden; }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; font-weight: 700; color: var(--monte-suave); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; padding: 11px 12px; border-bottom: 1px solid var(--niebla); background: #F8FAF5; }
td { padding: 9px 12px; border-bottom: 1px solid var(--niebla); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
td.n { font-size: .9rem; }
.tabla { overflow-x: auto; }

.boton {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--verde-longs);
  background: var(--verde-longs); color: var(--on-verde); font-weight: 600;
}
.boton.secundario { background: var(--superficie); color: var(--verde-longs); }
.boton:disabled { opacity: .55; cursor: default; }

/* Etiquetas: rectas, como pide el manual */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.chip.verde { background: var(--brote); color: var(--verde-longs); }
.chip.potrero { background: var(--verde-longs); color: var(--on-verde); }
.chip.amarillo { background: var(--heno-tinte); color: var(--heno-oscuro); }
.chip.rojo { background: var(--alerta-tinte); color: var(--alerta); }
.chip.gris { background: var(--verde-tinte); color: var(--verde-longs); }

/* El arete: el número de cada vaca en el arete de verdad. Es la única
   pieza redondeada aparte del símbolo: es un objeto real de la finca. */
.arete {
  position: relative; display: inline-grid; place-items: center;
  min-width: 46px; height: 40px; padding: 8px 6px 2px;
  background: var(--heno); border: 1.5px solid var(--heno-texto);
  border-radius: 12px 12px 16px 16px;
  font: 600 .9rem/1 var(--f-datos); color: var(--monte);
}
.arete::before {   /* el hueco por donde pasa el arete */
  content: ""; position: absolute; top: 4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--leche); border: 1.5px solid var(--heno-texto);
}
.arete.grande { min-width: 76px; height: 64px; padding-top: 16px; font-size: 1.4rem; border-radius: 16px 16px 22px 22px; }
.arete.grande::before { top: 6px; width: 10px; height: 10px; margin-left: -5px; }
.arete.baja { background: var(--niebla); border-color: var(--monte-suave); color: var(--monte-suave); }

/* ── Hoy ───────────────────────────────────────────────── */

.titular { max-width: 26ch; font: 700 clamp(1.7rem, 4.6vw, 2.6rem)/1.12 var(--f-display); letter-spacing: -.01em; }
.titular .baja { color: var(--alerta); }
.subtitular { margin-top: 10px; color: var(--monte-suave); max-width: 62ch; }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; border-top: 3px solid var(--verde-longs); }
.cifra { padding: 14px 16px; border-left: 1px solid var(--niebla); }
.cifra:first-child { border-left: 0; padding-left: 0; }
.cifra b { display: block; font-size: 1.75rem; font-weight: 500; line-height: 1.1; }
.cifra span { font-size: .86rem; color: var(--monte-suave); }
@media (max-width: 720px) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(3) { border-left: 0; padding-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--niebla); }
}

.lista { list-style: none; margin: 0; padding: 0; }
.lista summary { list-style: none; }
.lista summary::-webkit-details-marker { display: none; }
.lista summary::before { content: "▸"; color: var(--monte-suave); }
.lista details[open] summary::before { content: "▾"; }
.lista li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--niebla); }
.lista li:last-child { border-bottom: 0; }
.lista .cuando { margin-left: auto; white-space: nowrap; color: var(--monte-suave); font-size: .86rem; align-self: flex-start; }
.alerta-txt { flex: 1; }
.alerta { border-color: #E9C3B2; }
.alerta li { background: var(--alerta-tinte); border-bottom-color: #E9C3B2; }
.alerta .alerta-txt > div:first-child::before { content: "⚠ "; color: var(--alerta); font-weight: 700; }

/* ── Gráfica de leche ──────────────────────────────────── */

.grafica { padding: 12px 8px 4px; }
.grafica svg { display: block; width: 100%; height: auto; }
.grafica .eje { stroke: var(--niebla); }
.grafica .linea { fill: none; stroke: var(--verde-longs); stroke-width: 2.25; }
.grafica .prom { fill: none; stroke: var(--pasto); stroke-width: 1.5; stroke-dasharray: 4 4; }
.grafica text { font-size: 11.5px; font-weight: 500; fill: var(--monte-suave); }
.grafica .punto { fill: var(--verde-longs); }
.leyenda { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 16px 12px; font-size: .85rem; color: var(--monte-suave); }
.leyenda i { display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.25px solid var(--verde-longs); }
.leyenda i.prom { border-top: 1.5px dashed var(--pasto); }

/* ── Tablero ───────────────────────────────────────────── */

.cifra small { display: block; margin-top: 2px; font-size: .8rem; color: var(--monte-suave); line-height: 1.35; }
.cifra.baja b { color: var(--alerta); }

.semaforo li { align-items: baseline; }
.semaforo b { min-width: 9.5em; }
.luz { flex: none; width: 12px; height: 12px; align-self: center; border: 1.5px solid transparent; }
.luz.verde { background: var(--pasto); border-color: var(--verde-longs); }
.luz.amarillo { background: var(--heno); border-color: var(--heno-texto); }
.luz.rojo { background: var(--alerta); border-color: var(--alerta); }
.luz.gris { background: var(--niebla); border-color: var(--monte-suave); }
@media (max-width: 600px) {
  .semaforo li { flex-wrap: wrap; row-gap: 2px; }
  .semaforo b { min-width: 0; }
  .semaforo li > span:last-child { flex-basis: 100%; padding-left: 24px; }
}

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.dos-col h3 { margin-bottom: 8px; }
@media (max-width: 720px) { .dos-col { grid-template-columns: 1fr; } .ranking .r-txt .nota { display: none; } }
.ranking li { cursor: pointer; padding: 8px 14px; }
.ranking li:hover { background: var(--verde-tinte); }
.ranking .puesto { width: 1.2em; font: 600 .9rem var(--f-datos); color: var(--monte-suave); }
.ranking .r-txt b { font-family: var(--f-datos); font-weight: 600; }
.ranking .cuando { align-self: center; font-family: var(--f-datos); font-size: .82rem; }

/* ── Animales: para revisar + tabla del hato ───────────── */

.revisar li { align-items: flex-start; cursor: pointer; }
.revisar li:hover { background: var(--verde-tinte); }
.revisar-txt { display: grid; gap: 4px; padding-top: 4px; }
.revisar-txt > div, .revisar li > .luz + span { display: flex; gap: 8px; align-items: baseline; }
.revisar .luz { align-self: auto; margin-top: 4px; }
.filtros.chicos button { font-size: .84rem; padding: 4px 10px; }
.tabla-hato table { min-width: 640px; }
.tabla-hato th { padding: 0; white-space: nowrap; }
.tabla-hato th .ordenar { all: unset; display: block; padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; }
.tabla-hato th.n .ordenar { text-align: right; }
.tabla-hato th[aria-sort] { color: var(--verde-longs); }
.tabla-hato tbody tr { cursor: pointer; }
.tabla-hato tbody tr:hover, .tabla-hato tbody tr:focus-visible { background: var(--verde-tinte); outline: none; }
.tabla-hato td { padding: 7px 12px; }
.tabla-hato .arete { min-width: 40px; height: 34px; font-size: .84rem; padding-top: 7px; }
.tabla-hato .arete::before { top: 3px; width: 6px; height: 6px; margin-left: -3px; }
.alerta-col { white-space: nowrap; text-align: right; }
.alerta-col .luz, .revisar .luz { display: inline-block; vertical-align: middle; }
.alerta-col small { margin-left: 4px; font: 600 .78rem var(--f-datos); color: var(--monte-suave); }
@media (max-width: 720px) {
  .tabla-hato td:first-child, .tabla-hato th:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
}

.reglas { background: var(--superficie); border: 1px solid var(--niebla); padding: 10px 14px; margin-bottom: 14px; }
.reglas summary { cursor: pointer; font-weight: 600; color: var(--verde-longs); }
.reglas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.reglas-grid b { display: block; font-family: var(--f-display); }
.regla-n { display: inline-block; margin: 2px 0 4px; padding: 1px 8px; background: var(--brote-tinte); color: var(--verde-longs); font: 600 .8rem var(--f-datos); }
.reglas-grid p { font-size: .84rem; color: var(--monte-suave); line-height: 1.4; }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.tema { background: var(--superficie); border: 1px solid var(--niebla); border-top: 3px solid var(--heno); padding: 12px 14px; }
.tema.urgente { border-top-color: var(--alerta); }
.tema-cabeza { display: flex; align-items: center; gap: 8px; }
.tema-cabeza h3 { flex: 1; }
.tema-n { font: 600 1.1rem var(--f-datos); color: var(--monte-suave); }
.tema .nota { margin: 4px 0 8px; font-size: .84rem; }
.tema ul { list-style: none; margin: 0; padding: 0; }
.tema li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--niebla); cursor: pointer; font-size: .92rem; }
.tema li:hover { background: var(--verde-tinte); }
.tema li .rojo { color: var(--alerta); font-weight: 600; }
.tema .arete { min-width: 40px; height: 34px; font-size: .84rem; padding-top: 7px; }
.tema .arete::before { top: 3px; width: 6px; height: 6px; margin-left: -3px; }
.tema .luz { display: inline-block; }

/* ── Plata ─────────────────────────────────────────────── */

.grafica rect.ingreso { fill: var(--verde-longs); }
.grafica rect.gasto { fill: var(--heno); }
.leyenda i.cuadro { width: 12px; height: 12px; border: 0; vertical-align: -1px; }
.leyenda i.cuadro.ingreso { background: var(--verde-longs); }
.leyenda i.cuadro.gasto { background: var(--heno); }
.categorias { padding: 6px 16px; }
.cat { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2fr 7.5em 3.2em; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--niebla); }
.cat:last-child { border-bottom: 0; }
.cat-barra { height: 10px; background: var(--verde-tinte); }
.cat-barra i { display: block; height: 100%; background: var(--pasto); }
.cat-valor, .cat-pct { font-family: var(--f-datos); font-size: .9rem; text-align: right; }
.cat-pct { color: var(--monte-suave); }
.tabla-gastos td.fecha { white-space: nowrap; }
.solo-cel { display: none; }
@media (max-width: 600px) {
  .tabla-gastos .col-cat { display: none; }
  .tabla-gastos .solo-cel { display: block; }
  .tabla-gastos td { padding: 9px 8px; }
  .cat { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cat-barra { grid-column: 1 / -1; grid-row: 2; }
  .cat-pct { display: none; }
}

/* ── Potreros ──────────────────────────────────────────── */

.potreros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lote {
  padding: 12px 14px; border: 1px solid var(--niebla); background: var(--superficie);
  min-height: 112px; display: flex; flex-direction: column; gap: 3px;
}
.lote .num { font: 700 1.6rem/1 var(--f-display); }
.lote .estado { font-size: .84rem; font-weight: 700; }
.lote .detalle { font-size: .84rem; color: var(--monte-suave); margin-top: auto; }
.lote.ocupado { background: var(--verde-longs); border-color: var(--verde-longs); color: var(--on-verde); }
.lote.ocupado .detalle { color: var(--on-verde); opacity: .85; }
.lote.listo { background: var(--brote-tinte); border-color: var(--brote); }
.lote.listo .estado { color: var(--verde-longs); }
.lote.descansando .estado { color: var(--monte-suave); }
.lote.pasado { background: var(--heno-tinte); border-color: #EBCF8F; }
.lote.pasado .estado { color: var(--heno-oscuro); }
/* El lote que sigue: las líneas de ladera de la marca */
.lote.siguiente {
  border: 2px solid var(--verde-longs);
  background: repeating-linear-gradient(-60deg, var(--brote) 0 10px, var(--brote-tinte) 10px 20px);
}
.lote.siguiente .estado { color: var(--verde-longs); }

/* ── Animales ──────────────────────────────────────────── */

.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filtros button {
  padding: 6px 12px; border: 1px solid var(--niebla); border-radius: var(--radio-1);
  background: var(--superficie); cursor: pointer; font-size: .9rem;
}
.filtros button[aria-pressed="true"] { background: var(--verde-longs); border-color: var(--verde-longs); color: var(--on-verde); }

.vacas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.vaca {
  display: flex; gap: 14px; align-items: center; padding: 12px 14px; text-align: left; width: 100%;
  background: var(--superficie); border: 1px solid var(--niebla); cursor: pointer;
}
.vaca:hover { border-color: var(--verde-longs); }
.vaca .info { flex: 1; min-width: 0; }
.vaca .info .linea1 { display: flex; gap: 6px; flex-wrap: wrap; }
.vaca .info .linea2 { font-size: .86rem; color: var(--monte-suave); margin-top: 3px; }
.vaca .litros { text-align: right; }
.vaca .litros b { display: block; font-size: 1.15rem; font-weight: 500; line-height: 1; }
.vaca .litros span { font-size: .76rem; color: var(--monte-suave); }

.ficha-cabeza { display: flex; gap: 18px; align-items: center; }
.datos-vaca { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); background: var(--superficie);
  border: 1px solid var(--niebla); overflow: hidden; margin: 20px 0 0; }
.datos-vaca div { padding: 10px 14px; box-shadow: 1px 1px 0 var(--niebla); }
.datos-vaca dt { font-size: .8rem; color: var(--monte-suave); }
.datos-vaca dd { margin: 2px 0 0; font-weight: 600; }
.volver { display: inline-block; margin-bottom: 14px; text-decoration: none; font-weight: 600; }

.historia { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--niebla); }
.historia li { position: relative; padding: 0 0 16px 16px; }
.historia li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px;
  background: var(--superficie); border: 2px solid var(--verde-longs); }
.historia li.repro::before { background: var(--heno); border-color: var(--heno-texto); }
.historia li.sanidad::before { background: var(--alerta); border-color: var(--alerta); }
.historia .fecha { font-size: .84rem; color: var(--monte-suave); }

.barras { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.barras span { flex: 1; background: var(--verde-longs); min-width: 6px; }

/* ── Actividad ─────────────────────────────────────────── */

.evento-texto { font-size: .86rem; color: var(--monte-suave); margin-top: 2px; max-width: 70ch; }
.anulado { text-decoration: line-through; opacity: .6; }
select { padding: 8px; border: 1px solid var(--niebla); border-radius: var(--radio-1); font: inherit; background: var(--superficie); color: var(--monte); }

/* ── Entrar ────────────────────────────────────────────── */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--leche); position: relative; }
.entrada::before {   /* las líneas de ladera de la marca, de borde a borde */
  content: ""; position: absolute; inset: 0 0 auto; height: 38vh;
  background: repeating-linear-gradient(-60deg, var(--verde-longs) 0 26px, var(--brote) 26px 32px);
}
.entrada .caja { position: relative; width: 100%; max-width: 400px; background: var(--superficie); padding: 28px 26px;
  border-top: 4px solid var(--brote); box-shadow: 0 2px 16px rgba(21, 31, 21, .12); }
.entrada .logo { display: block; width: 100%; max-width: 320px; height: auto; }
.finca-entrada { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--niebla); font: 700 1.1rem/1.2 var(--f-display); color: var(--verde-longs); }
.entrada form { display: grid; gap: 14px; margin-top: 20px; }
.entrada label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
.entrada input { padding: 10px 12px; border: 1px solid var(--niebla); border-radius: var(--radio-1); font: inherit; }
.entrada .alternar { background: none; border: 0; color: var(--pasto-texto); cursor: pointer; padding: 0; text-decoration: underline; font-size: .9rem; }
.error { color: var(--alerta); font-size: .9rem; }
.ok { color: var(--pasto-texto); font-size: .9rem; }

.aviso-flotante { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--monte); color: var(--leche);
  padding: 10px 16px; font-size: .92rem; z-index: 20; }

@media (prefers-reduced-motion: no-preference) {
  .titular { animation: aparecer .5s ease-out both; }
  @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Ficha: por qué baja la leche */
.por-que { background: var(--brote-tinte); border-left: 4px solid var(--verde-longs); padding: 10px 14px; margin-bottom: 12px; }
.por-que.ojo { background: var(--superficie); border-left-color: var(--alerta); }
.por-que b { display: block; margin-bottom: 4px; }
.por-que ul { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--monte-suave); line-height: 1.45; }

/* Plata: gastos por categoría */
.gc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.gc-graficas { display: grid; gap: 14px; }
.gc h3 { font-size: 1rem; margin: 0 0 8px; }
.gc-lista { padding: 14px 12px; }
.gc-fila { display: grid; grid-template-columns: 14px 1fr auto 34px; align-items: center; gap: 10px; width: 100%;
  padding: 10px 8px; background: none; border: 1px solid transparent; font: inherit; color: var(--monte); text-align: left; cursor: pointer; }
.gc-fila:first-of-type { grid-template-columns: 1fr auto; background: var(--leche); border-color: var(--niebla); margin-bottom: 6px; font-weight: 600; }
.gc-fila:hover { background: var(--leche); }
.gc-fila.activa { border-color: var(--verde-longs); background: var(--verde-tinte); }
.gc-punto { width: 12px; height: 12px; border-radius: 50%; }
.gc-valor { font-family: var(--f-datos); font-variant-numeric: tabular-nums; font-weight: 600; }
.gc-n { display: inline-block; margin-left: 8px; padding: 1px 7px; background: var(--leche); border: 1px solid var(--niebla);
  color: var(--monte-suave); font: 500 .78rem var(--f-datos); text-align: center; }
.gc-dona { padding: 14px; }
.gc-dona svg { display: block; width: 100%; max-width: 230px; margin: 0 auto; }
.gc-centro-t { font: 500 11px var(--f-texto); fill: var(--monte-suave); }
.gc-centro-v { font: 700 17px var(--f-datos); fill: var(--monte); }
.gc-barras { padding: 14px 10px 6px; }
@media (max-width: 760px) { .gc { grid-template-columns: 1fr; } }

/* Curva de lactancia por días en leche */
.grafica .banda { fill: var(--verde-tinte); }
.grafica .anterior { fill: none; stroke: var(--monte-suave); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .7; }
.grafica .punto-anterior { fill: var(--monte-suave); opacity: .6; }
.grafica .vaca-punto { fill: var(--verde-longs); stroke: var(--superficie); stroke-width: 2; }
.grafica .vaca-punto.alto { fill: var(--pasto); }
.grafica .vaca-punto.bajo { fill: var(--alerta); }
.grafica text.rotulo { fill: var(--monte); font-weight: 600; }
.leyenda i.anterior { border-top: 1.5px dashed var(--monte-suave); }
.leyenda i.cuadro.banda { background: var(--verde-tinte); border: 1px solid var(--niebla); }
.leyenda i.cuadro.redondo { border-radius: 50%; background: var(--verde-longs); }
.leyenda i.cuadro.redondo.bajo { background: var(--alerta); }
.leyenda i.cuadro.redondo.alto { background: var(--pasto); }

/* Plata: selector de unidad */
.filtros.unidades { margin-bottom: 6px; }
.filtros.unidades button { font-weight: 700; padding: 8px 16px; }
td.negativo { color: var(--alerta); }
tr.total td { font-weight: 700; border-top: 2px solid var(--niebla); }

/* Plata: por proveedor */
.gc-largo .gc-lista { max-height: 620px; overflow-y: auto; }
.gc-facturas { margin-top: 8px; max-height: 260px; overflow-y: auto; border-top: 1px solid var(--niebla); }
.gc-facturas table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.gc-facturas td { padding: 5px 6px; border-bottom: 1px solid var(--niebla); }
.gc-facturas td.n { text-align: right; font-family: var(--f-datos); }

.filtros button.boton-ano { margin-left: 8px; font-weight: 700; border-style: dashed; }

/* Registro de palpaciones */
.palp-lista { max-height: 340px; overflow-y: auto; padding: 4px 0; margin: 10px 0 18px; }
.palp-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; background: none; border: 0;
  border-bottom: 1px solid var(--niebla); font: inherit; color: var(--monte); text-align: left; cursor: pointer; }
.palp-fila:hover { background: var(--leche); }
.palp-fila.activa { background: var(--verde-tinte); }
.palp-fila .luz { display: inline-block; }
.palp-razon { flex: 1; font-size: .9rem; }
.palp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; scroll-margin-top: 80px; }
.palp > .palp-ok { grid-column: 1 / -1; }
.palp-info, .palp-form { padding: 16px; }
.palp-reco { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 12px 0; background: var(--leche); border-left: 4px solid var(--pasto); }
.palp-reco.rojo { border-left-color: var(--alerta); }
.palp-reco.amarillo { border-left-color: var(--heno); }
.palp-reco .luz { display: inline-block; margin-top: 4px; }
.palp-reco p { margin: 2px 0 0; font-size: .9rem; }
.palp-form { display: grid; gap: 12px; }
.palp-form h3 { margin: 0; }
.palp-form label { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.palp-form label.bloque { flex-direction: column; align-items: stretch; }
.palp-form input, .palp-form select, .palp-form textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--niebla); background: var(--superficie); }
.palp-form .filtros button { padding: 8px 14px; font-weight: 600; }
@media (max-width: 760px) { .palp { grid-template-columns: 1fr; } }

/* Indicadores del hato */
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.indicador { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--superficie);
  border: 1px solid var(--niebla); border-left: 5px solid var(--niebla); }
.indicador.verde { border-left-color: var(--pasto); }
.indicador.amarillo { border-left-color: var(--heno); }
.indicador.rojo { border-left-color: var(--alerta); }
.indicador.rojo b { color: var(--alerta); }
.ind-t { font-size: .85rem; color: var(--monte-suave); }
.indicador b { font: 600 1.6rem var(--f-datos); font-variant-numeric: tabular-nums; }
.indicador b small { font-size: .9rem; font-weight: 500; }
.ind-meta { align-self: flex-start; padding: 1px 7px; font: 600 .74rem var(--f-datos); background: var(--leche); color: var(--monte); }
.indicador.verde .ind-meta { background: var(--verde-tinte); color: var(--verde-longs); }
.indicador.rojo .ind-meta { background: var(--alerta-tinte); color: var(--alerta); }
.indicador.amarillo .ind-meta { background: var(--heno-tinte); color: var(--heno-oscuro); }
.ind-meta.sin { font-weight: 500; color: var(--monte-suave); }
.ind-det { font-size: .78rem; color: var(--monte-suave); }

/* Palpaciones: estado del hato */
.estado-hato { padding: 12px 16px; margin-bottom: 12px; display: grid; gap: 6px; }
.estado-hato h3 { margin: 0 0 4px; font-size: 1rem; }
.eh-fila { display: grid; grid-template-columns: 14px minmax(0, 1.4fr) minmax(60px, 1fr) 32px; gap: 10px; align-items: center; font-size: .9rem; }
.eh-fila b { text-align: right; font-family: var(--f-datos); }
.eh-punto { width: 12px; height: 12px; border-radius: 50%; }
.eh-barra { height: 8px; background: var(--leche); }
.eh-barra i { display: block; height: 100%; }
.eh-punto.verde, .eh-barra i.verde { background: var(--pasto); }
.eh-punto.azul, .eh-barra i.azul { background: #2a78d6; }
.eh-punto.rojo, .eh-barra i.rojo { background: var(--alerta); }
.eh-punto.gris, .eh-barra i.gris { background: var(--monte-suave); }
.eh-punto.amarillo, .eh-barra i.amarillo { background: var(--heno); }

.como-calculo { margin-top: 12px; }
.como-calculo summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.como-calculo tr.sub td { color: var(--monte-suave); font-size: .85rem; }

/* ── Acabado general (marco nuevo): tarjetas con esquinas suaves y sombra ── */
.reglas, .tema, .lote, .vaca, .datos-vaca, .indicador, .palp-item, .seccion > .lista, .alerta {
  border-radius: var(--radio-2); box-shadow: var(--sombra); border-color: #E3E8DE;
}
.vaca:hover, .lote:hover { box-shadow: var(--sombra-alta); }
.filtros button { border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .86rem; }
.seccion > h2 { font-size: 1.15rem; }
main > div > h1:first-child { font-size: 1.75rem; }
.aviso-flotante { border-radius: 8px; }
@media (min-width: 961px) { .aviso-flotante { bottom: 32px; margin-left: calc(var(--lateral) / 2); } }

/* ── Animales (diseño nuevo) ───────────────────────────── */
.enc-seccion { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.enc-seccion .nota { margin-top: 4px; }

.contadores { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.contador {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid #E3E8DE; border-radius: var(--radio-2); box-shadow: var(--sombra);
  border-top: 3px solid var(--niebla); font: inherit; color: inherit;
}
.contador b { font: 600 1.6rem/1.1 var(--f-datos); font-variant-numeric: tabular-nums; }
.contador span { font-size: .8rem; color: var(--monte-suave); font-weight: 600; }
.contador:hover { border-top-color: var(--pasto); }
.contador[aria-pressed="true"] { border-color: var(--verde-longs); border-top-color: var(--verde-longs); background: var(--verde-tinte); }
.contador[aria-pressed="true"] b { color: var(--verde-longs); }
.contador.dato { cursor: default; background: var(--verde-longs); border-color: var(--verde-longs); border-top-color: var(--verde-longs); color: var(--on-verde); }
.contador.dato span { color: var(--on-verde); opacity: .85; }
@media (max-width: 1100px) { .contadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contador b { font-size: 1.35rem; } }

.franja-revisar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px;
  background: var(--superficie); border: 1px solid #E3E8DE; border-left: 4px solid var(--heno); border-radius: var(--radio-2); box-shadow: var(--sombra);
}
.franja-titulo { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.franja-temas { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.tema-boton { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--niebla); background: var(--superficie); font: 600 .84rem var(--f-texto); color: var(--monte); }
.tema-boton b { font-family: var(--f-datos); min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: var(--heno-tinte); color: var(--heno-oscuro); }
.tema-boton.urgente b { background: var(--alerta-tinte); color: var(--alerta); }
.tema-boton .luz { display: inline-block; width: 9px; height: 9px; }
.tema-boton:hover { border-color: var(--monte-suave); }
.tema-boton[aria-pressed="true"] { background: var(--monte); border-color: var(--monte); color: #fff; }
.franja-ayuda, .enlace { background: none; border: 0; padding: 0; color: var(--pasto-texto); font: 600 .84rem var(--f-texto); cursor: pointer; text-decoration: underline; }
.franja-nota { margin: -4px 0 12px; }
div[hidden] { display: none; }
.reglas { margin-top: 12px; }

.lista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lista-cabeza h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.lista-n { font: 600 .8rem var(--f-datos); padding: 2px 9px; border-radius: 999px; background: var(--verde-tinte); color: var(--verde-longs); }
.lista-controles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.buscar { padding: 8px 12px; border: 1px solid var(--niebla); border-radius: 8px; font: inherit; font-size: .9rem; width: 170px; background: var(--superficie); }
.lista-controles select { border-radius: 8px; font-size: .9rem; }
.boton.chico { padding: 7px 11px; }
.segmentos { display: inline-flex; border: 1px solid var(--niebla); border-radius: 8px; overflow: hidden; background: var(--superficie); }
.segmentos button { border: 0; background: none; padding: 7px 12px; cursor: pointer; font: 600 .86rem var(--f-texto); color: var(--monte-suave); }
.segmentos button[aria-pressed="true"] { background: var(--verde-longs); color: var(--on-verde); }

.tarjetas-animales { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.tarjeta-animal {
  display: flex; align-items: center; gap: 14px; padding: 12px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--superficie); border: 1px solid #E3E8DE; border-radius: var(--radio-2); box-shadow: var(--sombra);
  transition: box-shadow .15s, border-color .15s;
}
.tarjeta-animal:hover { box-shadow: var(--sombra-alta); border-color: var(--pasto); }
.ta-info { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ta-cabeza { display: flex; align-items: center; gap: 8px; }
.ta-arete { font: 700 1.2rem/1 var(--f-datos); }
.ta-alerta { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.ta-alerta .luz { display: inline-block; border-radius: 50%; }
.ta-alerta small { font: 600 .74rem var(--f-datos); color: var(--monte-suave); }
.ta-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ta-meta { font-size: .82rem; color: var(--monte-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-aviso { font-size: .82rem; font-weight: 600; color: var(--heno-oscuro); }
.ta-aviso.rojo { color: var(--alerta); }
.ta-litros { text-align: right; padding-left: 10px; border-left: 1px solid var(--niebla); min-width: 64px; }
.ta-litros b { display: block; font: 600 1.3rem/1 var(--f-datos); }
.ta-litros span { font-size: .72rem; color: var(--monte-suave); }
.ta-litros small { display: block; margin-top: 3px; font: 600 .74rem var(--f-datos); color: var(--monte-suave); }
.ta-litros small.baja { color: var(--alerta); }
.ta-litros small.sube { color: var(--pasto-texto); }

/* El ícono de la vaca: la silueta (img/vaca.png como máscara) sobre un cuadro de color */
.vaca-icono { flex: none; display: grid; place-items: center; width: 76px; height: 56px; border-radius: 8px;
  --vi: var(--verde-longs); background: var(--verde-tinte); }
.vi-silueta, .ico-vaca { display: block; background: var(--vi, currentColor);
  -webkit-mask: url(../img/vaca.png) center / contain no-repeat; mask: url(../img/vaca.png) center / contain no-repeat; }
.vaca-icono .vi-silueta { width: 78%; aspect-ratio: 980 / 592; }
.vaca-icono.seca { --vi: var(--heno-texto); background: var(--heno-tinte); }
.vaca-icono.cria { --vi: var(--pasto-texto); background: var(--brote-tinte); }
.vaca-icono.otra, .vaca-icono.baja { --vi: var(--monte-suave); background: #EEF0EA; }
.vaca-icono.baja { opacity: .7; }
.vaca-icono.grande { width: 260px; height: 180px; border-radius: var(--radio-2); }
.vaca-icono.grande .vi-silueta { width: 72%; }
.perfil > .vaca-icono.grande { align-self: center; }

/* Ficha */
.perfil { display: flex; gap: 24px; padding: 20px; background: var(--superficie); border: 1px solid #E3E8DE; border-radius: var(--radio-2); box-shadow: var(--sombra); }
.perfil-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.perfil-et { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--monte-suave); }
.perfil-arete { font: 700 2.2rem/1 var(--f-datos) !important; letter-spacing: 0; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
.mini { padding: 9px 12px; border-radius: 8px; background: #F6F8F3; border: 1px solid #E8ECE3; }
.mini dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--monte-suave); }
.mini dd { margin: 2px 0 0; font: 600 1.05rem var(--f-datos); }
.mini small { display: block; font-size: .74rem; color: var(--monte-suave); line-height: 1.3; margin-top: 2px; }
.mini.mal { background: var(--alerta-tinte); border-color: #EFCDBE; }
.mini.mal dd { color: var(--alerta); }
.que-hacer { margin-top: 14px; padding: 12px 16px; background: var(--heno-tinte); border: 1px solid #EBD9AC; border-radius: var(--radio-2); }
.que-hacer ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.que-hacer li { display: flex; gap: 8px; align-items: baseline; font-size: .93rem; }
.que-hacer .luz { display: inline-block; border-radius: 50%; }
.ficha-pestanas { margin-top: 16px; }
.pestanas-ficha { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--niebla); overflow-x: auto; }
.pestanas-ficha button { flex: none; border: 0; background: none; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  font: 600 .9rem var(--f-texto); color: var(--monte-suave); }
.pestanas-ficha button:hover { background: var(--verde-tinte); color: var(--monte); }
.pestanas-ficha button[aria-selected="true"] { background: var(--verde-longs); color: var(--on-verde); }
.pestana-cuerpo { padding: 20px; }
.bloque { margin-top: 22px; }
.bloque:first-child { margin-top: 0; }
.bloque h3 { margin-bottom: 4px; }
.bloque .nota { margin-bottom: 8px; }
.pestana-cuerpo .datos-vaca { box-shadow: none; }
.familia { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.tarjeta-familia { display: flex; align-items: center; gap: 10px; padding: 8px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--superficie); border: 1px solid #E3E8DE; border-radius: 8px; }
.tarjeta-familia:hover { border-color: var(--pasto); }
.tarjeta-familia .vaca-icono { width: 52px; height: 36px; }
.tarjeta-familia b { display: block; font-family: var(--f-datos); }
.tarjeta-familia small { color: var(--monte-suave); font-size: .8rem; }
@media (max-width: 760px) {
  .perfil { flex-direction: column; padding: 16px; gap: 14px; }
  .vaca-icono.grande { width: 100%; height: 150px; }
  .pestana-cuerpo { padding: 14px; }
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-controles { width: 100%; }
  .buscar { flex: 1; width: auto; }
  .tarjetas-animales { grid-template-columns: 1fr; }
}

/* ── Registrar / corregir animal ───────────────────────── */
[hidden] { display: none !important; }
.enc-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.enc-acciones .boton { text-decoration: none; }
.perfil-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.perfil-arriba .boton { text-decoration: none; }
.form-animal { padding: 8px 24px 20px; max-width: 920px; overflow: visible; }
.form-grupo { border: 0; border-top: 1px solid var(--niebla); margin: 0; padding: 18px 0 4px; }
.form-grupo:first-of-type { border-top: 0; }
.form-grupo legend { float: left; width: 100%; padding: 0; font: 700 .78rem var(--f-texto); letter-spacing: .07em; text-transform: uppercase; color: var(--monte-suave); }
.form-fila { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-top: 10px; }
.campo { display: grid; gap: 4px; align-content: start; font-size: .88rem; font-weight: 600; }
.campo input, .campo select { width: 100%; padding: 9px 11px; border: 1px solid var(--niebla); border-radius: 8px; font: 400 .95rem var(--f-texto); background: var(--superficie); color: var(--monte); }
.campo input:disabled { background: #F2F4EF; color: var(--monte-suave); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--pasto); outline-offset: 0; border-color: var(--pasto); }
.campo small { font-weight: 400; font-size: .76rem; color: var(--monte-suave); line-height: 1.35; }
.form-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--niebla); flex-wrap: wrap; }
.form-acciones .error { margin-right: auto; color: var(--alerta); font-weight: 600; font-size: .9rem; }
.form-acciones a.boton { text-decoration: none; }
@media (max-width: 720px) { .form-fila { grid-template-columns: 1fr; } .form-animal { padding: 4px 16px 16px; } }

/* ── Subpáginas ─────────────────────────────────────────── */
.lat-sub a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .14); font-weight: 600; }
.lat-sub a[aria-current="page"]::before { opacity: 1; }
.miga-modulo { color: var(--monte-suave); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.miga-modulo:hover { color: var(--verde-longs); text-decoration: underline; }
.enlace-h2 { margin-left: 8px; font: 600 .84rem var(--f-texto); color: var(--pasto-texto); }
.franja-ayuda { text-decoration: none; white-space: nowrap; }
.franja-ayuda:hover { text-decoration: underline; }

/* ── Leche (módulo nuevo) ──────────────────────────────── */
.periodo { padding: 9px 12px; border: 1px solid var(--niebla); border-radius: 8px; font: 600 .9rem var(--f-texto); background: var(--superficie); color: var(--monte); }
.cifras-t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cifras-t.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cifra-t { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--superficie); border: 1px solid #E3E8DE;
  border-top: 3px solid var(--pasto); border-radius: var(--radio-2); box-shadow: var(--sombra); }
.cifras-t.seis .cifra-t { align-items: center; text-align: center; }
.cifra-t b { font: 600 1.7rem/1.15 var(--f-datos); font-variant-numeric: tabular-nums; }
.cifra-t span { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--monte-suave); }
.cifra-t small { font-size: .78rem; color: var(--monte-suave); }
.cifra-t em { font-style: normal; font-weight: 600; font-size: .78rem; color: var(--monte-suave); }
.cifra-t em.baja { color: var(--alerta); } .cifra-t em.sube { color: var(--pasto-texto); }
.cifra-t.verde { border-top-color: var(--verde-longs); }
.cifra-t.azul { border-top-color: #3B7BC8; }
.cifra-t.morado { border-top-color: #7A5BB8; }
.cifra-t.heno { border-top-color: var(--heno); }
.cifra-t.rojo { border-top-color: var(--alerta); } .cifra-t.rojo b { color: var(--alerta); }
@media (max-width: 1100px) { .cifras-t.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cifras-t, .cifras-t.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cifra-t b { font-size: 1.35rem; } }

.aviso-faltan { margin-top: 14px; padding: 10px 14px; background: var(--heno-tinte); border: 1px solid #EBD9AC; border-radius: var(--radio-2); font-size: .9rem; color: var(--heno-oscuro); }
.caja-grafica { margin-top: 16px; padding: 4px 0 0; }
.caja-cabeza { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; flex-wrap: wrap; }
.caja-cabeza h2 { font-size: 1.05rem; flex: 1; }
.cajas-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 960px) { .cajas-dos { grid-template-columns: 1fr; } }
.caja-tabla { background: var(--superficie); border: 1px solid #E3E8DE; border-radius: var(--radio-2); box-shadow: var(--sombra); overflow: hidden; }
.caja-tabla .caja-cabeza { border-bottom: 1px solid var(--niebla); }
.caja-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: .85rem; }
.caja-n { font: 700 .74rem var(--f-datos); padding: 2px 9px; border-radius: 999px; }
.caja-ico.verde, .caja-n.verde { background: var(--brote-tinte); color: var(--verde-longs); }
.caja-ico.rojo, .caja-n.rojo { background: var(--alerta-tinte); color: var(--alerta); }
.caja-ico.azul, .caja-n.azul { background: #E3EDF9; color: #2A5F9E; }
.caja-ico.heno, .caja-n.heno { background: var(--heno-tinte); color: var(--heno-oscuro); }
.caja-tabla table td { padding: 8px 12px; }
.caja-tabla .arete { min-width: 40px; height: 34px; font-size: .84rem; padding-top: 7px; }
.caja-tabla .arete::before { top: 3px; width: 6px; height: 6px; margin-left: -3px; }
.vacio-tabla { padding: 22px 18px; text-align: center; }
tr.clic { cursor: pointer; } tr.clic:hover { background: var(--verde-tinte); }
.puesto { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #EEF0EA; font: 700 .78rem var(--f-datos); color: var(--monte-suave); }
.puesto.p1 { background: #F6E3A8; color: #7A5600; } .puesto.p2 { background: #E4E7EC; color: #4A5260; } .puesto.p3 { background: #F2D2B8; color: #84461E; }
.rojo-txt { color: var(--alerta); font-weight: 600; }
.tabla-leche tr.incompleto td { background: #FCEFEA; }
.falta { color: var(--alerta); font-weight: 600; font-size: .84rem; }
.tabla-leche .arete { min-width: 40px; height: 34px; font-size: .84rem; padding-top: 7px; }
.tabla-leche .arete::before { top: 3px; width: 6px; height: 6px; margin-left: -3px; }
.grafica .barra-vacas { fill: #DCE6F2; }
.leyenda i.cuadro.vacas { background: #DCE6F2; }
.caja-grafica .grafica { padding-top: 0; }
.grafica .franja-ok { fill: var(--verde-tinte); }
.grafica .dif-verde { fill: var(--pasto); } .grafica .dif-amarillo { fill: var(--heno); }
.grafica .dif-rojo { fill: var(--alerta); } .grafica .dif-gris { fill: var(--niebla); }
.leyenda i.cuadro.ok { background: var(--verde-tinte); border: 1px solid var(--pasto); }
.leyenda i.cuadro.dif-amarillo { background: var(--heno); } .leyenda i.cuadro.dif-rojo { background: var(--alerta); } .leyenda i.cuadro.dif-gris { background: var(--niebla); }
.aviso-faltan.rojo { background: var(--alerta-tinte); border-color: #EFCDBE; color: var(--alerta); }
.grafica text.fuera { font-weight: 700; fill: var(--alerta); }

/* ── Reproducción: calendario ──────────────────────────── */
.cal-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-barra h2 { font-size: 1.25rem; min-width: 170px; text-align: center; }
.cal-leyenda { margin-left: auto; padding: 0; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cab { padding: 8px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--monte-suave); background: #F8FAF5; border-bottom: 1px solid var(--niebla); }
.cal-dia { min-height: 108px; padding: 6px; border-right: 1px solid #EDF0E9; border-bottom: 1px solid #EDF0E9; display: flex; flex-direction: column; gap: 3px; }
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia.vacio-dia { background: #FAFBF8; }
.cal-dia.pasado { background: #FBFCFA; }
.cal-dia.hoy { background: var(--brote-tinte); box-shadow: inset 0 0 0 2px var(--pasto); }
.cal-n { font: 600 .82rem var(--f-datos); color: var(--monte-suave); }
.cal-dia.hoy .cal-n { color: var(--verde-longs); }
.cal-ev { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: 2px 6px; font: 500 .74rem var(--f-texto); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev b { font-family: var(--f-datos); }
.cal-ev.verde, .cuadro.cal-verde { background: var(--brote); color: var(--verde-longs); }
.cal-ev.heno, .cuadro.cal-heno { background: var(--heno-tinte); color: var(--heno-oscuro); }
.cal-ev.azul, .cuadro.cal-azul { background: #DCE8F7; color: #24578F; }
.cal-ev.rojo, .cuadro.cal-rojo { background: var(--alerta-tinte); color: var(--alerta); }
.cal-ev.morado, .cuadro.cal-morado { background: #E8E0F5; color: #5B3F94; }
.cal-ev.hecho, .cuadro.cal-hecho { background: #EEF0EA; color: var(--monte-suave); }
.leyenda i.cuadro[class*="cal-"] { width: 12px; height: 12px; border: 0; border-radius: 3px; }
.cal-mas { font-size: .72rem; color: var(--monte-suave); padding-left: 4px; }
@media (max-width: 760px) {
  .cal-dia { min-height: 64px; padding: 3px; }
  .cal-ev { font-size: 0; padding: 0; height: 6px; }
  .cal-ev b { display: none; }
  .cal-leyenda { margin-left: 0; }
}

/* ── Potreros ──────────────────────────────────────────── */
.grupos-hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.grupo-hoy { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radio-2); color: var(--on-verde);
  background: var(--verde-longs); box-shadow: var(--sombra); }
.grupo-hoy.horro { background: #5E4A12; }
.grupo-hoy.terneros { background: var(--pasto); }
.grupo-hoy.siguiente { background: var(--superficie); color: var(--monte); border: 2px dashed var(--pasto); box-shadow: none; }
.gh-nombre { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .85; }
.gh-lote { font: 700 1.6rem/1.15 var(--f-display); }
.gh-det { font-size: .82rem; opacity: .9; }
.potreros-leyenda { padding: 0 0 10px; }
.leyenda i.cuadro.pt-verde { background: var(--verde-longs); } .leyenda i.cuadro.pt-azul { background: #DCE8F7; border: 1px solid #8CB2E0; }
.leyenda i.cuadro.pt-heno { background: var(--heno-tinte); border: 1px solid var(--heno); } .leyenda i.cuadro.pt-gris { background: #F2F4EF; border: 1px solid var(--niebla); }
.leyenda i.cuadro.pt-sigue { background: repeating-linear-gradient(-60deg, var(--brote) 0 4px, var(--brote-tinte) 4px 8px); border: 1px solid var(--verde-longs); }
.potreros-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.lote-v2 { display: flex; flex-direction: column; gap: 6px; min-height: 118px; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--monte);
  background: var(--superficie); border: 1px solid #E3E8DE; border-radius: var(--radio-2); box-shadow: var(--sombra); }
.lote-v2:hover { box-shadow: var(--sombra-alta); }
.lv-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lv-num { font: 700 1.7rem/1 var(--f-display); }
.lv-estado { font-size: .74rem; font-weight: 700; }
.lv-det { font-size: .86rem; }
.lv-pasto { font-size: .76rem; color: var(--monte-suave); margin-top: auto; }
.lote-v2.pt-verde { background: var(--verde-longs); border-color: var(--verde-longs); color: var(--on-verde); }
.lote-v2.pt-verde .lv-estado, .lote-v2.pt-verde .lv-pasto { color: var(--on-verde); opacity: .85; }
.lote-v2.pt-azul { background: #EEF4FC; border-color: #BFD5EF; } .lote-v2.pt-azul .lv-estado { color: #24578F; }
.lote-v2.pt-heno { background: var(--heno-tinte); border-color: #EBCF8F; } .lote-v2.pt-heno .lv-estado { color: var(--heno-oscuro); }
.lote-v2.pt-gris .lv-estado { color: var(--monte-suave); }
.lote-v2.sigue { border: 2px solid var(--verde-longs); background: repeating-linear-gradient(-60deg, var(--brote-tinte) 0 10px, #F6F9EA 10px 20px); }
.descanso-barra { position: relative; height: 6px; border-radius: 999px; background: #E7EBE2; }
.descanso-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--pasto); }
.descanso-barra b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--monte); opacity: .6; }
tr.igual td { color: var(--monte-suave); }
.barras-lluvia { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding: 10px 18px 0; }
.barras-lluvia .bl { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.barras-lluvia .bl i { display: block; width: 100%; min-height: 1px; border-radius: 3px 3px 0 0; background: #6FA3DB; }
.barras-lluvia .bl small { position: absolute; top: -2px; font: 600 .66rem var(--f-datos); color: var(--monte-suave); }
.barras-lluvia.meses { justify-content: center; }
.barras-lluvia.meses .bl { max-width: 56px; }
.barras-lluvia.meses .bl small { position: static; order: -1; margin-bottom: 2px; }
.barras-lluvia .bl em { font-style: normal; font-size: .7rem; color: var(--monte-suave); margin-top: 4px; }
.bl-ejes { display: flex; justify-content: space-between; padding: 6px 18px 14px; font-size: .74rem; color: var(--monte-suave); }

/* ── Finanzas ──────────────────────────────────────────── */
.fin-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fin-boton { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border-radius: 10px;
  font-weight: 700; letter-spacing: .02em; text-decoration: none; color: #fff; }
.fin-boton span { font-size: 1.25rem; line-height: 1; }
.fin-boton.ingreso { background: var(--verde-longs); }
.fin-boton.gasto { background: var(--alerta); }
.fin-boton:hover { filter: brightness(1.08); }
.fin-boton:focus-visible { outline: 3px solid var(--pasto); outline-offset: 2px; }
.fin-columnas { margin-top: 16px; }
.fin-ultimos { padding: 16px 18px; }
.fin-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fin-tit a { font-size: .86rem; font-weight: 600; color: var(--verde-longs); }
.fin-renglon { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--niebla); }
.fin-tit + .fin-renglon { border-top: 0; }
.fin-flecha { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; }
.fin-flecha.ingreso { background: #E3F1E7; color: var(--verde-longs); }
.fin-flecha.gasto { background: #F6E4DC; color: var(--alerta); }
.fin-que { min-width: 0; }
.fin-que b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-que small { display: block; color: var(--monte-suave); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-valor { display: grid; justify-items: end; gap: 3px; }
.fin-valor b.ingreso { color: var(--verde-longs); }
.fin-valor b.gasto { color: var(--alerta); }
.fin-valor .chip { font-size: .7rem; }
.grafica .fin-l-precio { stroke: var(--verde-longs); fill: var(--verde-longs); stroke-width: 2.5; }
.grafica path.fin-l-precio, .grafica path.fin-l-costo { fill: none; }
.grafica .fin-l-costo { stroke: var(--alerta); fill: var(--alerta); stroke-width: 2.5; }
.leyenda i.cuadro.fin-l-precio { background: var(--verde-longs); }
.leyenda i.cuadro.fin-l-costo { background: var(--alerta); }
.boton.peligro { background: var(--alerta); border-color: var(--alerta); }
.aviso-ok { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: #E3F1E7; color: var(--monte); font-size: .92rem; }
.enc-acciones input.periodo { min-width: 190px; }
@media (max-width: 760px) {
  .fin-botones { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fin-boton { padding: 11px 8px; font-size: .9rem; }
  .fin-columnas { grid-template-columns: 1fr; }
}
.cifra-t b { white-space: nowrap; }
@media (max-width: 760px) { .cifra-t b { font-size: clamp(1.05rem, 5vw, 1.5rem); } }

/* ── Hoy ───────────────────────────────────────────────── */
.linea-negocio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 12px 16px; margin-bottom: 16px;
  background: var(--superficie); border: 1px solid var(--niebla); border-left: 4px solid var(--verde-longs); border-radius: 10px;
  color: var(--monte); text-decoration: none; font-size: .93rem; }
.linea-negocio .baja { color: var(--alerta); font-weight: 600; }
.linea-negocio .ir { margin-left: auto; color: var(--verde-longs); font-weight: 600; }
.linea-negocio:hover { border-color: var(--pasto); }
.estados { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.estado-t { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--niebla);
  border-top: 4px solid var(--niebla); border-radius: 10px; color: var(--monte); text-decoration: none; }
a.estado-t:hover { border-color: var(--pasto); }
.estado-t .et-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.estado-t .et-t { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--monte-suave); }
.estado-t .et-luz { font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.estado-t .et-luz:empty { display: none; }
.estado-t b { font: 600 1.45rem/1.2 var(--f-datos); font-variant-numeric: tabular-nums; }
.estado-t small { color: var(--monte-suave); font-size: .8rem; line-height: 1.35; }
.estado-t.ok { border-top-color: var(--verde-longs); } .estado-t.ok .et-luz { background: #E3F1E7; color: var(--verde-longs); }
.estado-t.falta { border-top-color: var(--alerta); } .estado-t.falta .et-luz { background: #F6E4DC; color: var(--alerta); } .estado-t.falta b { color: var(--alerta); }
.estado-t.espera { border-top-color: var(--heno); } .estado-t.espera .et-luz { background: var(--heno-tinte); color: var(--heno-texto); }
.estado-t.alerta { border-top-color: var(--alerta); } .estado-t.alerta .et-luz { background: #F6E4DC; color: var(--alerta); }
.estado-t.info { border-top-color: #3B7BC8; }
.cajas-hoy { margin-top: 0; }
.caja-hoy { padding: 16px 18px; }
.caja-hoy h2 { font-size: 1.05rem; margin-bottom: 10px; }
.caja-hoy .lista li { padding-left: 0; padding-right: 0; }

/* ── Análisis de la finca ──────────────────────────────── */
.cajas-mod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.caja-mod { padding: 16px 18px; }
.caja-mod h2 { font-size: 1.05rem; }
.caja-mod .grafica { border: 0; padding: 0; box-shadow: none; }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 6px; }
.mini { display: grid; gap: 2px; }
.mini b { font: 600 1.35rem/1.15 var(--f-datos); font-variant-numeric: tabular-nums; }
.mini span { font-size: .82rem; font-weight: 600; }
.mini small { font-size: .76rem; color: var(--monte-suave); }
@media (max-width: 760px) {
  .cajas-mod { grid-template-columns: 1fr; }
  .estados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estado-t b { font-size: 1.15rem; }
  .linea-negocio .ir { margin-left: 0; }
}
.estado-t .et-lista { display: grid; gap: 2px; font: 600 .98rem/1.35 var(--f-texto); }
.estado-t .et-lista span { display: flex; justify-content: space-between; gap: 8px; }
.estado-t .et-lista em { font-style: normal; font-family: var(--f-datos); font-weight: 600; }
.caja-mod.ancha { grid-column: 1 / -1; }
.minis.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .minis.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .estado-t.grupos { grid-column: 1 / -1; } }
.linea-negocio .ln-t { color: var(--monte-suave); }
.linea-negocio .ln-nota { flex-basis: 100%; color: var(--monte-suave); font-size: .8rem; }

/* ── Ayuda ─────────────────────────────────────────────── */
.ay-general { padding: 16px 20px; margin-bottom: 16px; }
.ay-general h2 { font-size: 1.05rem; margin-bottom: 8px; }
.ay-general ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .93rem; }
.ay-sub { font-size: 1.05rem; margin: 24px 0 10px; }
.ay-persona { margin-bottom: 12px; padding: 0; }
.ay-persona > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.ay-persona > summary::-webkit-details-marker { display: none; }
.ay-persona > summary::after { content: '›'; margin-left: auto; font-size: 1.3rem; color: var(--monte-suave); transition: transform .15s; }
.ay-persona[open] > summary::after { transform: rotate(90deg); }
.ay-persona > summary b { display: block; font-size: 1.05rem; }
.ay-persona > summary small { display: block; color: var(--monte-suave); font-size: .84rem; }
.ay-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-longs); color: var(--on-verde); font-weight: 700; }
.ay-tareas { border-top: 1px solid var(--niebla); }
.ay-tarea { padding: 14px 18px; border-bottom: 1px solid var(--niebla); display: grid; gap: 6px; }
.ay-tarea:last-child { border-bottom: 0; }
.ay-tarea p { margin: 0; font-size: .93rem; }
.ay-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ay-cab h3 { font-size: .98rem; margin: 0; }
.ay-cuando { font-size: .8rem; font-weight: 600; color: var(--heno-texto); }
.ay-ejemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ay-et { font-size: .78rem; color: var(--monte-suave); }
.ay-ej { quotes: none; display: inline-block; padding: 5px 11px; border-radius: 14px 14px 14px 4px; background: #E3F1E7; color: var(--monte); font-size: .86rem; }
.ay-ej.archivo { background: var(--heno-tinte); font-style: italic; }
.ay-faq { display: grid; gap: 8px; }
.ay-faq details { padding: 0; }
.ay-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; font-weight: 600; }
.ay-faq details p { margin: 0; padding: 0 18px 16px; font-size: .93rem; line-height: 1.5; }
.ay-buscar { min-width: 260px; }
@media print {
  .lateral, .barra, .enc-acciones, .miga, header { display: none !important; }
  .ay-persona { break-inside: avoid; }
}