:root {
  --verde: #3f6b3f;
  --verde-oscuro: #2c4d2c;
  --acento-texto: var(--verde-oscuro);
  --fondo: #f5f7f4;
  --borde: #e1e5de;
  --texto: #24291f;
  --texto-muted-a: #8a9086;
  --texto-muted-b: #5a6155;
  --texto-muted-c: #6c757d;
  --fondo-tarjeta: #fff;
  --fondo-hover: #f4f7f3;
  --badge-inactivo-bg: #ececec;
  --badge-inactivo-color: #777;

  /* Punto 350 - a pedido de Doma: "podemos darle otro color en el sidebar
     a toda la seccion de agricultura... por lo menos cambiarle el color a
     las letras asi se distingue bien del resto" - un dorado/trigo cálido,
     bien distinto del blanco que usa el resto del menú lateral. A
     propósito NO se pisa en ningún data-tema (ver más abajo): tiene que
     seguir distinguiéndose de las demás secciones sin importar qué paleta
     de colores haya elegido el establecimiento (Verde/Azul/Terracota/
     Gris/Oscuro) - se probó el contraste contra el fondo oscuro de las 4
     variantes claras y da bien en las 4. */
  --agro-texto: #f5cf7a;

  /* Punto 353 - a pedido de Doma: "darle a todo esto un color acorde" (a
     "Producción Animal", junto con moverle Lana adentro y renombrarla) -
     mismo criterio que --agro-texto de arriba, bien distinto del dorado de
     Agricultura y del blanco del resto del menú, para que las dos
     secciones "de color" se puedan distinguir entre sí de un vistazo.
     Tampoco se pisa en ningún data-tema, por la misma razón.
     Punto 354 - ajuste de tono a pedido de Doma: "el azul de producción
     animal tiene que ser un poquito mas azul y no tan celeste" - antes era
     #9fd0ec (un celeste, matiz más cercano al cian); se corrió el matiz
     hacia un azul más "derecho" (de ~202° a ~216° de tono) manteniendo el
     mismo nivel de brillo/saturación de la familia de colores de esta
     sección, para que siga leyéndose bien contra las 4 paletas claras. */
  --animal-texto: #a9c5ee;

  /* Punto 354 - a pedido de Doma: "a contabilidad me gustaria tambien un
     color como por ejemplo rojo" - mismo criterio que --agro-texto y
     --animal-texto de arriba: un rojo/coral suave (no un rojo saturado
     tipo "alerta/error", que en el resto del sistema ya se usa para
     avisos y no correspondía acá), elegido con el mismo método de
     contraste contra las 4 paletas claras del sidebar. Tampoco se pisa en
     ningún data-tema, por la misma razón que los otros dos. */
  --contabilidad-texto: #f5bcbc;
}

/* Paleta de colores del sistema (Configuración > Información del
   establecimiento > Apariencia). "Verde" (arriba) es la paleta original y
   queda como default: los data-tema de acá abajo sólo pisan variables
   puntuales, así que si el establecimiento no eligió ninguna (o el campo
   viene vacío en instalaciones viejas) se ve exactamente igual que antes.
   Azul/Terracota/Gris son variantes claras (mismo fondo y tarjetas
   blancas, sólo cambia el color de acento); Oscuro es la única con fondo
   oscuro - ver más abajo por qué --verde/--verde-oscuro no se tocan ahí. */
html[data-tema="azul"] {
  --verde: #3f5f7a;
  --verde-oscuro: #2c4457;
}

html[data-tema="terracota"] {
  --verde: #a06249;
  --verde-oscuro: #7a4735;
}

html[data-tema="gris"] {
  --verde: #5a6270;
  --verde-oscuro: #434a56;
}

html[data-tema="oscuro"] {
  --fondo: #1b1e19;
  --borde: #383f35;
  --texto: #e6e8e2;
  --texto-muted-a: #a9b0a2;
  --texto-muted-b: #a9b0a2;
  --texto-muted-c: #9aa39c;
  --fondo-tarjeta: #242922;
  --fondo-hover: #2c3226;
  --badge-inactivo-bg: #333a2e;
  --badge-inactivo-color: #9aa39c;
  /* --verde y --verde-oscuro no se pisan acá: siguen siendo el verde
     oscuro de siempre, que es lo que usan la barra lateral y el degradé
     del encabezado del Dashboard como FONDO (ahí un verde oscuro sigue
     funcionando bien). Pero ese mismo verde oscuro se reusa en otros
     lugares como color de TEXTO sobre una tarjeta (título de la barra
     superior, títulos de los atajos del Dashboard, etc.) - sobre una
     tarjeta oscura quedaría casi invisible, por eso acá se pisa aparte un
     verde más claro sólo para esos usos como texto. */
  --acento-texto: #7fbf7f;
}

body {
  background: var(--fondo);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--texto);
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  background: var(--verde-oscuro);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.18s ease, padding 0.18s ease;
}

.app-shell.sidebar-hidden .sidebar {
  width: 0;
  padding: 0;
  overflow: hidden;
  border: none;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0 0.6rem 1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 0.5rem;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-brand:hover {
  color: #fff;
}

.sidebar-collapse-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  padding: 0.3rem 0.45rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.show-sidebar-btn {
  display: none;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  color: var(--acento-texto);
  cursor: pointer;
  margin-right: 0.9rem;
}

.show-sidebar-btn:hover {
  background: var(--fondo);
}

.app-shell.sidebar-hidden .show-sidebar-btn {
  display: inline-flex;
  align-items: center;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-toggle:hover {
  color: #fff;
}

.sidebar-chevron {
  font-size: 0.68rem;
  opacity: 0.7;
  margin-right: 1.1rem;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.sidebar-group.collapsed > .sidebar-toggle .sidebar-chevron {
  transform: rotate(-90deg);
}

.sidebar-group.collapsed > .sidebar-group-body {
  display: none;
}

.marca-icon {
  width: 34px;
  height: auto;
  flex-shrink: 0;
}

/* Jerarquía del sidebar por tamaño de letra, de mayor a menor según la
   profundidad del desplegable (a pedido de Doma, que la encontraba confusa -
   ver HISTORIAL_DESARROLLO.md). Cada nivel (tier) es siempre más chico que
   el anterior. Nivel 1 = grupos de primer orden (ej. "Animales",
   "Contabilidad") + los links sueltos que no están dentro de ningún grupo
   (Dashboard, Asistente, Novedades, Tareas) - a pedido de Doma, el
   encabezado de nivel 1 usa el mismo estilo "de letra" que esos links
   sueltos (sin mayúsculas, mismo peso/color), sólo que un poco más grande,
   para que se sienta como "el título de arriba de todo" y no como una
   etiqueta aparte. Nivel 2 (ej. "Vacunos" dentro de "Animales", o los links
   directos de "Contabilidad") > Nivel 3 (ej. "Informes" dentro de Vacunos,
   o los links de "Recuentos Vacuno" dentro de Trazabilidad) > Nivel 4 (ej.
   "Sanitarios" dentro de ese "Informes" de Vacunos) - éste es el nivel más
   profundo del diseño actual (Animales > Vacunos > Informes > Sanitarios). */
.sidebar-section {
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  padding: 0.9rem 1.2rem 0.3rem 1.2rem;
  margin: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.2rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.97rem;
  transition: background 0.15s;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.sidebar-link.active {
  background: var(--verde);
  color: #fff;
  font-weight: 600;
}

.sidebar-link.disabled {
  opacity: 0.35;
  cursor: default;
}

.sidebar-subsection {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.78;
  padding: 0.5rem 1.2rem 0.15rem 1.7rem;
  margin: 0;
}

/* "Recuentos Vacuno"/"Recuentos Ovino" dentro de "Trazabilidad" - a pedido
   de Doma: "vacunos y ovinos deben tener mismo tipo de letra que caravanas
   snig" (su hermano de al lado, un link suelto con la tipografía de
   sidebar-link-sub, no la de subsección en mayúsculas). Excepción puntual
   a la jerarquía por tamaño de letra de más arriba: sólo pisa tipografía y
   color (calcados de .sidebar-link.sidebar-link-sub), mantiene la sangría
   y el comportamiento de grupo colapsable (chevron) de .sidebar-subsection
   sin cambios, porque siguen siendo un desplegable con 3 links adentro, no
   un link suelto como Caravanas SNIG. */
.sidebar-subsection.sidebar-subsection-como-link {
  font-size: 0.93rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
  color: rgba(255,255,255,0.85);
}

/* "Configuración" dentro de "Agricultura" (punto 339) - a pedido de Doma:
   "configuracion tiene que tener el mismo tipo de letra que Agricultura
   pero un poquito mas chica y sin negrita". Mismo criterio que la
   excepción de arriba (.sidebar-subsection-como-link): sólo pisa
   tipografía/color (calcados de .sidebar-section - sin mayúsculas, sin
   negrita, mismo color), NO el tamaño de .sidebar-section (que queda
   reservado para el nivel 1) - achicado un poco para que "Configuración"
   siga leyéndose un escalón por debajo de "Agricultura". Mantiene la
   sangría y el comportamiento de grupo colapsable de .sidebar-subsection
   sin cambios.

   Punto 352 - reusada tal cual (mismo criterio, mismo pedido con otras
   palabras) para "Vacunos"/"Ovinos"/"Equinos"/"Trazabilidad" dentro de
   "Animales": "tienen que tener la tipo de letra igual y un poquitito más
   chiquitito que animales". Al ser la MISMA clase para las cuatro, quedan
   con exactamente el mismo tipo de letra entre sí (el primer pedido de
   Doma) y, al no tocar el tamaño de .sidebar-section, un escalón más
   chicas que "Animales" (el segundo) - sin tener que crear una variante
   nueva por cada grupo. */
.sidebar-subsection.sidebar-subsection-como-section {
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
  color: rgba(255,255,255,0.85);
}

.sidebar-subsection-sub {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.68;
  padding: 0.45rem 1.2rem 0.15rem 2.3rem;
  margin: 0;
}

/* "Recuentos Vacuno"/"Recuentos Ovino" dentro de "Trazabilidad", que desde
   el punto 351 (a pedido de Doma: "trazabilidad tiene que ir adentro de
   animales en el sidebar") quedó un escalón más abajo, como subgrupo de
   Animales en vez de grupo de nivel 1 propio. Mismo criterio que
   .sidebar-subsection.sidebar-subsection-como-link de más arriba (punto
   249: "mismo tipo de letra que caravanas snig, su hermano de al lado"),
   pero un nivel más profundo: ahora su hermano de al lado es "Caravanas
   SNIG" con la tipografía de sidebar-link-sub2 (no ya sidebar-link-sub),
   así que esta variante pisa tipografía/color calcados de ESA clase en vez
   de sidebar-link-sub. Sólo pisa tipografía y color, mantiene la sangría y
   el comportamiento de grupo colapsable de .sidebar-subsection-sub sin
   cambios. */
.sidebar-subsection-sub.sidebar-subsection-sub-como-link {
  font-size: 0.84rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
  color: rgba(255,255,255,0.85);
}

.sidebar-link.sidebar-link-sub {
  padding-left: 2.3rem;
  font-size: 0.93rem;
}

.sidebar-link.sidebar-link-sub2 {
  padding-left: 2.9rem;
  font-size: 0.84rem;
}

.sidebar-link.sidebar-link-sub3 {
  padding-left: 3.5rem;
  font-size: 0.76rem;
}

/* Punto 350 - a pedido de Doma, todo el grupo "Agricultura" del menú
   lateral (título, links directos, y el subgrupo "Configuración" con sus
   propios links - selector por descendiente, no por hijo directo, a
   propósito, para llegar también ahí adentro) usa --agro-texto en vez del
   blanco de siempre, así se distingue de un vistazo del resto de las
   secciones. Hover y "activo" (la página que se está viendo en ese
   momento) siguen en blanco, igual que en cualquier otra sección - son
   estados de INTERACCIÓN, no de identidad de sección, y cambiarlos
   rompería la misma convención que ya usa el resto del sistema para
   mostrar "dónde estoy parada". Las reglas de acá abajo van DESPUÉS de
   sidebar-link.active/:hover a propósito, con selectores más específicos
   (agregan el atributo [data-group="agricultura"]), para ganarles sin
   depender del orden de aparición en el archivo. */
.sidebar-group[data-group="agricultura"] .sidebar-section,
.sidebar-group[data-group="agricultura"] .sidebar-link,
.sidebar-group[data-group="agricultura"] .sidebar-subsection,
.sidebar-group[data-group="agricultura"] .sidebar-chevron {
  color: var(--agro-texto);
}

.sidebar-group[data-group="agricultura"] .sidebar-toggle:hover,
.sidebar-group[data-group="agricultura"] .sidebar-link:hover {
  color: #fff;
}

.sidebar-group[data-group="agricultura"] .sidebar-link.active {
  color: #fff;
}

/* Punto 353 - mismo criterio que el bloque de "Agricultura" de arriba
   (punto 350), aplicado ahora a "Producción Animal" (Vacunos/Ovinos/Lana/
   Equinos/Trazabilidad, y todo lo que cuelga de cada uno) con
   --animal-texto en vez de --agro-texto - a pedido de Doma, junto con
   mover "Lana" adentro (ver templates/base.html) y renombrar la sección:
   "darle a todo esto un color acorde". Mismas excepciones de hover/activo
   en blanco, por la misma razón. */
.sidebar-group[data-group="animales"] .sidebar-section,
.sidebar-group[data-group="animales"] .sidebar-link,
.sidebar-group[data-group="animales"] .sidebar-subsection,
.sidebar-group[data-group="animales"] .sidebar-subsection-sub,
.sidebar-group[data-group="animales"] .sidebar-chevron {
  color: var(--animal-texto);
}

.sidebar-group[data-group="animales"] .sidebar-toggle:hover,
.sidebar-group[data-group="animales"] .sidebar-link:hover {
  color: #fff;
}

.sidebar-group[data-group="animales"] .sidebar-link.active {
  color: #fff;
}

/* Punto 354 - mismo criterio que los bloques de "Agricultura" (punto 350)
   y "Producción Animal" (punto 353) de arriba, aplicado ahora a
   "Contabilidad" con --contabilidad-texto - a pedido de Doma: "a
   contabilidad me gustaria tambien un color como por ejemplo rojo". Acá no
   hace falta .sidebar-subsection ni .sidebar-subsection-sub en el
   selector: a diferencia de Agricultura/Producción Animal, Contabilidad no
   tiene ningún subgrupo anidado, son todos links directos. Mismas
   excepciones de hover/activo en blanco, por la misma razón. */
.sidebar-group[data-group="contabilidad"] .sidebar-section,
.sidebar-group[data-group="contabilidad"] .sidebar-link,
.sidebar-group[data-group="contabilidad"] .sidebar-chevron {
  color: var(--contabilidad-texto);
}

.sidebar-group[data-group="contabilidad"] .sidebar-toggle:hover,
.sidebar-group[data-group="contabilidad"] .sidebar-link:hover {
  color: #fff;
}

.sidebar-group[data-group="contabilidad"] .sidebar-link.active {
  color: #fff;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: relative;
  background: var(--fondo-tarjeta);
  border-bottom: 1px solid var(--borde);
  padding: 1.1rem 2rem;
}

.topbar h1 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  color: var(--acento-texto);
}

/* Ícono de ayuda al lado del título de cada pantalla (punto 340) - ver
   templates/base.html, junto a {% block heading %}. Chico y discreto (no
   negrita, tamaño de texto normal, no el de h1) para no competir con el
   título; abre la Ayuda en una pestaña nueva. */
.ayuda-icono-heading {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  color: var(--texto-muted-a);
  opacity: 0.7;
  margin-left: 0.4rem;
  vertical-align: middle;
  text-decoration: none;
  transition: opacity 0.15s, color 0.15s;
}

.ayuda-icono-heading:hover {
  opacity: 1;
  color: var(--verde-oscuro);
}

.topbar-establecimiento {
  display: block;
  font-size: 0.8rem;
  color: var(--texto-muted-a);
  margin-top: 0.15rem;
}

.topbar-usuario {
  position: absolute;
  top: 1.1rem;
  right: 2rem;
  font-size: 0.8rem;
  color: var(--texto-muted-a);
}

.topbar-usuario a {
  color: var(--verde-oscuro);
  margin-left: 0.4rem;
}

.page-body {
  padding: 1.6rem 2rem;
  flex: 1;
}

.card-panel {
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.4rem;
  margin-bottom: 1.3rem;
}

.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-muted-b);
  border-bottom: 2px solid var(--borde);
  white-space: nowrap;
}

.th-orden-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.th-orden-link:hover {
  color: var(--acento-texto);
  text-decoration: underline;
}

.th-orden-link i {
  font-size: 0.7rem;
}

.table td {
  vertical-align: middle;
  font-size: 0.9rem;
}

.badge-inactivo {
  background: var(--badge-inactivo-bg);
  color: var(--badge-inactivo-color);
}

.btn-verde {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}

.btn-verde:hover {
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
  color: #fff;
}

/* Botón flotante "Buscar caravana" (punto 242) - visible en cualquier
   pantalla, siempre en la misma posición, para no depender de navegar a
   ningún lado (ver comentario en base.html sobre por qué). z-index alto
   para quedar por encima de todo, incluido el sidebar en celular. */
.btn-buscar-flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-buscar-flotante:hover,
.btn-buscar-flotante:active {
  background: var(--verde-oscuro);
}

.filtros-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.filtros-bar .form-label {
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
  color: var(--texto-muted-b);
}

.filtros-bar .form-select,
.filtros-bar .form-control {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  height: auto;
}

.dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: linear-gradient(135deg, var(--verde-oscuro), var(--verde));
  border: none;
  color: #fff;
}

.dashboard-hero-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.dashboard-hero-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
}

svg.dashboard-hero-logo {
  color: var(--verde-oscuro);
}

.dashboard-hero-nombre {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.dashboard-hero-sub {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.85rem;
}

.dashboard-hero-buscar {
  flex: 1 1 260px;
  display: flex;
  justify-content: center;
}

.dashboard-hero-buscar-group {
  max-width: 340px;
  width: 100%;
}

.dashboard-hero-buscar-group .input-group-text {
  background: #fff;
  border: none;
  color: var(--verde-oscuro);
}

.dashboard-hero-buscar-group .form-control {
  border: none;
  font-size: 1rem;
  padding: 0.55rem 0.75rem;
}

.dashboard-hero-buscar-group .btn {
  border: none;
  white-space: nowrap;
}

.dashboard-hero-buscar-group .form-control:focus {
  box-shadow: none;
}

.dashboard-hero-stats {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.dashboard-stat {
  text-align: center;
  min-width: 70px;
}

.dashboard-stat-valor {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.dashboard-stat-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* Botones grandes de acceso rápido del Dashboard (Novedades diarias,
   Asistente IA) - reemplazan al resumen de categorías por especie que
   estaba ahí antes (ver HISTORIAL_DESARROLLO.md). Pensados sobre todo para
   el celular: bloque grande, apilado (ícono arriba, texto centrado abajo),
   con buen espacio para tocar con el dedo y una devolución visual clara al
   tocarlo (no sólo al pasar el mouse, que en el celular no existe). */
.dashboard-atajo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 140px;
  height: 100%;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 1.6rem 1rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.dashboard-atajo:hover {
  border-color: var(--verde);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  color: inherit;
}

.dashboard-atajo:active {
  transform: scale(0.98);
  background: var(--fondo-hover);
  border-color: var(--verde);
}

.dashboard-atajo-icono {
  font-size: 2.8rem;
  color: var(--verde);
  line-height: 1;
}

.dashboard-atajo-titulo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--acento-texto);
}

.dashboard-atajo-sub {
  color: var(--texto-muted-c);
  font-size: 0.9rem;
}

/* Resultado de búsqueda de una caravana para el rol "capataz" (ver
   templates/vacunos/list.html y ovinos/list.html, variable `vista_busqueda`).
   Es una lista de consulta rápida, pensada para mirarla en el celular parado
   al lado del animal: sin barra de filtros, con pocas columnas y letra
   grande. Estos tamaños aplican también en la PC (no van dentro de la
   @media) para que sea la misma pantalla en los dos lados. */
/* Los selectores llevan `.table` adelante a propósito: sin eso quedarían con
   la misma especificidad que las reglas de tabla del bloque @media de
   celular (`.table td`, `.table > :not(caption) > * > *`), que están más
   abajo en el archivo y les ganarían por orden, dejando la lista "grande"
   del mismo tamaño que cualquier otra. */
.table.lista-busqueda-grande > tbody > tr > td {
  font-size: 1.15rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.table.lista-busqueda-grande thead th {
  font-size: 0.9rem;
}

.table.lista-busqueda-grande .caravana-destacada {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--acento-texto);
  white-space: nowrap;
}

.table.lista-busqueda-grande .badge {
  font-size: 0.9rem;
}

.busqueda-capataz .form-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--acento-texto);
}

.busqueda-capataz .form-control {
  font-size: 1rem;
  padding: 0.55rem 0.75rem;
}

/* ==========================================================================
   CELULAR Y TABLET (hasta 991.98px, el corte "lg" de Bootstrap)
   ==========================================================================
   Todo lo de arriba está pensado para pantalla de PC. En un celular eso
   daba dos problemas grandes:

   1. La barra lateral ocupaba 240px FIJOS también en el celular. En una
      pantalla de 360px de ancho, al contenido le quedaban ~120px: por eso
      todo se veía diminuto y apretado, más allá del tamaño de la letra.
      Acá pasa a ser un panel que se desliza POR ENCIMA del contenido
      (position: fixed), así el contenido siempre usa el ancho completo.
   2. Los tamaños de letra estaban entre 0.7rem y 0.97rem (11-15px), que en
      un celular obligan a hacer zoom. Además, un campo de formulario de
      menos de 16px hace que el iPhone haga zoom SOLO al tocarlo (y después
      hay que volver a alejar a mano) - por eso todos los campos quedan en
      1rem/16px como mínimo, que es el valor exacto que evita ese
      comportamiento.

   El escritorio no se toca: nada de esto aplica arriba de 991.98px. */
@media (max-width: 991.98px) {

  /* --- Base: un punto más de tamaño en todo el sistema --- */
  body {
    font-size: 1.06rem;
    line-height: 1.5;
  }

  /* --- Barra lateral: panel deslizable por encima del contenido --- */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1045;
    width: 82vw;
    max-width: 320px;
    height: 100vh;
    /* Oculta por defecto: se corre hacia afuera de la pantalla en vez de
       usar display:none, para que la transición se vea deslizando. */
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
    padding: 1rem 0;
  }

  /* En el celular, quien manda es la clase sidebar-abierta (ver base.html):
     se ignora el sidebar-hidden que se recuerda para el escritorio, para no
     arrancar con el menú abierto tapando la pantalla. */
  .app-shell.sidebar-hidden .sidebar {
    width: 82vw;
    max-width: 320px;
    padding: 1rem 0;
    overflow-y: auto;
  }

  .app-shell.sidebar-abierta .sidebar {
    transform: translateX(0);
  }

  /* Fondo oscuro detrás del menú abierto: tocarlo lo cierra. */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.45);
  }

  .app-shell.sidebar-abierta .sidebar-backdrop {
    display: block;
  }

  /* El botón ☰ siempre a la vista (en escritorio sólo aparece si se ocultó
     la barra a mano), y más grande para tocarlo con el dedo. */
  .show-sidebar-btn,
  .app-shell.sidebar-hidden .show-sidebar-btn {
    display: inline-flex;
    align-items: center;
    font-size: 1.35rem;
    padding: 0.35rem 0.7rem;
  }

  /* El de cerrar, dentro del panel, también más grande. */
  .sidebar-collapse-btn {
    font-size: 1.3rem;
    padding: 0.4rem 0.6rem;
  }

  /* Links del menú: más altos, para que se puedan tocar sin errarle. */
  .sidebar-brand { font-size: 1.25rem; }
  /* Misma jerarquía de 4 niveles que en escritorio (ver el comentario junto
     a .sidebar-section más arriba en este archivo), sólo que todo un poco
     más grande para tocar con el dedo. */
  .sidebar-section { font-size: 1.22rem; padding: 1rem 1.2rem 0.4rem 1.2rem; }
  .sidebar-subsection { font-size: 1.02rem; padding: 0.7rem 1.2rem 0.2rem 1.7rem; }
  .sidebar-subsection-sub { font-size: 0.92rem; padding: 0.6rem 1.2rem 0.2rem 2.3rem; }
  .sidebar-link { font-size: 1.15rem; padding: 0.75rem 1.2rem; }
  .sidebar-link.sidebar-link-sub { font-size: 1.06rem; }
  .sidebar-link.sidebar-link-sub2 { font-size: 0.96rem; }
  .sidebar-link.sidebar-link-sub3 { font-size: 0.86rem; }
  .sidebar-chevron { font-size: 0.85rem; }

  /* --- Barra superior: ☰ y título en la misma línea --- */
  /* Se pasa a flex para que el botón del menú quede al lado del título en
     vez de robarle un renglón entero (el h1 es un bloque y, si no, lo
     empuja hacia abajo). El nombre del establecimiento y el usuario van en
     renglones aparte, a lo ancho. */
  .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
  }

  .topbar h1 {
    font-size: 1.3rem;
    flex: 1;
    min-width: 0;
  }

  .show-sidebar-btn { margin-right: 0; }

  .topbar-establecimiento {
    width: 100%;
    font-size: 0.92rem;
    margin-top: 0;
  }

  /* El usuario/cerrar sesión deja de estar posicionado sobre el título (no
     entra al lado en una pantalla angosta) y pasa a ir debajo. */
  .topbar-usuario {
    position: static;
    width: 100%;
    margin-top: 0;
    font-size: 0.92rem;
  }

  .page-body { padding: 1rem 0.85rem; }
  .card-panel { padding: 1rem; border-radius: 12px; margin-bottom: 1rem; }

  /* --- Tablas: letra más grande y filas más altas --- */
  .table thead th { font-size: 0.9rem; }
  .table td { font-size: 1rem; }
  .table > :not(caption) > * > * { padding: 0.6rem 0.5rem; }

  /* table-sm de Bootstrap achica todavía más; en el celular se lo iguala al
     tamaño normal, si no las listas quedan ilegibles. */
  .table-sm > :not(caption) > * > * { padding: 0.55rem 0.5rem; }

  /* Aviso de que la tabla se desplaza al costado: se ve el borde cortado. */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* --- Formularios: 16px mínimo (evita el zoom automático del iPhone) --- */
  .form-control,
  .form-select,
  .filtros-bar .form-control,
  .filtros-bar .form-select {
    font-size: 1rem;
    padding: 0.5rem 0.7rem;
    height: auto;
  }

  .form-label,
  .filtros-bar .form-label {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }

  .form-text { font-size: 0.88rem; }

  /* Los filtros dejan de ir en una fila apretada y pasan a ocupar el ancho. */
  .filtros-bar { gap: 0.75rem; }
  .filtros-bar > div { width: 100% !important; }
  .filtros-bar > div.d-flex { width: auto !important; }

  /* Checkboxes y radios más grandes, que son los más difíciles de acertar. */
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
  }

  .form-check-label { font-size: 1rem; }

  /* --- Botones: alto mínimo cómodo para el dedo --- */
  .btn { font-size: 1rem; padding: 0.5rem 0.9rem; }
  .btn-sm { font-size: 0.95rem; padding: 0.45rem 0.7rem; }
  .badge { font-size: 0.85rem; }

  /* --- Dashboard --- */
  /* A pedido de Doma (2026-09-12): "en el celular el dashboard [se ve] muy
     chico" - se agranda todo lo de esta pantalla puntual en el celular, sin
     tocar el tamaño de letra de ninguna otra pantalla del sistema (el
     resto ya tenía su propio ajuste de celular, más moderado). */
  .dashboard-hero-nombre { font-size: 1.7rem; }
  .dashboard-hero-sub { font-size: 1rem; }
  .dashboard-hero-logo { width: 52px; height: 52px; }
  .dashboard-hero-stats { gap: 1.1rem; width: 100%; justify-content: space-around; }
  .dashboard-hero-buscar-group .form-control { font-size: 1.05rem; padding: 0.7rem 0.85rem; }
  .dashboard-atajo { min-height: 130px; }
  .dashboard-atajo-icono { font-size: 3.2rem; }
  .dashboard-atajo-titulo { font-size: 1.45rem; }
  .dashboard-atajo-sub { font-size: 1.05rem; }

  /* "Próximas tareas" (ver `dashboard-tareas` en templates/index.html):
     título y tabla más grandes que el tamaño general de celular (que ya
     tiene su propio ajuste, pensado para tablas más densas con más
     columnas - acá hay lugar de sobra para que se vea más grande). */
  .dashboard-tareas h6 { font-size: 1.2rem; }
  .dashboard-tareas .table thead th { font-size: 1rem; }
  .dashboard-tareas .table td { font-size: 1.1rem; }

  .alert { font-size: 1rem; }
}

/* Celular chico (hasta 575.98px): se recorta un poco más el margen lateral
   para ganar ancho útil, sin volver a achicar la letra. */
@media (max-width: 575.98px) {
  .page-body { padding: 0.85rem 0.6rem; }
  .card-panel { padding: 0.85rem; }
  .topbar { padding: 0.8rem 0.75rem; }

  /* Elementos que sólo aportan en pantalla grande y en el celular no valen
     el ancho que ocupan - ej. la lupa a la izquierda del buscador del
     Dashboard, que quedó redundante al agregarle el botón "Buscar". */
  .ocultar-en-celular { display: none !important; }
}

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .sidebar-backdrop { display: none !important; }
  .content, .page-body { padding: 0 !important; }
  .card-panel { border: 1px solid #ccc !important; break-inside: avoid; }

  /* La hoja impresa/PDF siempre se fuerza a colores claros, sea cual sea el
     tema activo en pantalla (incluido Oscuro) - imprimir con fondo oscuro
     desperdiciaría tinta y en PDF quedaría ilegible sobre "papel". */
  body, .card-panel, .page-body {
    background: #fff !important;
    color: #24291f !important;
  }
  .table thead th, .filtros-bar .form-label {
    color: #5a6155 !important;
  }

  /* Impresión acotada: al imprimir sólo una sección (ej. historial sanitario
     de un animal), body lleva la clase "imprimir-sanidad" y se ocultan los
     elementos marcados con "no-print-sanidad" además del sidebar/topbar. */
  body.imprimir-sanidad .no-print-sanidad { display: none !important; }

  /* Informe Contable (informes/contable.html): el detalle línea por línea de
     cada subcategoría está colapsado en pantalla (para que la vista general
     no quede eterna), pero Doma lo pidió "completo" para pasarle al
     contador - al imprimir/guardar como PDF se fuerza a mostrar igual,
     esté expandido o no en ese momento en la pantalla. */
  .informe-contable-detalle { display: table-row !important; }
}