@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ================================================================
   VARIABLES — Premium Design System
   ================================================================ */
/* Alias de las variables históricas sobre los tokens de css/tokens.css (se cargan antes que este fichero).
   El código nuevo debe usar directamente los tokens (--color-*, --fs-*, --esp-*, --radio-*). */
:root {
    --c-sidebar:        var(--marca-marino-800);
    --c-sidebar-hover:  var(--marca-marino-700);
    --c-sidebar-border: rgba(255,255,255,.06);
    --c-topbar:         var(--color-superficie);
    --c-gold:           var(--marca-oro-500);
    --c-gold-light:     #f0c96a;
    --c-gold-dim:       rgba(212,168,67,.15);
    --c-teal:           var(--color-acento);
    --c-teal-light:     #38bdf8;
    --c-teal-dim:       var(--color-acento-texto);
    --c-teal-glow:      rgba(14,165,233,.18);
    --c-subnav:         var(--color-superficie);
    --c-content:        var(--color-fondo);
    --c-card:           var(--color-superficie);
    --c-bg-alt:         var(--color-superficie-2);
    --c-border:         var(--color-borde);
    --c-border-strong:  var(--color-borde-fuerte);
    --c-text:           var(--color-texto);
    --c-text-secondary: var(--color-texto-2);
    --c-muted:          var(--color-texto-suave);
    --c-text-muted:     var(--color-texto-suave);   /* usado por Ecografias.razor.css */
    --c-active:         var(--color-acento-suave);
    --c-success:        #10b981;
    --c-success-dim:    rgba(16,185,129,.12);
    --c-warning:        #f59e0b;
    --c-warning-dim:    rgba(245,158,11,.12);
    --c-danger:         #ef4444;
    --c-danger-dim:     rgba(239,68,68,.12);

    /* ── Gradients ── */
    --g-topbar:     var(--color-superficie);
    --g-sidebar:    linear-gradient(180deg, var(--marca-marino-800) 0%, #1a1e30 100%);
    --g-teal:       linear-gradient(135deg, var(--marca-azul-600) 0%, var(--marca-azul-700) 100%);
    --g-gold:       linear-gradient(135deg, var(--marca-oro-500) 0%, var(--marca-oro-600) 100%);
    --g-green:      linear-gradient(135deg, #10b981 0%, #059669 100%);
    --g-card-shine: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,1) 100%);

    /* ── Shadows ── */
    --sh-xs:   var(--sombra-xs);
    --sh-sm:   var(--sombra-sm);
    --sh-md:   var(--sombra-md);
    --sh-lg:   var(--sombra-lg);
    --sh-xl:   0 20px 60px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.09);
    --sh-teal: 0 4px 20px rgba(14,165,233,.28), 0 2px 8px rgba(14,165,233,.14);
    --sh-gold: 0 4px 20px rgba(212,168,67,.3), 0 2px 8px rgba(212,168,67,.15);

    /* ── Layout dimensions ── */
    --topbar-h:    68px;
    --tabbar-h:    34px;
    --gold-h:      2px;
    --sidebar-w:   76px;
    --subnav-w:    284px;
    --radius:      var(--radio-md);
    --radius-sm:   var(--radio-sm);
    --radius-xs:   var(--radio-xs);
    --bottombar-h: 64px;

    /* ── Transitions ── */
    --t-fast:   0.15s ease;
    --t-normal: 0.22s ease;
    --t-slow:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   RESET / BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--fuente-ui);
    background: var(--c-content);
    color: var(--c-text);
    font-size: var(--fs-md);
    line-height: 1.55;
    margin: 0; padding: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app, #app > div { height: 100%; }

/* ================================================================
   APP SHELL
   ================================================================ */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
}

/* ================================================================
   TOP BAR — White topbar, dark brand column
   ================================================================ */
.app-topbar {
    flex-shrink: 0;
    height: var(--topbar-h);
    background: var(--c-topbar);
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    gap: 0;
    position: relative;
    z-index: 200;
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
}

/* Brand section — dark column matching sidebar */
.tb-brand {
    display: flex;
    align-items: center;
    gap: 0;
    width: var(--sidebar-w);
    flex-shrink: 0;
    justify-content: center;
    padding: 0;
    background: var(--c-sidebar);
    align-self: stretch;
    border-right: 1px solid var(--c-sidebar-border);
}

.tb-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    flex-shrink: 0;
}

.tb-logo-box img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.tb-logo-divider {
    display: none;
}

.tb-logo-ovinet { display: none; }

/* Title */
.tb-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-left: 20px;
}

.tb-title-main {
    font-family: var(--fuente-ui);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -.1px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-title-sub {
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--c-muted);
    letter-spacing: .4px;
    line-height: 1.2;
    margin-top: 2px;
}

/* User section */
.tb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-left: 16px;
    border-left: 1px solid var(--c-border);
    margin-left: 8px;
}

.tb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--g-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    box-shadow: var(--sh-teal);
    border: 2px solid rgba(255,255,255,.15);
}

.tb-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tb-username {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.2;
}

.tb-sigla {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--c-teal-dim);
    background: var(--c-active);
    padding: 1px 7px;
    border-radius: 20px;
    letter-spacing: .3px;
    margin-top: 2px;
    border: 1px solid rgba(14,165,233,.2);
}

/* Sigla visible sólo en móvil, junto al avatar */
.tb-sigla-mob {
    display: none;
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--c-teal-dim);
    background: var(--c-active);
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: .3px;
    border: 1px solid rgba(14,165,233,.2);
    white-space: nowrap;
}

.tb-fullscreen {
    width: 34px;
    height: 34px;
    border: 1px solid var(--c-border);
    background: var(--c-content);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--c-muted);
    transition: var(--t-fast);
}

.tb-fullscreen svg { width: 16px; height: 16px; }
.tb-fullscreen:hover {
    background: rgba(14,165,233,.08);
    color: var(--c-teal);
    border-color: rgba(14,165,233,.3);
}

/* Ocultar botón de pantalla completa cuando la app está instalada como PWA */
@media (display-mode: standalone) {
    .tb-fullscreen { display: none; }
}

/* Ocultar botón de pantalla completa en móvil (no funciona en la mayoría de navegadores móviles) */
@media (max-width: 767px) {
    .tb-fullscreen { display: none; }
}

.tb-logout {
    width: 34px;
    height: 34px;
    border: 1px solid var(--c-border);
    background: var(--c-content);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--c-muted);
    transition: var(--t-fast);
}

.tb-logout svg { width: 16px; height: 16px; }
.tb-logout:hover {
    background: var(--c-danger-dim);
    color: var(--c-danger);
    border-color: rgba(239,68,68,.3);
}

/* Gold accent bar — subtle separator */
.app-gold-bar {
    flex-shrink: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--c-sidebar) 0%,
        var(--c-sidebar) var(--sidebar-w),
        var(--c-gold-light) calc(var(--sidebar-w) + 20px),
        var(--c-gold) 50%,
        var(--c-gold-light) 70%,
        var(--c-border) 100%
    );
}

/* ================================================================
   APP BODY: sidebar + subnav + content
   ================================================================ */
.app-body {
    flex: 1;
    min-height: 0;      /* crítico: sin esto flex child ignora overflow del padre */
    display: flex;
    overflow: hidden;
    position: relative;
}

/* ================================================================
   LATERAL ÚNICO (14/11/2026, docs/menu.md): 76 px en reposo, medidas por tramos según la altura (nunca scroll),
   y 232 px encima del contenido al pasar el cursor o al tocar un grupo (clase sn-exp; sn-fijo lo deja abierto).
   Los tramos miran la altura del propio lateral (container query); el logo de la barra se encoge aparte (media).
   ================================================================ */
.app-sidenav {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 100;
    width: var(--sidebar-w);
    container-type: size; container-name: lateral;
    background: var(--g-sidebar);
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    overflow: visible;                              /* el panel del grupo (.sn-flyout) cuelga a su derecha */
    border-right: 1px solid var(--c-sidebar-border);
    transition: box-shadow .18s ease;
    /* medidas del tramo completo (pantallas altas); los tramos las cambian en snav-top/snav-bottom */
    --sn-caja: 36px; --sn-ico: 26px; --sn-pad: 7px; --sn-sep: 5px; --sn-et: var(--fs-2xs); --sn-hueco: 2px;
}
.app-sidenav::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}
.snav-top, .snav-bottom { display: flex; flex-direction: column; align-items: stretch; gap: var(--sn-hueco); padding: 0 6px; }
.snav-top { flex: 1; min-height: 0; overflow: hidden; }
.snav-bottom { flex-shrink: 0; }
.snav-divider { width: 32px; height: 1px; background: rgba(255,255,255,.08); margin: 5px auto; border-radius: 1px; }
.sn-grupo { display: flex; flex-direction: column; }

/* Entrada: icono y etiqueta corta, en columna */
.snav-item {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sn-sep);
    padding: var(--sn-pad) 2px;
    border: 0; border-radius: var(--radius-sm); background: transparent;
    color: rgba(255,255,255,.72);
    cursor: pointer; text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    font-family: var(--fuente-ui); font-size: var(--sn-et); font-weight: 600; letter-spacing: .2px; line-height: 1.1;
    text-align: center; white-space: nowrap; user-select: none; position: relative;
}
.snav-item:hover:not(.sn-disabled) { background: var(--c-sidebar-hover); color: #fff; text-decoration: none; }
.snav-item:focus-visible { outline: 2px solid var(--c-teal-light); outline-offset: -2px; }
.snav-item.active, .snav-item.sn-active { background: rgba(14,165,233,.15); color: #fff; }
.snav-item.active::before, .snav-item.sn-active::before {
    content: '';
    position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 72%; min-height: 20px;
    background: var(--c-teal-light); border-radius: 0 3px 3px 0;
    box-shadow: 0 0 14px rgba(56,189,248,.55);
}
.sn-icon { width: var(--sn-caja); height: var(--sn-caja); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-sm); transition: background var(--t-fast); }
.snav-item:hover:not(.sn-disabled) .sn-icon { background: rgba(255,255,255,.10); }
.snav-item.active .sn-icon, .snav-item.sn-active .sn-icon { background: rgba(14,165,233,.22); }
.sn-icon svg { width: var(--sn-ico); height: var(--sn-ico); stroke-width: 2.2; }
.sn-corto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sn-largo, .sn-chev, .sn-hijos, .sn-pin { display: none; }
.sn-disabled, .snav-item.sn-disabled { opacity: .28; cursor: default; pointer-events: none; }

/* Tramos por altura del lateral (11 entradas y la línea; el logo de la barra se encoge con la media de abajo) */
@container lateral (max-height: 836px) { .snav-top, .snav-bottom { --sn-caja: 28px; --sn-ico: 22px; --sn-pad: 5px; --sn-sep: 3px; } }
@container lateral (max-height: 630px) { .snav-top, .snav-bottom { --sn-caja: 26px; --sn-ico: 20px; --sn-pad: 4px; --sn-sep: 2px; --sn-et: 10px; } .snav-divider { margin: 3px auto; } }
@container lateral (max-height: 564px) { .snav-top, .snav-bottom { --sn-caja: 28px; --sn-ico: 22px; --sn-pad: 4px; } .sn-corto { display: none; } }

/* El lateral no se expande (15/11/2026, el usuario: «nos vamos a un menú muy ancho»): el grupo abierto se resalta y su panel sale al lado */
.app-sidenav.sn-con-panel { box-shadow: 10px 0 30px rgba(0,0,0,.25); }
.sn-abierto .sn-cab { background: rgba(255,255,255,.08); color: #fff; }
.sn-abierto .sn-cab .sn-icon { background: rgba(255,255,255,.10); }
/* Panel de las pantallas del grupo (a la derecha del lateral; empieza arriba: nunca scroll).
   Claro, como el panel antiguo (.subnav-panel): blanco, borde y sombra suaves, cada pantalla con su icono en una cajita */
.sn-flyout {
    position: absolute; left: 100%; top: 0; bottom: 0; width: 320px; z-index: 1;
    display: flex; flex-direction: column;
    background: var(--color-superficie); color: var(--color-texto);
    border-right: 1px solid var(--color-borde);
    box-shadow: 6px 0 20px rgba(0,0,0,.08); animation: snFly .14s ease-out;
}
@keyframes snFly { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sn-fly-cab { display: flex; align-items: center; gap: 11px; padding: 14px 16px 12px; border-bottom: 1px solid var(--color-borde); }
.sn-fly-ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-acento-suave); color: var(--c-teal); flex-shrink: 0; }
.sn-fly-ico svg { width: 20px; height: 20px; }
.sn-fly-tit { min-width: 0; }
.sn-fly-nom { font-size: var(--fs-md); font-weight: 600; color: var(--color-texto); line-height: 1.2; }
.sn-fly-ayuda { font-size: var(--fs-2xs); color: var(--color-texto-suave); line-height: 1.3; margin-top: 2px; }
.sn-fly-lista { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 6px 8px 8px; }
.sn-hijo {
    display: flex; align-items: flex-start; gap: 11px; position: relative;
    padding: 8px 10px; margin: 1px 0; border: 0; border-radius: var(--radius-sm); background: transparent;
    color: var(--color-texto-2); font-family: var(--fuente-ui); font-size: var(--fs-sm); font-weight: 500; text-align: left;
    text-decoration: none; cursor: pointer; width: 100%; line-height: 1.3; transition: background var(--t-fast), color var(--t-fast);
}
.sn-hijo-ico {
    width: 30px; height: 30px; flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; background: var(--color-fondo); border: 1px solid var(--color-borde); color: var(--color-texto-2);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sn-hijo-ico svg { width: 18px; height: 18px; }
.sn-hijo-txt { flex: 1; min-width: 0; }
.sn-hijo-nom { display: block; }
.sn-hijo-desc { display: block; font-size: var(--fs-2xs); font-weight: 400; color: var(--color-texto-suave); line-height: 1.35; margin-top: 1px; white-space: normal; }
.sn-hijo:hover { background: var(--color-fondo); color: var(--c-teal); text-decoration: none; }
.sn-hijo:hover .sn-hijo-ico { background: var(--c-teal-glow); border-color: rgba(14,165,233,.25); color: var(--c-teal); }
.sn-hijo.active { background: var(--color-acento-suave); color: var(--c-teal); font-weight: 600; }
.sn-hijo.active .sn-hijo-ico { background: #fff; border-color: rgba(14,165,233,.3); color: var(--c-teal); }
.sn-hijo.active::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-teal); }
.sn-sec { padding: 12px 10px 4px; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-texto-suave); }
/* Con poca altura (portátil) el panel aprieta: el grupo más largo (Genética, 9 pantallas) cabe sin scroll */
@container lateral (max-height: 700px) {
    .sn-fly-cab { padding: 9px 14px 8px; }
    .sn-fly-lista { padding: 3px 6px 6px; }
    .sn-hijo { padding: 4px 8px; gap: 9px; margin: 0; }
    .sn-hijo-desc { line-height: 1.25; }
    .sn-hijo-ico { width: 26px; height: 26px; }
    .sn-hijo-ico svg { width: 16px; height: 16px; }
    .sn-sec { padding: 5px 8px 1px; }
}

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.app-main {
    flex: 1;
    min-height: 0;      /* fuerza al flex child a quedar limitado por el padre */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;  /* iOS Safari momentum scroll */
}

.app-content {
    flex: 1;
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.content-inner {
    /* Márgenes del contenido: compactos (revisión 24/10/2026). Chat y Analítica los anulan con margin negativo
       a partir de estas variables. */
    --ci-t: 14px; --ci-x: 20px; --ci-b: 14px;
    padding: var(--ci-t) var(--ci-x) var(--ci-b);
    max-width: 1600px;   /* pantallas anchas: tablas y ficha aprovechan el espacio */
    width: 100%;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* CruzarDatos: ancho completo con márgenes laterales; scroll horizontal en la propia tabla */
.content-inner:has(.crz-root) {
    max-width: none;
    padding: 12px 24px 20px;
    min-width: 0;
    box-sizing: border-box;
}
.content-inner:has(.crz-root) > * { min-width: 0; }


.footer-sub { display: none; }

/* ================================================================
   PAGE HEADER
   ================================================================ */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
}

.page-header-left { flex: 1; min-width: 0; }

.page-header h1 {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 3px;
    letter-spacing: -.3px;
    line-height: 1.15;
}

.page-header .subtitle {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.page-header .subtitle strong {
    color: var(--c-teal);
    font-weight: 600;
}

/* ================================================================
   BLOG BANNER — New post alert
   ================================================================ */
.blog-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(245,158,11,.12);
}

.blog-banner-top {
    display: flex;
    align-items: center;
    gap: 7px;
}

.blog-banner-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.blog-banner-icon {
    font-size: var(--fs-md);
    flex-shrink: 0;
}

.blog-banner-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #92400e;
    flex-shrink: 0;
}

.blog-banner-date {
    font-size: var(--fs-2xs);
    color: #78716c;
    margin-left: auto;
    white-space: nowrap;
}

.blog-banner-title {
    flex: 1;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #1c1917;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.blog-banner-btn {
    flex-shrink: 0;
    background: #f59e0b;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}

.blog-banner-btn:hover {
    background: #d97706;
    color: #fff;
}

.blog-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: var(--fs-sm);
    color: #a8a29e;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s;
}

.blog-banner-close:hover {
    color: #57534e;
}

/* ================================================================
   STAT CARDS — Beautiful gradient cards
   ================================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--c-card);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-border);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
}

/* Decorative top stripe */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--g-teal);
    border-radius: var(--radius) var(--radius) 0 0;
}

.stat-card.sc-green::before  { background: var(--g-green); }
.stat-card.sc-gold::before   { background: var(--g-gold); }
.stat-card.sc-blue::before   { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.stat-card.sc-purple::before { background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); }
.stat-card.sc-indigo::before { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.stat-card.sc-slate::before  { background: linear-gradient(135deg, #64748b 0%, #334155 100%); }

/* Decorative background circle */
.stat-card::after {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--c-teal-glow);
    pointer-events: none;
}

.stat-card.sc-green::after  { background: rgba(16,185,129,.08); }
.stat-card.sc-gold::after   { background: rgba(212,168,67,.1); }
.stat-card.sc-blue::after   { background: rgba(59,130,246,.08); }
.stat-card.sc-purple::after { background: rgba(168,85,247,.08); }
.stat-card.sc-indigo::after { background: rgba(99,102,241,.08); }
.stat-card.sc-slate::after  { background: rgba(100,116,139,.06); }

.stat-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-label-sub {
    font-size: var(--fs-2xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .7;
}

.stat-body {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 2px;
}

.stat-value {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
    line-height: 1;
    letter-spacing: -1px;
    flex: 0 0 42%;
    text-align: center;
    padding-right: 12px;
}

.stat-detail {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-top: 2px;
}

/* ── Split-layout cards (Hembras / Machos) ────────────────────── */
.stat-card--split {
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
}

.stat-split-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
}

.stat-split-left .stat-value {
    flex: none;
    padding-right: 0;
}

.stat-split-left--center {
    align-items: center;
}

.stat-split-left--center .stat-value {
    text-align: center;
    width: 100%;
}

/* Number + badges row (Machos) */
.stat-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-value--left {
    text-align: left;
}

.stat-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--c-bg-alt, rgba(0,0,0,.04));
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 2px 7px;
    white-space: nowrap;
}

.badge-lbl {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.badge-num {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--c-text);
}

.badge-sep {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    margin: 0 1px;
}

.stat-inner-sep {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 4px 0;
    width: 100%;
}

.stat-card--split .stat-sub-list {
    padding: 12px 14px 12px 12px;
}

.stat-sub-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 12px;
    border-left: 1px solid var(--c-border);
    min-width: 0;
}

.stat-sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.stat-sub-label {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-sub-val {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-text);
    flex-shrink: 0;
}

/* Sub-item with column layout (label on top, value+badge below) */
.stat-sub-item--col {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.stat-sub-conexion {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Stat right-panel slider ───────────────────────────────────────── */
/* Desktop: identical look to old stat-sub-list */
.stat-sub-slider {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 12px 12px;
    border-left: 1px solid var(--c-border);
    min-width: 0;
    overflow: hidden;
}

.stat-sub-slider-track {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-sub-slide--ov {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    width: 100%;
}

/* Detail slides hidden on desktop */
.stat-sub-slide--dt { display: none; }
.stat-sub-dots      { display: none; }

/* Mobile + tablet (≤ 1024px): horizontal scroll-snap in right panel */
@media (max-width: 1024px) {
    .stat-sub-slider {
        padding: 0;
    }

    .stat-sub-slider-track {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0;
    }
    .stat-sub-slider-track::-webkit-scrollbar { display: none; }

    .stat-sub-slide--ov,
    .stat-sub-slide--dt {
        flex-shrink: 0;
        width: 100%;
        scroll-snap-align: start;
    }

    .stat-sub-slide--ov {
        padding: 10px 12px;
        justify-content: space-around;
        gap: 0;
    }

    .stat-sub-slide--dt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 10px;
    }

    .stat-slide-lbl {
        font-size: var(--fs-2xs);
        font-weight: 600;
        color: var(--c-muted);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .stat-slide-val {
        font-family: var(--fuente-ui);
        font-size: var(--fs-xl);
        font-weight: 700;
        color: var(--c-text);
        line-height: 1;
        letter-spacing: -1px;
    }

    .stat-sub-dots {
        display: flex;
        justify-content: center;
        gap: 4px;
        padding: 4px 0 6px;
        flex-shrink: 0;
    }

    .stat-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--c-border);
        transition: width .2s, background .2s, border-radius .2s;
    }

    .stat-dot.active {
        width: 12px;
        border-radius: 2px;
        background: var(--c-muted);
    }
}

/* ── Percentiles grid (Exp / Pob × Leche / Inserción / Vertical.) ── */
.perc-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 3px 6px;
    margin-top: 6px;
    align-items: center;
}
.perc-grid-hdr {
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--c-muted);
    text-align: center;
    opacity: 0.8;
    letter-spacing: .3px;
}
.perc-grid-lbl {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-right: 4px;
}
.perc-grid-val {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
    text-align: center;
    line-height: 1;
    letter-spacing: -0.5px;
}
.perc-grid-sub {
    font-family: var(--fuente-ui);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-muted);
    text-align: center;
    line-height: 1;
    opacity: 0.85;
}
.perc-grid-loading {
    font-size: var(--fs-lg);
    color: var(--c-muted);
    margin-top: 6px;
    text-align: center;
}
.pv-green { color: #10b981; }
.pv-red   { color: #ef4444; }

/* Extra gap between EXP and POB rows */
.perc-grid > :nth-child(n+9) {
    margin-top: 5px;
}

/* ── RGA positions grid (3-column, mirrors perc-grid) ─────────── */
.rga-grid {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    align-items: stretch;
}

.rga-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(100,116,139,.07);
    border-radius: 10px;
    padding: 8px 4px;
    border: 1px solid var(--c-border);
}

.rga-val {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--c-text);
    line-height: 1;
    letter-spacing: -1px;
    text-align: center;
}

.rga-sup {
    font-size: var(--fs-md);
    font-weight: 700;
    vertical-align: super;
    letter-spacing: 0;
}

.rga-val--gold   { color: #C9A227; text-shadow: 0 0 10px rgba(201,162,39,.25); }
.rga-val--silver { color: #64748b; }
.rga-val--bronze { color: #92400e; }

.rga-val-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.rga-trophy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .72;
    align-self: flex-end;
    margin-bottom: 4px;
}
.rga-trophy svg {
    width: 12px;
    height: 12px;
}
.rga-trophy.rga-val--gold   { opacity: .9; filter: drop-shadow(0 0 3px rgba(201,162,39,.5)); }
.rga-trophy.rga-val--silver { opacity: .65; }
.rga-trophy.rga-val--bronze { opacity: .65; }

/* ── Stat-value moved to top of flex row ──────────────────────── */
.stat-value--up {
    align-self: flex-start;
    margin-top: 2px;
}

/* ── Left column: number + conexión stacked ───────────────────── */
.stat-value-col {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-right: 12px;
}

.stat-value-col .stat-value {
    flex: none;
    padding-right: 0;
}

/* ── Conexión inline below the big number ─────────────────────── */
.stat-conexion-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 5px;
    border-top: 1px solid var(--c-border);
    width: 100%;
}

.stat-conexion-inline .stat-sub-conexion {
    justify-content: center;
}

/* ── Conexión badge ───────────────────────────────────────────── */
.conexion-badge {
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    border: 1px solid;
    white-space: nowrap;
    letter-spacing: .2px;
}
.cbadge-red-dark  { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.cbadge-red       { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.cbadge-yellow    { background: #fefce8; color: #854d0e; border-color: #fde047; }
.cbadge-green     { background: #f0fdf4; color: #166534; border-color: #86efac; }
.cbadge-green-dark{ background: #dcfce7; color: #14532d; border-color: #4ade80; }

/* ================================================================
   DASHBOARD PANELS — 3-column grid
   ================================================================ */
.rsm-panels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rsm-panel {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

.rsm-panel-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text);
    background: #fafbfd;
}

.rsm-panel-header svg { color: var(--c-teal); }

.rsm-panel-link {
    margin-left: auto;
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--c-teal);
    text-decoration: none;
    padding: 2px 7px;
    border-radius: 5px;
    transition: var(--t-fast);
}

.rsm-panel-link:hover {
    background: var(--c-active);
    text-decoration: none;
}

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

/* Compact single-line rows */
.rsm-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-bottom: 1px solid var(--c-border);
    transition: background var(--t-fast);
    min-height: 0;
}

.rsm-list-item:last-child { border-bottom: none; }
.rsm-list-item:hover { background: var(--c-content); }

.rsm-item-title {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rsm-item-sub {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.rsm-item-tag {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    white-space: nowrap;
    flex-shrink: 0;
    opacity: .75;
}

.rsm-item-date {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.rsm-loading, .rsm-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    font-style: italic;
}

/* Blog title link */
.rsm-blog-title {
    color: var(--c-teal);
    text-decoration: none;
    transition: color var(--t-fast);
}

.rsm-blog-title:hover { color: var(--c-accent); text-decoration: underline; }

/* ================================================================
   ACTIVIDADES RECIENTES
   ================================================================ */

.act-section {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    overflow: clip;
    margin-top: 0;
}

.act-section .table-responsive {
    max-height: clamp(220px, calc(100dvh - 400px), 55dvh);
    overflow-y: auto;
    overflow-x: auto;
}

.act-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: linear-gradient(135deg, #0f172a 0%, #1a3a5c 60%, #1e4976 100%);
    color: #fff;
    gap: 10px;
}

.act-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.act-icon-wrap {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #93c5fd;
}

.act-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #fff;
    display: inline;
    letter-spacing: .2px;
}

.act-subtitle {
    font-size: var(--fs-2xs);
    color: rgba(255, 255, 255, .55);
    display: inline;
    margin-left: 2px;
}

.act-header-right { flex-shrink: 0; }

.act-count-badge {
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    white-space: nowrap;
}

/* ── Skeleton ── */
.act-skeleton {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.act-skeleton-row {
    display: flex;
    gap: 14px;
    align-items: center;
}

.act-skeleton-cell {
    height: 13px;
    border-radius: 5px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: act-shimmer 1.6s ease-in-out infinite;
}

@keyframes act-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty / Error ── */
.act-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 20px;
    color: var(--c-text-muted, #94a3b8);
    font-size: var(--fs-sm);
    text-align: center;
    gap: 4px;
}

.act-error-msg { color: #ef4444; }
.act-error-msg svg { color: #fca5a5; }

/* ── Table ── */
.act-table {
    font-size: var(--fs-2xs);
}

.act-table thead th {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 4px 8px;
    white-space: nowrap;
    color: var(--c-text-muted, #64748b);
}

.act-table tbody td {
    font-size: var(--fs-2xs);
    padding: 3px 8px;
    vertical-align: middle;
}

.act-table tbody tr td:first-child {
    font-weight: 600;
    color: var(--c-text);
}

.act-td-date {
    font-size: var(--fs-2xs);
    color: var(--c-text-muted, #94a3b8);
    white-space: nowrap;
}

.act-td-badge-col { white-space: nowrap; }

/* ── Activity badges ── */
.act-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 20px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* Colour variants by activity slug */
.act-badge--parto        { background: #bbf7d0; color: #14532d; border-color: #4ade80; }
.act-badge--cubricion    { background: #fbcfe8; color: #831843; border-color: #f472b6; }
.act-badge--inseminacion { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }  /* blue-100 – grupo 4 */
.act-badge--destete      { background: #fed7aa; color: #7c2d12; border-color: #fb923c; }
.act-badge--tratamiento  { background: #fde68a; color: #713f12; border-color: #fbbf24; }
.act-badge--baja         { background: #fecaca; color: #7f1d1d; border-color: #f87171; }
.act-badge--alta         { background: #a7f3d0; color: #064e3b; border-color: #34d399; }
.act-badge--traspaso     { background: #c7d2fe; color: #1e1b4b; border-color: #818cf8; }
.act-badge--compra       { background: #6ee7b7; color: #064e3b; border-color: #10b981; }
.act-badge--venta        { background: #fecdd3; color: #881337; border-color: #fb7185; }
.act-badge--sincronizacion { background: #bbf7d0; color: #14532d; border-color: #22c55e; }
.act-badge--ecografia    { background: #bae6fd; color: #0c4a6e; border-color: #38bdf8; }
.act-badge--lactacion    { background: #e9d5ff; color: #4a044e; border-color: #c084fc; }
.act-badge--pesaje       { background: #e2e8f0; color: #334155; border-color: #94a3b8; }
.act-badge--movimiento   { background: #fef08a; color: #713f12; border-color: #facc15; }
.act-badge--reproduccion { background: #fbcfe8; color: #831843; border-color: #ec4899; }
.act-badge--sanitario    { background: #bfdbfe; color: #1e3a8a; border-color: #60a5fa; }
.act-badge--alimentacion { background: #d9f99d; color: #365314; border-color: #84cc16; }
.act-badge--muerte       { background: #fca5a5; color: #450a0a; border-color: #ef4444; }

/* ── Ovinet activity badges (14 actividades) ── */
/* ── Grupo 1: dairy/lechero → blanco/gris (3 tonos) ── */
.act-badge--control-lechero  { background: #ffffff; color: #475569; border-color: #e2e8f0; }  /* white    – control lechero  */
.act-badge--analtica-leche   { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }  /* gray-100 – analítica leche  */
.act-badge--lactaciones-calc { background: #e2e8f0; color: #334155; border-color: #94a3b8; }  /* gray-200 – lactaciones calc */

/* ── Grupo 2: salud/TEP → red/rose (3 tonos) ── */
.act-badge--sangrado-tep     { background: #fff1f2; color: #9f1239; border-color: #fda4af; }  /* rose-50  – sangrado TEP     */
.act-badge--resultados-tep   { background: #ffe4e6; color: #9f1239; border-color: #fb7185; }  /* rose-100 – resultados TEP   */
.act-badge--scrapie          { background: #fecaca; color: #7f1d1d; border-color: #f87171; }  /* red-200  – scrapie          */

/* ── Grupo 3: calificación morfológica → violet (2 tonos) ── */
.act-badge--calif-morf       { background: #ede9fe; color: #4c1d95; border-color: #c4b5fd; }  /* violet-100 – calificación morf */
.act-badge--calif-mam        { background: #ddd6fe; color: #4c1d95; border-color: #a78bfa; }  /* violet-200 – calificación mam  */

/* ── Grupo 4: protocolo reproductivo → sky/blue (4 tonos) ── */
.act-badge--ecografas        { background: #f0f9ff; color: #0c4a6e; border-color: #bae6fd; }  /* sky-50   – ecografías       */
.act-badge--puesta-esponjas  { background: #e0f2fe; color: #0c4a6e; border-color: #7dd3fc; }  /* sky-100  – puesta esponjas  */
.act-badge--retirada-esp     { background: #bae6fd; color: #0369a1; border-color: #38bdf8; }  /* sky-200  – retirada esp.    */
/* .act-badge--inseminacion ya definido arriba – blue-100, grupo 4 */

/* ── Grupo 5: sanitario/bolos → orange (solo) ── */
.act-badge--puesta-bolos     { background: #fff7ed; color: #9a3412; border-color: #fdba74; }  /* orange-50 – puesta bolos    */

/* ── Grupo 6: paridera → green (solo) ── */
.act-badge--paridera         { background: #dcfce7; color: #14532d; border-color: #4ade80; }  /* green-100 – paridera        */

.stats-error-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 8px 14px;
    font-size: var(--fs-xs);
    margin-bottom: 10px;
}

/* ================================================================
   GENERIC CARDS / SECTIONS
   ================================================================ */
.card, .ovi-card {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* Permite que dropdowns internos salgan del card */
.ovi-card.eco-filter-card,
.card.eco-filter-card {
    overflow: visible;
}

.section-header, .card-header, .ovi-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-border);
    background: #fafbfd;
}

.section-header h2, .section-header h3,
.card-header h2, .card-header h3,
.ovi-section-header h2, .ovi-section-header h3 {
    font-family: var(--fuente-ui);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}

/* ================================================================
   TABLES — Clean, scannable
   ================================================================ */
.table-responsive { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.table thead th {
    background: #f8fafc;
    color: var(--color-texto-suave);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 6px 12px;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.table thead th.sortable { cursor: pointer; }
.table thead th.sortable:hover { color: var(--c-teal); background: #f1f5f9; }

.table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background var(--t-fast);
}

.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--c-content); }

.table tbody td {
    padding: 4px 12px;
    color: var(--c-text-secondary);
    vertical-align: middle;
}

.table tbody td.td-mono {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
}

/* Striped variant */
.table-striped tbody tr:nth-child(even) { background: #fafbfd; }
.table-striped tbody tr:nth-child(even):hover { background: var(--c-content); }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .25px;
    line-height: 1.4;
}

.badge-teal, .badge-primary {
    background: var(--c-active);
    color: var(--c-teal-dim);
    border: 1px solid rgba(14,165,233,.2);
}

.badge-gold {
    background: var(--c-gold-dim);
    color: #7c5a00;
    border: 1px solid rgba(212,168,67,.2);
}

.badge-green, .badge-success {
    background: var(--c-success-dim);
    color: #065f46;
    border: 1px solid rgba(16,185,129,.2);
}

.badge-red, .badge-danger {
    background: var(--c-danger-dim);
    color: #7f1d1d;
    border: 1px solid rgba(239,68,68,.2);
}

.badge-gray, .badge-secondary {
    background: #f1f5f9;
    color: var(--c-muted);
    border: 1px solid var(--c-border);
}

.badge-warning {
    background: var(--c-warning-dim);
    color: #78350f;
    border: 1px solid rgba(245,158,11,.2);
}

/* ================================================================
   BUTTONS — Modern gradient style
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
    white-space: nowrap;
    user-select: none;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; pointer-events: none; }

.btn-primary {
    background: var(--g-teal);
    color: #fff;
    box-shadow: var(--sh-teal);
}

.btn-primary:hover {
    box-shadow: 0 6px 24px rgba(14,165,233,.36), 0 2px 8px rgba(14,165,233,.2);
    filter: brightness(1.07);
    text-decoration: none;
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: var(--c-text-secondary);
    border: 1px solid var(--c-border-strong);
    box-shadow: var(--sh-xs);
}

.btn-secondary:hover {
    background: var(--c-content);
    border-color: var(--c-border-strong);
    box-shadow: var(--sh-sm);
    text-decoration: none;
}

.btn-gold {
    background: var(--g-gold);
    color: #fff;
    box-shadow: var(--sh-gold);
}

.btn-gold:hover {
    box-shadow: 0 6px 24px rgba(212,168,67,.4), 0 2px 8px rgba(212,168,67,.2);
    filter: brightness(1.07);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 14px rgba(239,68,68,.3);
}

.btn-danger:hover { filter: brightness(1.08); }

.btn-ghost {
    background: transparent;
    color: var(--c-muted);
    border: 1px solid var(--c-border);
}

.btn-ghost:hover {
    background: var(--c-content);
    color: var(--c-text);
}

.btn-sm {
    padding: 6px 13px;
    font-size: var(--fs-xs);
}

.btn-lg {
    padding: 12px 24px;
    font-size: var(--fs-md);
}

/* ================================================================
   FORM ELEMENTS
   ================================================================ */
.form-group, .lp-field { margin-bottom: 16px; }

label, .form-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-muted);
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea,
.form-control, .lp-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    color: var(--c-text);
    background: #fff;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    outline: none;
    line-height: 1.4;
    -webkit-appearance: none;
}

input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="number"]:focus,
input[type="search"]:focus, select:focus, textarea:focus,
.form-control:focus, .lp-input:focus {
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}

input::placeholder { color: var(--c-muted); opacity: .65; }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Search input */
.search-wrap {
    position: relative;
}

.search-wrap input {
    padding-left: 38px;
}

.search-wrap .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-muted);
    width: 16px; height: 16px;
    pointer-events: none;
}

/* ================================================================
   LOADING STATES
   ================================================================ */
.ovi-spinner {
    width: 28px; height: 28px;
    border: 2.5px solid var(--c-border);
    border-top-color: var(--c-teal);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
}

.ovi-loading-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease infinite;
    border-radius: 4px;
}

@keyframes skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   ALERTS / STATUS
   ================================================================ */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    line-height: 1.45;
}

.alert-info {
    background: var(--c-active);
    color: var(--c-teal-dim);
    border-color: rgba(14,165,233,.2);
}

.alert-success {
    background: var(--c-success-dim);
    color: #065f46;
    border-color: rgba(16,185,129,.2);
}

.alert-warning {
    background: var(--c-warning-dim);
    color: #78350f;
    border-color: rgba(245,158,11,.2);
}

.alert-danger {
    background: var(--c-danger-dim);
    color: #7f1d1d;
    border-color: rgba(239,68,68,.2);
}

/* ================================================================
   TABS
   ================================================================ */
.ovi-tabs {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    border-bottom: 1px solid var(--c-border);
    background: #fafbfd;
}

.ovi-tab {
    padding: 12px 16px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--t-fast), border-color var(--t-fast);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.ovi-tab:hover { color: var(--c-text); }

.ovi-tab.active {
    color: var(--c-teal);
    border-bottom-color: var(--c-teal);
    font-weight: 600;
}

/* ================================================================
   MODAL OVERLAYS — Settings etc.
   ================================================================ */
.stg-overlay, .mob-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,22,40,.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
    animation: fadeIn .2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ov-open { display: block; }

/* ── Settings modal ── */
.stg-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--sh-xl);
    z-index: 901;
    animation: scaleIn .22s cubic-bezier(.4,0,.2,1);
}

@keyframes scaleIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.stg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-border);
    background: linear-gradient(135deg, #fafbfd 0%, #f0f4f8 100%);
    border-radius: 16px 16px 0 0;
}

.stg-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fuente-ui);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}

.stg-header-left svg { color: var(--c-teal); }

.stg-close {
    width: 30px; height: 30px;
    border: none;
    background: var(--c-content);
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-muted);
    transition: var(--t-fast);
}

.stg-close:hover { background: #e2e8f0; color: var(--c-text); }

/* User card in settings */
.stg-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: linear-gradient(135deg, var(--c-content) 0%, rgba(14,165,233,.04) 100%);
    border-bottom: 1px solid var(--c-border);
}

.stg-avatar {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--g-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: var(--sh-teal);
}

.stg-user-info { flex: 1; min-width: 0; }

.stg-fullname {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 2px;
}

.stg-userid {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.stg-email {
    font-size: var(--fs-xs);
    color: var(--c-teal);
    margin-top: 2px;
}

.stg-tipo-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
    letter-spacing: .3px;
}

.stg-tipo-admin   { background: var(--c-gold-dim); color: #7c5a00; border: 1px solid rgba(212,168,67,.2); }
.stg-tipo-personal{ background: var(--c-active);  color: var(--c-teal-dim); border: 1px solid rgba(14,165,233,.2); }
.stg-tipo-user    { background: var(--c-success-dim); color: #065f46; border: 1px solid rgba(16,185,129,.2); }

/* Info grid */
.stg-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.stg-info-item {
    background: #fff;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stg-info-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stg-info-value {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
}

.stg-version-value {
    font-size: var(--fs-2xs);
    font-family: var(--fuente-mono);
    color: var(--c-muted);
}

/* Versión publicada (VersionBadge): inicio y login */
.version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-card);
    font-size: var(--fs-2xs);
    font-family: var(--fuente-mono);
    color: var(--c-muted);
    white-space: nowrap;
    cursor: default;
}
.version-badge--desfase {
    border-color: var(--c-warning);
    background: var(--c-warning-dim);
    color: #92400e;
}
/* Debajo del logo de la barra superior: pequeña y sin recuadro, para no quitar altura al contenido */
.tb-logo-box { flex-direction: column; gap: 2px; }
.tb-logo-box:has(.version-badge) img { height: 42px; }
.version-badge--compacta {
    padding: 0; border: 0; background: transparent;
    font-size: var(--fs-2xs); line-height: 1; letter-spacing: .02em;
    color: var(--gris-300);   /* sobre el azul marino del lateral */
}
.version-badge--compacta.version-badge--desfase { background: transparent; color: var(--c-warning); font-weight: 700; }
/* Version en el panel mobile */
.mp-version {
    padding: 8px 22px 16px;
    font-size: var(--fs-2xs);
    font-family: var(--fuente-mono);
    color: var(--c-muted);
    opacity: .6;
}

/* Explotacion section */
.stg-section {
    padding: 18px 22px 14px;
}

.stg-section-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stg-current-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 700;
    background: var(--g-teal);
    color: #fff;
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: .3px;
    box-shadow: var(--sh-teal);
}

.stg-explot-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.stg-explot-left {
    flex: 1;
    display: flex;
    align-items: center;
}

.stg-explot-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--border-subtle, #e5e7eb);
    padding-left: 16px;
}

.stg-explot-right .stg-sigla-select {
    width: 100%;
    margin-bottom: 0;
}

.stg-sigla-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.stg-sigla-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--c-border);
    background: #fff;
    font-family: var(--fuente-ui);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    box-shadow: var(--sh-xs);
}

.stg-sigla-btn:hover {
    border-color: var(--c-teal);
    color: var(--c-teal);
    background: var(--c-active);
}

.stg-sigla-btn.stg-sigla-active {
    background: var(--g-teal);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--sh-teal);
}

.stg-sigla-hint {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-bottom: 8px;
}

.stg-sigla-select {
    width: 100%;
    margin-bottom: 10px;
}

.stg-manual-row {
    display: flex;
    gap: 8px;
}

.stg-manual-input {
    flex: 1;
}

.stg-manual-btn {
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--g-teal);
    color: #fff;
    font-weight: 500;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: var(--t-fast);
    box-shadow: var(--sh-teal);
}

.stg-manual-btn:hover { filter: brightness(1.07); }
.stg-manual-btn:disabled { opacity: .4; cursor: default; }

.stg-help-text {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin: 6px 0;
    font-style: italic;
}

.stg-error-text { color: var(--c-danger); }

.stg-msg {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--c-success-dim);
    color: #065f46;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    border: 1px solid rgba(16,185,129,.2);
    animation: fadeIn .2s ease;
}

/* "Cambiar contraseña" link under user card */
.stg-edit-link {
    display: inline-block;
    margin-top: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--fs-2xs);
    color: #6366f1;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: .85;
    transition: opacity .15s;
}
.stg-edit-link:hover { opacity: 1; }

/* ── Profile modal ─────────────────────────────── */
.prof-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 2100;          /* above settings modal (z-index 2000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn .15s ease;
}

.prof-modal {
    background: var(--c-surface, #1a2540);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    width: 100%;
    max-width: 480px;
    max-height: 90dvh;
    overflow-y: auto;
    animation: slideUp .18s ease;
}

.prof-section {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.06));
}
.prof-section:last-child { border-bottom: none; }

.prof-section-title {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);   /* modal de perfil oscuro */
    margin-bottom: 14px;
}

.prof-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.prof-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.prof-label {
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: rgba(255,255,255,.5);
    letter-spacing: .03em;
}

.prof-input {
    background: var(--c-surface-2, rgba(255,255,255,.05));
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: var(--radius-sm, 6px);
    color: var(--c-text, #e2e8f0);
    font-size: var(--fs-sm);
    padding: 9px 12px;
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}
.prof-input:focus { border-color: var(--c-teal, #14b8a6); }

.prof-actions { margin-top: 4px; }

.prof-btn {
    padding: 9px 20px;
    border-radius: var(--radius-sm, 6px);
    border: none;
    background: var(--c-teal, #14b8a6);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s;
    box-shadow: var(--sh-teal);
}
.prof-btn:hover { filter: brightness(1.08); }
.prof-btn:disabled { opacity: .4; cursor: default; filter: none; }

@media (max-width: 480px) {
    .prof-field-row { grid-template-columns: 1fr; }
}

.stg-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--c-danger, #ef4444);
    color: var(--c-danger, #ef4444);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.stg-logout-btn:hover {
    background: var(--c-danger, #ef4444);
    color: #fff;
}

/* ================================================================
   LOGIN PAGE
   ================================================================ */
/* ================================================================
   INICIO DE SESIÓN (Pages/Login.razor, docs/login.md, 15/11/2026): dos paneles en el ordenador. A la izquierda la marca:
   una franja blanca con el logo de OviNET centrado (lleva su nombre: no se repite) y el lema debajo en DM Sans gris;
   bajo ella, el marino del lateral de la app con el lema largo y lo que hace OviNET, por menús; al pie, el logo
   de AGRAMA (en blanco) a la izquierda del nombre. A la derecha, el formulario. En el móvil, una columna.
   Sin animaciones si el sistema pide «reducir movimiento».
   ================================================================ */
.login-page-bg { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 28px 20px; background: var(--color-superficie); }
/* todo dentro de un cuadro centrado, con blanco alrededor: la mitad izquierda es la marca (marino), la derecha el formulario */
.lp-tarjeta { display: grid; grid-template-columns: 1fr 1fr; width: min(1040px, 100%); min-height: min(640px, calc(100dvh - 56px)); border-radius: var(--radio-lg); overflow: hidden; border: 1px solid var(--color-borde); box-shadow: var(--sombra-lg); background: var(--color-superficie); }
.lp-marca {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0; color: #fff;
    background: linear-gradient(160deg, var(--marca-marino-700) 0%, var(--marca-marino-900) 70%);
}
.lp-marca::before { content: ""; position: absolute; width: 520px; height: 520px; right: -200px; top: 60px; border-radius: 50%; background: radial-gradient(circle, var(--c-teal-glow) 0%, transparent 70%); pointer-events: none; }
.lp-marca::after { content: ""; position: absolute; width: 360px; height: 360px; left: -140px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--marca-oro-500) 16%, transparent) 0%, transparent 70%); pointer-events: none; }
.lp-marca > * { position: relative; z-index: 1; }
.lp-franja { background: #fff; padding: 28px 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-bottom: 3px solid var(--marca-oro-500); }
.lp-logo { width: 108px; height: 108px; object-fit: contain; display: block; }
.lp-lema { margin: 0; font-family: var(--fuente-ui); font-weight: 500; font-size: var(--fs-md); line-height: 1.3; color: var(--gris-500); letter-spacing: .02em; white-space: nowrap; }
/* lo que queda bajo la franja va centrado en vertical, a la altura del formulario */
.lp-marca-resto { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 26px 34px 30px; }
.lp-marca-cuerpo { width: 100%; max-width: 440px; }
.lp-lema-largo { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; margin: 0 0 16px; }
.lp-lema-largo b { color: var(--marca-oro-500); font-weight: 800; }
.lp-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-puntos li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-xs); color: rgba(255,255,255,.8); line-height: 1.4; }
.lp-puntos li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--marca-pizarra-300); margin-top: 2px; }
.lp-puntos b { color: #fff; font-weight: 700; }
.lp-marca-pie { width: 100%; max-width: 440px; display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-2xs); color: rgba(255,255,255,.55); letter-spacing: .03em; line-height: 1.4; }
.lp-marca-pie img { height: 40px; width: auto; flex-shrink: 0; opacity: .92; }
.lp-marca-pie b { display: block; color: rgba(255,255,255,.9); letter-spacing: .12em; font-size: var(--fs-xs); }

.lp-form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 28px; }
.lp-caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; animation: lpEntra .35s ease-out both; }
@keyframes lpEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lp-movil { display: none; }
.lp-tit { margin: 0; font-size: var(--fs-xl); font-weight: 800; color: var(--color-texto); letter-spacing: -.01em; line-height: 1.15; }
.lp-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--color-texto-suave); line-height: 1.45; }
.lp-campos { display: flex; flex-direction: column; gap: 14px; }
.lp-campo { display: flex; flex-direction: column; gap: 6px; }
.lp-form .lp-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--color-texto-2); text-transform: none; letter-spacing: 0; }
.lp-input-wrap { position: relative; display: flex; }
.lp-input {
    width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--color-borde-fuerte); border-radius: var(--radio-sm);
    font-family: var(--fuente-ui); font-size: var(--fs-md); color: var(--color-texto); background: var(--color-superficie); transition: border-color .15s, box-shadow .15s;
}
.lp-input::placeholder { color: var(--gris-400); }
.lp-input:focus { outline: none; border-color: var(--marca-azul-500); box-shadow: 0 0 0 4px var(--color-acento-suave); }
.lp-input.con-boton { padding-right: 48px; }
.lp-input.mono { font-family: var(--fuente-mono); letter-spacing: .02em; }
.lp-ojo {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: var(--radio-xs);
    background: transparent; color: var(--gris-500); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lp-ojo:hover { background: var(--color-superficie-2); color: var(--color-texto); }
.lp-ojo svg { width: 20px; height: 20px; }
.lp-pista { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--calidad-bajo); font-weight: 600; }
.lp-pista svg { width: 14px; height: 14px; }
.lp-opciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.lp-form .lp-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--color-texto-2); cursor: pointer; user-select: none; text-transform: none; letter-spacing: 0; }
.lp-form .lp-check input { width: 16px; height: 16px; accent-color: var(--marca-azul-600); margin: 0; }
.lp-btn {
    width: 100%; height: 48px; border: 0; border-radius: var(--radio-sm); background: var(--marca-marino-800); color: #fff;
    font-family: var(--fuente-ui); font-size: var(--fs-md); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s;
}
.lp-btn:hover:not(:disabled) { background: var(--marca-marino-700); box-shadow: var(--sombra-md); }
.lp-btn:active:not(:disabled) { transform: translateY(1px); }
.lp-btn:disabled { opacity: .7; cursor: default; }
.lp-btn:focus-visible { outline: 3px solid var(--color-acento-suave); outline-offset: 2px; }
.lp-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.lp-aviso, .lp-error { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-sm); font-size: var(--fs-sm); line-height: 1.4; }
.lp-aviso { background: var(--color-acento-suave); color: var(--marca-azul-700); }
.lp-error { background: var(--calidad-malo-fondo); color: var(--calidad-malo); font-weight: 600; }
.lp-aviso svg, .lp-error svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.lp-ayuda { font-size: var(--fs-xs); color: var(--color-texto-suave); line-height: 1.5; padding-top: 14px; border-top: 1px solid var(--color-borde); }
.lp-ayuda b { color: var(--color-texto-2); font-weight: 600; }
.lp-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--fs-2xs); color: var(--gris-400); }
.lp-pie .version-badge { font-size: var(--fs-2xs); }
.lp-instalar { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-full); background: var(--color-superficie); color: var(--color-acento-texto); font-family: var(--fuente-ui); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer; }
.lp-instalar:hover { background: var(--color-acento-suave); }
.lp-instalar svg { width: 13px; height: 13px; }

@media (max-width: 899px) {
    .login-page-bg { padding: 0; background: var(--color-fondo); align-items: flex-start; }
    .lp-tarjeta { grid-template-columns: 1fr; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .lp-marca { display: none; }
    .lp-form { padding: 24px 16px 40px; justify-content: flex-start; }
    .lp-movil { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; }
    .lp-movil .lp-logo { width: 100px; height: 100px; }
    .lp-movil .lp-lema { font-size: 16px; white-space: normal; text-align: center; }
    .lp-caja { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); padding: 22px 18px; box-shadow: var(--sombra-sm); }
    .lp-pie img { height: 26px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-caja { animation: none; }
    .lp-btn, .lp-input { transition: none; }
}

/* Espera mientras se lee la sesión (App.razor): igual que el arranque, para que no parpadee nada entre los dos */
.app-cargando { min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--color-superficie); }
.app-cargando::before { content: ""; width: 120px; height: 120px; background: url('../images/logo-ovinet.png') center / contain no-repeat; }

/* ================================================================
   MOBILE BOTTOM BAR
   ================================================================ */
.app-bottombar {
    display: none;
}

@media (max-width: 767px) {
    /* ── Native body scroll on mobile ─────────────────────────────────
       The inner-div overflow chain doesn't work reliably on iOS Safari.
       Switch to body scroll and pin the topbar with position:fixed.     */
    html, body {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    #app, #app > div {
        height: auto !important;
        min-height: 100dvh;
    }
    .app-shell {
        height: auto !important;
        min-height: 100dvh;
        /* overflow-x:clip clips horizontal without creating a scroll container,
           so overflow-y:visible (body scrolls) is preserved.                   */
        overflow-y: visible !important;
        overflow-x: clip !important;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .app-topbar {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 200;
        height: 58px;
    }
    .app-gold-bar {
        position: fixed;
        top: 58px; left: 0; right: 0;
        z-index: 199;
    }
    .app-body {
        overflow-y: visible !important;
        overflow-x: clip !important;
        height: auto !important;
        min-height: 0;
        padding-top: calc(58px + 2px); /* clear fixed topbar + gold bar */
        flex: 1;
        width: 100%;
    }
    .app-main {
        overflow-y: visible !important;
        overflow-x: clip !important;
        height: auto !important;
        min-height: 0;
        flex: 1;
        width: 100%;
    }
    .app-content {
        overflow-y: visible !important;
        overflow-x: clip !important;
        height: auto !important;
        width: 100%;
    }
    /* ── End native body scroll ──────────────────────────────────────── */

    .app-sidenav   { display: none; }
    .app-footer    { display: none; }

    .app-bottombar {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 300;
        background: rgba(13,21,37,.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255,255,255,.07);
        box-shadow: 0 -4px 20px rgba(0,0,0,.3);
        height: var(--bottombar-h);
        safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mob-nav-items {
        display: flex;
        height: var(--bottombar-h);
    }

    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        cursor: pointer;
        color: rgba(255,255,255,.55);
        font-size: var(--fs-2xs);
        font-weight: 600;
        text-decoration: none;
        transition: color var(--t-fast);
        user-select: none;
        letter-spacing: .3px;
        text-align: center;
        position: relative;
    }

    /* Indicador superior activo */
    .mob-nav-item.active::before,
    .mob-nav-item.mob-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 2.5px;
        background: var(--c-teal-light);
        border-radius: 0 0 4px 4px;
        box-shadow: 0 0 12px rgba(56,189,248,.75);
    }

    .mob-nav-item:hover,
    .mob-nav-item.active,
    .mob-nav-item.mob-active {
        color: #fff;
        text-decoration: none;
    }

    .mob-nav-icon {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        border-radius: 9px;
        transition: background var(--t-fast);
    }

    .mob-nav-item.active .mob-nav-icon,
    .mob-nav-item.mob-active .mob-nav-icon {
        background: rgba(14,165,233,.22);
    }

    .mob-nav-icon svg { width: 26px; height: 26px; }

    .content-inner {
        --ci-t: 10px; --ci-x: 12px; --ci-b: 10px;
        padding: var(--ci-t) var(--ci-x) calc(var(--bottombar-h) + var(--ci-b));
    }

    .tb-title-main { font-size: var(--fs-sm); }
    .tb-title-sub  { display: none; }
    .tb-user-info  { display: none; }
    .tb-sigla-mob  { display: inline-block; }

    /* Encabezado ficha: badge ligeramente más pequeño en móvil */
    .ficha-iden-badge { font-size: var(--fs-xl); padding: 5px 10px; }
    .ficha-header { padding: 7px 14px 9px; gap: 10px; }
    /* V.NEGRA en móvil: grid 2 cols → sexo+sigla en fila 1, V.NEGRA centrada en fila 2 */
    .ficha-iden-chips { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 5px; }
    .ficha-variedad-negra { grid-column: 1 / -1; justify-self: center; }

    /* Actividades recientes: columnas ultra-compactas en móvil */
    .act-table thead th {
        padding: 3px 3px;
        font-size: var(--fs-2xs);
        letter-spacing: 0;
    }
    .act-table tbody td {
        padding: 2px 3px;
        font-size: var(--fs-2xs);
    }
    .act-badge {
        padding: 1px 5px;
        font-size: var(--fs-2xs);
    }
    .act-table { width: 100%; }
}

/* ================================================================
   MOBILE SLIDE-IN PANEL
   ================================================================ */
.mob-menu-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 90vw);
    background: #fff;
    z-index: 901;
    transform: translateX(-100%);
    transition: transform var(--t-slow);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: var(--sh-xl);
}

.mob-menu-panel.mp-open {
    transform: translateX(0);
}

.mp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 12px 18px;
    background: radial-gradient(110% 120% at 20% 0%, #245f3c 0%, #123a24 70%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

/* Cabecera del menú del móvil: ganadería y usuario (el logo ya está en la barra) */
.mp-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-quien b { font-family: var(--fuente-ui); font-size: var(--fs-lg); font-weight: 800; color: #fff; }
.mp-quien span { font-size: var(--fs-xs); color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-siglas { display: flex; gap: 4px; }
.mp-siglas button { padding: 2px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radio-full); background: none; font-family: var(--fuente-ui); font-size: var(--fs-sm); font-weight: 800; color: #fff; cursor: pointer; }
.mp-siglas button.activa { background: var(--marca-oro-500); border-color: var(--marca-oro-500); color: var(--marca-marino-900); }
.mp-abiertas { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.mp-abierta { display: flex; align-items: center; border-radius: var(--radio-sm); }
.mp-abierta.activa { background: var(--color-acento-suave); }
.mp-abierta-ir { flex: 1; min-width: 0; padding: 9px 8px; border: 0; background: none; text-align: left; font-family: var(--fuente-ui); font-size: var(--fs-sm); color: var(--color-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mp-abierta.activa .mp-abierta-ir { font-weight: 700; color: var(--color-acento-texto); }
.mp-abierta-x { flex: none; width: 34px; height: 34px; border: 0; background: none; font-size: var(--fs-lg); color: var(--color-texto-suave); cursor: pointer; }
.mp-salir { color: var(--color-peligro); }

.mp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-logo {
    width: 32px; height: 32px;
    object-fit: contain;
    filter: brightness(1.1);
}

.mp-brand-name {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
}

.mp-close {
    width: 32px; height: 32px;
    border: none;
    background: rgba(255,255,255,.1);
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    transition: var(--t-fast);
}

.mp-close:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Selector de espacio dentro del panel móvil */
.mp-espacios { display: flex; gap: 4px; margin: 12px 14px 0; padding: 3px; border-radius: var(--radio-full); background: var(--color-superficie-2); border: 1px solid var(--color-borde); }
.mp-espacios button { flex: 1; padding: 8px 6px; border: 0; border-radius: var(--radio-full); background: transparent; color: var(--color-texto-2); font-family: var(--fuente-ui); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.mp-espacios button.activo { background: var(--marca-oro-500); color: var(--marca-marino-900); }

.mp-section {
    padding: 18px 18px 6px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--c-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    text-decoration: none;
    border-radius: 0;
}

.mp-item:hover, .mp-item.active {
    background: var(--c-content);
    color: var(--c-teal);
    text-decoration: none;
}

.mp-disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

.mp-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--c-muted);
}

.mp-icon svg { width: 16px; height: 16px; }

.mp-item:hover .mp-icon, .mp-item.active .mp-icon { color: var(--c-teal); }

.mp-soon {
    font-size: var(--fs-2xs);
    font-weight: 600;
    background: var(--c-gold-dim);
    color: #7c5a00;
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: .2px;
}

/* Mobile accordion groups */
.mp-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.mp-group-toggle:hover, .mp-group-toggle.mpg-active {
    background: var(--c-content);
    color: var(--c-teal);
}

.mp-chevron {
    margin-left: auto;
    color: var(--c-muted);
    transition: transform var(--t-normal);
    display: flex; align-items: center;
}

.mpg-open .mp-chevron { transform: rotate(90deg); }

.mp-subitems {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--t-slow);
}

.mps-open { max-height: 500px; }

.mp-subitem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 9px 18px 9px 44px;
    font-size: var(--fs-sm);
    color: var(--c-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}

.mp-subitem:hover, .mp-subitem.active {
    background: var(--c-content);
    color: var(--c-teal);
    text-decoration: none;
}

.mps-disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

/* ================================================================
   BLAZOR ERROR UI
   ================================================================ */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: rgba(255,255,255,.9);
    padding: 14px 20px;
    font-size: var(--fs-sm);
    text-align: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}

#blazor-error-ui a { color: var(--c-teal-light); }

/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.text-muted   { color: var(--c-muted) !important; }
.text-teal    { color: var(--c-teal) !important; }
.text-gold    { color: var(--c-gold) !important; }
.text-success { color: var(--c-success) !important; }
.text-danger  { color: var(--c-danger) !important; }
.text-sm      { font-size: var(--fs-xs) !important; }
.text-xs      { font-size: var(--fs-2xs) !important; }
.fw-600       { font-weight: 600 !important; }
.fw-700       { font-weight: 700 !important; }
.font-outfit  { font-family: var(--fuente-ui); }
.gap-2        { gap: 8px !important; }
.gap-3        { gap: 12px !important; }
.rounded      { border-radius: var(--radius) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.d-flex       { display: flex !important; }
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.w-100        { width: 100% !important; }
.overflow-hidden { overflow: hidden !important; }
.mt-1         { margin-top: 4px !important; }
.mt-2         { margin-top: 8px !important; }
.mt-3         { margin-top: 16px !important; }
.mb-1         { margin-bottom: 4px !important; }
.mb-2         { margin-bottom: 8px !important; }
.mb-3         { margin-bottom: 16px !important; }
.mb-4         { margin-bottom: 24px !important; }
.p-3          { padding: 16px !important; }
.p-4          { padding: 24px !important; }

/* ================================================================
   SPECIFIC PAGE STYLES
   ================================================================ */

/* ── Inventario / Buzon filter bar ── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #fafbfd;
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.filter-bar input, .filter-bar select {
    max-width: 240px;
    background: #fff;
}

/* ── Animal status badges ── */
.status-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #065f46;
    background: var(--c-success-dim);
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid rgba(16,185,129,.2);
}

.status-active::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--c-success);
    border-radius: 50%;
    flex-shrink: 0;
}

.status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--c-border);
}

/* ── Gestion Lector ── */
.lector-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Individual animal tabs ── */
.animal-header {
    background: linear-gradient(135deg, var(--c-content) 0%, rgba(14,165,233,.06) 100%);
    padding: 20px 24px;
    border-bottom: 1px solid var(--c-border);
}

.animal-id-chip {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 700;
    background: var(--c-text);
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: .5px;
    display: inline-block;
}

/* ── Quick info grid ── */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
}

.info-item {
    padding: 13px 18px;
    border-bottom: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
}

.info-item:nth-child(even) { background: #fafbfd; }

.info-item-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}

.info-item-value {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
}

/* ── Buzon file type badges ── */
.ext-pdf   { background: rgba(239,68,68,.1); color: #b91c1c; border: 1px solid rgba(239,68,68,.2); }
.ext-xlsx  { background: rgba(16,185,129,.1); color: #065f46; border: 1px solid rgba(16,185,129,.2); }
.ext-docx  { background: rgba(14,165,233,.1); color: var(--c-teal-dim); border: 1px solid rgba(14,165,233,.2); }
.ext-zip   { background: rgba(245,158,11,.1); color: #78350f; border: 1px solid rgba(245,158,11,.2); }

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--c-teal);
    text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb-sep {
    color: var(--c-border-strong);
    font-size: var(--fs-2xs);
}

/* ── Empty state ── */
.empty-state {
    padding: 60px 24px;
    text-align: center;
    color: var(--c-muted);
}

.empty-state svg {
    width: 48px; height: 48px;
    opacity: .3;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text-secondary);
    margin: 0 0 6px;
}

.empty-state p {
    font-size: var(--fs-sm);
    max-width: 320px;
    margin: 0 auto;
}

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px;
}

.page-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: #fff;
    color: var(--c-text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--t-fast);
}

.page-btn:hover { background: var(--c-content); border-color: var(--c-border-strong); }

.page-btn.active {
    background: var(--g-teal);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sh-teal);
}

/* ── Tooltip ── */
[title] { cursor: help; }

/* ================================================================
   ANIMATIONS — Page enter
   ================================================================ */
.content-inner > * {
    /* backwards y no both: al terminar no se queda ningún transform aplicado (aunque sea nulo, crea un containing block
       y los paneles position:fixed de la página, como el detalle del cuadro de mandos, se mueven con el scroll) */
    animation: pageEnter .25s ease backwards;
}

/* Los overlays fijos al viewport (modales) no deben heredar la animación de
   entrada `pageEnter`: su transform crea un containing-block que rompe
   position:fixed y descoloca el modal. Se usa fadeIn (solo opacidad), igual
   que .gl-modal-backdrop. */
.content-inner > .ac-modal-backdrop {
    animation: fadeIn .2s ease;
}

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

/* ================================================================
   SCROLLBAR — Custom thin scrollbar
   ================================================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}

*::-webkit-scrollbar       { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* ================================================================
   RESPONSIVE — Tablet
   ================================================================ */
@media (max-width: 1024px) and (min-width: 768px) {
    .rsm-panels {
        grid-template-columns: 1fr 1fr;
    }

    .content-inner {
        --ci-t: 12px; --ci-x: 14px; --ci-b: 12px;
        padding: var(--ci-t) var(--ci-x) var(--ci-b);
    }
}

/* En móvil sobreescribir explícitamente para que el padding-bottom
   no quede anulado por la regla tablet de arriba */
@media (max-width: 767px) {
    .content-inner {
        padding-bottom: calc(var(--bottombar-h) + var(--ci-b)) !important;
    }
}

@media (max-width: 600px) {
    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Split cards (Hembras/Machos): span full width to keep internal 2-col layout */
    .stat-card--split {
        grid-column: span 2;
    }

    /* Percentiles & RGA: span full width so grid/flex renders properly */
    .stat-card.sc-gold,
    .stat-card.sc-slate {
        grid-column: span 2;
    }

    /* Keep stat numbers readable at full width */
    .stat-value { font-size: var(--fs-2xl); }

    /* Percentiles: scale down oversized values */
    .perc-grid-val { font-size: var(--fs-lg); }
    .perc-grid-sub { font-size: var(--fs-xs); }
    .perc-grid-hdr { font-size: var(--fs-2xs); }
    .perc-grid-lbl { font-size: var(--fs-2xs); }

    /* RGA: scale down oversized position numbers */
    .rga-val { font-size: var(--fs-xl); }
    .rga-sup { font-size: var(--fs-2xs); }

    .page-header h1 { font-size: var(--fs-lg); }

    .lp-card { padding: 30px 24px 28px; }

    .stg-info-grid { grid-template-columns: 1fr; }

    .rsm-panels { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .stat-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   OVI-CARD  — Generic content card (ConsultaIndividual, Inventario)
   ================================================================ */
.ovi-card {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.ovi-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border);
    background: #fafbfd;
}

/* Animal meta info */
.animal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-top: 6px;
    align-items: center;
}

.estado-activo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #065f46;
    background: var(--c-success-dim);
    padding: 4px 11px;
    border-radius: 20px;
    border: 1px solid rgba(16,185,129,.2);
}

.estado-activo::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--c-success);
    border-radius: 50%;
    flex-shrink: 0;
}

.estado-baja {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #7f1d1d;
    background: var(--c-danger-dim);
    padding: 4px 11px;
    border-radius: 20px;
    border: 1px solid rgba(239,68,68,.2);
}

/* ── Tabs ── */
.ovi-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--c-border);
    background: #fafbfd;
    overflow-x: auto;
    scrollbar-width: none;
}

.ovi-tabs::-webkit-scrollbar { display: none; }

.ovi-tab {
    padding: 11px 15px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ovi-tab:hover { color: var(--c-text); }

.ovi-tab.active {
    color: var(--c-teal);
    border-bottom-color: var(--c-teal);
    font-weight: 600;
}

.ovi-tab-content {
    padding: 20px;
}

/* ── Data grid (fields) ── */
.data-section {
    margin-bottom: 20px;
}

.data-section:last-child { margin-bottom: 0; }

.data-section-title {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--color-texto-suave);
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-border);
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.data-field {
    padding: 7px 12px;
    border-bottom: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    background: #fff;
}

.data-field:nth-child(even) { background: #fafbfd; }

.data-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 3px;
}

.data-value {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    line-height: 1.3;
}

.data-value.mono {
    font-family: var(--fuente-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .3px;
}

/* ── Progenitor cards ── */
.progenitor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.progenitor-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progenitor-header {
    padding: 10px 14px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-border);
}

.progenitor-header.padre {
    background: rgba(14,165,233,.07);
    color: var(--c-teal-dim);
    border-bottom-color: rgba(14,165,233,.15);
}

.progenitor-header.madre {
    background: rgba(212,168,67,.07);
    color: #7c5a00;
    border-bottom-color: rgba(212,168,67,.15);
}

.progenitor-body {
    padding: 12px 14px;
    font-size: var(--fs-sm);
}

/* ── Search bar ── */
.search-bar {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    padding: 18px 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.search-bar .form-group { margin-bottom: 0; flex: 1; min-width: 220px; }

/* ── Not found / empty states ── */
.not-found-card {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    padding: 40px 24px;
    text-align: center;
    box-shadow: var(--sh-sm);
    margin-bottom: 20px;
}

.not-found-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: .5;
}

/* ── Loading container ── */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 14px;
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

/* Bootstrap-compatible spinner */
.spinner-border {
    width: 2rem; height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentcolor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .75s linear infinite;
    display: inline-block;
    color: var(--c-teal);
}

.spinner-border-ovi {
    width: 36px; height: 36px;
    border-width: 3px;
    border-color: var(--c-border);
    border-top-color: var(--c-teal);
}

.spinner-border-sm {
    width: 1rem; height: 1rem;
    border-width: .2em;
}

/* ── Inventory count badge ── */
.inv-count-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--c-active);
    color: var(--c-teal-dim);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(14,165,233,.2);
}

/* ── Inventory table ── */
.ovi-table-wrapper { overflow-x: auto; }

/* Inventory page: table card fills remaining height, table scrolls internally */
.inv-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.inv-table-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inv-table-card .ovi-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

.ovi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.ovi-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    color: var(--color-texto-suave);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 10px;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast);
    text-align: center;
}

.ovi-table thead th:hover { color: var(--c-teal); }

.ovi-table tbody tr {
    border-bottom: 1px solid var(--c-border);
    transition: background var(--t-fast);
}

.ovi-table tbody tr:last-child { border-bottom: none; }
.ovi-table tbody tr:hover { background: #f8fafc; }

.ovi-table tbody td {
    padding: 4px 10px;
    vertical-align: middle;
    color: var(--c-text-secondary);
    text-align: center;
}

/* ================================================================
   BUZÓN PAGE  — bz-* classes
   ================================================================ */
.bz-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.bz-header-left { display: flex; align-items: center; gap: 14px; }

.bz-header-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--c-active);
    border: 1px solid rgba(14,165,233,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--c-teal);
}

.bz-title {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 3px;
    letter-spacing: -.3px;
}

.bz-subtitle {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    margin: 0;
}

.bz-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bz-count-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--c-active);
    color: var(--c-teal-dim);
    padding: 5px 13px;
    border-radius: 20px;
    border: 1px solid rgba(14,165,233,.2);
}

.bz-refresh-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--c-border);
    background: #fff;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--c-muted);
    transition: var(--t-fast);
    box-shadow: var(--sh-xs);
}

.bz-refresh-btn:hover { background: var(--c-content); color: var(--c-teal); border-color: var(--c-teal); }
.bz-refresh-btn:disabled { opacity: .5; cursor: default; }

.bz-spin { animation: spin .7s linear infinite; }

.bz-alert-error {
    background: var(--c-danger-dim);
    color: #7f1d1d;
    border: 1px solid rgba(239,68,68,.2);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: var(--fs-sm);
    margin-bottom: 16px;
}

/* ── Filter pills ── */
.bz-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 0 6px;
}

.bz-filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--c-border);
    background: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-muted);
    cursor: pointer;
    transition: var(--t-fast);
    white-space: nowrap;
    box-shadow: var(--sh-xs);
}

.bz-filter-pill:hover {
    border-color: var(--c-teal);
    color: var(--c-teal);
    background: var(--c-active);
}

.bz-pill-active {
    background: var(--g-teal) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--sh-teal) !important;
}

/* ── Loading/empty states ── */
.bz-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 20px;
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.bz-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-teal);
    border-radius: 50%;
    animation: spin .75s linear infinite;
    flex-shrink: 0;
}

.bz-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--c-muted);
}

.bz-empty-icon {
    font-size: 40px;
    margin-bottom: 14px;
    opacity: .3;
}

.bz-empty-title {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text-secondary);
    margin: 0 0 6px;
}

.bz-empty-sub {
    font-size: var(--fs-sm);
    max-width: 300px;
    margin: 0 auto;
}

/* ── Card list ── */
.bz-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bz-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 16px;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    transition: background var(--t-fast);
    position: relative;
}

.bz-card:last-child { border-bottom: none; }
.bz-card:hover { background: #fafbfd; }
.bz-card-loading { opacity: .6; pointer-events: none; }

.bz-ext-wrap { flex-shrink: 0; }

.bz-ext {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: inline-block;
}

/* Extension colors */
.bz-ext-pdf  { background: rgba(239,68,68,.1);  color: #b91c1c; border: 1px solid rgba(239,68,68,.2);  }
.bz-ext-xlsx { background: rgba(16,185,129,.1); color: #065f46; border: 1px solid rgba(16,185,129,.2); }
.bz-ext-xls  { background: rgba(16,185,129,.1); color: #065f46; border: 1px solid rgba(16,185,129,.2); }
.bz-ext-docx { background: rgba(14,165,233,.1); color: var(--c-teal-dim); border: 1px solid rgba(14,165,233,.2); }
.bz-ext-doc  { background: rgba(14,165,233,.1); color: var(--c-teal-dim); border: 1px solid rgba(14,165,233,.2); }
.bz-ext-zip  { background: rgba(245,158,11,.1); color: #78350f; border: 1px solid rgba(245,158,11,.2);  }
.bz-ext-rar  { background: rgba(245,158,11,.1); color: #78350f; border: 1px solid rgba(245,158,11,.2);  }
.bz-ext-txt  { background: #f1f5f9; color: var(--c-muted); border: 1px solid var(--c-border); }
.bz-ext-csv  { background: rgba(16,185,129,.08); color: #065f46; border: 1px solid rgba(16,185,129,.15); }

.bz-card-body { flex: 1; min-width: 0; }

.bz-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.bz-card-asunto {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bz-cat-tag {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
    background: var(--c-active);
    color: var(--c-teal-dim);
    border: 1px solid rgba(14,165,233,.15);
}

.bz-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    flex-wrap: wrap;
}

.bz-meta-dot {
    opacity: .4;
    font-size: var(--fs-2xs);
}

.bz-card-action { flex-shrink: 0; }

.bz-open-btn {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--c-border);
    background: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-teal);
    cursor: pointer;
    transition: var(--t-fast);
    box-shadow: var(--sh-xs);
}

.bz-open-btn:hover {
    background: var(--c-active);
    border-color: rgba(14,165,233,.3);
}

/* ================================================================
   GESTIÓN LECTOR  — gl-* classes
   ================================================================ */

/* ── Compact single-line header bars ───────────────────────────── */
.gl-detail-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 0;
    flex-wrap: wrap;
}

.gl-list-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 12px;
    font-size: var(--fs-sm);
    color: var(--c-muted);
    flex-wrap: wrap;
}
.gl-list-bar strong { color: var(--c-teal); font-weight: 600; }

.gl-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    box-shadow: var(--sh-xs);
    white-space: nowrap;
    flex-shrink: 0;
}
.gl-back-btn:hover {
    background: var(--c-content);
    border-color: var(--c-border-strong);
}

.gl-detail-desc {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

.gl-detail-date {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.gl-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fafbfd;
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.gl-tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--c-border);
    background: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    box-shadow: var(--sh-xs);
    white-space: nowrap;
}

.gl-tb-btn:hover {
    background: var(--c-content);
    border-color: var(--c-border-strong);
}

.gl-tb-btn--update {
    background: #fff8e1;
    border-color: #f59e0b !important;
    color: #92400e !important;
    font-weight: 500;
}
.gl-tb-btn--update:hover {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
}

.gl-tb-btn.active, .gl-tb-btn-primary {
    background: var(--g-teal) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--sh-teal) !important;
}

.gl-tb-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(239,68,68,.3) !important;
}

.gl-tb-btn-rep {
    color: #15803d;
    border-color: rgba(21,128,61,.25) !important;
}
.gl-tb-btn-rep:hover {
    background: rgba(21,128,61,.07) !important;
    border-color: rgba(21,128,61,.35) !important;
    color: #15803d !important;
}

/* ── Selección Visual de Reposición modal ───────────────────── */
.cl-rep-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 600px) {
    .cl-rep-layout { grid-template-columns: 1fr; }
}
.cl-rep-controls { display: flex; flex-direction: column; }
.cl-rep-section-title {
    font-size: .7rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.cl-rep-smart-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: .68rem;
    font-weight: 700;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cl-rep-smart-btn:hover { background: #dcfce7; border-color: #86efac; }
.cl-rep-slider-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.cl-rep-chr-lbl {
    font-size: .73rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.cl-rep-range {
    width: 100%;
    min-width: 0;
    accent-color: #16a34a;
    cursor: pointer;
}
/* custom ± spinner (replaces native number input) */
.cl-rep-spin {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.cl-rep-spin-btn {
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    color: #374151;
    transition: background .12s;
}
.cl-rep-spin-btn:hover { background: #e2e8f0; }
.cl-rep-spin-val {
    font-size: .72rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    color: var(--sc, #374151);
}
.cl-rep-spin-input {
    width: 26px;
    border: none;
    background: transparent;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    color: var(--sc, #374151);
    -moz-appearance: textfield;
    padding: 0;
}
.cl-rep-spin-input::-webkit-inner-spin-button,
.cl-rep-spin-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.cl-rep-spin-input:focus { outline: none; }
.cl-rep-top-hero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 999px;
    flex: 1;
    max-width: 480px;
    min-width: 280px;
    margin: 0 14px;
}
.cl-rep-top-hero-lbl {
    font-size: .68rem;
    font-weight: 800;
    color: #15803d;
    letter-spacing: .1em;
    flex-shrink: 0;
}
.cl-rep-top-hero-range {
    flex: 1;
    min-width: 0;
    accent-color: #16a34a;
    cursor: pointer;
}
.cl-rep-top-hero-num {
    width: 42px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #15803d !important;
    text-align: right;
    padding: 2px 4px !important;
    background: #fff !important;
}
.cl-rep-top-hero-pct {
    font-size: .9rem;
    font-weight: 700;
    color: #15803d;
    margin-left: -3px;
}
.cl-rep-w-num {
    width: 36px !important;
    text-align: right !important;
    font-weight: 700 !important;
    padding: 2px 4px !important;
    font-size: .78rem !important;
}
.cl-rep-thresholds {
    margin-top: 10px;
    padding: 7px 8px 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.cl-rep-thresholds-title {
    font-size: .64rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}
.cl-rep-th-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    line-height: 1.55;
    color: #475569;
    white-space: nowrap;
}
.cl-rep-th-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cl-rep-th-lbl {
    color: #334155;
    font-weight: 600;
    min-width: 64px;
}
.cl-rep-th-val { color: #475569; }
.cl-rep-th-val strong { color: #15803d; }
.cl-rep-th-avg { color: var(--color-texto-suave); }
.cl-rep-th-sep { color: #cbd5e1; }

/* Calidad de las seleccionadas — visualización en barra */
.cl-rep-q-legend {
    display: flex;
    font-size: .58rem;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 0 42px 3px 86px;  /* alinea MEJOR/PEOR sólo con la barra, no con la columna de mediana */
}
.cl-rep-q-row-head {
    display: grid;
    grid-template-columns: 56px 1fr 48px;
    gap: 8px;
    font-size: .55rem;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-bottom: 2px;
}
.cl-rep-q-row-head > span:last-child { text-align: right; }
.cl-rep-q-row {
    display: grid;
    grid-template-columns: 56px 1fr 48px;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
}
.cl-rep-q-lbl {
    font-size: .68rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.cl-rep-q-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.cl-rep-q-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, #bbf7d0 0%, #fef9c3 50%, #fecaca 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.cl-rep-q-ref {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 16px;
    background: #334155;
    transform: translateX(-1.5px);
    border-radius: 1.5px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .95);
    z-index: 2;
}
.cl-rep-q-mark {
    position: absolute;
    top: -3px;
    width: 12px;
    height: 14px;
    border-radius: 3px;
    transform: translateX(-6px);
    z-index: 1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .85);
}
.cl-rep-q-val {
    font-size: .8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.cl-rep-q-val-ref {
    font-size: .68rem;
    font-weight: 500;
    color: var(--color-texto-suave);
}
.cl-rep-q-foot {
    font-size: .64rem;
    color: #64748b;
    margin-top: 7px;
    line-height: 1.45;
}
.cl-rep-q-foot strong { color: #475569; font-weight: 700; }
/* Cursor sobre puntos del scatter */
.cl-rep-dot { cursor: pointer; }
.cl-rep-dot:hover circle { stroke: #0f172a; stroke-width: 1.2; }

/* Veto desplegable */
.cl-rep-veto {
    margin-top: 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.cl-rep-veto.is-open {
    border-color: #f87171;
    box-shadow: 0 1px 4px rgba(220, 38, 38, .08);
}
.cl-rep-veto-head {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background .12s;
}
.cl-rep-veto-head:hover { background: rgba(254, 226, 226, .55); }
.cl-rep-veto-head-l1 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cl-rep-veto-head-l2 {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 18px;
    font-size: .62rem;
    color: #64748b;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    width: 100%;
}
.cl-rep-veto-sep { color: #cbd5e1; }
.cl-rep-veto-caret {
    font-size: .65rem;
    color: #b91c1c;
    width: 10px;
    flex-shrink: 0;
}
.cl-rep-veto-title {
    font-size: .68rem;
    font-weight: 700;
    color: #991b1b;
    text-transform: uppercase;
    letter-spacing: .35px;
}
.cl-rep-veto-count {
    margin-left: auto;
    font-size: .6rem;
    color: #fff;
    background: #dc2626;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .2px;
}
.cl-rep-veto-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .6rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 2px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.cl-rep-veto-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.cl-rep-veto-body {
    padding: 8px 10px 10px;
    border-top: 1px solid #fee2e2;
    background: #fff;
}
.cl-rep-veto-hint {
    font-size: .6rem;
    color: var(--color-texto-suave);
    margin-bottom: 6px;
    line-height: 1.35;
}
.cl-rep-veto-srow {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
}
.cl-rep-veto-srow-lbl {
    font-size: .68rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
/* sliders del veto en rojo */
.cl-rep-range-veto {
    accent-color: #dc2626;
}
.cl-rep-ia-note {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    background: #eff6ff;
    border: 1px solid #bae6fd;
    border-radius: 7px;
    line-height: 1.4;
}
.cl-rep-scatter { display: flex; flex-direction: column; gap: 5px; }
.cl-rep-legend {
    display: flex;
    gap: 12px;
    font-size: .7rem;
    color: #64748b;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3px;
}
.cl-rep-leg-item { display: flex; align-items: center; gap: 4px; }
.cl-rep-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.cl-rep-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.cl-rep-legend-line { display: inline-block; width: 14px; height: 0; border-top: 1.5px dashed #16a34a; opacity: .75; }
.cl-rep-stats {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    justify-content: space-around;
    flex-wrap: wrap;
}
.cl-rep-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; }
.cl-rep-stat-val { font-size: 1.2rem; font-weight: 700; color: #1e293b; line-height: 1; }
.cl-rep-stat-lbl { font-size: .66rem; color: var(--color-texto-suave); text-transform: uppercase; letter-spacing: .04em; }

.gl-tb-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.gl-tb-sep {
    width: 1px;
    height: 22px;
    background: var(--c-border);
    flex-shrink: 0;
}

/* Tabs de navegación principal de la vista lista */
.gl-lista-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-muted);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 7px;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    white-space: nowrap;
}
.gl-lista-tab:hover {
    color: var(--c-text);
    border-color: var(--c-teal);
}
.gl-lista-tab--active {
    color: var(--c-teal);
    background: #e6f7f5;
    border-color: var(--c-teal);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(20,184,166,.12);
}

/* Tabs */
.gl-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    border-bottom: 2px solid var(--c-border);
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 4px;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
}

.gl-tabs::-webkit-scrollbar { display: none; }

.gl-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: var(--fs-xs);
    font-weight: 600;     /* fixed weight on all tabs to prevent width shift */
    color: var(--c-muted);
    border: 1.5px solid transparent;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.gl-tab:hover {
    color: var(--c-text);
    background: var(--c-surface);
    border-color: var(--c-border);
}

.gl-tab.active {
    color: var(--c-teal);
    background: #e6f7f5;
    border-color: var(--c-teal);
}

.gl-tab-count {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 700;
    background: var(--c-active);
    color: var(--c-teal-dim);
    padding: 1px 6px;
    border-radius: 20px;
    border: 1px solid rgba(14,165,233,.15);
}

.gl-tab.active .gl-tab-count {
    background: var(--c-teal);
    color: #fff;
    border-color: transparent;
}

/* Table styles */
.gl-idelec {
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: .2px;
}

.gl-descripcion {
    font-size: var(--fs-sm);
    color: var(--c-text-secondary);
}

.gl-obs {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    font-style: italic;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-fecha {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    white-space: nowrap;
}

.gl-hora {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
}

.gl-reads-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 600;
    background: var(--c-success-dim);
    color: #065f46;
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid rgba(16,185,129,.2);
}

.gl-act-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 600;
    background: var(--c-active);
    color: var(--c-teal-dim);
    padding: 2px 7px;
    border-radius: 12px;
    border: 1px solid rgba(14,165,233,.15);
}

/* Row actions */
.gl-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--t-fast);
}

tr:hover .gl-row-actions { opacity: 1; }

.gl-icon-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--c-muted);
    transition: var(--t-fast);
    flex-shrink: 0;
}

.gl-icon-btn:hover { background: var(--c-content); color: var(--c-text); border-color: var(--c-border-strong); }

.gl-icon-btn-edit:hover  { color: var(--c-teal); border-color: rgba(14,165,233,.3); background: var(--c-active); }
.gl-icon-btn-delete:hover { color: var(--c-danger); border-color: rgba(239,68,68,.3); background: var(--c-danger-dim); }

.gl-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--c-border);
    background: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-teal);
    cursor: pointer;
    transition: var(--t-fast);
}

.gl-edit-btn:hover { background: var(--c-active); border-color: rgba(14,165,233,.3); }

/* Inline edit */
.gl-desc-edit-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}

.gl-inline-edit-btn, .gl-inline-save-btn, .gl-inline-cancel-btn {
    padding: 5px 11px;
    border-radius: 6px;
    border: none;
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: var(--t-fast);
}

.gl-inline-edit-btn { background: var(--c-active); color: var(--c-teal); }
.gl-inline-save-btn { background: var(--g-teal); color: #fff; box-shadow: var(--sh-teal); }
.gl-inline-cancel-btn { background: #f1f5f9; color: var(--c-muted); }

.gl-inline-save-btn:hover { filter: brightness(1.07); }
.gl-inline-cancel-btn:hover { background: #e2e8f0; }

/* Alerts */
.gl-alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.45;
    border: 1px solid transparent;
}

.gl-alert-success {
    background: var(--c-success-dim);
    color: #065f46;
    border-color: rgba(16,185,129,.2);
}

.gl-alert-error {
    background: var(--c-danger-dim);
    color: #7f1d1d;
    border-color: rgba(239,68,68,.2);
}

.gl-alert-warning {
    background: #fef9c3;
    color: #713f12;
    border-color: rgba(234,179,8,.3);
}

/* Fusión de descargas */
.gl-fusion-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: #eff6ff;
    border: 1px solid rgba(59,130,246,.3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: #1e40af;
    flex-wrap: wrap;
}

.gl-row-fusion-sel {
    background: #dbeafe !important;
}

.gl-icon-btn-select:hover {
    color: #3b82f6;
    border-color: rgba(59,130,246,.35);
    background: #eff6ff;
}

.gl-icon-btn-select.selected {
    color: #2563eb;
    border-color: rgba(59,130,246,.5);
    background: #dbeafe;
    opacity: 1 !important;
}

/* When fusion mode is active, always show select buttons */
.gl-fusion-active .gl-row-actions { opacity: 1; }

/* Highlighted row in detail table (selected for crear-con-seleccion) */
.gl-row-sel-check { background: #eff6ff !important; }

/* Loading overlay */
.gl-loading-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.gl-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: inherit;
}

/* ── Agente local (lector físico) ─────────────────────────────────── */
.gl-agente-card {
    padding: 10px 16px;
    margin-bottom: 12px;
}

.gl-agente-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gl-agente-dot--ok {
    background: #16a34a;
    box-shadow: 0 0 0 3px #dcfce7;
}

.gl-agente-dot--off {
    background: #9ca3af;
    box-shadow: 0 0 0 3px #f1f5f9;
}

.gl-agente-dot--checking {
    background: #f59e0b;
    box-shadow: 0 0 0 3px #fef3c7;
    animation: pulse-dot 1.2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* Sub-panel (search-replace) */
.gl-sr-panel {
    background: #fafbfd;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;       /* never collapse inside a flex column */
    margin-bottom: 16px;
    animation: slideInLeft .2s ease;
}

.gl-sr-panel-body {
    padding: 12px 16px;
}

.gl-sr-panel-header {
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Modal */
.gl-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,22,40,.55);
    backdrop-filter: blur(4px);
    z-index: 900;
    animation: fadeIn .2s ease;
}

.gl-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--sh-xl);
    z-index: 901;
    animation: scaleIn .22s cubic-bezier(.4,0,.2,1);
}

.gl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-border);
    background: #fafbfd;
    border-radius: 16px 16px 0 0;
    font-family: var(--fuente-ui);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}

.gl-modal-close {
    width: 30px; height: 30px;
    border: none;
    background: var(--c-content);
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-muted);
    transition: var(--t-fast);
}

.gl-modal-close:hover { background: #e2e8f0; color: var(--c-text); }

.gl-modal-body {
    padding: 20px 22px;
}

.gl-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: #fafbfd;
    border-radius: 0 0 16px 16px;
}

.gl-modal-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.gl-modal-info-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    min-width: 120px;
    padding-top: 2px;
}

.gl-modal-info-val {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    flex: 1;
}

/* Detail table card: clip visually (border-radius) without blocking inner scroll */
.gl-detail-card {
    overflow: clip !important;
}

/* Scrollable table container — sticky thead works, no overlap with tabs bar */
.gl-scroll-wrap {
    position: relative;                              /* anchors sticky thead correctly */
    max-height: clamp(200px, calc(100dvh - 300px), 68dvh);
    overflow-y: auto;
    overflow-x: auto;
}

/* Compact rows for the detail record table */
.gl-table.ovi-table tbody td {
    padding: 3px 8px;
    font-size: var(--fs-xs);
}
.gl-table.ovi-table thead th {
    padding: 6px 8px;
    font-size: var(--fs-2xs);
}

/* Table footer */
.gl-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    background: #fafbfd;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Descarga badge ── */
.desc-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: .2px;
}

/* Category colors - generic */
.desc-badge-default, .desc-badge-generic {
    background: var(--c-active);
    color: var(--c-teal-dim);
    border: 1px solid rgba(14,165,233,.15);
}

/* GestionLector category badge colours */
.badge-paridera { background: #bbf7d0; color: #14532d; border: 1px solid #4ade80; }
.badge-bajas    { background: #fecaca; color: #7f1d1d; border: 1px solid #f87171; }
.badge-ecog     { background: #bae6fd; color: #0c4a6e; border: 1px solid #38bdf8; }
.badge-insem    { background: #ddd6fe; color: #4c1d95; border: 1px solid #a78bfa; }
.badge-otros    { background: #e2e8f0; color: #334155; border: 1px solid #94a3b8; }

/* Bootstrap utilities not in our CSS (compatibility) */
.ms-2 { margin-left: 8px !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.fw-semibold { font-weight: 600 !important; }
.small  { font-size: 85% !important; }
.text-primary { color: var(--c-teal) !important; }
.text-center  { text-align: center !important; }
.flex-wrap    { flex-wrap: wrap !important; }
.font-monospace { font-family: var(--fuente-ui); }
.input-group  { display: flex; align-items: stretch; }
.input-group-text {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: var(--fs-sm);
    background: #fff;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
    color: var(--c-muted);
}
.border-end-0 { border-right: none !important; }
.border-start-0 { border-left: none !important; }
.input-group > input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* btn-outline-secondary override */
.btn-outline-secondary {
    background: #fff;
    border: 1.5px solid var(--c-border-strong);
    color: var(--c-text-secondary);
}
.btn-outline-secondary:hover { background: var(--c-content); }

/* btn-outline-danger override */
.btn-outline-danger {
    background: #fff;
    border: 1.5px solid rgba(239,68,68,.4);
    color: var(--c-danger);
}
.btn-outline-danger:hover { background: var(--c-danger-dim); }

/* form-control-sm */
.form-control-sm, .form-select-sm {
    padding: 7px 10px;
    font-size: var(--fs-xs);
    border-radius: var(--radius-xs);
}

.form-label-sm { font-size: var(--fs-2xs); }
.form-text { font-size: var(--fs-2xs); color: var(--c-muted); margin-top: 4px; }
.col-sm-2 { max-width: 220px; }
.col-sm-4 { max-width: 360px; }

/* ================================================================
   GRIDS DE DETALLE (tabs Lactaciones, Partos, CL Parciales, etc.)
   ================================================================ */
.ovi-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-xs);
}

.ovi-grid th {
    background: var(--c-bg-alt, #f4f6f9);
    color: var(--c-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 10px;
    border-bottom: 2px solid var(--c-border);
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast, .15s);
}
.ovi-grid th:hover { color: var(--c-teal); }

.ovi-grid td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
    text-align: center;
}

/* Columna Obs en grids dinámicos: fuente más pequeña y truncada */
.ovi-grid-td-obs {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ovi-grid tbody tr:hover { background: rgba(0,170,140,.04); }
.ovi-grid tbody tr:nth-child(even) { background: rgba(0,0,0,.018); }
.ovi-grid tbody tr:nth-child(even):hover { background: rgba(0,170,140,.04); }

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-loading {
    padding: 24px;
    color: var(--c-muted);
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-empty {
    padding: 32px 24px;
    color: var(--c-muted);
    font-size: var(--fs-sm);
    font-style: italic;
    text-align: center;
}

/* ── Selector de columnas en grids dinámicos ─────────────────── */

/* Botón integrado en el tabbar, extremo derecho */
.dyn-col-tab-btn {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #64748b;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: var(--fs-2xs); font-weight: 600;
    cursor: pointer; transition: all 0.12s;
    align-self: center; margin-bottom: 3px;
}
.dyn-col-tab-btn:hover { border-color: #0ea5e9; color: var(--color-acento-texto); background: #f0f9ff; }
.dyn-col-tab-btn.active { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }

/* Popover flotante, no ocupa fila */
.ficha-grid-section { position: relative; }
.dyn-col-popover {
    position: absolute;
    top: 36px; right: 8px;
    z-index: 50;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    padding: 8px;
    min-width: 210px; max-width: 340px;
}
.dyn-col-popover-title {
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #64748b;
    padding-bottom: 5px; margin-bottom: 5px;
    border-bottom: 1px solid #e2e8f0;
}
.dyn-col-popover-title button {
    background: none; border: none; cursor: pointer;
    color: var(--color-texto-suave); font-size: var(--fs-sm); line-height: 1; padding: 0;
}
.dyn-col-popover-title button:hover { color: #334155; }
.dyn-col-popover-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; max-height: 260px; overflow-y: auto;
}
.dyn-col-item {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--fs-2xs); color: #334155;
    cursor: pointer;
    padding: 2px 4px; border-radius: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 0.08s;
}
.dyn-col-item:hover { background: #f1f5f9; }
.dyn-col-item input { cursor: pointer; flex-shrink: 0; }

.desc-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 16px;
    background: var(--c-bg-alt, #f4f6f9);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.desc-resumen strong {
    color: var(--c-text);
}


/* ================================================================
   CONSULTA INDIVIDUAL — Ficha sin pestañas + grids WF
   ================================================================ */

/* ── Ficha container ── */
.animal-ficha {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

/* ── Cabecera: IDEN + badges + estado ── */
.ficha-header {
    padding: 8px 18px 10px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border-bottom: 2px solid var(--c-border);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: background .3s;
}

/* Columna izquierda: badge grande + crotal pegado debajo */
.ficha-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

/* Columna derecha: chips alineados arriba con el badge */
.ficha-header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
}

.ficha-variedad-negra {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #4b5563;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 4px;
    padding: 2px 7px;
}

.ficha-iden-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xl);
    font-weight: 800;
    color: #0e5c8a;
    letter-spacing: 1px;
    line-height: 1;
    background: rgba(14,165,233,.1);
    border: 2px solid rgba(14,165,233,.3);
    border-radius: 8px;
    padding: 6px 14px;
    white-space: nowrap;
    transition: background .25s, border-color .25s, color .25s;
}
/* ── Sexo: hembra → badge IDEN dorado/ámbar ── */
.ficha-iden-badge.sexo-hembra {
    color: #7c5a00;
    background: rgba(212,168,67,.13);
    border-color: rgba(212,168,67,.45);
}
/* Macho ya usa el azul base — sin override necesario */

/* is-baja siempre prevalece sobre el color de sexo (viene después en cascada) */
.ficha-header.is-baja .ficha-iden-badge {
    color: #7a1c1c;
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.35);
}

.ficha-iden-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ficha-sexo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .3px;
}
.ficha-sexo-badge.macho  { background: rgba(14,165,233,.15); color: var(--c-teal-dim); border: 1px solid rgba(14,165,233,.3); }
.ficha-sexo-badge.hembra { background: rgba(212,168,67,.15);  color: #7c5a00;           border: 1px solid rgba(212,168,67,.3); }

/* SVG sex icons — nítidos, stroke vectorial */
.sex-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    shape-rendering: geometricPrecision;
}

/* Sexo en tabla inventario */
.inv-sexo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
}
.inv-sexo.macho  { color: var(--c-teal-dim); }
.inv-sexo.hembra { color: #7c5a00; }

.ficha-sigla-badge {
    font-family: var(--fuente-ui);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f0ede6;
    background: #556b43;
    border: 1.5px solid #42542f;
    padding: 3px 11px;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.12);
}

.ficha-estado-inline {
    font-size: var(--fs-xs);
}

.ficha-idelec-row {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}

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

.ficha-idelec-lbl {
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--c-muted);
    letter-spacing: .4px;
}

.ficha-idelec-val {
    font-family: var(--fuente-mono);
    font-size: var(--fs-xs);
    color: var(--c-text-secondary);
    font-weight: 500;
}

/* ── Paneles de información ── */
.ficha-panels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--c-border);
}

.ficha-panel {
    padding: 14px 16px;
    border-right: 1px solid var(--c-border);
}
.ficha-panel:last-child { border-right: none; }

.ficha-panel-title {
    font-size: var(--fs-2xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--c-muted);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--c-border);
}

/* Key-value rows inside panels */
.ficha-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0,0,0,.05);
    font-size: var(--fs-xs);
}
.ficha-kv:last-child { border-bottom: none; }

.ficha-kv span {
    color: var(--c-muted);
    font-size: var(--fs-2xs);
    white-space: nowrap;
    flex-shrink: 0;
}

.ficha-kv strong {
    color: var(--c-text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.ficha-kv-sm.ficha-kv { font-size: var(--fs-2xs); padding: 2px 0; }
.ficha-kv-sm.ficha-kv span { font-size: var(--fs-2xs); }

/* C. Morf en ficha-kv: color semántico en el valor */
.ficha-kv strong.vg-pos     { color: #047857; }
.ficha-kv strong.vg-neutral { color: #b45309; }
.ficha-kv strong.vg-neg     { color: var(--c-danger); }

/* Separador suave dentro de paneles */
.ficha-hr-sm {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 8px 0;
    opacity: .6;
}

/* ── Aptitud Mamaria ─────────────────────────────────────────────────── */
/* Grid: etiqueta | Insercion | Verticalidad */
.ficha-aptmam-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 4px 5px;
    align-items: center;
    margin-bottom: 4px;
}
.ficha-aptmam-corner { /* vacío — primera celda cabecera */ }
.ficha-aptmam-col-hdr {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--c-text-muted);
    text-align: center; white-space: nowrap; cursor: default;
    padding-bottom: 2px;
}
.ficha-aptmam-row-lbl {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    color: var(--c-text-muted); text-align: right; padding-right: 4px;
    white-space: nowrap;
}
.ficha-aptmam-row-lbl--sm {
    font-size: var(--fs-2xs); font-weight: 600; opacity: .7;
}
.ficha-aptmam-cell {
    text-align: center;
    font-size: var(--fs-xl); font-weight: 800; line-height: 1;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg-card);
    min-width: 0;
    padding: 6px 4px;
}
/* Las celdas llevan el color de su tramo (.perc-*, ver «Escala de calidad»); --fail = supera el umbral de AGRAMA */
.ficha-aptmam-cell--fail {
    box-shadow: inset 0 0 0 2px var(--calidad-malo-barra);
}
.ficha-aptmam-vgk {
    text-align: center;
    font-size: var(--fs-2xs); font-weight: 500; color: var(--c-text-muted);
    padding: 1px 0;
}
.ficha-aptmam-apto {
    grid-column: 2 / 4;
    justify-self: center;
    margin-top: 3px;
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
    padding: 4px 18px; border-radius: 20px;
}
.ficha-aptmam-apto--si  { background: rgba(16,185,129,.12); color: #047857; border: 1.5px solid #059669; }
.ficha-aptmam-apto--no  { background: rgba(239,68,68,.1);   color: var(--c-danger); border: 1.5px solid var(--c-danger); }

/* VG boxes */
.ficha-panel-vg { }

/* ── Valoración Genética — grid 2×2 unificado ── */
.ficha-vg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
    row-gap: 5px;
}

/* Fila 2 (VG/Ped): separación extra respecto a los percentiles */
.ficha-vg-row2 { margin-top: 7px; }

/* Badge base */
.ficha-vg-badge {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--c-border);
    background: var(--c-bg-card);
    text-align: center;
    padding: 4px 8px 5px;
}

/* Percentiles EX y PB: color según el tramo (.perc-*) y barra de posición (.perc-barra) */
.ficha-vg-badge-percex .ficha-vg-badge-num { font-size: var(--fs-xl); font-weight: 800; }
.ficha-vg-badge-percpb .ficha-vg-badge-num { font-size: var(--fs-xl); font-weight: 800; }

/* VG: dato clásico — serif, austero, serio */
.ficha-vg-badge-vg {
    background: #fff;
    border: 2px solid rgba(0,0,0,.55);
}
.ficha-vg-badge-vg .ficha-vg-badge-lbl {
    color: rgba(0,0,0,.5);
    opacity: 1;
    font-family: var(--fuente-ui); font-variant-numeric: tabular-nums;
    font-size: var(--fs-2xs);
    letter-spacing: .6px;
}
.ficha-vg-badge-vg .ficha-vg-badge-num,
.ficha-vg-badge-vg .ficha-vg-badge-num.vg-pos,
.ficha-vg-badge-vg .ficha-vg-badge-num.vg-neg {
    color: #111;
    font-family: var(--fuente-ui); font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .5px;
}

/* Ind. Gen: esmeralda + franja distintiva verde izquierda */
.ficha-vg-badge-indg {
    background: rgba(16,185,129,.07);
    border-color: rgba(16,185,129,.35);
    border-left: 5px solid #10b981;
}
.ficha-vg-badge-indg .ficha-vg-badge-lbl { color: #065f46; opacity: 1; }
.ficha-vg-badge-indg .ficha-vg-badge-num { color: #065f46; }
/* Ped: menor jerarquía — sin color de fondo, borde muy suave */
.ficha-vg-badge-ped {
    background: var(--c-bg-card);
    border-color: var(--c-border);
    border-width: 1px;
    opacity: .85;
}

.ficha-vg-badge-lbl {
    display: block;
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .3px; color: var(--c-text-muted); line-height: 1.5;
}
.ficha-vg-badge-num {
    display: block;
    font-size: var(--fs-lg); font-weight: 800; line-height: 1.1;
    color: var(--c-text);
}
/* Ped: número más pequeño para denotar menor importancia */
.ficha-vg-badge-num-ped {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-text-muted);
}
.ficha-vg-badge-num.vg-pos  { color: var(--color-aviso); }
.ficha-vg-badge-num.vg-neg  { color: var(--color-acento-texto); }
.ficha-vg-badge-fbb {
    display: block;
    font-size: var(--fs-2xs); font-weight: 600;
    color: var(--c-text-muted); line-height: 1.5;
}

/* ── VGKMam compacto ── */
.ficha-vg-kmam {
    display: inline-flex; align-items: baseline; gap: 5px;
    margin-top: 5px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(16,185,129,.25);
    background: rgba(16,185,129,.06);
}
.ficha-vg-kmam-lbl  { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; color: var(--c-text-muted); white-space: nowrap; }
.ficha-vg-kmam-val  { font-size: var(--fs-sm); font-weight: 800; color: var(--c-text); }
.ficha-vg-kmam-fbb  { font-size: var(--fs-2xs); color: var(--c-text-muted); }

/* ── Muestras: Banco / TEP en ficha-kv ─────────────────────────────── */
.ficha-kv strong.sangre-si { color: #047857; }
.ficha-kv strong.sangre-no { color: var(--c-danger); }

.ficha-kv strong.tep-confirmado { color: #047857; }
.ficha-kv strong.tep-negativo   { color: var(--c-danger); }

/* ── Categoría / Posible Destino Hijos ──────────────────────────────── */
.ficha-destino {
    display: inline-block;
    white-space: nowrap;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1.5px solid transparent;
}
/* Cabecera de subsección dentro de panel */
.ficha-subsection-lbl {
    font-size: var(--fs-2xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--c-muted);
    margin-top: 10px;
    margin-bottom: 4px;
    display: block;
}
.ficha-subsection-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 2px;
}
/* Adulto — EVS (púrpura intenso) */
.ficha-destino--evs {
    background: rgba(109,40,217,.14);
    color: #4c1d95;
    border-color: rgba(109,40,217,.40);
}
/* Adulto — Subasta (púrpura suave) */
.ficha-destino--subasta {
    background: rgba(167,139,250,.12);
    color: #6d28d9;
    border-color: rgba(167,139,250,.38);
}
/* Cordero — EVS (teal intenso) */
.ficha-destino--cordero-evs {
    background: rgba(15,118,110,.14);
    color: #134e4a;
    border-color: rgba(15,118,110,.40);
}
/* Cordero — Subasta (teal suave) */
.ficha-destino--cordero-sub {
    background: rgba(20,184,166,.11);
    color: #0f766e;
    border-color: rgba(20,184,166,.38);
}

/* ── Progenitores ── */
.ficha-progenitores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.ficha-prog-card {
    padding: 14px 16px;
}
.ficha-prog-card:first-child {
    border-right: 1px solid var(--c-border);
}

.ficha-prog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.ficha-prog-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 4px;
}
.ficha-prog-madre .ficha-prog-role { background: rgba(212,168,67,.12); color: #7c5a00; }
.ficha-prog-padre .ficha-prog-role { background: rgba(14,165,233,.1);  color: var(--c-teal-dim); }

.ficha-prog-iden {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: .5px;
}
.ficha-prog-madre .ficha-prog-iden { color: #7c5a00; }
.ficha-prog-padre .ficha-prog-iden { color: var(--c-teal-dim); }

.ficha-prog-ie {
    font-family: var(--fuente-mono);
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    margin-left: auto;
}

.ficha-prog-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* ── Grid section (WF-style tabs) ── */
.ficha-grid-section {
    background: var(--c-card);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

.ficha-grid-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px 0;
    background: #e8edf3;
    border-bottom: 2px solid #b0bec5;
    overflow-x: auto;
}
.ficha-grid-tabbar::-webkit-scrollbar { height: 3px; }

.ficha-grid-tab {
    padding: 7px 16px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: #546e7a;
    background: #d0dae4;
    border: 1px solid #b0bec5;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
    top: 2px;
    margin-bottom: -2px;
}

.ficha-grid-tab:hover {
    background: #ecf0f4;
    color: var(--c-text);
}

.ficha-grid-tab.active {
    background: var(--c-card);
    color: var(--c-teal-dim);
    font-weight: 700;
    border-color: #b0bec5;
    border-bottom-color: var(--c-card);
    z-index: 1;
}

.ficha-grid-content {
    padding: 0;
    min-height: 120px;
    overflow-x: auto;
}

/* VG color helpers (text) */
strong.vg-pos  { color: var(--color-aviso); }
strong.vg-neg  { color: var(--c-teal-dim); }


/* ================================================================
   CONSULTA INDIVIDUAL — v2 refinements
   ================================================================ */

/* ── Compact inline search bar ── */
.ci-searchbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    max-width: 560px;
}

/* ── Botones flecha historial ── */
.ci-backbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 38px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-muted);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.ci-backbtn:hover {
    border-color: var(--c-teal);
    color: var(--c-teal);
    background: var(--c-teal-glow);
}
.ci-histbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 38px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-muted);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.ci-histbtn:hover:not(:disabled) {
    border-color: var(--c-teal);
    color: var(--c-teal);
    background: var(--c-teal-glow);
}
.ci-histbtn:disabled { opacity: 0.3; cursor: default; }

/* ── Wrapper input + chevron (ancho fijo ~mitad del espacio) ── */
.ci-input-wrap {
    position: relative;
    flex: 0 0 180px;
    display: flex;
}

.ci-searchinput {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 30px 0 12px;
    font-size: var(--fs-sm);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-text);
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ci-searchinput:focus {
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px var(--c-teal-glow);
}

/* Chevron dentro del input */
.ci-histdropbtn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--t-fast);
}
.ci-histdropbtn:hover:not(:disabled) { color: var(--c-teal); }
.ci-histdropbtn:disabled { opacity: 0.35; cursor: default; }

/* Desplegable historial — absolute dentro de .ci-input-wrap (position:relative) */
.ci-histdrop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--sh-md);
    z-index: 9999;
    max-height: 230px;
    overflow-y: auto;
}
.ci-histdrop-item {
    display: block;
    width: 100%;
    padding: 6px 12px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    cursor: pointer;
    font-size: .82rem;
    font-family: var(--fuente-mono);
    letter-spacing: .02em;
    transition: background var(--t-fast);
}
.ci-histdrop-item:last-child { border-bottom: none; }
.ci-histdrop-item:hover { background: var(--c-content); }
.ci-histdrop-item--active {
    color: var(--c-teal);
    font-weight: 600;
    background: var(--c-teal-glow);
}

.ci-searchbtn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
    background: var(--g-teal);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--t-fast), box-shadow var(--t-fast);
    box-shadow: var(--sh-teal);
}
.ci-searchbtn:hover { opacity: .88; }
.ci-searchbtn:disabled { opacity: .55; cursor: default; }

/* ── Botón nueva pestaña ── */
.ci-newtabbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 38px;
    flex-shrink: 0;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-card);
    color: var(--c-muted);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ci-newtabbtn:hover {
    background: var(--c-content);
    border-color: var(--c-teal);
    color: var(--c-teal);
}

/* ── Botón cámara OCR — solo visible en móvil ── */
.ci-cambtn {
    display: none; /* oculto en desktop */
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-card);
    color: var(--c-muted);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ci-cambtn:hover:not(:disabled) {
    background: var(--c-content);
    border-color: var(--c-teal);
    color: var(--c-teal);
}
.ci-cambtn:disabled { opacity: .45; cursor: default; }

/* Spinner dentro del botón cámara */
.ci-cam-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(14,165,233,.2);
    border-top-color: var(--c-teal);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* Mensaje de error OCR */
.ci-ocr-error {
    font-size: var(--fs-xs);
    color: #c0392b;
    background: rgba(192,57,43,.07);
    border: 1px solid rgba(192,57,43,.2);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    margin-top: -8px;
    margin-bottom: 10px;
    max-width: 520px;
}

/* Botón modo listado (franja): mismo estilo que ci-cambtn, solo móvil */
.ci-lotebtn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-card);
    color: var(--c-muted);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ci-lotebtn:hover:not(:disabled) {
    background: var(--c-content);
    border-color: var(--c-teal);
    color: var(--c-teal);
}
.ci-lotebtn:disabled { opacity: .45; cursor: default; }

@media (max-width: 767px) {
    .ci-cambtn { display: flex; }
    .ci-lotebtn { display: flex; }
    /* Barra de búsqueda: compactar para caber en pantalla móvil */
    .ci-searchbar        { gap: 4px; }
    .ci-backbtn          { width: 30px; height: 34px; }
    .ci-histbtn          { width: 22px; height: 34px; }
    .ci-input-wrap       { flex: 1; min-width: 0; }
    .ci-searchinput      { height: 34px; font-size: var(--fs-sm); }
    .ci-cambtn,
    .ci-lotebtn          { width: 34px; height: 34px; }
    /* Botón Buscar: solo icono, sin texto */
    .ci-searchbtn        { width: 34px; height: 34px; padding: 0;
                           overflow: hidden; justify-content: center; gap: 0; font-size: 0; }
}

/* ─── Modo Listado: overlay cámara en vivo ──────────────────────────────── */
.lote-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La franja: box-shadow de 9999px oscurece todo lo que rodea al div */
.lote-strip-guide {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    height: 13%;
    border: 2px solid rgba(14, 165, 233, 0.9);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
}
/* Esquinas destacadas en la franja */
.lote-strip-guide::before,
.lote-strip-guide::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: #0ea5e9;
    border-style: solid;
}
.lote-strip-guide::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.lote-strip-guide::after  { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }

.lote-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
}
.lote-title {
    color: rgba(255,255,255,.85);
    font-size: var(--fs-sm);
    font-family: var(--fuente-ui);
    font-weight: 500;
}
.lote-close-btn {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    color: #fff;
    font-size: var(--fs-sm);
    padding: 6px 14px;
    cursor: pointer;
    touch-action: manipulation;
}

.lote-bottombar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 10px 16px 28px;
    background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.lote-capture-btn {
    background: rgba(14, 165, 233, .85);
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 600;
    padding: 14px 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    touch-action: manipulation;
    box-shadow: 0 4px 20px rgba(14,165,233,.4);
    font-family: var(--fuente-ui);
}
.lote-capture-btn:disabled { opacity: .5; cursor: default; }

.lote-status {
    color: rgba(255,255,255,.82);
    font-size: var(--fs-xs);
    font-family: var(--fuente-ui);
    text-align: center;
    background: rgba(0,0,0,.35);
    border-radius: 8px;
    padding: 4px 12px;
}

.lote-results {
    width: 100%;
    max-height: 210px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    -webkit-overflow-scrolling: touch;
}

.lote-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 7px 11px;
    cursor: pointer;
    touch-action: manipulation;
}
.lote-result-row:active { background: rgba(255,255,255,.15); }
.lote-result-row.lote-baja  { opacity: .65; }
.lote-result-row.lote-nf    { opacity: .55; }

.lote-r-iden {
    font-family: var(--fuente-ui);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lote-r-sigla { font-size: var(--fs-xs); color: rgba(255,255,255,.65); }
.lote-r-vg    { font-size: var(--fs-xs); color: rgba(255,255,255,.7); font-weight: 500; margin-left: auto; white-space: nowrap; }
.lote-r-estado.activo { font-size: var(--fs-2xs); color: #4ade80; font-weight: 600; }
.lote-r-estado.baja   { font-size: var(--fs-2xs); color: #f87171; font-weight: 600; }
.lote-r-err     { font-size: var(--fs-2xs); color: #f87171; }
.lote-r-loading { font-size: var(--fs-2xs); color: rgba(255,255,255,.4); font-style: italic; }

/* ── Progenitor IDEN as clickable button ── */
.ficha-prog-iden-btn {
    font-family: var(--fuente-ui);
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: .5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--t-fast);
}
.ficha-prog-iden-btn:hover { opacity: .7; text-decoration: underline; }
.ficha-prog-madre .ficha-prog-iden-btn { color: #7c5a00; }
.ficha-prog-padre .ficha-prog-iden-btn { color: var(--c-teal-dim); }

/* Fix progenitor fields right padding */
.ficha-prog-fields {
    padding-right: 4px;
}
.ficha-prog-fields .ficha-kv {
    padding-right: 4px;
}

/* ── Ultra-compact grid rows inside ficha-grid-content ── */
.ficha-grid-content .ovi-grid {
    font-size: var(--fs-2xs);
    border-collapse: collapse;
    width: 100%;
}

.ficha-grid-content .ovi-grid thead th {
    padding: 5px 8px;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #64748b;
    background: #f4f6f9;
    border-bottom: 1px solid #d1d9e0;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ficha-grid-content .ovi-grid tbody tr {
    border-bottom: 1px solid #edf0f4;
    transition: background var(--t-fast);
}
.ficha-grid-content .ovi-grid tbody tr:hover { background: #f8fafc; }
.ficha-grid-content .ovi-grid tbody td {
    padding: 3px 8px;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--c-text-secondary);
}
.ficha-grid-content .ovi-grid tbody tr:nth-child(even) { background: #fafbfd; }
.ficha-grid-content .ovi-grid tbody tr:nth-child(even):hover { background: #f3f6fa; }

/* desc-resumen compact inside ficha */
.ficha-grid-content .desc-resumen {
    padding: 8px 12px;
    font-size: var(--fs-2xs);
    gap: 14px;
}


/* ================================================================
   CONSULTA INDIVIDUAL — v3 corrections
   ================================================================ */

/* ── Idelec16 badge (inline with IDEN) ── */
.ficha-idelec16-badge {
    font-family: var(--fuente-mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #0e5c8a;
    background: rgba(14,165,233,.08);
    border: 1.5px solid rgba(14,165,233,.25);
    border-radius: 6px;
    padding: 4px 10px;
    letter-spacing: .5px;
    white-space: nowrap;
}

/* ── Short idelec below header row ── */
.ficha-idelec-short {
    font-family: var(--fuente-mono);
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    letter-spacing: .3px;
    margin-top: 6px;
    padding-left: 2px;
}

/* ── Tabbar: no scroll, wrap instead ── */
.ficha-grid-tabbar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
}

/* ── Progenitor fields: column gap + right padding ── */
.ficha-prog-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    padding: 0 14px 6px 0 !important;
}

/* Each kv inside progenitor: label tight to value */
.ficha-prog-fields .ficha-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px dashed rgba(0,0,0,.05);
    padding: 2px 0;
}
.ficha-prog-fields .ficha-kv span {
    flex-shrink: 0;
    color: var(--c-muted);
    font-size: var(--fs-2xs);
}
.ficha-prog-fields .ficha-kv strong {
    text-align: right;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}


/* ================================================================
   CONSULTA INDIVIDUAL — v4 corrections
   ================================================================ */

/* ── Idelec16 en su propia línea debajo del IDEN row ── */
.ficha-idelec16-row {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ficha-idelec16-badge {
    font-family: var(--fuente-mono);
    font-size: var(--fs-xs) !important;
    font-weight: 600 !important;
    color: #0e5c8a !important;
    background: rgba(14,165,233,.07) !important;
    border: 1.5px solid rgba(14,165,233,.22) !important;
    border-radius: 6px !important;
    padding: 3px 10px !important;
    letter-spacing: .4px !important;
    white-space: nowrap !important;
}

/* ── Eliminar short idelec ── */
.ficha-idelec-short { display: none !important; }

/* ── Status dot dentro del badge IDEN ── */
.ficha-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ficha-status-dot.activo {
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16,185,129,.45);
    animation: status-pulse 2.8s ease-in-out infinite;
}
.ficha-status-dot.baja {
    background: #ef4444;
    box-shadow: none;
}
@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.45); }
    60%  { box-shadow: 0 0 0 5px rgba(16,185,129,0);   }
    100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);   }
}

/* ── Header tint según sexo ── */
.ficha-header.sexo-hembra {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
/* Macho ya usa el gradiente azul base */

/* ── Header tint cuando animal de BAJA (siempre prevalece, viene después) ── */
.ficha-header.is-baja {
    background: linear-gradient(135deg, #fff5f5 0%, #fde8e8 100%);
}

/* ── Info de baja (fecha + causa) sin badge textual ── */
.ficha-baja-info {
    font-family: var(--fuente-ui);
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ficha-baja-causa {
    color: #b91c1c;
    opacity: .75;
    font-size: var(--fs-2xs);
}

/* ── Compatibilidad: estado-group ya no se usa en ficha pero puede aparecer en otros contextos ── */
.ficha-estado-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── IDEN de progenitores: 1pt más grande (17→18px) ── */
.ficha-prog-iden,
.ficha-prog-iden-btn {
    font-size: var(--fs-lg) !important;
}

/* ── Columnas de progenitores: más separación ── */
.ficha-prog-fields {
    column-gap: 36px !important;
}

/* ── Grid tabs: máx 10 filas con scroll ── */
.ficha-grid-content .table-responsive {
    max-height: 308px;
    overflow-y: auto;
    overflow-x: auto;
}
.ficha-grid-content .ovi-grid thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #f0f4f8 !important;
}


/* ================================================================
   CONSULTA INDIVIDUAL — v5
   ================================================================ */

/* ── Idelec16: texto plano con parte coincidente resaltada ── */
.ficha-idelec16-badge { display: none !important; }   /* anular badge anterior */

.ficha-idelec16-text {
    font-family: var(--fuente-mono);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    letter-spacing: .3px;
}
.ficha-idelec16-text .i16-dim {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: #9ca3af;
}
.ficha-idelec16-text .i16-match {
    font-size: var(--fs-md);
    font-weight: 700;
    color: #374151;
}



/* ================================================================
   RESPONSIVE MÓVIL — consulta individual
   ================================================================ */

@media (max-width: 767px) {

    /* Tablas y grids: scroll horizontal sin bloquear scroll vertical de la página */
    .ficha-grid-content,
    .table-responsive,
    .ficha-grid-content .table-responsive {
        max-height: none !important;   /* sin límite de altura, página entera scrollea */
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;           /* el gesto horizontal queda en la tabla */
    }

    /* Progenitores: apilados en lugar de lado a lado */
    .ficha-progenitores {
        grid-template-columns: 1fr !important;
    }
    .ficha-prog-card:first-child {
        border-right: none !important;
        border-bottom: 1px solid var(--c-border);
    }

    /* Tabbar de pestañas: oculto en móvil */
    .ficha-grid-tabbar { display: none !important; }

    /* Selector desplegable de pestaña: visible solo en móvil */
    .ficha-grid-tabselect { display: block !important; }
}

/* Selector desplegable (oculto en escritorio) */
.ficha-grid-tabselect {
    display: none;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 2px solid #b0bec5;
    border-radius: 0;
    background: #f5f7fa;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
}
.ficha-grid-tabselect:focus {
    outline: none;
    border-bottom-color: var(--c-teal-dim);
    background: #fff;
}

/* ─── Admin Ficha Config ──────────────────────────────────────────────────── */
.afc-panel {
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--c-border);
}
.afc-panel:last-child { border-bottom: none; }

.afc-panel-title {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-teal);
    padding: 12px 20px 6px;
}

.afc-fields { padding: 0 20px; }

.afc-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #f0f2f5;
    flex-wrap: wrap;
}
.afc-field-row:last-child { border-bottom: none; }

.afc-field-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    min-width: 130px;
    flex: 0 0 auto;
}

.afc-field-modelo {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    font-family: var(--fuente-mono);
    background: #f0f2f5;
    padding: 1px 6px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.afc-field-controls {
    display: flex;
    gap: 20px;
    margin-left: auto;
    flex-wrap: wrap;
}

.afc-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.afc-toggle {
    display: none;
}

.afc-toggle-slider {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    transition: background .2s;
    flex-shrink: 0;
}
.afc-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: left .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.afc-toggle:checked + .afc-toggle-slider {
    background: var(--c-teal);
}
.afc-toggle:checked + .afc-toggle-slider::after {
    left: 16px;
}

.afc-toggle-lbl {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* ── Informe PDF container ───────────────────────────── */
.informe-pdf-wrap {
    height: calc(100vh - var(--topbar-h) - var(--tabbar-h, 34px) - 56px);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--sh-card);
}

.informe-pdf-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Informe toolbar ─────────────────────────────────── */
.informe-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px 10px;
}
.informe-toolbar-titulo {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.informe-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.btn-informe-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.btn-informe-action:hover {
    background: #e8edf2;
    color: var(--c-text);
}
.btn-informe-close:hover {
    background: #fde8e8;
    color: #c0392b;
}

/* ── Blog embed ──────────────────────────────────────────────── */
.blog-embed-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-h) - var(--tabbar-h, 34px) - 8px);
    gap: 0;
}

.blog-embed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.blog-embed-back {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-gold);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s;
}
.blog-embed-back:hover {
    background: var(--c-gold-dim);
    color: var(--c-gold);
}

.blog-embed-frame {
    flex: 1;
    width: 100%;
    border: none;
    background: #fff;
}

.blog-embed-blocked {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--c-muted);
    font-size: var(--fs-md);
    gap: 6px;
    padding: 40px;
}

.blog-embed-fallback-btn {
    margin-top: 12px;
    padding: 8px 18px;
    background: var(--c-accent);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: var(--fs-sm);
}
.blog-embed-fallback-btn:hover { opacity: .85; }

@media (max-width: 767px) {
    .informe-pdf-wrap {
        height: calc(100vh - var(--tabbar-h, 34px) - 58px - 50px - var(--bottombar-h));
        border-radius: 0;
    }
    .informe-toolbar {
        padding: 4px 2px 6px;
    }
}

/* ================================================================
   CONSULTA GRUPO — página genérica para menús pendientes
   ================================================================ */

/* Sigla badge en el subtitle */
.cg-sigla-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-teal);
    background: var(--c-teal-glow);
    border: 1px solid rgba(14,165,233,.25);
    border-radius: 4px;
    padding: 1px 7px;
    margin-right: 8px;
}
.cg-desc {
    font-size: .82rem;
    color: var(--c-muted);
}

/* ── Panel de filtros ──────────────────────────────────────── */
.cg-filter-card {
    margin-bottom: 16px;
    padding: 0;
}

/* Título y sigla integrados en la barra de tabs */
.cg-tabs-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
    letter-spacing: -.1px;
}
.cg-tabs-sep {
    width: 1px;
    height: 18px;
    background: var(--c-border-strong);
    align-self: center;
    flex-shrink: 0;
    margin: 0 4px;
}
.cg-tabs-sigla {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-teal);
    background: var(--c-teal-glow);
    border: 1px solid rgba(14,165,233,.25);
    border-radius: 4px;
    padding: 1px 8px;
    white-space: nowrap;
    align-self: center;
    flex-shrink: 0;
}

/* Selector de consulta / tabs */
.cg-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 10px 16px 9px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-content);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.cg-tab {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-muted);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 15px;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast),
                background var(--t-fast), box-shadow var(--t-fast);
    white-space: nowrap;
}
.cg-tab:hover {
    color: var(--c-teal);
    border-color: var(--c-teal);
    background: var(--c-teal-glow);
}
.cg-tab--active {
    color: #fff;
    background: var(--g-teal);
    border-color: transparent;
    box-shadow: var(--sh-teal);
    font-weight: 600;
}
.cg-tab--active:hover {
    color: #fff;
    background: var(--g-teal);
}

/* Fila de filtros */
.cg-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px 14px;
}

.cg-filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cg-filter-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--c-muted);
}
.cg-filter-input {
    height: 34px;
    padding: 0 10px;
    font-size: var(--fs-sm);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-text);
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cg-filter-input:focus {
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px var(--c-teal-glow);
}

/* Botón Consultar */
.cg-btn-buscar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
    background: var(--g-teal);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: var(--sh-teal);
    transition: opacity var(--t-fast);
    align-self: flex-end;
}
.cg-btn-buscar:hover  { opacity: .88; }
.cg-btn-buscar:disabled { opacity: .55; cursor: default; }

/* ── Resultado ─────────────────────────────────────────────── */
.cg-result-card {
    padding: 0;
    overflow: hidden;
}

.cg-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: var(--c-content);
    border-bottom: 1px solid var(--c-border);
}
.cg-result-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cg-result-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}
.cg-result-count {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-teal);
    background: var(--c-teal-glow);
    border: 1px solid rgba(14,165,233,.22);
    border-radius: 10px;
    padding: 1px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cg-result-desc {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón exportar Excel */
.cg-btn-export {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.cg-btn-export:hover {
    background: #dcfce7;
    border-color: #4ade80;
    box-shadow: 0 1px 4px rgba(22,163,74,.15);
}
.cg-btn-export:active { background: #bbf7d0; }

/* Tabla genérica — extiende act-table */
.cg-table { margin-bottom: 0; }
.cg-td-iden   { font-family: var(--fuente-mono); font-weight: 600; color: var(--c-teal); font-size: .82rem; }
.cg-td-idelec { font-family: var(--fuente-mono); font-size: .75rem; color: var(--c-muted); white-space: nowrap; }

/* Fila clicable → Consulta Individual */
.cg-row-link { cursor: pointer; }
.cg-row-link:hover td { background: var(--c-teal-glow) !important; }

/* Estado vacío */
.cg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--c-muted);
    font-size: .88rem;
    text-align: center;
}

/* Error */
.cg-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    color: #b91c1c;
    font-size: .85rem;
    margin-bottom: 12px;
}

/* Hint inicial */
.cg-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--c-content);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-muted);
    font-size: .88rem;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .cg-tabs    { padding: 10px 12px 8px; gap: 5px; }
    .cg-tab     { font-size: var(--fs-xs); height: 28px; padding: 0 11px; }
    .cg-filters { padding: 10px 12px 12px; gap: 8px; }
    .cg-filter-input { height: 32px; font-size: var(--fs-xs); }
    .cg-btn-buscar   { height: 32px; font-size: var(--fs-xs); }
}

/* ================================================================
   PARIDERAS PAGE — par-* components
   ================================================================ */

/* ── Barra superior ─────────────────────────────────────────── */
.par-bar {
    background: var(--c-card);
    border-bottom: 1px solid var(--c-border);
    padding: 0 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.par-bar-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0 10px;
    flex-wrap: wrap;
}

.par-bar-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -.2px;
    white-space: nowrap;
}

.par-bar-sigla {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    background: var(--c-content);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 3px 10px;
    margin-left: auto;
    white-space: nowrap;
    align-self: flex-end;
    margin-bottom: 4px;
}

/* ── Selector de modos ──────────────────────────────────────── */
.par-modes {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.par-mode {
    height: 30px;
    padding: 0 13px;
    border-radius: 20px;
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}

.par-mode:hover {
    background: var(--c-content);
    color: var(--c-text);
    border-color: var(--c-border-strong);
}

.par-mode--on {
    background: var(--c-teal);
    color: #fff;
    border-color: var(--c-teal);
    box-shadow: 0 2px 8px rgba(14,165,233,.3);
}

.par-mode--on:hover {
    background: var(--c-teal-light);
    border-color: var(--c-teal-light);
    color: #fff;
    filter: none;
}

/* ── Controles dinámicos ────────────────────────────────────── */
.par-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0 0;
}

.par-date-sep-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-muted);
    white-space: nowrap;
}

.par-date-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    color: var(--c-text);
    background: #fff;
    outline: none;
    transition: border-color var(--t-fast);
}

.par-date-input:focus {
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}

.par-date-sep {
    color: var(--c-muted);
    font-size: var(--fs-sm);
}

.par-iden-input {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    color: var(--c-text);
    background: #fff;
    outline: none;
    min-width: 220px;
    transition: border-color var(--t-fast);
}

.par-iden-input:focus {
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}

.par-hint {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    white-space: nowrap;
}

.par-hint--info {
    font-style: italic;
}

.par-buscar-btn {
    height: 34px;
    padding: 0 16px;
    background: var(--g-teal);
    color: #fff;
    border: none;
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--sh-teal);
    transition: all var(--t-fast);
}

.par-buscar-btn:hover:not(:disabled) {
    filter: brightness(1.07);
    box-shadow: 0 4px 16px rgba(14,165,233,.35);
}

.par-buscar-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ── Dropdown parideras ─────────────────────────────────────── */
.par-dd-btn {
    height: 34px;
    padding: 0 12px;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--t-fast);
}

.par-dd-btn:hover, .par-dd-btn--open {
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}

.par-dd-ph { color: var(--c-muted); font-size: var(--fs-xs); }
.par-dd-val { font-size: var(--fs-sm); color: var(--c-text); }
.par-dd-sub { font-size: var(--fs-2xs); color: var(--c-muted); }
.par-dd-chev { margin-left: auto; color: var(--c-muted); transition: transform var(--t-fast); }
.par-dd-btn--open .par-dd-chev { transform: rotate(180deg); }

.par-dd-drop {
    position: fixed;
    z-index: 1500;
    background: #fff;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--sh-lg);
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

.par-dd-item {
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-xs);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    transition: background var(--t-fast);
    text-align: left;
}

.par-dd-item:hover { background: var(--c-content); }

.par-dd-item--ph {
    color: var(--c-muted);
    font-size: var(--fs-xs);
    flex-direction: row;
}

.par-dd-item--on { background: var(--c-active); }
.par-dd-item--on:hover { background: var(--c-active); }

.par-dd-item-num { font-size: var(--fs-sm); color: var(--c-text); }
.par-dd-item-info { font-size: var(--fs-2xs); color: var(--c-muted); }
.par-dd-item-sinpar { color: var(--c-muted); font-style: italic; }

/* ── Área de resultados ─────────────────────────────────────── */
.par-results-area {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.par-results-area--split {
    flex-direction: row;
    align-items: flex-start;
}

/* ── Panel de resumen ───────────────────────────────────────── */
.par-summary {
    width: 240px;
    flex-shrink: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.par-sum-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--c-muted);
}

.par-sum-block {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.par-sum-block--cord {
    background: var(--c-content);
    border-radius: var(--radius-xs);
    padding: 10px 12px;
}

.par-sum-subtitle {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-muted);
    margin-bottom: 8px;
}

.par-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
}

.par-sum-row:last-child { border-bottom: none; }

.par-sum-row--total .par-sum-val {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-teal);
}

.par-sum-label { color: var(--c-text-secondary); }
.par-sum-val   { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.par-sum-pct   { font-weight: 400; font-size: var(--fs-2xs); color: var(--c-text-secondary); margin-left: 4px; }

.par-sum-row--ia   .par-sum-label { color: #0369a1; }
.par-sum-row--rmia .par-sum-label { color: #7c3aed; }
.par-sum-row--mn   .par-sum-label { color: #047857; }

.par-sum-divider {
    height: 1px;
    background: var(--c-border);
    margin: 4px 0;
}

.par-sum-cord-grid {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 4px 10px;
    font-size: var(--fs-xs);
    align-items: center;
}
.par-sum-cord-grid--5 {
    grid-template-columns: 1fr auto auto auto auto;
}

.par-sum-cord-h { color: #ec4899; font-weight: 600; text-align: center; }
.par-sum-cord-m { color: #3b82f6; font-weight: 600; text-align: center; }
.par-sum-cord-t { color: var(--c-muted); font-weight: 600; text-align: center; }
.par-sum-cord-prolif-hdr { color: var(--c-muted); font-weight: 600; text-align: center; font-size: var(--fs-2xs); }
.par-sum-cord-label { color: var(--c-text-secondary); font-size: var(--fs-2xs); }
.par-sum-cord-label--ia   { color: #0369a1; font-weight: 600; }
.par-sum-cord-label--rmia { color: #7c3aed; font-weight: 600; }
.par-sum-cord-label--mn   { color: #047857; font-weight: 600; }
.par-sum-cord-val { text-align: center; font-weight: 700; color: var(--c-text); }
.par-sum-cord-val--total  { color: var(--c-teal); }
.par-sum-cord-val--prolif { color: var(--c-muted); font-weight: 400; font-size: var(--fs-2xs); }
.par-sum-cord-val--ia     { color: #0369a1; }
.par-sum-cord-val--rmia   { color: #7c3aed; }
.par-sum-cord-val--mn     { color: #047857; }

.par-sum-cord-prolif {
    margin-top: 8px;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    text-align: right;
}

/* ── Tabla ──────────────────────────────────────────────────── */
.par-table-card {
    flex: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.par-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--c-border);
}

.par-table-header-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.par-table-subtitle {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
}

.par-table-count {
    font-size: var(--fs-xs);
    color: var(--c-muted);
    background: var(--c-content);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 2px 9px;
}

.par-table { font-size: var(--fs-xs); }

.par-th-iden   { min-width: 80px; }
.par-th-date   { min-width: 88px; white-space: nowrap; }
.par-th-par    { min-width: 52px; }
.par-th-tcub   { min-width: 70px; }
.par-th-tparto { min-width: 68px; }
.par-th-num    { min-width: 44px; text-align: right; }
.par-th-cords  { min-width: 120px; }
.par-th-padre  { min-width: 76px; }
.par-th-iep    { min-width: 44px; text-align: right; }
.par-th-reglg  { min-width: 60px; }
.par-th-vg     { min-width: 50px; text-align: right; }

.par-td-iden   { white-space: nowrap; }
.par-td-date   { white-space: nowrap; color: var(--c-text-secondary); }
.par-td-par    { color: var(--c-muted); text-align: center; }
.par-td-num    { text-align: right; color: var(--c-muted); }
.par-td-padre  { font-size: var(--fs-2xs); color: var(--c-muted); }
.par-td-iep    { text-align: right; color: var(--c-muted); }
.par-td-reglg  { color: var(--c-muted); font-size: var(--fs-2xs); }
.par-td-vg     { text-align: right; font-weight: 600; color: var(--c-text); }
.par-td-cords  { white-space: nowrap; }

.par-row:hover { background: var(--c-active); }

.par-row--nunca       { background: rgba(245,158,11,.05); }
.par-row--sin-parto   { background: rgba(100,116,139,.04); }

/* ── Badges TipoCubricion ───────────────────────────────────── */
.par-tcub-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

.par-tcub-badge--ia   { background: rgba(3,105,161,.1);  color: #0369a1; }
.par-tcub-badge--rmia { background: rgba(124,58,237,.1); color: #7c3aed; }
.par-tcub-badge--md   { background: rgba(180,83,9,.1);   color: #b45309; }
.par-tcub-badge--mn   { background: rgba(5,150,105,.1);  color: #047857; }
.par-tcub-badge--otro { background: var(--c-content);    color: var(--c-muted); }

/* ── Badges corderos ────────────────────────────────────────── */
.par-cord-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    margin-right: 3px;
    white-space: nowrap;
}

.par-cord-badge--h { background: rgba(236,72,153,.12); color: #be185d; }
.par-cord-badge--m { background: rgba(59,130,246,.12); color: #1d4ed8; }
.par-cord-badge--a { background: rgba(239,68,68,.15);  color: #dc2626; }
.par-cord-slot     { display: inline-block; min-width: 28px; }

/* ── Badge sin parto ────────────────────────────────────────── */
.par-badge-nunca {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    background: rgba(245,158,11,.12);
    color: #b45309;
}

/* ── Info card paridera seleccionada ────────────────────────── */
.par-info-card {
    margin: 10px 16px 0;
    padding: 12px 18px;
}

.par-info-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.par-info-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 14px;
}

.par-info-item:first-child { padding-left: 0; }

.par-info-label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.par-info-sep {
    width: 1px;
    height: 28px;
    background: var(--c-border);
    flex-shrink: 0;
}

/* ── Dropdown items (2-line layout) ─────────────────────────── */
.par-dd-item-l1 {
    display: flex;
    align-items: center;
    gap: 7px;
}

.par-dd-item-fecha {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
}

.par-dd-item-numpar {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--c-teal);
    background: rgba(20,184,166,.1);
    padding: 0 5px;
    border-radius: 4px;
}

.par-dd-item-l2 {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
}

.par-dd-item-nombre {
    font-size: var(--fs-2xs);
    color: var(--c-text-secondary);
}

.par-dd-item-sep {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
}

.par-dd-item-partos {
    font-size: var(--fs-2xs);
    color: var(--c-muted);
}

/* ── Dropdown button selected value ─────────────────────────── */
.par-dd-val {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
}

.par-dd-numpar {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-teal);
}

.par-dd-sub {
    font-size: var(--fs-2xs);
    color: var(--c-text-secondary);
    margin-top: 1px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .par-results-area--split {
        flex-direction: column;
    }
    .par-summary {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .par-sum-block { flex: 1; min-width: 160px; }
}

@media (max-width: 767px) {
    .par-bar       { padding: 0 12px 10px; }
    .par-bar-top   { gap: 10px; padding: 12px 0 8px; flex-wrap: wrap; }
    .par-modes     { flex-wrap: wrap; gap: 4px; }
    .par-mode      { font-size: var(--fs-2xs); height: 28px; padding: 0 10px; flex: 1 1 auto; min-width: 0; white-space: nowrap; }
    .par-controls  { gap: 6px; flex-wrap: wrap; }
    .par-date-input, .par-iden-input { height: 32px; font-size: var(--fs-xs); min-width: 0; flex: 1 1 110px; }
    .par-buscar-btn { height: 32px; font-size: var(--fs-xs); }
    .par-results-area { padding: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .par-bar-sigla { display: none; }
    .par-table { font-size: var(--fs-2xs); }
    .par-table th, .par-table td { padding: 4px 6px; }
}
@media (max-width: 480px) {
    .par-bar-title { font-size: var(--fs-md); }
    .par-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    .par-mode { width: 100%; }
    .par-table { font-size: var(--fs-2xs); }
}

/* ══════════════════════════════════════════════════════════════════════════
   CERTÁMENES Y SORTEOS
   ══════════════════════════════════════════════════════════════════════════ */

/* Una sola línea con el certamen (antes un banner azul de ~90 px de alto) */
.cert-banner {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--esp-3);
    padding: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-1);
    border: 1px solid var(--color-borde); border-left: 4px solid var(--color-acento-texto);
    border-radius: var(--radio-sm); background: var(--color-superficie);
}
.cert-banner-title { font-size: var(--fs-md); font-weight: 700; color: var(--color-texto); }
.cert-banner-sub { font-size: var(--fs-sm); color: var(--color-texto-2); }

.cert-table { font-size: var(--fs-2xs); }
.cert-table thead th {
    white-space: nowrap;
    padding: 5px 7px;
    font-size: var(--fs-2xs);
    letter-spacing: -.01em;
}
.cert-table tbody td { padding: 4px 7px; white-space: nowrap; }
.cert-iden  { cursor: pointer; }

/* Columna Genotipo (ARR/ARR R1) — un poco más ancha */
.cert-table td:nth-child(3),
.cert-table th:nth-child(3) { min-width: 90px; }

/* Cabeceras ordenables */
.cert-th-sort { cursor: pointer; user-select: none; }
.cert-th-sort:hover { color: var(--c-teal); }

/* Grupos de riesgo priónico */
.cert-r1 { color: #15803d; font-weight: 600; }
.cert-r2 { color: #ca8a04; font-weight: 600; }
.cert-r3 { color: #dc2626; font-weight: 600; }

/* ================================================================
   DESTINO CERTAMEN  (/destino-certamen)
   ================================================================ */

/* ── Filtro ── */
.dc-filter-card   { padding: 16px 20px 14px; }

.dc-filter-title-wrap {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.dc-filter-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    color: var(--c-teal);
}
.dc-filter-title {
    font-size: 1rem; font-weight: 700; color: var(--c-text);
}
.dc-filter-sigla {
    margin-left: auto; font-size: .78rem; font-weight: 600;
    color: var(--c-muted); background: var(--c-bg-alt);
    border: 1px solid var(--c-border); border-radius: 4px;
    padding: 2px 8px;
}

/* Cuerpo en 2 columnas */
.dc-filter-body {
    display: flex; gap: 20px; align-items: flex-start;
}
.dc-filter-left {
    display: flex; flex-direction: column; gap: 10px;
    flex-shrink: 0; min-width: 180px;
}
.dc-filter-right {
    flex: 1; border-left: 2px solid var(--c-border); padding-left: 16px;
}
.dc-date-input { width: 100%; }

.dc-info-list {
    margin: 0; padding-left: 16px;
    display: flex; flex-direction: column; gap: 5px;
}
.dc-info-list li {
    font-size: .76rem; color: var(--c-muted); line-height: 1.45;
}
.dc-info-nota {
    display: block; margin-top: 3px;
    font-size: .74rem; font-style: italic; color: #b45309;
}

@media (max-width: 600px) {
    .dc-filter-body  { flex-direction: column; gap: 12px; }
    .dc-filter-right { border-left: none; border-top: 1px solid var(--c-border); padding-left: 0; padding-top: 10px; }
}

/* ── Resumen de contadores ── */
.dc-summary-row {
    display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.dc-summary-card {
    flex: 1; min-width: 100px;
    border-radius: var(--radius-sm); border: 1px solid;
    padding: 10px 14px; text-align: center;
}
.dc-summary-count {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    margin-bottom: 2px;
}
.dc-summary-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

.dc-summary--evs     { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.dc-summary--subasta { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.dc-summary--sin     { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
.dc-summary--total   { border-color: #e2e8f0; background: #fff;    color: var(--c-text); }

/* ── Badges de destino ── */
.dc-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 9px; border-radius: 12px;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
    white-space: nowrap;
}
.dc-badge--evs     { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.dc-badge--subasta { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.dc-badge--sin     { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.dc-badge--sm      { font-size: .7rem; padding: 1px 7px; }

/* ── Tabla ── */
.dc-table { font-size: var(--fs-2xs); }
.dc-table thead th { white-space: nowrap; padding: 5px 7px; font-size: var(--fs-2xs); letter-spacing: -.01em; }
.dc-table tbody td { padding: 4px 7px; white-space: nowrap; }
.dc-obs-cell       { font-size: .75rem; color: var(--c-muted); white-space: normal; width: 130px; max-width: 130px; line-height: 1.4; word-break: break-all; overflow: hidden; }
.dc-vg--real       { font-weight: 600; }
.dc-vg--pedigri    { font-weight: 600; color: #b45309; font-style: italic; }
.dc-table td.dc-km--fail { color: #dc2626 !important; font-weight: 700 !important; }

/* ── Leyenda ── */
.dc-legend-card { padding: 14px 18px; }
.dc-legend-header {
    display: flex; align-items: center; gap: 7px;
    font-size: .82rem; font-weight: 700; color: var(--c-text);
    margin-bottom: 12px;
}
.dc-legend-body  { display: flex; flex-direction: column; gap: 0; }
.dc-legend-items { display: flex; flex-direction: column; gap: 10px; }

.dc-legend-item {
    display: flex; align-items: flex-start; gap: 10px;
}
.dc-legend-item .dc-badge { margin-top: 1px; flex-shrink: 0; min-width: 62px; justify-content: center; }
.dc-legend-text  { font-size: .82rem; color: var(--c-muted); line-height: 1.5; }
.dc-legend-text strong { color: var(--c-text); }

.dc-legend-sep {
    border-top: 1px solid var(--c-border);
    margin: 14px 0 10px;
}
.dc-legend-umbrales-title {
    font-size: .73rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-muted); margin-bottom: 8px;
}
.dc-legend-umbrales { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.dc-umbral-row  {
    display: flex; align-items: baseline; gap: 5px;
    font-size: .8rem;
}
.dc-umbral-key  { font-weight: 600; color: var(--c-text); }
.dc-umbral-op   { color: var(--c-muted); font-size: .75rem; }
.dc-umbral-val  { font-weight: 700; color: var(--c-teal); }
.dc-umbral-desc { color: var(--c-muted); font-size: .75rem; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .dc-summary-row { gap: 6px; }
    .dc-summary-card { padding: 8px 10px; }
    .dc-summary-count { font-size: 1.3rem; }
    .dc-legend-umbrales { gap: 4px 12px; }
}

/* ================================================================
   PÁGINA 404
   ================================================================ */
.page-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--topbar-h) - var(--tabbar-h, 34px) - 80px);
    text-align: center;
    padding: 40px 24px;
    animation: fadeIn .4s ease;
}
.p404-sheep {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 8px;
    animation: sheep-wobble 2.4s ease-in-out infinite;
}
@keyframes sheep-wobble {
    0%,100% { transform: rotate(-6deg); }
    50%      { transform: rotate( 6deg); }
}
.p404-code {
    font-family: var(--fuente-ui);
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--c-teal);
    opacity: .25;
    margin-bottom: 4px;
}
.p404-title {
    font-family: var(--fuente-ui);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 10px;
}
.p404-body {
    font-family: var(--fuente-ui);
    font-size: .95rem;
    color: var(--c-muted);
    line-height: 1.7;
    margin: 0 0 28px;
}
.p404-btn {
    display: inline-block;
    padding: 11px 28px;
    background: var(--c-teal);
    color: #fff;
    border-radius: 10px;
    font-family: var(--fuente-ui);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
}
.p404-btn:hover { opacity: .85; color: #fff; }

/* ================================================================
   TOAST GLOBAL
   ================================================================ */
.ovi-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    font-family: var(--fuente-ui);
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    max-width: 420px;
    min-width: 260px;
    animation: toastIn .25s cubic-bezier(.4,0,.2,1) both;
    white-space: nowrap;
}
@keyframes toastIn {
    from { opacity:0; transform: translateX(-50%) translateY(16px); }
    to   { opacity:1; transform: translateX(-50%) translateY(0);     }
}
.ovi-toast-info    { background: #1e3a5f; color: #bae6fd; border: 1px solid rgba(14,165,233,.3); }
.ovi-toast-success { background: #14532d; color: #bbf7d0; border: 1px solid rgba(16,185,129,.3); }
.ovi-toast-warning { background: #451a03; color: #fed7aa; border: 1px solid rgba(245,158,11,.3); }
.ovi-toast-error   { background: #450a0a; color: #fecaca; border: 1px solid rgba(239,68,68,.3);  }
.ovi-toast-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.ovi-toast-close:hover { opacity: 1; }

/* ================================================================
   OFFLINE BANNER
   ================================================================ */
.ovi-offline-bar {
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    z-index: 8000;
    background: #451a03;
    color: #fed7aa;
    border-bottom: 1px solid rgba(245,158,11,.35);
    font-family: var(--fuente-ui);
    font-size: .85rem;
    font-weight: 500;
    text-align: center;
    padding: 7px 16px;
    animation: fadeIn .2s ease;
}

/* ================================================================
   Secciones aún no disponibles: no se muestran (eran entradas en gris que no llevaban a ninguna parte).
   Reaparecen solas al quitar la clase *-disabled del menú.
   ================================================================ */
.snav-item.sn-disabled,
.mp-item.mp-disabled,
.mp-subitem.mps-disabled { display: none !important; }

/* ================================================================
   Inicio en tablet y móvil (revisión de diseño, v3.2.0)
   ================================================================ */
/* Las tarjetas con dos zonas (total + desglose) necesitan ~300 px: en tablet, dos por fila */
@media (min-width: 601px) and (max-width: 1100px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
}
/* Buzón · Descargas · Blog: una columna cuando no caben tres con holgura */
@media (max-width: 900px) {
    .rsm-panels { grid-template-columns: 1fr; }
}
/* Aviso del blog: la fecha baja de línea antes que chocar con el botón de cerrar */
.blog-banner-top { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 600px) {
    .blog-banner-date { order: 3; flex-basis: 100%; margin-left: 0; }
}

/* ================================================================
   Ficha del animal · aspecto (v3.1.6)
   Paneles como tarjetas sobre fondo gris claro, títulos con marca de color, pestañas subrayadas y una sola
   escala de color para todos los percentiles (verde = mejor, rojo = peor) con su barra de posición.
   ================================================================ */
.animal-ficha {
    border-radius: var(--radio-md);
    border-color: var(--color-borde);
    box-shadow: var(--sombra-sm);
}
.ficha-header,
.ficha-header.sexo-hembra,
.ficha-header.is-baja {
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    border-left: 5px solid var(--marca-azul-500);
    padding: var(--esp-3) var(--esp-4);
}
.ficha-header.sexo-hembra { border-left-color: var(--marca-oro-500); }
.ficha-header.is-baja     { border-left-color: var(--calidad-malo-barra); background: var(--color-peligro-fondo); }

.ficha-panels {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--esp-3);
    padding: var(--esp-3);
    background: var(--color-superficie-2);
    border-bottom: 1px solid var(--color-borde);
}
.ficha-panel,
.ficha-panel:last-child {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-xs);
    padding: var(--esp-3) var(--esp-4);
}
.ficha-panel-title {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-texto);
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: var(--esp-2);
    margin-bottom: var(--esp-2);
}
.ficha-panel-title::before {
    content: "";
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--color-acento);
    flex-shrink: 0;
}
.ficha-panel-vg .ficha-panel-title::before     { background: var(--calidad-top-barra); }
.ficha-panel-aptmam .ficha-panel-title::before { background: var(--marca-oro-500); }

.ficha-kv { font-size: var(--fs-sm); padding: 4px 0; border-bottom: 1px dotted var(--color-borde); }
.ficha-kv span { font-size: var(--fs-xs); color: var(--color-texto-suave); }
.ficha-kv strong { font-variant-numeric: tabular-nums; }
.ficha-kv strong.eet-sensible { color: var(--color-aviso); }

/* La pestaña es una columna flex: sin esto la ficha se encogía y cortaba (overflow:hidden) las tarjetas de abajo */
.animal-ficha, .ficha-grid-section { flex-shrink: 0; }

/* Cabecera compacta: crotal | chips y datos clave | selector de vista, en una sola franja */
.ficha-header { align-items: center; flex-wrap: wrap; row-gap: var(--esp-2); }
.ficha-header-right { gap: 4px; }
.ficha-datos-clave {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--esp-4);
    font-size: var(--fs-sm);
    color: var(--color-texto-2);
}
.ficha-datos-clave strong { color: var(--color-texto); font-weight: 700; }
.ficha-lote { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--color-borde); border-radius: var(--radio-full); color: var(--color-texto-2); text-decoration: none; }
.ficha-lote:hover { border-color: var(--color-acento); }
.ficha-lote i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ficha-lote small { color: var(--color-texto-suave); }

/* Selector Ficha / Resumen */
.ficha-vista {
    display: flex;
    gap: var(--esp-1);
    margin-left: auto;
    align-self: center;
}
.ficha-vista button {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 34px;
    padding: 0 var(--esp-4);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-full);
    background: var(--color-superficie);
    color: var(--color-texto-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.ficha-vista button:hover { border-color: var(--color-borde-fuerte); color: var(--color-texto); }
.ficha-vista button.activa { background: var(--color-acento-texto); border-color: var(--color-acento-texto); color: #fff; }
.ficha-vista-beta {
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radio-full);
    background: var(--color-aviso-fondo);
    color: var(--color-aviso);
}
.ficha-vista button.activa .ficha-vista-beta { background: rgba(255,255,255,.2); color: #fff; }

/* Cajas de valoración: el mismo marco para todas */
.ficha-vg-badge {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    background: var(--color-superficie);
    padding: var(--esp-2) var(--esp-2) 6px;
}
.ficha-vg-badge-lbl { font-size: var(--fs-2xs); letter-spacing: .02em; color: var(--color-texto-suave); }
.ficha-vg-badge-vg  { border: 1.5px solid var(--gris-700); }

/* Progenitores: tarjetas como los paneles */
.ficha-progenitores {
    gap: var(--esp-3);
    padding: var(--esp-3);
    background: var(--color-superficie-2);
}
.ficha-prog-card,
.ficha-prog-card:first-child {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-top: 3px solid var(--marca-azul-500);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-xs);
}
.ficha-prog-card.ficha-prog-madre { border-top-color: var(--marca-oro-500); }

/* ── Escala de calidad de los percentiles (1 = mejor), clases de Glosario.Tramo ── */
.perc-top   { --perc-c: var(--calidad-top);   --perc-f: var(--calidad-top-fondo);   --perc-b: var(--calidad-top-barra); }
.perc-bueno { --perc-c: var(--calidad-bueno); --perc-f: var(--calidad-bueno-fondo); --perc-b: var(--calidad-bueno-barra); }
.perc-medio { --perc-c: var(--calidad-medio); --perc-f: var(--calidad-medio-fondo); --perc-b: var(--calidad-medio-barra); }
.perc-bajo  { --perc-c: var(--calidad-bajo);  --perc-f: var(--calidad-bajo-fondo);  --perc-b: var(--calidad-bajo-barra); }
.perc-malo  { --perc-c: var(--calidad-malo);  --perc-f: var(--calidad-malo-fondo);  --perc-b: var(--calidad-malo-barra); }

.ficha-vg-badge[class*="perc-"],
.ficha-aptmam-cell[class*="perc-"] {
    background: var(--perc-f);
    border-color: color-mix(in srgb, var(--perc-b) 50%, transparent);
    color: var(--perc-c);
}
.ficha-vg-badge[class*="perc-"] .ficha-vg-badge-num,
.ficha-vg-badge[class*="perc-"] .ficha-vg-badge-lbl { color: var(--perc-c); }

/* Barra de posición: izquierda = 1 (mejor), derecha = 100 (peor); la marca está en el percentil (--pos) */
.perc-barra {
    position: relative;
    display: block;
    height: 5px;
    margin: 6px 3px 2px;
    border-radius: var(--radio-full);
    background: linear-gradient(90deg, var(--calidad-top-barra) 0%, var(--calidad-bueno-barra) 25%,
                var(--calidad-medio-barra) 50%, var(--calidad-bajo-barra) 75%, var(--calidad-malo-barra) 100%);
}
.perc-barra::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--pos, 50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-superficie);
    border: 2.5px solid var(--perc-c, var(--gris-700));
    transform: translate(-50%, -50%);
    box-shadow: var(--sombra-xs);
}
.ficha-aptmam-cell { padding: 7px 6px 5px; }
.ficha-aptmam-cell .perc-barra { height: 4px; margin-top: 7px; }
.ficha-aptmam-cell .perc-barra::after { width: 9px; height: 9px; border-width: 2px; }

/* Pestañas de las tablas (escritorio y tablet): subrayadas, sin el aspecto de Windows Forms */
@media (min-width: 701px) {
    .ficha-grid-section { border-radius: var(--radio-md); }
    .ficha-grid-tabbar {
        gap: 0 var(--esp-1);
        padding: 0 var(--esp-3);
        background: var(--color-superficie);
        border-bottom: 1px solid var(--color-borde);
    }
    .ficha-grid-tab,
    .ficha-grid-tab:hover,
    .ficha-grid-tab.active {
        top: 0;
        margin-bottom: -1px;
        padding: var(--esp-3);
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        font-size: var(--fs-sm);
        color: var(--color-texto-2);
    }
    .ficha-grid-tab:hover  { color: var(--color-texto); border-bottom-color: var(--color-borde-fuerte); }
    .ficha-grid-tab.active { color: var(--color-acento-texto); font-weight: 700; border-bottom-color: var(--color-acento); }
}

/* ── Ayudas: siglas con explicación (data-ayuda) y su burbuja (js/ayuda.js) ── */
[data-ayuda] {
    cursor: help;
    text-decoration: underline dotted var(--gris-400);
    text-underline-offset: 3px;
}
.ficha-vg-badge[data-ayuda], .ficha-aptmam-cell[data-ayuda], button[data-ayuda] { text-decoration: none; }
.ficha-vg-badge[data-ayuda] .ficha-vg-badge-lbl,
.ficha-aptmam-col-hdr[data-ayuda], .ficha-aptmam-row-lbl[data-ayuda] {
    text-decoration: underline dotted currentColor;
    text-underline-offset: 3px;
}
.ayuda-burbuja {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    max-width: min(300px, calc(100vw - 16px));
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--radio-sm);
    background: var(--marca-marino-800);
    color: #fff;
    font-family: var(--fuente-ui);
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: var(--sombra-lg);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
}
.ayuda-burbuja.visible { opacity: 1; }
.ayuda-burbuja strong  { display: block; margin-bottom: 2px; font-weight: 700; color: #fde68a; }
.ayuda-burbuja::after {
    content: "";
    position: absolute;
    left: var(--flecha-x, 50%);
    top: 100%;
    border: 6px solid transparent;
    border-top-color: var(--marca-marino-800);
    transform: translateX(-50%);
}
.ayuda-burbuja.abajo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--marca-marino-800); }

/* ================================================================
   Ficha del animal en el móvil (v3.1.5)
   Pestañas como chips desplazables (el desplegable parecía un título y nadie lo tocaba) y cada fila de la
   tabla como una tarjeta "etiqueta: valor", sin desplazamiento lateral.
   ================================================================ */
@media (max-width: 700px) {
    .ficha-grid-tabselect { display: none !important; }
    .ficha-grid-tabbar {
        display: flex !important;
        flex-wrap: nowrap;
        gap: var(--esp-2);
        padding: var(--esp-2) var(--esp-3);
        background: var(--color-superficie);
        border-bottom: 1px solid var(--color-borde);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ficha-grid-tabbar::-webkit-scrollbar { display: none; }
    .ficha-grid-tab {
        flex: 0 0 auto;
        min-height: 38px;
        padding: var(--esp-2) var(--esp-4);
        border: 1px solid var(--color-borde-fuerte);
        border-radius: var(--radio-full);
        background: var(--color-superficie);
        color: var(--color-texto-2);
        font-size: var(--fs-sm);
        font-weight: var(--peso-medio);
        white-space: nowrap;
    }
    .ficha-grid-tab.active {
        background: var(--color-acento-texto);
        border-color: var(--color-acento-texto);
        color: #fff;
    }
    .dyn-col-tab-btn { display: none !important; }

    /* Tabla → tarjetas */
    .ficha-grid-content .table-responsive { overflow: visible; }
    .ficha-grid-content .ovi-grid thead { display: none; }
    .ficha-grid-content .ovi-grid,
    .ficha-grid-content .ovi-grid tbody { display: block; width: 100%; }
    .ficha-grid-content .ovi-grid tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--esp-2) var(--esp-4);
        margin: var(--esp-3);
        padding: var(--esp-3) var(--esp-4);
        background: var(--color-superficie);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-md);
        box-shadow: var(--sombra-xs);
    }
    .ficha-grid-content .ovi-grid td {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
        border: none;
        background: none !important;
        text-align: left;
        font-size: var(--fs-md);
        font-weight: var(--peso-fuerte);
        color: var(--color-texto);
        white-space: normal;
    }
    .ficha-grid-content .ovi-grid td::before {
        content: attr(data-label);
        font-size: var(--fs-2xs);
        font-weight: var(--peso-normal);
        color: var(--color-texto-suave);
    }
    .ficha-grid-content .ovi-grid td.td-vacia { display: none; }
    .ficha-grid-content .ovi-grid td.ovi-grid-td-obs { grid-column: 1 / -1; }
}

/* ── Botones Excel / Imprimir comunes (Shared/BotonesExportar.razor) ── */
.btn-exportar { display: inline-flex; gap: var(--esp-1); }
.btn-exp {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 32px; padding: 0 var(--esp-3);
    border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-sm);
    background: var(--color-superficie); color: var(--color-texto-2);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-exp:hover:not(:disabled) { border-color: var(--color-acento); color: var(--color-acento-texto); background: var(--color-info-fondo); }
.btn-exp:disabled { opacity: .45; cursor: default; }
.btn-exp-error { align-self: center; font-size: var(--fs-xs); color: var(--color-peligro); }

.ficha-grid-exportar { margin-left: var(--esp-2); align-self: center; padding: 4px 0; }
@media (max-width: 700px) { .ficha-grid-exportar { display: none; } }

/* Aviso de archivos nuevos del buzón en el menú */
.snav-item { position: relative; }
.sn-aviso {
    position: absolute; top: 4px; right: 10px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radio-full); background: #dc2626; color: #fff;
    font-size: var(--fs-2xs); font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 2px var(--marca-marino-900);
}
.sn-aviso--linea { position: static; margin-left: auto; box-shadow: none; }

/* Lector · vista previa de bajas */
.gl-bajas-tabla { max-height: 340px; overflow-y: auto; border: 1px solid var(--color-borde); border-radius: var(--radio-sm); }
.gl-bajas-tabla > div { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr; gap: var(--esp-2); padding: 4px var(--esp-3); border-top: 1px solid var(--color-borde); font-size: var(--fs-sm); }
.gl-bajas-tabla > div.cab { border-top: 0; position: sticky; top: 0; background: var(--color-superficie-2); font-weight: 700; font-size: var(--fs-xs); }
.gl-bajas-tabla > div.ok span:last-child { color: var(--color-exito); font-weight: 600; }
.gl-bajas-tabla > div.no span:last-child { color: var(--color-aviso); }
/* Con fecha real, causa detallada y gestante (docs/libro-explotacion.md) */
.gl-bajas-det > div { grid-template-columns: 90px 132px minmax(0, 1.6fr) 44px minmax(0, 1fr); align-items: center; }
.gl-bajas-det input[type=date], .gl-bajas-det select, .gl-bajas-det input:not([type]) {
    width: 100%; min-height: 28px; padding: 0 4px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-xs);
    font-size: var(--fs-xs); background: var(--color-superficie); color: var(--color-texto); }
.gl-bajas-det input:not([type]) { margin-top: 2px; }
.gl-bajas-det .mono { font-family: var(--fuente-mono); }
.gl-bajas-aviso { display: block; color: var(--color-aviso); font-size: var(--fs-2xs); font-weight: 400; }
@media (max-width: 640px) { .gl-bajas-det > div { grid-template-columns: 1fr 1fr; } }

/* ================================================================
   «MI TRABAJO»: el contenedor del personal de AGRAMA, aparte de OviNET (lateral azul pizarra)
   ================================================================ */
.espacio-trabajo {
    --c-sidebar:       var(--marca-pizarra-800);
    --c-sidebar-hover: var(--marca-pizarra-700);
    --g-sidebar:       linear-gradient(180deg, var(--marca-pizarra-800) 0%, var(--marca-pizarra-900) 100%);
}
.espacio-trabajo .snav-item.active,
.espacio-trabajo .snav-item.sn-active { background: color-mix(in srgb, var(--marca-pizarra-300) 16%, transparent); }
.espacio-trabajo .snav-item.active::before,
.espacio-trabajo .snav-item.sn-active::before {
    background: var(--marca-pizarra-300);
    box-shadow: 0 0 14px color-mix(in srgb, var(--marca-pizarra-300) 60%, transparent);
}
.espacio-trabajo .snav-item.active .sn-icon,
.espacio-trabajo .snav-item.sn-active .sn-icon { background: color-mix(in srgb, var(--marca-pizarra-300) 24%, transparent); }
.espacio-trabajo .app-gold-bar {
    background: linear-gradient(90deg, var(--c-sidebar) 0%, var(--c-sidebar) var(--sidebar-w),
        var(--marca-pizarra-500) calc(var(--sidebar-w) + 20px), var(--marca-pizarra-600) 50%, var(--marca-pizarra-500) 70%, var(--c-border) 100%);
}
/* Barra de arriba: título del contenedor y paso a OviNET; en OviNET, la vuelta a Mi trabajo */
.tb-trabajo { display: inline-flex; align-items: center; gap: var(--esp-3); }
.tb-trabajo-tit { padding: 4px 14px; border-radius: var(--radio-full); background: var(--marca-pizarra-600); color: var(--color-superficie);
                  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.tb-trabajo-ver, .tb-volver-trabajo {
    padding: 4px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio-full); background: var(--color-superficie);
    color: var(--color-texto-2); font-family: var(--fuente-ui); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tb-trabajo-ver:hover, .tb-volver-trabajo:hover { color: var(--color-texto); border-color: var(--marca-pizarra-500); }
.tb-volver-trabajo { margin-right: var(--esp-2); color: var(--marca-pizarra-600); border-color: color-mix(in srgb, var(--marca-pizarra-500) 45%, transparent); }
.tb-title:has(.tb-volver-trabajo) { flex-direction: row; align-items: center; }
.mp-espacios button.trabajo.activo { background: var(--marca-pizarra-600); color: var(--color-superficie); }
/* Contador de avisos sobre un icono del lateral */
.sn-cuenta {
    position: absolute; top: 2px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--color-peligro); color: var(--color-superficie); font-size: var(--fs-2xs); font-weight: 800; line-height: 18px; text-align: center;
}

/* Vistas de ejemplo de los módulos en preparación (Sanidad, Cuentas, Libro: ProximoModulo) */
.ej { display: flex; flex-direction: column; gap: var(--esp-2); font-size: var(--fs-sm); color: var(--color-texto-2); }
.ej-aviso { padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); background: var(--color-aviso-fondo); color: var(--color-texto); }
.ej-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-2); padding: 6px 0; border-bottom: 1px solid var(--color-borde); }
.ej-fila em { font-style: normal; font-size: var(--fs-xs); color: var(--color-texto-suave); white-space: nowrap; }
.ej-cod { font-family: var(--fuente-mono); font-weight: 700; color: var(--marca-campo-600); }
.ej-et { padding: 1px 9px; border-radius: var(--radio-full); font-size: var(--fs-2xs); font-weight: 800; white-space: nowrap; }
.ej-et.rojo { background: var(--calidad-malo-fondo); color: var(--calidad-malo); }
.ej-et.ambar { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.ej-et.verde { background: var(--calidad-bueno-fondo); color: var(--calidad-bueno); }
.ej-barra { height: 10px; border-radius: var(--radio-full); background: var(--color-superficie-2); overflow: hidden; margin-top: var(--esp-2); }
.ej-barra i { display: block; height: 100%; background: var(--marca-campo-500); border-radius: var(--radio-full); }
.ej small { font-size: var(--fs-xs); color: var(--color-texto-suave); }
.ej-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }
.ej-cifras div { display: flex; flex-direction: column; padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); background: var(--color-superficie-2); }
.ej-cifras b { font-size: var(--fs-lg); font-weight: 800; color: var(--color-texto); }
.ej-cifras .pos b { color: var(--calidad-bueno); }
.ej-cifras span { font-size: var(--fs-2xs); color: var(--color-texto-suave); }
.ej-meses { display: flex; align-items: flex-end; gap: var(--esp-2); height: 140px; padding-top: var(--esp-2); }
.ej-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.ej-col { flex: 1; width: 70%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.ej-col i, .ej-leyenda i { display: block; border-radius: 4px; }
.ej-col i.cuesta, .ej-leyenda i.cuesta { background: var(--marca-oro-500); }
.ej-col i.deja, .ej-leyenda i.deja { background: var(--marca-campo-500); }
.ej-leyenda { display: flex; gap: var(--esp-4); font-size: var(--fs-xs); }
.ej-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ej-leyenda i { width: 10px; height: 10px; }

/* Aviso de entrada nueva en el blog (inicio): una sola línea */
.blog-linea {
    display: flex; align-items: center; gap: var(--esp-2); min-width: 0; margin-bottom: var(--esp-2);
    padding: 6px var(--esp-3); border-radius: var(--radio-sm); border-left: 4px solid var(--marca-oro-500);
    background: var(--color-aviso-fondo); font-size: var(--fs-sm);
}
.blog-linea-et { flex-shrink: 0; font-weight: 800; color: var(--color-aviso); white-space: nowrap; }
.blog-linea-tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--color-texto); text-decoration: none; }
.blog-linea-tit:hover { text-decoration: underline; }
.blog-linea-fecha { flex-shrink: 0; font-size: var(--fs-xs); color: var(--color-texto-suave); white-space: nowrap; }
.blog-linea-leer { flex-shrink: 0; padding: 2px 10px; border-radius: var(--radio-full); background: var(--marca-oro-500); color: var(--marca-marino-900); font-size: var(--fs-xs); font-weight: 800; text-decoration: none; }
.blog-linea-cerrar { flex-shrink: 0; border: 0; background: none; color: var(--color-texto-suave); cursor: pointer; padding: 0 2px; }
@media (max-width: 640px) { .blog-linea-fecha { display: none; } }

/* ── Barra superior en una línea (3.1.47): espacio · pestañas · buscador · ganadería · usuario ──────────────
   En el ordenador la barra mide 48 px y lleva dentro las pestañas abiertas (la fila de debajo desaparece). El
   cuadro del logo con la versión conserva su tamaño: baja por encima del lateral, que es del mismo color. */
.tb-user { position: relative; }
.tb-sigla-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    border-radius: var(--radio-full); border: 1px solid color-mix(in srgb, var(--marca-campo-600) 30%, transparent);
    background: color-mix(in srgb, var(--marca-campo-600) 10%, var(--color-superficie));
    font-family: var(--fuente-ui); font-size: var(--fs-sm); font-weight: 800; color: var(--marca-campo-600);
    cursor: pointer; white-space: nowrap;
}
.tb-sigla-chip:hover { border-color: var(--marca-campo-600); }
.tb-caret { font-size: var(--fs-2xs); opacity: .6; }
.tb-avatar-btn { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--color-texto-suave); }
.tb-avatar-btn .tb-avatar { width: 28px; height: 28px; font-size: var(--fs-xs); }
.tb-avatar-btn .tb-avatar { width: 32px; height: 32px; }
.tb-menu-fondo { position: fixed; inset: 0; z-index: 400; }
.tb-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 401; min-width: 220px;
    display: flex; flex-direction: column; padding: var(--esp-2);
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-md); box-shadow: var(--sombra-lg);
}
.tb-menu-cab { display: flex; align-items: center; gap: var(--esp-2); padding: 4px 6px 8px; border-bottom: 1px solid var(--color-borde); margin-bottom: 4px; }
.tb-menu-cab .tb-avatar { width: 28px; height: 28px; font-size: var(--fs-xs); }
.tb-menu-nombre { font-weight: 700; color: var(--color-texto); }
.tb-menu-t { padding: 6px 8px 2px; font-size: var(--fs-xs); color: var(--color-texto-suave); }
.tb-menu-t strong { color: var(--marca-campo-600); }
.tb-menu-siglas { display: flex; gap: 4px; padding: 2px 8px 6px; }
.tb-menu-siglas button {
    padding: 2px 10px; border-radius: var(--radio-full); border: 1px solid var(--color-borde); background: var(--color-superficie);
    font-family: var(--fuente-ui); font-size: var(--fs-xs); font-weight: 700; color: var(--color-texto-2); cursor: pointer;
}
.tb-menu-siglas button.activa { background: var(--marca-campo-600); border-color: var(--marca-campo-600); color: var(--color-superficie); }
.tb-menu-op {
    display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radio-sm); background: none; text-align: left;
    font-family: var(--fuente-ui); font-size: var(--fs-sm); color: var(--color-texto); cursor: pointer;
}
.tb-menu-op:hover { background: var(--color-superficie-2); }
.tb-menu-salir { color: var(--color-peligro); }

/* Marca: la oveja en dorado (el color de AGRAMA) y el nombre «OviNET» debajo, para que no parezca un icono del menú */
.tb-logo-box img {
    filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(600%) hue-rotate(5deg) brightness(100%) drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.tb-marca { display: block; font-family: var(--fuente-ui); font-weight: 800; line-height: 1; letter-spacing: .3px; color: #fff; }
.tb-marca b { font-weight: 800; color: var(--marca-oro-500); }

@media (min-width: 768px) {
    :root { --topbar-h: 48px; --tabbar-h: 0px; }
    .app-topbar { padding-left: var(--sidebar-w); }
    .tb-brand {
        position: absolute; left: 0; top: 0; height: 88px; z-index: 2; align-self: auto; align-items: flex-start; padding-top: 8px;
        background: radial-gradient(110% 80% at 50% 10%, #245f3c 0%, #123a24 60%, var(--c-sidebar) 100%);
    }
    .tb-logo-box { gap: 2px; }
    .tb-marca { margin-top: 1px; font-size: var(--fs-md); letter-spacing: .4px; }
    .tb-logo-box .version-badge--compacta { font-size: var(--fs-2xs); opacity: .55; letter-spacing: .4px; }
    .app-main > .tabbar { display: none; }           /* las pestañas van en la barra */
    .app-main { margin-left: var(--sidebar-w); transition: margin-left .18s ease; }
    .app-sidenav { padding-top: 45px; }             /* lo que baja el logo por debajo de la barra */
    .tb-title { flex: 0 0 auto; padding-left: 14px; }
    .tb-pestanas { flex: 1 1 560px; min-width: 0; align-self: stretch; display: flex; margin-left: 14px; } /* base explícita: las pestañas miden su propio ancho (container-type) y no cuentan para el reparto */
    .tb-pestanas .tabbar { flex: 1; height: auto; background: transparent; border-bottom: 0; position: static; }
    .tb-pestanas .tabbar-end { border-left: 0; }
    .tb-logout { display: none; }                    /* en el menú del usuario */
}

/* Barra superior en el móvil: el selector de espacio necesita el sitio; fuera el círculo del usuario (queda la sigla) */
@media (max-width: 767px) {
    .tb-pestanas, .tb-avatar-btn, .tb-solo-pc { display: none; }
    /* Móvil (3.1.60): barra de arriba compacta que se esconde al bajar y vuelve al subir (wwwroot/index.html, clase
       «tb-oculta» en <html>). Las pantallas abiertas siguen en «Menú». */
    .app-main > .tabbar { display: none !important; }
    .app-topbar, .app-gold-bar { transition: transform .22s ease; will-change: transform; }
    html.tb-oculta .app-topbar, html.tb-oculta .app-gold-bar { transform: translateY(-64px); }
    /* Móvil: oveja algo más pequeña y el nombre en lugar de la versión (la versión está en Config) */
    .tb-logo-box:has(.version-badge) img { height: 34px; }
    .tb-marca { font-size: var(--fs-xs); }
    .tb-logo-box .version-badge--compacta { display: none; }
    .tb-sigla-chip { padding: 2px 8px; font-size: var(--fs-xs); }
    .tb-avatar { display: none; }
    .tb-user { gap: 6px; padding-left: 8px; margin-left: 4px; }
    .tb-title { padding-left: 10px; }
    .tb-espacios button { padding: 4px 9px; }
}
@media (max-width: 380px) {
    .tb-espacios button { padding: 4px 7px; }
    .tb-espacios { gap: 0; }
}

/* Ajustes · lector con agente o sin agente */
.stg-lector-op {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-2);
}
.stg-lector-op button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: var(--esp-2) var(--esp-3);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    background: var(--color-superficie);
    color: var(--color-texto-2);
    font-size: var(--fs-xs);
    cursor: pointer;
}
.stg-lector-op button b { color: var(--color-texto); font-size: var(--fs-sm); }
.stg-lector-op button.on {
    border-color: var(--color-acento);
    background: var(--color-acento-suave);
    box-shadow: 0 0 0 1px var(--color-acento) inset;
}
.stg-lector-op button:disabled { opacity: .55; cursor: not-allowed; }
.stg-lector-beta {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--color-aviso);
    margin-left: 4px;
}
@media (max-width: 520px) { .stg-lector-op { grid-template-columns: 1fr; } }

/* Progreso del lector sin agente (GestionLector): panel fijo abajo, visible en cualquier pestaña */
.gl-progreso {
    position: fixed; left: 50%; bottom: var(--esp-4); transform: translateX(-50%);
    width: min(440px, calc(100vw - 32px)); z-index: 1060;
    background: var(--color-superficie); color: var(--color-texto);
    border: 1px solid var(--color-borde); border-radius: var(--radio-md); box-shadow: var(--sombra-lg);
    padding: var(--esp-3) var(--esp-4); font-family: var(--fuente-ui);
}
.gl-progreso-cab { display: flex; align-items: baseline; gap: var(--esp-2); font-size: var(--fs-sm); }
.gl-progreso-txt { flex: 1; min-width: 0; }
.gl-progreso-pct { font-size: var(--fs-lg); color: var(--color-acento); font-variant-numeric: tabular-nums; }
.gl-progreso-barra {
    margin-top: var(--esp-2); height: 8px; border-radius: var(--radio-full);
    background: var(--color-superficie-2); overflow: hidden;
}
.gl-progreso-barra > span {
    display: block; height: 100%; border-radius: inherit; background: var(--color-acento);
    transition: width .4s ease;
}
.gl-progreso-indet > span { animation: gl-progreso-ir 1.4s ease-in-out infinite; }
@keyframes gl-progreso-ir { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.gl-progreso-tiempo { margin-top: var(--esp-1); font-size: var(--fs-xs); color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .gl-progreso-indet > span { animation: none; } }

/* ── Lector (GestionLector, rediseño 3.1.20): tres pestañas grandes con el estado del lector a la derecha ── */
.glb-wrap { margin-bottom: var(--esp-3); }
.glb {
    display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: var(--esp-2);
    border-bottom: 1px solid var(--color-borde);
}
.glb-tabs { display: flex; gap: var(--esp-1); overflow-x: auto; }
.glb-tab {
    position: relative; display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-4);
    border: 0; border-bottom: 3px solid transparent; background: none; color: var(--color-texto-2);
    font-size: var(--fs-md); font-weight: 600; white-space: nowrap; cursor: pointer;
}
.glb-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.glb-tab:hover { color: var(--color-texto); background: var(--color-superficie-2); border-radius: var(--radio-sm) var(--radio-sm) 0 0; }
.glb-tab.activa { color: var(--color-acento-texto); border-bottom-color: var(--color-acento); }
.glb-punto { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-aviso); }
.glb-estado {
    display: flex; align-items: center; gap: var(--esp-2); margin-bottom: 4px; padding: 4px var(--esp-3);
    border: 1px solid var(--color-borde); border-radius: var(--radio-full); background: var(--color-superficie);
    text-align: left; cursor: pointer; align-self: center;
}
.glb-estado:hover { border-color: var(--color-borde-fuerte); }
.glb-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.glb-txt b { font-size: var(--fs-sm); color: var(--color-texto); }
.glb-txt small { font-size: var(--fs-xs); color: var(--color-texto-suave); }
.glb-aviso {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-2);
    padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); background: var(--color-acento-suave);
    font-size: var(--fs-sm); color: var(--color-texto);
}
.glb-aviso > span { flex: 1 1 260px; }

.glb-modal { max-width: 520px; }
.glb-conf { margin: 0; font-size: var(--fs-sm); color: var(--color-texto); }
.glb-conf-peligro { padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); background: var(--color-peligro-fondo); }
.glb-reco { margin-left: 6px; padding: 1px 8px; border-radius: var(--radio-full); background: var(--color-exito-fondo); color: var(--color-exito); font-size: var(--fs-2xs); font-style: normal; font-weight: 700; }
.glb-nota { margin-top: var(--esp-2); font-size: var(--fs-xs); color: var(--color-texto-2); }
.glb-nota-ok { color: var(--color-exito); font-weight: 600; }

/* Pestaña «Gestión del lector»: cada función en su tarjeta, con lo que hace explicado */
.glg { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--esp-3); align-items: start; }
.glg-card {
    display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4);
    border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); box-shadow: var(--sombra-xs);
}
.glg-t { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--color-texto-2); text-transform: uppercase; letter-spacing: .04em; }
.glg-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: var(--fs-lg); color: var(--color-texto); }
.glg-suave { font-size: var(--fs-xs); color: var(--color-texto-suave); font-weight: 400; }
.glg-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.glg-etq { font-size: var(--fs-sm); color: var(--color-texto-2); }
.glg-ayuda { margin: 0; font-size: var(--fs-xs); color: var(--color-texto-suave); }
.glg-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.glg-borrar { display: grid; gap: var(--esp-2); }
.glg-op { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--esp-3); border: 1px solid var(--color-borde); border-radius: var(--radio-sm); }
.glg-op b { font-size: var(--fs-md); color: var(--color-texto); }
.glg-op p { margin: 0; font-size: var(--fs-xs); color: var(--color-texto-2); }
.glg-op-peligro { border-color: color-mix(in srgb, var(--color-peligro) 30%, var(--color-borde)); }
.glg-programas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
.glg-prog {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--esp-3);
    border: 1px solid var(--color-borde); border-radius: var(--radio-sm); background: var(--color-superficie); text-align: left; cursor: pointer;
}
.glg-prog b { font-size: var(--fs-md); color: var(--color-texto); }
.glg-prog span { font-size: var(--fs-xs); color: var(--color-texto-suave); }
.glg-prog.sel { border: 2px solid var(--color-acento); background: var(--color-acento-suave); }
.glg-prog:disabled { cursor: default; opacity: .6; }

/* Borrar algunas actividades: una fila por actividad con cuántos animales la tienen recogida */
.glq-lista { display: flex; flex-direction: column; gap: 4px; margin: var(--esp-2) 0; }
.glq-act {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--esp-2); padding: 8px 12px;
    border: 1px solid var(--color-borde); border-radius: var(--radio-sm); cursor: pointer; font-size: var(--fs-sm);
    text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--color-texto);
}
.glq-act b { font-size: var(--fs-xs); color: var(--color-texto-2); font-variant-numeric: tabular-nums; }
.glq-act.sel { border-color: var(--color-peligro); background: var(--color-peligro-fondo); }
.glq-act.sel b { color: var(--color-peligro); }
.glq-act.vacia { opacity: .55; cursor: default; }

/* Copias de seguridad del lector */
.glg-copias { grid-column: 1 / -1; }
.glg-lista-copias { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--color-borde); border-radius: var(--radio-sm); }
.glg-lista-copias li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: 8px 12px; border-bottom: 1px solid var(--color-borde); }
.glg-lista-copias li:last-child { border-bottom: 0; }
.glg-lista-copias li > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.glg-lista-copias b { font-size: var(--fs-sm); color: var(--color-texto); font-variant-numeric: tabular-nums; }
.glg-lista-copias span { font-size: var(--fs-sm); color: var(--color-texto-2); }
.glg-lista-copias small { font-size: var(--fs-xs); color: var(--color-texto-suave); }
.glg-copia-acc { display: flex; gap: var(--esp-3); }
.glg-copia-ahora { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.glg-copia-nombre { flex: 1 1 200px; min-width: 0; padding: 6px 10px; font: inherit; font-size: var(--fs-sm); color: var(--color-texto); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-sm); }
.glg-guardado { display: flex; flex-direction: column; gap: var(--esp-1); padding: 10px 12px; border-radius: var(--radio-sm); background: var(--color-exito-fondo); border: 1px solid var(--color-exito); }
.glg-guardado > b { font-size: var(--fs-sm); color: var(--color-texto); }
.glg-guardado small { font-size: var(--fs-xs); color: var(--color-texto-2); }
.glg-guardado-act { display: flex; flex-wrap: wrap; gap: 6px; }
.glg-guardado-act span { font-size: var(--fs-sm); color: var(--color-texto); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 999px; padding: 2px 10px; }
.glg-guardado-mal { background: var(--color-peligro-fondo); border-color: var(--color-peligro); }
.glb-nota-peligro { color: var(--color-peligro); }

/* Gestión del lector → Avanzado (desplegable, cerrado por defecto) */
.glg-avanzado { grid-column: 1 / -1; }
.glg-av-cab {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--esp-2); width: 100%; padding: 0;
    border: 0; background: none; text-align: left; cursor: pointer;
}
.glg-av-cab svg { width: 18px; height: 18px; margin-left: auto; align-self: center; color: var(--color-texto-2); transition: transform .2s; }
.glg-avanzado.abierto .glg-av-cab svg { transform: rotate(180deg); }
.glg-av-resumen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--esp-4); font-size: var(--fs-sm); color: var(--color-texto-2); }
.glg-av-resumen b { font-size: var(--fs-md); color: var(--color-texto); font-variant-numeric: tabular-nums; }
.glg-av-resumen .aviso, .glg-av-resumen .aviso b { color: var(--color-peligro); }
.glg-av-resumen small { color: var(--color-texto-suave); font-size: var(--fs-xs); }
.glg-av-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-borde); }
.glg-av-tabs button {
    padding: 6px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
    font-size: var(--fs-sm); font-weight: 600; color: var(--color-texto-2); cursor: pointer;
}
.glg-av-tabs button.activa { border-bottom-color: var(--color-acento); color: var(--color-acento-texto); }
.glq-act-desc.sel { border-color: var(--color-acento); background: var(--color-acento-suave); }
.glq-act-desc.sel b { color: var(--color-acento-texto); }
.glg-av-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.glg-av-filtros input { max-width: 260px; }
.glg-av-tabla { max-height: 420px; overflow: auto; border: 1px solid var(--color-borde); border-radius: var(--radio-sm); }
.glg-av-tabla table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.glg-av-tabla th {
    position: sticky; top: 0; z-index: 1; padding: 6px 10px; background: var(--color-superficie-2, var(--color-superficie));
    border-bottom: 1px solid var(--color-borde); text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--color-texto-2);
}
.glg-av-tabla th:first-child, .glg-av-tabla td:first-child { width: 36px; }
.glg-av-tabla td { padding: 5px 10px; border-bottom: 1px solid var(--color-borde); color: var(--color-texto); vertical-align: middle; }
.glg-av-tabla tr.sel td { background: var(--color-peligro-fondo); }
.glg-av-tabla .mono, .glg-av-faltan .mono { font-family: var(--fuente-mono); }
.glg-av-tabla p { margin: var(--esp-2); }
.glg-av-chip {
    display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px; border-radius: var(--radio-full);
    background: var(--color-acento-suave); color: var(--color-acento-texto); font-size: var(--fs-xs); font-weight: 600;
}
.glg-av-chip.aviso { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.glg-av-faltan {
    display: flex; flex-wrap: wrap; gap: 4px var(--esp-3); max-height: 260px; overflow-y: auto; padding: var(--esp-2);
    border: 1px solid var(--color-borde); border-radius: var(--radio-sm); font-size: var(--fs-sm); color: var(--color-texto);
}

@media (max-width: 640px) {
    .glb-tab { padding: var(--esp-2); font-size: var(--fs-sm); }
    .glb-tab span { display: none; }
    .glb-tab.activa span { display: inline; }
    .glb-estado { flex: 1 1 100%; border-radius: var(--radio-sm); }
    .glg { grid-template-columns: 1fr; }
    .glg-programas { grid-template-columns: 1fr; }
}

/* Detalle de una descarga, compacto y según la actividad (3.1.20) */
.gl-toolbar.gld-toolbar { flex-wrap: wrap; margin: var(--esp-2) 0 0; padding: 0; background: none; border: 0; }
.gld-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.gld-act {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px solid var(--color-borde);
    border-radius: var(--radio-full); background: var(--color-superficie); color: var(--color-texto-2);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.gld-act b { font-weight: 700; color: var(--color-texto-suave); }
.gld-act.activa { border-color: var(--color-acento-texto); background: var(--color-acento-suave); color: var(--color-acento-texto); }
.gld-act.activa b { color: var(--color-acento-texto); }
.gld-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--color-borde); }
.gld-modo { font-size: var(--fs-xs); color: var(--color-texto-2); }
.gld-mas { position: relative; }
.gld-menu {
    /* Mejora #75: se abre hacia la derecha del botón (con right: 0 quedaba debajo del menú lateral de OviNET) */
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 200; min-width: 300px; max-width: min(420px, calc(100vw - 24px)); padding: 4px;
    border: 1px solid var(--color-borde); border-radius: var(--radio-sm); background: var(--color-superficie); box-shadow: var(--sombra-lg);
}
.gld-menu button {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radio-xs);
    background: none; text-align: left; cursor: pointer;
}
.gld-menu button:hover:not(:disabled) { background: var(--color-superficie-2); }
.gld-menu button:disabled { opacity: .45; cursor: default; }
.gld-menu b { font-size: var(--fs-sm); color: var(--color-texto); }
.gld-menu small { font-size: var(--fs-xs); color: var(--color-texto-suave); }
.gld-resumen { margin: var(--esp-2) 0; font-size: var(--fs-sm); font-weight: 600; color: var(--color-texto-2); }

.gl-table.gld-tabla th, .gl-table.gld-tabla td { padding: 5px 12px; text-align: left; vertical-align: middle; white-space: nowrap; }
.gl-table.gld-tabla td:last-child { width: 1%; }
.gld-tabla th { font-size: var(--fs-xs); text-transform: none; }
.gld-animal { line-height: 1.15; }
.gld-iden { display: block; font-weight: 700; color: var(--color-texto); text-decoration: none; }
a.gld-iden:hover { color: var(--color-acento-texto); text-decoration: underline; }
.gld-sin { font-weight: 600; color: var(--color-peligro); }
.gld-idelec { font-family: var(--fuente-mono); font-size: var(--fs-2xs); color: var(--color-texto-suave); }
.gld-leido { font-variant-numeric: tabular-nums; }
.gld-leido small { color: var(--color-texto-suave); }
.gld-eq { display: inline-block; padding: 1px 8px; border-radius: var(--radio-xs); background: var(--color-superficie-2); font-size: var(--fs-xs); font-weight: 600; color: var(--color-texto-2); }
.gld-valor { font-weight: 700; color: var(--color-texto); }
.gld-corderos { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.gld-cord { display: inline-flex; gap: 3px; padding: 1px 8px; border-radius: var(--radio-full); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.gld-cord-m { background: color-mix(in srgb, var(--marca-azul-500) 14%, transparent); color: var(--marca-azul-700); }
.gld-cord-h { background: rgba(212,168,67,.15); color: #7c5a00; }   /* el mismo ámbar de hembra que la ficha */
.gld-cord- { background: var(--color-superficie-2); color: var(--color-texto-2); }
.gld-cord b { font-weight: 800; }
.gld-cord-x, .gld-cord-a, .gld-cord-otro { background: var(--color-superficie-2); color: var(--color-texto-2); }
.gld-cord-venta { font-weight: 600; opacity: .8; }
@media (max-width: 640px) {
    .gld-menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; min-width: 0; }
}

/* Lista de descargas: qué trae cada una y búsqueda de un animal en todas (3.1.20) */
.gl-actchip { display: inline-flex; gap: 4px; padding: 0 7px; border-radius: var(--radio-full); background: var(--color-superficie-2); font-size: var(--fs-2xs); font-weight: 600; color: var(--color-texto-2); }
.gl-actchip b { color: var(--color-texto); }
.gls-res { margin-bottom: var(--esp-2); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--color-acento); border-radius: var(--radio-md); background: var(--color-superficie); font-size: var(--fs-sm); }
.gls-cab { margin-bottom: 4px; color: var(--color-texto-2); }
.gls-fila {
    display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto auto; gap: var(--esp-3); align-items: center; width: 100%;
    padding: 5px 6px; border: 0; border-top: 1px solid var(--color-borde); background: none; text-align: left; cursor: pointer;
}
.gls-fila:hover { background: var(--color-info-fondo); }
.gls-fecha { font-variant-numeric: tabular-nums; color: var(--color-texto-suave); }
.gls-desc { font-weight: 600; color: var(--color-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gls-animal { font-weight: 700; color: var(--color-texto); }
.gls-valor { font-size: var(--fs-xs); color: var(--color-texto-suave); }
.gld-resaltada td { background: var(--color-aviso-fondo) !important; }
@media (max-width: 640px) {
    .gls-fila { grid-template-columns: 60px minmax(0, 1fr); }
    .gls-fila .gl-actchip, .gls-valor { grid-column: 2; }
}

/* Cargar lector: capacidad del lector según el programa (3.1.20) */
.clc-cap { min-width: 150px; }
.clc-cap-txt { font-size: var(--fs-sm); color: var(--color-texto-2); }
.clc-cap-txt b { font-size: var(--fs-lg); color: var(--color-texto); }
.clc-cap-barra { display: block; width: 100%; height: 6px; margin: 3px 0; border-radius: var(--radio-full); background: var(--color-superficie-2); overflow: hidden; }
.clc-cap-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--color-acento); }
.clc-cap-mal .clc-cap-barra > span { background: var(--color-peligro); }
.clc-cap-mal .cl-stat-label { color: var(--color-peligro); }

/* Partos declarados y bajas procesadas (lista y detalle de descargas) */
.gl-proc { display: inline-flex; padding: 0 8px; border-radius: var(--radio-full); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
.gl-proc-ok { background: var(--color-exito-fondo); color: var(--color-exito); }
.gl-proc-parcial { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.gl-proc-no { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.gld-resumen .gl-proc { margin-left: var(--esp-2); font-size: var(--fs-xs); }

/* Acciones preparadas por el asistente (el ganadero las confirma) */
.as-acc { margin: var(--esp-2) 0; padding: var(--esp-3); border: 1px solid var(--color-acento); border-left-width: 4px; border-radius: var(--radio-md); background: var(--color-superficie); }
.as-acc-procesar_bajas { border-color: var(--color-peligro); }
.as-acc.hecha { border-color: var(--color-exito); }
.as-acc-cab { display: flex; align-items: center; gap: var(--esp-2); }
.as-acc-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-acento-suave); color: var(--color-acento-texto); font-weight: 800; }
.as-acc-procesar_bajas .as-acc-ico { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.as-acc-tit { font-size: var(--fs-md); font-weight: 700; color: var(--color-texto); }
.as-acc-det { margin-top: 4px; font-size: var(--fs-sm); color: var(--color-texto-2); }
.as-acc-marca { display: inline-block; padding: 0 8px; border-radius: var(--radio-xs); background: var(--marca-campo-600); color: var(--color-superficie); font-family: var(--fuente-mono); font-size: var(--fs-xs); font-weight: 800; }
.as-acc-animales { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--esp-2); }
.as-acc-animales span { padding: 1px 8px; border-radius: var(--radio-full); background: var(--color-superficie-2); font-size: var(--fs-xs); font-weight: 600; color: var(--color-texto); }
.as-acc-sim { margin-top: var(--esp-2); padding: var(--esp-2); border-radius: var(--radio-sm); background: var(--color-aviso-fondo); font-size: var(--fs-sm); }
.as-acc-msg { margin-top: var(--esp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-exito); }
.as-acc-msg.mal { color: var(--color-peligro); }
.as-acc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-top: var(--esp-3); }
.as-acc-btn { min-height: 40px; padding: 0 var(--esp-4); border: 0; border-radius: var(--radio-full); background: var(--color-acento); color: var(--color-superficie); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.as-acc-btn.peligro { background: var(--color-peligro); }
.as-acc-btn:disabled { opacity: .6; cursor: default; }

/* Lector reiniciado (fechas de 2005): aviso y corrección */
.gld-reinicio {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: var(--esp-2) 0;
    padding: var(--esp-2) var(--esp-3); border: 1px solid var(--color-peligro); border-radius: var(--radio-sm);
    background: var(--color-peligro-fondo); font-size: var(--fs-sm); color: var(--color-texto);
}
.gld-reinicio > span { flex: 1 1 280px; }
.gld-reinicio small { flex-basis: 100%; color: var(--color-texto-2); }
.gld-cf-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.gld-cf-check input[type=date], .gld-cf-campo input { width: auto; }
.gld-cf-campo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: var(--esp-2) 0; font-size: var(--fs-sm); font-weight: 600; }

/* Cargar lector: lo que dejó preparado el asistente */
.clc-asis {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-2);
    padding: var(--esp-2) var(--esp-3); border: 1px solid var(--color-acento); border-radius: var(--radio-md);
    background: var(--color-acento-suave); font-size: var(--fs-sm); color: var(--color-texto);
}
.clc-asis > span:first-child { flex: 1 1 280px; }
.clc-asis-ok { font-weight: 600; color: var(--color-exito); }
.as-acc-cargar_lector .as-acc-ico { background: var(--color-exito-fondo); color: var(--color-exito); }
.as-acc-tratar .as-acc-ico { background: var(--color-peligro-fondo); color: var(--color-peligro); }

/* Atención: frase que explica la lista y tendencia de leche por oveja (ideas de Indelvo) */
.at-frase { margin: var(--esp-2) 0; padding: var(--esp-2) var(--esp-3); border-left: 3px solid var(--color-acento); border-radius: var(--radio-xs);
            background: var(--color-acento-suave); font-size: var(--fs-sm); color: var(--color-texto); }
.at-tend { white-space: nowrap; }
.at-spark { width: 40px; height: 16px; vertical-align: middle; margin-right: 6px; }
.at-spark line { stroke-width: 2; stroke-linecap: round; }
.at-spark.baja line, .at-spark.baja circle { stroke: var(--color-peligro); fill: var(--color-peligro); }
.at-spark.sube line, .at-spark.sube circle { stroke: var(--color-exito); fill: var(--color-exito); }
.at-tend-v { font-variant-numeric: tabular-nums; color: var(--color-texto-2); }
.at-tend-v b { color: var(--color-texto); }
.at-pct { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--radio-full); font-size: var(--fs-2xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.at-pct.mal { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.at-pct.baja { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.at-pct.sube { background: var(--color-exito-fondo); color: var(--color-exito); }

/* Cuadro de mandos (Pages/Cuadro.razor): gráficos y barra de posición, que se pintan como HTML (sin CSS con ámbito) */
.cm-spark { display: block; overflow: visible; }
.cm-spark polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cm-spark polyline.yo { stroke: var(--color-acento-texto); stroke-width: 2; }
.cm-spark circle.yo { fill: var(--color-acento-texto); stroke: none; }
.cm-spark.est-mal polyline.yo { stroke: var(--color-peligro); }
.cm-spark.est-mal circle.yo { fill: var(--color-peligro); }
.cm-spark.est-aviso polyline.yo { stroke: var(--color-aviso); }
.cm-spark.est-aviso circle.yo { fill: var(--color-aviso); }
.cm-spark.est-bien polyline.yo { stroke: var(--color-exito); }
.cm-spark.est-bien circle.yo { fill: var(--color-exito); }
.cm-spark polyline.agr { stroke: var(--gris-400); stroke-width: 1.5; stroke-dasharray: 3 3; }
.cm-spark line.obj { stroke: var(--color-texto-suave); stroke-width: 1; stroke-dasharray: 1 3; }
.cm-spark text { font-size: 10px; fill: var(--color-texto-2); font-family: var(--fuente-ui); }
.cm-spark text.anio { fill: var(--color-texto-suave); }
.cm-spark.grande { width: 100%; height: auto; max-width: 520px; }
.cm-spark-vacio { display: block; height: 34px; }
.cm-pos { display: flex; flex-direction: column; gap: 6px; }
.cm-pos-pista { position: relative; height: 22px; border-radius: var(--radio-full); background: var(--color-superficie-2); }
.cm-pos-pista span { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.cm-pos-pista .banda { transform: translateY(-50%); height: 10px; border-radius: var(--radio-full); background: var(--color-borde-fuerte); }
.cm-pos-pista .mediana { width: 2px; height: 16px; background: var(--color-texto-2); }
.cm-pos-pista .objetivo { width: 0; height: 20px; border-left: 2px dashed var(--color-texto); }
.cm-pos-pista .yo { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-superficie); background: var(--color-acento); box-shadow: var(--sombra-xs); }
.cm-pos-pista .yo.est-mal, .cm-pos-ley i.yo.est-mal { background: var(--color-peligro); }
.cm-pos-pista .yo.est-aviso, .cm-pos-ley i.yo.est-aviso { background: var(--color-aviso); }
.cm-pos-pista .yo.est-bien, .cm-pos-ley i.yo.est-bien { background: var(--color-exito); }
.cm-pos-ley { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-2xs); color: var(--color-texto-2); }
.cm-pos-ley span { display: inline-flex; align-items: center; gap: 4px; }
.cm-pos-ley i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.cm-pos-ley i.banda { background: var(--color-borde-fuerte); }
.cm-pos-ley i.mediana { width: 2px; height: 12px; background: var(--color-texto-2); }
.cm-pos-ley i.objetivo { width: 0; height: 12px; border-left: 2px dashed var(--color-texto); }
.cm-pos-ley i.yo { width: 10px; height: 10px; border-radius: 50%; background: var(--color-acento); }
.cm-pos-ley .mejor { color: var(--color-texto-suave); font-style: italic; }

/* Aviso de versión nueva (js/actualizar.js) */
#ovi-actualizar {
    position: fixed; left: 50%; bottom: var(--esp-4); transform: translateX(-50%); z-index: 3000;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-2) var(--esp-3);
    max-width: calc(100vw - 32px); padding: var(--esp-2) var(--esp-4); border-radius: var(--radio-md);
    background: var(--color-texto); color: var(--color-superficie); box-shadow: var(--sombra-md, 0 4px 16px rgba(0,0,0,.2));
    font-size: var(--fs-sm);
}
#ovi-actualizar button {
    padding: 4px 14px; border: 0; border-radius: var(--radio-full); background: var(--color-acento); color: var(--color-superficie);
    font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}

/* Configuración → Accesos a otras webs */
.stg-accesos-btn { display: inline-block; margin-top: 6px; padding: 6px 14px; border: 1px solid var(--color-acento); border-radius: var(--radio-full);
    background: var(--color-acento-suave); color: var(--color-acento-texto); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.stg-accesos-btn:hover { background: var(--color-acento); color: #fff; }

/* Configuración compacta (02/11/2026): usuario en una línea, filas «etiqueta · controles», pie con versiones */
.stg-yo { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-4); border-bottom: 1px solid var(--color-borde); }
.stg-yo .stg-avatar { width: 34px; height: 34px; flex: none; font-size: var(--fs-md); }
.stg-yo-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.stg-yo-datos b { font-size: var(--fs-sm); color: var(--color-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-yo-datos span { font-size: var(--fs-2xs); color: var(--color-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-link { flex: none; padding: 0; border: 0; background: none; color: var(--color-acento-texto); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; text-decoration: underline; }
.stg-fila { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-4); border-bottom: 1px solid var(--color-borde); }
.stg-fila-t { flex: none; width: 82px; font-size: var(--fs-xs); font-weight: 700; color: var(--color-texto-2); }
.stg-fila-c { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.stg-fila .stg-sigla-btn { padding: 3px 12px; font-size: var(--fs-sm); }
.stg-fila .stg-sigla-select, .stg-fila .stg-manual-input { width: 90px; min-height: 28px; font-size: var(--fs-sm); }
.stg-fila .stg-accesos-btn { margin: 0; padding: 3px 12px; font-size: var(--fs-xs); }
.stg-seg { display: inline-flex; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-full); overflow: hidden; }
.stg-seg button { padding: 3px 12px; border: 0; background: var(--color-superficie); color: var(--color-texto-2); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.stg-seg button.on { background: var(--color-acento); color: #fff; }
.stg-seg button:disabled { opacity: .5; cursor: default; }
.stg-seg .stg-lector-beta { font-size: var(--fs-2xs); }
.stg-nota { margin: 0; padding: 4px var(--esp-4) var(--esp-2) calc(var(--esp-4) + 82px + var(--esp-3)); font-size: var(--fs-2xs); color: var(--color-texto-suave); }
.stg-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: var(--esp-2) var(--esp-4); border-top: 1px solid var(--color-borde); }
.stg-versiones { font-size: var(--fs-2xs); color: var(--color-texto-suave); font-family: var(--fuente-mono); }
.stg-pie .stg-logout-btn { width: auto; margin: 0; padding: 4px 12px; font-size: var(--fs-xs); }
@media (max-width: 640px) {
    .stg-nota { padding-left: var(--esp-4); }
    .stg-yo { flex-wrap: wrap; }
}
.stg-fila .stg-manual-btn { min-height: 28px; padding: 0 12px; font-size: var(--fs-xs); }

/* Etiqueta del lateral algo larga («C.Lechero»): en una sola línea sin ensanchar el menú */
.snav-item .sn-ajustado { white-space: nowrap; letter-spacing: -.3px; }

/* Gestión del lector (3.1.56): de arriba abajo, estado → borrar → programa y copias → avanzado */
.glg { display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-3); }
.glg-esp { flex: 1; }
.glg-estado-card { gap: var(--esp-3); }
.glg-est-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: var(--fs-lg); color: var(--color-texto); }
.glg-est-cab .glg-suave { font-size: var(--fs-sm); }
.glg-est-datos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5, 28px); padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); }
.glg-dato { display: flex; flex-direction: column; gap: 4px; }
.glg-dato b { font-size: var(--fs-md); color: var(--color-texto); }
.glg-est-botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
.glg-bloque { display: flex; flex-direction: column; gap: var(--esp-2); }
.glg-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.glg-acc {
    display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4);
    border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); box-shadow: var(--sombra-xs);
}
.glg-acc p { flex: 1; margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--color-texto-2); }
.glg-acc > button { align-self: flex-start; }
.glg-acc-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.glg-acc-cab b { font-size: var(--fs-md); color: var(--color-texto); }
.glg-acc-ico { font-size: var(--fs-lg); line-height: 1; }
.glg-acc-prin { border-top: 3px solid var(--color-acento); }
.glg-acc-peligro { border-top: 3px solid var(--color-peligro); }
.glg-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--esp-3); align-items: stretch; }
.glg-card-cab { display: flex; align-items: center; gap: var(--esp-2); }
.glg-copias, .glg-avanzado { grid-column: auto; }
.glg-actual { margin-left: 6px; padding: 0 7px; border-radius: var(--radio-full); background: var(--color-acento); color: var(--color-superficie); font-size: var(--fs-2xs); font-style: normal; font-weight: 700; vertical-align: middle; }
@media (max-width: 900px) {
    .glg-acciones, .glg-dos { grid-template-columns: 1fr; }
    .glg-est-botones { margin-left: 0; }
}

/* Lector → Configuración: pasos para instalar los drivers */
.glg-pasos { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--color-texto); }

/* Accesos al asistente desde las pantallas (ficha, Mi Ganadería, lotes, descargas) */
.asis-enlace { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid var(--color-acento-texto); border-radius: var(--radio-full);
    color: var(--color-acento-texto); background: var(--color-acento-suave); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.asis-enlace:hover { box-shadow: var(--sombra-xs); }
/* Ficha: «Dar de baja» a la izquierda del asistente (13/11/2026) */
.ficha-baja-btn { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--color-peligro); border-radius: var(--radio-full);
    background: var(--color-superficie); color: var(--color-peligro); font: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ficha-baja-btn:hover, .ficha-baja-btn.act { background: var(--color-peligro-fondo); }
/* Detalle de la descarga: buscar animal, bolo o cordero y abrir el cordero (13/11/2026) */
.gld-buscar { min-height: 30px; width: 220px; max-width: 100%; padding: 2px 10px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-full);
    background: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: var(--fs-sm); }
.gld-buscar-n { font-size: var(--fs-xs); color: var(--color-texto-2); white-space: nowrap; }
a.gld-cord { text-decoration: none; cursor: pointer; }
a.gld-cord:hover { outline: 1px solid currentColor; }
.asis-hoy { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--esp-3); align-items: center;
    margin: 0 0 var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--color-acento-texto); border-radius: var(--radio-md);
    background: var(--color-acento-suave); color: var(--color-texto); text-decoration: none; }
.asis-hoy > span { grid-row: 1 / 3; font-size: 1.6rem; line-height: 1; }
.asis-hoy b { font-size: var(--fs-md); color: var(--color-acento-texto); }
.asis-hoy small { font-size: var(--fs-xs); color: var(--color-texto-2); }
.asis-hoy:hover { box-shadow: var(--sombra-xs); }
.gld-menu-a { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; border-radius: var(--radio-xs); text-decoration: none; color: inherit; }
.gld-menu-a:hover { background: var(--color-superficie-2); }

/* Barra de abajo del móvil: el asistente en el centro, destacado */
@media (max-width: 767px) {
    .mob-nav-item.mob-nav-asis .mob-nav-icon { width: 52px; height: 52px; margin-top: -22px; border-radius: 50%;
        background: var(--marca-oro-500, #c9a227); color: #1b2a1f; box-shadow: 0 4px 14px rgba(0,0,0,.35); border: 3px solid rgba(13,21,37,.97); }
    .mob-nav-item.mob-nav-asis .mob-nav-icon svg { width: 26px; height: 26px; }
    .mob-nav-item.mob-nav-asis { color: #fff; }
    .mob-nav-item.mob-nav-asis::before { display: none; }
}

/* Enlace a la ficha del animal (crotal en tablas) */
.ovi-link { color: var(--color-acento-texto); font-weight: 600; text-decoration: none; }
.ovi-link:hover { text-decoration: underline; }

/* Personal de AGRAMA (7/11/2026, docs/usuarios-y-licencias.md → «Espacios»): interruptor Mi trabajo | Ganadería; la ganadería
   se elige a la derecha (AbrirGanaderia) */
.tb-modo { display: inline-flex; padding: 3px; margin-right: var(--esp-3); border-radius: var(--radio-full); background: var(--color-superficie-2);
    border: 1px solid var(--color-borde); }
.tb-modo button { padding: 3px 12px; border: 0; border-radius: var(--radio-full); background: none; color: var(--color-texto-2);
    font-family: var(--fuente-ui); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer; }
.tb-modo button:hover { color: var(--color-texto); }
.tb-modo button.activo { background: var(--marca-pizarra-600); color: var(--color-superficie); }
.tb-title:has(.tb-modo) { flex-direction: row; align-items: center; }
@media (max-width: 767px) {
    .tb-modo { margin-right: 4px; }
    .tb-modo button { padding: 2px 8px; font-size: var(--fs-xs); }
    .tb-gan-nombre { display: none; }
}

/* Botón de los lotes en la barra (abre Shared/PanelLotes.razor; 8/11/2026, docs/lotes.md → «Lotes integrados») */
.tb-lotes { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid var(--color-borde);
    border-radius: var(--radio-full); background: var(--color-superficie); color: var(--color-texto-2); font-family: var(--fuente-ui);
    font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.tb-lotes:hover { border-color: var(--color-acento); color: var(--color-texto); }
.tb-lotes svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .tb-lotes { height: 28px; padding: 0 7px; } }

/* Consanguinidad en la ficha (Mejora #15): aviso por encima del 15 %, resaltada por encima del 25 % */
.ficha-consang.alta { padding: 0 6px; border-radius: var(--radio-sm); background: var(--color-aviso-fondo); color: var(--color-aviso); }
.ficha-consang.muy-alta { padding: 0 6px; border-radius: var(--radio-sm); background: var(--calidad-malo-fondo); color: var(--calidad-malo); }

/* Poca altura (portátil de 1366×768, tablet apaisada): el logo se queda dentro de la barra y el lateral gana 45 px */
@media (min-width: 768px) and (max-height: 820px) {
    .tb-brand { height: 48px; padding-top: 5px; }
    .tb-logo-box:has(.version-badge) img { height: 32px; }
    .tb-marca, .tb-logo-box .version-badge--compacta { display: none; }
    .app-sidenav { padding-top: 6px; }
}

/* Buzón en la barra (14/11/2026): sobre con el círculo de no leídos y desplegable con los últimos archivos */
.tb-buzon-caja { position: relative; display: inline-flex; }
.tb-buzon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-borde);
    border-radius: var(--radio-full); background: var(--color-superficie); color: var(--color-texto-2); cursor: pointer; }
.tb-buzon:hover, .tb-buzon.abierto { border-color: var(--color-acento); color: var(--color-texto); }
.tb-buzon svg { width: 16px; height: 16px; }
.tb-buzon-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radio-full); border: 2px solid var(--color-superficie);
    background: var(--color-peligro); color: #fff; font-size: var(--fs-2xs); font-weight: 800; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.tb-buzon-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 401; width: 320px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; padding: var(--esp-2);
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-md); box-shadow: var(--sombra-lg); animation: fadeIn .12s ease; }
.tb-buzon-cab { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 8px 8px; border-bottom: 1px solid var(--color-borde); margin-bottom: 4px; font-size: var(--fs-sm); }
.tb-buzon-cab span { font-size: var(--fs-xs); color: var(--color-peligro); font-weight: 700; }
.tb-buzon-vacio { padding: 10px 8px; font-size: var(--fs-sm); color: var(--color-texto-suave); }
.tb-buzon-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 0; border-radius: var(--radio-sm); background: transparent; text-align: left; cursor: pointer; font-family: var(--fuente-ui); color: var(--color-texto); min-width: 0; }
.tb-buzon-item:hover:not(:disabled) { background: var(--color-superficie-2); }
.tb-buzon-nom { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-buzon-item.nuevo .tb-buzon-nom { font-weight: 700; }
.tb-buzon-item.nuevo .tb-buzon-nom::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-acento); margin-right: 6px; vertical-align: 1px; }
.tb-buzon-det { font-size: var(--fs-2xs); color: var(--color-texto-suave); }
.tb-buzon-todo { margin-top: 4px; padding: 7px 8px; border-top: 1px solid var(--color-borde); font-size: var(--fs-xs); font-weight: 700; color: var(--color-acento-texto); text-decoration: none; }
.tb-buzon-todo:hover { text-decoration: underline; }
@media (max-width: 767px) { .tb-buzon { width: 28px; height: 28px; } .tb-buzon-menu { position: fixed; top: 60px; right: 12px; } }
/* Menú del móvil: la explicación de cada pantalla, debajo del nombre (lo que daba el menú antiguo) */
.mp-subdesc { flex-basis: 100%; font-size: var(--fs-2xs); font-weight: 400; color: var(--color-texto-suave); line-height: 1.3; white-space: normal; }
.mp-subdesc:empty { display: none; }

/* ================================================================
   INFORMES DEL LIBRO GENEALÓGICO (docs/informes-lg.md): machos, hembras y catálogo de sementales, sin Report Server.
   Un documento A4 vertical en pantalla (.ilg), que es lo que se imprime (exportar.js → imprimirElemento): cabecera con
   la identidad de AGRAMA y los datos del informe, resumen arriba, tablas con líneas finas y cifras tabulares, insignias
   para las categorías, indicadores de umbral (punto verde/rojo) y leyenda al pie. Estilo de informe profesional:
   poco color, y solo con significado.
   ================================================================ */
.ilg-pantalla { display: flex; flex-direction: column; gap: var(--esp-3); container-type: inline-size; }
.ilg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); max-width: 1180px; margin: 0 auto; width: 100%; }
.ilg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.ilg-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radio-full);
    border: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto-suave);
    font-family: var(--fuente-ui); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; opacity: .55;
}
.ilg-chip b { font-weight: 800; }
.ilg-chip.on { opacity: 1; color: var(--color-texto); border-color: var(--color-borde-fuerte); }
.ilg-chip.g3.on { color: var(--calidad-top); background: var(--calidad-top-fondo); border-color: var(--calidad-top-barra); }
.ilg-chip.g2.on { color: var(--marca-azul-700); background: var(--c-teal-glow); border-color: var(--marca-azul-500); }
.ilg-chip.g-2.on { color: var(--calidad-bajo); background: var(--calidad-bajo-fondo); border-color: var(--calidad-bajo-barra); }
.ilg-chip.g-3.on { color: var(--calidad-malo); background: var(--calidad-malo-fondo); border-color: var(--calidad-malo-barra); }
.ilg-chip.oro.on { color: var(--marca-oro-600); background: color-mix(in srgb, var(--marca-oro-500) 14%, #fff); border-color: var(--marca-oro-500); }
.ilg-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-texto-2); margin-left: 6px; }
.ilg-buscar { width: 250px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--color-borde); border-radius: var(--radio-md); font-family: var(--fuente-ui); font-size: var(--fs-sm); }
.ilg-btn { padding: 6px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio-md); background: var(--color-superficie); font-family: var(--fuente-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--color-texto); cursor: pointer; }
.ilg-btn:hover { background: var(--color-superficie-2); }
.ilg-estado, .ilg-error { padding: var(--esp-4); color: var(--color-texto-suave); font-size: var(--fs-sm); }
.ilg-error { color: var(--calidad-malo); }

/* ---- el documento ---- */
.ilg {
    --ilg-tinta: var(--marca-marino-800); --ilg-acento: var(--marca-azul-600); --ilg-linea: var(--gris-200); --ilg-linea-2: var(--gris-300);
    position: relative; background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde); border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm); padding: 28px 32px 22px; max-width: 1180px; width: 100%; margin: 0 auto; font-family: var(--fuente-ui); font-size: var(--fs-sm); line-height: 1.35;
}
.ilg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--radio-md) var(--radio-md) 0 0; background: linear-gradient(90deg, var(--marca-marino-800), var(--marca-azul-600) 60%, var(--marca-oro-500)); }

/* cabecera */
.ilg-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 26px; align-items: center; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1.5px solid var(--ilg-tinta); }
.ilg-logo img { display: block; height: 64px; width: auto; }
.ilg-cab-txt { min-width: 0; }
.ilg-asoc { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--gris-500); font-weight: 700; }
.ilg-asoc b { color: var(--ilg-tinta); }
.ilg-tit { margin: 4px 0 3px; font-size: var(--fs-xl); font-weight: 800; color: var(--ilg-tinta); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.ilg-sub { font-size: var(--fs-md); color: var(--color-texto-2); font-weight: 600; }
.ilg-meta { display: grid; grid-template-columns: auto auto; gap: 3px 14px; margin: 0; font-size: var(--fs-xs); align-self: center; }
.ilg-meta dt { color: var(--gris-500); text-transform: uppercase; font-size: 10px; letter-spacing: .07em; font-weight: 700; align-self: center; }
.ilg-meta dd { margin: 0; font-weight: 700; color: var(--color-texto); font-variant-numeric: tabular-nums; text-align: right; }
.ilg-meta dd.mono { font-family: var(--fuente-mono); }

/* apartados */
.ilg-grupo { margin-top: 22px; }
.ilg-grupo-tit {
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 4px solid var(--ilg-g, var(--gris-400));
    font-size: var(--fs-md); font-weight: 800; color: var(--ilg-tinta); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2;
}
.ilg-grupo-tit .ilg-n { font-size: var(--fs-2xs); font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: var(--radio-full); background: var(--ilg-g-fondo, var(--color-superficie-2)); color: var(--ilg-g-texto, var(--color-texto-2)); letter-spacing: 0; }
.ilg-grupo-tit small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--gris-500); font-size: var(--fs-xs); }
.ilg-grupo.g3 { --ilg-g: var(--calidad-top-barra); --ilg-g-fondo: var(--calidad-top-fondo); --ilg-g-texto: var(--calidad-top); }
.ilg-grupo.g2 { --ilg-g: var(--marca-azul-500); --ilg-g-fondo: var(--c-teal-glow); --ilg-g-texto: var(--marca-azul-700); }
.ilg-grupo.g-2 { --ilg-g: var(--calidad-bajo-barra); --ilg-g-fondo: var(--calidad-bajo-fondo); --ilg-g-texto: var(--calidad-bajo); }
.ilg-grupo.g-3 { --ilg-g: var(--calidad-malo-barra); --ilg-g-fondo: var(--calidad-malo-fondo); --ilg-g-texto: var(--calidad-malo); }
.ilg-grupo.oro { --ilg-g: var(--marca-oro-500); --ilg-g-fondo: color-mix(in srgb, var(--marca-oro-500) 14%, #fff); --ilg-g-texto: var(--marca-oro-600); }

/* tablas */
.ilg-tabla-wrap { overflow-x: auto; }
.ilg-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.ilg-tabla thead th { padding: 6px 6px; text-align: right; font-size: 10.5px; font-weight: 700; color: var(--gris-600); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--ilg-tinta); white-space: nowrap; vertical-align: bottom; line-height: 1.15; }
.ilg-tabla thead tr.ilg-bloques th { font-size: 9.5px; color: var(--gris-500); letter-spacing: .1em; border-bottom: 1px solid var(--ilg-linea-2); padding: 0 6px 3px; text-align: left; }
.ilg-tabla thead tr.ilg-bloques th.vacio { border-bottom: 0; }
.ilg-tabla td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--ilg-linea); white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle; line-height: 1.25; }
.ilg-tabla th.l, .ilg-tabla td.l { text-align: left; }
.ilg-tabla th.c, .ilg-tabla td.c { text-align: center; }
.ilg-tabla th.sep, .ilg-tabla td.sep { border-left: 1px solid var(--ilg-linea-2); padding-left: 10px; }
.ilg-tabla tbody tr:nth-child(even) td { background: var(--gris-50); }
.ilg-tabla tbody tr { cursor: pointer; }
.ilg-tabla tbody tr:hover td { background: var(--color-acento-suave); }
.ilg-tabla td.ilg-clave { font-weight: 700; color: var(--ilg-tinta); font-size: var(--fs-sm); }
.ilg-tabla td.ilg-clave small, .ilg-dim { display: block; font-size: 10px; font-weight: 500; color: var(--gris-500); line-height: 1.1; }
.ilg-iden b { display: block; font-family: var(--fuente-mono); font-weight: 700; font-size: var(--fs-xs); color: var(--ilg-tinta); line-height: 1.15; }
.ilg-iden small { display: block; font-family: var(--fuente-mono); font-size: 9.5px; color: var(--gris-500); line-height: 1.1; }
.ilg-ia { color: var(--marca-azul-600); font-weight: 800; margin-right: 2px; }
.ilg-gen { font-family: var(--fuente-mono); font-size: 10.5px; color: var(--color-texto-2); }
.ilg-gen i { font-style: normal; display: inline-block; min-width: 18px; margin-left: 3px; padding: 0 3px; border-radius: 3px; background: var(--gris-150); color: var(--gris-600); font-size: 9.5px; text-align: center; }
.ilg-aprox { color: var(--gris-500); font-style: italic; }
.ilg-arbol { font-size: 10.5px; line-height: 1.25; }
.ilg-arbol span { display: block; font-family: var(--fuente-mono); color: var(--color-texto-2); }
.ilg-arbol span::before { content: "P"; display: inline-block; min-width: 9px; margin-right: 3px; color: var(--gris-400); font-family: var(--fuente-ui); font-size: .85em; font-weight: 700; }
.ilg-arbol span + span::before { content: "M"; }
.ilg-arbol em { font-style: normal; color: var(--gris-500); margin-left: 4px; }

/* indicadores de umbral: punto verde/rojo delante del valor */
.ilg-tabla td.ilg-ok, .ilg-tabla td.ilg-mal, .ilg-tabla td.ilg-aviso, .ilg-ok, .ilg-mal, .ilg-aviso { font-weight: 700; }
td.ilg-ok, .ilg-ok { color: var(--calidad-top); } td.ilg-mal, .ilg-mal { color: var(--calidad-malo); } td.ilg-aviso, .ilg-aviso { color: var(--calidad-bajo); }
.ilg-tabla td.ilg-ok::before, .ilg-tabla td.ilg-mal::before, .ilg-tabla td.ilg-aviso::before, .ilg-punto::before {
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: currentColor; opacity: .85;
}
.ilg-tabla tbody tr td.ilg-mal { background: var(--calidad-malo-fondo); }
.ilg-tabla td.ilg-peor { color: var(--calidad-malo); font-weight: 700; } .ilg-tabla td.ilg-peor::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: currentColor; opacity: .85; }
.ilg-morf i { font-style: normal; font-weight: 800; margin-left: 3px; font-size: 10px; }
.ilg-morf.ok i { color: var(--calidad-top-barra); } .ilg-morf.mal i { color: var(--calidad-malo-barra); } .ilg-morf.sin i { color: var(--calidad-bajo-barra); }

/* insignias (observación, categorías) */
.ilg-badge { display: inline-block; padding: 2px 7px; border-radius: var(--radio-full); font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; line-height: 1.3; vertical-align: middle; }
.ilg-badge.elite { background: var(--marca-oro-500); color: var(--marca-marino-900); }
.ilg-badge.evs { background: var(--calidad-top-barra); color: #fff; }
.ilg-badge.sub { background: var(--marca-azul-600); color: #fff; }
.ilg-badge.test { background: var(--gris-200); color: var(--gris-700); }
.ilg-badge.elite-o { border-color: var(--marca-oro-600); color: var(--marca-marino-900); background: color-mix(in srgb, var(--marca-oro-500) 45%, #fff); }
.ilg-badge.elite::before, .ilg-badge.elite-o::before { content: "★ "; font-size: .9em; }
.ilg-badge.evs-o { border-color: var(--calidad-top-barra); color: var(--calidad-top); background: var(--calidad-top-fondo); }
.ilg-badge.sub-o { border-color: var(--marca-azul-500); color: var(--marca-azul-700); background: var(--c-teal-glow); }
.ilg-badge.frio { border-color: var(--gris-300); color: var(--gris-600); background: var(--gris-100); }
.ilg-badge.neutro { border-color: var(--gris-200); color: var(--gris-600); background: #fff; }
.ilg-badge.aviso { border-color: var(--calidad-bajo-barra); color: var(--calidad-bajo); background: var(--calidad-bajo-fondo); }
.ilg-sincal { display: inline-block; margin-left: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--calidad-bajo-fondo); color: var(--calidad-bajo); border: 1px solid var(--calidad-bajo-barra); font-size: 10px; font-weight: 800; line-height: 12px; text-align: center; vertical-align: middle; }
.ilg-congelado td { color: var(--gris-500); }
.ilg-congelado td.ilg-iden b { color: var(--gris-600); }

/* resumen (KPIs) y conexión */
.ilg-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ilg-kpi { padding: 10px 12px; border: 1px solid var(--ilg-linea); border-radius: var(--radio-sm); background: #fff; min-width: 0; }
.ilg-kpi b { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--ilg-tinta); line-height: 1.05; letter-spacing: -.02em; }
.ilg-kpi b small { font-size: var(--fs-xs); color: var(--gris-500); font-weight: 600; letter-spacing: 0; }
.ilg-kpi span { display: block; font-size: 10px; color: var(--gris-600); margin-top: 5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; line-height: 1.2; }
.ilg-kpi.destacado { border-color: var(--marca-azul-500); background: var(--c-teal-glow); }
.ilg-barra { height: 5px; background: var(--gris-150); border-radius: var(--radio-full); margin-top: 8px; overflow: hidden; }
.ilg-barra i { display: block; height: 100%; width: var(--w, 0%); background: var(--ilg-barra-c, var(--calidad-top-barra)); border-radius: var(--radio-full); }
.ilg-conexion { grid-column: 1 / -1; padding: 12px 16px; border: 1px solid var(--ilg-linea); border-radius: var(--radio-sm); display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; align-items: center; }
.ilg-con-val { font-size: var(--fs-2xl); font-weight: 800; color: var(--ilg-tinta); line-height: 1; letter-spacing: -.02em; }
.ilg-con-val small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-600); font-weight: 700; margin-bottom: 4px; }
.ilg-con-txt { display: inline-block; margin-top: 6px; font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: var(--radio-full); }
.ilg-conexion.n1 .ilg-con-txt { background: var(--calidad-malo-fondo); color: var(--calidad-malo); }
.ilg-conexion.n2 .ilg-con-txt { background: var(--calidad-bajo-fondo); color: var(--calidad-bajo); }
.ilg-conexion.n3 .ilg-con-txt { background: var(--gris-150); color: var(--gris-700); }
.ilg-conexion.n4 .ilg-con-txt { background: var(--calidad-bueno-fondo); color: var(--calidad-bueno); }
.ilg-conexion.n5 .ilg-con-txt { background: var(--calidad-top-fondo); color: var(--calidad-top); }
.ilg-gauge { position: relative; padding-top: 16px; min-width: 0; }
.ilg-gauge-tramos, .ilg-gauge-etq { display: grid; grid-template-columns: 5fr 11fr 10fr 14fr 20fr; gap: 2px; }
.ilg-gauge-tramos { height: 10px; }
.ilg-gauge-tramos i { border-radius: 3px; background: var(--gris-200); opacity: .55; }
.ilg-gauge-tramos i.t1 { background: var(--calidad-malo-barra); } .ilg-gauge-tramos i.t2 { background: var(--calidad-bajo-barra); } .ilg-gauge-tramos i.t3 { background: var(--gris-400); }
.ilg-gauge-tramos i.t4 { background: var(--calidad-bueno-barra); } .ilg-gauge-tramos i.t5 { background: var(--calidad-top-barra); }
.ilg-gauge-tramos i.on { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor; }
.ilg-gauge-marca { position: absolute; top: 0; height: 28px; left: var(--pos, 0%); width: 0; border-left: 2px solid var(--ilg-tinta); transform: translateX(-1px); }
.ilg-gauge-marca::before { content: ""; position: absolute; top: -2px; left: -5px; border: 5px solid transparent; border-top: 6px solid var(--ilg-tinta); border-bottom: 0; }
.ilg-gauge-etq { margin-top: 5px; font-size: 9.5px; color: var(--gris-500); line-height: 1.2; }
.ilg-gauge-etq span { padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ilg-gauge-etq b { display: block; color: var(--gris-600); font-weight: 700; }
.ilg-con-exp { grid-column: 1 / -1; font-size: 10.5px; color: var(--gris-600); }
.ilg-categorias { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 10px 14px; border: 1px dashed var(--ilg-linea-2); border-radius: var(--radio-sm); font-size: var(--fs-2xs); color: var(--color-texto-2); }

/* catálogo: tarjetas de los mejorantes */
.ilg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ilg-card { position: relative; border: 1px solid var(--ilg-linea-2); border-top: 3px solid var(--gris-300); border-radius: var(--radio-sm); padding: 12px 14px 10px; display: grid; gap: 8px; cursor: pointer; background: #fff; break-inside: avoid; min-width: 0; }
.ilg-card:hover { border-color: var(--marca-azul-500); box-shadow: var(--sombra-sm); }
.ilg-card.elite { border-top-color: var(--marca-oro-500); }
.ilg-card.mej { border-top-color: var(--calidad-top-barra); }
.ilg-card.cong { border-top-color: var(--gris-300); background: var(--gris-50); }
.ilg-card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ilg-card-cab .ilg-iden b { font-size: var(--fs-md); }
.ilg-card-cab .ilg-iden span { display: block; font-size: var(--fs-xs); color: var(--color-texto-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ilg-card-vg { text-align: right; flex-shrink: 0; }
.ilg-card-vg b { display: block; font-size: 28px; font-weight: 800; color: var(--ilg-tinta); line-height: 1; letter-spacing: -.02em; }
.ilg-card-vg small { display: block; font-size: 9.5px; color: var(--gris-500); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 2px; }
.ilg-card-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; font-size: var(--fs-xs); }
.ilg-card-datos div { min-width: 0; }
.ilg-card-datos span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-500); font-weight: 700; }
.ilg-card-datos b { font-weight: 700; color: var(--color-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ilg-card-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; color: var(--gris-600); border-top: 1px solid var(--ilg-linea); padding-top: 7px; }
.ilg-card-pie .ilg-arbol { display: flex; gap: 10px; } .ilg-card-pie .ilg-arbol span { display: inline; }

/* pie y leyenda */
.ilg-pie { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--ilg-linea-2); display: grid; gap: 6px; }
.ilg-total { font-size: var(--fs-sm); font-weight: 600; color: var(--color-texto); }
.ilg-leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 22px; font-size: 10.5px; color: var(--gris-600); line-height: 1.4; }
.ilg-leyenda div b { color: var(--color-texto); }
.ilg-leyenda .ilg-badge { font-size: 9px; padding: 1px 6px; }
.ilg-fuente { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 10px; color: var(--gris-500); margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--ilg-linea); }

/* glosario del pie: tres columnas de término → explicación */
.ilg-glosas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px 28px; margin-top: 4px; }
.ilg-glosa { min-width: 0; }
.ilg-glosa-cap { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-500); font-weight: 700; margin-bottom: 5px; padding-bottom: 3px; border-bottom: 1px solid var(--ilg-linea); }
.ilg-glosa dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--gris-600); align-items: baseline; }
.ilg-glosa dt { font-weight: 700; color: var(--color-texto); white-space: nowrap; }
.ilg-glosa dd { margin: 0; }
.ilg-glosa dd i { font-style: normal; font-weight: 700; color: var(--color-texto); }
.ilg-glosa .ilg-punto { display: inline-block; } .ilg-glosa .ilg-punto::before { margin-right: 3px; }
.ilg-glosa .ilg-punto + .ilg-punto { margin-left: 2px; }
.ilg-glosa-insignias dt { font-weight: 400; } .ilg-glosa .ilg-badge { font-size: 9.5px; padding: 1px 7px; }

@container (max-width: 760px) {
    .ilg { padding: 16px 14px; }
    .ilg-cab { grid-template-columns: auto 1fr; } .ilg-meta { grid-column: 1 / -1; grid-template-columns: auto 1fr; } .ilg-meta dd { text-align: left; }
    .ilg-logo img { height: 48px; } .ilg-tit { font-size: var(--fs-lg); }
    .ilg-conexion { grid-template-columns: 1fr; }
    .ilg-card-datos { grid-template-columns: repeat(2, 1fr); }
}
@media print {
    @page { size: A4 portrait; margin: 10mm 9mm 12mm; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ilg-pantalla .ilg-toolbar { display: none; }
    .ilg { border: 0; box-shadow: none; padding: 0; max-width: none; border-radius: 0; font-size: 9px; }
    .ilg::before { display: none; }
    .ilg-cab { gap: 8px 16px; padding-bottom: 8px; margin-bottom: 10px; } .ilg-logo img { height: 46px; } .ilg-tit { font-size: 17px; } .ilg-sub { font-size: 11px; } .ilg-meta { font-size: 9px; } .ilg-meta dt { font-size: 8px; }
    .ilg-grupo { margin-top: 12px; } .ilg-grupo-tit { font-size: 11px; margin-bottom: 5px; break-after: avoid; } .ilg-grupo-tit small { font-size: 9px; }
    .ilg-tabla { font-size: 8px; } .ilg-tabla thead th { font-size: 7.5px; padding: 3px 3px; letter-spacing: .02em; } .ilg-tabla thead tr.ilg-bloques th { font-size: 7px; padding: 0 3px 2px; }
    .ilg-tabla td { padding: 2.5px 3px; } .ilg-tabla th.sep, .ilg-tabla td.sep { padding-left: 6px; }
    .ilg-tabla td.ilg-clave { font-size: 8.5px; } .ilg-tabla td.ilg-clave small, .ilg-dim { font-size: 7px; }
    .ilg-iden b { font-size: 8.5px; } .ilg-iden small { font-size: 6.5px; } .ilg-gen { font-size: 7.5px; } .ilg-gen i { font-size: 7px; min-width: 14px; } .ilg-arbol { font-size: 7.5px; }
    .ilg-badge { font-size: 7.5px; padding: 1px 5px; } .ilg-sincal { width: 11px; height: 11px; font-size: 8px; line-height: 9px; }
    .ilg-tabla td.ilg-ok::before, .ilg-tabla td.ilg-mal::before, .ilg-tabla td.ilg-aviso::before { width: 5px; height: 5px; margin-right: 3px; }
    .ilg-tabla thead { display: table-header-group; } .ilg-tabla tbody tr { break-inside: avoid; } .ilg-tabla tbody tr:hover td { background: inherit; }
    .ilg-resumen { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; } .ilg-kpi { padding: 6px 8px; } .ilg-kpi b { font-size: 16px; } .ilg-kpi b small { font-size: 9px; } .ilg-kpi span { font-size: 7.5px; }
    .ilg-conexion { padding: 8px 10px; } .ilg-con-val { font-size: 20px; } .ilg-gauge-etq { font-size: 7px; } .ilg-con-exp, .ilg-categorias { font-size: 8px; }
    .ilg-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; } .ilg-card { padding: 7px 9px 6px; gap: 5px; } .ilg-card-vg b { font-size: 20px; } .ilg-card-datos { font-size: 8px; } .ilg-card-datos span { font-size: 6.5px; } .ilg-card-pie { font-size: 7.5px; }
    .ilg-glosas { grid-template-columns: repeat(3, 1fr); gap: 6px 14px; } .ilg-glosa-cap { font-size: 7px; margin-bottom: 3px; } .ilg-glosa dl { font-size: 7.5px; gap: 2px 6px; } .ilg-glosa .ilg-badge { font-size: 7px; padding: 0 5px; }
    .ilg-pie { margin-top: 12px; } .ilg-total { font-size: 9px; } .ilg-leyenda { font-size: 7.5px; gap: 2px 14px; } .ilg-fuente { font-size: 7px; }
}