@import url("fonts-sqBbcSG.css");

/* Tokens de diseño compartidos. */

:root {
    --bg: #FCFCFB;
    --raised: #FFFFFF;
    --sunk: #F4F2EE;
    --line: #E3E0DA;
    --line-soft: #EFEDE8;

    --ink: #3A3B38;
    --ink-2: #5F605A;
    --ink-3: #8A8B84;

    --brand: #E4452B;
    --brand-wash: #FDF0ED;
    /* El rojo corporativo sobre fondo claro se queda en 3.6:1 como texto.
       Esta variante oscurecida es la que se usa cuando el rojo tiene que
       leerse, no solo señalar: pantallas mate y con polvo en planta. */
    --brand-ink: #B7331C;

    --ok: #2C6E49;
    --ok-wash: #EAF3ED;
    --wait: #8F6104;
    --wait-wash: #FBF3E2;
    --warn: #B22F19;
    --warn-wash: #FCEDE9;
    --info: #2E5F8A;
    --info-wash: #EAF2F8;

    /* Listas diarias del pedido (apartado 7.1): PRIME, Express, Carga
       METHOD, Producción CS + Recogida — un color de apoyo por lista,
       nunca el único portador de información (el código va siempre dentro). */
    --lista-prime: #7A3FA6;
    --lista-prime-wash: #F1EAF7;
    --lista-express: #B2562F;
    --lista-express-wash: #FBEEE8;
    --lista-method: #1D5FA6;
    --lista-method-wash: #E7F0FA;
    --lista-cs: #5C6B57;
    --lista-cs-wash: #EEF1EC;

    --shadow: 0 1px 2px rgba(58, 59, 56, .06), 0 8px 24px -12px rgba(58, 59, 56, .18);

    --ff-d: Archivo, "Helvetica Neue", Arial, system-ui, sans-serif;
    --ff-b: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-m: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --tap: 112px;
}

/* Tema oscuro. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1A1B18;
        --raised: #232420;
        --sunk: #14150F;
        --line: #34352C;
        --line-soft: #2A2B24;

        --ink: #ECEBE6;
        --ink-2: #B8B7AE;
        --ink-3: #82817A;

        --brand-wash: #3A231D;
        --brand-ink: #FF8E78;
        --ok: #7DCEA0;
        --ok-wash: #1B2C22;
        --wait: #F2CA70;
        --wait-wash: #332B14;
        --warn: #FF9A89;
        --warn-wash: #3A211D;
        --info: #91C8F0;
        --info-wash: #16283A;

        --lista-prime: #CB9FE8;
        --lista-prime-wash: #2B1F3A;
        --lista-express: #F0A87D;
        --lista-express-wash: #3A2419;
        --lista-method: #8FC3F0;
        --lista-method-wash: #182B3E;
        --lista-cs: #ADBAA6;
        --lista-cs-wash: #232821;

        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    --bg: #1A1B18;
    --raised: #232420;
    --sunk: #14150F;
    --line: #34352C;
    --line-soft: #2A2B24;

    --ink: #ECEBE6;
    --ink-2: #B8B7AE;
    --ink-3: #82817A;

    --brand-wash: #3A231D;
    --brand-ink: #FF8E78;
    --ok: #7DCEA0;
    --ok-wash: #1B2C22;
    --wait: #F2CA70;
    --wait-wash: #332B14;
    --warn: #FF9A89;
    --warn-wash: #3A211D;
    --info: #91C8F0;
    --info-wash: #16283A;

    --lista-prime: #CB9FE8;
    --lista-prime-wash: #2B1F3A;
    --lista-express: #F0A87D;
    --lista-express-wash: #3A2419;
    --lista-method: #8FC3F0;
    --lista-method-wash: #182B3E;
    --lista-cs: #ADBAA6;
    --lista-cs-wash: #232821;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .55);
}

/* ---------- reset y primitivas ---------- */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Pie pegado al borde inferior. */
body {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ff-b);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.barra-superior,
.pie-pagina {
    flex: 0 0 auto;
}

h1, h2, h3, h4 {
    font-family: var(--ff-d);
    margin: 0;
    letter-spacing: -.015em;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: var(--brand);
}

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

.mono {
    font-family: var(--ff-m);
    font-variant-numeric: tabular-nums;
}

/* Barra superior de páginas Twig. */

.barra-superior {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 60px;
    padding: 0 28px;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow-x: clip;
    overflow-y: visible;
}

.barra-superior__izquierda {
    display: flex;
    align-items: center;
    gap: 12px;
}

.barra-superior__marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
}

.barra-superior__logo {
    width: 34px;
    height: 34px;
}

.barra-superior__avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sunk);
    object-fit: cover;
}

.barra-superior__derecha {
    display: flex;
    align-items: center;
    gap: 14px;
}

.barra-superior__diagnostico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--ink-2);
    cursor: pointer;
}

.barra-superior__diagnostico:hover {
    background: var(--sunk);
    color: var(--ink);
}

.pie-pagina {
    padding: 20px 28px;
    /* Color pedido expresamente para el pie — distinto del --ink
       corporativo (#3A3B38), aunque muy cercano. */
    background: #373835;
    /* Blanco fijo, no --raised: ese es un token de superficie y en modo
       oscuro pasa a #232420, dejando el texto del pie a 1.32:1 sobre su
       propio fondo — ilegible. */
    color: #fff;
    text-align: center;
    font-size: .85rem;
}

.pie-pagina p {
    margin: 0;
}

.user-menu {
    position: relative;
    z-index: 1;
}

.menu-usuario__disparador {
    display: inline-flex;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.menu-usuario__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 2000;
}

.menu-usuario__cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 10px;
}

.menu-usuario__avatar {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sunk);
    object-fit: cover;
    flex-shrink: 0;
}

.menu-usuario__nombre {
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.menu-usuario__separador {
    height: 1px;
    margin: 4px 6px;
    background: var(--line);
}

.menu-usuario__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: .9rem;
    color: var(--ink);
    text-decoration: none;
}

.menu-usuario__item:hover {
    background: var(--sunk);
}

.menu-usuario__item--peligro:hover {
    background: var(--warn-wash);
    color: var(--warn);
}

.menu-usuario__cerrar-sesion {
    width: 100%;
    border: 0;
    text-align: start;
}

/* Tooltip de botones y enlaces con solo icono. */
[data-tooltip] {
    position: relative;
    --tooltip-tx: -50%;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    right: auto;
    max-inline-size: min(220px, calc(100vw - 24px));
    transform: translate(var(--tooltip-tx), 4px);
    background: var(--ink);
    color: var(--raised);
    font-family: var(--ff-b);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease .15s, transform .12s ease .15s;
    z-index: 2000;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(var(--tooltip-tx), 0);
}

[data-tooltip][aria-expanded="true"]::after {
    display: none;
}

[data-tooltip-abajo]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translate(var(--tooltip-tx), -4px);
}

[data-tooltip-abajo]:hover::after,
[data-tooltip-abajo]:focus-visible::after {
    transform: translate(var(--tooltip-tx), 0);
}

[data-tooltip-izquierda] {
    --tooltip-tx: 0%;
}

[data-tooltip-izquierda]::after {
    left: auto;
    right: 0;
}

.content {
    flex: 1 0 auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 28px 60px;
}

.lead {
    font-size: 15.5px;
    color: var(--ink-2);
    max-width: 60ch;
    margin-top: 12px;
}

/* ---------- portada de oficina ---------- */

.home-office {
    max-width: 920px;
    padding-top: 28px;
}

.home-office__header {
    max-width: 620px;
    margin-bottom: 32px;
}

.home-office__eyebrow {
    margin: 0 0 7px;
    color: var(--brand-ink);
    font-family: var(--ff-d);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-office__header h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.1;
}

.home-office__intro {
    max-width: 54ch;
    margin: 12px 0 0;
    color: var(--ink-2);
    font-size: 1.05rem;
}

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

.home-office__action {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    min-height: 176px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--raised);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.home-office__action:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 4px rgba(58, 59, 56, .08), 0 16px 32px -18px rgba(58, 59, 56, .36);
    transform: translateY(-2px);
}

.home-office__action:focus-visible {
    outline-offset: 3px;
}

.home-office__action-icon,
.home-office__plant-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--brand-ink);
}

.home-office__action-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--brand-wash);
}

.home-office__action-icon svg,
.home-office__plant-icon svg {
    width: 24px;
    height: 24px;
}

.home-office__action-content {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.home-office__action-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.home-office__action-title {
    font-family: var(--ff-d);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.home-office__action-description {
    color: var(--ink-2);
    font-size: .94rem;
    line-height: 1.45;
}

.home-office__status {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--wait-wash);
    color: var(--wait);
    font-family: var(--ff-d);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-office__action-arrow {
    align-self: end;
    color: var(--brand-ink);
    font-family: var(--ff-d);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.home-office__plant {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 24px;
    padding: 17px 18px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--sunk);
}

.home-office__plant-icon {
    width: 34px;
    height: 34px;
    color: var(--ink-2);
}

.home-office__plant > div {
    min-width: 0;
}

.home-office__plant strong {
    display: block;
    font-family: var(--ff-d);
    font-size: .9rem;
}

.home-office__plant p {
    margin: 2px 0 0;
    color: var(--ink-2);
    font-size: .85rem;
}

.home-office__plant .boton {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .home-office {
        padding-top: 8px;
    }

    .home-office__actions {
        grid-template-columns: 1fr;
    }

    .home-office__action {
        min-height: 0;
        padding: 20px;
    }

    .home-office__plant {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .home-office__plant .boton {
        width: 100%;
        margin-left: 0;
    }
}

/* ---------- acceso (login) ---------- */

.pagina-acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

.pagina-acceso::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--brand-wash), transparent 60%);
    z-index: -1;
}

.tarjeta-acceso {
    width: 100%;
    max-width: 360px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 32px;
}

.tarjeta-acceso .marca {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 8px;
}

.tarjeta-acceso .marca i {
    width: 30px;
    height: 7px;
    background: var(--brand);
    border-radius: 1px;
    display: block;
}

.tarjeta-acceso .marca span {
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.tarjeta-acceso h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 24px;
}

.formulario {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-grupo label {
    font-family: var(--ff-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.campo-recordar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -6px;
    font-size: .85rem;
    color: var(--ink-2);
    cursor: pointer;
}

.field {
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-family: var(--ff-b);
    font-size: 1rem;
    color: var(--ink);
    background: var(--raised);
}

.field:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-wash);
}

.aviso {
    padding: 11px 14px;
    border-radius: 7px;
    font-size: .9rem;
    margin: 0 0 20px;
}

.aviso--error {
    background: var(--warn-wash);
    color: var(--warn);
}

/* ---------- cuenta (autoservicio) ---------- */
.cuenta-pagina {
    display: grid;
    place-items: center;
    min-block-size: calc(100svh - 120px);
    padding: clamp(28px, 5vw, 56px) 24px;
    background:
        radial-gradient(circle at 14% 12%, var(--brand-wash), transparent 30%),
        var(--bg);
}

.cuenta {
    width: min(100%, 980px);
}

.cuenta__cabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: clamp(22px, 4vw, 32px);
    background: linear-gradient(112deg, var(--brand-wash), var(--raised) 62%);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow);
}

.cuenta__icono,
.cuenta-seccion__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 11px;
}

.cuenta__icono {
    width: 48px;
    height: 48px;
    background: var(--brand);
    color: var(--raised);
    box-shadow: 0 8px 18px -10px var(--brand);
}

.cuenta__eyebrow {
    margin: 0 0 2px;
    color: var(--brand);
    font-family: var(--ff-m);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.cuenta__cabecera h1 {
    font-size: clamp(1.45rem, 3vw, 1.85rem);
}

.cuenta__descripcion {
    margin: 4px 0 0;
    color: var(--ink-2);
    font-size: .92rem;
}

.cuenta__usuario {
    max-inline-size: 210px;
    overflow: hidden;
    color: var(--ink-2);
    font-family: var(--ff-m);
    font-size: .78rem;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuenta__aviso {
    margin: 16px 0 0;
}

.cuenta__ajustes {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
    padding: 18px;
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow);
}

.cuenta-section {
    position: relative;
    min-width: 0;
    padding: 24px;
    overflow: hidden;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.cuenta-section::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand);
    content: "";
}

.cuenta-seccion__cabecera {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 24px;
}

.cuenta-seccion__icono {
    width: 38px;
    height: 38px;
}

.cuenta-seccion__icono--foto {
    background: var(--brand-wash);
    color: var(--brand);
}

.cuenta-seccion__icono--tema {
    background: var(--info-wash);
    color: var(--info);
}

.cuenta-seccion__cabecera h2 {
    font-size: 1.04rem;
}

.cuenta-seccion__cabecera p {
    margin: 2px 0 0;
    color: var(--ink-2);
    font-size: .82rem;
}

.cuenta-perfil {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cuenta-perfil__avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.cuenta-perfil__avatar {
    display: block;
    width: 148px;
    height: 148px;
    object-fit: cover;
    background: var(--sunk);
    border: 5px solid var(--raised);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--line), var(--shadow);
}

.cuenta-perfil__indicador {
    position: absolute;
    right: 2px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--brand);
    border: 3px solid var(--raised);
    border-radius: 50%;
    color: var(--raised);
}

.cuenta-perfil__acciones {
    display: grid;
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
}

.cuenta-subida {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background: var(--sunk);
    border: 1px dashed var(--ink-3);
    border-radius: 9px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease;
}

.cuenta-subida:hover {
    background: var(--brand-wash);
    border-color: var(--brand);
}

.cuenta-subida:has(input:focus-visible),
.cuenta-quitar:has(input:focus-visible) {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.cuenta-subida__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    background: var(--raised);
    border-radius: 8px;
    color: var(--brand);
}

.cuenta-subida strong,
.cuenta-subida small {
    display: block;
}

.cuenta-subida strong {
    font-family: var(--ff-d);
    font-size: .9rem;
}

.cuenta-subida small {
    overflow: hidden;
    margin-top: 1px;
    color: var(--ink-2);
    font-size: .74rem;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.cuenta-subida input,
.cuenta-quitar input,
.cuenta-tema-opcion input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.cuenta-quitar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--ink-2);
    cursor: pointer;
    font-size: .82rem;
}

.cuenta-quitar__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-2);
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.cuenta-quitar:has(input:checked) {
    color: var(--warn);
}

.cuenta-quitar:has(input:checked) .cuenta-quitar__control {
    background: var(--warn-wash);
    border-color: var(--warn);
    color: var(--warn);
}

.cuenta-section--perfil:has(.cuenta-quitar input:checked) .cuenta-perfil__avatar {
    opacity: .35;
}

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

.cuenta-tema-opcion {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.cuenta-tema-opcion__contenido {
    display: grid;
    gap: 10px;
    min-height: 146px;
    padding: 10px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.cuenta-tema-opcion:hover .cuenta-tema-opcion__contenido {
    border-color: var(--ink-3);
}

.cuenta-tema-opcion input:focus-visible + .cuenta-tema-opcion__contenido {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.cuenta-tema-opcion input:checked + .cuenta-tema-opcion__contenido {
    background: var(--brand-wash);
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.cuenta-tema-opcion__contenido strong,
.cuenta-tema-opcion__contenido small {
    display: block;
}

.cuenta-tema-opcion__contenido strong {
    font-family: var(--ff-d);
    font-size: .84rem;
}

.cuenta-tema-opcion__contenido small {
    margin-top: 2px;
    color: var(--ink-2);
    font-size: .71rem;
    line-height: 1.25;
}

.cuenta-tema-opcion__previsualizacion {
    display: grid;
    grid-template-columns: 26% 1fr;
    grid-template-rows: 12px 1fr;
    gap: 4px;
    height: 68px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.cuenta-tema-opcion__previsualizacion i {
    display: block;
    border-radius: 2px;
}

.cuenta-tema-opcion__previsualizacion i:first-child {
    grid-column: 1 / -1;
}

.cuenta-tema-opcion__previsualizacion--claro {
    background: #fcfcfb;
}

.cuenta-tema-opcion__previsualizacion--claro i {
    background: #e3e0da;
}

.cuenta-tema-opcion__previsualizacion--claro i:first-child {
    background: #e4452b;
}

.cuenta-tema-opcion__previsualizacion--oscuro {
    background: #1a1b18;
}

.cuenta-tema-opcion__previsualizacion--oscuro i {
    background: #34352c;
}

.cuenta-tema-opcion__previsualizacion--oscuro i:first-child {
    background: #e4452b;
}

.cuenta-tema-opcion__previsualizacion--auto {
    background: linear-gradient(90deg, #fcfcfb 50%, #1a1b18 50%);
}

.cuenta-tema-opcion__previsualizacion--auto i {
    background: linear-gradient(90deg, #e3e0da 50%, #34352c 50%);
}

.cuenta-tema-opcion__previsualizacion--auto i:first-child {
    background: #e4452b;
}

.cuenta-tema__estado {
    margin: 18px 0 0;
    color: var(--ink-2);
    font-size: .8rem;
}

.cuenta__pie {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 0;
}

.cuenta__volver {
    color: var(--ink-2);
}

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

    .cuenta-section {
        padding: 20px;
    }
}

@media (max-width: 540px) {
    .cuenta-pagina {
        place-items: start center;
        padding: 20px 14px 32px;
    }

    .cuenta__cabecera {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 20px;
    }

    .cuenta__usuario {
        grid-column: 2;
        text-align: start;
    }

    .cuenta__ajustes {
        padding: 12px;
    }

    .cuenta-perfil {
        align-items: flex-start;
        flex-direction: column;
    }

    .cuenta-perfil__avatar {
        width: 132px;
        height: 132px;
    }

    .cuenta-perfil__acciones {
        width: 100%;
    }

    .cuenta-temas {
        grid-template-columns: 1fr;
    }

    .cuenta-tema-opcion__contenido {
        grid-template-columns: 110px minmax(0, 1fr);
        align-items: center;
        min-height: 0;
    }

    .cuenta-tema-opcion__previsualizacion {
        grid-row: 1;
    }

    .cuenta__pie {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cuenta__pie .boton {
        width: 100%;
    }
}

/* ---------- botones ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 7px;
    font-family: var(--ff-d);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .13s ease, border-color .13s ease;
}

.boton--primario {
    background: var(--brand);
    color: var(--raised);
}

.boton--primario:hover {
    filter: brightness(.94);
}

.boton--secundario {
    background: var(--raised);
    color: var(--ink);
    border: 1px solid var(--line);
}

.boton--secundario:hover {
    border-color: var(--ink-3);
}

.boton--ancho {
    width: 100%;
}

/* Turbo inyecta su propio <style> con esta clase en cada navegación, por
   eso el !important: si no, gana el suyo por ir después en el DOM. */
.turbo-progress-bar {
    background: var(--brand) !important;
}

/* ---------- modal de diagnóstico ---------- */

.modal-diagnostico {
    inline-size: min(1100px, calc(100vw - 32px));
    block-size: min(720px, calc(100vh - 64px));
    max-inline-size: none;
    max-block-size: none;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--raised);
    color: var(--ink);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}

.modal-diagnostico::backdrop {
    background: rgba(24, 26, 23, .58);
}

.modal-diagnostico__contenido {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    padding: 24px 28px;
}

.modal-diagnostico__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 16px;
}

.modal-diagnostico__cabecera h2 {
    margin: 0;
    font-size: 1.25rem;
}

.modal-diagnostico__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--ink-2);
    cursor: pointer;
}

.modal-diagnostico__cerrar:hover {
    background: var(--sunk);
    color: var(--ink);
}

.modal-diagnostico__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 14px;
}

.modal-diagnostico__filtro-texto,
.modal-diagnostico__filtros select {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-family: var(--ff-b);
    font-size: .85rem;
    background: var(--raised);
    color: var(--ink);
}

.modal-diagnostico__filtro-texto {
    flex: 1 1 220px;
}

.modal-diagnostico__filtros select {
    flex: 0 1 180px;
}

.modal-diagnostico__tabla-envoltorio {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.modal-diagnostico__tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.modal-diagnostico__tabla thead th {
    position: sticky;
    top: 0;
    background: var(--sunk);
    padding: 8px 10px;
    text-align: left;
    font-family: var(--ff-d);
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}

.modal-diagnostico__tabla td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}

.modal-diagnostico__fecha,
.modal-diagnostico__categoria {
    font-family: var(--ff-m);
    white-space: nowrap;
    color: var(--ink-2);
}

.modal-diagnostico__mensaje {
    font-family: var(--ff-m);
    word-break: break-word;
}

.modal-diagnostico__estado {
    text-align: center;
    padding: 20px;
    color: var(--ink-3);
}

.modal-diagnostico__nivel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .7rem;
    white-space: nowrap;
}

.modal-diagnostico__nivel--grave {
    background: var(--warn-wash);
    color: var(--warn);
}

.modal-diagnostico__nivel--aviso {
    background: var(--wait-wash);
    color: var(--wait);
}

.modal-diagnostico__nivel--info {
    background: var(--info-wash);
    color: var(--info);
}

.modal-diagnostico__nivel--debug {
    background: var(--sunk);
    color: var(--ink-2);
}

/* ---------- pantalla del operario ---------- */
/* Layout de planta a pantalla completa. Ancla body al viewport en vez de
   fiarse solo de overflow:hidden — con overflow:auto solo en
   .operario__contenido, sin esto la página entera se puede seguir
   desplazando (a mano en desktop, a tirón en pantallas táctiles), dando
   un doble scroll confuso: el de la página además del de la cola. */
body:has(.operario) {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.operario {
    display: flex;
    flex-direction: column;
    block-size: 100vh;
    block-size: 100dvh;
    overflow: hidden;
}

/* La toolbar de Symfony ya es fija. Su separador no debe ocupar espacio en
   planta: la barra se muestra encima del footer, sin crear otro scroll. */
body:has(.operario--debug) .sf-toolbar-clearer {
    display: none;
}

.operario .barra-superior {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 20px;
}

.operario .barra-superior__marca {
    font-size: .9rem;
}

.operario .barra-superior__logo {
    width: 24px;
    height: 24px;
}

.operario .barra-superior__avatar {
    width: 22px;
    height: 22px;
}

.operario .barra-superior__diagnostico {
    width: 28px;
    height: 28px;
}

.operario > .pie-pagina {
    flex: 0 0 auto;
}

/* Envuelve a propósito: sin wrap, en una tablet estrecha «Otras tareas» y
   «Escanear QR» se salían del ancho y, como .operario recorta el desbordado,
   no había forma de llegar a ellos — fichar una tarea indirecta se volvía
   imposible en esa pantalla. */
.operario-barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 10px 20px;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
}

.operario-barra__izquierda,
.operario-barra__derecha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.operario-barra__seccion {
    margin: 0;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 1.65rem;
    color: var(--ink);
}

/* Botones táctiles de operario: navegación y herramientas comparten la
   misma pieza visual. El estado activo o deshabilitado cambia el significado,
   nunca el contorno ni el tamaño. */
.operario-barra__boton {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    inline-size: 132px;
    min-inline-size: var(--tap);
    min-block-size: 100px;
    padding: 9px 14px;
    background: var(--raised);
    border: 2px solid var(--line);
    border-radius: 14px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.operario-barra__boton:hover:not(:disabled):not(.operario-barra__boton--activo) {
    background: var(--sunk);
    border-color: var(--ink-3);
    color: var(--ink);
}

.operario-barra__boton--activo {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.operario-barra__boton:disabled {
    background: var(--raised);
    border-color: var(--line);
    color: var(--ink-3);
    cursor: not-allowed;
}

.operario__contenido {
    flex: 1 1 auto;
    min-block-size: 0;
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.operario-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-inline-size: 480px;
    padding: 24px;
    color: var(--ink-2);
    text-align: center;
    margin: auto;
}

.operario-vacio__titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}

.operario-vacio__ayuda {
    margin: 0;
    font-size: .95rem;
    color: var(--ink-2);
}

/* ---------- modal de otras tareas (operario) ---------- */
.tareas-indirectas {
    padding: 0;
    border: none;
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-inline-size: 1080px;
    max-block-size: calc(100dvh - 32px);
    inline-size: min(96vw, 1080px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.tareas-indirectas::backdrop {
    background: rgba(58, 59, 56, .45);
}

.tareas-indirectas__contenido {
    display: flex;
    flex-direction: column;
}

.tareas-indirectas__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.tareas-indirectas__cabecera h2 {
    margin: 0;
    font-family: var(--ff-d);
    font-size: 1.1rem;
}

.tareas-indirectas__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--ink-2);
    cursor: pointer;
}

.tareas-indirectas__cerrar:hover {
    background: var(--sunk);
    color: var(--ink);
}

.tareas-indirectas__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 20px;
    overflow: visible;
}

.tareas-indirectas__lista form {
    min-inline-size: 0;
}

.tareas-indirectas__form {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
}

.tareas-indirectas__form label {
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
}

.tareas-indirectas__form label span {
    color: var(--ink-2);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 400;
}

.tareas-indirectas__form textarea {
    inline-size: 100%;
    resize: vertical;
    padding: 10px 12px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
}

.tareas-indirectas__form textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.tareas-indirectas__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.tareas-indirectas__operarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    border: none;
}

.tareas-indirectas__operarios legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
}

.tareas-indirectas__operarios label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    min-block-size: var(--tap);
    padding: 14px;
    background: var(--sunk);
    border: 2px solid transparent;
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.tareas-indirectas__operarios input {
    position: absolute;
    opacity: 0;
}

.tareas-indirectas__operarios label:has(input:checked) {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand);
}

.tareas-indirectas__tarea {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap);
    padding: 14px;
    background: var(--sunk);
    border: 2px solid transparent;
    border-radius: 14px;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    text-align: center;
    font-size: 1.1rem;
    cursor: pointer;
}

.tareas-indirectas__tarea:hover,
.tareas-indirectas__tarea:has(input:checked) {
    border-color: var(--brand);
    color: var(--brand);
}

.tareas-indirectas__tarea:has(input:checked) {
    background: var(--brand-wash);
}

.tareas-indirectas__tarea input {
    position: absolute;
    opacity: 0;
}

.tareas-indirectas__iniciar {
    min-block-size: var(--tap);
    padding: 14px;
    background: var(--ok);
    border-radius: 14px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.tareas-indirectas__iniciar:hover {
    filter: brightness(.92);
}

.tareas-indirectas__iniciar:disabled {
    background: var(--sunk);
    color: var(--ink-3);
    cursor: not-allowed;
    filter: none;
}

.tareas-indirectas__vacio {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 0;
    color: var(--ink-2);
    text-align: center;
}

.tareas-indirectas__activa-etiqueta {
    margin: 0;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .9rem;
    font-weight: 700;
}

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

.operario-vacio--aviso {
    color: var(--warn);
}

.operario-vacio--aviso .operario-vacio__titulo {
    color: var(--warn);
}

/* Cola de trabajo — misma estructura que el prototipo de planta: lista
   densa con divisor, no tarjetas; lo activo se agrupa por operario arriba
   del todo (color + icono + texto siempre, regla nº7). */
.queue {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    inline-size: 100%;
    padding: 8px 0 16px;
    overflow-y: visible;
    /* En fábrica hay pantallas de muchos tamaños y el ancho útil no es el
       del viewport (la barra lateral, el zoom del kiosco...). Las filas se
       miden contra este contenedor, no contra la ventana. */
    container-type: inline-size;
    container-name: queue;
}

.queue-frame {
    display: block;
    align-self: stretch;
    inline-size: 100%;
    min-block-size: 0;
}

.operator-queue-live {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    inline-size: 100%;
    min-block-size: 0;
}

.operator-queue {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    inline-size: 100%;
    min-block-size: 0;
}

.operator-queue__active-indirect-tasks {
    margin: 16px 28px 0;
    background: var(--info-wash);
    border: 1px solid var(--info);
    border-radius: 12px;
    box-shadow: var(--shadow);
    block-size: auto;
    max-block-size: none;
    overflow: visible;
}

.operator-queue__active-indirect-tasks-list {
    display: flex;
    flex-direction: column;
    block-size: auto;
    max-block-size: none;
    overflow: visible;
}

.operator-queue__active-indirect-task {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    block-size: auto;
    max-block-size: none;
    min-block-size: var(--tap);
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--info) 35%, var(--line));
    overflow: visible;
}

.operator-queue__active-indirect-task:last-child {
    border-bottom: none;
}

.operator-queue__active-indirect-task p,
.operator-queue__active-indirect-task-info > span {
    margin: 0;
}

.operator-queue__active-indirect-task-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 42px;
    block-size: 42px;
    background: var(--raised);
    border: 1px solid var(--info);
    border-radius: 10px;
    color: var(--info);
}

.operator-queue__active-indirect-task-info {
    flex: 1 1 260px;
    min-inline-size: 0;
}

.operator-queue__active-indirect-task p {
    margin-top: 1px;
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1.15rem;
}

.operator-queue__active-indirect-task-kind {
    display: block !important;
    margin: 0 !important;
    color: var(--info) !important;
    font-family: var(--ff-d);
    font-size: .72rem !important;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.operator-queue__active-indirect-task-info > span {
    display: inline-block;
    margin-top: 4px;
    color: var(--ink-2);
    font-size: .9rem;
}

.operator-queue__active-indirect-task small {
    display: block;
    max-inline-size: 760px;
    margin-top: 6px;
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.35;
    white-space: pre-line;
}

.operator-queue__active-indirect-task-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    margin-inline-start: auto;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 620px) {
    .operator-queue__active-indirect-task {
        padding: 14px;
    }

    .operator-queue__active-indirect-task-actions {
        inline-size: 100%;
        margin-inline-start: 0;
    }

    .operator-queue__active-indirect-tasks {
        margin-inline: 12px;
    }
}

.operator-queue__active-indirect-task button,
.operator-queue__active-indirect-task-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 36px;
    padding: 7px 12px;
    border-radius: 7px;
    font-family: var(--ff-d);
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.operator-queue__active-indirect-task button {
    cursor: pointer;
}

.operator-queue__active-indirect-task-pause {
    background: var(--raised);
    border: 2px solid var(--info);
    color: var(--info);
}

/* Reanudar en verde, distinto de pausar: son acciones contrarias y se
   pulsan con prisa. */
.operator-queue__active-indirect-task-resume {
    background: var(--ok);
    border: 2px solid var(--ok);
    color: #fff;
}

.operator-queue__active-indirect-task-stop {
    background: var(--warn);
    color: var(--raised);
}

.operator-queue__active-indirect-task-status {
    display: table !important;
    width: fit-content;
    padding: 4px 10px;
    background: var(--wait-wash);
    border-radius: 5px;
    color: var(--wait) !important;
    font-family: var(--ff-d);
    font-size: .78rem !important;
    font-weight: 800;
}

.operator-queue__undo-indirect-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 28px 0;
    padding: 10px 14px;
    background: var(--info-wash);
    border: 1px solid var(--info);
    border-radius: 10px;
    color: var(--ink);
}

.operator-queue__undo-indirect-task p {
    margin: 0;
}

.operator-queue__undo-indirect-task button {
    min-block-size: 36px;
    padding: 7px 12px;
    background: var(--raised);
    border: 2px solid var(--info);
    border-radius: 7px;
    color: var(--info);
    font-family: var(--ff-d);
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
}

.queue-batch-start {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 12px 28px 0;
    padding: 14px 18px;
    background: var(--ok-wash);
    border: 1px solid var(--ok);
    border-radius: 12px;
}

/* display:flex de arriba gana por encima del estilo por defecto de
   [hidden] del navegador — sin esto, el atributo no oculta nada. */
.queue-batch-start[hidden] {
    display: none;
}

.queue-batch-start__copy {
    display: grid;
    gap: 2px;
    margin-inline-end: auto;
}

.queue-batch-start__copy strong {
    color: var(--ok);
    font-family: var(--ff-d);
    font-size: 1rem;
}

.queue-batch-start__copy span {
    color: var(--ink-2);
    font-size: .88rem;
}

.queue-batch-start__operator {
    display: grid;
    gap: 4px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.queue-batch-start select,
.cola__inicio-rapido select {
    min-block-size: 42px;
    padding: 8px 10px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
}

.queue-batch-start button,
.cola__inicio-rapido button {
    min-block-size: 56px;
    padding: 14px 20px;
    background: var(--ok);
    border-radius: 8px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}

.queue-batch-start button:disabled {
    background: var(--raised);
    border: 1px solid var(--line);
    color: var(--ink-3);
    cursor: not-allowed;
}

.cola__grupo {
    flex-shrink: 0;
    margin: 10px clamp(14px, 1.6vw, 24px);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.cola__grupo:nth-child(even) {
    background: var(--sunk);
}

.cola__grupo-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: var(--brand-wash);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* El icono va dentro de un span junto al texto: como <svg> es inline, se
   apoyaba en la línea base y quedaba más bajo que el título. */
.cola__grupo-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
}

.cola__grupo-titulo svg {
    flex: 0 0 auto;
}

/* Grupo plegado: el trabajo de un compañero ocupa una línea hasta que se
   abre. El triángulo propio del navegador es diminuto, así que se sustituye
   por un indicador del tamaño del resto de la pantalla. */
.cola__grupo--plegable > summary {
    cursor: pointer;
    list-style: none;
}

.cola__grupo--plegable > summary::-webkit-details-marker {
    display: none;
}

.cola__grupo--plegable > summary::after {
    content: '▾ VER';
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 8px 14px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .04em;
}

.cola__grupo--plegable[open] > summary::after {
    content: '▴ OCULTAR';
}

.cola__grupo--plegable > summary:hover::after {
    border-color: var(--ink-3);
    color: var(--ink);
}

.cola__grupo-cantidad {
    padding: 4px 11px;
    background: var(--raised);
    border-radius: 999px;
    color: var(--ink-2);
    font-family: var(--ff-m);
    font-weight: 600;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: 0;
}

.cola__grupo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Separación amplia a propósito: pausar y finalizar un bloque están
       juntos y uno de los dos es irreversible. Con guantes, 8px entre
       botones de 36px era un error de pulsación esperando a pasar. */
    gap: 16px;
}

.cola__grupo-actions button,
.cola__grupo-actions .cola__grupo-actions-finalizar {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    min-block-size: 64px;
    padding: 12px 18px;
    background: var(--warn);
    border-radius: 7px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

/* Distinto del rojo de FINALIZAR BLOQUE: mismo ámbar que PAUSAR en el
   detalle de una línea suelta, para que sea el mismo lenguaje de color en
   toda la app (regla nº12 — el color nunca informa solo, pero sí ayuda). */
.cola__grupo-actions button.cola__grupo-actions-pausar {
    background: var(--wait);
}

.cola__grupo-actions button.cola__grupo-actions-reanudar {
    background: var(--ok);
}

/* Bloque plegado de «otras tareas» de compañeros. */
.operator-queue__otras-tareas {
    padding: 0;
}

.operator-queue__otras-tareas-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

.operator-queue__otras-tareas-cabecera::-webkit-details-marker {
    display: none;
}

.operator-queue__otras-tareas-titulo {
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: .92rem;
    color: var(--info);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.operator-queue__otras-tareas-cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 28px;
    padding: 3px 9px;
    background: var(--info);
    border-radius: 999px;
    color: #fff;
    font-family: var(--ff-m);
    font-weight: 700;
    font-size: .82rem;
}

.operator-queue__otras-tareas-cabecera::after {
    content: '▾ VER';
    margin-inline-start: auto;
    padding: 8px 14px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: .78rem;
}

.operator-queue__otras-tareas[open] .operator-queue__otras-tareas-cabecera::after {
    content: '▴ OCULTAR';
}

.cola__grupo .cola__fila {
    border-bottom: 1px solid var(--line);
}

.cola__grupo .cola__fila:last-child {
    border-bottom: none;
}

.cola__fila {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px 16px;
    /* La fila es un enlace, no un botón: lo que tiene que cumplir el tamaño
       de la regla nº3 es EMPEZAR, que va aparte. Bajarla de 112 a 76 px es
       lo que quita la mayor parte del scroll de la cola. */
    min-block-size: 80px;
    padding: 11px clamp(14px, 1.6vw, 24px);
    color: inherit;
    border-bottom: 1px solid var(--line);
}

.cola__fila:hover {
    background: var(--sunk);
}

.cola__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    flex: 0 0 auto;
    min-inline-size: 92px;
    font-family: var(--ff-m);
    font-size: clamp(.95rem, .4vw + .8rem, 1.15rem);
    /* --ink-3 dejaba el número de pedido en 3.08:1: es justo el dato que el
       operario compara con el albarán de papel. */
    color: var(--ink-2);
}

.cola__fila-detalle {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 20px;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
}

.cola__selector {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    cursor: pointer;
}

.cola__selector input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.cola__selector span {
    inline-size: 32px;
    block-size: 32px;
    border: 2px solid var(--ink-3);
    border-radius: 6px;
    background: var(--raised);
}

.cola__selector input:checked + span {
    border-color: var(--ok);
    background: var(--ok);
    box-shadow: inset 0 0 0 4px var(--raised);
}

.cola__inicio-rapido {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.cola__inicio-rapido select {
    max-inline-size: 180px;
}

.cola__pedido-num {
    font-variant-numeric: tabular-nums;
}

.cola__pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1.5px solid transparent;
    border-radius: 5px;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Los colores son de la paleta del maestro de estados, no de una lista fija:
   el estado lo da de alta el encargado en /admin/order-status. */
.cola__pill--morado,
.diaria__pill--morado {
    background: var(--lista-prime-wash);
    color: var(--lista-prime);
    border-color: var(--lista-prime);
}

.cola__pill--naranja,
.diaria__pill--naranja {
    background: var(--lista-express-wash);
    color: var(--lista-express);
    border-color: var(--lista-express);
}

.cola__pill--azul,
.diaria__pill--azul {
    background: var(--lista-method-wash);
    color: var(--lista-method);
    border-color: var(--lista-method);
}

.cola__pill--verde,
.diaria__pill--verde {
    background: var(--lista-cs-wash);
    color: var(--lista-cs);
    border-color: var(--lista-cs);
}

.cola__pill--gris,
.diaria__pill--gris {
    background: var(--sunk);
    color: var(--ink-2);
    border-color: var(--line);
}

/* El nombre completo puede ser largo ("Carga METHOD MIERCOLES 23-09-2026"):
   se deja envolver en vez de recortarlo, que la fecha importa. */
.cola__pill {
    white-space: normal;
    /* El nombre del estado viene entero de PrestaShop y puede ser largo
       («Carga METHOD MIERCOLES 23-09-2026»). Donde hay sitio se le da ancho
       para que quepa en una línea: partirlo en tres subía el alto de toda la
       cola. Nunca puede ensanchar la fila, de ahí el min-inline-size. */
    max-inline-size: 34ch;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.cola__info {
    display: flex;
    flex-direction: column;
    /* Cada cosa en su línea: producto, luego atributos y cantidad, luego las
       observaciones. Lo que se recorta para que quepa más en pantalla son
       los espaciados, no la estructura. */
    gap: 7px;
    flex: 1 1 260px;
    min-inline-size: 0;
}

.cola__producto {
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: clamp(1rem, .9vw + .62rem, 1.35rem);
    color: var(--ink);
    line-height: 1.25;
}

.cola__atributos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cola__cantidad {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    background: transparent;
    border: 2px solid var(--brand);
    border-radius: 6px;
    font-family: var(--ff-m);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--brand-ink);
}

/* Cantidad 1: mismo aspecto que un atributo. El rojo llama la atención, y
   llamarla cuando solo hay una unidad es gastarlo para nada. */
.cola__cantidad--una {
    border-color: var(--ink);
    color: var(--ink);
}

.cola__atributo {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    background: transparent;
    border: 2px solid var(--ink);
    border-radius: 6px;
    font-family: var(--ff-m);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}

/* Fondo sólido en el color más alarmante de la paleta: un aviso tiene que
   destacar por encima de todo lo demás en la fila, no pasar desapercibido
   entre el resto de pastillas. */
.cola__avisos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cola__aviso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    background: var(--warn);
    border-radius: 6px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1rem;
}

.cola__encurso,
.cola__pausado {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 5px;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .85rem;
}

.cola__encurso {
    background: var(--wait-wash);
    color: var(--wait);
}

.cola__pausado {
    background: var(--info-wash);
    color: var(--info);
}

/* Acciones de la cuenta general sobre lo que lleva otro. Tamaño de planta
   (se pulsan con guantes) pero sin tapar a EMPEZAR, que es la acción normal
   de la cola. */
.cola__acciones-jefe {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

/* La forma la da la clase base y el color la variante.
   Antes la forma se aplicaba listando las variantes una a una, y REANUDAR se
   quedó fuera de esa lista: en cuanto una fila estaba pausada salía con el
   aspecto por defecto del navegador —25px de alto, sin radio y con el texto
   oscuro sobre el verde— al lado de un TERMINAR normal. Con una clase base,
   añadir una variante nueva ya no puede olvidarse. */
.cola__accion {
    display: inline-flex;
    align-items: center;
    min-block-size: 56px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: .82rem;
    text-decoration: none;
    cursor: pointer;
}

.cola__accion-pausar {
    background: var(--wait);
}

/* Reanudar es «seguir», no «parar»: verde, para no confundirlo con pausar
   cuando se mira de reojo y con prisa. */
.cola__accion-reanudar {
    background: var(--ok);
}

.cola__accion-terminar {
    background: var(--warn);
}

.cola__chevron {
    flex: 0 0 auto;
    margin-inline-start: auto;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 2rem;
    color: var(--ink-3);
}

.cola__fila:hover .cola__chevron {
    color: var(--brand);
}

/* ---- La fila se adapta al ancho real de la cola, no al del viewport ---- */

/* Estrecho: se recortan espaciados y adornos, sin tocar el orden de la
   información. */
/* Sin sitio para una línea larga: la pastilla usa el ancho que haya y
   envuelve, que es preferible a desbordar la fila. */
@container queue (max-width: 900px) {
    .cola__pill {
        max-inline-size: 100%;
    }
}

@container queue (max-width: 620px) {
    .cola__fila {
        gap: 8px 10px;
        padding: 10px 12px;
    }

    .cola__chevron {
        display: none;
    }

    /* El enlace tiene que poder envolver: sin esto, dar el 100 % a una de
       sus partes dejaba la otra a 0 px de ancho y el nombre del producto se
       partía letra a letra en vertical. */
    .cola__fila-detalle {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    /* flex-basis 100 %, no auto: con `0 0 auto` la columna crecía hasta caber
       el nombre del estado entero y se salía de la pantalla. */
    .cola__num {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        min-inline-size: 0;
    }

    .cola__info {
        flex: 1 1 100%;
    }
}

@media (max-width: 760px) {
    .queue-batch-start,
    .cola__grupo {
        margin-inline: 12px;
    }

    .queue-batch-start {
        align-items: stretch;
    }

    .queue-batch-start__copy {
        inline-size: 100%;
    }

    .queue-batch-start__operator,
    .queue-batch-start button {
        flex: 1 1 180px;
    }

    .cola__fila {
        flex-wrap: wrap;
    }

    .cola__fila-detalle {
        gap: 12px;
    }

    .cola__inicio-rapido {
        margin-inline-start: auto;
    }

    .cola__inicio-rapido select,
    .cola__inicio-rapido button {
        flex: 1 1 0;
        max-inline-size: none;
    }

    .cola__grupo-cabecera {
        align-items: flex-start;
        flex-direction: column;
    }

    .cola__grupo-actions {
        justify-content: flex-start;
    }
}

/* Términos destacables de la sección: amarillo de señalización sobre negro,
   que es lo que se ve a dos metros en una pantalla mate y con polvo. El texto
   sigue siendo el que informa (regla nº12); esto solo lo hace saltar a la
   vista al recorrer la lista. */
.destacado {
    padding: 2px 8px;
    margin-inline: 1px;
    border-radius: 5px;
    background: #FFE81A;
    box-shadow: 0 0 0 2px #1B1B18;
    color: #1B1B18;
    font-weight: 900;
    letter-spacing: .02em;
}

/* ---------- croquis del producto a medida ---------- */
.croquis {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-start: 14px;
    padding: 14px 16px;
    background: var(--raised);
    border: 2px solid var(--warn);
    border-radius: 12px;
}

.croquis__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.croquis__titulo {
    margin: 0;
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ink);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Se pulsa con guantes como cualquier acción de planta (regla nº3). */
.croquis__imprimir {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-block-size: 72px;
    padding: 12px 22px;
    background: var(--ink);
    border-radius: 10px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}

.croquis__vista {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: var(--sunk);
    border-radius: 8px;
}

.croquis__imagen {
    max-inline-size: 100%;
    max-block-size: 340px;
    object-fit: contain;
}

.croquis__abrir {
    align-self: flex-start;
    min-block-size: 56px;
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border: 2px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    text-decoration: none;
}

.croquis__documento {
    inline-size: 100%;
    block-size: 340px;
    border: 0;
    background: var(--raised);
}

/* Al imprimir el croquis se deja solo el croquis: el operario quiere el
   dibujo en la mano, no la pantalla entera. */
@media print {
    body.imprimiendo-croquis > *:not(.operario) {
        display: none;
    }

    body.imprimiendo-croquis .operario > *:not(.operario__contenido) {
        display: none;
    }

    body.imprimiendo-croquis .line-detalle-page > *:not(.line-detalle),
    body.imprimiendo-croquis .line-detalle > *:not(.croquis) {
        display: none;
    }

    body.imprimiendo-croquis .croquis {
        border: 0;
        padding: 0;
    }

    body.imprimiendo-croquis .croquis__cabecera {
        display: none;
    }

    body.imprimiendo-croquis .croquis__imagen {
        max-block-size: none;
        inline-size: 100%;
    }
}

/* ---------- revisión antes de terminar (opcional por sección) ---------- */
.revision {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-block-size: 100dvh;
    padding: 24px;
    background: var(--wait-wash);
    color: var(--wait);
    text-align: center;
}

.revision__titulo {
    margin: 0;
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing: .01em;
}

.revision__detalle {
    margin: 0;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
}

.revision__ayuda {
    margin: 0;
    max-inline-size: 30ch;
    color: var(--ink-2);
    font-size: 1rem;
}

.revision__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    margin-block-start: 10px;
    inline-size: min(100%, 720px);
}

.revision__acciones form {
    display: flex;
    flex: 1 1 260px;
}

/* Regla nº3: son las dos únicas acciones de la pantalla y se pulsan con
   guantes, así que van a tamaño completo. */
.revision__boton {
    display: inline-flex;
    flex: 1 1 260px;
    align-items: center;
    justify-content: center;
    min-block-size: 112px;
    padding: 16px 24px;
    border-radius: 14px;
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    text-decoration: none;
    cursor: pointer;
}

.revision__boton--si {
    inline-size: 100%;
    background: var(--ok);
    color: #fff;
}

.revision__boton--no {
    background: var(--raised);
    border: 2px solid var(--line);
    color: var(--ink);
}

/* ---------- rechazos entre puestos e incidencias internas ---------- */

/* El bloque va delante de la cola normal y tiene que leerse como «esto es
   distinto»: borde propio, título con icono y cuenta. El color no informa
   solo (regla nº7) — lleva triángulo de aviso y la palabra INCIDENCIAS. */
.cola__incidencias {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 10px;
    /* El contenedor de la cola no tiene margen lateral —las filas se inset
       con su propio padding— así que este recuadro, que sí tiene borde
       visible, quedaba pegado al canto de la pantalla. Se usa la misma medida
       que el padding de la fila para que el borde caiga en línea con su texto. */
    margin: 0 clamp(14px, 1.6vw, 24px) 18px;
    padding: 14px;
    background: var(--sunk);
    border: 2px solid var(--warn);
    border-radius: 14px;
}

.cola__incidencias-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--warn);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .06em;
}

.cola__incidencias-cuenta {
    min-inline-size: 26px;
    padding: 2px 8px;
    background: var(--warn);
    color: var(--raised);
    border-radius: 999px;
    font-size: .85rem;
    text-align: center;
}

.cola__fila--incidencia {
    border-inline-start: 5px solid var(--warn);
}

.cola__incidencia {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-start: 6px;
}

.cola__incidencia-cabecera {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--warn);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .04em;
}

.cola__incidencia-detalle,
.cola__incidencia-notas {
    color: var(--ink-2);
    font-size: .85rem;
}

.cola__incidencia-notas {
    font-style: italic;
}

/* Aviso en el detalle del producto: lo primero que se lee al abrirlo. */
.line-detalle__incidencia {
    margin-block-end: 18px;
    padding: 14px 16px;
    background: var(--sunk);
    border: 2px solid var(--warn);
    border-radius: 14px;
}

.line-detalle__incidencia-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--warn);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .04em;
}

.line-detalle__incidencia-detalle,
.line-detalle__incidencia-notas {
    margin: 0;
    color: var(--ink-2);
    font-size: .95rem;
}

.line-detalle__incidencia-notas {
    margin-block-start: 6px;
    font-style: italic;
}

/* RECHAZAR va separado de los botones de faena, con una línea de por medio:
   no es una acción del curso normal y no debe pulsarse por inercia. */
.line-detalle__rechazo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--line);
}

.line-detalle__boton--rechazar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--raised);
    border: 2px solid var(--warn);
    color: var(--warn);
    text-decoration: none;
}

.line-detalle__rechazo-ayuda {
    margin: 0;
    color: var(--ink-2);
    font-size: .85rem;
    text-align: center;
}

/* ---------- unidad repetida dentro de un pedido ---------- */
/* Apaño hasta que exista el identificador único por unidad física (regla nº5).
   Discreto a propósito: la mayoría de líneas no se repiten y no lo llevan, así
   que cuando aparece tiene que leerse como «ojo, hay más de una igual» sin
   competir con el número de pedido. */
.cola__unidad,
.diaria__unidad {
    display: inline-block;
    padding: 1px 7px;
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-family: var(--ff-m);
    font-size: .72rem;
    white-space: nowrap;
}

.line-detalle__unidad {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 10px;
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .8rem;
}

/* En el rechazo sí grita: equivocarse de unidad aquí carga el defecto a la
   pieza buena. Icono + texto, nunca solo color (regla nº12). */
.rechazo__unidad {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 12px;
    background: var(--sunk);
    border: 2px solid var(--warn);
    border-radius: 10px;
    color: var(--warn);
    font-size: .9rem;
}

/* ---------- modal de rechazo ---------- */
/* Mismo molde que el de «Otras tareas»: el operario no sale del producto que
   está mirando para decidir si lo devuelve. */
.rechazo-modal {
    padding: 0;
    border: none;
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-inline-size: 900px;
    max-block-size: calc(100dvh - 32px);
    inline-size: min(96vw, 900px);
    overflow: hidden;
    background: var(--raised);
    color: var(--ink);
}

.rechazo-modal::backdrop {
    background: rgba(58, 59, 56, .45);
}

.rechazo-modal__contenido {
    display: flex;
    flex-direction: column;
    max-block-size: calc(100dvh - 32px);
}

.rechazo-modal__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    padding: 18px 20px;
    border-block-end: 1px solid var(--line);
}

.rechazo-modal__cerrar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--ink-2);
    cursor: pointer;
}

.rechazo-modal__cerrar:hover {
    background: var(--sunk);
    color: var(--ink);
}

/* Lo único que puede necesitar scroll es el cuerpo: cabecera y botones se
   quedan siempre a la vista, que es lo que se busca con guantes. */
.rechazo-modal__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rechazo-modal__pie {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
    padding: 16px 20px;
    border-block-start: 1px solid var(--line);
    background: var(--raised);
}

.rechazo__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--warn);
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: .04em;
}

.rechazo__producto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
}

.rechazo__pedido {
    font-family: var(--ff-m);
    font-weight: 700;
}

.rechazo__atributo {
    padding: 2px 8px;
    background: var(--sunk);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: var(--ff-m);
    font-size: .85rem;
}

.rechazo__bloque {
    margin: 0;
    padding: 0;
    border: none;
}

.rechazo__leyenda {
    padding: 0;
    margin-block-end: 8px;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 1rem;
}

.rechazo__opcional {
    color: var(--ink-2);
    font-weight: 400;
}

.rechazo__ayuda {
    margin: 0 0 8px;
    color: var(--ink-2);
    font-size: .85rem;
}

.rechazo__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Botones de dedo con guante, no radios de ratón: el control nativo se
   esconde y la etiqueta entera es la zona pulsable. */
.rechazo__opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 64px;
    padding: 10px 18px;
    background: var(--raised);
    border: 2px solid var(--line);
    border-radius: 12px;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.rechazo__opcion input {
    inline-size: 26px;
    block-size: 26px;
    accent-color: var(--brand);
    flex: 0 0 auto;
}

.rechazo__opcion:has(input:checked) {
    border-color: var(--brand);
    background: var(--sunk);
}

.rechazo__opcion:has(input:focus-visible) {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.rechazo__notas {
    inline-size: 100%;
    min-inline-size: 0;
    padding: 12px;
    background: var(--raised);
    border: 2px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

.rechazo__notas:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

.rechazo__boton {
    display: inline-flex;
    flex: 1 1 200px;
    align-items: center;
    justify-content: center;
    min-block-size: 88px;
    padding-inline: 20px;
    border-radius: 14px;
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
}

.rechazo__boton--volver {
    background: var(--raised);
    border: 2px solid var(--line);
    color: var(--ink);
}

.rechazo__boton--enviar {
    background: var(--warn);
    border: 2px solid var(--warn);
    color: #FFFFFF;
}

/* Apagado hasta que están las tres respuestas: tiene que verse apagado de
   verdad, no solo no funcionar. */
.rechazo__boton--enviar:disabled {
    background: var(--sunk);
    border-color: var(--line);
    color: var(--ink-2);
    cursor: not-allowed;
}

/* ---------- vista diaria (tabla de estado, de solo lectura) ---------- */
.diaria {
    display: flex;
    flex-direction: column;
    /* flex-start + min-block-size en lugar de stretch: con stretch el alto de
       .diaria era el de la pantalla (675px) aunque la lista midiera 2040px, y
       un sticky solo se pega dentro de su contenedor — el buscador se iba con
       el scroll en cuanto se pasaba de la primera pantalla. El min-block-size
       conserva el centrado vertical del estado vacío, que va con margin:auto. */
    align-self: flex-start;
    min-block-size: 100%;
    inline-size: 100%;
    min-inline-size: 0;
}

/* Pegado arriba del área que hace scroll: la lista pasa de tres pantallas, y
   un buscador que se va con el scroll deja de servir justo cuando más falta
   hace. El fondo es opaco porque las filas pasan por debajo. */
.diaria__buscador {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    padding: 14px 28px;
    background: var(--bg);
    border-block-end: 1px solid var(--line);
}

.diaria__buscador-etiqueta {
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.diaria__buscador-campo {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 10px;
    min-inline-size: 0;
    padding-inline: 14px;
    background: var(--raised);
    border: 2px solid var(--line);
    border-radius: 10px;
    color: var(--ink-2);
}

.diaria__buscador-campo:focus-within {
    border-color: var(--brand);
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.diaria__buscador-campo svg {
    flex: 0 0 auto;
}

/* Alto de dedo con guante, no de ratón: es el mismo mínimo que el resto de
   controles de planta. */
.diaria__buscador-campo input {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 52px;
    border: none;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.diaria__buscador-campo input:focus {
    outline: none;
}

.diaria__buscador-boton {
    flex: 0 0 auto;
    min-block-size: 52px;
    padding-inline: 22px;
}

/* Icono + texto + cuenta: quien se encuentra la pantalla ya filtrada ve que
   lo está y cómo salir, sin depender del color. */
.diaria__buscador-limpiar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-block-size: 52px;
    padding-inline: 18px;
    border: 2px solid var(--brand);
    border-radius: 10px;
    background: var(--raised);
    color: var(--brand);
    font-family: var(--ff-d);
    font-weight: 700;
    text-decoration: none;
}

.diaria__buscador-cuenta {
    flex: 0 0 auto;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .85rem;
}

.diaria__cabecera {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-inline-size: 0;
    gap: 12px 20px;
    margin: 20px 28px 0;
    padding: 0 20px 10px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.diaria__tabla {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-inline-size: 0;
    margin: 0 28px 20px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.diaria__fila {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-inline-size: 0;
    gap: 12px 20px;
    min-block-size: var(--tap);
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}

.diaria__fila:last-child {
    border-bottom: none;
}

.diaria__fila:nth-child(even) {
    background: var(--sunk);
}

.diaria__col {
    min-inline-size: 0;
}

.diaria__col--pedido {
    flex: 0 0 90px;
}

.diaria__col--estado-pedido {
    flex: 1 1 210px;
}

.diaria__col--producto {
    flex: 2 1 260px;
}

.diaria__col--medidas {
    flex: 1 1 190px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.diaria__col--cantidad {
    flex: 0 0 80px;
}

.diaria__col--estado {
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.diaria__num {
    font-family: var(--ff-m);
    font-size: 1.1rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.diaria__pill {
    display: inline-flex;
    align-items: center;
    max-inline-size: 100%;
    padding: 4px 10px;
    border: 1.5px solid transparent;
    border-radius: 5px;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .01em;
    /* Antes recortaba con puntos suspensivos y "Carga METHOD MIERCOLES
       23-09-2026" se quedaba en "Carga METHOD M…": justo la fecha, que es
       la razón de ser de la pastilla. Mejor que ocupe dos líneas. */
    white-space: normal;
    text-wrap: balance;
}

.diaria__producto {
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.25;
}

.diaria__atributo {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: transparent;
    border: 2px solid var(--ink);
    border-radius: 6px;
    font-family: var(--ff-m);
    font-weight: 700;
    font-size: .85rem;
    color: var(--ink);
}

.diaria__sin-dato {
    color: var(--ink-2);
}

.diaria__cantidad {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    background: transparent;
    border: 2px solid var(--brand);
    border-radius: 6px;
    font-family: var(--ff-m);
    font-weight: 800;
    font-size: 1rem;
    color: var(--brand-ink);
}

/* Igual que en la cola: una sola unidad no merece el rojo. */
.diaria__cantidad--una {
    border-color: var(--ink);
    color: var(--ink);
}

.diaria__estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 5px;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .85rem;
}

.diaria__estado--pendiente {
    background: var(--sunk);
    color: var(--ink-2);
}

.diaria__estado--en-curso {
    background: var(--wait-wash);
    color: var(--wait);
}

.diaria__estado--pausado {
    background: var(--info-wash);
    color: var(--info);
}

.diaria__estado-detalle {
    color: var(--ink-2);
    font-size: .82rem;
}

/* En pantalla estrecha la tabla deja de ser una tabla: seis columnas
   repartiéndose el ancho no alineaban entre filas y, al ocultar la cabecera,
   ningún dato quedaba etiquetado — no se distinguía una cantidad de un
   número de pedido. Cada dato pasa a una línea con su rótulo delante. */
@media (max-width: 900px) {
    .diaria__cabecera,
    .diaria__tabla {
        margin-inline: 12px;
    }

    .diaria__buscador {
        padding-inline: 12px;
    }

    /* El rótulo se cae, no el placeholder: en estrecho el campo necesita todo
       el ancho, y la lupa más «Nº de pedido, producto…» ya dicen qué es. */
    .diaria__buscador-etiqueta {
        display: none;
    }

    /* Base pequeña, no 100%: con 260px el botón no cabía al lado y se caía a
       una segunda línea, y la barra se comía 147px de una pantalla de 800. */
    .diaria__buscador-campo {
        flex-basis: 120px;
    }

    .diaria__cabecera {
        display: none;
    }

    .diaria__fila {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 14px;
    }

    .diaria__col {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }

    /* En ancho la celda de estado apila insignia y operario; aquí tiene que
       volver a fila, o el 104px del rótulo se aplica como alto y abre un
       hueco vacío entre la etiqueta y el dato. */
    .diaria__col--estado {
        flex-direction: row;
    }

    .diaria__col::before {
        content: attr(data-etiqueta);
        flex: 0 0 104px;
        color: var(--ink-2);
        font-family: var(--ff-d);
        font-weight: 700;
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
}

/* ---------- detalle de una línea (empezar/pausar/reanudar/terminar) ---------- */
.line-detalle-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    inline-size: 100%;
}

.line-detalle__acciones-superiores {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: absolute;
    inset-block-start: 8px;
    inset-inline: 20px;
    padding: 0;
    z-index: 1;
}

.line-detalle__accion-superior {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 48px;
    padding: 12px 18px;
    background: var(--raised);
    border: 2px solid var(--line);
    border-radius: 10px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.line-detalle__accion-superior:hover {
    background: var(--sunk);
    border-color: var(--ink-3);
    color: var(--ink);
}

.line-detalle__accion-superior:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.line-detalle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-inline-size: 1440px;
    inline-size: 100%;
    padding: 12px 24px 24px;
    text-align: center;
    margin-inline: auto;
}

.line-detalle__ident {
    margin: 0;
    color: var(--ink-2);
    font-size: 1rem;
}

.line-detalle__cabecera-producto {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    inline-size: 100%;
}

.line-detalle__resumen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(560px);
    align-items: start;
    column-gap: clamp(56px, 8vw, 140px);
    row-gap: 20px;
    inline-size: 100%;
}

.line-detalle__producto-columna,
.line-detalle__pedido-columna {
    display: grid;
    align-content: start;
    gap: 12px;
    min-inline-size: 0;
}

.line-detalle__otros-productos h2 {
    margin: 0;
    padding: 0;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.line-detalle__producto {
    margin: 0;
    flex: 1 1 auto;
    min-inline-size: 0;
    font-family: var(--ff-d);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    color: var(--ink);
    text-align: start;
}

.line-detalle__cantidad {
    flex: 0 0 auto;
    margin: 0;
    color: var(--warn);
    font-family: var(--ff-m);
    font-weight: 800;
    font-size: clamp(1.55rem, 5vw, 2rem);
    line-height: 1;
}

.line-detalle__atributos {
    inline-size: 100%;
    text-align: start;
}

.line-detalle__atributos-titulo {
    margin: 0;
    padding: 0 0 8px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.line-detalle__lista-caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin: 0;
}

.line-detalle__lista-caracteristicas > div {
    display: grid;
    gap: 3px;
    min-inline-size: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--raised);
}

.line-detalle__lista-caracteristicas dt {
    color: var(--ink-3);
    font-family: var(--ff-d);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.line-detalle__lista-caracteristicas dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-family: var(--ff-m);
    font-weight: 700;
}

.line-detalle__avisos {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    inline-size: 100%;
}

.line-detalle__aviso {
    margin: 0;
    padding: 8px 14px;
    background: var(--warn);
    border-radius: 6px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-size: .95rem;
    font-weight: 800;
    text-align: start;
}

.line-detalle__otros-productos > div {
    display: grid;
    gap: 14px;
}

.line-detalle__otros-productos a {
    color: var(--brand);
    font-family: var(--ff-d);
    font-weight: 700;
    line-height: 1.35;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.line-detalle__otros-productos a:hover {
    color: var(--brand);
}

.line-detalle__otros-productos strong {
    font: inherit;
}

@media (max-width: 760px) {
    .line-detalle {
        padding-inline: 14px;
    }

    .line-detalle__resumen {
        grid-template-columns: 1fr;
    }
}

.line-detalle__error {
    margin: 4px 0 0;
    padding: 8px 14px;
    background: var(--warn-wash);
    border-radius: 10px;
    color: var(--warn);
    font-weight: 600;
}

.operator-queue__error {
    margin: 16px 28px 0;
    padding: 10px 16px;
    background: var(--warn-wash);
    border-radius: 10px;
    color: var(--warn);
    font-weight: 600;
}

.line-detalle__bloqueado {
    inline-size: min(100%, 640px);
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--wait);
    border-radius: 10px;
    background: var(--wait-wash);
    color: var(--ink);
    text-align: start;
}

.line-detalle__bloqueado p {
    margin: 0;
    font-family: var(--ff-d);
    font-weight: 700;
}

.line-detalle__bloqueado ul {
    margin: 8px 0 0;
    padding-inline-start: 1.2rem;
}

.line-detalle__bloqueado--hecho {
    border-color: var(--ok);
    background: var(--ok-wash);
    color: var(--ok);
    font-family: var(--ff-d);
    font-weight: 700;
}

.line-detalle__quien {
    margin: 8px 0 0;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ink);
}

.line-detalle__quien-lb {
    margin: 10px 0 0;
    color: var(--ink-2);
    font-size: 1rem;
}

.line-detalle__start-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: center;
    inline-size: min(75vw, 1440px);
    max-inline-size: calc(100vw - 48px);
}

.line-detalle__operarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    inline-size: 100%;
    padding: 4px;
}

.line-detalle__sin-operarios {
    grid-column: 1 / -1;
    color: var(--ink-2);
}

.line-detalle__operario {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    min-block-size: 96px;
    padding: 12px;
    background: var(--sunk);
    border: 2px solid transparent;
    border-radius: 14px;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: center;
    cursor: pointer;
}

.line-detalle__operario input {
    position: absolute;
    opacity: 0;
}

.line-detalle__operario:has(input:checked) {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand);
}

.line-detalle__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    inline-size: 100%;
}

.line-detalle__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tap);
    min-block-size: var(--tap);
    padding: 10px 24px;
    border: none;
    border-radius: 14px;
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
}

.line-detalle__boton--volver {
    background: var(--sunk);
    color: var(--ink-2);
}

.line-detalle__boton--ir {
    background: var(--ok);
    color: var(--raised);
}

.line-detalle__boton--ir:disabled {
    background: var(--sunk);
    color: var(--ink-3);
    cursor: not-allowed;
}

.line-detalle__start-form .line-detalle__acciones {
    margin-top: 18px;
}

.line-detalle__boton--empezar {
    min-inline-size: min(100%, 480px);
    min-block-size: 104px;
    background: var(--ok);
    font-size: 1.3rem;
}

.line-detalle__boton--empezar:disabled {
    background: var(--sunk);
    color: var(--ink-3);
}

.line-detalle__boton--pausa {
    background: var(--wait);
    color: var(--raised);
}

.line-detalle__boton--fin {
    background: var(--brand);
    color: var(--raised);
}

/* ---------- documentación de producto (operario) ---------- */
.operator-documentation {
    padding: 0;
    border: none;
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-inline-size: 900px;
    max-block-size: calc(100dvh - 32px);
    inline-size: min(94vw, 900px);
    overflow-y: auto;
    color: var(--ink);
}

.operator-documentation::backdrop {
    background: rgba(58, 59, 56, .45);
}

.operator-documentation__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
}

.operator-documentation__header p {
    margin: 0 0 4px;
    color: var(--brand);
    font-family: var(--ff-d);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.operator-documentation__header h2 {
    margin: 0;
    font-size: 1.35rem;
}

.operator-documentation__header button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 42px;
    block-size: 42px;
    background: var(--sunk);
    border-radius: 10px;
    color: var(--ink-2);
    cursor: pointer;
}

.operator-documentation__body {
    display: grid;
    gap: 24px;
    padding: 24px;
    line-height: 1.6;
}

.operator-documentation__information > :first-child {
    margin-top: 0;
}

.operator-documentation__information > :last-child {
    margin-bottom: 0;
}

.operator-documentation__information {
    overflow-wrap: anywhere;
}

.operator-documentation__information h1,
.operator-documentation__information h2,
.operator-documentation__information h3 {
    margin: 1.25em 0 .45em;
    color: var(--ink);
    line-height: 1.2;
}

.operator-documentation__information h1 {
    font-size: 1.55rem;
}

.operator-documentation__information h2 {
    font-size: 1.3rem;
}

.operator-documentation__information h3 {
    font-size: 1.1rem;
}

.operator-documentation__information p {
    margin: 0 0 1em;
}

.operator-documentation__information ul,
.operator-documentation__information ol {
    margin: 0 0 1em;
    padding-inline-start: 1.45rem;
}

.operator-documentation__information li + li {
    margin-top: .3em;
}

.operator-documentation__information blockquote {
    margin: 0 0 1em;
    padding: .65rem .9rem;
    border-inline-start: 3px solid var(--brand);
    background: var(--brand-wash);
    color: var(--ink-2);
}

.operator-documentation__information pre,
.operator-documentation__information .ql-code-block-container {
    margin: 0 0 1em;
    padding: .8rem .95rem;
    overflow-x: auto;
    border-radius: 8px;
    background: var(--sunk);
    color: var(--ink);
    font-family: var(--ff-m);
    font-size: .88rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.operator-documentation__information .ql-code-block {
    font-family: inherit;
}

.operator-documentation__information a {
    font-weight: 700;
}

.operator-documentation__files h3 {
    margin: 0 0 10px;
    color: var(--ink-2);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.operator-documentation__files > div {
    display: grid;
    gap: 8px;
}

.operator-documentation__files button {
    display: flex;
    inline-size: 100%;
    align-items: center;
    text-align: start;
    gap: 10px;
    min-block-size: 52px;
    padding: 12px 14px;
    background: var(--sunk);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--ff-d);
    font-weight: 700;
    cursor: pointer;
}

.operator-documentation__files button:hover {
    background: var(--info-wash);
    color: var(--info);
}

.operator-document-viewer {
    padding: 0;
    border: none;
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-inline-size: 1100px;
    max-block-size: calc(100dvh - 32px);
    inline-size: min(96vw, 1100px);
    overflow: hidden;
    color: var(--ink);
}

.operator-document-viewer::backdrop {
    background: rgba(58, 59, 56, .58);
}

.operator-document-viewer__content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    block-size: min(84dvh, 760px);
}

.operator-document-viewer header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.operator-document-viewer h2 {
    margin: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.operator-document-viewer header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    padding: 0;
    background: var(--sunk);
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 1.3rem;
    cursor: pointer;
}

.operator-document-viewer iframe {
    inline-size: calc(100% - 40px);
    block-size: calc(100% - 40px);
    min-block-size: 0;
    margin: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunk);
}

.operator-document-viewer footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.operator-document-viewer footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 46px;
    padding: 10px 20px;
    background: var(--brand-wash);
    border: 1px solid var(--brand);
    border-radius: 8px;
    color: var(--brand);
    font-family: var(--ff-d);
    font-weight: 700;
    text-decoration: none;
}

.operator-documentation__empty {
    margin: 0;
    color: var(--ink-2);
    text-align: center;
}

/* ---------- confirmación con DESHACER (reglas nº6 y nº9) ---------- */
.confirmation {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--raised);
}

.confirmation--ok {
    background: var(--ok);
}

.confirmation--pausa {
    background: var(--wait);
}

.confirmation--rechazo {
    background: var(--warn);
}

.confirmacion__detalle--secundario {
    font-size: .95rem;
    opacity: .75;
}

.confirmacion__marca {
    display: flex;
}

.confirmacion__texto {
    margin: 0;
    font-family: var(--ff-d);
    font-weight: 800;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
}

.confirmacion__detalle {
    margin: 0;
    font-size: 1.05rem;
    opacity: .9;
}

.confirmacion__acciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.confirmacion__deshacer {
    min-inline-size: var(--tap);
    min-block-size: var(--tap);
    padding: 10px 24px;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
    color: var(--raised);
    font-family: var(--ff-d);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
}

.confirmacion__volver {
    color: var(--raised);
    opacity: .85;
    text-decoration: underline;
}

/* Selector inicial de sección: una entrada clara de planta, distinta de la
   cola pero con los mismos colores, bordes y tamaños táctiles. */
.operator-section-picker {
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    inline-size: 100%;
    min-block-size: 0;
    padding: clamp(20px, 5vw, 56px);
}

.operator-section-picker__panel {
    display: grid;
    gap: clamp(24px, 4vw, 40px);
    inline-size: min(100%, 1040px);
    max-block-size: 100%;
    padding: clamp(24px, 5vw, 52px);
    overflow-y: auto;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.operator-section-picker__intro {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-inline-size: 660px;
    margin-inline: auto;
    text-align: center;
}

.operator-section-picker__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand);
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.operator-section-picker__intro h1 {
    margin: 0;
    color: var(--ink);
    font-family: var(--ff-d);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.1;
}

.operator-section-picker__intro p {
    margin: 0;
    color: var(--ink-2);
    font-size: 1.02rem;
    line-height: 1.5;
}

.operator-section-picker__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.operator-section-picker__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-block-size: 104px;
    padding: 16px 18px;
    background: var(--sunk);
    border: 2px solid transparent;
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.operator-section-picker__item:hover {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
}

.operator-section-picker__item:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}

.operator-section-picker__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--brand);
}

.operator-section-picker__item-copy {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
}

.operator-section-picker__item-copy strong {
    overflow-wrap: anywhere;
    font-family: var(--ff-d);
    font-size: 1.08rem;
    line-height: 1.2;
}

.operator-section-picker__item-copy small {
    color: var(--ink-2);
    font-size: .82rem;
    line-height: 1.3;
}

.operator-section-picker__item-arrow {
    color: var(--brand);
    font-family: var(--ff-m);
    font-size: 1.5rem;
    font-weight: 700;
}

@media (max-width: 560px) {
    .operator-section-picker {
        align-items: start;
        padding: 14px;
    }

    .operator-section-picker__panel {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .operator-section-picker__list {
        grid-template-columns: 1fr;
    }
}

/* ===== Cuadro de producción (pantalla del encargado, /supervision) =====
   Vista de oficina, no de planta: aquí sí hay tabla ancha y filtros, porque
   el encargado mira una pantalla grande con ratón. Las doce reglas del
   operario no aplican a esta pantalla. */

/* Una columna por sección no cabe en los 1200px del contenido normal, y el
   scroll horizontal dejaba justo las secciones fuera de la vista: es decir,
   escondía lo único que esta pantalla existe para enseñar. */
.content--ancho {
    max-width: none;
    padding-inline: 20px;
}

.cuadro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cuadro__titulo {
    margin: 0;
}

.cuadro__listas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-block-end: 1px solid var(--line);
}

.cuadro__lista {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-block-end: 2px solid transparent;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-weight: 700;
    text-decoration: none;
}

.cuadro__lista:hover {
    color: var(--ink);
}

.cuadro__lista--activa {
    border-block-end-color: var(--brand);
    color: var(--brand);
}

.cuadro__contador {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sunk);
    color: var(--ink-2);
    font-family: var(--ff-m);
    font-size: .78rem;
}

.cuadro__lista--activa .cuadro__contador {
    background: var(--brand-wash);
    color: var(--brand);
}

.cuadro__buscador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cuadro__buscador-etiqueta {
    font-family: var(--ff-d);
    font-weight: 700;
    color: var(--ink-2);
}

.cuadro__buscador-campo {
    flex: 1 1 280px;
    min-inline-size: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--raised);
    color: var(--ink);
    font: inherit;
}

.cuadro__buscador-campo:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.cuadro__limpiar {
    color: var(--ink-2);
    font-size: .875rem;
}

/* La tabla crece a lo ancho con las secciones; el scroll se queda dentro de
   este envoltorio en vez de mover la página entera. */
.cuadro__envoltorio {
    /* Queda como red de seguridad para pantallas estrechas; con el ancho
       completo y las medidas acotadas, la tabla entra sin usarlo. */
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--raised);
}

.cuadro__tabla {
    inline-size: 100%;
    border-collapse: collapse;
    /* Reparte el ancho por lo que declara cada columna y no por su contenido:
       sin esto una medida larga de PrestaShop se come media tabla y empuja
       las secciones fuera de la pantalla. */
    table-layout: fixed;
    font-size: .875rem;
}

.cuadro__tabla th {
    padding: 10px 12px;
    border-block-end: 1px solid var(--line);
    /* Toda la cabecera se apoya abajo: así los títulos de las columnas de
       texto quedan a la altura de los desplegables de sección, en vez de
       flotando arriba mientras estos caen al fondo. */
    vertical-align: bottom;
    text-align: start;
    color: var(--ink-3);
    font-family: var(--ff-d);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cuadro__tabla td {
    padding: 10px 12px;
    border-block-end: 1px solid var(--line-soft);
    vertical-align: middle;
}

.cuadro__tabla tbody tr:last-child td {
    border-block-end: none;
}

.cuadro__tabla tbody tr:hover {
    background: var(--sunk);
}

.cuadro__col-pedido,
.cuadro__col-cant {
    font-family: var(--ff-m);
    white-space: nowrap;
}

.cuadro__col-pedido {
    inline-size: 5rem;
}

.cuadro__col-cant {
    inline-size: 4rem;
}

.cuadro__col-tipo {
    inline-size: 9.5rem;
}

.cuadro__col-cliente {
    inline-size: 7.5rem;
}

/* La medida puede ser larguísima («Medida: 67,5x200 cm Reforzada (5 barras
   transversales) - Tipo de Tela: Tejido 3D - Color: Negro»). Se le da un
   ancho propio y se parte en varias líneas, en vez de estirar la tabla. */
.cuadro__col-medidas {
    inline-size: 8rem;
}

.cuadro__medidas {
    font-family: var(--ff-m);
    font-size: .8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Estrechas a propósito: son doce y tienen que caber todas a la vez. El
   nombre largo («Ayudante de Exp (C. Plegable)») se parte en varias líneas
   en la cabecera en lugar de ensanchar la columna. */
/* 6rem es el ancho que necesita «Expediciones», el nombre más largo que no
   se puede partir; con menos se le corta la última letra. El espacio sale de
   las columnas de texto, que sí pueden repartirse en varias líneas. */
.cuadro__col-seccion {
    inline-size: 6rem;
    padding-inline: 5px;
    text-align: center;
}

/* Dos líneas como mucho: un solo nombre largo («Ayudante de Exp (C.
   Plegable)») estiraba la cabecera entera a tres líneas. Lo que se corta lo
   dice el tooltip del th (regla 17). */
/* Sin mayúsculas ni espaciado extra, al contrario que el resto de la
   cabecera: en versalitas «Expediciones» no cabe de ninguna manera en una
   columna de 5rem, y partirla («EXPEDICI / ONES») se lee peor que perder el
   estilo. Aquí manda que el nombre de la sección se lea de un vistazo. */
.cuadro__seccion-nombre {
    text-transform: none;
    letter-spacing: normal;
    font-size: .74rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-block-end: 6px;
    line-height: 1.25;
    /* Se parte entre palabras y NUNCA dentro de una: «EXPEDICI / ONES» o
       «SOLDADU / RA» se leen fatal. Si una palabra no cabe, se sale por el
       recorte de dos líneas y el nombre entero lo dice el tooltip del th. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.cuadro__seccion-filtro {
    inline-size: 100%;
    min-inline-size: 0;
    padding: 4px 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--raised);
    color: var(--ink);
    font-family: var(--ff-b);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.cuadro__producto {
    display: block;
    line-height: 1.3;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.cuadro__aviso {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-block-start: 2px;
    color: var(--warn);
    font-size: .78rem;
    font-weight: 700;
}

/* Color + icono + texto: el estado nunca se distingue solo por el color
   (regla 12). El texto es el apodo del operario cuando lo hay, que dice más
   que repetir "Hecho" en cada celda. */
.cuadro__estado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-inline-size: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    /* Un apodo largo se recorta con puntos suspensivos en vez de desbordar
       la celda; el tooltip de la celda lo dice entero. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cuadro__estado--pendiente {
    background: var(--wait-wash);
    color: var(--wait);
}

/* Azul, no rojo: el rojo queda reservado para las incidencias
   (.cuadro__aviso), que son lo único que exige que alguien actúe. Un trabajo
   en curso es lo normal en una fábrica, no una alarma. */
.cuadro__estado--en-curso {
    background: var(--info-wash);
    color: var(--info);
}

/* Misma familia que «pendiente» —las dos son espera— pero con el fondo
   invertido: pausado lleva algo empezado detrás, y así se distinguen de un
   vistazo sin gastar otro color. El icono (pausa frente a reloj) lo remata. */
.cuadro__estado--pausado {
    background: transparent;
    color: var(--wait);
    box-shadow: inset 0 0 0 1px currentColor;
}

.cuadro__estado--hecho {
    background: var(--ok-wash);
    color: var(--ok);
}

/* Los iconos son SVG inline, no una fuente de iconos: fuera de /admin no hay
   Font Awesome cargado. flex-shrink evita que se aplasten cuando el texto
   de al lado se recorta en una columna estrecha. */
.cuadro__estado-icono,
.cuadro__aviso-icono {
    flex-shrink: 0;
}

.cuadro__no-aplica {
    color: var(--ink-3);
}

.cuadro__vacio {
    padding: 28px 12px;
    text-align: center;
    color: var(--ink-2);
}

/* En pantallas más pequeñas se encogen las columnas de texto, que se pueden
   partir en varias líneas, y nunca las de sección: son doce y son justo lo
   que esta pantalla existe para enseñar de un vistazo. A 1440px (portátil
   normal) la tabla entera sigue entrando sin scroll. */
@media (max-width: 1700px) {
    .cuadro__tabla {
        font-size: .8rem;
    }

    .cuadro__col-pedido {
        inline-size: 4.25rem;
    }

    .cuadro__col-tipo {
        inline-size: 5.5rem;
    }

    .cuadro__col-medidas {
        inline-size: 4.5rem;
    }

    .cuadro__col-cant {
        inline-size: 3.25rem;
    }

    .cuadro__col-cliente {
        inline-size: 5rem;
    }

    /* Las secciones no bajan de 5rem: por debajo «Expediciones» se corta,
       que es justo lo que se estaba arreglando. El espacio sale de las
       columnas de texto. */
    .cuadro__col-seccion {
        inline-size: 5rem;
    }

    .cuadro__tabla td,
    .cuadro__tabla th {
        padding-inline: 5px;
    }

    .cuadro__estado {
        padding-inline: 5px;
        font-size: .68rem;
    }

    /* La columna se estrecha, así que el nombre baja con ella: el objetivo
       sigue siendo que «Expediciones» entre de una pieza. */
    .cuadro__seccion-nombre {
        font-size: .6rem;
    }

    .cuadro__seccion-filtro {
        font-size: .68rem;
    }
}

/* ---------- rendimiento (teórico vs real) ---------- */
.rendimiento {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rendimiento__titulo {
    margin: 0;
    font-family: var(--ff-d);
    font-size: 1.8rem;
}

.rendimiento__entradilla {
    margin: -10px 0 0;
    color: var(--ink-2);
}

.rendimiento__vistas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-block-end: 2px solid var(--line);
}

.rendimiento__vista {
    padding: 10px 18px;
    border-block-end: 3px solid transparent;
    margin-block-end: -2px;
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-weight: 700;
    text-decoration: none;
}

.rendimiento__vista--activa {
    border-block-end-color: var(--brand);
    color: var(--brand);
}

.rendimiento__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rendimiento__rangos {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--sunk);
    border-radius: 10px;
}

.rendimiento__rango {
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.rendimiento__rango--activo {
    background: var(--raised);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.rendimiento__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rendimiento__campo span {
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rendimiento__campo input,
.rendimiento__campo select {
    padding: 9px 12px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
}

.rendimiento__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.rendimiento__kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.rendimiento__kpi-clave {
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rendimiento__kpi-valor {
    font-family: var(--ff-m);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

/* El color acompaña al número, nunca lo sustituye: el porcentaje se lee
   igual en gris (regla 12). */
.rendimiento__kpi-valor--verde { color: var(--ok); }
.rendimiento__kpi-valor--rojo { color: var(--warn); }
.rendimiento__kpi-valor--gris { color: var(--ink-2); }

.rendimiento__kpi-pie {
    color: var(--ink-2);
    font-size: .8rem;
}

.rendimiento__cobertura {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    background: var(--sunk);
    border: 2px solid var(--wait);
    border-radius: 12px;
    color: var(--wait);
    font-size: .9rem;
}

.rendimiento__bloque-titulo {
    margin: 0 0 10px;
    font-family: var(--ff-d);
    font-size: 1.1rem;
}

.rendimiento__tabla {
    inline-size: 100%;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    border-collapse: collapse;
    overflow: hidden;
}

.rendimiento__tabla th {
    padding: 10px 14px;
    background: var(--sunk);
    border-block-end: 1px solid var(--line);
    color: var(--ink-2);
    font-family: var(--ff-d);
    font-size: .75rem;
    letter-spacing: .05em;
    text-align: start;
    text-transform: uppercase;
}

.rendimiento__tabla td {
    padding: 10px 14px;
    border-block-end: 1px solid var(--line);
}

.rendimiento__tabla tr:last-child td {
    border-block-end: none;
}

.rendimiento__num {
    font-family: var(--ff-m);
    text-align: end;
    white-space: nowrap;
}

.rendimiento__sin-medir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 8px;
    padding: 1px 7px;
    background: var(--sunk);
    border: 1px solid var(--wait);
    border-radius: 999px;
    color: var(--wait);
    font-size: .72rem;
    white-space: nowrap;
}

.rendimiento__vacio {
    margin: 0;
    color: var(--ink-2);
}

.rendimiento__vacio--grande {
    padding: 40px 20px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
}

/* ---------- acciones de sección: lo que se pregunta al terminar ---------- */
/* Apagado hasta marcarlas todas: tiene que VERSE apagado, no solo no
   funcionar. Un botón verde que no responde se lee como avería. */
.revision__boton--si:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.7);
}

.revision__acciones-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    inline-size: min(100%, 460px);
    margin-block-end: 6px;
}

.revision__accion {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 56px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    font-family: var(--ff-d);
    font-weight: 600;
    cursor: pointer;
}

.revision__accion input {
    inline-size: 26px;
    block-size: 26px;
    flex: 0 0 auto;
}

/* Acciones a medias: el producto sigue en la cola y se dice qué lleva hecho
   y qué le falta, para que quien lo coja sepa a qué va. */
.cola__acciones {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-block-start: 4px;
}

.cola__acciones-hecho {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ok);
    font-size: .82rem;
    font-weight: 600;
}

.cola__acciones-falta {
    color: var(--wait);
    font-size: .82rem;
}

.revision__hecho {
    margin: 0;
    font-size: .9rem;
    opacity: .8;
}