/**
 * base.css - SINGLE SOURCE OF TRUTH
 * Variables CSS, neumorfismo, y estilos base para toda la aplicacion Mint Hub.
 * NUNCA duplicar estas definiciones en archivos de modulo.
 */

/* ══════════════════════════════════════════
   CSS VARIABLES - LIGHT MODE (DEFAULT)
   ══════════════════════════════════════════ */
:root {
    /* Neumorphism */
    --neu-flat-shadow1: #d1e3d6;
    --neu-flat-shadow2: #ffffff;
    --neu-bg: #f0fdf4;
    --neu-text: #0f1a14;
    --neu-border: #e2e8f0;
    --neu-card: #ffffff;

    /* Brand */
    --mint-primary: #2ecc71;
    --mint-secondary: #163a24;
    --mint-accent: #f59e0b;
    --mint-error: #ef4444;
    --mint-info: #3b82f6;
    --mint-surface: #f0fdf4;
}

/* El modo noche (sus variables y todo lo `.dark`) vive entero en dark.css. */

/* ══════════════════════════════════════════
   BASE RESETS & TYPOGRAPHY
   ══════════════════════════════════════════ */
body {
    font-family: 'Inter', sans-serif;
    background: var(--neu-bg);
    color: var(--neu-text);
    transition: background 0.3s, color 0.3s;
    overflow-x: hidden;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ══════════════════════════════════════════
   NEUMORPHISM CLASSES
   ══════════════════════════════════════════ */
.neu-flat {
    background: var(--neu-bg);
    box-shadow: 8px 8px 16px var(--neu-flat-shadow1),
               -8px -8px 16px var(--neu-flat-shadow2);
}

.neu-sm {
    background: var(--neu-bg);
    box-shadow: 4px 4px 8px var(--neu-flat-shadow1),
               -4px -4px 8px var(--neu-flat-shadow2);
}

.neu-inset {
    background: var(--neu-bg);
    box-shadow: inset 4px 4px 8px var(--neu-flat-shadow1),
               inset -4px -4px 8px var(--neu-flat-shadow2);
}

.neu-btn {
    background: var(--neu-bg);
    box-shadow: 4px 4px 8px var(--neu-flat-shadow1),
               -4px -4px 8px var(--neu-flat-shadow2);
    transition: all .15s;
    cursor: pointer;
    border: none;
    color: var(--neu-text);
}

.neu-btn:active {
    box-shadow: inset 2px 2px 5px var(--neu-flat-shadow1),
               inset -2px -2px 5px var(--neu-flat-shadow2);
    transform: scale(0.97);
}

.neu-pressed {
    background: var(--neu-bg);
    box-shadow: inset 6px 6px 12px var(--neu-flat-shadow1),
               inset -6px -6px 12px var(--neu-flat-shadow2);
}

.neu-icon {
    box-shadow: 4px 4px 8px var(--neu-flat-shadow1),
               -4px -4px 8px var(--neu-flat-shadow2);
}

/* ══════════════════════════════════════════
   FOCUS STATES
   ══════════════════════════════════════════ */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: inset 4px 4px 8px var(--neu-flat-shadow1),
               inset -4px -4px 8px var(--neu-flat-shadow2),
               0 0 0 2px var(--mint-primary);
}

/* ══════════════════════════════════════════
   SMOOTH TRANSITIONS (GLOBAL)
   ══════════════════════════════════════════ */
body, aside, header, main, div, section,
input, select, button, textarea, nav, a {
    transition: background-color 0.3s ease,
               border-color 0.3s ease,
               box-shadow 0.3s ease,
               color 0.3s ease;
}

/* ══════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════ */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* La barra de la importación.
   Entre bloque y bloque se queda quieta unos segundos —el ancho sólo salta
   cuando la nube confirma 100 animales más— y quieta se lee como "se colgó",
   que es justo cuando la gente vuelve a apretar el botón. Las rayas dicen "sigo
   trabajando" sin inventar un avance: el número de al lado es el dato real. Se
   quitan al terminar, así que si de verdad se corta, la barra queda muerta.

   El color va acá y NO con `bg-emerald-500`: `dark.css` pisa esa clase de
   Tailwind con `background: linear-gradient(...) !important` y de noche se
   comía las rayas. Con clase propia nadie la toca. */
@keyframes subiendoRayas {
    from { background-position: 0 0; }
    to   { background-position: 1.25rem 0; }
}
.barra-import { background-color: #2ecc71; }
.barra-import.subiendo {
    background-image: linear-gradient(115deg,
        rgba(255,255,255,.32) 25%, transparent 25%, transparent 50%,
        rgba(255,255,255,.32) 50%, rgba(255,255,255,.32) 75%, transparent 75%);
    background-size: 1.25rem 1.25rem;
    animation: subiendoRayas .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .barra-import.subiendo { animation: none; } }

.fade-in       { animation: fadeIn 1s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-fadeIn  { animation: fadeIn 0.3s ease-out forwards; }
.animate-count   { animation: countUp 0.5s ease-out forwards; }

/* ══════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════ */
.modal-overlay,
.modal-backdrop {
    background: rgba(0, 0, 0, .3);
    backdrop-filter: blur(4px);
    animation: fadeIn .15s ease;
}

.modal-card {
    animation: slideUp .2s ease;
}

/* ══════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════ */
tr:hover td {
    background: rgba(209, 250, 229, .15);
}

/* ══════════════════════════════════════════
   STAT NUMBERS & CHARTS
   ══════════════════════════════════════════ */
.stat-num       { transition: all .3s ease; }
.bar-item,
.bar-col        { transition: height .5s ease; }
.stat-card      { transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-4px); }

/* ══════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════ */
.animal-card { transition: transform .2s, box-shadow .3s; }
.animal-card:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 24px var(--neu-flat-shadow1),
               -12px -12px 24px var(--neu-flat-shadow2);
}

/* ══════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════ */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(46, 204, 113, 0.3); border-radius: 4px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ══════════════════════════════════════════
   GLASSMORPHISM
   ══════════════════════════════════════════ */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-overlay {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
.sidebar-link.active {
    background: var(--neu-bg);
    box-shadow: inset 4px 4px 8px var(--neu-flat-shadow1),
               inset -4px -4px 8px var(--neu-flat-shadow2);
    color: var(--mint-primary);
}

/* ══════════════════════════════════════════
   GDP PREVIEW
   ══════════════════════════════════════════ */
#preview-gdp.positivo { color: #10b981; }
#preview-gdp.negativo { color: #ef4444; }

/* ══════════════════════════════════════════
   MOBILE & RESPONSIVENESS UTILITIES
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ml-72 { margin-left: 0 !important; }
    .lg\:left-72 { left: 0 !important; }
    .lg\:translate-x-0 { transform: translateX(-100%); }
}
/* Hoja de abajo sólo en el teléfono: en la tablet el formulario es un diálogo
   centrado, con el ancho que le da su pantalla (max-w-lg, max-w-2xl…). */
@media (max-width: 767px) {
    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 2rem 2rem 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        max-height: 92vh !important;
    }
}

/* Bottom Navigation Bar for Mobile */
#mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--neu-card);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--neu-border);
    z-index: 45;
    padding: 0 10px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}

@media (max-width: 1024px) {
    #mobile-bottom-nav { display: flex; justify-content: space-around; align-items: center; }
    main { padding-bottom: 90px !important; }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #94a3b8;
    /* 11px y no 9: es la barra que el empleado usa con el pulgar, al sol y con
       el telefono sucio. Con 9px las cinco etiquetas eran los ultimos textos
       ilegibles que quedaban en la app. Entran igual en 375px: se midio. */
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;   /* compensa el punto extra para que no se corten */
    transition: all 0.2s;
    width: 20%;
}

.bottom-nav-item.active {
    color: var(--mint-primary);
}

.bottom-nav-item .material-symbols-outlined {
    font-size: 24px;
}

/* Responsive Grid Helpers */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Sidebar Toggle State */
#main-sidebar.show {
    transform: translateX(0) !important;
}

/* Table Responsiveness */
.responsive-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem;
    background: var(--neu-card);
}

@media (max-width: 768px) {
    table thead { display: none; }
    table, table tbody, table tr, table td { display: block; width: 100%; }
    table tr { margin-bottom: 1rem; border-bottom: 1px solid var(--neu-border); padding: 1rem; }
    table td { text-align: right; padding-left: 50%; position: relative; border: none; }
    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        text-align: left;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 10px;
        color: #94a3b8;
    }
}


/* ── QUE SE VEA EN TELEVISOR ────────────────────────────────────────────────
 *
 * El dueño pidió que todo sirva en teléfono, tablet, computadora y televisor.
 * Los tres primeros ya estaban; el televisor no: la app usa etiquetas de 9 y 10
 * píxeles por todos lados y a tres metros de distancia eso no se lee.
 *
 * Se arregla escalando la página entera y no tocando 255 etiquetas una por una.
 * `zoom` agranda TODO —texto, botones, separaciones— manteniendo las
 * proporciones, así que de paso los botones chicos dejan de ser chicos.
 *
 * Medido: a 1920 sin esto quedaban 260 textos por debajo de 11px.
 *
 * El corte va en 1600 y no en 1280: un monitor de computadora normal se ve de
 * cerca y no necesita ayuda. Arriba de 1600 ya es pantalla grande o televisor.
 */
@media (min-width: 1600px) {
  html { zoom: 1.25; }
}
@media (min-width: 2400px) {
  html { zoom: 1.6; }
}

/* ── EL ZOOM ROMPE LAS ALTURAS EN `vh` ──────────────────────────────────────
 *
 * `zoom` en <html> escala todo, pero las unidades de ventana NO se ajustan: un
 * `max-h-[92vh]` se calcula contra la pantalla SIN zoom y después se agranda un
 * 25 %. Resultado: el modal puede medir más que la pantalla, y como su cabecera
 * está arriba, **la X de cerrar queda fuera de la vista**. Se entra al modal y
 * no se puede salir.
 *
 * Medido el 2026-09-21 en el parte de la Bitácora: la tarjeta ocupaba 1292 px
 * visuales en una ventana de 1206, con la X en `top: -13`. Sólo pasa de 1600 px
 * para arriba, que es justo donde trabaja el dueño.
 *
 * El arreglo no es tocar los 27 modales: `.modal-overlay` es `fixed inset-0`,
 * así que SU altura sí es la real. Limitar la tarjeta contra el contenedor en
 * vez de contra `vh` funciona con zoom y sin él.
 *
 * Y `min-height: 0` en el hijo que scrollea porque un hijo de un contenedor
 * flex no baja de la altura de su contenido salvo que se le diga: sin eso, el
 * `overflow-y:auto` no scrollea y la tarjeta se desborda igual.
 */
/* Y si aun así no entra, la tarjeta ENTERA scrollea. Sin esto, las que no
   tienen un cuerpo con su propio scroll (la ficha del lote, 2026-09-25) quedaban
   cortadas: lo de abajo existía pero no se podía ver ni alcanzar. En las que sí
   lo tienen no cambia nada: la tarjeta no desborda y este scroll no aparece. */
.modal-overlay > .modal-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-card > form,
.modal-card > [id$="-cuerpo"],
.modal-card > .overflow-y-auto { min-height: 0; }

/* ── UN PISO PARA EL TEXTO ──────────────────────────────────────────────────
 *
 * Medido el 2026-09-17 en Animales a 375px: un texto de 7px, ocho de 8 y seis
 * de 9. Eso está por debajo de cualquier mínimo legible — en el sol del corral,
 * con el teléfono sucio y a un brazo de distancia, no se lee. Y el que lo usa
 * no se va a quejar: va a entrecerrar los ojos y seguir, o adivinar el dato.
 *
 * Se sube el piso a 11px tocando las clases, no las 1.100 etiquetas del HTML.
 * El salto es chico (7→11, 8→11, 9→11) y a propósito: agrandar más reacomodaría
 * las pantallas, y el desborde horizontal se midió limpio en los cuatro tamaños.
 * Después de este cambio se volvió a medir y sigue limpio.
 *
 * Si algún día se rediseña de verdad, esto se reemplaza por una escala de
 * tipografía como la gente. Mientras tanto, es el piso.
 *
 * ⚠️ Van con `body` adelante a propósito. Tailwind viene por CDN y GENERA sus
 * reglas en tiempo de ejecución, inyectándolas en un <style> que queda DESPUÉS
 * de este archivo: a igual especificidad gana la suya y el piso no se aplicaba.
 * `body .clase` (0,1,1) le gana a `.clase` (0,1,0) sin recurrir a !important.
 */
body .text-\[7px\],
body .text-\[8px\],
body .text-\[9px\],
body .text-\[10px\] { font-size: 11px; }

/* ── Lo que sólo ve el dueño / sólo puede tocar quien carga ─────────────────
   Escondido POR DEFECTO y se muestra cuando la base confirma el rol
   (utils.js → aplicarPermisosDePantalla). Así no hay un instante en que un
   invitado alcance a ver la plata mientras se pregunta el rol.
   Es la pantalla: la barrera de verdad es la RLS (migrations/58-59). */
body:not(.es-dueno) .solo-dueno { display: none !important; }
body:not(.puede-cargar) .solo-carga { display: none !important; }
/* El asistente (migrations/64) anota gastos pero no ve totales ni resúmenes de dinero. */
body.es-asistente .no-asistente { display: none !important; }
body:not(.es-asistente) .solo-asistente { display: none !important; }

/* ── EL TELÉFONO (diseño aprobado por el dueño, 2026-10-05) ─────────────────
 *
 * Lienzo: https://claude.ai/artifact/HtqW3dvYFAXGu5ydky6hoH
 * Sólo en pantallas chicas: la computadora queda exactamente igual.
 * Va por las clases compartidas (neu-*, modal-card) y no pantalla por pantalla:
 * así las 40 pantallas cambian juntas y una nueva nace con el mismo aspecto.
 */

/* La barra de abajo vive hasta 1024 (tablet incluida), así que su piel también. */
@media (max-width: 1024px) {
  #mobile-bottom-nav {
    height: calc(72px + env(safe-area-inset-bottom));
    padding: 4px 6px env(safe-area-inset-bottom);
    background: #163A24; border-top: 0; box-shadow: none; backdrop-filter: none;
  }
  .bottom-nav-item {
    color: #A9CDB8; min-height: 52px; text-transform: none; letter-spacing: 0;
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; font-weight: 700; font-size: 12px;
  }
  .bottom-nav-item.active { color: #2ECC71; }
  .bottom-nav-item .pildora {
    width: 48px; height: 30px; border-radius: 15px; background: #2ECC71;
    display: flex; align-items: center; justify-content: center;
  }
  .bottom-nav-item .pildora .material-symbols-outlined { color: #0F1A14; font-weight: 700; }
  .bottom-nav-item.anotar > span:last-child { color: #E3F3EA; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

  /* Hoja de "Anotar" */
  #hoja-anotar { position: fixed; inset: 0; z-index: 70; display: none; }
  #hoja-anotar.abierta { display: flex; flex-direction: column; justify-content: flex-end; }
  #hoja-anotar .fondo { position: absolute; inset: 0; background: rgba(15, 26, 20, .55); }
  #hoja-anotar section {
    position: relative; background: #FFFFFF; color: #0F1A14; border-radius: 28px 28px 0 0;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto;
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; animation: subeHoja .2s ease;
  }
  #hoja-anotar .asa { display: block; margin: 0 auto 8px; width: 44px; height: 5px; border-radius: 3px; background: #C9D6CD; }
  #hoja-anotar .titulo { display: flex; justify-content: space-between; align-items: center; }
  #hoja-anotar h2 { margin: 0; font-size: 22px; font-weight: 700; color: #163A24; }
  #hoja-anotar .titulo button { width: 44px; height: 44px; border-radius: 22px; background: #F3F7F2; color: #163A24; display: flex; align-items: center; justify-content: center; }
  #hoja-anotar .ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  #hoja-anotar .grupo { grid-column: 1 / -1; margin: 12px 0 0; font-size: 13px; font-weight: 700; color: #4E6157; text-transform: uppercase; letter-spacing: .06em; }
  #hoja-anotar .op {
    min-height: 92px; border-radius: 18px; background: #F3F7F2; color: #0F1A14; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; font-weight: 700; text-align: center; padding: 6px;
  }
  #hoja-anotar .op .material-symbols-outlined { width: 44px; height: 44px; border-radius: 14px; background: #FFFFFF; color: #163A24; display: flex; align-items: center; justify-content: center; }
  @keyframes subeHoja { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { #hoja-anotar section { animation: none; } }
}

@media (max-width: 767px) {
  html:not(.dark) { --neu-bg: #F3F7F2; --neu-card: #FFFFFF; --neu-border: #E6EEE8; --neu-text: #0F1A14; }
  body { font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; }
  html:not(.dark) body { background: #F3F7F2; }

  /* Tarjetas planas: blancas, radio 18, sin la sombra doble del neumorfismo. */
  /* En modo noche se quedan las tarjetas de dark.css: sólo cambia el radio. */
  html:not(.dark) :is(.neu-flat, .neu-sm, .stat-card) { background: #FFFFFF !important; box-shadow: none !important; }
  .neu-flat, .neu-sm, .stat-card { border-radius: 18px; }
  html:not(.dark) .neu-flat, html:not(.dark) .neu-sm { border: 1px solid #E6EEE8; }
  .neu-btn { background: var(--neu-card); box-shadow: none !important; border: 1px solid var(--neu-border); min-height: 44px; }
  .neu-inset { background: var(--neu-bg); box-shadow: none !important; }
  /* Los campos se distinguen por el relleno gris, no por la sombra hundida. */
  html:not(.dark) .neu-inset { background-color: #F3F7F2 !important; border-radius: 14px; }

  /* Barra de arriba simple: menos aire entre botones para que entre en 360px. */
  header.fixed { padding-left: 16px !important; padding-right: 12px !important; }
  header.fixed .gap-4, header.fixed .gap-3 { gap: 4px !important; }
  header.fixed .neu-btn { padding: 8px !important; border: 0; }
  header.fixed .mr-4 { margin-right: 0 !important; }
  /* Encabezados dentro de la página (Mortalidad y otras): que bajen de renglón. */
  header:not(.fixed) > div.flex { flex-wrap: wrap; gap: 8px; max-width: 100%; }
  header:not(.fixed) .mr-4 { margin-right: 0 !important; }
  header.fixed > div:first-child { min-width: 0; flex-shrink: 1; overflow: hidden; }

  /* Los números grandes, con la letra de los números. */
  .text-2xl.font-black, .text-3xl.font-black, .text-4xl.font-black, .text-5xl.font-black,
  .text-2xl.font-extrabold, .text-3xl.font-extrabold {
    font-family: 'Big Shoulders Display', 'Inter', sans-serif; font-weight: 800; letter-spacing: 0;
  }

  /* Dedo, no puntero: nada que se toque mide menos de 44px. */
  button, select, input:not([type=checkbox]):not([type=radio]):not([type=range]), [role=button] { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; } /* menos de 16 y Safari hace zoom al escribir */

  /* Formularios como hoja de abajo, con el botón de guardar siempre visible. */
  .modal-card { overflow-y: auto; box-shadow: none !important; padding-bottom: env(safe-area-inset-bottom); }
  .modal-card :is(div, footer):has(> button[type=submit]) {
    position: sticky; bottom: 0; z-index: 2; background: var(--neu-card);
    margin-top: 12px; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--neu-border);
  }
  .modal-card button[type=submit] { min-height: 52px; background: #2ECC71; color: #0F1A14; }
}

/* ── Piezas del diseño del teléfono que usan las pantallas ──────────────────
 * .chapeta  → el sello: la chapeta amarilla con el número del animal.
 *             window.chapeta(numero) en utils.js arma el HTML.
 * .solo-movil / .solo-pc → para pantallas que necesitan otro acomodo en el
 *             teléfono sin tocar la computadora (mismo dato, dos vistas).
 * .fila-movil → renglón de lista: chapeta o punto · título y detalle · número.
 */
.chapeta {
  width: 44px; height: 50px; flex-shrink: 0; position: relative; box-sizing: border-box;
  background: #F2C230; border-radius: 13px 13px 9px 9px;
  display: inline-flex; align-items: flex-end; justify-content: center; padding: 0 2px 6px;
  font-family: 'Big Shoulders Display', 'Inter', sans-serif; font-weight: 800; font-size: 15px; line-height: 1;
  color: #2B2104; overflow: hidden; white-space: nowrap;
}
.chapeta::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
.chapeta.grande { width: 84px; height: 98px; border-radius: 24px 24px 16px 16px; font-size: 26px; padding-bottom: 12px; }
.chapeta.grande::before { top: 12px; width: 16px; height: 16px; margin-left: -8px; }
.solo-movil { display: none !important; }
/* Lista como una tarjeta blanca con renglones divididos (teléfono y computadora). */
.fila-movil { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  border-bottom: 1px solid var(--neu-border); text-decoration: none; color: inherit; }
.fila-movil:last-child { border-bottom: 0; }
.fila-movil .t { flex: 1; min-width: 0; }
.fila-movil .t b { display: block; font-size: 16px; }
.fila-movil .t span { font-size: 13px; color: #4E6157; }
.fila-movil .n { text-align: right; font-family: 'Big Shoulders Display', 'Inter', sans-serif; font-weight: 800; font-size: 22px; color: #163A24; }
.lista-movil { background: var(--neu-card); border-radius: 18px; overflow: hidden; }
@media (max-width: 767px) {
  .solo-movil { display: revert !important; }
  .solo-movil.flex { display: flex !important; }
  .solo-movil.grid { display: grid !important; }
  .solo-pc { display: none !important; }


  /* Títulos como en el diseño: en minúscula normal, sin letras espaciadas. */
  main h1, main h2, main h3, header h1, header h2 { text-transform: none !important; letter-spacing: 0 !important; }
  main h1, header h1, main > div h2.text-2xl, main > header h2 { font-size: 24px !important; color: #163A24; }
  .tracking-widest, .tracking-\[0\.2em\] { letter-spacing: .04em !important; }
}
@media (max-width: 767px) {
  /* Barra de arriba simple: título y, a lo más, la campana. */
  header .boton-noche, #bell-wrapper .boton-noche, #user-name-display, #ceba-sync-indicator.synced { display: none !important; }
  header button[onclick*="toggleSidebar"], header [data-abre-menu] { display: none !important; }
  .volver-movil { width: 44px; height: 44px; border-radius: 22px; flex-shrink: 0; color: #163A24;
    display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none; }
}
@media (max-width: 767px) {
  /* El ☰ flotante de algunas pantallas tapaba el título: en el teléfono el menú está en "Más". */
  #btn-mobile-menu, body > [data-abre-menu] { display: none !important; }
}
@media (max-width: 767px) {
  /* Nada en MAYÚSCULAS en el teléfono: el diseño va en minúscula normal. */
  main .uppercase, header .uppercase, .modal-card .uppercase { text-transform: none !important; }
}
@media (max-width: 767px) {
  /* Título de la barra de arriba: la letra del texto (la de números sólo va en números). */
  header h1, header h2, main h1 { font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif !important; font-weight: 700 !important; }
  .volver-movil { vertical-align: middle; margin: -10px 2px -8px -10px; }
  .volver-movil + h1, .volver-movil + h2, #page-title-display { display: inline-block !important; vertical-align: middle; max-width: calc(100vw - 150px) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body :is(h1, h2)[data-titulo-movil][data-movil]:is(#page-title-display, *) {
    font-size: 0 !important; max-width: none !important; overflow: visible !important; white-space: nowrap; }
  html body :is(h1, h2)[data-titulo-movil][data-movil] > * { display: none !important; }
  [data-titulo-movil]::after { content: attr(data-titulo-movil); font-size: 24px; line-height: 1.2; color: #163A24; }
  /* La flecha y el título en el mismo renglón; lo demás (subtítulo) baja. */
  .con-volver { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; }
  .con-volver > :not(.volver-movil):not([data-movil]) { flex-basis: 100%; }
  header [onclick*="DarkMode"], main [onclick*="DarkMode"] { display: none !important; }
}
@media (max-width: 767px) {
  /* Mismo tamaño de título en todas las pantallas. */
  html body #page-title-display, html body .volver-movil + h1, html body .volver-movil + h2 { font-size: 24px !important; line-height: 1.2 !important; }
}
@media (max-width: 767px) {
  /* .solo-movil no le gana a "hidden": lo escondido sigue escondido en el teléfono. */
  .solo-movil.hidden { display: none !important; }   /* sólo la clase: [hidden] se usa a propósito para no correr el espaciado */
}

/* ── "Más" del teléfono, como el de Devlot (2026-10-07) ── */
#pantalla-mas { display: none; }
@media (max-width: 1024px) {
  #pantalla-mas.abierta { display: block; position: fixed; inset: 0 0 calc(72px + env(safe-area-inset-bottom)) 0; z-index: 60;
    overflow-y: auto; background: #F3F7F2; font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; color: #0F1A14; }
  .mas-cont { max-width: 640px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px 24px; display: flex; flex-direction: column; gap: 16px; }
  .mas-titulo { margin: 0; font-size: 28px; font-weight: 700; color: var(--tinta-movil, #163A24); }
  .mas-cuenta, .mas-buscar, .mas-mod, .mas-ajustes { background: #FFFFFF; }
  .mas-cuenta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: inherit; }
  .mas-avatar { width: 44px; height: 44px; flex: none; border-radius: 22px; display: flex; align-items: center; justify-content: center;
    background: #163A24; color: #FFFFFF; font-weight: 700; font-size: 15px; }
  .mas-cuenta-t { flex: 1; min-width: 0; }
  .mas-cuenta-t b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mas-cuenta-t span { font-size: 13px; color: #4E6157; }
  .mas-buscar { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 14px; color: #4E6157; }
  .mas-buscar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: inherit; min-height: 44px; }
  .mas-grupo { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4E6157; }
  .mas-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mas-mod { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 92px; padding: 14px 12px;
    border-radius: 16px; text-decoration: none; color: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; }
  .mas-mod[hidden], .mas-sec[hidden] { display: none !important; }
  .mas-mod .material-symbols-outlined { color: var(--tinta-movil, #163A24); font-size: 24px; }
  .mas-ajustes { border-radius: 16px; overflow: hidden; }
  .mas-ajustes > * { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 14px; border: 0;
    border-top: 1px solid #E6EEE8; background: transparent; color: inherit; text-decoration: none; font: inherit; font-size: 16px; text-align: left; }
  .mas-ajustes > *:first-child { border-top: 0; }
  .mas-ajustes .f { flex: 1; }
  .mas-salir { color: #B3261E !important; }
  .mas-switch { width: 50px; height: 30px; flex: none; border-radius: 15px; background: #C9D6CD; position: relative; transition: background .2s; }
  .mas-switch > span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
  .mas-switch.on { background: #2ECC71; }
  .mas-switch.on > span { left: 23px; }
  .mas-nada { color: #4E6157; padding: 4px; }
  @media (prefers-reduced-motion: reduce) { .mas-switch, .mas-switch > span { transition: none; } }
}
@media (max-width: 1024px) {
  #mobile-bottom-nav.mas-abierto .bottom-nav-item.active { color: #A9CDB8; }
  #mobile-bottom-nav.mas-abierto .mas-tab { color: #2ECC71; }
}
/* "Ver más" igual en todas: un renglón de tarjeta blanca con flecha, como en "Más".
   .ver-mas-fila y details.vm, en todos los tamaños; details.ver-mas y .vermas
   sólo en el teléfono (en la computadora esas pantallas esconden el summary). */
.ver-mas-fila, details.vm > summary {
  display: flex !important; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; margin-top: 4px;
  background: var(--neu-card, #FFFFFF); border-radius: 16px; border: 1px solid #E6EEE8; list-style: none; cursor: pointer;
  font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--tinta-movil, #163A24);
  text-align: left; width: 100%; box-sizing: border-box; }
.ver-mas-fila::-webkit-details-marker, details.vm > summary::-webkit-details-marker { display: none; }
.ver-mas-fila::after, details.vm > summary::after {
  content: "expand_more"; font-family: 'Material Symbols Outlined'; font-size: 24px; margin-left: auto; color: #4E6157; transition: transform .2s; }
details[open] > summary.ver-mas-fila::after, details.vm[open] > summary::after { transform: rotate(180deg); }
@media (max-width: 767px) {
  details.ver-mas > summary, details.vermas > summary {
    display: flex !important; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; margin-top: 4px;
    background: var(--neu-card, #FFFFFF); border-radius: 16px; border: 1px solid #E6EEE8; list-style: none; cursor: pointer;
    font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--tinta-movil, #163A24);
    text-align: left; width: 100%; box-sizing: border-box; }
  details.ver-mas > summary::-webkit-details-marker, details.vermas > summary::-webkit-details-marker { display: none; }
  details.ver-mas > summary::after, details.vermas > summary::after {
    content: "expand_more"; font-family: 'Material Symbols Outlined'; font-size: 24px; margin-left: auto; color: #4E6157; transition: transform .2s; }
  details.ver-mas[open] > summary::after, details.vermas[open] > summary::after { transform: rotate(180deg); }
}
@media (max-width: 1024px) {
  /* Editor de la barra de abajo, dentro de "Más". */
  .mas-modos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 10px; padding: 0 16px; scrollbar-width: none; }
  .mas-modo { flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: #FFFFFF;
    color: var(--tinta-movil, #163A24); font: inherit; font-weight: 700; font-size: 15px; }
  .mas-modo.on { background: #163A24; color: #FFFFFF; }
  .mas-lugares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mas-lugar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 72px; border-radius: 16px; border: 2px dashed #A9CDB8; background: #163A24; color: #E3F3EA; font: inherit; font-size: 14px; font-weight: 700; }
  .mas-lugar .lapiz { position: absolute; top: 6px; right: 8px; font-size: 16px; color: #A9CDB8; }
  .mas-lugar.on { border: 2px solid #2ECC71; box-shadow: 0 0 0 3px rgba(46, 204, 113, .35); }
  .mas-ayuda { margin: 8px 2px 0; font-size: 13px; color: #4E6157; }
  #pantalla-mas.eligiendo .mas-mod { outline: 2px dashed #2ECC71; outline-offset: -2px; }
}
@media (max-width: 1024px) {
  .mas-mod.en-barra { display: none; }
  #pantalla-mas.eligiendo .mas-mod.en-barra:not([hidden]) { display: flex; }
}
@media (max-width: 1024px) {
  .bottom-nav-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA COMPUTADORA Y LA TABLET (≥768) CON EL DISEÑO DEL TELÉFONO (2026-10-15)
   ══════════════════════════════════════════════════════════════════════════
 * El teléfono estrenó el diseño aprobado el 2026-10-05 y la computadora se
 * quedó con el neumorfismo: dos productos distintos según la pantalla. Esto lo
 * lleva arriba de 768 por las MISMAS clases compartidas (neu-*, modal-card,
 * header, tablas), así que las 40 pantallas cambian juntas. El acomodo de cada
 * pantalla (qué va en dos columnas, qué tarjeta va en bosque) es otro paso.
 *
 * Paleta: bosque #163A24 · menta #2ECC71 (sólo acciones) · fondo #F3F7F2 ·
 * tinta #0F1A14 · gris #4E6157 · ámbar #C27A1A · rojo #B3261E · filo #E6EEE8.
 * Todo va con `html:not(.dark)` como en el teléfono: la noche la pinta dark.css.
 */

/* ── Menú lateral (computadora; en tablet es el cajón) ────────────────────── */
#main-sidebar.sb {
  background: #163A24; color: #E3F3EA; padding: 20px 14px 16px; box-shadow: none;
  display: flex; flex-direction: column; gap: 14px;
  font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sb-marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 6px; }
.sb-marca b { display: block; font-size: 21px; line-height: 1.15; color: #FFFFFF; }
.sb-marca #active-workspace-name { display: block; font-size: 13px; color: #A9CDB8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-marca #active-workspace-name:empty { display: none; }
.sb-logo { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #2ECC71; color: #0F1A14;
  display: flex; align-items: center; justify-content: center; }
#main-sidebar.sb nav { display: flex; flex-direction: column; gap: 2px; }
.sb-grupo { margin: 0; padding: 12px 12px 4px; font-size: 13px; font-weight: 700; color: #8DB79E; }
.sb-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px;
  background: transparent; color: #D5E8DC; font: inherit; font-size: 15px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.sb-item:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.sb-item:focus-visible, .sb-cuenta:focus-visible, .sb-boton:focus-visible { outline: 2px solid #2ECC71; outline-offset: 2px; }
.sb-item.activo { background: #2ECC71; color: #0F1A14; }
.sb-item .material-symbols-outlined, .sb-item svg { font-size: 22px; flex: none; }
.sb-item .f { flex: 1; }
.sb-acciones { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sb-boton { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: 14px;
  background: #2ECC71; color: #0F1A14; font: inherit; font-size: 15px; font-weight: 700; border: 0; cursor: pointer; }
.sb-boton:hover { background: #3DDC80; }
.sb-boton.claro { background: transparent; color: #E3F3EA; border: 1px solid rgba(255, 255, 255, .28); }
.sb-boton.claro:hover { background: rgba(255, 255, 255, .07); }
.sb-pie { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sb-pie .sb-item { color: #A9CDB8; font-weight: 400; }
.sb-pie .sb-item:hover { color: #FFFFFF; }
.sb-cuenta { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: #FFFFFF; }
.sb-cuenta:hover { background: rgba(255, 255, 255, .07); }
.sb-cuenta b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-avatar { width: 36px; height: 36px; flex: none; border-radius: 18px; background: rgba(255, 255, 255, .1); color: #E3F3EA;
  display: flex; align-items: center; justify-content: center; }
.sb-avatar .material-symbols-outlined { font-size: 20px; }
.sb-rol { display: block; font-size: 13px; color: #A9CDB8; }
.sb-rol::after { content: "Sólo mirar"; }   /* los mismos nombres que "Más" */
body.puede-cargar .sb-rol::after { content: "Encargado"; }
body.es-asistente .sb-rol::after { content: "Asistente"; }
body.es-dueno .sb-rol::after { content: "Dueño"; }
.sb-switch { width: 38px; height: 22px; flex: none; border-radius: 11px; background: rgba(255, 255, 255, .2); position: relative; }
.sb-switch > span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 8px; background: #FFFFFF; transition: left .2s; }
.sb-salir:hover { color: #FFB4AB !important; }

/* La campana que antes caía dentro del menú: en el teléfono sigue sin verse, como antes. */
@media (max-width: 767px) { #bell-wrapper.campana-pc { display: none !important; } }
/* Tablet: la barra de abajo y "Más" ya tienen todo; el ☰ del cajón sobra. */
@media (max-width: 1023px) {
  header button[onclick*="toggleSidebar"], header [data-abre-menu], #btn-mobile-menu, body > [data-abre-menu] { display: none !important; }
}

@media (min-width: 768px) {
  html:not(.dark) { --neu-bg: #F3F7F2; --neu-card: #FFFFFF; --neu-border: #E6EEE8; --neu-text: #0F1A14; }
  /* `body.font-display`: la mitad de las pantallas traen esa clase de Tailwind (Inter) en el <body>. */
  body, body.font-display, body .font-display, body .font-body, body .font-headline { font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif; }
  html:not(.dark) body { background: #F3F7F2; color: #0F1A14; }
  html:not(.dark) :is(.bg-surface, .bg-background, .bg-background-light, .bg-soft-bg, .bg-bg-mint, .bg-base) { background-color: #F3F7F2; }

  /* ── Contenido: ancho cómodo y márgenes de 24 (tablet) / 32 (computadora) ── */
  main { padding-left: 24px !important; padding-right: 24px !important; }
  header.fixed { padding-left: 24px !important; padding-right: 24px !important; }

  /* ── Tarjetas planas: blancas, filo fino, radio 18, sin sombra doble ── */
  html:not(.dark) :is(.neu-flat, .neu-sm, .stat-card, .lote-card, .animal-card, .socio-card, .premium-card, .glass-panel) {
    background: #FFFFFF !important; box-shadow: none !important; border: 1px solid #E6EEE8;
  }
  :is(.neu-flat, .neu-sm, .stat-card, .lote-card, .animal-card, .socio-card, .premium-card):not(.rounded-full):not([class*="rounded-r-"]):not([class*="rounded-l-"]) { border-radius: 18px; }
  .stat-card:hover, .animal-card:hover { transform: none; box-shadow: none !important; }
  .neu-btn { background: var(--neu-card); box-shadow: none !important; border: 1px solid var(--neu-border); min-height: 44px; }
  .neu-btn:active { box-shadow: none !important; }
  .neu-icon { box-shadow: none !important; }
  .neu-inset, .neu-pressed { box-shadow: none !important; }
  /* Los campos se distinguen por el relleno, no por la sombra hundida. */
  html:not(.dark) :is(.neu-inset, .neu-pressed) { background-color: #F3F7F2 !important; }
  :is(.neu-inset, .neu-pressed):not(.rounded-full) { border-radius: 14px; }
  /* Un neu-inset grande (formulario, sección, panel con relleno) era un "panel hundido":
     ahora es una tarjeta blanca, y sus campos grises se leen encima. */
  html:not(.dark) :is(form, section, article).neu-inset,
  html:not(.dark) .neu-inset:is(.p-4, .p-5, .p-6, .p-8, .p-10, .md\:p-6, .md\:p-8, .lg\:p-8) { background-color: #FFFFFF !important; border: 1px solid #E6EEE8; }
  :is(form, section, article).neu-inset:not(.rounded-full), .neu-inset:is(.p-4, .p-5, .p-6, .p-8, .p-10, .md\:p-6, .md\:p-8, .lg\:p-8):not(.rounded-full) { border-radius: 18px; }
  .glass { backdrop-filter: none; }

  /* ── Campos ── */
  html:not(.dark) :is(main, .modal-card, header) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) {
    background-color: #F3F7F2; color: #0F1A14; border-color: transparent;
  }
  :is(main, .modal-card, header) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea):not(.rounded-full) { border-radius: 14px; }
  :is(main, .modal-card) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select) { min-height: 44px; }
  input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px #2ECC71 !important; }
  html:not(.dark) ::placeholder { color: #6B7F73; }

  /* ── Botones: 44px mínimo; menta con tinta oscura para la acción principal ── */
  :is(main, .modal-card, header) :is(button, [role=button]):not(.size-6):not(.size-7):not(.size-8) { min-height: 44px; }
  html:not(.dark) :is(.bg-primary, .bg-primary-mint, .bg-emerald-500, .bg-green-500, .btn-primary) { background-color: #2ECC71; background-image: none; }
  html:not(.dark) :is(.bg-primary, .bg-primary-mint, .bg-emerald-500, .bg-green-500, .btn-primary):is(.text-white, .text-deep-green, .text-secondary),
  html:not(.dark) :is(.bg-primary, .bg-emerald-500, .bg-green-500) :is(.text-white, .text-deep-green, .text-secondary) { color: #0F1A14 !important; }
  html:not(.dark) .hover\:bg-primary\/90:hover, html:not(.dark) .hover\:bg-emerald-600:hover { background-color: #3DDC80; }
  .modal-card button[type=submit] { min-height: 48px; }

  /* ── Nada de sombras pesadas, brillos ni degradados ── */
  :is(main, header, .modal-card) :is(.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, [class*="shadow-emerald"], [class*="shadow-primary"], [class*="shadow-black"], [class*="shadow-["]) { box-shadow: none !important; }
  :is(main, header) .glow { box-shadow: none !important; }
  html:not(.dark) :is(.bg-gradient-to-br, .bg-gradient-to-r):is(.from-emerald-100, .from-emerald-50) { background-image: none; background-color: #FFFFFF; }
  html:not(.dark) :is(.bg-gradient-to-br, .bg-gradient-to-r).from-emerald-500 { background-image: none; background-color: #163A24; }

  /* ── Letra: minúscula normal, sin letras espaciadas, nada por debajo de 12px ── */
  :is(main, header, .modal-card, #notif-panel) .uppercase { text-transform: none !important; }
  :is(main, header, .modal-card, #notif-panel) :is(.tracking-wide, .tracking-wider, .tracking-widest, [class*="tracking-["]) { letter-spacing: 0 !important; }
  body .text-\[7px\], body .text-\[8px\], body .text-\[9px\], body .text-\[10px\], body .text-\[11px\] { font-size: 12px; }
  /* Los números grandes, con la letra de los números; los títulos, con la del texto. */
  :is(.text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl):is(.font-black, .font-extrabold, .font-bold):not(.material-symbols-outlined), .stat-num {
    font-family: 'Big Shoulders Display', 'Inter', sans-serif; font-weight: 800; letter-spacing: 0;
  }
  /* h3/h4 grandes suelen ser el número de una tarjeta ("450 kg"): ésos quedan con la de números. */
  :is(main, header, .modal-card) :is(h1, h2, h3, h4) { text-transform: none !important; letter-spacing: 0 !important; }
  :is(main, header, .modal-card) :is(h1, h2, :is(h3, h4):not(:is(.text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl))) { font-family: 'Atkinson Hyperlegible', 'Inter', sans-serif !important; font-weight: 700; }
  html:not(.dark) :is(main, .modal-card) :is(h1, h2, h3):is(.text-secondary, .text-deep-green, .text-slate-800, .text-slate-900, .text-on-surface) { color: #163A24; }

  /* ── Colores de Tailwind al tono del diseño ── */
  html:not(.dark) :is(main, header, .modal-card, #notif-panel) :is(.text-slate-400, .text-slate-500, .text-slate-600, .text-gray-400, .text-gray-500, .text-gray-600, .text-on-surface-variant, [class*="text-secondary/"], [class*="text-deep-green/"]) { color: #4E6157; }
  html:not(.dark) :is(main, header, .modal-card) :is(.text-slate-300, .text-gray-300) { color: #8AA394; }
  html:not(.dark) :is(main, header, .modal-card) :is(.text-slate-700, .text-slate-800, .text-slate-900, .text-gray-800, .text-gray-900, .text-on-surface) { color: #0F1A14; }
  /* Menta es para acciones: como texto sobre blanco no se lee (2:1). Sobre bosque sí queda. */
  html:not(.dark) :is(main, header, .modal-card) .text-primary { color: #1F7A45; }
  html:not(.dark) :is(.bg-deep-green, .bg-secondary, .bg-forest-deep, [class*="bg-[#163"], [class*="bg-slate-8"], [class*="bg-slate-9"], .from-emerald-500) .text-primary { color: #2ECC71; }
  html:not(.dark) :is(main, header, .modal-card) :is(.text-amber-500, .text-amber-600, .text-orange-500, .text-orange-600) { color: #C27A1A; }
  html:not(.dark) :is(main, header, .modal-card) :is(.text-rose-500, .text-rose-600, .text-red-500, .text-red-600) { color: #B3261E; }
  html:not(.dark) :is(main, header, .modal-card) :is(.border-emerald-100, .border-emerald-50, [class*="border-emerald-100/"], [class*="border-emerald-50/"], .border-slate-100, .border-slate-200, .border-white, [class*="border-white/"]) { border-color: #E6EEE8; }

  /* ── Barra de arriba: título y, a la derecha, la campana y la luna como íconos ── */
  html:not(.dark) header.fixed { background: #F3F7F2; backdrop-filter: none; border-bottom: 1px solid #E6EEE8; }
  #user-name-display, #ceba-sync-indicator.synced { display: none !important; }
  header :is(h1, h2), main > header :is(h1, h2), #page-title-display {
    font-size: 26px !important; line-height: 1.2 !important; max-width: none; color: #163A24;
  }
  header .flex.items-center.gap-4, header .flex.items-center.gap-2 { gap: 8px; }
  /* El título a la izquierda y todo lo demás junto a la derecha (algunas barras traen un hueco de más). */
  header.fixed > :first-child { margin-right: auto; }
  header.fixed > :not(:first-child) { margin-left: 0; }
  #bell-wrapper.mr-4 { margin-right: 0; }
  #date-display { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 6px !important;
    font-size: 14px !important; font-weight: 400 !important; color: #4E6157 !important; text-transform: none !important; letter-spacing: 0 !important; }
  #date-display::first-letter { text-transform: uppercase; }
  #btn-notificaciones, header .boton-noche, header button[onclick*="DarkMode"] {
    width: 44px; height: 44px; min-height: 44px; padding: 0 !important; border-radius: 14px !important; justify-content: center;
    background: #FFFFFF !important; color: #163A24 !important; border: 1px solid #E6EEE8 !important; box-shadow: none !important;
  }
  :is(#btn-notificaciones, header .boton-noche, header button[onclick*="DarkMode"]):hover { background: #F3F7F2 !important; transform: none !important; }
  :is(header .boton-noche, header button[onclick*="DarkMode"]) .material-symbols-outlined { color: #163A24 !important; transform: none !important; font-size: 22px; }
  header .dark-mode-label { display: none !important; }
  #btn-notificaciones .material-symbols-outlined { font-weight: 400; }
  #notif-badge { background: #B3261E !important; border-color: #FFFFFF !important; animation: none !important; }
  #notif-panel { border-radius: 18px !important; border: 1px solid #E6EEE8 !important; box-shadow: 0 12px 32px rgba(15, 26, 20, .14) !important; }
  html:not(.dark) #notif-panel > div:first-child { background: #FFFFFF; }
  #notif-panel h3 { font-size: 15px !important; }

  /* Pestañas del módulo y chips de filtro: píldoras; la elegida, en bosque. */
  #pestanas-modulo { gap: 8px; }
  #pestanas-modulo a, .finca-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px !important;
    border-radius: 20px !important; font-size: 14px !important; font-weight: 700; box-shadow: none !important; }
  html:not(.dark) #pestanas-modulo a, html:not(.dark) .finca-chip { background: #FFFFFF !important; color: #163A24 !important; border: 1px solid #E6EEE8; }
  html:not(.dark) #pestanas-modulo a.bg-primary, html:not(.dark) .finca-chip.active { background: #163A24 !important; color: #FFFFFF !important; border-color: #163A24; }

  /* ── Formularios: diálogo centrado, radio 24 ── */
  .modal-overlay, .modal-backdrop { background: rgba(15, 26, 20, .45); backdrop-filter: none; }
  body .modal-card { border-radius: 24px; box-shadow: 0 24px 64px rgba(15, 26, 20, .22) !important; }
  /* Algunos fondos se abren con display:block (no flex): sin esto la tarjeta queda pegada a la izquierda. */
  .modal-overlay > .modal-card, .modal-backdrop > .modal-card { margin-left: auto; margin-right: auto; }
  html:not(.dark) .modal-card { background: #FFFFFF; }

  /* ── "Ver más": el renglón blanco con flecha también acá ── */
  html:not(.dark) .ver-mas-fila, html:not(.dark) details.vm > summary { color: #163A24; }
}

/* Tablas limpias (abajo de 769 se vuelven tarjetas: ver "Table Responsiveness"). */
@media (min-width: 769px) {
  .responsive-table-container { border-radius: 18px; }
  html:not(.dark) .responsive-table-container { background: #FFFFFF; border: 1px solid #E6EEE8; box-shadow: none; }
  main table thead th { font-size: 13px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important;
    background: transparent !important; }
  html:not(.dark) main table thead th { color: #4E6157 !important; border-bottom: 1px solid #E6EEE8; }
  html:not(.dark) main table tbody tr + tr td { border-top: 1px solid #E6EEE8; }
  html:not(.dark) tr:hover td { background: #F3F7F2; }
}

/* Computadora: el menú ocupa 288px; el contenido, hasta 1200 con márgenes de 32. */
@media (min-width: 1024px) {
  main, header.fixed {
    padding-left: max(32px, calc((100vw - 18rem - 1200px) / 2)) !important;
    padding-right: max(32px, calc((100vw - 18rem - 1200px) / 2)) !important;
  }
}
/* Con el zoom del televisor `100vw` no se escala (igual que `vh`, ver arriba): se divide a mano. */
@media (min-width: 1600px) {
  main, header.fixed {
    padding-left: max(32px, calc((100vw / 1.25 - 18rem - 1200px) / 2)) !important;
    padding-right: max(32px, calc((100vw / 1.25 - 18rem - 1200px) / 2)) !important;
  }
}
@media (min-width: 2400px) {
  main, header.fixed {
    padding-left: max(32px, calc((100vw / 1.6 - 18rem - 1200px) / 2)) !important;
    padding-right: max(32px, calc((100vw / 1.6 - 18rem - 1200px) / 2)) !important;
  }
}

/* El título corto del teléfono también en la computadora ("Hoy", no "Resumen Ejecutivo"). */
@media (min-width: 768px) {
  html body :is(h1, h2)[data-titulo-movil][data-movil]:is(#page-title-display, *) { font-size: 0 !important; max-width: none !important; overflow: visible !important; white-space: nowrap; }
  html body :is(h1, h2)[data-titulo-movil][data-movil] > * { display: none !important; }
  [data-titulo-movil]::after { content: attr(data-titulo-movil); font-size: 26px; line-height: 1.2; color: #163A24; }
}
@media (min-width: 768px) {
  /* Las listas desplegables habían quedado sin flecha (appearance:none): se ve que se puede abrir. */
  select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234E6157' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
    padding-right: 38px !important;
  }
  .dark select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A9C4B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* En la tablet la barra de abajo tapaba ~8px de lo último de la página. */
  main { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; }
}