@charset "UTF-8";
/* © MSD Marcelo Soler Diseño — revisión de fluidez, septiembre 2026 */
/* Mantener la geometría de lectura estable, incluso durante scroll táctil. */
section.naipe,
section.naipe.entrando,
section.naipe.ha-entrado,
section.naipe.is-pinned {
    position: relative;
    top: 0;
    bottom: auto;
    opacity: var(--naipe-opacidad, 1);
    transform: none;
    animation: none;
    transition: none;
    will-change: auto;
    contain: none;
    background-color: var(--gris-100, #fff);
}
section.naipe > h2 {
    /* Icono y texto en una sola fila, sin aumentar la altura del título. */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    text-wrap: nowrap;
    padding-block: .25em;
	padding-bottom: .125em;
    position: sticky;
    top: calc(var(--dif-arriba) - var(--tam-03));
    z-index: 2;
    margin-top: 0;
    background: var(--gris-100, #fff) !important;
    box-shadow: none;
    transition: box-shadow 180ms ease, top 240ms cubic-bezier(.22, 1, .36, 1);
}
section.naipe > h2::before { flex-shrink: 0; }
section.naipe > h2.is-stuck { box-shadow: var(--somb-1); }
@media (max-width: 768px) {
    section.naipe > h2 { top: calc(var(--cabeza) - var(--tam-18)); }
}
@media (prefers-reduced-motion: reduce) {
    section.naipe > h2 { transition: none; }
}
@media print {
    section.naipe > h2 { position: static; box-shadow: none; }
}

/* Texto al 75%: el fondo y el espacio reservado del título no se encogen. */
section.naipe > h2 > .naipe-titulo-texto {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: scale(1);
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
section.naipe > h2.is-stuck > .naipe-titulo-texto {
    transform: scale(.75);
}
@media (prefers-reduced-motion: reduce) {
    section.naipe > h2 > .naipe-titulo-texto { transition: none; }
}
@media print {
    section.naipe > h2 > .naipe-titulo-texto { transform: none !important; }
}

/* La opacidad sigue directamente el scroll, sin una transición que se retrase. */
@media print, (prefers-reduced-motion: reduce) {
    section.naipe { opacity: 1 !important; }
}

section.naipe > h2::before {
    scale: 1;
    transform-origin: center;
    transition: scale 220ms cubic-bezier(.22, 1, .36, 1);
}

section.naipe > h2.is-stuck::before {
    scale: .75;
}

@media (prefers-reduced-motion: reduce) {
    section.naipe > h2::before {
        transition: none;
    }
}

@media print {
    section.naipe > h2::before {
        scale: 1 !important;
    }
}
/* Actualizar sticky sin animar los cambios debidos al ancho. */
html.is-resizing section.naipe > h2,
html.is-resizing section.naipe > h2::before,
html.is-resizing section.naipe > h2 > .naipe-titulo-texto {
    transition: none !important;
}

/* ========== Ampliación de estilos ========== */

/* Grilla de fases del TPU: estilos exclusivos de esta sección. */
#ruta-produccion .ruta-fase h4 {
    padding: var(--tam-06) var(--tam-12);
    background: var(--gris-97);
    border-top: var(--bor2) var(--gris-80);
    border-bottom: var(--bor2) var(--gris-80);
    cursor: pointer;
}

#ruta-produccion .ruta-fase h4:hover {
    border-color: var(--gris-67);
}

/* Cada fase ocupa una fila completa */
#ruta-produccion .ruta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tam-12, 1rem);
    margin: var(--tam-12, 1rem) 0;
    padding-bottom: var(--tam-12);
    border-bottom: var(--bor2) var(--gris-67);}

/* Los tres pares se distribuyen según el espacio disponible */
#ruta-produccion .ruta-fase dl {
    font-size: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(33%, 21rem), 1fr));
    gap: var(--tam-12, 1rem);
    margin: 0;
}

.ruta-fase > dl > div:first-child > dd {
    color: var(--gris-40);
    font-weight: 600;
    font-style: oblique;
}

#ruta-produccion .ruta-fase dl > div {
    min-width: 0;
}

.ruta-fase > dl > div + div {
    border-left: var(--bor1) var(--gris-80);
    padding-left: var(--tam-18);
}

#ruta-produccion .ruta-fase dt {
    margin: 0 0 .25em;
    padding-bottom: .25em;
    font-weight: 700;
}

#ruta-produccion .ruta-fase dd {
    margin: 0;
}

@media (max-width: 909px) {
    #ruta-produccion .ruta-fase > dl {
        grid-template-columns: 1fr;
    }

    .ruta-fase > dl > div + div {
        border-left: 0;
        padding-left: 0;
        border-top: var(--bor1) var(--gris-80);
        padding-top: var(--tam-18);
    }
}

@media (max-width: 480px) {
    #ruta-produccion .ruta-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    #ruta-produccion .ruta-grid {
        display: block;
    }

    #ruta-produccion .ruta-fase {
        margin-bottom: 12pt;
        page-break-inside: avoid;
        break-inside: avoid;
        background: transparent;
    }
}