/* Ajustes del panel que no dependen de compilar un tema de Filament.
   Escala de espaciado: 0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4 rem. */

:root {
    --pw-marca: #059669;
    --pw-marca-tinta: #047857;
    --pw-marca-fuerte: #047857;
    --pw-marca-suave: rgba(5, 150, 105, 0.18);
    --pw-marca-fondo: rgba(5, 150, 105, 0.07);
    --pw-tinta: #0f172a;
    --pw-tinta-2: #334155;
    --pw-tinta-3: #64748b;
    --pw-linea: rgba(100, 116, 139, 0.22);
    --pw-superficie: #fff;
    --pw-superficie-2: #f8fafc;
    --pw-aviso-tinta: #92400e;
}

/* Modo oscuro (Filament pone la clase dark en <html>): mismos tokens, valores invertidos. */
.dark {
    --pw-marca-tinta: #6ee7b7;
    --pw-marca-suave: rgba(52, 211, 153, 0.24);
    --pw-marca-fondo: rgba(52, 211, 153, 0.09);
    --pw-tinta: #f1f5f9;
    --pw-tinta-2: #cbd5e1;
    --pw-tinta-3: #94a3b8;
    --pw-linea: rgba(148, 163, 184, 0.22);
    --pw-superficie: #111827;
    --pw-superficie-2: #1f2937;
    --pw-aviso-tinta: #fbbf24;
}

/* ---------- Superficies del navegador ---------- */

::selection {
    background: var(--pw-marca-suave);
}

input,
textarea {
    caret-color: var(--pw-marca);
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------- Datos: cifras tabulares ---------- */

.fi-ta-table,
.fi-fo-repeater-table,
input[inputmode="numeric"],
input[inputmode="decimal"],
.pw-tabular {
    font-variant-numeric: tabular-nums;
}

input.pw-codigo {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* Repeater en tabla: anchos compactos para que una tanda quepa sin desplazar. */
.fi-fo-repeater-table .pw-estrecho input {
    width: 5.25rem;
    min-width: 5.25rem;
}

.fi-fo-repeater-table .pw-medio input {
    width: 7rem;
    min-width: 7rem;
}

/* ---------- Escáner ---------- */

.pw-escaner-video {
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #0f172a;
}

.pw-escaner-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ---------- Tablas propias ---------- */

.pw-tabla-envoltorio {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pw-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pw-tabla th,
.pw-tabla td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--pw-linea);
}

.pw-tabla th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pw-tinta-3);
    white-space: nowrap;
}

.pw-tabla th.num,
.pw-tabla td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pw-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.pw-tabla td:first-child,
.pw-tabla-clases td:nth-child(2),
.pw-tabla-clases td:nth-child(3) {
    white-space: nowrap;
}

/* Las etiquetas de clase no se recortan dentro de una celda estrecha. */
.pw-tabla .fi-badge,
.pw-tabla .fi-badge-label-ctn,
.pw-tabla .fi-badge-label {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.pw-tabla-clases td:first-child {
    width: 7rem;
}

/* ============================================================
   Página de ayuda (modo lectura)
   ============================================================ */

.pw-ayuda {
    --pw-medida: 44rem;
    color: var(--pw-tinta);
    font-size: 1rem;
    line-height: 1.65;
}

.pw-ayuda p {
    margin: 0;
}

.pw-ayuda p + p {
    margin-top: 0.75rem;
}

.pw-ayuda strong {
    font-weight: 600;
    color: var(--pw-tinta);
}

.pw-ayuda kbd {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(100, 116, 139, 0.45);
    border-bottom-width: 2px;
    background: var(--pw-superficie);
    color: var(--pw-tinta);
    white-space: nowrap;
}

/* Chips de navegación (móvil y tablet) */

.pw-ayuda-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1rem 1.5rem;
    padding: 0 1rem 0.25rem;
}

.pw-ayuda-chips::-webkit-scrollbar {
    display: none;
}

.pw-ayuda-chips a {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--pw-linea);
    background: var(--pw-superficie);
    color: var(--pw-tinta-2);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 150ms ease-out, color 150ms ease-out, background 150ms ease-out;
}

.pw-ayuda-chips a:hover,
.pw-ayuda-chips a:focus-visible {
    border-color: var(--pw-marca);
    color: var(--pw-marca-tinta);
    background: var(--pw-marca-fondo);
}

/* Estructura en dos columnas a partir de escritorio */

.pw-ayuda-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.pw-ayuda-articulo {
    min-width: 0;
    max-width: var(--pw-medida);
}

.pw-ayuda-lateral {
    display: none;
}

@media (min-width: 1100px) {
    .pw-ayuda-chips {
        display: none;
    }

    .pw-ayuda-shell {
        grid-template-columns: minmax(0, var(--pw-medida)) 13rem;
        gap: 4rem;
    }

    .pw-ayuda-lateral {
        display: block;
        align-self: stretch;
    }

    .pw-lateral-pegajoso {
        position: sticky;
        top: 5.5rem;
        display: grid;
        gap: 1.5rem;
    }
}

.pw-indice-titulo {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pw-tinta-3);
}

.pw-indice ol,
.pw-indice ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.125rem;
    border-left: 1px solid var(--pw-linea);
}

.pw-indice a {
    display: block;
    padding: 0.375rem 0 0.375rem 0.875rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 0.875rem;
    color: var(--pw-tinta-2);
    text-decoration: none;
    transition: color 150ms ease-out, border-color 150ms ease-out;
}

.pw-indice a:hover,
.pw-indice a:focus-visible {
    color: var(--pw-marca-tinta);
    border-left-color: var(--pw-marca);
}

/* Secciones: aire generoso entre ellas, compacto dentro */

.pw-seccion {
    scroll-margin-top: 5.5rem;
}

.pw-seccion + .pw-seccion {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--pw-linea);
}

.pw-seccion-cabecera {
    margin-bottom: 1.5rem;
}

.pw-seccion-cabecera h2 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.pw-seccion-cabecera p {
    margin-top: 0.5rem;
    color: var(--pw-tinta-2);
}

.pw-bloque + .pw-bloque {
    margin-top: 2.5rem;
}

.pw-bloque h3 {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pw-nota {
    color: var(--pw-tinta-2);
    margin-bottom: 0.75rem !important;
}

.pw-prosa {
    max-width: 62ch;
}

.pw-destacado {
    font-size: 1.125rem;
    line-height: 1.55;
    font-weight: 500;
    color: var(--pw-tinta);
}

/* Visión general: texto + esquema */

.pw-vision {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 720px) {
    .pw-vision {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 2rem;
    }
}

/* Figuras */

.pw-figura {
    margin: 0;
}

.pw-figura img,
.pw-figura svg {
    display: block;
    width: 100%;
    height: auto;
}

.pw-figura img {
    border-radius: 0.75rem;
    border: 1px solid var(--pw-linea);
    background: var(--pw-superficie-2);
}

.pw-figura figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pw-tinta-2);
}

.pw-figura-esquema {
    padding: 0.875rem;
    border-radius: 0.75rem;
    background: var(--pw-marca-fondo);
}

.pw-figura-esquema figcaption {
    margin-top: 0.625rem;
}

/* Recorrido: pasos con hilo */

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

.pw-paso {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 1rem;
    padding-bottom: 2rem;
}

.pw-paso::before {
    content: '';
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.5rem;
    bottom: 0.25rem;
    width: 2px;
    background: var(--pw-linea);
}

.pw-paso:last-child {
    padding-bottom: 0;
}

.pw-paso:last-child::before {
    display: none;
}

.pw-paso-numero {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--pw-marca);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.28);
}

.pw-paso-cuerpo {
    min-width: 0;
    padding-top: 0.25rem;
}

.pw-paso-cuerpo h3 {
    margin: 0 0 0.625rem;
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pw-paso-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 720px) {
    .pw-paso-columnas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

.pw-paso-bloque {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.625rem;
    background: rgba(100, 116, 139, 0.06);
}

.pw-paso-bloque-app {
    background: var(--pw-marca-fondo);
}

.pw-paso-bloque p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--pw-tinta-2);
}

.pw-etiqueta {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pw-tinta-3);
}

.pw-paso-bloque-app .pw-etiqueta {
    color: var(--pw-marca-tinta);
}

.pw-enlace-pantalla {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    margin-top: 0.75rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--pw-linea);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pw-marca-tinta);
    text-decoration: none;
    transition: border-color 150ms ease-out, background 150ms ease-out;
}

.pw-enlace-pantalla:hover,
.pw-enlace-pantalla:focus-visible {
    border-color: var(--pw-marca);
    background: var(--pw-marca-fondo);
}

/* Comprobador */

.pw-botones {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.pw-botones-lista {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 720px) {
    .pw-botones-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

.pw-boton {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--pw-linea);
}

.pw-boton dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.pw-boton dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--pw-tinta-2);
}

.pw-pantallas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 720px) {
    .pw-pantallas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

.pw-modos {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@media (min-width: 720px) {
    .pw-modos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

.pw-modo {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--pw-linea);
}

.pw-modo dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.pw-modo dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--pw-tinta-2);
}

.pw-modo-cuando {
    padding-top: 0.375rem;
    border-top: 1px dashed var(--pw-linea);
    color: var(--pw-tinta-3) !important;
}

.pw-modo-cuando::before {
    content: 'Cuándo · ';
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pw-marca-tinta);
}

.pw-ayuda ol.pw-lista-numerada {
    list-style: decimal outside !important;
    margin: 0;
    padding-left: 1.5rem;
    display: grid;
    gap: 0.5rem;
}

.pw-ayuda ol.pw-lista-numerada li::marker {
    color: var(--pw-marca-tinta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pw-aviso {
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    color: var(--pw-tinta);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.pw-aviso strong {
    display: block;
    margin-bottom: 0.25rem;
}

/* Glosario y consejos */

.pw-definiciones,
.pw-consejos {
    margin: 0;
    display: grid;
    gap: 1rem;
}

.pw-definiciones > div,
.pw-consejos > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pw-linea);
}

.pw-definiciones > div:last-child,
.pw-consejos > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

@media (min-width: 720px) {
    .pw-definiciones > div,
    .pw-consejos > div {
        grid-template-columns: 10rem minmax(0, 1fr);
        gap: 1.5rem;
    }
}

.pw-definiciones dt,
.pw-consejos dt {
    font-weight: 600;
}

.pw-definiciones dd,
.pw-consejos dd {
    margin: 0;
    color: var(--pw-tinta-2);
}

.pw-arriba {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    margin-top: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pw-tinta-3);
    text-decoration: none;
}

.pw-arriba:hover,
.pw-arriba:focus-visible {
    color: var(--pw-marca-tinta);
}

/* ---------- Menú lateral siempre visible ----------
   Filament lo deja en position: sticky dentro de .fi-layout (overflow-x: clip). Safari no mantiene el sticky
   con ese recorte en un ancestro y el menú se desplaza con la página. Fijado en pantallas grandes. */

@media (min-width: 1024px) {
    .fi-body-has-topbar:not(.fi-body-has-top-navigation) .fi-sidebar {
        position: fixed !important;
        top: var(--topbar-height);
        height: calc(100dvh - var(--topbar-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .fi-body-has-topbar:not(.fi-body-has-top-navigation) .fi-main-ctn.fi-main-ctn-sidebar-open {
        padding-inline-start: var(--sidebar-width);
    }

    .fi-body-has-topbar.fi-body-has-sidebar-collapsible-on-desktop:not(.fi-body-has-top-navigation) .fi-main-ctn:not(.fi-main-ctn-sidebar-open) {
        padding-inline-start: var(--collapsed-sidebar-width);
    }
}

/* ---------- Escritorio: gráfico de columnas ---------- */

.pw-columnas {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0.375rem;
    align-items: end;
}

.pw-columna {
    position: relative;
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    border-radius: 0.5rem;
    outline: none;
    cursor: default;
}

.pw-columna:focus-visible {
    box-shadow: 0 0 0 2px var(--pw-marca-suave);
}

.pw-columna-tooltip {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translate(-50%, -0.25rem);
    z-index: 20;
    width: 16.5rem;
    padding: 0.75rem 0.875rem 0.875rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
}

.pw-columna-tooltip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.625rem;
    height: 0.625rem;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #1e293b;
}

.pw-tip-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pw-tip-titulo {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pw-tip-pildora {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.pw-tip-pildora span {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}

.pw-tip-barra {
    height: 0.375rem;
    margin: 0.625rem 0 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.pw-tip-barra span {
    display: block;
    height: 100%;
    min-width: 0.375rem;
    border-radius: 999px;
    background: #34d399;
}

.pw-columna-sugerida .pw-tip-barra span {
    background: #fbbf24;
}

.pw-tip-datos {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.75rem;
    align-items: baseline;
}

.pw-tip-datos dt {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
}

.pw-tip-datos dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pw-tip-datos small {
    font-size: 0.6875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

.pw-tip-mas {
    color: #6ee7b7;
}

.pw-tip-menos {
    color: #fca5a5;
}

.pw-columna:hover .pw-columna-tooltip,
.pw-columna:focus-visible .pw-columna-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.pw-columna:first-child .pw-columna-tooltip,
.pw-columna:nth-child(2) .pw-columna-tooltip {
    left: 0;
    transform: translate(0, -0.25rem);
}

.pw-columna:first-child:hover .pw-columna-tooltip,
.pw-columna:first-child:focus-visible .pw-columna-tooltip,
.pw-columna:nth-child(2):hover .pw-columna-tooltip,
.pw-columna:nth-child(2):focus-visible .pw-columna-tooltip {
    transform: translate(0, 0);
}

.pw-columna:first-child .pw-columna-tooltip::after,
.pw-columna:nth-child(2) .pw-columna-tooltip::after {
    left: 1.25rem;
}

.pw-columna:nth-last-child(-n+2) .pw-columna-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, -0.25rem);
}

.pw-columna:nth-last-child(-n+2):hover .pw-columna-tooltip,
.pw-columna:nth-last-child(-n+2):focus-visible .pw-columna-tooltip {
    transform: translate(0, 0);
}

.pw-columna:nth-last-child(-n+2) .pw-columna-tooltip::after {
    left: auto;
    right: 1.25rem;
    transform: translate(50%, -50%) rotate(45deg);
}

.pw-columna:hover .pw-columna-tubo {
    border-color: var(--pw-marca);
}

.pw-columna-cuenta {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pw-tinta-2);
}

.pw-columna-tubo {
    position: relative;
    width: 100%;
    max-width: 2.75rem;
    height: 11rem;
    border-radius: 0.375rem;
    border: 1.5px solid rgba(100, 116, 139, 0.45);
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent calc(100% / 30 - 1px),
            rgba(100, 116, 139, 0.14) calc(100% / 30 - 1px),
            rgba(100, 116, 139, 0.14) calc(100% / 30)
        );
    overflow: hidden;
}

.pw-columna-relleno {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pw-marca);
    transition: height 300ms ease-out;
}

.pw-columna-sugerida .pw-columna-relleno {
    background: #f59e0b;
}

.pw-columna-sugerida .pw-columna-tubo {
    border-color: #f59e0b;
}

.pw-columna-numero {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pw-columnas-pie {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--pw-tinta-2);
}

@media (prefers-reduced-motion: reduce) {
    .pw-columna-relleno,
    .pw-columna-tooltip {
        transition: none;
    }
}

/* ---------- Vista del panel: la batería de frente ---------- */

.pw-panel {
    display: grid;
    gap: 1.25rem;
}

.pw-panel-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    align-items: end;
}

.pw-panel-resumen > div {
    display: grid;
    gap: 0.125rem;
}

.pw-panel-cifra {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pw-panel-cifra small {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--pw-tinta-3);
}

.pw-panel-etiqueta {
    font-size: 0.8125rem;
    color: var(--pw-tinta-2);
}

.pw-panel-resumen > .pw-panel-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    margin-inline-start: auto;
    padding-bottom: 0.125rem;
    font-size: 0.8125rem;
    color: var(--pw-tinta-2);
}

.pw-panel-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.pw-panel-leyenda i {
    flex: none;
    width: 1.125rem;
    height: 0.8125rem;
    border-radius: 0.25rem;
}

.pw-leyenda-ocupado {
    background: var(--pw-marca);
}

.pw-leyenda-siguiente {
    border: 1.5px dashed var(--pw-tinta-3);
}

.pw-leyenda-propuesta {
    border: 1.5px dashed #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

.pw-panel-envoltorio {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0 0.75rem;
}

.pw-panel-rejilla {
    --pw-hueco-alto: 1.625rem;
    --pw-hueco-gap: 0.3rem;
    --pw-cabecera-alto: 4.25rem;
    display: grid;
    grid-template-columns: 2rem repeat(var(--pw-columnas), minmax(3.75rem, 1fr));
    gap: 0 0.375rem;
    min-width: calc(2rem + var(--pw-columnas) * 4.5rem);
    align-items: start;
}

/* Eje de filas */

.pw-panel-eje {
    display: grid;
    grid-template-rows: var(--pw-cabecera-alto) repeat(var(--pw-filas), var(--pw-hueco-alto));
    row-gap: var(--pw-hueco-gap);
    padding: 0.25rem 0;
}

.pw-panel-eje-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 0.375rem 0.625rem 0;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pw-tinta-3);
}

.pw-panel-eje-fila {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline-end: 0.5rem;
    font-size: 0.6875rem;
    color: rgba(100, 116, 139, 0.6);
    font-variant-numeric: tabular-nums;
}

.pw-panel-eje-fila.pw-eje-marca {
    color: var(--pw-tinta-2);
    font-weight: 600;
}

/* Cada columna es un tubo: cabecera + huecos sobre un fondo propio */

.pw-panel-columna {
    display: grid;
    grid-template-rows: var(--pw-cabecera-alto) auto;
    row-gap: var(--pw-hueco-gap);
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: rgba(100, 116, 139, 0.07);
    transition: background 150ms ease-out;
}

.pw-panel-columna:hover {
    background: rgba(100, 116, 139, 0.11);
}

.pw-panel-columna.pw-propuesta {
    background: rgba(245, 158, 11, 0.1);
}

.pw-panel-cabecera {
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 0.05rem;
    padding-bottom: 0.375rem;
    margin-bottom: 0.25rem;
    border-bottom: 2px solid rgba(100, 116, 139, 0.3);
}

.pw-panel-columna.pw-propuesta .pw-panel-cabecera {
    border-bottom-color: #f59e0b;
}

.pw-panel-cabecera-numero {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.2rem;
}

.pw-panel-cabecera-dato {
    font-size: 0.6875rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--pw-tinta-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pw-panel-cabecera-dato small {
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--pw-tinta-3);
}

.pw-panel-tubo {
    display: grid;
    grid-template-rows: repeat(var(--pw-filas), var(--pw-hueco-alto));
    row-gap: var(--pw-hueco-gap);
}

.pw-hueco {
    position: relative;
    height: var(--pw-hueco-alto);
    border-radius: 0.375rem;
    border: 1px solid rgba(100, 116, 139, 0.22);
    background: var(--pw-superficie);
}

.pw-hueco-siguiente {
    border: 1.5px dashed var(--pw-tinta-3);
    background: var(--pw-superficie);
}

.pw-hueco-propuesto {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.18);
}

.pw-hueco-ocupado {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--pw-marca-fuerte);
    background: var(--pw-marca);
    color: #fff;
    text-decoration: none;
    outline: none;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
    transition: background 120ms ease-out, box-shadow 120ms ease-out;
}

.pw-hueco-ocupado:hover,
.pw-hueco-ocupado:focus-visible {
    background: var(--pw-marca-fuerte);
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.4);
    z-index: 30;
}

.pw-hueco-ocupado:focus-visible {
    box-shadow: 0 0 0 2px var(--pw-superficie), 0 0 0 4px var(--pw-marca);
}

.pw-hueco-codigo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* Tarjeta del paquete */

.pw-hueco-tip {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translate(-50%, 0.25rem);
    z-index: 40;
    width: 17.5rem;
    padding: 0.75rem 0.875rem 0.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
}

.pw-hueco-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0.625rem;
    height: 0.625rem;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #0f172a;
}

.pw-hueco-ocupado:hover .pw-hueco-tip,
.pw-hueco-ocupado:focus-visible .pw-hueco-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.pw-tip-izquierda .pw-hueco-tip {
    left: 0;
    transform: translate(0, 0.25rem);
}

.pw-tip-izquierda:hover .pw-hueco-tip,
.pw-tip-izquierda:focus-visible .pw-hueco-tip {
    transform: translate(0, 0);
}

.pw-tip-izquierda .pw-hueco-tip::after {
    left: 1.5rem;
}

.pw-tip-derecha .pw-hueco-tip {
    left: auto;
    right: 0;
    transform: translate(0, 0.25rem);
}

.pw-tip-derecha:hover .pw-hueco-tip,
.pw-tip-derecha:focus-visible .pw-hueco-tip {
    transform: translate(0, 0);
}

.pw-tip-derecha .pw-hueco-tip::after {
    left: auto;
    right: 1.5rem;
    transform: translate(50%, -50%) rotate(45deg);
}

.pw-tip-abajo .pw-hueco-tip {
    bottom: auto;
    top: calc(100% + 0.5rem);
}

.pw-tip-abajo .pw-hueco-tip::after {
    top: 0;
}

.pw-hueco-tip .pw-tip-datos {
    margin-top: 0.625rem;
}

.pw-tip-celdas {
    width: 100%;
    margin-top: 0.625rem;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.pw-tip-celdas th {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
    padding: 0.25rem 0.25rem 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pw-tip-celdas td {
    padding: 0.2rem 0.25rem 0.2rem 0;
    color: rgba(255, 255, 255, 0.9);
}

.pw-tip-celdas th:nth-child(2),
.pw-tip-celdas th:nth-child(3),
.pw-tip-celdas td:nth-child(2),
.pw-tip-celdas td:nth-child(3) {
    text-align: right;
}

.pw-tip-celdas td:first-child {
    font-weight: 600;
}

.pw-tip-clase {
    display: inline-block;
    min-width: 1.25rem;
    text-align: center;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.14);
}

.pw-tip-clase-a { background: rgba(52, 211, 153, 0.35); }
.pw-tip-clase-b { background: rgba(96, 165, 250, 0.35); }
.pw-tip-clase-c { background: rgba(251, 191, 36, 0.35); }
.pw-tip-clase-r { background: rgba(248, 113, 113, 0.35); }

.pw-tip-pie {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .pw-hueco-ocupado,
    .pw-hueco-tip {
        transition: none;
    }
}

/* ---------- Escritorio: qué toca hoy ---------- */

.pw-tareas {
    display: grid;
    gap: 1rem;
}

.pw-tareas-cabecera h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.pw-tareas-cabecera p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--pw-tinta-3);
}

.pw-tareas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
}

.pw-tarea {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.5rem 0.875rem;
    align-items: center;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    background: var(--pw-superficie);
    border: 1px solid var(--pw-linea);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

@media (min-width: 720px) {
    .pw-tarea {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    }
}

.pw-tarea-primaria {
    border-color: rgba(5, 150, 105, 0.35);
    background: linear-gradient(90deg, rgba(5, 150, 105, 0.08), rgba(5, 150, 105, 0.02) 40%, var(--pw-superficie));
}

.pw-tarea-aviso {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.02) 40%, var(--pw-superficie));
}

.pw-tarea-aldia {
    border-color: rgba(5, 150, 105, 0.35);
}

.pw-tarea-icono {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.625rem;
    border-radius: 0.625rem;
    background: rgba(100, 116, 139, 0.1);
    color: var(--pw-tinta-2);
}

.pw-tarea-primaria .pw-tarea-icono,
.pw-tarea-aldia .pw-tarea-icono {
    background: var(--pw-marca);
    color: #fff;
}

.pw-tarea-aviso .pw-tarea-icono {
    background: #f59e0b;
    color: #fff;
}

.pw-tarea-texto {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.pw-tarea-texto strong {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pw-tarea-texto span {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--pw-tinta-2);
}

.pw-tarea-accion {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--pw-marca);
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms ease-out;
}

.pw-tarea-accion:hover,
.pw-tarea-accion:focus-visible {
    background: var(--pw-marca-fuerte);
}

.pw-tarea-normal .pw-tarea-accion {
    color: var(--pw-marca-tinta);
    background: var(--pw-marca-fondo);
}

.pw-tarea-normal .pw-tarea-accion:hover,
.pw-tarea-normal .pw-tarea-accion:focus-visible {
    background: var(--pw-marca-suave);
}

.pw-tarea-aviso .pw-tarea-accion {
    color: var(--pw-aviso-tinta);
    background: rgba(245, 158, 11, 0.18);
}

@media (min-width: 720px) {
    .pw-tarea-accion {
        grid-column: 3;
        justify-self: end;
    }
}

/* ---------- Modo demo ---------- */

.pw-chip-demo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    margin-inline-end: 0.5rem;
    padding: 0 0.875rem 0 0.75rem;
    border-radius: 999px;
    background: #d97706;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28);
    transition: background 150ms ease-out, box-shadow 150ms ease-out;
}

.pw-chip-demo:hover,
.pw-chip-demo:focus-visible {
    background: #b45309;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45);
}

.pw-chip-demo .fi-icon,
.pw-chip-demo svg {
    width: 1rem !important;
    height: 1rem !important;
    flex: none;
}

.pw-chip-demo-detalle {
    font-weight: 500;
    opacity: 0.9;
}

@media (max-width: 640px) {
    .pw-chip-demo {
        padding: 0 0.625rem;
    }

    .pw-chip-demo-detalle {
        display: none;
    }
}

.pw-bases {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 720px) {
    .pw-bases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pw-base {
    display: grid;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    border-radius: 0.875rem;
    border: 1px solid var(--pw-linea);
    background: var(--pw-superficie);
}

.pw-base-activa {
    border-color: var(--pw-marca);
    box-shadow: 0 0 0 3px var(--pw-marca-suave);
}

.pw-base-demo.pw-base-activa {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.pw-base header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pw-base-nombre {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pw-base-estado {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--pw-marca);
    color: #fff;
}

.pw-base-demo .pw-base-estado {
    background: #f59e0b;
}

.pw-base-descripcion {
    margin: 0;
    font-size: 0.875rem;
    color: var(--pw-tinta-2);
}

.pw-base-descripcion code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.25rem;
    background: rgba(100, 116, 139, 0.1);
}

.pw-base-datos {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.pw-base-datos > div {
    display: grid;
    gap: 0.1rem;
}

.pw-base-datos dt {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pw-tinta-3);
}

.pw-base-datos dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pw-base-aviso {
    margin: 0;
    font-size: 0.875rem;
    color: var(--pw-aviso-tinta);
}

.pw-base-pie {
    margin: 1.25rem 0 0;
    max-width: 60ch;
    font-size: 0.875rem;
    color: var(--pw-tinta-2);
}

/* ---------- Acceso: Turnstile ---------- */

.pw-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
}

/* ---------- Menú lateral: invitar a un café ---------- */

.pw-cafe {
    margin: 0 1rem 1rem;
    padding: 1rem 1rem 1.125rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(217, 119, 6, 0.35);
    background: linear-gradient(160deg, #fff7e6, #fde9c4);
    color: #78350f;
}

.pw-cafe-completo {
    position: relative;
    display: grid;
    gap: 0.375rem;
}

.pw-cafe-plegar {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #b45309;
    opacity: 0.7;
}

.pw-cafe-plegar:hover,
.pw-cafe-plegar:focus-visible {
    opacity: 1;
    background: rgba(217, 119, 6, 0.15);
}

.pw-cafe-plegar svg {
    width: 0.875rem;
    height: 0.875rem;
}

.pw-cafe.pw-cafe-mini {
    padding: 0;
    border: 0;
    background: none;
}

.pw-cafe-boton-mini {
    width: 100%;
    margin-top: 0;
    min-height: 2.5rem;
    gap: 0.5rem;
}

.pw-cafe-boton-mini svg {
    width: 1rem;
    height: 1rem;
    opacity: 1;
}

.fi-sidebar:not(.fi-sidebar-open) .pw-cafe {
    display: none;
}

.pw-cafe-icono {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #d97706;
    color: #fff;
}

.pw-cafe-icono svg {
    width: 1.125rem;
    height: 1.125rem;
}

.pw-cafe-titulo {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #78350f;
}

.pw-cafe-texto {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #92400e;
}

.pw-cafe-boton {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 0.625rem;
    background: #d97706;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(120, 53, 15, 0.25);
    transition: background 150ms ease-out, transform 150ms ease-out;
}

.pw-cafe-boton:hover,
.pw-cafe-boton:focus-visible {
    background: #b45309;
}

.pw-cafe-boton:active {
    transform: translateY(1px);
}

.pw-cafe-boton svg {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.85;
}

/* Modal del café */

.pw-cafe-modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(3px);
}

.pw-cafe-modal {
    position: relative;
    width: min(100%, 30rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(28, 25, 23, 0.45), 0 0 0 1px rgba(217, 119, 6, 0.2);
}

@keyframes pw-cafe-aparece {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.pw-cafe-entra {
    animation: pw-cafe-aparece 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pw-cafe-entra { animation: none; }
}

.pw-cafe-cerrar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #92400e;
    background: rgba(255, 255, 255, 0.6);
}

.pw-cafe-cerrar:hover { background: #fff; }

.pw-cafe-cerrar svg { width: 1rem; height: 1rem; }

.pw-cafe-modal-cabecera {
    padding: 2.25rem 2rem 1.5rem;
    text-align: center;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(253, 230, 138, 0.9), transparent 70%),
        linear-gradient(180deg, #fff7e6, #fff);
}

.pw-cafe-taza {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #d97706;
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(217, 119, 6, 0.7);
}

.pw-cafe-taza svg { width: 2.125rem; height: 2.125rem; }

.pw-cafe-vapor {
    position: absolute;
    top: -0.9rem;
    width: 0.35rem;
    height: 1.1rem;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.35);
    animation: pw-vapor 2.4s ease-in-out infinite;
}

.pw-cafe-vapor:nth-child(1) { left: 1.35rem; animation-delay: 0s; }
.pw-cafe-vapor:nth-child(2) { left: 2.05rem; animation-delay: 0.5s; height: 1.4rem; top: -1.2rem; }
.pw-cafe-vapor:nth-child(3) { left: 2.75rem; animation-delay: 1s; }

@keyframes pw-vapor {
    0% { transform: translateY(0.2rem) scaleY(0.6); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: translateY(-0.7rem) scaleY(1.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pw-cafe-vapor { animation: none; opacity: 0.6; }
}

.pw-cafe-modal-sobre {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b45309;
}

.pw-cafe-modal h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1c1917;
}

.pw-cafe-modal-cuerpo {
    padding: 0.25rem 2rem 0.5rem;
    display: grid;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #44403c;
}

.pw-cafe-modal-cuerpo p { margin: 0; }

.pw-cafe-modal-remate {
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: #fff7e6;
    border-left: 3px solid #d97706;
    color: #78350f;
    font-weight: 500;
}

.pw-cafe-modal-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1.25rem 2rem 1.75rem;
}

.pw-cafe-secundario {
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #57534e;
}

.pw-cafe-secundario:hover { background: #f5f5f4; }

.pw-cafe-boton-modal {
    min-height: 2.75rem;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
}

.pw-cafe-boton-modal svg { width: 1rem; height: 1rem; opacity: 1; }

@media (max-width: 480px) {
    .pw-cafe-modal-cabecera { padding: 2rem 1.25rem 1.25rem; }
    .pw-cafe-modal-cuerpo { padding: 0.25rem 1.25rem 0.5rem; }
    .pw-cafe-modal-acciones { padding: 1rem 1.25rem 1.5rem; }
    .pw-cafe-modal-acciones > * { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Banda de suplantación (admin dentro de otra cuenta) ---------- */

:root {
    --pw-suplantacion-alto: 2.875rem;
}

.pw-suplantando {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--pw-suplantacion-alto);
    padding: 0.375rem 1rem;
    background: #4338ca;
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 8px rgba(67, 56, 202, 0.35);
}

.pw-suplantando svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.pw-suplantando-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.pw-suplantando-detalle {
    opacity: 0.85;
}

.pw-suplantando-salir {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.125rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    background: #fff;
    color: #3730a3;
    font-weight: 700;
    text-decoration: none;
}

.pw-suplantando-salir:hover,
.pw-suplantando-salir:focus-visible {
    background: #e0e7ff;
}

body:has(.pw-suplantando) .fi-topbar-ctn {
    top: var(--pw-suplantacion-alto);
}

@media (min-width: 1024px) {
    body:has(.pw-suplantando).fi-body-has-topbar:not(.fi-body-has-top-navigation) .fi-sidebar {
        top: calc(var(--topbar-height) + var(--pw-suplantacion-alto));
        height: calc(100dvh - var(--topbar-height) - var(--pw-suplantacion-alto));
    }
}

@media (max-width: 640px) {
    .pw-suplantando-detalle {
        display: none;
    }
}

/* ---------- Banner de compra de etiquetas (enlace de afiliado) ---------- */

.pw-compra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: start;
    max-width: 44rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--pw-linea);
    border-radius: 0.875rem;
    background: var(--pw-superficie);
}

.pw-compra-icono {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--pw-marca-fondo);
    color: var(--pw-marca-tinta);
}

.pw-compra-icono svg {
    width: 1.25rem;
    height: 1.25rem;
}

.pw-compra-texto strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--pw-tinta);
}

.pw-compra-texto p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pw-tinta-2);
}

.pw-compra-texto small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--pw-tinta-3);
}

.pw-compra-boton {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: 0.625rem;
    background: var(--pw-marca);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease-out;
}

.pw-compra-boton svg {
    width: 1rem;
    height: 1rem;
}

.pw-compra-boton:hover,
.pw-compra-boton:focus-visible {
    background: var(--pw-marca-fuerte);
}

.pw-compra-compacto {
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem;
}

.pw-compra-compacto .pw-compra-texto p {
    display: none;
}

@media (min-width: 720px) {
    .pw-compra {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .pw-compra-boton {
        grid-column: 3;
    }
}