/* ==========================================================================
   kr0tal - estilos base (mobile first)
   Se usa en el campo: tema claro de alto contraste (legible al sol), zonas
   tactiles de 48px como minimo y un unico color de acento (verde pasto).
   ========================================================================== */

:root {
  /* Superficies y texto (una sola familia de grises calidos) */
  --bg: #f4f3ee;
  --surface: #ffffff;
  --surface-2: #ebe9e1;
  --text: #1d1c19;
  --text-2: #5c5950;
  --border: #dcd8cd;

  /* Acento unico */
  --accent: #3e6b3c;
  --accent-strong: #2f5530;
  --accent-soft: #e2eadb;
  --on-accent: #f7f8f3;

  --danger: #a3301d;
  --danger-soft: #f6e3de;
  --ok: #2f6a3a;

  /* Tonos apagados por grupo de suceso (iconos de Registrar y del
     historial): ayudan a encontrar el grupo sin competir con el acento */
  --grupo-reproduccion: #82466f;
  --grupo-reproduccion-soft: #f2e8ee;
  --grupo-manejo: #37597a;
  --grupo-manejo-soft: #e5ecf1;
  --grupo-altas: #7a5a1f;
  --grupo-altas-soft: #f3ecd9;

  /* Series de los graficos: la principal es el acento; la de comparacion
     (el ano anterior), un gris calido apagado con 3:1 sobre la superficie */
  --serie-principal: var(--accent);
  --serie-anterior: #949083;
  /* Franja de referencia (curva de crecimiento): un fondo, no una serie;
     se distingue de la rejilla y deja ver la linea encima */
  --serie-referencia: #d9d1ba;
  /* Linea de vida reproductiva: marcas de reproduccion y partos (mas
     saturados que --grupo-reproduccion y --accent, para pasar el minimo de
     croma y de separacion con daltonismo del skill dataviz) y un gris para
     lo que no cambia el estado (falso celo, DG incierto) */
  --serie-reproduccion: #93387a;
  --serie-parto: #3a7a3e;
  --serie-sin-efecto: #949083;
  /* Evolucion del censo: una serie por categoria, apiladas en este orden
     (validadas con el script de dataviz: croma, separacion con daltonismo
     entre vecinas y contraste 3:1 sobre la superficie) */
  --serie-vaca: #3a7a3e;
  --serie-novilla: #93387a;
  --serie-cebo: #c27c0e;
  --serie-ternero: #3f7fb8;
  --serie-toro: #a4502a;
  --rejilla: #ebe8df;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(58, 52, 36, 0.06), 0 10px 28px -14px rgba(58, 52, 36, 0.22);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tap: 48px;
  --gutter: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Reserva siempre el hueco de la barra de scroll (en escritorio): al
     bloquear el fondo con un dialogo abierto, la pantalla no salta. */
  scrollbar-gutter: stable;
}

/* Con un dialogo abierto la pantalla de detras no se desplaza (rueda, dedo
   ni teclado) y el gesto no acaba en "tirar para recargar" de Android. */
html:has(dialog:modal) {
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(62, 107, 60, 0.09), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.sprite {
  display: none;
}

.icono {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Vistas
   -------------------------------------------------------------------------- */

.vista {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 20px) var(--gutter) calc(env(safe-area-inset-bottom) + 32px);
  animation: entrar 260ms var(--ease) both;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.etiqueta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Componentes: tarjeta, campos, botones
   -------------------------------------------------------------------------- */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.campo {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.campo label {
  font-size: 15px;
  font-weight: 600;
}

.campo input,
.campo select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 160ms var(--ease);
}

.campo input:focus,
.campo select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.campo input[aria-invalid='true'] {
  border-color: var(--danger);
}

.input-con-boton {
  position: relative;
}

.input-con-boton input {
  padding-right: 56px;
}

.input-con-boton .boton-icono {
  position: absolute;
  top: 2px;
  right: 2px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms var(--ease), background-color 160ms var(--ease);
}

.boton:active,
.acceso:active,
.boton-icono:active {
  transform: scale(0.98);
}

.boton:disabled {
  opacity: 0.55;
  cursor: progress;
}

.boton-primario {
  background: var(--accent);
  color: var(--on-accent);
}

.boton-primario:hover {
  background: var(--accent-strong);
}

.boton-secundario {
  background: var(--surface-2);
  color: var(--text);
}

.boton-peligro {
  background: var(--danger);
  color: #fff;
}

.boton-bloque {
  width: 100%;
}

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.boton-icono[aria-pressed='true'] {
  color: var(--accent);
}

.boton-icono-borde {
  border: 1px solid var(--border);
  background: var(--surface);
}

.error-form {
  display: flex;
  gap: 8px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 15px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.vista-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  gap: 28px;
}

.login-marca {
  display: flex;
  align-items: center;
  gap: 14px;
}

.marca-icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
}

.marca-icono .icono {
  width: 32px;
  height: 32px;
}

.marca-nombre {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.marca-sub {
  color: var(--text-2);
  font-size: 15px;
}

.login-form {
  padding: 24px 20px 20px;
}

.titulo-form {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Inicio
   -------------------------------------------------------------------------- */

.cabecera-inicio {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 12px;
  margin-bottom: 20px;
}

.cabecera-inicio-titulo {
  flex: 1;
  min-width: 0;
}

/* En movil, el buscador baja a su propia fila, a todo el ancho */
.inicio-buscar {
  order: 3;
  flex-basis: 100%;
}

.inicio-buscar-mensaje {
  margin-top: 8px;
  color: var(--danger);
  font-size: 15px;
  font-weight: 500;
}

.inicio-buscar-mensaje:empty {
  display: none;
}

.inicio-buscar input[aria-invalid='true'] {
  border-color: var(--danger);
}

.titular {
  margin-top: 2px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.rega {
  margin-top: 4px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Cuadricula asimetrica: la accion mas frecuente (Registrar) ocupa todo el
   ancho arriba, Seguimiento debajo con sus listas mas urgentes y, al final,
   Animales alta a la izquierda con Graficos y Configuracion a la derecha. */
.accesos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.acceso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

.acceso:hover {
  border-color: var(--accent);
}

.acceso-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.acceso-titulo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.acceso-sub {
  color: var(--text-2);
  font-size: 14px;
}

.acceso-principal {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
}

.acceso-principal:hover {
  border-color: transparent;
  background: var(--accent-strong);
}

.acceso-principal .acceso-icono {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-accent);
}

.acceso-principal .acceso-icono .icono {
  width: 28px;
  height: 28px;
  stroke-width: 2.25;
}

.acceso-principal .acceso-texto {
  display: grid;
  flex: 1;
}

.acceso-principal .acceso-titulo {
  font-size: 22px;
}

.acceso-principal .acceso-sub {
  color: rgba(247, 248, 243, 0.82);
}

.acceso-flecha {
  opacity: 0.8;
}

/* Acceso secundario en una fila (Ultimos registros): todo el ancho en
   movil, justo debajo de Registrar, al que acompana */
.acceso-fila {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 76px;
}

.acceso-fila .acceso-texto {
  display: grid;
  flex: 1;
  min-width: 0;
}

.acceso-fila .acceso-titulo {
  font-size: 17px;
}

/* Tarjetas con resumen (Seguimiento y Animales). El enlace de la cabecera
   se estira sobre toda la tarjeta y las filas, enlaces propios, quedan
   por encima: asi cada fila abre lo suyo y el resto de la tarjeta, la
   seccion (no se pueden anidar enlaces). */
.panel-inicio {
  position: relative;
  align-items: stretch;
  gap: 12px;
}

.panel-inicio:has(.panel-inicio-cabeza:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.panel-inicio-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.panel-inicio-cabeza:focus-visible {
  outline: none;
}

.panel-inicio-cabeza::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.panel-inicio .acceso-texto {
  display: grid;
  flex: 1;
  min-width: 0;
}

.panel-seguimiento {
  grid-column: 1 / -1;
}

.panel-animales {
  grid-row: span 2;
}

.panel-animales .panel-inicio-cabeza {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.panel-inicio-total {
  display: block;
  color: var(--text);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.panel-inicio-filas {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mientras carga la primera vez: un hueco que late */
.panel-inicio-filas:empty {
  min-height: 150px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: latido 1.2s ease-in-out infinite;
}

.fila-inicio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: background-color 160ms var(--ease), transform 140ms var(--ease);
}

.fila-inicio:hover {
  background: var(--surface-2);
}

.fila-inicio:active {
  transform: scale(0.99);
}

.fila-inicio-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grupo-reproduccion-soft);
  color: var(--grupo-reproduccion);
}

.fila-inicio-icono .icono {
  width: 22px;
  height: 22px;
}

.fila-inicio-icono-manejo {
  background: var(--grupo-manejo-soft);
  color: var(--grupo-manejo);
}

.fila-inicio-icono-sanidad {
  background: var(--danger-soft);
  color: var(--danger);
}

.fila-inicio-texto {
  display: grid;
  min-width: 0;
}

.fila-inicio-titulo {
  font-weight: 600;
  line-height: 1.3;
}

.fila-inicio-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
}

.fila-inicio-sub .icono {
  width: 16px;
  height: 16px;
}

.fila-inicio-desc {
  display: none;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.35;
}

.fila-inicio-cifra {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.fila-atrasada {
  background: var(--danger-soft);
}

.fila-atrasada:hover {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

.fila-atrasada .fila-inicio-cifra {
  color: var(--danger);
}

.fila-inicio-mas {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.fila-inicio-mas:hover {
  background: var(--accent-soft);
}

.fila-inicio-al-dia {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

/* Desglose del censo: nombre y cifra, y debajo una barra fina proporcional
   a la categoria mayor (un solo tono: solo compara magnitudes) */
.panel-animales .panel-inicio-filas {
  gap: 2px;
}

.fila-categoria {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  min-height: 48px;
  padding: 6px 8px;
  background: transparent;
}

.fila-categoria .fila-inicio-titulo {
  font-size: 15px;
  font-weight: 500;
}

.fila-categoria .fila-inicio-cifra {
  font-size: 18px;
}

.fila-categoria-barra {
  position: relative;
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface-2);
}

.fila-categoria-barra::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(var(--proporcion, 0));
  transform-origin: left;
}

.fila-inicio-vacia .fila-inicio-titulo,
.fila-inicio-vacia .fila-inicio-cifra {
  color: var(--text-2);
}

@media (min-width: 760px) {
  .vista-inicio {
    max-width: 1120px;
  }

  .cabecera-inicio {
    align-items: center;
    margin-bottom: 24px;
  }

  .inicio-buscar {
    order: 0;
    flex: 0 1 420px;
  }
}

/* Escritorio: tres columnas; Ultimos registros junto a Registrar,
   Seguimiento y Animales altas, y Graficos y Configuracion apiladas a la
   derecha */
@media (min-width: 960px) {
  .accesos {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.8fr);
    grid-template-areas:
      'registrar registrar registros'
      'seguimiento animales graficos'
      'seguimiento animales configuracion';
    gap: 16px;
  }

  .acceso-principal {
    grid-area: registrar;
  }

  .acceso-registros {
    grid-area: registros;
  }

  .fila-inicio-desc {
    display: block;
  }

  .panel-seguimiento {
    grid-area: seguimiento;
  }

  .panel-animales {
    grid-area: animales;
  }

  .acceso-graficos {
    grid-area: graficos;
  }

  .acceso[href='#/configuracion'] {
    grid-area: configuracion;
  }
}

/* --------------------------------------------------------------------------
   Avisos (toasts) y dialogo de confirmacion
   -------------------------------------------------------------------------- */

.avisos {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  z-index: 100;
  display: grid;
  gap: 8px;
  max-width: 528px;
  margin: 0 auto;
  pointer-events: none;
}

.aviso {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--shadow);
  animation: entrar 220ms var(--ease) both;
}

.aviso-error {
  background: var(--danger);
  color: #fff;
}

.aviso-ok {
  background: var(--ok);
  color: #fff;
}

.aviso.saliendo {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}

.dialogo {
  width: min(calc(100% - 2 * var(--gutter)), 420px);
  padding: 22px 20px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  /* Al llegar arriba o abajo del formulario el gesto no pasa a la pagina. */
  overscroll-behavior: contain;
}

.dialogo::backdrop {
  background: rgba(29, 28, 25, 0.5);
}

.dialogo-titulo {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
}

.dialogo-texto {
  color: var(--text-2);
}

.dialogo-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.enlace-accion {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Vistas de listado: mas anchas en escritorio para aprovechar el espacio
   -------------------------------------------------------------------------- */

.vista-ancha {
  max-width: 1120px;
}

.barra-vista {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.barra-vista h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.barra-vista-sub {
  color: var(--text-2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

a.boton-icono {
  color: var(--text);
}

/* Buscador y filtros: quedan fijos arriba al desplazar la lista, para poder
   refinar sin volver al principio. */
.panel-filtros {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--gutter));
  padding: 8px var(--gutter) 12px;
  background: rgba(244, 243, 238, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.fila-buscador {
  display: flex;
  gap: 8px;
}

.boton-filtros {
  flex-shrink: 0;
  padding: 0 14px;
}

.boton-filtros[aria-expanded='true'] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.contador-filtros {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.buscador {
  position: relative;
  flex: 1;
  min-width: 0;
}

.buscador input {
  width: 100%;
  min-height: 52px;
  padding: 12px 52px 12px 46px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 17px;
}

.buscador input::-webkit-search-cancel-button {
  display: none;
}

.buscador input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.buscador-icono {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--text-2);
  pointer-events: none;
}

.buscador .boton-icono {
  position: absolute;
  top: 2px;
  right: 2px;
}

/* En movil, plegados tras el boton "Filtros" */
.filtros {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.filtros.abiertos {
  display: grid;
}

.filtro {
  display: grid;
  gap: 4px;
}

.filtro label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.filtro select {
  width: 100%;
  min-height: 48px;
  padding: 10px 36px 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5950' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
  font-size: 16px;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}

.filtro select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Filtro fijado por el tipo de suceso (reproduccion: solo hembras) */
.filtro select:disabled {
  border-style: dashed;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: not-allowed;
}

#animales-limpiar-filtros {
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Tarjetas de animal
   -------------------------------------------------------------------------- */

.lista-animales {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.tarjeta-animal {
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 14px 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

.tarjeta-animal:hover {
  border-color: var(--accent);
}

.tarjeta-animal:active {
  transform: scale(0.985);
}

.sexo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

/* Tono apagado por sexo; el icono ya distingue la forma, el color solo
   ayuda a recorrer la lista con la vista. */
.sexo-hembra {
  background: #f2e8ee;
  color: #82466f;
}

.sexo-macho {
  background: #e5ecf1;
  color: #37597a;
}

.tarjeta-animal-cuerpo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tarjeta-animal-id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.numero {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.crotal {
  color: var(--text-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.tarjeta-animal-detalle {
  font-size: 15px;
  font-weight: 500;
}

.tarjeta-animal-pie {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tarjeta-animal-raza {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flecha-tarjeta {
  color: var(--accent);
}

.insignia {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.insignia-gestante {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.insignia-cubierta {
  background: #f5ebd6;
  color: #74501a;
}

.insignia-baja {
  background: var(--danger-soft);
  color: var(--danger);
}

.tarjeta-animal.cargando {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: center;
  animation: latido 1.2s ease-in-out infinite;
}

.tarjeta-animal.cargando span {
  height: 14px;
  border-radius: 6px;
  background: var(--surface-2);
}

.tarjeta-animal.cargando span:first-child {
  width: 55%;
  height: 18px;
}

@keyframes latido {
  50% {
    opacity: 0.55;
  }
}

.vacio {
  grid-column: 1 / -1;
  padding: 48px 16px;
  text-align: center;
}

.vacio-titulo {
  font-size: 18px;
  font-weight: 700;
}

.vacio-texto {
  margin-top: 4px;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   Ficha del animal
   -------------------------------------------------------------------------- */

.barra-ficha {
  justify-content: space-between;
}

.barra-ficha-titulo {
  flex: 1;
  min-width: 0;
  color: var(--text-2);
  font-weight: 600;
}

/* Con el lapiz y el "+" no caben todos los botones a su tamano en un movil
   estrecho: cede el titulo (ya se ve que es una ficha), no los botones. */
.barra-ficha .boton-icono {
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .barra-ficha-titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.ficha-navegacion {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ficha-navegacion .boton-icono:disabled {
  opacity: 0.35;
  cursor: default;
}

.ficha-posicion {
  min-width: 64px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ficha-cuerpo {
  display: grid;
  gap: 12px;
}

.ficha-cabecera {
  padding: 20px 18px 8px;
}

.ficha-id {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sexo-grande {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.sexo-grande .icono {
  width: 30px;
  height: 30px;
}

.ficha-id-textos {
  flex: 1;
  min-width: 0;
}

.ficha-numero {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ficha-crotal {
  margin-top: 6px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ficha-nombre {
  margin-top: 2px;
  font-weight: 600;
}

.ficha-insignias {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.ficha-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0 0;
  border-top: 1px solid var(--border);
}

.dato {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dato:nth-child(odd) {
  padding-right: 12px;
}

.dato-ancho {
  grid-column: 1 / -1;
}

.dato:last-child,
.dato:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

.dato dt {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.dato dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.dato-extra {
  display: block;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}

.ficha-bloques {
  display: grid;
  gap: 12px;
  align-content: start;
}

.bloque {
  padding: 16px 16px 18px;
}

.bloque-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
}

.bloque-titulo .icono {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.bloque-valor {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.bloque-detalle {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 15px;
}

.bloque-vacio,
.bloque-texto {
  color: var(--text-2);
}

.bloque-texto {
  color: var(--text);
  white-space: pre-line;
}

/* El parto previsto es lo mas urgente de la ficha de una vaca: va primero y
   con el fondo del acento. */
.bloque-destacado {
  border-color: transparent;
  background: var(--accent-soft);
}

.bloque-destacado .bloque-titulo,
.bloque-destacado .bloque-detalle {
  color: var(--accent-strong);
}

/* De donde sale el parto previsto: secundario, debajo de la fecha. */
.bloque-motivo {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}

.bloque-motivo a {
  color: var(--accent-strong);
  font-weight: 600;
}

/* Datos productivos de la vaca: cifras sueltas en rejilla, sin grafico
   (cada una se lee por si sola). El texto va en tinta normal: nada se
   distingue por color. */
.indicadores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 0;
}

.indicador dt {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.indicador dd {
  margin: 2px 0 0;
}

.indicador-valor {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.indicador-detalle {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 14px;
}

.texto-alerta {
  color: var(--danger);
  font-weight: 600;
}

.progenitores {
  display: grid;
  gap: 8px;
}

.fila-progenitor {
  display: grid;
  grid-template-columns: 64px 1fr 24px;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: transform 140ms var(--ease), background-color 160ms var(--ease);
}

a.fila-progenitor:hover {
  background: var(--surface-2);
}

a.fila-progenitor:active {
  transform: scale(0.985);
}

a.fila-progenitor .icono {
  color: var(--accent);
}

.fila-progenitor-vacia {
  grid-template-columns: 64px 1fr;
  color: var(--text-2);
}

.fila-progenitor-etiqueta {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.fila-progenitor-texto {
  display: grid;
  min-width: 0;
}

.fila-progenitor-texto strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.fila-progenitor-texto span {
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lista-tratamientos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-tratamientos li {
  display: grid;
  padding: 10px 12px;
  border-left: 3px solid var(--border);
  border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  background: var(--bg);
}

.lista-tratamientos li.en-tratamiento {
  border-left-color: var(--danger);
}

.lista-tratamientos span {
  color: var(--text-2);
  font-size: 15px;
}

/* Historico de lugares de la ficha: plegado bajo el ultimo lugar. */
.historico-lugares {
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.historico-lugares summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  color: var(--accent-strong);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.historico-lugares summary::-webkit-details-marker {
  display: none;
}

.historico-lugares summary .icono {
  width: 18px;
  height: 18px;
  transition: transform 160ms var(--ease);
}

.historico-lugares[open] summary .icono {
  transform: rotate(90deg);
}

.lista-estancias {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-estancias li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--border);
  border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  background: var(--bg);
}

.lista-estancias li.estancia-actual {
  border-left-color: var(--accent);
}

.estancia-lugar {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.estancia-fechas {
  grid-column: 1;
  color: var(--text-2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.estancia-dias {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cargando {
  animation: latido 1.2s ease-in-out infinite;
}

.ficha-cabecera.cargando,
.bloque.cargando {
  display: grid;
  gap: 12px;
  min-height: 120px;
  align-content: center;
}

.ficha-cabecera.cargando span,
.bloque.cargando span {
  height: 14px;
  border-radius: 6px;
  background: var(--surface-2);
}

.ficha-cabecera.cargando span:first-child,
.bloque.cargando span:first-child {
  width: 45%;
  height: 22px;
}

@media (min-width: 600px) {
  .ficha-bloques {
    grid-template-columns: 1fr 1fr;
  }

  .bloque-destacado,
  .bloque-ancho {
    grid-column: 1 / -1;
  }

  .indicadores {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .ficha-cuerpo {
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 20px;
    align-items: start;
  }

  .ficha-cabecera {
    position: sticky;
    top: 24px;
  }

  .ficha-numero {
    font-size: 48px;
  }

  .ficha-bloques {
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   Genealogia
   En movil: el animal arriba y cada rama (padre, madre) apilada con sus dos
   abuelos debajo. En escritorio: arbol horizontal de tres columnas con
   lineas de union dibujadas con pseudo-elementos.
   -------------------------------------------------------------------------- */

.enlace-bloque {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin-top: 8px;
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: none;
}

.enlace-bloque:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enlace-bloque .icono {
  width: 20px;
  height: 20px;
}

.arbol {
  display: grid;
  gap: 16px;
}

.ramas {
  display: grid;
  gap: 20px;
}

.rama {
  display: grid;
  gap: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

.abuelos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.nodo {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

a.nodo:hover {
  border-color: var(--accent);
}

a.nodo:active {
  transform: scale(0.985);
}

.nodo-raiz {
  border: 2px solid var(--accent);
}

.nodo-rol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 4px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.nodo-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nodo-id strong {
  overflow: hidden;
  font-size: 20px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.sexo-mini {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.sexo-mini .icono {
  width: 18px;
  height: 18px;
}

.nodo-crotal,
.nodo-meta {
  overflow: hidden;
  color: var(--text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.nodo-crotal {
  font-size: 14px;
}

.nodo-meta {
  font-size: 13px;
}

.nodo-abuelo {
  padding: 12px;
}

.nodo-abuelo .nodo-id strong {
  font-size: 17px;
}

.nodo-vacio {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.nodo-desconocido {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 20px;
  font-weight: 700;
}

.arbol-cargando {
  min-height: 320px;
  border-radius: var(--radius);
  background: var(--surface-2);
}

@media (min-width: 760px) {
  .arbol {
    grid-template-columns: minmax(200px, 1fr) 2.4fr;
    align-items: center;
    gap: 0;
  }

  .ramas {
    position: relative;
    gap: 28px;
    padding-left: 40px;
  }

  /* Linea horizontal desde el animal y vertical que une padre y madre */
  .ramas::after,
  .abuelos::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    border-top: 2px solid var(--border);
  }

  .ramas::before,
  .abuelos::before {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 20px;
    border-left: 2px solid var(--border);
  }

  .rama {
    position: relative;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    padding-left: 0;
    border-left: 0;
  }

  .rama::before,
  .nodo-abuelo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    width: 20px;
    border-top: 2px solid var(--border);
  }

  .abuelos {
    position: relative;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 40px;
  }

  .nodo-abuelo {
    position: relative;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Mantenimiento: menu de catalogos, listados y dialogos de formulario
   -------------------------------------------------------------------------- */

.vista-media {
  max-width: 880px;
}

.barra-vista-titulo {
  min-width: 0;
}

.barra-vista-accion {
  margin-left: auto;
}

.boton-compacto {
  flex-shrink: 0;
  min-height: var(--tap);
  padding: 0 16px 0 12px;
}

.menu-mantenimiento,
.lista-catalogo {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Configuracion: filas agrupadas por para que se usa cada lista */
.grupos-config {
  display: grid;
  gap: 24px;
}

.grupo-config-titulo {
  margin: 0 0 10px 4px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fila-menu {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

.fila-menu:hover {
  border-color: var(--accent);
}

.fila-menu:active {
  transform: scale(0.985);
}

.fila-menu-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.fila-menu-texto {
  display: grid;
  min-width: 0;
}

.fila-menu-titulo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fila-menu-sub {
  color: var(--text-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Numero de activos: pastilla discreta antes de la flecha */
.fila-menu-cifra {
  min-width: 32px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.fila-menu-cifra:empty {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Seguimiento: una baldosa por lista con su contador, agrupadas como en
   Configuracion. Cada grupo lleva el tono de sus sucesos (reproduccion,
   sanidad o manejo); las de "Avisos" pasan al tono de peligro cuando
   tienen algun animal.
   -------------------------------------------------------------------------- */

.grupos-seguimiento {
  display: grid;
  gap: 24px;
}

.baldosas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.baldosa {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 150px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

/* En movil, la ultima de un grupo impar ocupa la fila en vez de quedar sola */
.baldosa:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 0;
}

.baldosa:hover {
  border-color: var(--accent);
}

.baldosa:active {
  transform: scale(0.985);
}

.baldosa-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.baldosa-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grupo-reproduccion-soft);
  color: var(--grupo-reproduccion);
}

.baldosa-icono .icono {
  width: 22px;
  height: 22px;
}

.grupo-seguimiento-sanidad .baldosa-icono {
  background: var(--danger-soft);
  color: var(--danger);
}

.grupo-seguimiento-manejo .baldosa-icono {
  background: var(--grupo-manejo-soft);
  color: var(--grupo-manejo);
}

.baldosa-cifra {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.baldosa-titulo {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.baldosa-sub {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Sin animales: la cifra se apaga para que salten a la vista las que tienen */
.baldosa-vacia .baldosa-cifra {
  color: var(--text-2);
  font-weight: 600;
}

.grupo-seguimiento-aviso .baldosa:not(.baldosa-vacia) {
  border-color: var(--danger);
}

.grupo-seguimiento-aviso .baldosa:not(.baldosa-vacia) .baldosa-icono {
  background: var(--danger-soft);
  color: var(--danger);
}

.grupo-seguimiento-aviso .baldosa:not(.baldosa-vacia) .baldosa-cifra {
  color: var(--danger);
}

.baldosa.cargando {
  align-content: center;
  gap: 10px;
  box-shadow: none;
  animation: latido 1.2s ease-in-out infinite;
}

.baldosa.cargando span {
  height: 14px;
  border-radius: 6px;
  background: var(--surface-2);
}

.baldosa.cargando span:first-child {
  width: 40%;
  height: 30px;
}

.descripcion-lista {
  margin: -6px 0 12px;
  color: var(--text-2);
  font-size: 15px;
}

.descripcion-lista:empty {
  display: none;
}

/* Registrar un suceso sobre toda la lista de Seguimiento */
.acciones-lista {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.acciones-lista[hidden] {
  display: none;
}

.acciones-lista .boton {
  text-decoration: none;
}

.acciones-lista .icono {
  width: 20px;
  height: 20px;
}

@media (min-width: 760px) {
  .acciones-lista {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Calendario de partos (tarea 25): tira de meses, cuadricula de un mes y,
   debajo, la lista de ese mes con las tarjetas de Seguimiento. */
.calendario-seccion {
  margin-top: 24px;
}

.calendario-meses {
  margin-top: 8px;
}

.calendario-mes-vista {
  margin-top: 8px;
}

.calendario-mes-cabeza {
  display: grid;
  grid-template-columns: var(--tap) 1fr var(--tap);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.calendario-mes-cabeza .boton-icono {
  padding: 0;
}

.calendario-mes-cabeza .boton-icono:disabled {
  opacity: 0.45;
  cursor: default;
}

.calendario-mes-titulo {
  display: grid;
  min-width: 0;
  justify-items: center;
  text-align: center;
}

.calendario-mes-titulo h3 {
  font-size: 20px;
  font-weight: 700;
}

.calendario-mes-titulo span {
  color: var(--text-2);
  font-size: 13px;
}

.calendario-mes-titulo strong {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.calendario-tabla {
  width: 100%;
  table-layout: fixed;
  border-spacing: 3px;
}

.calendario-tabla th {
  height: 32px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.calendario-tabla td {
  height: 78px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  vertical-align: top;
}

.calendario-tabla td.calendario-dia-vacio {
  border-color: transparent;
  background: transparent;
}

.calendario-dia-contenido {
  display: flex;
  min-height: 70px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.calendario-dia-contenido time {
  min-width: 24px;
  min-height: 24px;
  padding: 1px 4px;
  border-radius: 50%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.calendario-fila-actual td.calendario-dia {
  background: var(--accent-soft);
}

.calendario-dia-hoy .calendario-dia-contenido time {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.calendario-etiqueta-actual {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}

.calendario-dia-eventos {
  display: grid;
  width: 100%;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendario-evento {
  display: block;
  min-width: 0;
  min-height: 36px;
  overflow: hidden;
  padding: 7px 2px;
  border-radius: 4px;
  background: var(--grupo-reproduccion-soft);
  color: var(--grupo-reproduccion);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendario-evento:hover {
  outline: 2px solid var(--grupo-reproduccion);
}

/* En movil la celda solo da para el numero; el nombre, en escritorio. */
.calendario-evento-nombre {
  display: none;
  font-weight: 500;
}

.calendario-mes-lista-titulo {
  margin-top: 20px;
  font-size: 17px;
  font-weight: 700;
}

@media (max-width: 420px) {
  .calendario-tabla {
    border-spacing: 2px;
  }

  .calendario-tabla td {
    height: 64px;
    padding: 2px;
  }

  .calendario-dia-contenido {
    min-height: 58px;
  }

  .calendario-tabla th {
    font-size: 11px;
  }

  .calendario-evento {
    min-height: 32px;
    padding: 6px 1px;
    font-size: 11px;
  }
}

@media (min-width: 760px) {
  .calendario-tabla td {
    height: 96px;
    padding: 4px;
  }

  .calendario-dia-contenido {
    min-height: 86px;
  }

  .calendario-evento {
    padding: 7px 6px;
    text-align: left;
  }

  .calendario-evento-nombre {
    display: inline;
  }
}

/* Tarjeta de Seguimiento con acciones propias de cada animal: el marco pasa
   al <li> y dentro van el enlace a la ficha y la fila de botones. */
.tarjeta-con-acciones {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 160ms var(--ease);
}

.tarjeta-con-acciones:hover {
  border-color: var(--accent);
}

.tarjeta-con-acciones .tarjeta-animal {
  flex: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tarjeta-con-acciones .tarjeta-animal:active {
  transform: none;
  background: var(--bg);
}

.acciones-tarjeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--surface-2);
}

/* Reparten el ancho de la fila: si no caben, el que baja ocupa toda la
   suya en vez de quedar suelto. */
.boton-tarjeta {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 14px 0 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 140ms var(--ease), background-color 160ms var(--ease);
}

.boton-tarjeta:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.boton-tarjeta:active {
  transform: scale(0.98);
}

.boton-tarjeta .icono {
  width: 18px;
  height: 18px;
}

/* Por que esta el animal en la lista de Seguimiento */
.tarjeta-animal-motivo {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--surface-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.tarjeta-animal-motivo .icono {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

.motivo-atrasado,
.motivo-atrasado .icono {
  color: var(--danger);
}

@media (min-width: 760px) {
  .grupos-seguimiento {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    align-items: start;
  }

  /* Los grupos de dos listas estiran sus baldosas para ocupar la fila */
  .baldosas {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .baldosa:last-child:nth-child(odd) {
    grid-column: auto;
    min-height: 150px;
  }
}

/* Interruptor "Ver desactivados" */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 8px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.interruptor input {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: var(--border);
  appearance: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}

.interruptor input::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(58, 52, 36, 0.25);
  transition: transform 200ms var(--ease);
}

.interruptor input:checked {
  background: var(--accent);
}

.interruptor input:checked::before {
  transform: translateX(18px);
}

/* Lugares: una tarjeta por lugar de primer nivel con sus sublugares */
.grupos-lugares {
  display: grid;
  gap: 12px;
  align-items: start;
}

.grupo-lugar {
  overflow: hidden;
}

.grupo-lugar.cargando {
  min-height: 132px;
  background: var(--surface-2);
  box-shadow: none;
}

.sublugares {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fila-lugar {
  display: grid;
  grid-template-columns: 40px 1fr auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}

.fila-lugar:hover {
  background: var(--bg);
}

.fila-lugar:active {
  background: var(--surface-2);
}

.fila-lugar-raiz {
  min-height: 72px;
  border-top: 0;
}

/* Sangria por nivel: la guia vertical dibuja la rama del arbol */
.fila-lugar[data-nivel='2'] {
  padding-left: 38px;
}

.fila-lugar[data-nivel='3'] {
  padding-left: 62px;
}

.fila-lugar-guia {
  justify-self: center;
  width: 14px;
  height: 22px;
  margin-top: -14px;
  border-bottom: 2px solid var(--border);
  border-left: 2px solid var(--border);
  border-bottom-left-radius: 6px;
}

.fila-lugar-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.fila-lugar-texto,
.tarjeta-raza-texto {
  display: grid;
  min-width: 0;
}

.fila-lugar-nombre,
.tarjeta-raza-nombre {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fila-lugar-raiz .fila-lugar-nombre {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fila-lugar-meta,
.tarjeta-raza-meta {
  color: var(--text-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.fila-lugar-editar {
  grid-column: 4;
  width: 20px;
  height: 20px;
  color: var(--text-2);
}

.inactivo .fila-lugar-nombre,
.inactivo .tarjeta-raza-nombre,
.inactivo .tarjeta-raza-cifra strong {
  color: var(--text-2);
}

.inactivo .fila-lugar-icono {
  background: var(--surface-2);
  color: var(--text-2);
}

.anadir-sublugar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px 0 22px;
  border: 0;
  border-top: 1px dashed var(--border);
  background: transparent;
  color: var(--accent-strong);
  font-weight: 600;
  cursor: pointer;
}

.anadir-sublugar:hover {
  background: var(--accent-soft);
}

.anadir-sublugar .icono {
  width: 20px;
  height: 20px;
}

/* Razas */
.tarjeta-raza {
  display: grid;
  grid-template-columns: 1fr auto auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 80px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

.tarjeta-raza:hover {
  border-color: var(--accent);
}

.tarjeta-raza:active {
  transform: scale(0.985);
}

.tarjeta-raza .fila-lugar-editar {
  grid-column: 4;
}

.tarjeta-raza .insignia {
  grid-column: 3;
}

.tarjeta-raza-nombre {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tarjeta-raza-cifra {
  display: grid;
  justify-items: end;
  grid-column: 2;
  line-height: 1.1;
}

.tarjeta-raza-cifra strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.tarjeta-raza-cifra span {
  color: var(--text-2);
  font-size: 13px;
}

/* Dialogos con formulario */
.dialogo-form {
  width: min(calc(100% - 2 * var(--gutter)), 460px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.dialogo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -8px -8px 14px 0;
}

.dialogo-cabecera .dialogo-titulo {
  margin: 0;
}

.campo select {
  padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5950' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}

.opcional {
  color: var(--text-2);
  font-weight: 500;
}

.vista-previa {
  margin: -6px 0 18px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-2);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.vista-previa strong {
  color: var(--text);
}

.segmentado {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.segmentado legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

.segmentado-opciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Ayuda bajo los botones (origen de la entrada). */
.segmentado > .ayuda-campo {
  margin: 8px 0 0;
}

/* El radio real queda invisible pero accesible; tamano minimo para que no
   desborde el dialogo (ocupa sitio aunque no se vea). */
.segmento input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.segmento span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}

.segmento input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.segmento input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.dialogo-extra {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.dialogo-nota {
  color: var(--text-2);
  font-size: 14px;
}

.dialogo-extra-botones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

/* Desactivar / Reactivar / Borrar: botones con borde, secundarios frente a
   Guardar pero claramente pulsables; borrar en el tono de peligro */
.boton-accion-dialogo {
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.boton-accion-dialogo:hover {
  border-color: var(--text-2);
  background: var(--surface-2);
}

.boton-accion-dialogo .icono {
  width: 20px;
  height: 20px;
  color: var(--text-2);
}

.boton-accion-reactivar {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.boton-accion-reactivar .icono {
  color: var(--accent);
}

.boton-accion-reactivar:hover {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}

.boton-accion-peligro {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: var(--danger-soft);
  color: var(--danger);
}

.boton-accion-peligro .icono {
  color: var(--danger);
}

.boton-accion-peligro:hover {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.boton-accion-dialogo:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Grupos de valores (patologias por tipo, listas simples): cabecera fija y
   filas editables, con el mismo esqueleto que los grupos de lugares */
.grupo-cabecera {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 14px;
}

.grupo-cabecera h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.grupo-vacio {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 15px;
}

.fila-valor {
  display: grid;
  grid-template-columns: 1fr auto 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px 10px 16px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}

.fila-valor:hover {
  background: var(--bg);
}

.fila-valor:active {
  background: var(--surface-2);
}

.fila-valor .fila-lugar-editar {
  grid-column: 3;
}

.inactivo.fila-valor .fila-lugar-nombre {
  color: var(--text-2);
}

/* Personas: la tarjeta no lleva cifra, asi que el texto ocupa su hueco */
.tarjeta-raza-texto:has(+ .fila-lugar-editar),
.tarjeta-raza-texto:has(+ .insignia) {
  grid-column: 1 / 3;
}

/* Filtro por rol: fila de chips con scroll horizontal en movil */
.chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--gutter)) 8px;
  padding: 2px var(--gutter) 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 140ms var(--ease);
}

.chip:active {
  transform: scale(0.97);
}

.chip[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.chip-cifra {
  color: var(--text-2);
  font-size: 14px;
}

.chip[aria-pressed='true'] .chip-cifra {
  color: var(--accent-strong);
}

/* Notificaciones (tarea 36): el fieldset que desactiva las preferencias
   mientras los avisos estan apagados, sin el marco del navegador */
.fieldset-limpio {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.fieldset-limpio:disabled .seccion-form-campos {
  opacity: 0.55;
}

#notif-estado {
  grid-column: 1 / -1;
}

.casillas.casillas-una {
  grid-template-columns: 1fr;
}

/* Casillas de varios valores (roles de una persona) */
.casillas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.casilla input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.casilla span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}

.casilla .icono {
  width: 20px;
  height: 20px;
  padding: 2px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  stroke-width: 2.5;
  color: transparent;
}

.casilla input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.casilla input:checked + span .icono {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.casilla input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.segmentado-2 {
  grid-template-columns: 1fr 1fr;
}

.segmento input:disabled + span {
  border-style: dashed;
  color: var(--text-2);
  cursor: not-allowed;
}

/* Campo numerico con unidad ("días") dentro del borde */
.input-sufijo {
  position: relative;
}

.campo .input-sufijo input {
  padding-right: 64px;
  font-variant-numeric: tabular-nums;
}

.input-sufijo span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--text-2);
  font-weight: 600;
  transform: translateY(-50%);
  pointer-events: none;
}

.ayuda-campo {
  color: var(--text-2);
  font-size: 14px;
}

.aviso-parentesco {
  padding: 10px 12px;
  border-left: 3px solid var(--danger);
  border-radius: 4px;
  background: var(--danger-soft);
  color: var(--danger);
}

@media (min-width: 760px) {
  .chips {
    flex-wrap: wrap;
    margin: 0 0 8px;
    padding: 2px 0 6px;
  }
}

@media (min-width: 760px) {
  .grupos-config {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    align-items: start;
  }

  .grupos-lugares,
  .lista-catalogo {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Explotacion: formulario por secciones con la accion de guardar siempre a
   mano (el formulario es largo en movil)
   -------------------------------------------------------------------------- */

.form-explotacion,
.grupos-parametros {
  display: grid;
  gap: 12px;
}

.seccion-form {
  overflow: hidden;
}

.seccion-form-campos {
  padding: 16px 16px 0;
  border-top: 1px solid var(--border);
}

/* En dos columnas, cada campo se pega arriba aunque el vecino sea mas alto */
.seccion-form-campos .campo {
  align-content: start;
}

/* Etiqueta y valor por defecto en la misma linea. El enlace "Volver a N"
   conserva su zona tactil de 44px con margen negativo para no mover el
   formulario al aparecer. */
.parametro-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
}

.parametro-defecto {
  color: var(--text-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.parametro-cabecera .enlace-accion {
  margin: -12px 0;
  font-size: 14px;
}

.barra-guardar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--gutter));
  padding: 12px var(--gutter) calc(env(safe-area-inset-bottom) + 12px);
  background: rgba(244, 243, 238, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.barra-guardar .error-form {
  margin: 0 0 10px;
}

@media (min-width: 760px) {
  .seccion-form-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    padding: 20px 20px 4px;
  }

  .barra-guardar {
    display: grid;
    justify-items: end;
    margin: 0;
    padding: 12px 0 16px;
  }

  .barra-guardar .error-form {
    justify-self: stretch;
  }

  .barra-guardar .boton {
    width: auto;
    min-width: 240px;
  }
}

/* --------------------------------------------------------------------------
   Registrar y sucesos: eleccion de tipo, seleccion de animales, formulario
   del suceso e historial de la ficha
   -------------------------------------------------------------------------- */

.boton-icono-acento,
a.boton-icono-acento {
  background: var(--accent);
  color: var(--on-accent);
}

.boton-icono-acento:hover {
  background: var(--accent-strong);
}

/* Paso 1: tipos agrupados como en la app anterior */
.pasos-tipo {
  display: grid;
  gap: 20px;
}

.grupo-tipos-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.tipos-suceso {
  display: grid;
  gap: 8px;
}

.tipo-suceso {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

/* Mismo icono y tono de grupo que en el historial de la ficha */
.tipo-suceso-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
}

.tipo-suceso-icono .icono {
  width: 22px;
  height: 22px;
}

a.tipo-suceso:hover {
  border-color: var(--accent);
}

.tipo-suceso:active {
  transform: scale(0.985);
}

/* Aun no construidos: se ven, pero apagados y en chips pequenos */
.tipos-pendientes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tipo-pendiente {
  border-style: dashed;
  background: transparent;
  color: var(--text-2);
  font-weight: 500;
}

/* Paso 2: seleccion de animales. El lugar, con su ruta completa, ocupa
   toda la fila en el movil. */
.filtros-registro {
  grid-template-columns: 1fr 1fr;
}

.filtros-registro .filtro:last-child {
  grid-column: 1 / -1;
}

.barra-seleccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin-top: 6px;
}

.barra-seleccion-texto {
  flex: 1;
  min-width: 150px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tarjeta-seleccion {
  position: relative;
  grid-template-columns: 44px 1fr 28px;
  cursor: pointer;
}

/* La casilla real queda invisible pero accesible; la marca la dibuja el
   cuadro de la derecha y el fondo de la tarjeta. */
.tarjeta-seleccion input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.marca-seleccion {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-radius: 8px;
  color: transparent;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}

.marca-seleccion .icono {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.tarjeta-seleccion:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tarjeta-seleccion input:checked ~ .marca-seleccion {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.tarjeta-seleccion:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

#registrar-paso-animales .barra-guardar {
  margin-top: 12px;
}

/* Paso 3: resumen de lo elegido y formulario */
.form-registrar {
  display: grid;
  gap: 12px;
}

.resumen-registro {
  padding: 14px 16px 16px;
}

.resumen-registro-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: -8px 0 4px;
}

.resumen-registro-titulo {
  font-weight: 700;
}

.chips-animales {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-animal {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chip-animal-mas {
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 600;
}

.campo textarea {
  width: 100%;
  min-height: 112px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  resize: vertical;
  transition: border-color 160ms var(--ease);
}

.campo textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cargando-campos {
  height: 220px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  animation: latido 1.2s ease-in-out infinite;
}

/* Paso de terneros del parto: una tarjeta por ternero */
.resumen-parto {
  color: var(--text-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lista-terneros {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ternero {
  overflow: hidden;
}

.ternero-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 4px 16px;
}

.ternero-titulo {
  font-size: 17px;
}

/* Una sola columna tambien en escritorio: la tarjeta ya es estrecha */
.ternero .ternero-campos {
  display: block;
}

.terneros-ninguno {
  padding: 14px 16px;
  color: var(--text-2);
}

.boton-anadir-ternero {
  justify-self: start;
  border: 1.5px dashed var(--border);
  background: transparent;
}

.boton-anadir-ternero:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* Crotal: "ES" fijo delante y solo las cifras en el campo */
.input-prefijo {
  position: relative;
}

.input-prefijo span {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--text-2);
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}

.campo .input-prefijo input {
  padding-left: 46px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.segmento-sexo span {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.segmento-sexo .icono {
  width: 20px;
  height: 20px;
}

.casilla input:disabled + span {
  border-style: dashed;
  color: var(--text-2);
  cursor: not-allowed;
}

/* Terneros en el detalle de un parto, con enlace a su ficha */
.lista-terneros-parto {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.enlace-ternero {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.enlace-ternero:hover {
  background: var(--accent-soft);
}

.enlace-ternero-crotal {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 15px;
  text-overflow: ellipsis;
}

/* Entrada por compra: los datos del animal que se da de alta van juntos en
   un recuadro, separados de los de la compra. */
.animal-entrada {
  min-width: 0;
  margin: 0 0 18px;
  padding: 12px 14px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.animal-entrada legend {
  padding: 0 6px;
  margin-left: -6px;
  font-size: 15px;
  font-weight: 600;
}

@media (min-width: 760px) {
  .animal-entrada-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    align-items: start;
  }
}

/* Gravedad de la enfermedad: cuatro opciones en una fila (y el tipo del
   protocolo, con textos largos: misma letra compacta) */
.segmentado-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.segmentado-4 .segmento span,
.segmentado-compacto .segmento span {
  padding: 0 2px;
  font-size: 15px;
}

/* Tratamiento de sanidad: una tarjeta por medicamento, en el tono de fondo
   como los datos del animal de la entrada, y el boton de anadir debajo. */
.tratamiento {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.tratamiento legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

.tratamiento > .ayuda-campo {
  margin: 0;
}

/* Pauta habitual del medicamento: campos sueltos, el gap ya los separa */
.tratamiento > .campo {
  margin-bottom: 0;
}

.lista-lineas {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-lineas:empty {
  display: none;
}

.linea-tratamiento {
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

/* Etiqueta del medicamento y "Quitar" en la misma linea; el enlace conserva
   su zona tactil con margen negativo */
.linea-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.linea-cabecera .enlace-accion {
  margin: -10px 0;
}

.linea-tratamiento .campo {
  margin-bottom: 12px;
}

/* Dosis y unidad juntas: el numero se escribe, la unidad se elige */
.dosis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 6px;
}

.campo .dosis input {
  font-variant-numeric: tabular-nums;
}

.linea-fechas {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.linea-fechas:empty {
  display: none;
}

.tratamiento-ninguno {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-2);
}

.boton-anadir-linea {
  justify-self: start;
  border: 1.5px dashed var(--border);
  background: transparent;
}

.boton-anadir-linea:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* En escritorio, dias, dosis y via en una fila bajo el medicamento (solo en
   Registrar: el dialogo de edicion es estrecho) */
@media (min-width: 760px) {
  .seccion-form-campos .linea-campos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
  }

  .linea-medicamento {
    grid-column: 1 / -1;
  }
}

/* Pesada: una fila por animal con su campo de peso. El campo va a la
   derecha, estrecho y alineado en todas las filas, para ir bajando con el
   pulgar; debajo, la ultima pesada y la ganancia segun se escribe. */
.pesos {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.pesos legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

/* Ayuda bajo la leyenda (destete: pesos opcionales) */
.pesos > .ayuda-campo {
  margin: 0 0 10px;
}

.lista-pesos {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.campo.fila-peso {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 148px);
  grid-template-areas:
    'animal campo'
    'ultima ultima'
    'ganancia ganancia';
  align-items: center;
  gap: 2px 12px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.fila-peso:first-child {
  border-top: 0;
  padding-top: 4px;
}

.fila-peso-animal {
  grid-area: animal;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fila-peso-nombre {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fila-peso-categoria {
  overflow: hidden;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fila-peso-campo {
  grid-area: campo;
}

.campo .fila-peso-campo input {
  padding-right: 42px;
  font-size: 18px;
  font-weight: 700;
  text-align: right;
}

.fila-peso-ultima {
  grid-area: ultima;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.fila-peso-ultima strong {
  color: var(--text);
  font-weight: 600;
}

.fila-peso-ganancia {
  grid-area: ganancia;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fila-peso-ganancia:empty {
  display: none;
}

.fila-peso-ganancia[data-estado='sube'] {
  color: var(--accent-strong);
}

.fila-peso-ganancia[data-estado='baja'],
.fila-peso-ganancia[data-estado='error'] {
  color: var(--danger);
}

@media (min-width: 760px) {
  .lista-pesos {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    column-gap: 32px;
  }

  /* En varias columnas, la primera fila de cada una tambien lleva su raya */
  .fila-peso:first-child {
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
}

/* Historial de la ficha: ocupa todo el ancho bajo los bloques */
.historial {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Cinco pestanas no caben en un movil: en dos lineas se ven todas, sin
   tener que descubrir que se desplazan de lado. */
.chips-historial {
  flex-wrap: wrap;
  margin: 0 0 4px;
  padding: 2px 0 6px;
  overflow: visible;
}

.historial-vacio {
  padding: 12px 0 4px;
}

.lista-sucesos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-sucesos li + li {
  border-top: 1px solid var(--border);
}

.fila-suceso {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 4px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.fila-suceso:hover .fila-suceso-tipo {
  color: var(--accent-strong);
}

.fila-suceso-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
}

.fila-suceso-icono .icono {
  width: 22px;
  height: 22px;
}

/* Un tono apagado por grupo, como los de sexo: ayuda a recorrer el
   historial con la vista sin competir con el acento. */
.fila-suceso-reproduccion {
  background: var(--grupo-reproduccion-soft);
  color: var(--grupo-reproduccion);
}

.fila-suceso-sanidad {
  background: var(--danger-soft);
  color: var(--danger);
}

.fila-suceso-manejo {
  background: var(--grupo-manejo-soft);
  color: var(--grupo-manejo);
}

.fila-suceso-altas_bajas {
  background: var(--grupo-altas-soft);
  color: var(--grupo-altas);
}

.fila-suceso-texto {
  display: grid;
  min-width: 0;
}

.fila-suceso-tipo {
  font-weight: 700;
}

.fila-suceso-resumen {
  overflow: hidden;
  color: var(--text-2);
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fila-suceso-fecha {
  align-self: start;
  padding-top: 2px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Ultimos registros: una tarjeta por registro (los sucesos que se guardaron
   juntos), con una fila por animal que abre su suceso en la ficha
   -------------------------------------------------------------------------- */

.registros-filtros {
  grid-template-columns: minmax(0, 360px);
  margin: 0 0 10px;
}

.registros-ayuda {
  margin: 0 4px 18px;
  color: var(--text-2);
  font-size: 14px;
}

.registros-dia + .registros-dia {
  margin-top: 24px;
}

.registros-dia-lista {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.registro {
  padding: 12px 16px 4px;
}

.registro-cabeza {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.registro-titulo {
  display: grid;
  min-width: 0;
}

.registro-tipo {
  font-weight: 700;
}

.registro-sub {
  color: var(--text-2);
  font-size: 14px;
}

.registro-animales {
  margin: 0;
  padding: 0;
  list-style: none;
}

.registro-animales li + li {
  border-top: 1px solid var(--border);
}

.registro-animal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  color: var(--text);
  text-decoration: none;
}

.registro-animal:hover .registro-animal-numero {
  color: var(--accent-strong);
}

.registro-animal-id {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.registro-animal-numero {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.registro-animal-crotal {
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.registro-animal-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.registro-animal-resumen {
  overflow: hidden;
  color: var(--text-2);
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.registro-corregido {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  color: var(--grupo-manejo);
  font-size: 13px;
  font-weight: 600;
}

.registro-corregido .icono {
  width: 14px;
  height: 14px;
}

.registro-animal-flecha {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

.registros-mas {
  display: block;
  margin: 20px auto 0;
}

/* Escritorio: dos registros por fila */
@media (min-width: 960px) {
  .registros-dia-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Dialogo de detalle */
.detalle-suceso {
  margin: 0;
}

.detalle-fila {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.detalle-fila:first-child {
  padding-top: 0;
}

.detalle-fila dt {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
}

.detalle-fila dd {
  margin: 0;
  font-weight: 500;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.detalle-subtitulo {
  margin: 16px 0 8px;
  font-size: 15px;
}

.boton-texto-peligro {
  color: var(--danger);
}

.suceso-nota {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

/* ---------- Edicion de animal (js/editar-animal.js) ---------- */

/* Numero y nombre, cortos, van en la misma fila. */
.campos-pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campos-pareja .campo {
  min-width: 0;
}

/* Campo que no se puede cambiar aqui (fecha y padres de un ternero de
   parto): se ve su valor, pero con aspecto de bloqueado. */
.campo input:disabled,
.campo select:disabled {
  border-style: dashed;
  background-color: var(--bg);
  color: var(--text-2);
  cursor: not-allowed;
  opacity: 1;
}

.nota-bloqueo {
  margin: 0 0 18px;
  padding: 10px 14px 2px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-2);
  font-size: 14px;
}

.nota-bloqueo .enlace-bloque {
  margin-top: 0;
}

@media (min-width: 760px) {
  .pasos-tipo {
    gap: 28px;
  }

  .tipos-suceso {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
  }

  .panel-registro {
    grid-template-columns: minmax(260px, 1.3fr) 2fr;
  }

  .panel-registro .filtros-registro {
    grid-template-columns: 1fr 1fr 1.4fr;
  }

  .panel-registro .filtros-registro .filtro:last-child {
    grid-column: auto;
  }

  .barra-seleccion {
    grid-column: 1 / -1;
  }

  .campo-ancho {
    grid-column: 1 / -1;
  }

  .lista-terneros {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Escritorio
   -------------------------------------------------------------------------- */

@media (min-width: 760px) {
  .vista {
    padding-top: 32px;
  }

  .panel-filtros {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) 3fr;
    align-items: end;
    gap: 12px;
    margin: 0;
    padding: 8px 0 14px;
  }

  .filtros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0;
  }

  .boton-filtros {
    display: none;
  }

  #animales-limpiar-filtros {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0;
  }

  .lista-animales {
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   Hoja de campo imprimible (tarea 23)
   En pantalla es la vista previa de un folio; al imprimir solo sale la hoja,
   en A4 vertical, en blanco y negro y con filas altas para escribir a mano.
   -------------------------------------------------------------------------- */

.hoja-marco {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hoja {
  padding: 20px var(--gutter);
  color: var(--text);
}

.hoja-cargando {
  color: var(--text-2);
}

.hoja-cabecera {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--text);
}

.hoja-explotacion {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  font-size: 15px;
}

.hoja-explotacion span {
  font-variant-numeric: tabular-nums;
}

.hoja-cabecera h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.hoja-lista {
  font-weight: 500;
}

.hoja-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0;
  font-size: 15px;
}

.hoja-datos div {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.hoja-datos dt {
  color: var(--text-2);
}

.hoja-datos dt::after {
  content: ':';
}

.hoja-datos dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Hueco para escribir quien hace el trabajo */
.hoja-dato-hueco {
  flex: 1 1 260px;
}

.hoja-dato-hueco dd {
  flex: 1;
  min-width: 160px;
  border-bottom: 1px solid var(--text);
}

.hoja-leyenda {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
}

/* En un movil la tabla no cabe: se desplaza ella, no el folio entero */
.hoja-tabla-marco {
  overflow-x: auto;
}

.hoja-tabla {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.hoja-tabla th,
.hoja-tabla td {
  padding: 6px 8px;
  border: 1px solid var(--text);
  text-align: left;
  vertical-align: middle;
}

.hoja-tabla thead th {
  font-size: 13px;
  font-weight: 700;
  background: var(--surface-2);
}

.hoja-tabla tbody tr:not(.hoja-lugar) {
  height: 52px;
}

.hoja-lugar th {
  padding-top: 10px;
  font-size: 15px;
  border-left-color: transparent;
  border-right-color: transparent;
}

.hoja-lugar span {
  font-weight: 500;
  color: var(--text-2);
}

.hoja-col-numero {
  width: 9%;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.hoja-col-crotal {
  width: 17%;
  white-space: nowrap;
}

.hoja-col-cubricion {
  width: 21%;
}

.hoja-col-cubricion span {
  display: block;
}

.hoja-col-cubricion span + span {
  color: var(--text-2);
  font-size: 13px;
}

.hoja-tabla .hoja-col-dias {
  width: 7%;
  text-align: right;
}

.hoja-col-resultado {
  width: 16%;
}

.hoja-col-feto {
  width: 10%;
}

.hoja-casillas {
  display: flex;
  gap: 6px;
}

/* Cuadro para marcar con una cruz */
.hoja-casilla {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--text);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}

@media (min-width: 760px) {
  .hoja {
    padding: 28px 32px;
  }
}

@page {
  size: A4 portrait;
  margin: 12mm 10mm 14mm;

  @bottom-right {
    content: 'Página ' counter(page) ' de ' counter(pages);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9pt;
  }
}

/* --------------------------------------------------------------------------
   Ficha de trazabilidad imprimible (tarea 35)
   Mismo folio que la hoja de campo (.hoja-*); secciones con tablas que en un
   movil pasan a una ficha por fila, para leerla sin desplazarla de lado.
   -------------------------------------------------------------------------- */

.traza-espera {
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 15px;
}

.traza-espera strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.traza-seccion {
  margin-top: 18px;
}

/* El titulo no se queda solo al pie de una pagina */
.traza-seccion h3 {
  break-after: avoid;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--text);
  font-size: 16px;
}

.traza-frase,
.traza-vacio {
  margin: 0 0 6px;
  font-size: 15px;
}

.traza-vacio {
  color: var(--text-2);
}

.traza-datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 24px;
  margin: 0;
  font-size: 15px;
}

.traza-datos div {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

.traza-datos dt {
  flex: none;
  color: var(--text-2);
}

.traza-datos dt::after {
  content: ':';
}

.traza-datos dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.traza-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.traza-tabla th,
.traza-tabla td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.traza-tabla thead th {
  font-size: 13px;
  color: var(--text-2);
  border-bottom-color: var(--text);
}

.traza-tabla .traza-num {
  text-align: right;
}

.traza-tabla tr {
  break-inside: avoid;
}

@media screen and (max-width: 599px) {
  .traza-tabla thead {
    display: none;
  }

  .traza-tabla tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .traza-tabla td,
  .traza-tabla .traza-num {
    padding: 0;
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .traza-tabla .traza-celda-vacia {
    display: none;
  }

  .traza-tabla td::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 12px;
    color: var(--text-2);
  }
}

@media print {
  .traza-espera {
    border-color: currentColor;
    background: none;
    color: var(--text);
    font-size: 11pt;
  }

  .traza .hoja-cabecera {
    gap: 1.5mm;
    margin-bottom: 0;
    padding-bottom: 2.5mm;
  }

  .traza-seccion {
    margin-top: 3.5mm;
  }

  .traza-seccion h3 {
    margin-bottom: 1.5mm;
    padding-bottom: 0.5mm;
    font-size: 11.5pt;
  }

  .traza-frase,
  .traza-vacio {
    margin-bottom: 1mm;
  }

  .traza-frase,
  .traza-vacio,
  .traza-datos {
    font-size: 10pt;
  }

  .traza-datos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .traza-tabla {
    font-size: 9.5pt;
  }

  .traza-tabla thead th {
    font-size: 8.5pt;
  }

  .traza-tabla th,
  .traza-tabla td {
    padding: 1mm 2mm;
  }
}

/* --------------------------------------------------------------------------
   Graficos (tareas 28 a 32): lista de graficos y un grafico. Las marcas
   llevan el color de su serie; el texto, siempre los tokens de texto.
   -------------------------------------------------------------------------- */

.lista-graficos {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .lista-graficos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grafico-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 12rem));
  gap: 8px 28px;
  margin-bottom: 14px;
}

.grafico-cifra {
  display: grid;
}

.grafico-cifra strong {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.grafico-cifra span {
  color: var(--text-2);
  font-size: 14px;
}

.grafico-cifra-apagada strong {
  color: var(--text-2);
}

.grafico-apartes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.grafico-aparte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease);
}

.grafico-aparte:hover {
  border-color: var(--accent);
}

.grafico-aparte:active {
  transform: scale(0.98);
}

.grafico-aparte .icono {
  width: 20px;
  height: 20px;
  color: var(--text-2);
}

.grafico-aparte-aviso {
  border-color: var(--danger-soft);
  background: var(--danger-soft);
}

.grafico-aparte-aviso .icono {
  color: var(--danger);
}

.grafico-tarjeta {
  padding: 16px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.grafico-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 4px 6px;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: 14px;
}

.grafico-leyenda li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.grafico-muestra {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.serie-principal {
  background: var(--serie-principal);
  fill: var(--serie-principal);
}

.serie-anterior {
  background: var(--serie-anterior);
  fill: var(--serie-anterior);
}

.grafico-lienzo {
  width: 100%;
  min-height: 230px;
}

.grafico-svg {
  display: block;
  overflow: visible;
  font-family: var(--font);
}

.grafico-rejilla {
  stroke: var(--rejilla);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.grafico-base {
  stroke: var(--border);
}

.grafico-eje {
  fill: var(--text-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.grafico-eje-anio {
  font-size: 11px;
  font-weight: 700;
}

.grafico-valor {
  fill: var(--text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grafico-columna {
  cursor: pointer;
  outline: none;
}

/* La franja entera responde (mas facil de acertar que la barra) */
.grafico-franja {
  fill: transparent;
  transition: fill 160ms var(--ease);
}

.grafico-columna:hover .grafico-franja {
  fill: var(--bg);
}

.grafico-columna[aria-pressed='true'] .grafico-franja {
  fill: var(--accent-soft);
}

.grafico-columna:focus-visible .grafico-franja {
  stroke: var(--accent);
  stroke-width: 2;
}

.grafico-columna[aria-pressed='true'] .grafico-eje-x {
  fill: var(--text);
  font-weight: 700;
}

.grafico-nota {
  margin: 8px 4px 0;
  color: var(--text-2);
  font-size: 13px;
}

.grafico-tabla-detalle {
  margin: 8px 4px 0;
  font-size: 14px;
}

.grafico-tabla-detalle summary {
  min-height: 44px;
  padding: 12px 0;
  color: var(--accent-strong);
  font-weight: 600;
  cursor: pointer;
}

.grafico-tabla {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.grafico-tabla th,
.grafico-tabla td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--rejilla);
  text-align: right;
}

.grafico-tabla th[scope='row'],
.grafico-tabla thead th:first-child {
  font-weight: 500;
  text-align: left;
}

.grafico-tabla thead th {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.grafico-detalle {
  margin-top: 22px;
}

.grafico-detalle-titulo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.grafico-detalle-sub {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 14px;
}

.grafico-anteriores {
  margin-top: 16px;
}

.grafico-anteriores summary {
  min-height: 44px;
  padding: 12px 4px;
  color: var(--accent-strong);
  font-weight: 600;
  cursor: pointer;
}

.filas-parto-anterior {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fila-parto-anterior {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.fila-parto-anterior:hover {
  border-color: var(--accent);
}

.fila-parto-anterior .numero {
  font-size: 17px;
}

.fila-parto-anterior time {
  color: var(--text-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.grafico-grupo {
  margin-top: 28px;
}

.grafico-grupo-ayuda {
  margin: -4px 4px 4px;
  color: var(--text-2);
  font-size: 14px;
}

/* Curva de crecimiento (grafico-crecimiento.js) */
.serie-referencia {
  background: var(--serie-referencia);
}

.grafico-muestra-linea,
.grafico-muestra-mediana {
  width: 18px;
  height: 0;
  border-top: 2px solid var(--serie-principal);
}

.grafico-muestra-mediana {
  border-top: 2px dashed var(--serie-anterior);
}

.grafico-area-referencia {
  fill: var(--serie-referencia);
}

.grafico-mediana {
  fill: none;
  stroke: var(--serie-anterior);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.grafico-linea {
  fill: none;
  stroke: var(--serie-principal);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.grafico-punto {
  fill: var(--serie-principal);
  stroke: var(--surface);
  stroke-width: 2;
}

.grafico-marca {
  stroke: var(--border);
}

.grafico-eje-unidad {
  font-weight: 700;
}

.grafico-valor-tramo {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
  font-weight: 600;
}

.grafico-buscador {
  margin-bottom: 4px;
}

.grafico-resultados {
  margin-bottom: 18px;
}

.grafico-elegido {
  margin: 12px 0 18px;
}

.curva-gmd,
.curva-comparacion {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.curva-comparacion .insignia {
  margin-right: 6px;
}

.curva-posicion-arriba {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.curva-posicion-abajo {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Linea de vida reproductiva (grafico-vida.js): la forma de cada marca la
   pone svgFormaMarca; el color, su clase serie-* con currentColor */
.serie-reproduccion {
  color: var(--serie-reproduccion);
}

.serie-parto {
  color: var(--serie-parto);
}

.serie-sin-efecto {
  color: var(--serie-sin-efecto);
}

.marca-llena {
  fill: currentColor;
  stroke: var(--surface);
  stroke-width: 1.5;
}

.marca-hueca {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 2;
}

.marca-discontinua {
  stroke-dasharray: 2.5 2;
}

.grafico-marca-tachado {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.grafico-muestra-marca {
  flex-shrink: 0;
}

.grafico-fila-anio {
  fill: var(--text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.grafico-fila-fondo {
  fill: var(--bg);
}

.grafico-eje-carril {
  font-size: 12px;
}

.grafico-hoy {
  stroke: var(--text-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.grafico-hoy-texto {
  font-size: 12px;
  font-weight: 700;
}

.grafico-cifra-texto {
  grid-column: 1 / -1;
}

.grafico-cifra-texto strong {
  font-size: 24px;
  line-height: 1.45;
}

.grafico-tabla-texto td:nth-child(2),
.grafico-tabla-texto td:nth-child(3) {
  text-align: left;
}

.grafico-detalle-texto {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.grafico-detalle .detalle-suceso {
  max-width: 560px;
  margin-top: 12px;
}

.grafico-ir-suceso {
  margin-top: 16px;
  text-decoration: none;
}

/* Comparativa de toros (grafico-toros.js) */
.grafico-filtro {
  max-width: 22rem;
  margin-bottom: 14px;
}

.grafico-nota-arriba {
  margin: -4px 4px 14px;
}

.grafico-muestra-punto {
  border-radius: 50%;
}

.grafico-muestra-media {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--text);
}

.grafico-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}

.grafico-fila-etiqueta {
  fill: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.grafico-fila-secundaria {
  fill: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

.grafico-separador {
  stroke: var(--rejilla);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.grafico-punto-apagado {
  fill: var(--serie-anterior);
}

.grafico-columna[aria-pressed='true'] .grafico-punto {
  stroke: var(--text);
  stroke-width: 2;
}

.grafico-media {
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
}

.grafico-media-apagada {
  stroke: var(--text-2);
  stroke-dasharray: 3 3;
  stroke-width: 2;
}

.grafico-tabla-sub {
  color: var(--text-2);
  font-size: 12px;
}

/* Evolucion del censo (grafico-censo.js) */
.serie-vaca {
  background: var(--serie-vaca);
  fill: var(--serie-vaca);
}

.serie-novilla {
  background: var(--serie-novilla);
  fill: var(--serie-novilla);
}

.serie-cebo {
  background: var(--serie-cebo);
  fill: var(--serie-cebo);
}

.serie-ternero {
  background: var(--serie-ternero);
  fill: var(--serie-ternero);
}

.serie-toro {
  background: var(--serie-toro);
  fill: var(--serie-toro);
}

/* Meses antes de la importacion: detras un fondo y las barras atenuadas */
.grafico-apagado-fondo {
  fill: var(--bg);
}

.grafico-apagado-texto {
  font-size: 11px;
  font-weight: 600;
}

.grafico-columna-apagada .grafico-barra {
  opacity: 0.45;
}

/* El total solo se ve sobre la columna elegida */
.grafico-valor-total {
  display: none;
}

.grafico-columna[aria-pressed='true'] .grafico-valor-total {
  display: inline;
}

.grafico-nota-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text);
}

.grafico-nota-aviso .icono {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--danger);
}

.grafico-tabla-scroll {
  overflow-x: auto;
}

.grafico-tabla-scroll .grafico-tabla th[scope='row'] {
  white-space: nowrap;
}

.grafico-fila-apagada td {
  color: var(--text-2);
}

.censo-desglose {
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.censo-desglose li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 3.2rem;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 4px;
  border-bottom: 1px solid var(--rejilla);
  font-variant-numeric: tabular-nums;
}

.censo-desglose .grafico-muestra:not([class*='serie-']) {
  background: var(--border);
}

.censo-desglose strong {
  font-size: 17px;
  text-align: right;
}

.censo-diferencia {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.censo-grupos {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.censo-grupo-titulo {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
}

/* Intervalo entre partos (grafico-intervalo.js): una fila por vaca, enlace a
   su ficha, con una barra fina desde 0 y la marca del umbral. Las que pasan
   el umbral, en el tono de peligro y con el texto "Largo" (no solo color). */
.ranking-intervalo {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-intervalo > li + li {
  border-top: 1px solid var(--rejilla);
}

.ranking-fila {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 4px 8px;
  min-height: var(--tap);
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.ranking-fila:hover {
  background: var(--surface-2);
}

.ranking-fila:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.ranking-fila .flecha-tarjeta {
  grid-column: 4;
  grid-row: 1;
  color: var(--text-2);
}

.ranking-puesto {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ranking-nombre {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-sub,
.ranking-detalle {
  color: var(--text-2);
  font-size: 13px;
}

.ranking-sub {
  margin-left: 6px;
}

.ranking-cifra {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ranking-marca {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.ranking-pista {
  position: relative;
  grid-column: 2 / 4;
  height: 8px;
  border-radius: 4px;
  background: var(--rejilla);
}

.ranking-barra {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 0 4px 4px 0;
  background: var(--serie-principal);
}

.ranking-largo .ranking-barra {
  background: var(--danger);
}

.ranking-umbral,
.ranking-leyenda-umbral {
  border-left: 2px dashed var(--text);
}

.ranking-umbral {
  position: absolute;
  top: -4px;
  bottom: -4px;
}

.ranking-detalle {
  grid-column: 2 / 4;
}

.grafico-anteriores .ranking-fila {
  grid-template-columns: minmax(0, 1fr) 20px;
}

.grafico-anteriores .ranking-nombre,
.grafico-anteriores .ranking-detalle {
  grid-column: 1;
}

.grafico-anteriores .ranking-fila .flecha-tarjeta {
  grid-column: 2;
}

.ranking-leyenda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 8px;
  color: var(--text-2);
  font-size: 13px;
}

.ranking-leyenda-umbral {
  height: 16px;
}

@media (min-width: 900px) {
  .ranking-intervalo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  /* En dos columnas la raya va entre filas de la misma columna */
  .ranking-intervalo > li + li {
    border-top: 0;
  }

  .ranking-intervalo > li:nth-child(n + 3) {
    border-top: 1px solid var(--rejilla);
  }
}

@media (min-width: 760px) {
  .grafico-cifras {
    grid-template-columns: repeat(2, max-content);
  }

  .grafico-cifras:has(.grafico-cifra-texto) {
    grid-template-columns: repeat(3, max-content);
  }

  .grafico-cifra-texto {
    grid-column: auto;
  }

  .grafico-tarjeta {
    padding: 20px 20px 14px;
  }

  .filas-parto-anterior {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* En escritorio, altas y bajas lado a lado (una columna de filas cada una) */
  .censo-grupos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .censo-grupos .filas-parto-anterior {
    grid-template-columns: minmax(0, 1fr);
  }

  .censo-desglose {
    max-width: 30rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grafico-franja,
  .grafico-aparte {
    transition: none;
  }
}

@media print {
  html,
  body {
    background: var(--surface);
    scrollbar-gutter: auto;
  }

  /* Solo la hoja: ni el resto de vistas, ni avisos, ni dialogos */
  body > :not(#vista-hoja, #vista-trazabilidad),
  .no-imprimir {
    display: none !important;
  }

  #vista-hoja,
  #vista-trazabilidad {
    max-width: none;
    padding: 0;
    animation: none;
  }

  .hoja-marco {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .hoja-tabla-marco {
    overflow: visible;
  }

  .hoja-tabla {
    min-width: 0;
  }

  .hoja {
    padding: 0;
    font-size: 11pt;
  }

  .hoja-cabecera h2 {
    font-size: 16pt;
  }

  .hoja-explotacion,
  .hoja-datos,
  .hoja-tabla {
    font-size: 11pt;
  }

  .hoja-leyenda,
  .hoja-tabla thead th,
  .hoja-col-cubricion span + span {
    font-size: 9.5pt;
  }

  .hoja-col-numero {
    font-size: 13pt;
  }

  /* Filas de 14 mm: sitio para escribir a mano; ninguna se parte entre
     paginas y el lugar no se queda solo al pie. La cabecera de la tabla
     (thead) se repite en cada pagina. */
  .hoja-tabla tbody tr:not(.hoja-lugar) {
    height: 14mm;
  }

  .hoja-tabla tr {
    break-inside: avoid;
  }

  .hoja-lugar {
    break-after: avoid;
  }

  .hoja-tabla thead {
    display: table-header-group;
  }

  .hoja-tabla thead th {
    background: none;
  }

  .hoja-casilla {
    width: 8mm;
    height: 8mm;
    font-size: 9pt;
  }
}