/* ALL WR authenticated shell. Brand navy remains the official ficha value, not the prototype #021D3B. */
/* Sin zoom por doble pulsación en la app (el pinch-zoom sigue vivo). */
html { touch-action: manipulation; }
:root {
    --allwr-gold-hover: #C9982B;
    --allwr-gold-bg: #FDF6E6;

    /* === Paleta del rediseño ERP — adoptada SÓLO en la app autenticada.
       La landing pública (public.css :root) conserva la marca de la ficha. === */
    /* Superficies */
    --allwr-canvas: #FBF9F5;      /* papel — fondo de página */
    --allwr-surface-2: #F4F1EB;   /* relleno sutil / hover de zonas */
    /* Escala de tinta */
    --allwr-ink: #0F3554;         /* texto primario / estructura (temable por inquilino) */
    --allwr-ink-2: #5A6E7E;       /* secundario */
    --allwr-ink-3: #93A2AE;       /* terciario / hints */
    /* Acento oro */
    --allwr-gold-text: #8A6410;   /* oro accesible para texto pequeño (≥4.5:1 sobre blanco/papel) */
    --allwr-gold-dec: #C9A227;    /* oro decorativo — nunca como texto */
    /* Semántica */
    --allwr-red: #B8292F;
    --allwr-green: #1F6B4B;
    --allwr-amber: #9A6A0A;
    /* Filetes */
    --allwr-line-2: rgba(15, 53, 84, 0.14);   /* borde hover / énfasis */
    /* Foco (elemento de diseño, no parche) */
    --allwr-focus-ring: #0F3554;

    --allwr-shadow-card: 0 2px 8px rgba(2, 21, 43, 0.06);
    --allwr-shadow-hover: 0 12px 30px rgba(2, 21, 43, 0.08);
    --allwr-shadow-dropdown: 0 24px 60px rgba(2, 21, 43, 0.10);
    --allwr-success: #167A4A;
    --allwr-danger: #B23A48;
    --allwr-radius-xs: 10px;
    --allwr-radius-md: 14px;
    --allwr-radius-lg: 18px;
    /* Radios ERP más ceñidos (los consume el shell estandarizado desde Fase 2) */
    --allwr-r-sm: 6px;
    --allwr-r-md: 8px;
    --allwr-r-lg: 12px;

    /* Tooltips de marca — entrada/salida asimétricas (ver .allwr-tooltip) */
    --allwr-transition-tooltip-in: 110ms ease-out;
    --allwr-transition-tooltip-out: 80ms ease-out;

    /* Layout */
    --allwr-topbar-h: 60px;
    --allwr-sidebar-w: 248px;
    --allwr-sidebar-w-collapsed: 68px;
    --allwr-rail-w: 56px;          /* rail de iconos (Fase 2/3) */
    --allwr-nav-w: 280px;          /* menú expandido */
    --allwr-header-band: 64px;     /* banda de cabecera por herramienta */
    --allwr-magnet-gap: 24px;      /* aire del dock del scroll magnético (= ritmo vertical del dashboard) */
    --allwr-gutter: 24px;          /* gutter horizontal de página */
    --allwr-content-max: 1280px;   /* sólo formularios/lectura; tablas = 100% fluido */
    --allwr-product-card-h: 7.15rem;

    /* Masa de tinta del hero de la portada (SVG; ver app-welcome.php).
       Encuadre: cuánto se sale por cada lado respecto de la columna del hero.
       Arriba y derecha en negativo grande = sangra fuera; abajo e izquierda,
       lo justo para que el desvanecido quepa entero. */
    --allwr-hero-ink-top: -52%;
    --allwr-hero-ink-right: -21vw;
    --allwr-hero-ink-bottom: -16%;
    --allwr-hero-ink-left: -58%;
    --allwr-hero-ink-opacity: 1; /* alto común de la franja de productos: cuenta y tarjeta miden lo mismo */
}

/* Densidad — compacta por defecto; conmutador persistido por usuario (Fase 2). */
:root,
[data-density="compact"] {
    --allwr-row-h: 36px;
    --allwr-control-h: 32px;
    --allwr-card-pad: 16px;
}
[data-density="comfortable"] {
    --allwr-row-h: 44px;
    --allwr-control-h: 36px;
    --allwr-card-pad: 20px;
}

body.allwr-shell--app {
    background: var(--allwr-canvas);
    color: var(--allwr-ink);
    overflow-x: hidden;
    /* Numbers are ALWAYS tabular in the ERP (KPIs, amounts, dates, NIF/CIF,
       counters) so columns align — prompt rule, innegociable. Inter has tnum. */
    font-variant-numeric: tabular-nums;
}

.allwr-page {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.allwr-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.allwr-page-head__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.allwr-page-head__eyebrow,
.allwr-eyebrow {
    margin: 0;
    color: var(--allwr-muted);
    font: 800 0.72rem var(--allwr-font-body);
    letter-spacing: 0;
    text-transform: uppercase;
}

.allwr-page-head__title {
    margin: 0;
    color: var(--allwr-navy);
    font-family: var(--allwr-font-display);
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 700;            /* Novarese sólo trae el corte Bold */
    font-synthesis: none;       /* evita faux-bold si el navegador sintetiza */
    line-height: 1.08;
    letter-spacing: 0;
}

.allwr-page-head__lead {
    max-width: 62ch;
    margin: 0.2rem 0 0;
    color: var(--allwr-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.allwr-page-head__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* === Canonical per-tool header band (Phase 2). Matches the Billing benchmark:
   a full-bleed white strip flush to the top of the shell content, with a
   hairline rule. Tools converge to this one component, one at a time. Render:
   <header class="allwr-toolhead"> ... </header> as the FIRST child of the
   shell content, with the padded tool body below it. === */
.allwr-toolhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--allwr-space-5);
    min-height: var(--allwr-header-band);
    padding: var(--allwr-space-4) var(--allwr-gutter);
    background: var(--allwr-card);
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-toolhead__copy {
    display: grid;
    gap: var(--allwr-space-1);
    min-width: 0;
}

.allwr-toolhead__eyebrow {
    margin: 0;
    color: var(--allwr-gold-text);
    font: 500 0.72rem var(--allwr-font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.allwr-toolhead__title {
    margin: 0;
    color: var(--allwr-ink);
    font-family: var(--allwr-font-display);
    font-size: clamp(1.35rem, 1.8vw, 1.5rem);
    font-weight: 700;
    font-synthesis: none;
    line-height: 1.15;
    letter-spacing: 0;
}

.allwr-toolhead__subtitle {
    max-width: 72ch;
    margin: 0;
    color: var(--allwr-ink-2);
    font: 400 0.92rem/1.5 var(--allwr-font-body);
}

.allwr-toolhead__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--allwr-space-2);
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .allwr-toolhead {
        flex-direction: column;
        align-items: stretch;
        gap: var(--allwr-space-3);
    }
    .allwr-toolhead__actions { justify-content: flex-start; }
}

/* Segmented control (e.g. density toggle in Settings). */
.allwr-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
}
.allwr-segmented__option {
    margin: 0;
    cursor: pointer;
}
.allwr-segmented__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.allwr-segmented__option span {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: var(--allwr-radius-pill);
    color: var(--allwr-ink-2);
    font: 500 0.85rem var(--allwr-font-body);
    transition: background var(--allwr-transition-fast), color var(--allwr-transition-fast);
}
.allwr-segmented__option input:checked + span {
    background: var(--allwr-card);
    color: var(--allwr-ink);
    box-shadow: var(--allwr-shadow-card);
}
.allwr-segmented__option input:focus-visible + span {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

/* Tareas (embedded sub-app): reconcile its bespoke chrome with the rest of the
   ERP. Scoped to the embedded shell so the standalone /tasks/ app is untouched.
   Embedded, the page head is not rendered (the topbar already shows the tool
   title + description), so the scope tabs are the first row. */
body.allwr-shell--tasks .container {
    padding-top: var(--allwr-space-3);
}
body.allwr-shell--tasks .tasks-scope-tabs {
    border-bottom-color: var(--allwr-line);
}
/* The task detail drawer must sit ABOVE the ALL WR topbar (z-index 50). */
body.allwr-shell--tasks .drawer {
    z-index: 1000;
}

/* Command palette (Cmd/Ctrl+K) + shortcuts cheatsheet. */
body.allwr-cmdk-open { overflow: hidden; }
.allwr-cmdk {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
    background: rgba(2, 21, 43, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.allwr-cmdk[hidden] { display: none; }
.allwr-cmdk__dialog {
    width: min(92vw, 560px);
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    box-shadow: var(--allwr-shadow-dropdown);
    overflow: hidden;
}
.allwr-cmdk__search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--allwr-line);
}
.allwr-cmdk__search svg { width: 18px; height: 18px; color: var(--allwr-ink-3); flex: 0 0 auto; }
.allwr-cmdk__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    color: var(--allwr-ink);
    font: 400 1rem var(--allwr-font-body);
}
.allwr-cmdk kbd {
    font: 500 0.7rem var(--allwr-font-mono);
    color: var(--allwr-ink-2);
    background: var(--allwr-surface-2);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-sm);
    padding: 0.12rem 0.4rem;
    line-height: 1.2;
}
.allwr-cmdk__list {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    overflow-y: auto;
}
.allwr-cmdk__group {
    padding: 0.45rem 0.6rem 0.2rem;
    color: var(--allwr-gold-text);
    font: 500 0.66rem var(--allwr-font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.allwr-cmdk__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--allwr-r-md);
    cursor: pointer;
}
.allwr-cmdk__item.is-active { background: color-mix(in srgb, var(--allwr-ink) 8%, transparent); }
.allwr-cmdk__item-label { color: var(--allwr-ink); font: 500 0.9rem var(--allwr-font-body); }
.allwr-cmdk__item-href { color: var(--allwr-ink-2); font: 400 0.78rem var(--allwr-font-body); white-space: nowrap; }
.allwr-cmdk__empty { padding: 1.2rem 0.6rem; color: var(--allwr-ink-2); text-align: center; }

/* Loading row while the chosen destination navigates (server render takes a beat). */
.allwr-cmdk__item.is-loading { opacity: 0.75; }
.allwr-cmdk__item.is-loading .allwr-cmdk__item-href { display: none; }
.allwr-cmdk__item.is-loading::after {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 2px solid var(--allwr-line);
    border-top-color: var(--allwr-gold-text);
    border-radius: 50%;
    animation: allwr-cmdk-spin 0.6s linear infinite;
}
@keyframes allwr-cmdk-spin { to { transform: rotate(360deg); } }

/* Top navigation progress bar — instant feedback for any page change. */
.allwr-navprogress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--allwr-gold-dec);
    box-shadow: 0 0 10px var(--allwr-gold-dec);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
}

/* Skip-to-content link (WCAG 2.4.1) — off-screen until focused. */
.allwr-skip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    margin: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--allwr-card);
    color: var(--allwr-ink);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    box-shadow: var(--allwr-shadow-dropdown);
    font: 500 0.9rem var(--allwr-font-body);
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--allwr-transition-fast);
}
.allwr-skip:focus {
    transform: translateY(0);
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}
.allwr-app-shell__content:focus { outline: none; }

/* Topbar search bar reused as the command-palette trigger + its ⌘K hint. */
.allwr-topbar__search[data-allwr-cmdk-open] { cursor: pointer; }
.allwr-topbar__search[data-allwr-cmdk-open] input { cursor: pointer; pointer-events: none; }
.allwr-topbar__search-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.allwr-topbar__search-kbd kbd {
    font: 500 0.66rem var(--allwr-font-mono);
    color: var(--allwr-ink-2);
    background: var(--allwr-surface-2);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-sm);
    padding: 0.05rem 0.3rem;
    line-height: 1.35;
    transition: color var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}
.allwr-topbar__search:hover .allwr-topbar__search-kbd kbd { color: var(--allwr-ink-2); border-color: var(--allwr-line-2); }
.allwr-topbar__search-kbd:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
    border-radius: var(--allwr-r-sm);
}
@media (max-width: 640px) {
    .allwr-topbar__search-kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .allwr-cmdk__item.is-loading::after { animation: none; }
}

.allwr-shortcuts__dialog { padding: 1.25rem 1.4rem; outline: none; }
.allwr-shortcuts__title {
    margin: 0 0 0.9rem;
    color: var(--allwr-ink);
    font-family: var(--allwr-font-display);
    font-weight: 700;
    font-synthesis: none;
    font-size: 1.2rem;
}
.allwr-shortcuts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.allwr-shortcuts__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--allwr-ink-2);
    font: 400 0.9rem var(--allwr-font-body);
}
.allwr-shortcuts__keys { display: inline-flex; gap: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
    .allwr-cmdk { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.allwr-card {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-card--soft {
    background: var(--allwr-off-white);
}

.allwr-card--gold {
    border-color: color-mix(in srgb, var(--allwr-gold) 38%, var(--allwr-line));
    background: var(--allwr-gold-bg);
}

.allwr-card--navy {
    border-color: var(--allwr-navy);
    background: var(--allwr-navy);
    color: var(--allwr-card);
}

.allwr-card--interactive {
    transition:
        border-color var(--allwr-transition-base),
        box-shadow var(--allwr-transition-base);
}

.allwr-card--interactive:hover {
    border-color: var(--allwr-line-strong);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-card__head,
.allwr-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0;
}

.allwr-card__footer {
    padding: 0 1rem 1rem;
}

.allwr-card__body {
    padding: 1rem;
}

/* === Aviso de teléfono (recordatorio del dashboard + puerta de /app/connect).
       Sin transform en hover — los botones ya traen el suyo (§Motion). === */
.allwr-phone-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
}

.allwr-phone-notice__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--allwr-gold) 18%, transparent);
    color: var(--allwr-gold-text);
}

.allwr-phone-notice__icon-svg { width: 18px; height: 18px; }

.allwr-phone-notice__copy { flex: 1; min-width: 0; }

.allwr-phone-notice__title {
    margin: 0;
    color: var(--allwr-ink);
    font: 700 0.98rem var(--allwr-font-body);
}

.allwr-phone-notice__text {
    margin: 0.2rem 0 0;
    color: var(--allwr-ink-2);
    font: 400 0.88rem/1.45 var(--allwr-font-body);
    text-wrap: pretty;
}

.allwr-phone-notice__actions {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .allwr-phone-notice { flex-wrap: wrap; }
    .allwr-phone-notice__actions { width: 100%; justify-content: flex-end; }
}

/* Waitlist de bancos locales (AIS aún no abierto en la edición). */
.allwr-connect-waitlist {
    padding: 1rem 1.25rem;
}
.allwr-connect-waitlist .allwr-app__h2 {
    margin: 0 0 0.4rem;
}
.allwr-connect-waitlist p {
    margin: 0;
    color: var(--allwr-ink-2);
    line-height: 1.55;
}

.allwr-card__title {
    margin: 0;
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.allwr-card--navy .allwr-card__title {
    color: var(--allwr-card);
}

.allwr-card__meta {
    color: var(--allwr-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.allwr-btn {
    appearance: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.55rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-radius-pill);
    font: 800 0.88rem var(--allwr-font-body);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast),
        color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-btn svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.7;
}

.allwr-btn--primary {
    background: var(--allwr-navy);
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-btn--primary:hover {
    background: var(--allwr-navy-soft);
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-btn--gold {
    background: var(--allwr-gold);
    color: var(--allwr-navy);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-btn--gold:hover {
    background: var(--allwr-gold-hover);
    color: var(--allwr-navy);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-btn--ghost {
    border-color: var(--allwr-line);
    background: var(--allwr-card);
    color: var(--allwr-navy);
}

/* The color is restated: public.css (also loaded in the app) inverts it to off-white on hover. */
.allwr-btn--ghost:hover {
    border-color: var(--allwr-line-strong);
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
}

.allwr-btn--soft {
    border-color: var(--allwr-line);
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
}

.allwr-btn--soft:hover {
    border-color: var(--allwr-line-strong);
    background: var(--allwr-card);
}

/* Destructive action; allwrDialog()/allwrConfirm() emit it for kind 'danger'. */
.allwr-btn--danger {
    border-color: var(--allwr-danger);
    background: var(--allwr-danger);
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-btn--danger:hover {
    background: color-mix(in srgb, var(--allwr-danger) 88%, var(--allwr-navy));
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-hover);
}

/* Secondary destructive action: outlined in the danger tone. */
.allwr-btn--ghost.allwr-btn--danger {
    border-color: color-mix(in srgb, var(--allwr-danger) 30%, var(--allwr-line));
    background: var(--allwr-card);
    color: var(--allwr-danger);
    box-shadow: none;
}

.allwr-btn--ghost.allwr-btn--danger:hover {
    border-color: var(--allwr-danger);
    background: color-mix(in srgb, var(--allwr-danger) 7%, var(--allwr-card));
    color: var(--allwr-danger);
    box-shadow: none;
}

.allwr-btn--sm {
    min-height: 32px;
    padding: 0.38rem 0.72rem;
    font-size: 0.8rem;
}

.allwr-btn--sm svg {
    width: 15px;
    height: 15px;
}

.allwr-btn--icon {
    width: 38px;
    padding: 0;
}

.allwr-btn:disabled,
.allwr-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.56;
}

.allwr-tag,
.allwr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    border: 1px solid transparent;
    border-radius: var(--allwr-radius-pill);
    font: 800 0.75rem var(--allwr-font-body);
    line-height: 1;
    white-space: nowrap;
}

.allwr-tag {
    min-height: 1.55rem;
    padding: 0.28rem 0.55rem;
    background: var(--allwr-off-white);
    color: var(--allwr-muted);
}

.allwr-tag--navy,
.allwr-pill--navy {
    background: var(--allwr-navy);
    color: var(--allwr-card);
}

.allwr-tag--gold,
.allwr-pill--gold {
    background: var(--allwr-gold);
    color: var(--allwr-navy);
}

.allwr-tag--soft,
.allwr-pill--soft {
    border-color: var(--allwr-line);
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
}

.allwr-tag--muted,
.allwr-pill--muted {
    border-color: var(--allwr-line);
    background: var(--allwr-card);
    color: var(--allwr-muted);
}

.allwr-tag--positive {
    background: color-mix(in srgb, var(--allwr-gold-bg) 72%, var(--allwr-card));
    color: var(--allwr-gold-deep);
}

.allwr-tag--negative {
    background: color-mix(in srgb, var(--allwr-off-white) 76%, var(--allwr-line));
    color: var(--allwr-ink);
}

.allwr-pill {
    min-height: 2rem;
    padding: 0.42rem 0.75rem;
    font-size: 0.82rem;
}

.allwr-tag--sm {
    min-height: 0;
    gap: 0.25rem;
    padding: 0.14rem 0.45rem;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.3;
}

.allwr-tag--sm svg {
    width: 12px;
    height: 12px;
    flex: none;
}

.allwr-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    scrollbar-width: thin;
    scrollbar-color: var(--allwr-line-strong) transparent;
}

.allwr-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.allwr-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.allwr-table-wrap::-webkit-scrollbar-thumb {
    background: var(--allwr-line-strong);
    border-radius: var(--allwr-radius-pill);
}

.allwr-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    color: var(--allwr-ink);
    font-family: var(--allwr-font-body);
}

.allwr-table th,
.allwr-table td {
    padding: 0.78rem 0.9rem;
    border-bottom: 1px solid var(--allwr-line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.allwr-table th {
    color: var(--allwr-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Sticky header — engages inside a scrolling table wrapper; harmless elsewhere. */
.allwr-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--allwr-card);
}

/* Right-align numeric columns (opt-in) — numbers read better on the right. */
.allwr-table th.allwr-table__num,
.allwr-table td.allwr-table__num {
    text-align: right;
}

/* Movements: review-status dot (punteo) — empty (pending), green (ok), amber
   (incidence). The user toggles it by clicking; replaces the old "?"/circle. */
.allwr-app__txn-line {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* Descripción puesta por el usuario, concatenada tras la del banco en otro color. */
.allwr-app__txn-userdesc {
    color: var(--allwr-gold-text);
    font-weight: 500;
}
/* Columna "Estado conciliación": estrecha, bolita centrada. */
.allwr-app__col--status { width: 1%; white-space: nowrap; text-align: center; }
.allwr-app__col--status .allwr-app__txn-mark { margin: 0 auto; }
.allwr-app__txn-mark {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: var(--allwr-radius-pill);
    border: 1.5px solid var(--allwr-line-2);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}
.allwr-app__txn-mark:hover { border-color: var(--allwr-ink-3); }
.allwr-app__txn-mark.is-ok {
    background: var(--allwr-green);
    border-color: var(--allwr-green);
}
.allwr-app__txn-mark.is-incidence {
    background: var(--allwr-amber);
    border-color: var(--allwr-amber);
}
.allwr-app__txn-mark:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
}

/* Empty Debe/Haber cell shows a centered dash (—) where the amount would be. */
.allwr-app__col--debit:empty,
.allwr-app__col--credit:empty {
    text-align: center;
}
.allwr-app__col--debit:empty::after,
.allwr-app__col--credit:empty::after {
    content: "—";
    color: var(--allwr-ink-3);
}

/* Embed mode: the transaction detail rendered inside the drawer iframe hides the
   app chrome (topbar/sidebar/footer) — only the detail content shows. */
body.allwr-embed .allwr-topbar,
body.allwr-embed .allwr-sidebar,
body.allwr-embed .allwr-app-foot,
body.allwr-embed .allwr-skip { display: none !important; }
body.allwr-embed .allwr-app-shell { display: block; }
body.allwr-embed .allwr-app-shell__content { margin: 0; max-width: none; min-height: 100vh; }

/* Movement detail drawer — slides in from the right; iframe loads /m/<uuid>?embed=1.
   z-index above the ALL WR topbar so the ficha sits on top of everything. */
.allwr-mov-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}
.allwr-mov-drawer.is-open { pointer-events: auto; }
.allwr-mov-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 21, 43, 0);
    transition: background var(--allwr-transition-slow);
}
.allwr-mov-drawer.is-open .allwr-mov-drawer__overlay { background: rgba(2, 21, 43, 0.38); }
.allwr-mov-drawer__panel {
    position: absolute;
    inset: 0 0 0 auto;
    /* ~70 % del viewport, con suelo de 980px: por debajo la ficha no puede
       sostener sus tres columnas y degradaría a dos en portátiles de 1280px. */
    width: min(96vw, max(980px, 70vw));
    height: 100%;
    background: var(--allwr-canvas);
    box-shadow: -30px 0 80px rgba(2, 21, 43, 0.22);
    transform: translate3d(104%, 0, 0);
    transition: transform var(--allwr-transition-slow);
    display: flex;
    flex-direction: column;
}
.allwr-mov-drawer.is-open .allwr-mov-drawer__panel { transform: translate3d(0, 0, 0); }
.allwr-mov-drawer__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--allwr-radius-pill);
    border: 1px solid var(--allwr-line);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}
.allwr-mov-drawer__close:hover { background: var(--allwr-surface-2); border-color: var(--allwr-line-2); }
.allwr-mov-drawer__close:focus-visible { outline: 2px solid var(--allwr-focus-ring); outline-offset: 2px; }
.allwr-mov-drawer__frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
}
body.allwr-noscroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .allwr-mov-drawer__panel { transition: none; }
}

/* Movements summary bar (Punteados / Total Debe / Total Haber / Progreso). */
/* Dos tarjetas en modo normal (Debe/Haber) y tres conciliando: auto-fit las
   reparte sin que haya que declarar el número de columnas por modo. */
.allwr-mov-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--allwr-space-3);
    margin-bottom: var(--allwr-space-4);
}
.allwr-mov-summary__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--allwr-space-3) var(--allwr-space-4);
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
}
.allwr-mov-summary__label {
    color: var(--allwr-ink-2);
    font: 500 0.7rem var(--allwr-font-body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.allwr-mov-summary__value {
    color: var(--allwr-ink);
    font: 600 1.05rem var(--allwr-font-body);
}
.allwr-mov-summary__value--credit { color: var(--allwr-green); }
.allwr-mov-summary__item--progress { justify-content: center; }
.allwr-mov-progress {
    height: 8px;
    margin-top: 0.4rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
    overflow: hidden;
}
.allwr-mov-progress__bar {
    height: 100%;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold-dec);
    transition: width var(--allwr-transition-base);
}
@media (max-width: 760px) {
    .allwr-mov-summary { grid-template-columns: repeat(2, 1fr); }
}

.allwr-table td {
    font-size: 0.88rem;
    font-weight: 500;
}

.allwr-table tbody tr {
    transition: background var(--allwr-transition-fast);
}

.allwr-table tbody tr:hover {
    background: var(--allwr-off-white);
}

.allwr-table tr:last-child td {
    border-bottom: 0;
}

.allwr-table--compact th,
.allwr-table--compact td {
    padding-block: 0.55rem;
}

/* Reorder de columnas por drag-and-drop nativo (ver public/assets/js/table-cols.js).
   Sólo las <th> con data-col reciben draggable="true" desde JS: las anclas
   (checkbox/acciones, sin data-col) nunca lo tienen y por tanto no heredan
   el cursor de arrastre. */
table[data-allwr-colreorder] th[draggable] {
    cursor: grab;
}

table[data-allwr-colreorder] th.is-col-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

table[data-allwr-colreorder] th.is-col-drop-target {
    box-shadow: inset 2px 0 0 var(--allwr-gold-dec);
}

.allwr-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2500;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.78rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-navy);
    box-shadow: var(--allwr-shadow-dropdown);
    color: var(--allwr-card);
    font-size: 0.88rem;
    font-weight: 800;
}

.allwr-toast[hidden] {
    display: none;
}

.allwr-toast[data-kind="ok"] {
    background: var(--allwr-navy);
}

.allwr-kpi {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-kpi__label {
    color: var(--allwr-muted);
    font: 800 0.72rem var(--allwr-font-body);
    letter-spacing: 0;
    text-transform: uppercase;
}

.allwr-kpi__value {
    color: var(--allwr-navy);
    font-family: var(--allwr-font-body);   /* Inter — numbers go in sans tabular, never the display serif */
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.allwr-kpi__delta {
    color: var(--allwr-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.allwr-kpi__delta--positive {
    color: var(--allwr-green);
}

.allwr-kpi__delta--negative {
    color: var(--allwr-ink);
}

.allwr-tabs,
.allwr-seg {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
}

.allwr-tabs {
    flex-wrap: wrap;
}

.allwr-tab,
.allwr-seg__item {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--allwr-muted);
    font: 800 0.84rem var(--allwr-font-body);
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast),
        color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-tab {
    min-height: 36px;
    padding: 0.45rem 0.8rem;
    border-radius: var(--allwr-radius-pill);
}

.allwr-tab:hover,
.allwr-seg__item:hover {
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
}

.allwr-tab--active,
.allwr-tab[aria-selected="true"],
.allwr-seg__item--active,
.allwr-seg__item[aria-pressed="true"],
.allwr-seg__item[aria-selected="true"] {
    background: var(--allwr-navy);
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-seg {
    padding: 0.22rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-seg__item {
    min-height: 32px;
    padding: 0.38rem 0.75rem;
    border-radius: var(--allwr-radius-pill);
}

.allwr-avatar {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-navy);
    color: var(--allwr-gold);
    font: 900 0.82rem var(--allwr-font-body);
}

.allwr-avatar--gold {
    background: var(--allwr-gold);
    color: var(--allwr-navy);
}

.allwr-avatar--muted {
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
}

.allwr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.allwr-progress {
    width: 100%;
    height: 0.45rem;
    overflow: hidden;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-off-white);
}

.allwr-progress__bar {
    display: block;
    height: 100%;
    width: var(--allwr-progress-value, 0%);
    border-radius: inherit;
    background: var(--allwr-navy);
}

.allwr-progress__bar--gold {
    background: var(--allwr-gold);
}

.allwr-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.allwr-row {
    display: flex;
}

.allwr-col {
    display: flex;
    flex-direction: column;
}

.allwr-wrap {
    flex-wrap: wrap;
}

.allwr-vcenter {
    align-items: center;
}

.allwr-between {
    justify-content: space-between;
}

.allwr-center {
    align-items: center;
    justify-content: center;
}

.allwr-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.allwr-no-shrink {
    flex: 0 0 auto;
}

.allwr-gap-xs {
    gap: 0.35rem;
}

.allwr-gap-sm {
    gap: 0.5rem;
}

.allwr-gap-md {
    gap: 0.75rem;
}

.allwr-gap-lg {
    gap: 1rem;
}

.allwr-text-muted {
    color: var(--allwr-muted);
}

.allwr-text-navy {
    color: var(--allwr-navy);
}

.allwr-text-gold {
    color: var(--allwr-gold-deep);
}

.allwr-text-right {
    text-align: right;
}

.allwr-topbar__icon-button:focus-visible,
.allwr-topbar__chip:focus-visible,
.allwr-topbar__context-link:focus-visible,
.allwr-user-menu a:focus-visible,
.allwr-user-menu button:focus-visible,
.allwr-nav-item:focus-visible,
.allwr-btn:focus-visible,
.allwr-pill:focus-visible,
.allwr-tab:focus-visible,
.allwr-seg__item:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 3px;
}

.allwr-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--allwr-topbar-h);
    background: var(--allwr-card);
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-topbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
    min-width: 0;
}

.allwr-topbar__icon-button,
.allwr-topbar__chip {
    appearance: none;
    border: 1px solid var(--allwr-line);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 600 0.86rem var(--allwr-font-body);
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast),
        color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-topbar__icon-button {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border-radius: var(--allwr-radius-pill);
    cursor: pointer;
}

.allwr-topbar__icon-button:hover {
    background: var(--allwr-off-white);
    border-color: var(--allwr-line-strong);
}

.allwr-topbar__icon-button svg,
.allwr-topbar__chip svg,
.allwr-topbar__search svg,
.allwr-user-menu svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.7;
}

.allwr-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    color: var(--allwr-navy);
    white-space: nowrap;
}

.allwr-topbar__brand-logo {
    display: block;
    width: auto;
    /* Marca compacta: el rótulo de la herramienta («Tareas» + descripción) es
       lo que orienta; el logo sólo firma. A 40px competía con él. */
    height: 26px;
}

.allwr-topbar__context {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 1 auto;
    min-width: 0;
}

.allwr-topbar__context-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.45rem 0.78rem;
    border-radius: var(--allwr-radius-pill);
    color: var(--allwr-muted);
    font: 600 0.86rem var(--allwr-font-body);
    white-space: nowrap;
    transition:
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-topbar__context-link:hover {
    color: var(--allwr-navy);
    background: var(--allwr-off-white);
}

.allwr-topbar__context-link--active {
    background: var(--allwr-navy);
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-topbar__context-link--active:hover {
    background: var(--allwr-navy-soft);
    color: var(--allwr-card);
}

.allwr-topbar__context-link--gold:not(.allwr-topbar__context-link--active) {
    color: var(--allwr-gold-deep);
}

/* Marcador "en construcción" en la barra superior (sólo Wealthreader). El
   texto va en el `title` del enlace. */
.allwr-topbar__context-wip {
    display: inline-flex;
    align-items: center;
    margin-left: 0.34rem;
    color: var(--allwr-gold-deep);
}

.allwr-topbar__context-wip svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
}

.allwr-topbar__context-link--active .allwr-topbar__context-wip {
    color: var(--allwr-gold);
}

.allwr-topbar__profile-eyebrow {
    flex: 0 1 auto;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--allwr-gold-text);
    font: 700 0.72rem var(--allwr-font-body);
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Slot de la topbar que muestra título + descripción de la herramienta activa
   (sustituye al nav de contexto horizontal; la navegación completa vive en el
   sidebar). Ocupa el espacio central que dejó libre el nav. */
.allwr-topbar__tool {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.55rem;
    /* Separador vertical discreto entre la marca y el título de la herramienta. */
    margin-left: 0.25rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--allwr-line);
    min-height: 32px;
}

.allwr-topbar__tool-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 0.05rem;
}

/* Vuelta al listado de origen. Icono interactivo: cambia color, nunca escala
   (ver la tabla de hover en AGENTS.md §3). */
.allwr-topbar__tool-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--allwr-r-md);
    color: var(--allwr-ink-2);
    transition: background var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-topbar__tool-back:hover {
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
}

.allwr-topbar__tool-back svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.8;
}

.allwr-topbar__tool-title {
    color: var(--allwr-navy);
    font: 800 1rem var(--allwr-font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.allwr-topbar__tool-desc {
    color: var(--allwr-muted);
    font: 500 0.8rem var(--allwr-font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.allwr-topbar__search {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 220px;
    max-width: 440px;
    min-width: 0;
    padding-inline: 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-off-white);
    color: var(--allwr-muted);
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-topbar__search:focus-within {
    background: var(--allwr-card);
    border-color: var(--allwr-gold);
    box-shadow: 0 0 0 3px var(--allwr-gold-bg);
}

.allwr-topbar__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--allwr-ink);
    font: 500 0.88rem var(--allwr-font-body);
    text-overflow: ellipsis;
}

.allwr-topbar__search input::placeholder {
    color: var(--allwr-muted);
}

.allwr-topbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
}

.allwr-topbar__menu {
    position: relative;
    flex: 0 0 auto;
}

.allwr-topbar__chip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 190px;
    padding: 0.25rem 0.65rem;
    border-radius: var(--allwr-radius-pill);
    cursor: pointer;
}

.allwr-topbar__chip:hover,
.allwr-topbar__menu[data-allwr-open="true"] > .allwr-topbar__chip {
    background: var(--allwr-off-white);
    border-color: var(--allwr-line-strong);
}

.allwr-topbar__chip-text,
.allwr-topbar__user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-topbar__chevron {
    flex: 0 0 auto;
    color: var(--allwr-muted);
    transition: color var(--allwr-transition-fast), transform var(--allwr-transition-base);
}

.allwr-topbar__menu[data-allwr-open="true"] .allwr-topbar__chevron {
    color: var(--allwr-navy);
    transform: rotate(180deg);
}


/* Chips informativos (región, y el perfil de quien no puede cambiarlo): son
   texto, no control. Anulan el hover del chip para no prometer una acción que
   no existe. */


.allwr-topbar__notification {
    position: relative;
}

.allwr-topbar__notification-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold);
    box-shadow: 0 0 0 2px var(--allwr-card);
}

.allwr-topbar__notification-count {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold-soft);
    color: var(--allwr-navy);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--allwr-card);
}

.allwr-topbar__notification-count.has-unread {
    background: #fee2e2;
    color: #991b1b;
}

.allwr-topbar__avatar,
.allwr-topbar__avatar-img {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--allwr-radius-pill);
}

.allwr-topbar__avatar {
    display: inline-grid;
    place-items: center;
    background: var(--allwr-navy);
    color: var(--allwr-gold);
    font: 800 0.78rem var(--allwr-font-body);
}

.allwr-topbar__avatar-img {
    object-fit: cover;
}

.allwr-topbar__dropdown {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    width: min(360px, calc(100vw - 1.5rem));
    max-height: min(560px, calc(100vh - var(--allwr-topbar-h) - 1rem));
    overflow: auto;
    padding: 0.45rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
    z-index: 70;
}


.allwr-user-menu a,
.allwr-user-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.62rem 0.7rem;
    border: 0;
    border-radius: var(--allwr-radius-xs);
    background: transparent;
    color: var(--allwr-ink);
    font: 500 0.9rem var(--allwr-font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

.allwr-user-menu a:hover,
.allwr-user-menu button:hover:not(:disabled) {
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
}

.allwr-user-menu form {
    margin: 0;
}

/* Cabecera del menú: quién eres. No es un item, no se navega a ella. */
.allwr-user-menu__identity {
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem 0.7rem;
    border-bottom: 1px solid var(--allwr-line);
    margin-bottom: 0.35rem;
}

.allwr-user-menu__identity-name {
    color: var(--allwr-ink);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-user-menu__identity-email {
    color: var(--allwr-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rótulo de grupo: dice de qué va el bloque que viene debajo (Perfil, Cuenta,
   Idioma). Es texto, no un control: sin hover y fuera del orden de tabulación. */
.allwr-user-menu__section {
    display: block;
    padding: 0.5rem 0.7rem 0.25rem;
    /* ink-2, no ink-3: en versalita a 0.7rem hace falta 4.5:1 sobre papel. */
    color: var(--allwr-ink-2);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Item con estado: tipo de cuenta, perfil e idioma. La marca de verificación
   dice cuál está activo; la pista dice qué pasa al pulsar el resto. */
.allwr-user-menu__activity[aria-current="true"] {
    background: var(--allwr-gold-bg);
    color: var(--allwr-navy);
    cursor: default;
}

.allwr-user-menu__activity[aria-current="true"]:hover {
    background: var(--allwr-gold-bg);
}

.allwr-user-menu__activity > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-user-menu__check {
    flex: 0 0 auto;
    color: var(--allwr-gold-text);
}

.allwr-user-menu__hint {
    flex: 0 0 auto;
    color: var(--allwr-ink-2);
    font-size: 0.74rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity var(--allwr-transition-fast);
}

.allwr-user-menu__activity:hover .allwr-user-menu__hint,
.allwr-user-menu__activity:focus-visible .allwr-user-menu__hint {
    opacity: 1;
}

.allwr-user-menu__separator {
    height: 1px;
    margin: 0.4rem 0.2rem;
    background: var(--allwr-line);
}


.allwr-app-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--allwr-topbar-h));
    background: var(--allwr-canvas);
}

.allwr-app-shell__content {
    min-width: 0;
    flex: 1 1 auto;
}

.allwr-app-shell__content > .allwr-app {
    min-height: calc(100vh - var(--allwr-topbar-h));
}

.allwr-sidebar {
    width: var(--allwr-sidebar-w);
    flex: 0 0 var(--allwr-sidebar-w);
    position: sticky;
    top: var(--allwr-topbar-h);
    height: calc(100vh - var(--allwr-topbar-h));
    background: var(--allwr-card);
    border-right: 1px solid var(--allwr-line);
    margin-right: 0;
    box-shadow: 0 0 0 rgba(2, 21, 43, 0);
    z-index: 40;
    transition:
        width var(--allwr-transition-base),
        flex-basis var(--allwr-transition-base),
        margin-right var(--allwr-transition-base),
        box-shadow var(--allwr-transition-base);
}

.allwr-sidebar__nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.78rem;
    scrollbar-width: thin;
    scrollbar-color: var(--allwr-line-strong) transparent;
    /* Zona libre = clic que pliega/despliega (no hay botón en la topbar); el
       ew-resize es la affordance. Los hijos interactivos declaran su pointer. */
    cursor: ew-resize;
}

.allwr-sidebar__nav::-webkit-scrollbar {
    width: 8px;
}

.allwr-sidebar__nav::-webkit-scrollbar-track {
    background: transparent;
}

.allwr-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--allwr-line-strong);
    border-radius: var(--allwr-radius-pill);
}

.allwr-sidebar__group {
    display: grid;
    gap: 0.15rem;
}

/* La sección "Fijadas" se renderiza siempre (para que el drag-and-drop tenga
   contenedor) pero se oculta vía [hidden] mientras no tenga items; sin esta
   regla el `display: grid` de arriba (misma especificidad) ganaría por orden
   de aparición y el atributo `hidden` no surtiría efecto. */
.allwr-sidebar__group[hidden] {
    display: none;
}

.allwr-sidebar__group-items {
    display: grid;
    gap: 0.32rem;
}

.allwr-sidebar__group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0.5rem 0 0.1rem;
    padding: 0.25rem 0.55rem;
    border: 0;
    background: none;
    color: var(--allwr-muted);
    font: 800 0.68rem var(--allwr-font-body);
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    border-radius: var(--allwr-radius-xs);
    transition: color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-sidebar__group-title:hover {
    color: var(--allwr-ink-2);
    background: var(--allwr-surface-2);
}

.allwr-sidebar__group-title:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-sidebar__group-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform var(--allwr-transition-fast);
}

.allwr-sidebar__group[data-collapsed="true"] .allwr-sidebar__group-chevron {
    transform: rotate(-90deg);
}

.allwr-sidebar__group[data-collapsed="true"] .allwr-sidebar__group-items {
    display: none;
}

/* In the icon-only rail the section titles are hidden, so always show the icons
   regardless of a section's collapsed state. */
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-sidebar__group-items {
    display: grid;
}

/* "G + letter" shortcut chip on a nav item (the visible target of the keyboard nav). */
.allwr-nav-item__key {
    margin-left: auto;
    flex: 0 0 auto;
    font: 500 0.62rem var(--allwr-font-mono);
    color: var(--allwr-ink-3);
    background: var(--allwr-surface-2);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-sm);
    padding: 0.04rem 0.32rem;
    line-height: 1.3;
    transition: color var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}
.allwr-nav-item:hover .allwr-nav-item__key {
    color: var(--allwr-ink-2);
    border-color: var(--allwr-line-2);
}
.allwr-nav-item--active .allwr-nav-item__key { display: none; } /* you're already here */
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-nav-item__key { display: none; }

.allwr-nav-item {
    position: relative;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.68rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-radius-xs);
    background: transparent;
    color: var(--allwr-ink);
    font: 700 0.88rem var(--allwr-font-body);
    text-align: left;
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast),
        color var(--allwr-transition-fast),
        padding var(--allwr-transition-base),
        border-radius var(--allwr-transition-base),
        box-shadow var(--allwr-transition-base);
}

.allwr-nav-item:hover {
    background: var(--allwr-off-white);
    border-color: var(--allwr-line);
}

.allwr-nav-item--active {
    background: var(--allwr-navy);
    border-color: var(--allwr-navy);
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-nav-item--active:hover {
    background: var(--allwr-navy-soft);
    border-color: var(--allwr-navy-soft);
    color: var(--allwr-card);
}

.allwr-nav-item--active .allwr-nav-item__icon,
.allwr-nav-item--gold:not(.allwr-nav-item--active) .allwr-nav-item__icon {
    color: var(--allwr-gold);
}

.allwr-nav-item__icon {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: currentColor;
}

.allwr-nav-item__icon svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.7;
}

.allwr-nav-item__asset-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}

.allwr-nav-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-nav-item__badge {
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding-inline: 0.35rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold);
    color: var(--allwr-navy);
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Sección "en construcción" (sólo Wealthreader): icono de valla de obra en
   oro. El tooltip lo da el atributo `title` (la barra lateral clipa overflow,
   así que una burbuja CSS se cortaría). */
.allwr-nav-item__wip {
    margin-left: auto;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--allwr-gold);
}

.allwr-nav-item__wip svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}

/* Botón fijar/desfijar: acción secundaria, oculto salvo hover del item o foco
   de teclado en el propio botón. Un pin permanente en cada fila compite con la
   navegación; que un item esté fijado ya lo comunica la sección "Fijadas".
   Reordenable por drag-and-drop (ver app.js). */
.allwr-sidebar__group-items .allwr-nav-item {
    cursor: grab;
}

.allwr-nav-item.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.allwr-nav-item__pin {
    margin-left: auto;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--allwr-radius-xs);
    background: none;
    color: currentColor;
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--allwr-transition-fast), color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-nav-item__pin svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
}

.allwr-nav-item:hover .allwr-nav-item__pin,
.allwr-nav-item:focus-within .allwr-nav-item__pin,
.allwr-nav-item__pin:focus-visible {
    opacity: 1;
}

.allwr-nav-item__pin[aria-pressed="true"] {
    color: var(--allwr-gold);
}

.allwr-nav-item__pin:hover {
    background: var(--allwr-surface-2);
}

.allwr-nav-item--button {
    font-family: var(--allwr-font-body);
}

.allwr-sidebar__spacer {
    flex: 1 1 auto;
    min-height: 0.5rem;
}

.allwr-sidebar__sovereign {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding: 0.85rem;
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-navy);
    color: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    /* Tiene texto: no es zona de plegado, no hereda el ew-resize del nav. */
    cursor: default;
}

.allwr-sidebar__sovereign-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--allwr-radius-xs);
    background: color-mix(in srgb, var(--allwr-gold) 16%, transparent);
    color: var(--allwr-gold);
}

.allwr-sidebar__sovereign-icon svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.7;
}

.allwr-sidebar__sovereign-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.allwr-sidebar__sovereign-copy strong {
    font: 800 0.86rem var(--allwr-font);
    letter-spacing: 0;
}

.allwr-sidebar__sovereign-copy span {
    color: color-mix(in srgb, var(--allwr-card) 76%, transparent);
    font-size: 0.78rem;
    line-height: 1.42;
}

body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-sidebar {
    width: var(--allwr-sidebar-w-collapsed);
    flex-basis: var(--allwr-sidebar-w-collapsed);
}

body.allwr-sidebar-collapsed.allwr-sidebar-hover-expanded .allwr-sidebar {
    width: var(--allwr-sidebar-w);
    flex-basis: var(--allwr-sidebar-w);
    margin-right: calc(var(--allwr-sidebar-w-collapsed) - var(--allwr-sidebar-w));
    z-index: 40;
    box-shadow: var(--allwr-shadow-dropdown);
}

/* === Rail plegado: un único icono centrado por módulo ======================
   La columna es de ancho fijo (--allwr-sidebar-w-collapsed) y el item, un
   círculo de 40x40 centrado en ella, es lo único que se ve. Al desplegar, ese
   mismo círculo se estira hasta la franja icono + texto: la anchura la anima el
   sidebar (ya transiciona width/flex-basis) y el radio, el propio item.
   Todo lo anclado a la derecha en el menú abierto (pin, valla de obra, chip de
   atajo) se oculta aquí: en 40px se recortaría contra el borde y daría la
   sensación de overflow roto en vez de plegado deliberado. El estado sigue
   comunicándose por el `title` del enlace.
   REGLA TRANSVERSAL: el rail debe ocupar exactamente el mismo alto que el menú
   abierto, fila a fila, o al desplegar todo salta verticalmente. Eso obliga a
   dos cosas — que el círculo mida lo que la franja (40px) y que lo que aquí no
   se pinta (títulos de sección, tarjeta soberana) reserve su caja en vez de
   desaparecer. Verificado midiendo el `top` de cada item en ambos estados. === */
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-sidebar__nav {
    padding-inline: 0.75rem;
    align-items: center;
    /* La barra de scroll robaría 8px de los 44 del círculo (dejándolo ovalado)
       y ensucia una columna tan estrecha; el scroll con rueda sigue vivo. */
    scrollbar-width: none;
}

body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-sidebar__nav::-webkit-scrollbar {
    width: 0;
}

body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-sidebar__group {
    width: 100%;
}

/* El título de sección no se pinta en el rail, pero SÍ reserva su caja: sin
   esto los iconos suben y al desplegar todo salta verticalmente. Por eso
   `visibility: hidden` y no `display: none` — mantiene la altura en flujo y de
   paso saca el botón del foco y del árbol de accesibilidad. El `nowrap` evita
   que el texto envuelva a 2-3 líneas dentro de los 40px y reserve de más, y el
   `overflow: hidden` es obligatorio con él: la sección es un grid y sin anular
   la aportación min-content del texto la pista crecería hasta "CRECIMIENTO",
   descentrando los círculos de esa sección. */
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-sidebar__group-title {
    visibility: hidden;
    white-space: nowrap;
    overflow: hidden;
}

body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-nav-item__label,
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-nav-item__pin,
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-nav-item__wip {
    display: none;
}

/* Mismo motivo que el título de sección: la tarjeta "Tecnología soberana" va
   después del espaciador flexible, así que ocultarla con `display: none`
   empujaba el pie (Ajustes / Productos) 131px hacia abajo en el rail.
   Su alto depende del ancho (el copy envuelve), así que no basta con
   `visibility: hidden`: a 40px envolvería en 8 líneas y reservaría de más. Se
   le da el ancho que tiene desplegada — columna menos filete menos gutter — de
   modo que la caja reservada ES la caja real, maquetada igual en cualquier
   idioma. El desbordamiento lo recorta el `overflow-x: hidden` del nav y, al no
   pintarse, no se ve. */
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-sidebar__sovereign {
    visibility: hidden;
    width: calc(var(--allwr-sidebar-w) - 1px - 1.56rem);
    flex: 0 0 auto;
    /* Sin esto el `align-items: center` del nav lo centraría y desbordaría
       también por la IZQUIERDA, que no es zona recortable: arrastra el resto
       del contenido. Anclado al inicio, sólo desborda a la derecha. */
    align-self: flex-start;
}

body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-nav-item {
    /* Medida explícita, no `width: 100%`: el filete derecho del sidebar deja el
       contenido en 43px y el círculo saldría ovalado por 1px. Los 40px son los
       de la franja desplegada (min-height del item): igualarlos es lo que evita
       que las filas deriven verticalmente al desplegar. */
    width: 40px;
    height: 40px;
    margin-inline: auto;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 20px;
}

/* Contador como badge sobre la esquina superior derecha del icono. Ceñido al
   borde del círculo: en 40px, uno más grande o más centrado se comería el
   icono en vez de anotarlo. */
body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-nav-item__badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    padding-inline: 0.18rem;
    font-size: 0.58rem;
    box-shadow: 0 0 0 2px var(--allwr-card);
}

body.allwr-sidebar-collapsed:not(.allwr-sidebar-hover-expanded) .allwr-nav-item--active .allwr-nav-item__badge {
    box-shadow: 0 0 0 2px var(--allwr-navy);
}

/* Burbuja de tooltip de marca — capa única fija hija de <body> que app.js
   posiciona y que sustituye al title nativo en toda la app (ver AGENTS.md §3
   "Tooltips de marca"). El modificador de colocación define la dirección del
   deslizamiento de entrada. La entrada (110ms) espera 100ms en JS para no
   parpadear al barrer zonas densas; la salida es más rápida (80ms) y sin
   desplazamiento perceptible. */
.allwr-tooltip {
    position: fixed;
    z-index: 60;
    width: max-content;
    max-width: min(320px, calc(100vw - 16px));
    padding: 0.38rem 0.68rem;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    box-shadow: var(--allwr-shadow-hover);
    color: var(--allwr-ink);
    font: 600 0.8rem var(--allwr-font-body);
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--allwr-transition-tooltip-out),
        transform var(--allwr-transition-tooltip-out);
}

.allwr-tooltip--right {
    transform: translateX(-4px);
}

.allwr-tooltip--below {
    transform: translateY(-4px);
}

.allwr-tooltip--above {
    transform: translateY(4px);
}

.allwr-tooltip.is-visible {
    opacity: 1;
    transform: translate(0, 0);
    transition:
        opacity var(--allwr-transition-tooltip-in),
        transform var(--allwr-transition-tooltip-in);
}

/* La burbuja cuelga de <body>, así que los bloques reduced-motion por sección
   (p. ej. el del sidebar) no la alcanzan: necesita su propia regla. */
@media (prefers-reduced-motion: reduce) {
    .allwr-tooltip,
    .allwr-tooltip.is-visible {
        transition: none !important;
        transform: none !important;
    }
}

.allwr-billing-crm {
    display: grid;
    gap: 1rem;
}

.allwr-billing-crm__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.allwr-billing-crm__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 1rem;
    align-items: start;
}

.allwr-billing-crm__clients {
    grid-row: span 2;
    min-width: 0;
}

.allwr-billing-crm__table {
    min-width: 820px;
}

.allwr-billing-crm__table strong,
.allwr-billing-crm__table small {
    display: block;
    max-width: 26rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.allwr-billing-crm__table strong {
    color: var(--allwr-navy);
    font-weight: 900;
}

.allwr-billing-crm__table small {
    margin-top: 0.18rem;
    color: var(--allwr-muted);
    font-size: 0.76rem;
}

.allwr-billing-crm__pipeline-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.allwr-billing-crm__pipeline-list div {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
}

.allwr-billing-crm__pipeline-list span {
    color: var(--allwr-muted);
    font: 800 0.72rem var(--allwr-font-body);
    text-transform: uppercase;
}

.allwr-billing-crm__pipeline-list strong {
    color: var(--allwr-navy);
    font: 900 1.25rem var(--allwr-font);
}

.allwr-billing-crm__pipeline-list small {
    color: var(--allwr-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.allwr-billing-crm__event-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-billing-crm__event-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
}

.allwr-billing-crm__event-list .allwr-avatar svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.7;
}

.allwr-billing-crm__event-list strong,
.allwr-billing-crm__event-list small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.allwr-billing-crm__event-list strong {
    color: var(--allwr-navy);
    font-size: 0.9rem;
    font-weight: 900;
}

.allwr-billing-crm__event-list small {
    margin-top: 0.18rem;
    color: var(--allwr-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Equipo y permisos (matriz de acceso) */
.allwr-settings-page__access { grid-column: 1 / -1; }
.allwr-settings-page__access-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.allwr-settings-page__access-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.75rem 0.85rem; border: 1px solid var(--allwr-line); border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
}
.allwr-settings-page__access-item strong { display: block; color: var(--allwr-navy); }
.allwr-settings-page__access-item small { display: block; color: var(--allwr-muted); font-size: 0.78rem; }
.allwr-settings-page__perms { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.allwr-settings-page__perm-chip {
    display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
    border: 1px solid var(--allwr-line); color: var(--allwr-navy); background: #fff;
}
.allwr-settings-page__perm-chip--read { border-color: color-mix(in srgb, var(--allwr-navy) 24%, var(--allwr-line)); background: color-mix(in srgb, var(--allwr-navy) 8%, #fff); }
.allwr-settings-page__perm-chip--write { border-color: color-mix(in srgb, var(--allwr-gold) 45%, var(--allwr-line)); background: color-mix(in srgb, var(--allwr-gold) 16%, #fff); color: #7a5b12; }
.allwr-settings-page__access-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 0 0 auto; }
.allwr-settings-page__access-form {
    border: 1px solid color-mix(in srgb, var(--allwr-gold) 40%, var(--allwr-line));
    border-radius: var(--allwr-radius-md); padding: 1rem; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--allwr-off-white) 60%, #fff);
}
.allwr-settings-page__access-admin { margin: 0.75rem 0; }
.allwr-settings-page__matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.1rem 1.2rem; margin-top: 0.5rem; }
.allwr-settings-page__matrix-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--allwr-line); }
.allwr-settings-page__matrix-row span { color: var(--allwr-navy); font-size: 0.85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allwr-settings-page__matrix-row select { flex: 0 0 auto; padding: 0.3rem 0.5rem; border: 1px solid var(--allwr-line); border-radius: 8px; background: #fff; color: var(--allwr-navy); font: inherit; font-size: 0.82rem; }
@media (max-width: 760px) {
    .allwr-settings-page__access-item { flex-direction: column; align-items: stretch; }
    .allwr-settings-page__matrix { grid-template-columns: 1fr; }
}

/* Asistente de verificación de teléfono (tres pasos mutuamente excluyentes:
   PHONE, CODE y VERIFIED). Los pasos se apilan en la misma celda del grid:
   todos dimensionan el contenedor aunque estén invisibles, así el
   intercambio no reflowea la página (sin min-height medido a mano). */
.allwr-phone-wizard {
    position: relative;
    display: grid;
    overflow: hidden;
}

.allwr-phone-wizard__step {
    grid-area: 1 / 1;
    min-width: 0;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    transition:
        opacity var(--allwr-transition-slow),
        transform var(--allwr-transition-slow),
        visibility var(--allwr-transition-slow);
}

/* visibility transiciona en pasos discretos: el paso saliente sigue visible
   mientras desliza y queda oculto (y fuera del tab order) al terminar. */
.allwr-phone-wizard__step:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.allwr-phone-wizard__step--phone:not(.is-active) { transform: translateX(-24px); }
.allwr-phone-wizard__step--code:not(.is-active) { transform: translateX(24px); }
.allwr-phone-wizard__step--verified:not(.is-active) { transform: translateX(24px); }

.allwr-phone-wizard__countdown {
    margin: 0;
    color: var(--allwr-muted);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.allwr-phone-wizard__countdown:empty { display: none; }

/* Las notas de los pasos (pendiente, "aún sin teléfono", verificado) se
   renderizan siempre pero pueden llegar vacías: sin esto reservarían hueco. */
.allwr-phone-wizard__step .allwr-settings-page__note:empty { display: none; }

/* Enlace de texto para volver a cambiar el número: cambio de color, sin transform. */
.allwr-phone-wizard__change {
    border: 0;
    padding: 0;
    background: none;
    color: var(--allwr-muted);
    font: inherit;
    font-size: 0.86rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--allwr-transition-fast);
}

.allwr-phone-wizard__change:hover { color: var(--allwr-ink); }

.allwr-phone-wizard__change:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
    border-radius: var(--allwr-r-sm);
}

@media (prefers-reduced-motion: reduce) {
    .allwr-phone-wizard__step {
        transition-duration: 0.01ms;
        transform: none !important;
    }
}

/* Onboarding por dominio corporativo: la pantalla que pide la incorporación. */
.allwr-join { max-width: 720px; margin: 0 auto; padding: var(--allwr-space-4) 0; }
.allwr-join__body,
.allwr-join__note { color: var(--allwr-muted); line-height: 1.6; margin: 0 0 var(--allwr-space-3); }
.allwr-join__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.allwr-join__state { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 var(--allwr-space-2); }
.allwr-join__date { color: var(--allwr-muted); font-size: 0.88rem; }
.allwr-join__status:empty { display: none; }
.allwr-join__status { margin: var(--allwr-space-3) 0 0; font-size: 0.9rem; }
.allwr-join__status[data-state="ok"] { color: var(--allwr-navy); }
.allwr-join__status[data-state="error"] { color: #a3282b; }

/* === Revisión de la solicitud (el administrador) ==========================
   Pantalla de decisión: resumen arriba, la matriz de permisos ocupando el
   ancho, y las dos acciones ancladas al final. Es la única vista donde se
   conceden 17 secciones de una sentada, así que el cuadro va a plena anchura
   en vez de la columna de lectura de 720px. */
.allwr-join-review {
    display: grid;
    gap: var(--allwr-space-3);
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: var(--allwr-space-4) clamp(1rem, 2vw, 1.5rem);
}

.allwr-join-review__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.allwr-join-review__facts li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.35rem 1.1rem;
}

.allwr-join-review__facts li + li {
    border-left: 1px solid var(--allwr-line);
}

.allwr-join-review__fact-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--allwr-ink-3);
}

.allwr-join-review__fact-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }

.allwr-join-review__fact-copy { display: grid; gap: 0.1rem; min-width: 0; }

.allwr-join-review__fact-copy small {
    color: var(--allwr-muted);
    font-size: 0.78rem;
}

.allwr-join-review__fact-copy strong {
    color: var(--allwr-ink);
    font-weight: 700;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

/* Recuento vivo: la misma decisión resumida en una línea, para no tener que
   recorrer las 17 filas con la vista antes de aprobar. */
.allwr-join-review__counts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem var(--allwr-card-pad);
    border-top: 1px solid var(--allwr-line);
    color: var(--allwr-ink-2);
    font-size: 0.86rem;
}

.allwr-join-review__counts svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--allwr-gold-dec);
    stroke-width: 1.8;
}

.allwr-join-review__counts strong,
.allwr-join-review__counts [data-count] { color: var(--allwr-ink); font-weight: 600; }
.allwr-join-review__counts-dot { color: var(--allwr-ink-3); }

.allwr-join-review__form { display: grid; gap: var(--allwr-space-3); }

.allwr-join-review__note {
    width: 100%;
    min-height: 4.5rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 500 0.92rem var(--allwr-font-body);
    resize: vertical;
    transition: border-color var(--allwr-transition-fast);
}

.allwr-join-review__note:focus-visible {
    border-color: var(--allwr-gold);
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-join-review__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.allwr-join-review__actions .allwr-join__status { margin: 0 auto 0 0; }

/* --- Cuadro de permisos (presets + matriz) --- */
.allwr-perm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: var(--allwr-space-3);
}

.allwr-perm-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.allwr-perm-preset {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 600 0.85rem var(--allwr-font-body);
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-perm-preset:hover { border-color: var(--allwr-line-strong); background: var(--allwr-surface-2); }

.allwr-perm-preset[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--allwr-gold) 48%, var(--allwr-line));
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}

.allwr-perm-preset svg { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.7; }

.allwr-perm-copy { position: relative; display: inline-flex; align-items: center; }

.allwr-perm-copy select {
    min-height: 38px;
    max-width: 15rem;
    padding: 0.5rem 2rem 0.5rem 2.2rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 600 0.85rem var(--allwr-font-body);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-perm-copy select:hover { border-color: var(--allwr-line-strong); background: var(--allwr-surface-2); }

.allwr-perm-copy__icon,
.allwr-perm-copy__chevron {
    position: absolute;
    display: inline-flex;
    color: var(--allwr-ink-2);
    pointer-events: none;
}

.allwr-perm-copy__icon { left: 0.7rem; }
.allwr-perm-copy__chevron { right: 0.65rem; }
.allwr-perm-copy svg { width: 16px; height: 16px; stroke-width: 1.7; }

/* Banda de administrador: lo único que anula la matriz entera, así que se
   presenta como una decisión aparte y no como una fila más. */
.allwr-perm-admin {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--allwr-gold) 38%, var(--allwr-line));
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-gold-bg);
    cursor: pointer;
}

.allwr-perm-admin__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold);
    color: var(--allwr-navy);
}

.allwr-perm-admin__icon svg { width: 19px; height: 19px; stroke-width: 1.8; }

.allwr-perm-admin__copy { display: grid; gap: 0.08rem; min-width: 0; flex: 1 1 auto; }
.allwr-perm-admin__copy strong { color: var(--allwr-ink); font-size: 0.92rem; font-weight: 700; }
.allwr-perm-admin__copy small { color: var(--allwr-ink-2); font-size: 0.82rem; }

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

.allwr-perm-admin__switch {
    position: relative;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-line-strong);
    transition: background var(--allwr-transition-fast);
}

.allwr-perm-admin__switch::after {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: 0.2rem;
    width: 1.04rem;
    height: 1.04rem;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--allwr-transition-fast);
}

.allwr-perm-admin input:checked + .allwr-perm-admin__switch { background: var(--allwr-navy); }
.allwr-perm-admin input:checked + .allwr-perm-admin__switch::after { transform: translateX(1.06rem); }
.allwr-perm-admin input:focus-visible + .allwr-perm-admin__switch {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-perm-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--allwr-space-3) 0;
    max-width: 22rem;
}

.allwr-perm-search svg {
    position: absolute;
    left: 0.7rem;
    width: 16px;
    height: 16px;
    color: var(--allwr-ink-3);
    stroke-width: 1.8;
    pointer-events: none;
}

.allwr-perm-search input {
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.8rem 0.5rem 2.2rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 500 0.88rem var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-perm-search input:focus-visible {
    border-color: var(--allwr-gold);
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

/* Multicolumna, no rejilla: los grupos fluyen y se equilibran solos sea cual
   sea el número de módulos del menú, y el filete vertical sale de
   `column-rule` en vez de bordes por columna. */
.allwr-perm-matrix {
    columns: 3;
    column-gap: var(--allwr-space-4);
    column-rule: 1px solid var(--allwr-line);
}

.allwr-perm-matrix[data-disabled="true"] { opacity: 0.45; }

.allwr-perm-matrix__empty {
    margin: var(--allwr-space-3) 0 0;
    color: var(--allwr-muted);
    font-size: 0.88rem;
}

.allwr-perm-group { break-inside: avoid; margin-bottom: var(--allwr-space-4); }
.allwr-perm-group:last-child { margin-bottom: 0; }

.allwr-perm-group__title {
    margin: 0 0 0.35rem;
    color: var(--allwr-ink-2);
    font: 800 0.72rem var(--allwr-font-body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.allwr-perm-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--allwr-row-h);
    padding: 0.2rem 0;
}

.allwr-perm-row[hidden] { display: none; }

.allwr-perm-row__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--allwr-ink-2);
}

.allwr-perm-row__icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
.allwr-perm-row__asset-icon { width: 18px; height: 18px; }

.allwr-perm-row__label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--allwr-ink);
    font-size: 0.83rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-perm-seg {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    overflow: hidden;
}

.allwr-perm-seg__option { margin: 0; cursor: pointer; }
.allwr-perm-seg__option + .allwr-perm-seg__option { border-left: 1px solid var(--allwr-line); }

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

.allwr-perm-seg__option span {
    display: block;
    padding: 0.28rem 0.48rem;
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
    font: 500 0.72rem var(--allwr-font-body);
    white-space: nowrap;
    transition: background var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-perm-seg__option:hover span { background: var(--allwr-surface-2); }

.allwr-perm-seg__option input:checked + span {
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
    font-weight: 700;
}

.allwr-perm-seg__option input:focus-visible + span {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: -3px;
}

.allwr-perm-seg__option input:disabled + span { cursor: not-allowed; }

/* Tres columnas sólo cuando el módulo más largo («Lectura y edición») cabe sin
   comerse la etiqueta; por debajo, dos. */
@media (max-width: 1400px) {
    .allwr-perm-matrix { columns: 2; }
}

@media (max-width: 860px) {
    .allwr-perm-matrix { columns: 1; column-rule: none; }
    .allwr-join-review__facts li + li { border-left: 0; border-top: 1px solid var(--allwr-line); }
    .allwr-perm-row { flex-wrap: wrap; }
    .allwr-perm-seg { width: 100%; }
    .allwr-perm-seg__option { flex: 1 1 0; }
    .allwr-perm-seg__option span { text-align: center; }
    .allwr-join-review__actions .allwr-join__status { flex: 1 1 100%; margin: 0; }
}

.allwr-settings-page__join-requests {
    border: 1px solid color-mix(in srgb, var(--allwr-gold) 40%, var(--allwr-line));
    border-radius: var(--allwr-radius-md); padding: 0.9rem 1rem; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--allwr-gold) 7%, #fff);
}
.allwr-settings-page__join-requests h3 { margin: 0 0 0.6rem; color: var(--allwr-navy); font-size: 0.95rem; }
.allwr-settings-page__join-requests ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.allwr-settings-page__join-requests li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.allwr-settings-page__join-requests small { display: block; color: var(--allwr-muted); font-size: 0.82rem; }

/* Conexiones externas (integraciones) */
.allwr-settings-page__integrations { grid-column: 1 / -1; }
.allwr-settings-page__integration {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    padding: 1rem;
    margin-bottom: 0.85rem;
    background: var(--allwr-off-white);
}
.allwr-settings-page__integration:last-child { margin-bottom: 0; }
.allwr-settings-page__integration-head { display: flex; align-items: center; gap: 0.75rem; }
.allwr-settings-page__integration-head strong { display: block; color: var(--allwr-navy); }
.allwr-settings-page__integration-head small { display: block; color: var(--allwr-muted); font-size: 0.8rem; }
.allwr-settings-page__integration-warning {
    display: flex; gap: 0.5rem; align-items: flex-start;
    margin: 0.75rem 0;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--allwr-gold) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--allwr-gold) 40%, var(--allwr-line));
    color: #7a5b12; font-size: 0.8rem;
}
.allwr-settings-page__integration-warning p { margin: 0; }
.allwr-settings-page__integration-docs { color: var(--allwr-navy); font-weight: 600; }
.allwr-settings-page__integration-meta { margin: 0.5rem 0; color: var(--allwr-navy); font-size: 0.85rem; }
.allwr-settings-page__integration-form { margin-top: 0.5rem; }

.allwr-settings-page__note {
    margin: 0.75rem 0 0;
    color: var(--allwr-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.allwr-settings-page__toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
    cursor: pointer;
}

.allwr-settings-page__toggle + .allwr-settings-page__toggle,
.allwr-settings-page__range-row + .allwr-settings-page__toggle {
    margin-top: 0.65rem;
}

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

.allwr-settings-page__toggle span {
    position: relative;
    width: 2.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-line-strong);
    transition: background var(--allwr-transition-fast);
}

.allwr-settings-page__toggle span::after {
    content: "";
    position: absolute;
    top: 0.17rem;
    left: 0.18rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    transition: left var(--allwr-transition-fast);
}

.allwr-settings-page__toggle input:checked + span {
    background: var(--allwr-gold);
}

.allwr-settings-page__toggle input:checked + span::after {
    left: 1.18rem;
}

.allwr-settings-page__toggle input:focus-visible + span,
.allwr-settings-page__range-row input:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 3px;
}

.allwr-settings-page__toggle strong {
    color: var(--allwr-navy);
    font-size: 0.88rem;
    font-weight: 900;
}

.allwr-settings-page__range-row {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding: 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-settings-page__range-row label {
    color: var(--allwr-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.allwr-settings-page__range-row div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.allwr-settings-page__range-row input {
    width: 100%;
    min-width: 0;
    accent-color: var(--allwr-gold);
}

.allwr-settings-page__range-row output {
    min-width: 3rem;
    color: var(--allwr-navy);
    font-weight: 900;
    text-align: right;
}

.allwr-settings-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.allwr-settings-page__status {
    min-height: 1.2rem;
    margin: 0.65rem 0 0;
    color: var(--allwr-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.allwr-settings-page__status[data-state="ok"] {
    color: var(--allwr-gold-deep);
}

.allwr-settings-page__status[data-state="error"] {
    color: var(--allwr-ink);
}

.allwr-settings-page__form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.allwr-settings-page__field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.allwr-settings-page__field span {
    color: var(--allwr-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.allwr-settings-page__field input,
.allwr-settings-page__field select {
    width: 100%;
    min-width: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 800 0.92rem var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-fast);
}

.allwr-settings-page__field input:focus-visible,
.allwr-settings-page__field select:focus-visible {
    border-color: var(--allwr-gold);
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-settings-page__preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 0.85rem;
    padding: 0.78rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
}

.allwr-settings-page__preview span {
    color: var(--allwr-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.allwr-settings-page__preview strong {
    color: var(--allwr-navy);
    font: 900 1rem var(--allwr-font);
}

.allwr-settings-page__secret {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.85rem;
    padding: 0;
}

.allwr-settings-page__secret[hidden] {
    display: none;
}

.allwr-settings-page__secret > span {
    grid-column: 1 / -1;
    color: var(--allwr-navy);
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
}

.allwr-settings-page__secret-alert {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin: 8px 0 16px;
    padding: 14px 18px;
    border: 2px solid #F59E0B;
    border-left: 6px solid #D97706;
    border-radius: 8px;
    background-color: #FEF2C0;
    color: #92400E;
}

.allwr-settings-page__secret-alert-icon {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    color: #D97706;
    font-size: 24px;
    line-height: 1;
}

.allwr-settings-page__secret-alert p {
    min-width: 0;
    margin: 0;
    color: #92400E;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.allwr-settings-page__secret-alert strong {
    font-weight: 900;
    text-decoration: underline;
}

.allwr-settings-page__secret code {
    min-width: 0;
    overflow: auto;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 800 0.9rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
}

.allwr-settings-page__token-table {
    margin-top: 0.95rem;
}

.allwr-settings-page__token-table table {
    min-width: 720px;
}

.allwr-settings-page__token-table code {
    color: var(--allwr-navy);
    font: 800 0.8rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.allwr-settings-page__api-keys-perms {
    margin-top: var(--allwr-space-4);
    padding-top: var(--allwr-space-4);
    border-top: 1px solid var(--allwr-line);
}

.allwr-settings-page__api-keys-perms-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--allwr-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--allwr-space-3);
}

.allwr-settings-page__api-keys-perms-title {
    margin: 0 0 0.25rem;
    color: var(--allwr-ink);
    font: 800 0.95rem var(--allwr-font-body);
}

.allwr-settings-page__api-keys-presets {
    display: flex;
    gap: var(--allwr-space-2);
    flex-wrap: wrap;
}

.allwr-settings-page__api-key-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Documents */
/* Rendered document content (editor, reader, public page) */
.allwr-doc-public__field input,
.allwr-doc-public__field textarea,
.allwr-doc-public__field select {
    width: 100%;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    font: 500 0.92rem var(--allwr-font-body);
    outline: none;
    transition:
        border-color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-fast),
        background var(--allwr-transition-fast);
}
.allwr-doc-public__field textarea {
    resize: vertical;
    min-height: 26rem;
    padding: 1rem;
    line-height: 1.55;
}
.allwr-doc-public__field input:focus-visible,
.allwr-doc-public__field textarea:focus-visible,
.allwr-doc-public__field select:focus-visible {
    border-color: var(--allwr-gold);
    box-shadow: 0 0 0 3px var(--allwr-gold-soft);
}
.allwr-docs__drive {
    margin: 1rem 0;
    display: grid;
    gap: 0.4rem;
}
.allwr-docs__file-drawer {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
.allwr-docs__file {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    text-decoration: none;
}
.allwr-docs__file-embed {
    margin: 1rem 0;
    display: grid;
    gap: 0.35rem;
}
.allwr-docs__file-embed img,
.allwr-docs__file-embed video,
.allwr-docs__file-embed audio {
    width: 100%;
    max-height: 28rem;
}
.allwr-doc-rendered {
    min-height: 26rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.allwr-doc-rendered h1,
.allwr-doc-rendered h2,
.allwr-doc-rendered h3 {
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    letter-spacing: 0;
}
.allwr-doc-rendered a {
    color: var(--allwr-navy);
    text-decoration-color: var(--allwr-gold);
    text-underline-offset: 0.18em;
}
.allwr-doc-image {
    margin: 1rem 0;
}
.allwr-doc-image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
}
.allwr-doc-image figcaption {
    margin-top: 0.35rem;
    color: var(--allwr-muted);
    font-size: 0.8rem;
}
.allwr-doc-token {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--allwr-gold) 42%, var(--allwr-line));
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold-bg);
    color: var(--allwr-navy);
    font-weight: 800;
    font-size: 0.82em;
}
.allwr-doc-public-shell {
    min-height: 100vh;
    background: var(--allwr-canvas);
}
.allwr-doc-public {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
}
.allwr-doc-public__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.allwr-doc-public__brand {
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    font-weight: 900;
    text-decoration: none;
}
.allwr-doc-public__paper {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
    padding: clamp(1rem, 3vw, 2rem);
}
.allwr-doc-public__paper > h1 {
    margin: 0 0 1rem;
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    letter-spacing: 0;
}
.allwr-doc-public__field {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.9rem;
    color: var(--allwr-navy);
    font-weight: 800;
}
.allwr-doc-public__field input,
.allwr-doc-public__field textarea,
.allwr-doc-public__field select {
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    font-weight: 500;
}
.allwr-doc-public__signature-slot,
.allwr-doc-public__signature-pad,
.allwr-doc-public__otp {
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px dashed var(--allwr-line-strong);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-off-white);
}
.allwr-doc-public__signature-marker {
    width: fit-content;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--allwr-line);
    background: var(--allwr-card);
    color: var(--allwr-muted);
    font-size: 0.82rem;
    font-weight: 800;
}
.allwr-doc-public__otp p {
    margin: 0;
    color: var(--allwr-muted);
    line-height: 1.5;
}
.allwr-doc-public__otp-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}
.allwr-doc-public__signature-pad canvas {
    width: 100%;
    aspect-ratio: 720 / 220;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    touch-action: none;
}
.allwr-doc-public__signature-actions,
.allwr-doc-public__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}
/* Contract signing page (/s/<token>): steps reachable without scrolling a long contract, signature pad,
   discreet corrections. The handwriting face is self-hosted (Caveat, SIL OFL 1.1). */
@font-face {
    font-family: "Caveat";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("/assets/fonts/caveat-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Caveat";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("/assets/fonts/caveat-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.allwr-contract-sign__step,
.allwr-contract-sign__steps,
.allwr-contract-sign__correction {
    scroll-margin-top: 1rem;
}
.allwr-contract-sign__step:focus {
    outline: none;
}
.allwr-contract-sign__jump {
    position: sticky;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 1.25rem auto 0;
    padding: 0.7rem 1.2rem;
    border-radius: 12px;
    background: var(--allwr-navy);
    color: var(--allwr-off-white);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--allwr-shadow-dropdown);
    transition: background-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}
.allwr-contract-sign__jump::after {
    content: "\2193";
    margin-left: 0.5rem;
}
.allwr-contract-sign__jump:hover {
    background: var(--allwr-ink);
}
.allwr-contract-sign__jump:focus-visible,
.allwr-contract-sign__modes button:focus-visible,
.allwr-contract-sign__pad:focus-visible,
.allwr-contract-sign__correction summary:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 3px;
}
.allwr-contract-sign__steps {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--allwr-line);
}
.allwr-contract-sign__steps > h2 {
    margin: 0 0 0.75rem;
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
}
.allwr-contract-sign__progress {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style-position: inside;
    color: var(--allwr-muted);
    font-weight: 600;
}
.allwr-contract-sign__progress [aria-current="step"] {
    color: var(--allwr-navy);
}
.allwr-contract-sign__progress [data-done] {
    color: var(--allwr-success);
}
.allwr-contract-sign__hint {
    margin: 0;
    color: var(--allwr-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.allwr-contract-sign__signature {
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0 0;
    padding: 1rem;
    border: 1px dashed var(--allwr-line-strong);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-off-white);
    min-width: 0;
}
.allwr-contract-sign__signature legend {
    padding: 0 0.35rem;
    color: var(--allwr-navy);
    font-weight: 800;
}
.allwr-contract-sign__modes {
    display: inline-flex;
    gap: 0.25rem;
    width: fit-content;
    padding: 0.2rem;
    border: 1px solid var(--allwr-line);
    border-radius: 12px;
    background: var(--allwr-card);
}
.allwr-contract-sign__modes button {
    min-height: 36px;
    padding: 0.35rem 0.9rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--allwr-muted);
    font: 600 0.9rem var(--allwr-font-body);
    cursor: pointer;
    transition: background-color var(--allwr-transition-fast), color var(--allwr-transition-fast);
}
.allwr-contract-sign__modes button[aria-selected="true"] {
    background: var(--allwr-navy);
    color: var(--allwr-off-white);
}
.allwr-contract-sign__modes button:not([aria-selected="true"]):hover {
    color: var(--allwr-navy);
}
.allwr-contract-sign__pad {
    display: block;
    width: 100%;
    height: clamp(140px, 30vw, 200px);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    touch-action: none;
    cursor: crosshair;
}
.allwr-contract-sign__pad-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.allwr-contract-sign__typed-preview {
    min-height: 3.5rem;
    margin-top: 0.5rem;
    color: var(--allwr-navy);
    font: 500 clamp(2rem, 7vw, 3rem)/1.1 "Caveat", "Segoe Script", "Brush Script MT", cursive;
    overflow-wrap: anywhere;
}
.allwr-contract-sign__status:empty {
    display: none;
}
.allwr-contract-sign__status {
    margin: 0;
    color: var(--allwr-danger);
    font-weight: 600;
}
.allwr-contract-sign__form {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}
.allwr-contract-sign__form > .allwr-doc-public__field,
.allwr-contract-sign__form > .allwr-contract-sign__signature,
.allwr-contract-sign__form > .allwr-doc-public__actions {
    margin: 0;
}
.allwr-contract-sign__step > * + * {
    margin-top: 1rem;
}
.allwr-contract-sign__step > .allwr-contract-sign__form {
    margin-top: 1.25rem;
}
.allwr-contract-sign__accept {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--allwr-navy);
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}
.allwr-contract-sign__accept input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    margin: 0.1rem 0 0;
    accent-color: var(--allwr-navy);
}
.allwr-contract-sign__accept span {
    flex: 1 1 auto;
    min-width: 0;
}
.allwr-contract-sign__correction {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--allwr-line);
}
.allwr-contract-sign__correction summary {
    width: fit-content;
    color: var(--allwr-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--allwr-transition-fast);
}
.allwr-contract-sign__correction summary:hover {
    color: var(--allwr-navy);
}
.allwr-contract-sign__correction[open] summary {
    margin-bottom: 0.75rem;
    color: var(--allwr-navy);
}
@media (prefers-reduced-motion: reduce) {
    .allwr-contract-sign__jump,
    .allwr-contract-sign__modes button,
    .allwr-contract-sign__correction summary {
        transition-duration: 0.01ms;
    }
}
.allwr-doc-public__status[data-kind="ok"] {
    color: var(--allwr-success);
}
.allwr-doc-public__status[data-kind="error"] {
    color: var(--allwr-danger);
}
.allwr-app-foot {
    background: var(--allwr-card);
}

/* Shared modal used by other modules (app.js) */
.allwr-docs__search input,
.allwr-docs__title-edit input,
.allwr-docs__select,
.allwr-docs__markdown,
.allwr-doc-public__field input,
.allwr-doc-public__field textarea,
.allwr-doc-public__field select,
.allwr-docs-modal__field input,
.allwr-docs-modal__field select {
    width: 100%;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    font: 500 0.92rem var(--allwr-font-body);
    outline: none;
    transition:
        border-color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-fast),
        background var(--allwr-transition-fast);
}

.allwr-doc-public__field input,
.allwr-doc-public__field textarea,
.allwr-doc-public__field select,
.allwr-docs-modal__field input,
.allwr-docs-modal__field select {
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    font-weight: 500;
}

.allwr-docs-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(2, 21, 43, 0.48);
}

.allwr-docs-modal__dialog {
    width: min(100%, 440px);
    display: grid;
    gap: 1rem;
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
    padding: 1.2rem;
}

.allwr-docs-modal__dialog h2 {
    margin: 0;
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    font-size: 1.05rem;
}

.allwr-docs-modal__body {
    display: grid;
    gap: 0.8rem;
}

.allwr-docs-modal__field {
    display: grid;
    gap: 0.35rem;
    color: var(--allwr-navy);
    font-weight: 800;
}

/* `display: grid` gana al `display: none` que el navegador aplica a [hidden],
   así que la ocultación se declara explícitamente o los campos que el
   formulario oculta por tipo de inversión se siguen pintando. */
.allwr-docs-modal__field[hidden] { display: none; }

.allwr-docs-modal__dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Documents workspace: library · document · context panel (docs/agents/documents.md).
   Flex, not grid: a panel that turns into an overlay leaves the flow instead of
   leaving an empty track, and the container queries react to the space the
   app really has (sidebar open or folded), not to the viewport. */
/* Menus and dialogs hang from <body> and the public page renders live references too: all share the tint. */
.allwr-docs,
.allwr-docs-dialog,
.allwr-docs-menu,
.allwr-doc-public {
    --allwr-docs-tint: color-mix(in srgb, var(--allwr-navy) 7%, var(--allwr-card));
}

.allwr-docs {
    --allwr-docs-lib-w: 272px;
    --allwr-docs-panel-w: 312px;
    position: relative;
    display: flex;
    height: calc(100dvh - var(--allwr-topbar-h));
    min-height: 480px;
    overflow: clip;
    background: var(--allwr-canvas);
    color: var(--allwr-ink);
    container: docs / inline-size;
}

.allwr-docs button { font: inherit; }

/* Components here set display (.allwr-btn is inline-flex), which would beat the UA [hidden] rule. */
.allwr-docs [hidden],
.allwr-docs-dialog [hidden] { display: none; }

.allwr-docs-muted { color: var(--allwr-ink-2); font-size: 0.84rem; }

.allwr-docs-offscreen { position: fixed; left: -9999px; opacity: 0; }

.allwr-docs-input {
    width: 100%;
    min-height: 36px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 400 0.88rem var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-docs-input:hover { border-color: var(--allwr-line-strong); }

.allwr-docs-input--inline { width: 7rem; min-width: 0; flex: 1 1 7rem; min-height: 30px; }

.allwr-docs-btn-sm {
    min-height: 34px;
    padding: 0.4rem 0.8rem;
    font-size: 0.84rem;
}

.allwr-docs-btn--danger {
    background: var(--allwr-danger);
    color: var(--allwr-card);
}

.allwr-docs-btn--danger:hover {
    background: color-mix(in srgb, var(--allwr-danger) 88%, var(--allwr-navy));
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-docs-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition: color var(--allwr-transition-fast), background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-docs-icon-btn:hover { color: var(--allwr-navy); background: var(--allwr-surface-2); }
.allwr-docs-icon-btn[aria-expanded="true"],
.allwr-docs-tool--menu[aria-expanded="true"] { color: var(--allwr-navy); background: var(--allwr-docs-tint); }
.allwr-docs-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }

.allwr-docs :is(button, a, input, select, textarea, [contenteditable="true"]):focus-visible,
.allwr-docs-menu button:focus-visible,
.allwr-docs-dialog :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

/* Library ----------------------------------------------------------------- */

.allwr-docs-lib {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--allwr-docs-lib-w);
    /* Without it a long page title (nowrap in the tree) becomes the library's minimum width. */
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--allwr-line);
    background: var(--allwr-card);
}

.allwr-docs[data-library="closed"] .allwr-docs-lib { display: none; }

.allwr-docs-lib__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem 0.6rem 1rem;
}

.allwr-docs-lib__title {
    flex: 1 1 auto;
    margin: 0;
    color: var(--allwr-navy);
    font: 700 1.05rem var(--allwr-font-body);
}

.allwr-docs-lib__space {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0 0.75rem 0.5rem 1rem;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
}

.allwr-docs-lib__context {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--allwr-ink-3);
    font-size: 0.74rem;
    overflow-wrap: anywhere;
}

.allwr-docs-lib__search {
    position: relative;
    margin: 0 0.75rem 0.5rem 1rem;
}

.allwr-docs-lib__search svg {
    position: absolute;
    top: 50%;
    left: 0.65rem;
    width: 16px;
    height: 16px;
    color: var(--allwr-ink-3);
    transform: translateY(-50%);
    pointer-events: none;
}

.allwr-docs-lib__search input {
    width: 100%;
    min-height: 36px;
    padding: 0.4rem 0.6rem 0.4rem 2.1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-off-white);
    color: var(--allwr-ink);
    font: 400 0.88rem var(--allwr-font-body);
}

.allwr-seg--docs {
    display: flex;
    margin: 0 0.75rem 0.35rem 1rem;
    box-shadow: none;
}

.allwr-seg--docs .allwr-seg__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 30px;
    padding: 0.25rem 0.4rem;
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-docs-lib__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0.5rem 1rem;
}

.allwr-docs-tree ul { margin: 0; padding: 0; list-style: none; }

.allwr-docs-tree__row {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding-left: calc(var(--allwr-docs-depth, 0) * 14px);
    border-radius: var(--allwr-r-md);
}

.allwr-docs-tree__row.is-active { background: var(--allwr-docs-tint); }
.allwr-docs-tree__row.is-active .allwr-docs-tree__link { color: var(--allwr-navy); font-weight: 600; }

.allwr-docs-tree__twisty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--allwr-ink-3);
    cursor: pointer;
}

button.allwr-docs-tree__twisty:hover { color: var(--allwr-navy); }
.allwr-docs-tree__twisty svg { width: 14px; height: 14px; transition: transform var(--allwr-transition-fast); }
.allwr-docs-tree__twisty[aria-expanded="true"] svg { transform: rotate(90deg); }

.allwr-docs-tree__link,
.allwr-docs-mark {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border-radius: var(--allwr-r-md);
    color: var(--allwr-ink);
    font-size: 0.88rem;
    text-decoration: none;
    transition: color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-docs-tree__link:hover,
.allwr-docs-mark:hover { background: var(--allwr-surface-2); color: var(--allwr-navy); }

.allwr-docs-tree__link svg,
.allwr-docs-mark svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--allwr-ink-3); }

.allwr-docs-tree__link span,
.allwr-docs-mark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.allwr-docs-tree__item--archived .allwr-docs-tree__link { color: var(--allwr-ink-3); }

.allwr-docs-tree__flag {
    margin-left: auto;
    padding: 0 0.35rem;
    border-radius: var(--allwr-r-sm);
    background: color-mix(in srgb, var(--allwr-danger) 12%, var(--allwr-card));
    color: var(--allwr-danger);
    font: normal 600 0.68rem var(--allwr-font-body);
}

.allwr-docs-marks { margin: 0; padding: 0; list-style: none; }
.allwr-docs-marks li.allwr-docs-muted,
.allwr-docs-tree > .allwr-docs-muted { margin: 0; padding: 0.35rem 0.5rem; }
.allwr-docs-mark.is-active { background: var(--allwr-docs-tint); color: var(--allwr-navy); font-weight: 600; }

.allwr-docs-lib__foot {
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--allwr-line);
}

.allwr-docs-lib__foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.3rem 0.5rem;
    border: 0;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink-2);
    font-size: 0.85rem;
    cursor: pointer;
}

.allwr-docs-lib__foot-btn:hover { color: var(--allwr-navy); background: var(--allwr-surface-2); }
.allwr-docs-lib__foot-btn svg { width: 16px; height: 16px; }

.allwr-docs-results__head { margin: 0.2rem 0.5rem 0.4rem; color: var(--allwr-ink-2); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.allwr-docs-results__list { margin: 0; padding: 0; list-style: none; }
.allwr-docs-results > .allwr-docs-muted { padding: 0.4rem 0.5rem; }
.allwr-docs-results .allwr-btn { margin: 0.4rem 0.5rem; }

.allwr-docs-hit {
    display: grid;
    gap: 0.1rem;
    padding: 0.45rem 0.5rem;
    border-radius: var(--allwr-r-md);
    color: var(--allwr-ink);
    text-decoration: none;
}

.allwr-docs-hit:hover { background: var(--allwr-surface-2); }
.allwr-docs-hit strong { font-size: 0.88rem; font-weight: 600; }
.allwr-docs-hit small { color: var(--allwr-ink-3); font-size: 0.74rem; }
.allwr-docs-hit span { color: var(--allwr-ink-2); font-size: 0.8rem; overflow-wrap: anywhere; }
.allwr-docs-hit mark { background: color-mix(in srgb, var(--allwr-gold) 35%, transparent); color: inherit; border-radius: 2px; }

/* Document ------------------------------------------------------------------ */

.allwr-docs-main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.allwr-docs-main__rail {
    position: absolute;
    top: 0.9rem;
    left: 0.75rem;
    z-index: 2;
}

.allwr-docs[data-library="open"] .allwr-docs-main__rail { display: none; }
.allwr-docs[data-library="closed"] .allwr-docs-head { padding-left: 3.4rem; }

.allwr-docs-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    padding: 1rem 1.75rem 0.75rem;
}

.allwr-docs-head__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

.allwr-docs-crumbs {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.2rem;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
}

.allwr-docs-crumbs a { color: inherit; text-decoration: none; }
.allwr-docs-crumbs a:hover { color: var(--allwr-navy); text-decoration: underline; }
.allwr-docs-crumbs svg { width: 13px; height: 13px; color: var(--allwr-ink-3); }


/* A textarea so long titles wrap instead of being cut; field-sizing grows it (docs.js does where unsupported). */
.allwr-docs-title {
    display: block;
    width: calc(100% + 0.3rem);
    min-width: 0;
    field-sizing: content;
    padding: 0.1rem 0.3rem;
    margin-left: -0.3rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-navy);
    font: 700 clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem)/1.2 var(--allwr-font-body);
    overflow: hidden;
    resize: none;
    overflow-wrap: anywhere;
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-docs-title:not([readonly]):hover { border-color: var(--allwr-line); }
.allwr-docs-title:not([readonly]):focus { background: var(--allwr-card); border-color: var(--allwr-line-strong); }
.allwr-docs-title::placeholder { color: var(--allwr-ink-3); }

.allwr-docs-head__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.allwr-docs-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
}

.allwr-docs-status__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; }
.allwr-docs-status__item + .allwr-docs-status__item::before { content: "·"; color: var(--allwr-ink-3); }

.allwr-docs-status__link {
    padding: 0.1rem 0.25rem;
    border: 0;
    border-radius: var(--allwr-r-sm);
    background: transparent;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.allwr-docs-status__link:hover { color: var(--allwr-navy); background: var(--allwr-surface-2); }

.allwr-docs-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.5rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.allwr-docs-chip svg { width: 13px; height: 13px; }
.allwr-docs-chip--published { background: color-mix(in srgb, var(--allwr-success) 13%, var(--allwr-card)); color: var(--allwr-success); }
.allwr-docs-chip--signed { background: color-mix(in srgb, var(--allwr-navy) 10%, var(--allwr-card)); color: var(--allwr-navy); }
.allwr-docs-chip--archived { background: var(--allwr-surface-2); color: var(--allwr-ink-2); }
.allwr-docs-chip--pending,
.allwr-docs-chip--due_soon { background: var(--allwr-gold-bg); color: var(--allwr-gold-text); }
.allwr-docs-chip--overdue { background: color-mix(in srgb, var(--allwr-danger) 12%, var(--allwr-card)); color: var(--allwr-danger); }
.allwr-docs-chip--restored,
.allwr-docs-chip--imported { background: var(--allwr-docs-tint); color: var(--allwr-navy); }
.allwr-docs-chip--review { background: var(--allwr-gold-bg); color: var(--allwr-gold-text); }

.allwr-docs-save {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--allwr-ink-2);
}

.allwr-docs-save svg { width: 14px; height: 14px; }
.allwr-docs-save--saving svg { animation: allwr-docs-spin 1s linear infinite; }
.allwr-docs-save--dirty { color: var(--allwr-gold-text); }
.allwr-docs-save--error,
.allwr-docs-save--offline,
.allwr-docs-save--conflict { color: var(--allwr-danger); font-weight: 600; }

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

.allwr-docs-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    font-size: 0.85rem;
}

.allwr-docs-banner[hidden] { display: none; }
.allwr-docs-banner > span { flex: 1 1 16rem; }
.allwr-docs-banner svg { width: 18px; height: 18px; flex: 0 0 auto; }
.allwr-docs-banner--error { border-color: color-mix(in srgb, var(--allwr-danger) 35%, var(--allwr-card)); background: color-mix(in srgb, var(--allwr-danger) 7%, var(--allwr-card)); color: var(--allwr-danger); }
.allwr-docs-banner--conflict { border-color: var(--allwr-gold-soft); background: var(--allwr-gold-bg); color: var(--allwr-ink); }
.allwr-docs-banner--presence,
.allwr-docs-banner--warning,
.allwr-docs-banner--info { background: var(--allwr-docs-tint); color: var(--allwr-navy); }
.allwr-docs-banner--success { border-color: color-mix(in srgb, var(--allwr-success) 30%, var(--allwr-card)); background: color-mix(in srgb, var(--allwr-success) 8%, var(--allwr-card)); color: var(--allwr-ink); }

.allwr-docs-approval {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.3rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--allwr-gold-soft);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-gold-bg);
    color: var(--allwr-ink);
    font-size: 0.85rem;
}

.allwr-docs-approval[hidden] { display: none; }
.allwr-docs-approval > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--allwr-gold-text); }
.allwr-docs-approval__text { display: grid; gap: 0.1rem; flex: 1 1 16rem; min-width: 0; }
.allwr-docs-approval__text small { color: var(--allwr-ink-2); }
.allwr-docs-approval__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.allwr-docs-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 1.75rem 1.25rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    overflow: hidden;
}

.allwr-docs-editor[hidden] { display: none; }

.allwr-docs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-docs-toolbar[hidden] { display: none; }

.allwr-docs-toolbar__group {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 0 0 auto;
    padding-right: 0.25rem;
    margin-right: 0.15rem;
    border-right: 1px solid var(--allwr-line);
}

.allwr-docs-toolbar__group:last-child,
.allwr-docs-toolbar__group--end { border-right: 0; }
.allwr-docs-toolbar__group--end { margin-left: auto; }

.allwr-docs-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 32px;
    height: 32px;
    padding: 0 0.35rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color var(--allwr-transition-fast), background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-docs-tool svg { width: 17px; height: 17px; stroke-width: 1.75; }
.allwr-docs-tool:hover:not(:disabled) { color: var(--allwr-navy); background: var(--allwr-surface-2); }
.allwr-docs-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.allwr-docs-tool[aria-pressed="true"] { color: var(--allwr-navy); background: var(--allwr-docs-tint); border-color: var(--allwr-line); }
.allwr-docs-tool--text { padding: 0 0.45rem; }
.allwr-docs-tool--menu { padding: 0 0.4rem 0 0.5rem; color: var(--allwr-ink); font-weight: 500; white-space: nowrap; }
.allwr-docs-tool--menu [data-docs-style-label] { min-width: 3.9rem; text-align: left; }
.allwr-docs-tool--menu svg:last-child { width: 14px; height: 14px; color: var(--allwr-ink-3); }
/* Mode toggles stay icon-sized; the label shows only while the mode is on, so it is obvious how to leave it. */
.allwr-docs-tool--text[aria-pressed="false"] span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.allwr-docs-surface {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.allwr-docs-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.75rem 2rem 5rem;
}

/* Per-viewer choice for pages with wide tables; the width is a preference, not part of the document. */
.allwr-docs[data-width="wide"] .allwr-docs-page { max-width: 1180px; }

.allwr-docs .allwr-docs-page .allwr-docs-visual {
    position: relative;
    min-height: 55vh;
    outline: none;
    caret-color: var(--allwr-navy);
}

.allwr-docs-visual.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--allwr-ink-3);
    pointer-events: none;
}

.allwr-docs-visual[contenteditable="false"].is-empty::before { content: none; }

.allwr-docs-markdown {
    display: block;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--allwr-ink);
    font: 400 0.9rem/1.65 var(--allwr-font-mono);
    resize: vertical;
    outline: none;
    tab-size: 4;
}

.allwr-docs-markdown[hidden],
.allwr-docs-visual[hidden],
.allwr-docs-reader[hidden] { display: none; }

/* Rendered and editable content share one typography; the page is the card, so no inner frame. */
.allwr-docs .allwr-doc-rendered,
.allwr-docs-dialog .allwr-doc-rendered {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--allwr-ink);
    font: 400 1rem/1.7 var(--allwr-font-body);
    overflow-wrap: break-word;
}

.allwr-doc-rendered > :first-child { margin-top: 0; }
.allwr-doc-rendered :is(h1, h2, h3, h4, h5, h6) { margin: 1.6em 0 0.5em; color: var(--allwr-navy); font-family: var(--allwr-font-body); font-weight: 700; line-height: 1.25; }
.allwr-doc-rendered h1 { font-size: 1.85rem; }
.allwr-doc-rendered h2 { font-size: 1.45rem; }
.allwr-doc-rendered h3 { font-size: 1.18rem; }
.allwr-doc-rendered :is(h4, h5, h6) { font-size: 1rem; }
.allwr-doc-rendered p { margin: 0 0 0.9em; }
.allwr-doc-rendered a { color: var(--allwr-navy); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.allwr-doc-rendered :is(ul, ol) { margin: 0 0 0.9em; padding-left: 1.5em; }
.allwr-doc-rendered li { margin: 0.2em 0; }
.allwr-doc-rendered li > :is(ul, ol) { margin: 0.2em 0 0.2em; }
.allwr-doc-rendered li.allwr-doc-task { list-style: none; position: relative; margin-left: -1.5em; padding-left: 1.75em; }
.allwr-doc-rendered li.allwr-doc-task > input[type="checkbox"] { position: absolute; left: 0.15em; top: 0.35em; width: 1.05em; height: 1.05em; margin: 0; accent-color: var(--allwr-navy); cursor: pointer; }
.allwr-doc-rendered li.allwr-doc-task[data-checked="true"] { color: var(--allwr-ink-2); }
.allwr-doc-rendered blockquote { margin: 0 0 1em; padding: 0.2em 0 0.2em 1em; border-left: 3px solid var(--allwr-line-strong); color: var(--allwr-ink-2); }
.allwr-doc-rendered code { padding: 0.1em 0.35em; border-radius: var(--allwr-r-sm); background: var(--allwr-surface-2); font: 400 0.88em var(--allwr-font-mono); }
.allwr-doc-rendered pre { margin: 0 0 1em; padding: 0.9rem 1rem; border-radius: var(--allwr-r-lg); background: var(--allwr-surface-2); overflow-x: auto; white-space: pre; font: 400 0.86rem/1.55 var(--allwr-font-mono); }
.allwr-doc-rendered pre code { padding: 0; background: none; font-size: inherit; }
.allwr-doc-rendered hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--allwr-line); }
.allwr-doc-rendered img { max-width: 100%; height: auto; border-radius: var(--allwr-r-md); }

.allwr-doc-rendered table {
    display: block;
    max-width: 100%;
    margin: 0 0 1em;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.allwr-doc-rendered :is(th, td) { min-width: 6rem; padding: 0.45rem 0.65rem; border: 1px solid var(--allwr-line); vertical-align: top; text-align: left; }
.allwr-doc-rendered th { background: var(--allwr-off-white); color: var(--allwr-navy); font-weight: 600; }
.allwr-doc-rendered [data-align="center"] { text-align: center; }
.allwr-doc-rendered [data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }

.allwr-doc-callout {
    --allwr-docs-callout: var(--allwr-navy);
    margin: 0 0 1em;
    padding: 0.75rem 1rem 0.2rem;
    border: 1px solid color-mix(in srgb, var(--allwr-docs-callout) 22%, var(--allwr-card));
    border-left-width: 4px;
    border-radius: var(--allwr-r-lg);
    background: color-mix(in srgb, var(--allwr-docs-callout) 6%, var(--allwr-card));
}

.allwr-doc-callout::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    color: var(--allwr-docs-callout);
    font-weight: 700;
    font-size: 0.9rem;
}

.allwr-doc-callout--tip { --allwr-docs-callout: var(--allwr-success); }
.allwr-doc-callout--important { --allwr-docs-callout: var(--allwr-gold-text); }
.allwr-doc-callout--warning { --allwr-docs-callout: var(--allwr-amber); }
.allwr-doc-callout--caution { --allwr-docs-callout: var(--allwr-danger); }

.allwr-doc-atom {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
    font-size: 0.88em;
    vertical-align: baseline;
    user-select: all;
}

.allwr-doc-atom--image { display: block; padding: 0; border: 0; background: none; }
.allwr-doc-atom--image img { display: block; }
.allwr-doc-atom--field::before { content: "\270E"; color: var(--allwr-ink-3); }
.allwr-doc-atom--signature { border-style: dashed; }
.allwr-doc-atom--doc { background: var(--allwr-docs-tint); }
.allwr-doc-atom--unavailable,
.allwr-doc-atom--unsafe-link { color: var(--allwr-ink-2); border-style: dashed; }
.allwr-doc-atom--unsafe-link { text-decoration: line-through; }
.allwr-docs-visual .allwr-doc-atom[data-md]:focus,
.allwr-docs-visual .allwr-doc-atom[data-md]:hover { border-color: var(--allwr-line-strong); }

.allwr-doc-ref { display: inline-flex; gap: 0.3rem; align-items: baseline; padding: 0 0.4rem; border-radius: var(--allwr-r-sm); background: var(--allwr-docs-tint); }
.allwr-doc-ref small { color: var(--allwr-ink-2); }
.allwr-doc-ref--unavailable { color: var(--allwr-ink-2); font-style: italic; }

::highlight(allwr-docs-comment) { background-color: color-mix(in srgb, var(--allwr-gold) 30%, transparent); }
::highlight(allwr-docs-comment-active) { background-color: color-mix(in srgb, var(--allwr-gold) 55%, transparent); }

.allwr-docs .allwr-docs-page .allwr-docs-reader { min-height: 40vh; }

/* Floating helpers anchored to the text. */
.allwr-docs-bubble,
.allwr-docs-tablebar,
.allwr-docs-slash {
    position: absolute;
    z-index: 20;
    display: flex;
    gap: 0.15rem;
    padding: 0.25rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-docs-bubble[hidden],
.allwr-docs-tablebar[hidden],
.allwr-docs-slash[hidden] { display: none; }

.allwr-docs-bubble button,
.allwr-docs-tablebar button,
.allwr-docs-slash__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.25rem 0.55rem;
    border: 0;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink);
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: pointer;
}

.allwr-docs-bubble button:hover,
.allwr-docs-tablebar button:hover,
.allwr-docs-slash__item:hover,
.allwr-docs-slash__item.is-active { background: var(--allwr-surface-2); color: var(--allwr-navy); }
.allwr-docs-bubble svg,
.allwr-docs-tablebar svg,
.allwr-docs-slash svg { width: 15px; height: 15px; }

.allwr-docs-slash {
    flex-direction: column;
    width: 250px;
    max-height: 320px;
    overflow-y: auto;
}

.allwr-docs-slash__item { justify-content: flex-start; width: 100%; }

.allwr-docs-empty {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    margin: auto;
    padding: 2rem;
    max-width: 30rem;
    text-align: center;
    color: var(--allwr-ink-2);
}

.allwr-docs-empty[hidden] { display: none; }
.allwr-docs-empty > svg { width: 40px; height: 40px; color: var(--allwr-ink-3); }
.allwr-docs-empty h2 { margin: 0; color: var(--allwr-navy); font: 700 1.2rem var(--allwr-font-body); }
.allwr-docs-empty p { margin: 0; }

/* Context panel ---------------------------------------------------------------- */

.allwr-docs-panel {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--allwr-docs-panel-w);
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--allwr-line);
    background: var(--allwr-card);
}

.allwr-docs[data-panel="closed"] .allwr-docs-panel { display: none; }

.allwr-docs-panel__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.6rem 0 0.75rem;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-docs-panel__tabs { display: flex; gap: 0.2rem; flex: 1 1 auto; }

.allwr-docs-panel__tabs button {
    padding: 0.5rem 0.6rem 0.6rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--allwr-ink-2);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.allwr-docs-panel__tabs button:hover { color: var(--allwr-navy); }
.allwr-docs-panel__tabs button[aria-selected="true"] { color: var(--allwr-navy); border-bottom-color: var(--allwr-navy); }
.allwr-docs-count:not(:empty) { margin-left: 0.2rem; padding: 0 0.4rem; border-radius: var(--allwr-radius-pill); background: var(--allwr-gold-bg); color: var(--allwr-gold-text); font-size: 0.72rem; }

.allwr-docs-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.9rem;
    font-size: 0.86rem;
}

.allwr-docs-panel__body[hidden] { display: none; }

.allwr-docs-props { display: grid; gap: 0.55rem; margin: 0; }
.allwr-docs-prop { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.allwr-docs-prop dt { color: var(--allwr-ink-2); font-size: 0.8rem; }
.allwr-docs-prop dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.allwr-docs-prop dd > small { flex-basis: 100%; color: var(--allwr-ink-2); font-size: 0.76rem; }
.allwr-docs-prop dd .allwr-docs-status__link { padding-left: 0; padding-right: 0; }
.allwr-docs-prop code { font: 400 0.76rem var(--allwr-font-mono); overflow-wrap: anywhere; }

.allwr-docs-labels { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

.allwr-docs-label {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.2rem 0.1rem 0.5rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
    font-size: 0.78rem;
    font-weight: 600;
}

.allwr-docs-label button { display: inline-flex; padding: 0.1rem; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.allwr-docs-label button:hover { background: color-mix(in srgb, var(--allwr-gold) 25%, transparent); }
.allwr-docs-label svg { width: 12px; height: 12px; }

.allwr-docs-info__group + .allwr-docs-info__group { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--allwr-line); }
.allwr-docs-info__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 28px; margin-bottom: 0.45rem; }
.allwr-docs-info__head h3,
.allwr-docs-info__group > summary { margin: 0; color: var(--allwr-navy); font-size: 0.84rem; font-weight: 700; }
.allwr-docs-info__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.allwr-docs-info__empty { margin: 0.45rem 0 0; }
.allwr-docs-info__sub { margin: 0.6rem 0 0.25rem; color: var(--allwr-ink-2); font-size: 0.76rem; font-weight: 600; }
.allwr-docs-tech > summary { cursor: pointer; }
.allwr-docs-tech[open] > summary { margin-bottom: 0.5rem; }

.allwr-docs-btn-xs { gap: 0.25rem; min-height: 28px; padding: 0.2rem 0.55rem; font-size: 0.78rem; }
.allwr-docs-btn-xs svg { width: 14px; height: 14px; }
.allwr-docs-icon-btn--sm { width: 28px; height: 28px; }
.allwr-docs-icon-btn--sm svg { width: 15px; height: 15px; }

.allwr-docs-rel { display: grid; gap: 0.15rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.allwr-docs-rel li { display: flex; align-items: center; gap: 0.2rem; }
.allwr-docs-rel a { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; padding: 0.3rem 0.4rem; border-radius: var(--allwr-r-md); color: var(--allwr-navy); text-decoration: none; }
.allwr-docs-rel a:hover { background: var(--allwr-surface-2); }
.allwr-docs-rel a span { min-width: 0; overflow-wrap: anywhere; }
.allwr-docs-rel svg { width: 15px; height: 15px; flex: 0 0 auto; }
.allwr-docs-rel--quiet a { color: var(--allwr-ink-2); font-size: 0.82rem; }
.allwr-docs-rel__task { display: flex; align-items: flex-start; gap: 0.4rem; flex: 1 1 auto; min-width: 0; padding: 0.3rem 0.4rem; border-radius: var(--allwr-r-md); color: var(--allwr-navy); text-decoration: none; }
a.allwr-docs-rel__task:hover { background: var(--allwr-surface-2); }
.allwr-docs-rel__task svg { margin-top: 0.15rem; }
.allwr-docs-rel__task > span { display: grid; min-width: 0; }
.allwr-docs-rel__task strong { font-weight: 600; overflow-wrap: anywhere; }
.allwr-docs-rel__task small { color: var(--allwr-ink-2); font-size: 0.76rem; }

.allwr-docs-composer { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.allwr-docs-composer .allwr-btn { justify-self: end; }

.allwr-docs-quote {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 0.4rem;
    padding: 0.3rem 1.8rem 0.3rem 0.6rem;
    border: 0;
    border-left: 3px solid var(--allwr-gold);
    background: var(--allwr-gold-bg);
    color: var(--allwr-ink);
    font-size: 0.8rem;
    text-align: left;
    overflow-wrap: anywhere;
}

.allwr-docs-quote--link { cursor: pointer; }
.allwr-docs-quote--link:hover { background: color-mix(in srgb, var(--allwr-gold) 22%, var(--allwr-card)); }
.allwr-docs-quote .allwr-docs-icon-btn { position: absolute; top: 0; right: 0; }

.allwr-docs-thread { margin-bottom: 0.75rem; padding: 0.65rem; border: 1px solid var(--allwr-line); border-radius: var(--allwr-r-lg); }
.allwr-docs-thread.is-active { border-color: var(--allwr-gold); box-shadow: 0 0 0 1px var(--allwr-gold-soft); }
.allwr-docs-thread.is-resolved { opacity: 0.85; }
.allwr-docs-comment header { display: flex; justify-content: space-between; gap: 0.5rem; }
.allwr-docs-comment header time { color: var(--allwr-ink-3); font-size: 0.74rem; }
.allwr-docs-comment p { margin: 0.2rem 0 0.5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.allwr-docs-comment + .allwr-docs-comment { padding-left: 0.6rem; border-left: 2px solid var(--allwr-line); }
.allwr-docs-thread__actions { display: flex; gap: 0.4rem; align-items: center; }
.allwr-docs-thread__actions .allwr-docs-input { min-height: 32px; }
.allwr-docs-orphan { display: flex; gap: 0.35rem; align-items: center; margin: 0 0 0.4rem; color: var(--allwr-amber); font-size: 0.78rem; }
.allwr-docs-orphan svg { width: 14px; height: 14px; }
.allwr-docs-resolved summary { margin: 0.5rem 0; color: var(--allwr-ink-2); cursor: pointer; }

.allwr-docs-scrim {
    position: absolute;
    inset: 0;
    z-index: 29;
    background: color-mix(in srgb, var(--allwr-navy) 38%, transparent);
}

.allwr-docs-scrim[hidden] { display: none; }

/* Menus and dialogs (attached to body) --------------------------------------------- */

.allwr-docs-menu {
    position: absolute;
    z-index: 1200;
    display: grid;
    min-width: 220px;
    padding: 0.3rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-docs-menu__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 36px;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink);
    font: 400 0.88rem var(--allwr-font-body);
    text-align: left;
    cursor: pointer;
}

.allwr-docs-menu__item:hover:not(:disabled) { background: var(--allwr-surface-2); color: var(--allwr-navy); }
.allwr-docs-menu__item:disabled { opacity: 0.45; cursor: not-allowed; }
.allwr-docs-menu__item svg { width: 16px; height: 16px; color: var(--allwr-ink-2); }
.allwr-docs-menu__item small { margin-left: auto; color: var(--allwr-ink-3); font-size: 0.74rem; }
.allwr-docs-menu__item--danger,
.allwr-docs-menu__item--danger svg { color: var(--allwr-danger); }
.allwr-docs-menu__sep { height: 1px; margin: 0.25rem 0.3rem; background: var(--allwr-line); }

.allwr-docs-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-docs-dialog--wide { width: min(1080px, calc(100vw - 32px)); }
.allwr-docs-dialog::backdrop { background: color-mix(in srgb, var(--allwr-navy) 45%, transparent); }
.allwr-docs-dialog__box { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); margin: 0; }
.allwr-docs-dialog__head { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1rem 0.5rem 1.25rem; }
.allwr-docs-dialog__head h2 { flex: 1 1 auto; margin: 0; color: var(--allwr-navy); font: 700 1.1rem var(--allwr-font-body); }
.allwr-docs-dialog__body { display: grid; gap: 0.8rem; padding: 0.25rem 1.25rem 1rem; overflow-y: auto; font-size: 0.9rem; }
.allwr-docs-dialog__body p { margin: 0; }
.allwr-docs-dialog__body h3 { margin: 0.3rem 0 0; color: var(--allwr-navy); font-size: 0.92rem; }
.allwr-docs-dialog__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem 1rem; border-top: 1px solid var(--allwr-line); }

.allwr-docs-field { display: grid; gap: 0.3rem; color: var(--allwr-ink); font-size: 0.84rem; font-weight: 600; }
.allwr-docs-field :is(input, select, textarea) { width: 100%; min-height: 38px; padding: 0.45rem 0.6rem; border: 1px solid var(--allwr-line); border-radius: var(--allwr-r-md); background: var(--allwr-card); color: var(--allwr-ink); font: 400 0.9rem var(--allwr-font-body); }
.allwr-docs-field__error { color: var(--allwr-danger); font-size: 0.82rem; }
.allwr-docs-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.88rem; cursor: pointer; }
.allwr-docs-check input { width: 18px; height: 18px; margin-top: 0.1rem; accent-color: var(--allwr-navy); }
.allwr-docs-warning { padding: 0.5rem 0.7rem; border-radius: var(--allwr-r-md); background: var(--allwr-gold-bg); color: var(--allwr-ink); font-size: 0.85rem; }
.allwr-docs-warning[hidden] { display: none; }

.allwr-docs-choice { display: grid; gap: 0.4rem; }
.allwr-docs-choice__item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid var(--allwr-line); border-radius: var(--allwr-r-lg); cursor: pointer; }
.allwr-docs-choice__item:hover { border-color: var(--allwr-line-strong); box-shadow: var(--allwr-shadow-card); }
.allwr-docs-choice__item:has(input:checked) { border-color: var(--allwr-navy); background: var(--allwr-docs-tint); }
.allwr-docs-choice__item span { display: grid; }
.allwr-docs-choice__item small { color: var(--allwr-ink-2); }

.allwr-docs-pick,
.allwr-docs-members,
.allwr-docs-share__links { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.allwr-docs-pick button { display: grid; width: 100%; padding: 0.45rem 0.6rem; border: 1px solid transparent; border-radius: var(--allwr-r-md); background: transparent; color: var(--allwr-ink); text-align: left; cursor: pointer; }
.allwr-docs-pick button:hover { border-color: var(--allwr-line); background: var(--allwr-surface-2); }
.allwr-docs-pick small,
.allwr-docs-members small,
.allwr-docs-share__links small { color: var(--allwr-ink-2); font-size: 0.78rem; }
.allwr-docs-members li,
.allwr-docs-share__links li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--allwr-line); }
.allwr-docs-members li > span,
.allwr-docs-share__links li > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.allwr-docs-share__section { display: grid; gap: 0.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--allwr-line); }
.allwr-docs-share__section:last-child { border-bottom: 0; }
.allwr-docs-share__create { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.5rem; align-items: end; }

.allwr-docs-history { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 1rem; min-height: 55vh; }
.allwr-docs-history__list { display: grid; align-content: start; gap: 0.25rem; margin: 0; padding: 0; list-style: none; max-height: 65vh; overflow-y: auto; }
.allwr-docs-history__list button { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; width: 100%; padding: 0.5rem 0.6rem; border: 1px solid transparent; border-radius: var(--allwr-r-md); background: transparent; color: var(--allwr-ink); text-align: left; cursor: pointer; }
.allwr-docs-history__list button:hover { background: var(--allwr-surface-2); }
.allwr-docs-history__list button.is-active { border-color: var(--allwr-line-strong); background: var(--allwr-docs-tint); }
.allwr-docs-history__list small { flex-basis: 100%; color: var(--allwr-ink-2); font-size: 0.76rem; }
.allwr-docs-history__view { min-width: 0; max-height: 65vh; overflow-y: auto; }
.allwr-docs-history__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.75rem; }
.allwr-docs-history__tabs { display: flex; gap: 0.2rem; }
.allwr-docs-history__tabs button { padding: 0.3rem 0.6rem; border: 1px solid var(--allwr-line); border-radius: var(--allwr-r-md); background: var(--allwr-card); color: var(--allwr-ink-2); cursor: pointer; }
.allwr-docs-history__tabs button[aria-selected="true"] { border-color: var(--allwr-navy); color: var(--allwr-navy); }
.allwr-docs-history__view [hidden] { display: none; }

.allwr-docs-diff { display: grid; gap: 0.35rem; font-size: 0.88rem; }
.allwr-docs-diff__row { padding: 0.4rem 0.6rem; border-radius: var(--allwr-r-md); background: var(--allwr-off-white); white-space: pre-wrap; overflow-wrap: anywhere; }
.allwr-docs-diff__row--add { background: color-mix(in srgb, var(--allwr-success) 10%, var(--allwr-card)); }
.allwr-docs-diff__row--del { background: color-mix(in srgb, var(--allwr-danger) 8%, var(--allwr-card)); }
.allwr-docs-diff__sign { margin-right: 0.4rem; font-weight: 700; }
.allwr-docs-diff__row--skip { background: transparent; color: var(--allwr-ink-3); font-size: 0.8rem; text-align: center; }
.allwr-docs-diff ins { background: color-mix(in srgb, var(--allwr-success) 22%, transparent); color: inherit; text-decoration: underline; }
.allwr-docs-diff del { background: color-mix(in srgb, var(--allwr-danger) 16%, transparent); color: inherit; }

/* Adapting to the space the app has ------------------------------------------------ */

@container docs (max-width: 1240px) {
    .allwr-docs-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        width: min(340px, 92%);
        box-shadow: var(--allwr-shadow-dropdown);
    }
}

@container docs (max-width: 900px) {
    .allwr-docs-lib {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 31;
        width: min(300px, 88%);
        box-shadow: var(--allwr-shadow-dropdown);
    }

    .allwr-docs .allwr-docs-main__rail { display: block; }
    .allwr-docs .allwr-docs-head { padding: 0.75rem 1rem 0.5rem 3.4rem; }
    .allwr-docs-editor { margin: 0 0.75rem 0.75rem; }
    .allwr-docs-page { padding: 1.25rem 1rem 4rem; }
}

@container docs (max-width: 620px) {
    .allwr-docs-head__actions { width: 100%; justify-content: flex-end; }
    .allwr-docs-head__actions .allwr-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .allwr-docs-toolbar { flex-wrap: nowrap; overflow-x: auto; }
    .allwr-docs-share__create { grid-template-columns: minmax(0, 1fr); }
    .allwr-docs-history { grid-template-columns: minmax(0, 1fr); }
    .allwr-docs-prop { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

@media (pointer: coarse) {
    .allwr-docs-tool,
    .allwr-docs-icon-btn { min-width: 44px; height: 44px; }
    .allwr-docs-tree__link,
    .allwr-docs-mark,
    .allwr-docs-menu__item { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-docs *,
    .allwr-docs *::before,
    .allwr-docs-menu *,
    .allwr-docs-dialog * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .allwr-docs :is(button, a):is(:hover, :focus-visible, :active) { transform: none !important; }
}

@media (max-width: 1180px) {
    .allwr-billing-crm__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .allwr-billing-crm__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-billing-crm__clients {
        grid-row: auto;
    }

    .allwr-settings-page__form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .allwr-topbar__inner {
        gap: 0.45rem;
        padding-inline: 0.6rem;
    }

    .allwr-topbar__context {
        display: none;
    }

    .allwr-topbar__tool-desc {
        display: none;
    }

    .allwr-topbar__brand-logo {
        height: 26px;
    }

    .allwr-topbar__search {
        flex-basis: 150px;
        padding-inline: 0.65rem;
    }

    .allwr-topbar__chip {
        max-width: 150px;
    }

    .allwr-topbar__user-name {
        display: none;
    }
}

@media (max-width: 760px) {
    .allwr-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .allwr-page-head__actions {
        justify-content: flex-start;
    }

    .allwr-topbar__profile-eyebrow,
    .allwr-topbar__chip-text {
        display: none;
    }

    .allwr-topbar__search {
        flex: 1 1 90px;
        min-width: 0;
    }

    .allwr-billing-crm__kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-billing-crm__event-list li {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .allwr-doc-public__actions,
    .allwr-docs-modal__dialog footer {
        align-items: stretch;
        flex-direction: column;
    }

    .allwr-doc-public__actions .allwr-btn,
    .allwr-docs-modal__dialog footer .allwr-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-page *,
    .allwr-page *::before,
    .allwr-page *::after,
    .allwr-topbar *,
    .allwr-topbar *::before,
    .allwr-topbar *::after,
    .allwr-sidebar,
    .allwr-sidebar *,
    .allwr-sidebar *::before,
    .allwr-sidebar *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .allwr-page *:hover,
    .allwr-page *:focus-visible,
    .allwr-page *:active,
    .allwr-topbar *:hover,
    .allwr-topbar *:focus-visible,
    .allwr-topbar *:active,
    .allwr-sidebar *:hover,
    .allwr-sidebar *:focus-visible,
    .allwr-sidebar *:active {
        transform: none !important;
    }
}

/* === Formularios: constructor (forms-builder.js), informe (forms-report.js) y
   motor de respuesta (forms-runtime.js, también en /d/<uuid>, enlaces de invitado y
   /app/documents/<uuid>/respond). Reglas: docs/agents/documents.md «Formularios».
   Tokens únicos, transiciones canónicas, hover sin scale ni translateY. === */

.allwr-docs[data-form="on"] .allwr-docs-editor { display: none; }

.allwr-docs-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 1.75rem 1.25rem;
}

.allwr-docs-form[hidden] { display: none; }

/* Builder ----------------------------------------------------------------- */

.allwr-fb {
    --allwr-fb-preview-w: 400px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.75rem;
    container: fb / inline-size;
}

.allwr-fb [hidden] { display: none; }

.allwr-fb__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.allwr-fb__bar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.allwr-fb__pane {
    flex: 1 1 auto;
    min-height: 0;
}

.allwr-fb__build {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--allwr-fb-preview-w);
    gap: 1rem;
}

.allwr-fb[data-preview="closed"] .allwr-fb__build { grid-template-columns: minmax(0, 1fr); }
.allwr-fb[data-preview="closed"] .allwr-fb__preview { display: none; }

.allwr-fb__editor,
.allwr-fb__settings,
.allwr-fb__responses {
    min-height: 0;
    overflow-y: auto;
    padding: 0.15rem 0.25rem 2rem 0;
}

.allwr-fb__list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-fb-q {
    position: relative;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-fb-q:hover { border-color: var(--allwr-line-2); }
.allwr-fb-q.is-open { border-color: var(--allwr-line-2); box-shadow: var(--allwr-shadow-hover); }
.allwr-fb-q.is-dragging { opacity: 0.45; }
.allwr-fb-q.is-drop-before { box-shadow: 0 -3px 0 var(--allwr-gold); }
.allwr-fb-q.is-drop-after { box-shadow: 0 3px 0 var(--allwr-gold); }

.allwr-fb-q__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.6rem 0.55rem 0.35rem;
}

.allwr-fb-q__grip {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 34px;
    border: 0;
    border-radius: var(--allwr-r-sm);
    background: transparent;
    color: var(--allwr-ink-3);
    cursor: grab;
    transition: color var(--allwr-transition-fast);
}

.allwr-fb-q__grip:hover { color: var(--allwr-navy); }
.allwr-fb-q__grip svg { width: 16px; height: 16px; }

.allwr-fb-q__num {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    padding: 0.2rem 0.5rem;
    border-radius: var(--allwr-r-md);
    background: var(--allwr-docs-tint);
    color: var(--allwr-ink);
    font-size: 0.78rem;
    font-weight: 700;
}

.allwr-fb-q__num svg { width: 14px; height: 14px; color: var(--allwr-gold-text); }

.allwr-fb-q__title {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink);
    font: 600 0.98rem var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-fb-q__title:hover { background: var(--allwr-surface-2); }
.allwr-fb-q__title:focus { border-color: var(--allwr-line-2); background: var(--allwr-card); }
.allwr-fb-q__title::placeholder { color: var(--allwr-ink-3); font-weight: 500; }

.allwr-fb-q__req { color: var(--allwr-gold-text); font-weight: 800; }

.allwr-fb-q__body {
    display: grid;
    gap: 0.75rem;
    padding: 0 1rem 1rem 2.6rem;
}

.allwr-fb-q__desc { resize: vertical; }

.allwr-fb-q__row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
}

.allwr-fb-q__row .allwr-fb-field { flex: 0 1 14rem; }
.allwr-fb-q__row .allwr-fb-check { align-self: center; }

.allwr-fb-q__settings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.allwr-fb-q__settings > .allwr-fb-options,
.allwr-fb-q__settings > .allwr-fb-check { grid-column: 1 / -1; }

.allwr-fb-field {
    display: grid;
    gap: 0.3rem;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    font-weight: 600;
}

.allwr-fb-field small,
.allwr-fb-check small,
.allwr-fb-muted {
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    font-weight: 400;
}

.allwr-fb-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--allwr-ink);
    font-size: 0.86rem;
    cursor: pointer;
}

.allwr-fb-check input { margin-top: 0.2rem; accent-color: var(--allwr-navy); }
.allwr-fb-check > span { display: grid; gap: 0.1rem; }

.allwr-fb-options { display: grid; gap: 0.35rem; }
.allwr-fb-options__label { color: var(--allwr-ink-2); font-size: 0.8rem; font-weight: 600; }
.allwr-fb-options ol { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }

.allwr-fb-option { display: flex; align-items: center; gap: 0.4rem; }

.allwr-fb-option__key {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid var(--allwr-line-2);
    border-radius: var(--allwr-r-sm);
    color: var(--allwr-ink-2);
    font-size: 0.72rem;
    font-weight: 700;
}

.allwr-fb-logic {
    border-top: 1px solid var(--allwr-line);
    padding-top: 0.6rem;
}

.allwr-fb-logic > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--allwr-ink);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
}

.allwr-fb-logic > summary svg { width: 16px; height: 16px; color: var(--allwr-gold-text); }

.allwr-fb-logic__block {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.7rem;
    font-size: 0.84rem;
}

.allwr-fb-group { display: grid; gap: 0.4rem; }
.allwr-fb-group__match { width: auto; justify-self: start; }

.allwr-fb-cond {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.4rem;
    align-items: center;
}

.allwr-fb-jump {
    display: grid;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px dashed var(--allwr-line-2);
    border-radius: var(--allwr-r-lg);
}

.allwr-fb-jump__if,
.allwr-fb-jump__to > span { color: var(--allwr-ink-2); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.allwr-fb-jump__to { display: grid; gap: 0.25rem; }
.allwr-fb-jump > .allwr-docs-icon-btn { justify-self: end; }

.allwr-fb-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: start;
    padding: 0.2rem 0;
    border: 0;
    background: transparent;
    color: var(--allwr-ink);
    font: 600 0.82rem var(--allwr-font-body);
    text-decoration: underline;
    text-decoration-color: var(--allwr-line-2);
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--allwr-transition-fast), text-decoration-color var(--allwr-transition-fast);
}

.allwr-fb-linkbtn:hover { color: var(--allwr-navy); text-decoration-color: var(--allwr-gold); }
.allwr-fb-linkbtn svg { width: 14px; height: 14px; color: var(--allwr-gold-text); }

.allwr-fb-empty {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 2.5rem 1rem 1.5rem;
    color: var(--allwr-ink-2);
    text-align: center;
}

.allwr-fb-empty svg { width: 32px; height: 32px; color: var(--allwr-gold-text); }
.allwr-fb-empty strong { color: var(--allwr-ink); font-size: 1.05rem; }
.allwr-fb-empty p { margin: 0; max-width: 32rem; }

.allwr-fb-add {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.allwr-fb-add__quick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 18rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border: 1px dashed var(--allwr-line-2);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    color: var(--allwr-ink-3);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-fb-add__quick:focus-within { border-style: solid; border-color: var(--allwr-gold); }
.allwr-fb-add__quick svg { width: 16px; height: 16px; flex: 0 0 auto; }

.allwr-fb-add__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--allwr-ink);
    font: 500 0.92rem var(--allwr-font-body);
}

.allwr-docs .allwr-fb-add__input:focus-visible { outline: none; }

.allwr-fb-palette {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.2rem;
    width: min(100%, 44rem);
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-fb-palette__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-lg);
    background: transparent;
    color: var(--allwr-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-fb-palette__item:hover,
.allwr-fb-palette__item.is-active { background: var(--allwr-docs-tint); }
.allwr-fb-palette__item svg { width: 18px; height: 18px; margin-top: 0.1rem; color: var(--allwr-gold-text); flex: 0 0 auto; }
.allwr-fb-palette__item span { display: grid; gap: 0.1rem; }
.allwr-fb-palette__item strong { font-size: 0.86rem; }
.allwr-fb-palette__item small { color: var(--allwr-ink-2); font-size: 0.75rem; }

.allwr-fb__preview {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-surface-2);
    overflow: hidden;
}

.allwr-fb__preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem 0.4rem 0.9rem;
    border-bottom: 1px solid var(--allwr-line);
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.allwr-fb__devices { display: inline-flex; gap: 0.15rem; }

.allwr-fb__devices button {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition: color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-fb__devices button:hover { color: var(--allwr-navy); }
.allwr-fb__devices button[aria-pressed="true"] { background: var(--allwr-card); color: var(--allwr-navy); border-color: var(--allwr-line); }
.allwr-fb__devices svg { width: 16px; height: 16px; }

.allwr-fb__frame {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem;
    overflow: auto;
}

.allwr-fb__runtime {
    width: 100%;
    min-height: 26rem;
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-canvas);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-fb__frame[data-device="mobile"] .allwr-fb__runtime { max-width: 360px; }

.allwr-fb-settings { display: grid; gap: 0.9rem; max-width: 760px; }

.allwr-fb-section {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
}

.allwr-fb-section h3 { margin: 0; color: var(--allwr-ink); font: 700 1rem var(--allwr-font); }
.allwr-fb-section > p { margin: -0.4rem 0 0; }

.allwr-fb-links { display: grid; gap: 0.6rem; }

.allwr-fb-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
    align-items: center;
}

.allwr-fb-link > span { display: grid; gap: 0.1rem; grid-column: 1 / -1; }
.allwr-fb-link strong { font-size: 0.88rem; }
.allwr-fb-link small { color: var(--allwr-ink-2); font-size: 0.78rem; }

.allwr-fb-link code,
.allwr-fb-section code {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.35rem 0.5rem;
    border-radius: var(--allwr-r-md);
    background: var(--allwr-surface-2);
    font: 500 0.8rem var(--allwr-font-mono);
}

.allwr-fb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.5rem;
}

.allwr-fb-card {
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-fb-card:hover { border-color: var(--allwr-line-2); box-shadow: var(--allwr-shadow-card); }
.allwr-fb-card:has(input:checked) { border-color: var(--allwr-navy); box-shadow: inset 0 0 0 1px var(--allwr-navy); }
.allwr-fb-card input { accent-color: var(--allwr-navy); margin-top: 0.15rem; }
.allwr-fb-card span { display: grid; gap: 0.15rem; color: var(--allwr-ink); }
.allwr-fb-card small { color: var(--allwr-ink-2); font-size: 0.78rem; font-weight: 400; }

.allwr-fb-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.allwr-fb-swatch {
    --allwr-fb-swatch: var(--allwr-gold);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    color: var(--allwr-ink);
    font-size: 0.84rem;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast);
}

.allwr-fb-swatch--navy { --allwr-fb-swatch: var(--allwr-navy); }
.allwr-fb-swatch--green { --allwr-fb-swatch: var(--allwr-green); }
.allwr-fb-swatch--ink { --allwr-fb-swatch: var(--allwr-ink); }
.allwr-fb-swatch:hover { border-color: var(--allwr-line-2); }
.allwr-fb-swatch:has(input:checked) { border-color: var(--allwr-navy); box-shadow: inset 0 0 0 1px var(--allwr-navy); }

.allwr-fb-swatch input {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 50%;
    background: var(--allwr-fb-swatch);
    box-shadow: inset 0 0 0 2px var(--allwr-card);
    border: 1px solid var(--allwr-line-2);
}

.allwr-fb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.allwr-fb-chips .allwr-docs-chip button {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
}

.allwr-fb-chips .allwr-docs-chip svg { width: 12px; height: 12px; }
.allwr-fb-inline { display: flex; gap: 0.5rem; max-width: 26rem; }

.allwr-fb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.allwr-fb-gallery__item {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-fb-gallery__item:hover { border-color: var(--allwr-line-2); box-shadow: var(--allwr-shadow-hover); }
.allwr-fb-gallery__item:has(input:checked) { border-color: var(--allwr-navy); box-shadow: inset 0 0 0 1px var(--allwr-navy); }
.allwr-fb-gallery__item:has(input:focus-visible) { outline: 3px solid var(--allwr-gold-soft); outline-offset: 2px; }
.allwr-fb-gallery__item input { position: absolute; opacity: 0; pointer-events: none; }

.allwr-fb-gallery__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}

.allwr-fb-gallery__icon svg { width: 20px; height: 20px; }
.allwr-fb-gallery__text { display: grid; gap: 0.2rem; color: var(--allwr-ink); }
.allwr-fb-gallery__text strong { font-size: 0.92rem; }
.allwr-fb-gallery__text small { color: var(--allwr-ink-2); font-size: 0.8rem; line-height: 1.4; }
.allwr-fb-gallery__text em { color: var(--allwr-ink-3); font-size: 0.75rem; font-style: normal; }

@container fb (max-width: 1050px) {
    .allwr-fb[data-preview="open"] .allwr-fb__build { grid-template-columns: minmax(0, 1fr) 340px; }
}

@container fb (max-width: 820px) {
    .allwr-fb[data-preview="open"] .allwr-fb__build { grid-template-columns: minmax(0, 1fr); }
    .allwr-fb[data-preview="open"] .allwr-fb__preview { order: -1; max-height: 30rem; }
}

@container fb (max-width: 620px) {
    .allwr-fb-q__body { padding-left: 1rem; }
    .allwr-fb-cond { grid-template-columns: minmax(0, 1fr) auto; }
    .allwr-fb-cond > select:first-child { grid-column: 1 / -1; }
}

/* Runtime ------------------------------------------------------------------ */

.allwr-form-rt {
    --allwr-form-accent: var(--allwr-gold);
    --allwr-form-accent-ink: var(--allwr-navy);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: var(--allwr-ink);
    font-family: var(--allwr-font-body);
    container: form-rt / inline-size;
}

.allwr-form-rt[data-accent="navy"] { --allwr-form-accent: var(--allwr-navy); }
.allwr-form-rt[data-accent="green"] { --allwr-form-accent: var(--allwr-green); }
.allwr-form-rt[data-accent="ink"] { --allwr-form-accent: var(--allwr-ink); }

.allwr-form-rt [hidden] { display: none; }

.allwr-form-rt__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.allwr-form-rt__progress {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 4px;
    background: color-mix(in srgb, var(--allwr-form-accent) 16%, transparent);
}

.allwr-form-rt__progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--allwr-form-accent);
    transition: width var(--allwr-transition-slow);
}

.allwr-form-rt__preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
    font-size: 0.78rem;
    font-weight: 600;
}

.allwr-form-rt__preview button {
    border: 0;
    background: transparent;
    color: var(--allwr-ink);
    font: 700 0.78rem var(--allwr-font-body);
    text-decoration: underline;
    cursor: pointer;
}

.allwr-form-rt__stage {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    align-items: center;
    padding: clamp(1.25rem, 5cqi, 3.5rem) clamp(1rem, 6cqi, 4rem);
}

/* Room under the content for the floating ↑/↓ buttons. */
.allwr-form-rt__stage { padding-bottom: 4.5rem; }
.allwr-form-rt[data-layout="classic"] .allwr-form-rt__stage { align-items: start; }

.allwr-form-rt__slide {
    grid-area: 1 / 1;
    width: min(100%, 680px);
    margin: 0 auto;
    opacity: 1;
    transform: none;
    transition: opacity var(--allwr-transition-slow), transform var(--allwr-transition-slow);
}

.allwr-form-rt__slide.is-entering { opacity: 0; transform: translateY(24px); }
.allwr-form-rt__slide.is-entering-down { opacity: 0; transform: translateY(-24px); }
.allwr-form-rt__slide.is-leaving { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.allwr-form-rt__slide.is-leaving-down { opacity: 0; transform: translateY(24px); pointer-events: none; }

.allwr-form-rt__title {
    margin: 0 0 0.75rem;
    color: var(--allwr-navy);
    font: 800 clamp(1.5rem, 5cqi, 2.4rem) / 1.15 var(--allwr-font);
    letter-spacing: -0.01em;
}

.allwr-form-rt__title:focus { outline: none; }

.allwr-form-rt__lead {
    color: var(--allwr-ink-2);
    font-size: clamp(1rem, 2.6cqi, 1.15rem);
    line-height: 1.55;
}

.allwr-form-rt__lead p { margin: 0 0 0.6rem; }

.allwr-form-rt__meta { margin: 0.9rem 0 0; color: var(--allwr-ink-3); font-size: 0.84rem; }

.allwr-form-rt__qtitle {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    color: var(--allwr-navy);
    font: 700 clamp(1.15rem, 3.6cqi, 1.6rem) / 1.3 var(--allwr-font);
}

.allwr-form-rt__qtitle:focus { outline: none; }

.allwr-form-rt__qnum {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 auto;
    color: var(--allwr-gold-text);
    font-size: 0.82em;
}

.allwr-form-rt__req { color: var(--allwr-gold-text); }

.allwr-form-rt__qdesc {
    margin: 0.35rem 0 0;
    color: var(--allwr-ink-2);
    font-size: clamp(0.95rem, 2.4cqi, 1.05rem);
    line-height: 1.5;
}

.allwr-form-rt__qdesc p { margin: 0 0 0.4rem; }
.allwr-form-rt__field { margin-top: 1.25rem; }

.allwr-form-rt__text {
    width: 100%;
    padding: 0.4rem 0 0.5rem;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--allwr-navy) 22%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--allwr-navy);
    font: 500 clamp(1.15rem, 3.4cqi, 1.5rem) var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-form-rt__text::placeholder { color: var(--allwr-ink-3); }
.allwr-form-rt__text:focus { outline: none; border-bottom-color: var(--allwr-form-accent); }
.allwr-form-rt__text--long { resize: none; min-height: 3.2em; line-height: 1.45; }
.allwr-form-rt__text--date { max-width: 16rem; }
.allwr-form-rt__other { margin-top: 0.5rem; font-size: 1.05rem; }

.allwr-form-rt__select {
    width: 100%;
    max-width: 30rem;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--allwr-navy) 22%, transparent);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    font: 500 1.05rem var(--allwr-font-body);
}

.allwr-form-rt__hint { margin: 0.5rem 0 0; color: var(--allwr-ink-3); font-size: 0.82rem; }
.allwr-form-rt__field > .allwr-form-rt__hint:first-child { margin: 0 0 0.6rem; }

.allwr-form-rt__choices {
    display: grid;
    gap: 0.5rem;
    max-width: 30rem;
}

.allwr-form-rt__choice {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--allwr-form-accent) 45%, var(--allwr-line));
    border-radius: var(--allwr-r-lg);
    background: color-mix(in srgb, var(--allwr-form-accent) 7%, var(--allwr-card));
    color: var(--allwr-navy);
    font: 500 1rem var(--allwr-font-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-form-rt__choice:hover { background: color-mix(in srgb, var(--allwr-form-accent) 15%, var(--allwr-card)); }
.allwr-form-rt__choice.is-on { border-color: var(--allwr-form-accent); background: color-mix(in srgb, var(--allwr-form-accent) 20%, var(--allwr-card)); box-shadow: inset 0 0 0 1px var(--allwr-form-accent); }

.allwr-form-rt__key {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 0.3rem;
    border: 1px solid color-mix(in srgb, var(--allwr-form-accent) 55%, var(--allwr-line));
    border-radius: var(--allwr-r-sm);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    font-size: 0.76rem;
    font-weight: 700;
}

.allwr-form-rt__choice.is-on .allwr-form-rt__key { background: var(--allwr-form-accent); border-color: var(--allwr-form-accent); color: var(--allwr-card); }
.allwr-form-rt__label { flex: 1 1 auto; min-width: 0; }
.allwr-form-rt__tick { display: inline-flex; opacity: 0; color: var(--allwr-navy); transition: opacity var(--allwr-transition-fast); }
.allwr-form-rt__choice.is-on .allwr-form-rt__tick { opacity: 1; }

.allwr-form-rt__scale {
    display: grid;
    grid-template-columns: repeat(var(--allwr-form-steps, 5), minmax(0, 1fr));
    gap: 0.35rem;
    max-width: 40rem;
}

.allwr-form-rt__step {
    min-height: 52px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--allwr-form-accent) 45%, var(--allwr-line));
    border-radius: var(--allwr-r-lg);
    background: color-mix(in srgb, var(--allwr-form-accent) 7%, var(--allwr-card));
    color: var(--allwr-navy);
    font: 700 1.05rem var(--allwr-font-body);
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-form-rt__step:hover { background: color-mix(in srgb, var(--allwr-form-accent) 18%, var(--allwr-card)); }
.allwr-form-rt__step.is-on { background: var(--allwr-form-accent); border-color: var(--allwr-form-accent); color: var(--allwr-card); }

.allwr-form-rt__scale--stars { max-width: 26rem; gap: 0.15rem; }
.allwr-form-rt__scale--stars .allwr-form-rt__step { min-height: 48px; border-color: transparent; background: transparent; color: color-mix(in srgb, var(--allwr-navy) 18%, transparent); }
.allwr-form-rt__scale--stars .allwr-form-rt__step:hover,
.allwr-form-rt__scale--stars .allwr-form-rt__step.is-lit { background: transparent; color: var(--allwr-gold); }
.allwr-form-rt__scale--stars .allwr-form-rt__step svg { width: clamp(24px, 7cqi, 34px); height: auto; }

.allwr-form-rt__scale-labels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    max-width: 40rem;
    margin-top: 0.4rem;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
}

.allwr-form-rt__scale-labels span:last-child { text-align: right; }

.allwr-form-rt__rank { display: grid; gap: 0.45rem; max-width: 30rem; margin: 0; padding: 0; list-style: none; }

.allwr-form-rt__rank-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--allwr-form-accent) 45%, var(--allwr-line));
    border-radius: var(--allwr-r-lg);
    background: color-mix(in srgb, var(--allwr-form-accent) 7%, var(--allwr-card));
    color: var(--allwr-navy);
}

.allwr-form-rt__rank-moves { display: inline-flex; gap: 0.15rem; }

.allwr-form-rt__rank-moves button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-navy);
    cursor: pointer;
    transition: background var(--allwr-transition-fast);
}

.allwr-form-rt__rank-moves button:hover { background: var(--allwr-card); }
.allwr-form-rt__rank-moves button:disabled { opacity: 0.3; cursor: default; }

.allwr-form-rt__legal-link { margin: 0 0 0.6rem; }
.allwr-form-rt__legal-link a { color: var(--allwr-navy); font-weight: 600; }

.allwr-form-rt__error { min-height: 1.3em; margin: 0.6rem 0 0; color: var(--allwr-danger); font-size: 0.88rem; font-weight: 600; }

.allwr-form-rt__q.is-shaking { animation: allwr-form-rt-nudge var(--allwr-transition-slow); }

@keyframes allwr-form-rt-nudge {
    0%, 100% { transform: none; }
    30% { transform: translateX(-6px); }
    60% { transform: translateX(5px); }
}

.allwr-form-rt__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.allwr-form-rt__ok {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: var(--allwr-radius-sm);
    background: var(--allwr-navy);
    color: var(--allwr-card);
    font: 700 1rem var(--allwr-font-body);
    cursor: pointer;
    transition: background var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-form-rt__ok:hover { background: color-mix(in srgb, var(--allwr-navy) 90%, var(--allwr-card)); box-shadow: var(--allwr-shadow-hover); }
.allwr-form-rt__ok:disabled { opacity: 0.6; cursor: progress; }
.allwr-form-rt__ok--start { min-height: 52px; padding: 0.7rem 1.6rem; font-size: 1.05rem; }
.allwr-form-rt__ok--ghost { background: transparent; color: var(--allwr-navy); border: 1px solid var(--allwr-line-2); }
.allwr-form-rt__ok--ghost:hover { background: var(--allwr-surface-2); box-shadow: none; }

.allwr-form-rt__enter { color: var(--allwr-ink-3); font-size: 0.8rem; }
.allwr-form-rt__actions--submit { margin-top: 2rem; }

.allwr-form-rt__nav {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 1px;
    border-radius: var(--allwr-r-md);
    overflow: hidden;
    box-shadow: var(--allwr-shadow-card);
}

.allwr-form-rt__navbtn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 36px;
    border: 0;
    background: var(--allwr-navy);
    color: var(--allwr-card);
    cursor: pointer;
    transition: background var(--allwr-transition-fast);
}

.allwr-form-rt__navbtn:hover { background: color-mix(in srgb, var(--allwr-navy) 88%, var(--allwr-card)); }
.allwr-form-rt__navbtn:disabled { opacity: 0.45; cursor: default; }

.allwr-form-rt :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-form-rt__card--end { text-align: center; }
.allwr-form-rt__card--end .allwr-form-rt__actions { justify-content: center; }

.allwr-form-rt__done {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--allwr-form-accent);
    color: var(--allwr-card);
    animation: allwr-form-rt-pop var(--allwr-transition-slow);
}

.allwr-form-rt__done svg { width: 28px; height: 28px; }

@keyframes allwr-form-rt-pop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}

.allwr-form-rt__list { display: grid; gap: 2.25rem; }
.allwr-form-rt[data-layout="classic"] .allwr-form-rt__q { padding-bottom: 0.25rem; }

@container form-rt (max-width: 420px) {
    .allwr-form-rt__stage { padding: 1rem 0.9rem 4rem; }
    .allwr-form-rt__scale:not(.allwr-form-rt__scale--stars) { grid-template-columns: repeat(min(var(--allwr-form-steps, 5), 6), minmax(0, 1fr)); }
    .allwr-form-rt__step { min-height: 44px; }
    .allwr-form-rt__enter { display: none; }
    .allwr-form-rt__nav { right: 0.75rem; bottom: 0.75rem; }
}

/* Página de respuesta (pública, invitado, interna) */
.allwr-form-page-shell { min-height: 100dvh; margin: 0; background: var(--allwr-canvas); }

.allwr-form-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.allwr-form-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
}

.allwr-form-page__brand { color: var(--allwr-navy); font: 900 1rem var(--allwr-font); letter-spacing: 0.04em; text-decoration: none; }
.allwr-form-page__back { color: var(--allwr-ink-2); font-size: 0.86rem; text-decoration: none; transition: color var(--allwr-transition-fast); }
.allwr-form-page__back:hover { color: var(--allwr-navy); }

.allwr-form-page__stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.allwr-form-page__stage > .allwr-form-rt__card { width: min(100% - 2rem, 680px); margin: auto; padding: 2rem 0; }
.allwr-form-page__stage > .allwr-form-rt { flex: 1 1 auto; }
.allwr-form-page__stage > noscript p { margin: auto; padding: 2rem; }

/* Report ------------------------------------------------------------------- */

.allwr-fr { position: relative; display: grid; gap: 0.9rem; }
.allwr-fr [hidden] { display: none; }

.allwr-fr__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
}

.allwr-fr__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem;
    flex: 1 1 28rem;
}

.allwr-fr__filters label { display: grid; gap: 0.2rem; color: var(--allwr-ink-2); font-size: 0.74rem; font-weight: 600; }
.allwr-fr__filters .allwr-docs-input { width: auto; min-width: 9rem; }
.allwr-fr__actions { display: flex; align-items: center; gap: 0.4rem; }

.allwr-fr__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.allwr-fr-kpi {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
}

.allwr-fr-kpi__label { color: var(--allwr-ink-2); font-size: 0.78rem; font-weight: 600; }
.allwr-fr-kpi__value { color: var(--allwr-navy); font: 800 1.9rem / 1.1 var(--allwr-font); font-variant-numeric: tabular-nums; }
.allwr-fr-kpi small { color: var(--allwr-ink-2); font-size: 0.76rem; }
.allwr-fr-kpi--nps { border-color: var(--allwr-gold-dec); background: linear-gradient(160deg, var(--allwr-gold-bg), var(--allwr-card) 60%); }
.allwr-fr-kpi--nps.is-good .allwr-fr-kpi__value { color: var(--allwr-green); }
.allwr-fr-kpi--nps.is-bad .allwr-fr-kpi__value { color: var(--allwr-red); }

.allwr-fr__questions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 0.75rem;
}

.allwr-fr-q {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
}

.allwr-fr-q--text,
.allwr-fr-q--nps { grid-column: 1 / -1; }

.allwr-fr-q__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; }
.allwr-fr-q__head h3 { flex: 1 1 14rem; margin: 0; color: var(--allwr-ink); font: 700 0.98rem / 1.35 var(--allwr-font); }
.allwr-fr-q__num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: var(--allwr-r-sm); background: var(--allwr-docs-tint); color: var(--allwr-ink); font-size: 0.74rem; font-weight: 700; }
.allwr-fr-q__meta { color: var(--allwr-ink-3); font-size: 0.76rem; }
.allwr-fr-q__note { margin: -0.4rem 0 0; color: var(--allwr-ink-3); font-size: 0.76rem; }

.allwr-fr-chart { position: relative; min-width: 0; }
.allwr-fr-chart--timeline { height: 220px; }
.allwr-fr-chart--dist { height: 170px; }
.allwr-fr-chart.is-unavailable,
.allwr-fr-nps__ring.is-unavailable { display: none; }

.allwr-fr-bars { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }

.allwr-fr-bars__row,
.allwr-fr-rank li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5rem, 1.1fr) auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.86rem;
}

.allwr-fr-bars__label,
.allwr-fr-rank__label { display: flex; align-items: center; gap: 0.4rem; min-width: 0; color: var(--allwr-ink); overflow-wrap: anywhere; }
.allwr-fr-bars__key { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid var(--allwr-line-2); border-radius: var(--allwr-r-sm); color: var(--allwr-ink-2); font-size: 0.68rem; font-weight: 700; }
.allwr-fr-bars__track { height: 10px; border-radius: var(--allwr-radius-pill); background: var(--allwr-surface-2); overflow: hidden; }
.allwr-fr-bars__fill { display: block; height: 100%; border-radius: var(--allwr-radius-pill); background: var(--allwr-ink); transition: width var(--allwr-transition-slow); }
.allwr-fr-bars__row.is-top .allwr-fr-bars__fill { background: var(--allwr-gold-dec); }
.allwr-fr-bars__value { display: grid; justify-items: end; color: var(--allwr-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.allwr-fr-bars__value small { color: var(--allwr-ink-3); font-size: 0.72rem; font-weight: 500; }

.allwr-fr-rank { display: grid; gap: 0.55rem; margin: 0; padding: 0; counter-reset: rank; list-style: none; }
.allwr-fr-rank li { counter-increment: rank; }
.allwr-fr-rank__label::before { content: counter(rank); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--allwr-r-sm); background: var(--allwr-docs-tint); font-size: 0.7rem; font-weight: 700; }

.allwr-fr-scale { display: grid; gap: 0.75rem; }
.allwr-fr-scale__avg { display: flex; align-items: baseline; gap: 0.5rem; }
.allwr-fr-scale__avg strong { color: var(--allwr-navy); font: 800 2rem / 1 var(--allwr-font); font-variant-numeric: tabular-nums; }
.allwr-fr-scale__avg small { color: var(--allwr-ink-2); font-size: 0.82rem; }
.allwr-fr-scale__labels { display: flex; justify-content: space-between; gap: 1rem; color: var(--allwr-ink-2); font-size: 0.76rem; }

.allwr-fr-nps { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.allwr-fr-nps__ring { position: relative; width: 168px; height: 168px; flex: 0 0 auto; }
.allwr-fr-nps__score { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.allwr-fr-nps__score strong { color: var(--allwr-navy); font: 800 2.2rem / 1 var(--allwr-font); font-variant-numeric: tabular-nums; }
.allwr-fr-nps__score small { color: var(--allwr-ink-2); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; }
.allwr-fr-nps__legend { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.allwr-fr-nps__item { display: grid; grid-template-columns: 12px minmax(7rem, auto) auto auto; align-items: center; gap: 0.6rem; font-size: 0.86rem; }
.allwr-fr-nps__item > span { width: 12px; height: 12px; border-radius: 3px; }
.allwr-fr-nps__item--promoters > span { background: var(--allwr-green); }
.allwr-fr-nps__item--passives > span { background: var(--allwr-ink-3); }
.allwr-fr-nps__item--detractors > span { background: var(--allwr-red); }
.allwr-fr-nps__item strong { font-variant-numeric: tabular-nums; }
.allwr-fr-nps__item small { color: var(--allwr-ink-3); }

.allwr-fr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.allwr-fr-stats div { padding: 0.6rem; border-radius: var(--allwr-r-lg); background: var(--allwr-surface-2); }
.allwr-fr-stats dt { color: var(--allwr-ink-2); font-size: 0.74rem; }
.allwr-fr-stats dd { margin: 0.15rem 0 0; color: var(--allwr-navy); font: 800 1.15rem var(--allwr-font); font-variant-numeric: tabular-nums; }

.allwr-fr-search { position: relative; display: block; }
.allwr-fr-search svg { position: absolute; top: 50%; left: 0.6rem; width: 15px; height: 15px; color: var(--allwr-ink-3); transform: translateY(-50%); }
.allwr-fr-search input { padding-left: 2rem; }

.allwr-fr-texts { display: grid; gap: 0.35rem; max-height: 20rem; margin: 0; padding: 0 0.25rem 0 0; overflow-y: auto; list-style: none; }

.allwr-fr-texts button {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-canvas);
    color: var(--allwr-ink);
    font-size: 0.88rem;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-fr-texts button:hover { border-color: var(--allwr-line-2); box-shadow: var(--allwr-shadow-card); }
.allwr-fr-texts small { color: var(--allwr-ink-3); font-size: 0.72rem; }
.allwr-fr-others summary { color: var(--allwr-ink-2); font-size: 0.82rem; cursor: pointer; }
.allwr-fr-others[open] summary { margin-bottom: 0.5rem; }

.allwr-fr-empty { display: grid; justify-items: center; gap: 0.4rem; padding: 3rem 1rem; color: var(--allwr-ink-2); text-align: center; }
.allwr-fr-empty svg { width: 34px; height: 34px; color: var(--allwr-gold-text); }
.allwr-fr-empty strong { color: var(--allwr-ink); font-size: 1.05rem; }
.allwr-fr-empty p { margin: 0; max-width: 30rem; }

.allwr-fr-table-wrap { overflow-x: auto; border: 1px solid var(--allwr-line); border-radius: var(--allwr-radius-lg); background: var(--allwr-card); }
.allwr-fr-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.allwr-fr-table th { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--allwr-line); color: var(--allwr-ink-2); font-size: 0.74rem; font-weight: 700; text-align: left; white-space: nowrap; }
.allwr-fr-table td { max-width: 18rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--allwr-line); color: var(--allwr-ink); vertical-align: top; overflow-wrap: anywhere; }
.allwr-fr-table td small { display: block; color: var(--allwr-ink-3); font-size: 0.74rem; }
.allwr-fr-table tbody tr { cursor: pointer; transition: background var(--allwr-transition-fast); }
.allwr-fr-table tbody tr:hover { background: var(--allwr-surface-2); }
.allwr-fr-table tbody tr:last-child td { border-bottom: 0; }

.allwr-fr-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; color: var(--allwr-ink-2); font-size: 0.84rem; }

.allwr-fr__drawer-scrim { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--allwr-navy) 32%, transparent); }

.allwr-fr__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: min(100%, 460px);
    padding: 1.1rem 1.2rem;
    overflow-y: auto;
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
    animation: allwr-fr-drawer-in var(--allwr-transition-slow);
}

@keyframes allwr-fr-drawer-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

.allwr-fr__drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.allwr-fr__drawer-head h3 { margin: 0; font: 700 1.05rem var(--allwr-font); color: var(--allwr-ink); }
.allwr-fr__drawer-meta { display: grid; gap: 0.35rem; margin: 0; padding: 0.75rem; border-radius: var(--allwr-r-lg); background: var(--allwr-surface-2); font-size: 0.82rem; }
.allwr-fr__drawer-meta div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.5rem; }
.allwr-fr__drawer-meta dt { color: var(--allwr-ink-2); }
.allwr-fr__drawer-meta dd { margin: 0; color: var(--allwr-ink); overflow-wrap: anywhere; }
.allwr-fr__answers { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.allwr-fr__answers li { display: grid; gap: 0.2rem; }
.allwr-fr__answer-q { color: var(--allwr-ink-2); font-size: 0.8rem; font-weight: 600; }
.allwr-fr__answer-a { color: var(--allwr-ink); font-size: 0.95rem; overflow-wrap: anywhere; }
.allwr-fr__answers li.is-skipped .allwr-fr__answer-a { color: var(--allwr-ink-3); font-style: italic; }
.allwr-fr__drawer-foot { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--allwr-line); }
.allwr-fr__danger { color: var(--allwr-danger); }
.allwr-fr__danger:hover { border-color: var(--allwr-danger); }

.allwr-fr :is(button, a, input, select, textarea):focus-visible,
.allwr-fr__drawer :is(button, a):focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .allwr-docs-form { margin: 0 0.75rem 0.75rem; }
    .allwr-fr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-fb *,
    .allwr-fr *,
    .allwr-fr__drawer,
    .allwr-form-rt,
    .allwr-form-rt * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .allwr-form-rt__slide.is-entering,
    .allwr-form-rt__slide.is-entering-down,
    .allwr-form-rt__slide.is-leaving,
    .allwr-form-rt__slide.is-leaving-down,
    .allwr-form-rt :is(button, a):is(:hover, :focus-visible, :active) {
        transform: none !important;
    }
}

/* === Ajustes: menú local, paneles y suscripción (landings/_components/app-settings.php
   + landings/_components/settings/*.php + public/assets/js/subscription.js).
   El menú es el reflejo de allwr_settings_sections(); los paneles son tarjetas
   estrechas (≤860px) salvo Suscripción, que va a todo el ancho con un aside
   económico pegajoso. Tokens únicos, transiciones canónicas, hover por tipo
   de componente (sin scale ni translateY) y anillo propio de :focus-visible. === */

.allwr-settings {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* --- Menú local --- */
.allwr-settings__menu {
    position: sticky;
    top: calc(var(--allwr-topbar-h) + 1rem);
    display: grid;
    gap: 1.1rem;
    padding-right: 0.25rem;
}

.allwr-settings__group {
    display: grid;
    gap: 0.35rem;
}

.allwr-settings__group--standalone {
    padding-top: 0.85rem;
    border-top: 1px solid var(--allwr-line);
}

.allwr-settings__group-label {
    padding: 0 0.75rem;
    color: var(--allwr-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.allwr-settings__items {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-settings__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 38px;
    padding: 0.5rem 0.75rem 0.5rem 0.9rem;
    border-radius: var(--allwr-radius-xs);
    color: var(--allwr-ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

/* La barra dorada del item activo: 3px pegados al borde izquierdo. */
.allwr-settings__item::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    bottom: 0.45rem;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--allwr-gold);
    opacity: 0;
    transition: opacity var(--allwr-transition-fast);
}

.allwr-settings__item svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke-width: 1.7;
    color: var(--allwr-ink-2);
    transition: color var(--allwr-transition-fast);
}

.allwr-settings__item:hover {
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-settings__item:hover svg {
    color: var(--allwr-navy);
}

.allwr-settings__item.is-active,
.allwr-settings__item[aria-current="page"] {
    background: var(--allwr-gold-bg);
    color: var(--allwr-navy);
    font-weight: 800;
}

.allwr-settings__item.is-active::before,
.allwr-settings__item[aria-current="page"]::before {
    opacity: 1;
}

.allwr-settings__item.is-active svg,
.allwr-settings__item[aria-current="page"] svg {
    color: var(--allwr-gold-text);
}

.allwr-settings__item:focus-visible,
.allwr-settings__type-option:focus-visible,
.allwr-settings__language:focus-visible,
.allwr-subscription__chip:focus-visible,
.allwr-subscription__pending-undo:focus-visible,
.allwr-invoices__expander:focus-visible,
.allwr-invoices__breakdown:focus-visible,
.allwr-dialog__close:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

/* --- Panel --- */
/* public.css still carries an older .allwr-settings__panel (white card with
   padding) for the legacy public settings page; here the panel is a plain
   column of cards on the canvas. */
.allwr-settings__panel {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 860px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    container-type: inline-size;
}

.allwr-settings__panel > * {
    min-width: 0;
    max-width: 100%;
}

/* The API-keys matrix comes from the join-review screen (3 columns at full
   width); inside the 860px panel two are all that fit, one when the panel
   itself gets narrow (container query: the sidebar eats viewport width). */
.allwr-settings__panel .allwr-perm-matrix {
    columns: 2;
}

@container (max-width: 780px) {
    .allwr-settings__panel .allwr-perm-matrix {
        columns: 1;
        column-rule: none;
    }

    .allwr-settings__head {
        flex-direction: column;
    }

    .allwr-settings__type-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-invoices__detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.allwr-settings__panel--wide {
    max-width: none;
}

.allwr-settings__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.25rem;
}

.allwr-settings__head-text {
    min-width: 0;
}

.allwr-settings__title {
    margin: 0;
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.allwr-settings__meta {
    margin: 0.3rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Subscription holder: "<tenant> · Empresa/Autónomo/Asesoría" under the title. */
.allwr-settings__holder {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    font-weight: 700;
}

.allwr-settings__holder svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
}

.allwr-settings__holder + .allwr-settings__meta {
    margin-top: 0.2rem;
}

.allwr-settings__head-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.allwr-settings__card .allwr-card__body > .allwr-settings-page__note:first-child {
    margin-top: 0;
}

.allwr-settings__field--full {
    grid-column: 1 / -1;
}

.allwr-settings-page__form-grid--stack {
    grid-template-columns: minmax(0, 1fr);
}

/* Two fields side by side inside a stacked grid (SEPA signer: name + tax id); the
   narrow-viewport rule on .allwr-settings-page__form-grid stacks it again. */
.allwr-settings-page__form-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.allwr-settings-page__field-help {
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
}

/* Grouped fields inside a dialog form (role="group"): a rule, a title and its help. */
.allwr-settings-page__fieldset {
    display: grid;
    gap: 0.6rem;
    min-width: 0;
    margin-top: 0.35rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--allwr-line);
}

.allwr-settings-page__fieldset-title {
    margin: 0;
    color: var(--allwr-navy);
    font-size: 0.92rem;
    font-weight: 800;
}

.allwr-settings-page__fieldset-help {
    margin: -0.3rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* SEPA mandate wording: the exact text the holder accepts, scrollable so the dialog keeps its actions in view. */
.allwr-settings-page__mandate-text {
    max-height: 11rem;
    margin: 0;
    padding: 0.75rem 0.85rem;
    overflow-y: auto;
    border: 1px solid var(--allwr-line);
    border-radius: 12px;
    background: var(--allwr-canvas);
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    line-height: 1.5;
}

.allwr-settings-page__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--allwr-navy);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.allwr-settings-page__consent input {
    flex: none;
    margin: 0.15rem 0 0;
    accent-color: var(--allwr-navy);
}

/* Readiness gate of the subscription aside: what is missing before a paid change can be contracted. */
.allwr-subscription__readiness {
    display: grid;
    gap: 0.6rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: 12px;
    background: var(--allwr-canvas);
}

.allwr-subscription__readiness-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--allwr-navy);
    font-size: 0.88rem;
}

.allwr-subscription__readiness-title svg {
    width: 16px;
    height: 16px;
    color: var(--allwr-gold-text);
}

.allwr-subscription__readiness ul {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-subscription__readiness li {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* --- Mi perfil --- */
.allwr-settings__identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.allwr-settings__avatar {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--allwr-navy);
    color: var(--allwr-card);
    font-size: 1.4rem;
    font-weight: 900;
}

.allwr-settings__facts {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    min-width: 0;
}

.allwr-settings__fact {
    display: grid;
    gap: 0.1rem;
}

.allwr-settings__fact dt {
    color: var(--allwr-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.allwr-settings__fact dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--allwr-navy);
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.allwr-settings__verified svg,
.allwr-settings__payment-state svg,
.allwr-settings__list-item .allwr-tag svg,
.allwr-subscription__row-title .allwr-tag svg,
.allwr-subscription__pending .allwr-tag svg {
    width: 13px;
    height: 13px;
    margin-right: 0.25rem;
    vertical-align: -2px;
}

.allwr-settings__type-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Tarjeta clicable: sombra + borde en hover, nunca scale/translateY. */
.allwr-settings__type-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--allwr-transition-fast),
        background var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-settings__type-option:hover {
    border-color: var(--allwr-line-2);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-settings__type-option.is-current {
    border-color: color-mix(in srgb, var(--allwr-gold) 55%, var(--allwr-line));
    background: var(--allwr-gold-bg);
    cursor: default;
}

.allwr-settings__type-option.is-current:hover {
    box-shadow: none;
}

.allwr-settings__type-option:disabled {
    opacity: 0.6;
    cursor: progress;
}

.allwr-settings__type-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-settings__type-option.is-current .allwr-settings__type-icon {
    background: var(--allwr-card);
    color: var(--allwr-gold-text);
}

.allwr-settings__type-icon svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.7;
}

.allwr-settings__type-text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.allwr-settings__type-text strong {
    color: var(--allwr-navy);
    font-size: 0.9rem;
    font-weight: 800;
}

.allwr-settings__type-text span {
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    line-height: 1.45;
}

.allwr-settings__type-check {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 16px;
    height: 16px;
    color: var(--allwr-gold-text);
}

/* --- Preferencias: idioma --- */
.allwr-settings__languages {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-settings__language {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color var(--allwr-transition-fast),
        background var(--allwr-transition-fast);
}

.allwr-settings__language svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.7;
    color: var(--allwr-ink-2);
}

.allwr-settings__language span {
    flex: 1 1 auto;
    min-width: 0;
}

.allwr-settings__language em {
    color: var(--allwr-gold-text);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.allwr-settings__language:hover {
    border-color: var(--allwr-line-2);
    background: var(--allwr-surface-2);
}

.allwr-settings__language.is-active {
    border-color: color-mix(in srgb, var(--allwr-gold) 55%, var(--allwr-line));
    background: var(--allwr-gold-bg);
    color: var(--allwr-navy);
}

.allwr-settings__language-check {
    color: var(--allwr-gold-text);
}

/* --- Listas simples (Marca y dominios) --- */
.allwr-settings__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-settings__list-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
}

.allwr-settings__list-item strong {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--allwr-navy);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.allwr-settings__list-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--allwr-card);
    color: var(--allwr-navy);
}

.allwr-settings__list-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

/* --- Método de cobro --- */
.allwr-settings__payment-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.allwr-settings__payment-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}

.allwr-settings__payment-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.7;
}

.allwr-settings__payment-text {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.allwr-settings__payment-text strong {
    color: var(--allwr-navy);
    font-size: 0.95rem;
    font-weight: 800;
}

.allwr-settings__payment-text small {
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    line-height: 1.45;
}

.allwr-settings__wordmark {
    font-family: var(--allwr-font);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.allwr-settings__payment-unavailable a {
    color: var(--allwr-navy);
    font-weight: 700;
}

/* --- Diálogo compartido (window.allwrDialog) --- */
body.allwr-dialog-open {
    overflow: hidden;
}

.allwr-dialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--allwr-navy) 46%, transparent);
}

.allwr-dialog__box {
    display: flex;
    flex-direction: column;
    width: min(540px, 100%);
    max-height: calc(100vh - 2rem);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
    overflow: hidden;
}

.allwr-dialog__box--lg {
    width: min(820px, 100%);
}

.allwr-dialog__box.is-busy {
    cursor: progress;
}

.allwr-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-dialog__title {
    margin: 0;
    color: var(--allwr-navy);
    font-family: var(--allwr-font);
    font-size: 1.1rem;
    font-weight: 800;
}

.allwr-dialog__close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition:
        color var(--allwr-transition-fast),
        background var(--allwr-transition-fast);
}

.allwr-dialog__close:hover {
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-dialog__close svg {
    width: 18px;
    height: 18px;
}

.allwr-dialog__body {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    overflow: auto;
    color: var(--allwr-ink);
    line-height: 1.55;
}

.allwr-dialog__body > .allwr-card {
    box-shadow: none;
}

.allwr-dialog__note {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
}

.allwr-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid var(--allwr-line);
}

/* --- Suscripción: pestañas y layout --- */
.allwr-subscription {
    display: grid;
    gap: 1rem;
}

.allwr-subscription__tabs {
    margin-bottom: 0.25rem;
}

/* Underline tabs (section tabs, not a segmented control): transparent items on
   a hairline, gold bar grows left→right under the active one. */
.allwr-tabs--underline {
    gap: 0;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--allwr-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.allwr-tabs--underline::-webkit-scrollbar {
    height: 0;
}

.allwr-tabs--underline .allwr-tab {
    position: relative;
    min-height: 40px;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--allwr-ink-2);
    white-space: nowrap;
}

.allwr-tabs--underline .allwr-tab::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: -1px;
    height: 2px;
    background: var(--allwr-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--allwr-transition-base);
}

.allwr-tabs--underline .allwr-tab:hover {
    background: transparent;
    color: var(--allwr-navy);
}

.allwr-tabs--underline .allwr-tab--active,
.allwr-tabs--underline .allwr-tab[aria-selected="true"] {
    background: transparent;
    color: var(--allwr-navy);
    box-shadow: none;
}

.allwr-tabs--underline .allwr-tab--active::after,
.allwr-tabs--underline .allwr-tab[aria-selected="true"]::after {
    transform: scaleX(1);
}

.allwr-subscription__panel[hidden] {
    display: none;
}

.allwr-subscription__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}

/* Rows adapt to the width of their own column (container query), not to the
   viewport: at 1440px the main column is ~550px next to the aside. */
.allwr-subscription__main,
.allwr-subscription__products {
    display: grid;
    gap: 1rem;
    min-width: 0;
    container-type: inline-size;
}

.allwr-subscription__aside {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.allwr-subscription__readonly-title {
    margin: 0 0 0.35rem;
    color: var(--allwr-navy);
    font-weight: 800;
}

.allwr-subscription__readonly p {
    margin: 0 0 0.75rem;
    color: var(--allwr-ink);
    line-height: 1.5;
}

.allwr-subscription__empty {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
}

/* --- Filas de producto --- */
.allwr-subscription__list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-subscription__row {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    transition:
        border-color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-subscription__row.is-open {
    border-color: color-mix(in srgb, var(--allwr-gold) 45%, var(--allwr-line));
    box-shadow: var(--allwr-shadow-card);
}

.allwr-subscription__row--addon {
    margin-left: 2.25rem;
    background: var(--allwr-off-white);
}

/* One line per product: icon · name/tagline · configuration · price · action.
   Sized for the ~550px main column next to the aside at 1440px; the container
   query below wraps to two lines only under 520px. */
.allwr-subscription__row-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
}

.allwr-subscription__row--catalog .allwr-subscription__row-main {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.allwr-subscription__row-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-subscription__row-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

.allwr-subscription__row-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.allwr-subscription__row-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.allwr-subscription__row-title strong {
    color: var(--allwr-navy);
    font-size: 0.88rem;
    font-weight: 800;
}

.allwr-subscription__row-title .allwr-tag {
    min-height: 18px;
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
}

.allwr-subscription__row-title .allwr-tag svg {
    width: 11px;
    height: 11px;
}

.allwr-subscription__row-title small,
.allwr-subscription__includes-inline {
    color: var(--allwr-ink-2);
    font-size: 0.75rem;
    line-height: 1.35;
}

.allwr-subscription__includes-inline {
    color: var(--allwr-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-subscription__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--allwr-gold-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.allwr-subscription__hint svg {
    width: 13px;
    height: 13px;
}

.allwr-subscription__row-config {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    color: var(--allwr-ink);
    font-size: 0.8rem;
    line-height: 1.35;
}

.allwr-subscription__row-config small {
    color: var(--allwr-ink-2);
    font-size: 0.72rem;
}

.allwr-subscription__row-price {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
}

.allwr-subscription__row-price strong {
    color: var(--allwr-navy);
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.allwr-subscription__row-price small {
    color: var(--allwr-ink-2);
    font-size: 0.72rem;
}

.allwr-subscription__price-free {
    color: var(--allwr-gold-text);
}

.allwr-subscription__row-action {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* Row actions are secondary (ghost) and compact; navy primary is reserved for
   "Revisar cambios" in the aside and the dialog confirmations. */
.allwr-subscription__row-action .allwr-btn {
    min-height: 32px;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.allwr-subscription__row-action .allwr-btn svg {
    width: 15px;
    height: 15px;
}

/* --- Editor inline --- */
.allwr-subscription__editor {
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem 0.9rem;
    border-top: 1px solid var(--allwr-line);
    background: var(--allwr-off-white);
    border-radius: 0 0 var(--allwr-radius-md) var(--allwr-radius-md);
}

.allwr-subscription__editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.allwr-subscription__editor-grid .allwr-settings-page__field > span {
    display: block;
}

.allwr-subscription__editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.allwr-subscription__cycle {
    box-shadow: none;
}

.allwr-subscription__cycle .allwr-seg__item em {
    margin-left: 0.15rem;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    color: var(--allwr-gold-text);
}

.allwr-subscription__cycle .allwr-seg__item[aria-pressed="true"] em {
    color: var(--allwr-gold-soft);
}

.allwr-subscription__details {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    padding: 0.5rem 0.75rem;
    font-size: 0.84rem;
    color: var(--allwr-ink);
}

.allwr-subscription__details summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--allwr-navy);
}

.allwr-subscription__details p {
    margin: 0.5rem 0;
    line-height: 1.5;
}

.allwr-subscription__includes-title {
    font-weight: 800;
    color: var(--allwr-navy);
}

.allwr-subscription__includes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-subscription__includes li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.allwr-subscription__includes svg {
    width: 14px;
    height: 14px;
    color: var(--allwr-gold-text);
}

/* --- Añadir productos --- */
.allwr-subscription__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.allwr-subscription__search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 220px;
    min-width: 0;
    padding: 0 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-subscription__search:focus-within {
    border-color: var(--allwr-navy);
}

.allwr-subscription__search svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.allwr-subscription__search input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border: 0;
    background: transparent;
    color: var(--allwr-ink);
    font: inherit;
    font-size: 0.86rem;
}

.allwr-subscription__search input:focus {
    outline: none;
}

.allwr-subscription__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.allwr-subscription__chip {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
    font: 700 0.78rem var(--allwr-font-body);
    cursor: pointer;
    transition:
        border-color var(--allwr-transition-fast),
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

.allwr-subscription__chip:hover {
    border-color: var(--allwr-navy);
    color: var(--allwr-navy);
}

.allwr-subscription__chip[aria-pressed="true"] {
    border-color: var(--allwr-navy);
    background: var(--allwr-navy);
    color: var(--allwr-card);
}

/* --- Aside: totales, cambios pendientes, método de cobro --- */
.allwr-subscription__aside-cycle {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.allwr-subscription__aside-cycle > span {
    color: var(--allwr-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.allwr-subscription__aside-cycle .allwr-seg {
    display: flex;
}

.allwr-subscription__aside-cycle .allwr-seg__item {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
}

.allwr-subscription__totals {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.allwr-subscription__totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.allwr-subscription__totals dt {
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-subscription__totals dd {
    margin: 0;
    color: var(--allwr-navy);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.allwr-subscription__totals dd.is-discount {
    color: var(--allwr-green);
}

.allwr-subscription__totals-grand {
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--allwr-line);
}

.allwr-subscription__totals-grand dt {
    color: var(--allwr-navy);
    font-weight: 800;
}

.allwr-subscription__totals-grand dd {
    display: grid;
    gap: 0.05rem;
}

.allwr-subscription__totals-grand dd strong {
    font-size: 1.25rem;
    font-weight: 900;
}

.allwr-subscription__totals-grand dd small,
.allwr-subscription__totals dd small {
    display: block;
    color: var(--allwr-ink-2);
    font-size: 0.74rem;
    font-weight: 600;
}

.allwr-subscription__next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--allwr-line);
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
}

.allwr-subscription__next svg {
    width: 15px;
    height: 15px;
}

.allwr-subscription__next strong {
    margin-left: auto;
    color: var(--allwr-navy);
}

.allwr-subscription__pending {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.allwr-subscription__pending li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-off-white);
    font-size: 0.84rem;
}

.allwr-subscription__pending strong {
    min-width: 0;
    color: var(--allwr-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-subscription__pending small {
    color: var(--allwr-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.allwr-subscription__pending-undo {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

.allwr-subscription__pending-undo:hover {
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-subscription__pending-undo svg {
    width: 14px;
    height: 14px;
}

.allwr-subscription__aside-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.allwr-subscription__aside-actions .allwr-btn {
    justify-content: center;
}

.allwr-subscription__aside-payment:empty {
    display: none;
}

/* --- Diálogo de revisión (presupuesto del servidor) --- */
.allwr-subscription__quote td,
.allwr-subscription__quote th {
    vertical-align: top;
}

.allwr-subscription__quote td strong {
    display: block;
    color: var(--allwr-navy);
}

.allwr-subscription__quote td small {
    display: block;
    color: var(--allwr-ink-2);
    font-size: 0.74rem;
}

.allwr-subscription__quote td .allwr-tag {
    margin-top: 0.3rem;
}

.allwr-subscription__quote-config {
    margin-top: 0.25rem;
    color: var(--allwr-ink-2);
    font-size: 0.74rem;
}

.allwr-subscription__quote-config small {
    display: block;
}

.allwr-subscription__quote-empty {
    color: var(--allwr-muted);
}

.allwr-subscription__quote tfoot th {
    text-align: left;
    color: var(--allwr-ink-2);
    font-weight: 700;
}

.allwr-subscription__quote-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-subscription__quote-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* --- Facturas --- */
.allwr-invoices {
    display: grid;
    gap: 1rem;
}

.allwr-invoices__strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.5rem;
    padding: 0.9rem 1.1rem;
}

.allwr-invoices__strip-main,
.allwr-invoices__strip-channel {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.allwr-invoices__strip-main > svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    color: var(--allwr-gold-text);
}

.allwr-invoices__strip-main div {
    display: grid;
    gap: 0.1rem;
}

.allwr-invoices__strip-label {
    color: var(--allwr-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.allwr-invoices__strip-main strong {
    color: var(--allwr-navy);
    font-size: 1rem;
    font-weight: 800;
}

.allwr-invoices__strip-main small,
.allwr-invoices__strip-channel span {
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
}

.allwr-invoices__strip-channel svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--allwr-navy);
}

.allwr-invoices__notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--allwr-red) 35%, var(--allwr-line));
    border-radius: var(--allwr-radius-md);
    background: color-mix(in srgb, var(--allwr-red) 7%, var(--allwr-card));
    color: var(--allwr-ink);
    font-size: 0.88rem;
}

.allwr-invoices__notice > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--allwr-red);
}

.allwr-invoices__notice span {
    flex: 1 1 200px;
}

.allwr-invoices__card .allwr-card__head {
    flex-wrap: wrap;
}

.allwr-invoices__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.allwr-invoices__filters .allwr-settings-page__field {
    min-width: 150px;
}

.allwr-invoices__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1.25rem 0.25rem;
    color: var(--allwr-ink-2);
    font-size: 0.9rem;
}

.allwr-invoices__state svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.allwr-invoices__state--error {
    color: var(--allwr-red);
}

.allwr-invoices__table {
    min-width: 720px;
}

.allwr-invoices__row {
    cursor: pointer;
}

.allwr-invoices__row:hover td {
    background: var(--allwr-off-white);
}

.allwr-invoices__row.is-open td {
    background: var(--allwr-gold-bg);
}

.allwr-invoices__expander {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.2rem 0.2rem 0;
    border: 0;
    background: transparent;
    color: var(--allwr-navy);
    font: 800 0.88rem var(--allwr-font-body);
    cursor: pointer;
}

.allwr-invoices__expander svg {
    width: 15px;
    height: 15px;
    transition: transform var(--allwr-transition-fast);
}

.allwr-invoices__expander[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.allwr-invoices__concept {
    max-width: 320px;
    color: var(--allwr-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-invoices__pdf {
    width: 1%;
    white-space: nowrap;
}

.allwr-invoices__pdf .allwr-btn {
    min-width: 38px;
    max-width: none;
    padding-inline: 0.55rem;
}

.allwr-invoices__pdf .allwr-btn svg {
    flex: 0 0 auto;
}

.allwr-invoices__status {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.allwr-invoices__status > svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.allwr-invoices__status strong {
    display: block;
    font-weight: 800;
}

.allwr-invoices__status small {
    display: block;
    color: var(--allwr-ink-2);
    font-size: 0.74rem;
}

.allwr-invoices__status--pending { color: var(--allwr-amber); }
.allwr-invoices__status--process { color: var(--allwr-navy); }
.allwr-invoices__status--ok { color: var(--allwr-green); }
.allwr-invoices__status--incident { color: var(--allwr-red); }
.allwr-invoices__status--muted { color: var(--allwr-ink-2); }

.allwr-invoices__detail td {
    padding: 0.9rem 1rem 1.1rem;
    background: var(--allwr-off-white);
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-invoices__detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(200px, 0.8fr);
    gap: 1.25rem;
    align-items: start;
}

.allwr-invoices__detail-title {
    margin: 0 0 0.6rem;
    color: var(--allwr-navy);
    font-size: 0.85rem;
    font-weight: 800;
}

.allwr-invoices__detail-state {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-invoices__detail-state svg {
    width: 15px;
    height: 15px;
}

.allwr-invoices__timeline {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-invoices__timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.84rem;
    color: var(--allwr-ink);
}

.allwr-invoices__timeline-item time {
    color: var(--allwr-ink-2);
    font-size: 0.76rem;
    white-space: nowrap;
}

.allwr-invoices__timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--allwr-line-strong);
}

.allwr-invoices__timeline-item.is-ok .allwr-invoices__timeline-dot { background: var(--allwr-green); }
.allwr-invoices__timeline-item.is-process .allwr-invoices__timeline-dot { background: var(--allwr-navy); }
.allwr-invoices__timeline-item.is-incident .allwr-invoices__timeline-dot { background: var(--allwr-red); }

.allwr-invoices__incident {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--allwr-red) 35%, var(--allwr-line));
    border-radius: var(--allwr-radius-md);
    background: color-mix(in srgb, var(--allwr-red) 7%, var(--allwr-card));
    font-size: 0.84rem;
}

.allwr-invoices__incident > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--allwr-red);
}

.allwr-invoices__incident p {
    margin: 0 0 0.6rem;
    color: var(--allwr-ink);
    line-height: 1.5;
}

.allwr-invoices__detail-meta {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-invoices__detail-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.allwr-invoices__detail-meta dt {
    color: var(--allwr-ink-2);
}

.allwr-invoices__detail-meta dd {
    margin: 0;
    color: var(--allwr-navy);
    font-weight: 700;
    text-align: right;
}

.allwr-invoices__breakdown {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding: 0.35rem 0;
    border: 0;
    background: transparent;
    color: var(--allwr-navy);
    font: 800 0.82rem var(--allwr-font-body);
    cursor: pointer;
    transition: color var(--allwr-transition-fast);
}

.allwr-invoices__breakdown:hover {
    color: var(--allwr-gold-text);
}

.allwr-invoices__breakdown svg {
    width: 15px;
    height: 15px;
}

.allwr-invoices__lines {
    margin-top: 0.5rem;
    min-width: 520px;
}

.allwr-invoices__lines tfoot th {
    text-align: right;
    color: var(--allwr-ink-2);
    font-weight: 700;
}

.allwr-invoices__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.9rem;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
}

.allwr-invoices__pagination-actions {
    display: flex;
    gap: 0.4rem;
}

/* --- Responsive --- */
@media (min-width: 1200px) {
    .allwr-subscription__aside {
        position: sticky;
        top: calc(var(--allwr-topbar-h) + 1rem);
    }
}

@media (max-width: 1199px) {
    .allwr-subscription__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .allwr-settings {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    /* El menú pasa a una fila horizontal de chips desplazable. */
    .allwr-settings__menu {
        position: static;
        display: flex;
        gap: 0.35rem;
        margin-inline: calc(-1 * clamp(1rem, 2vw, 1.5rem));
        padding: 0 clamp(1rem, 2vw, 1.5rem) 0.35rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .allwr-settings__menu::-webkit-scrollbar {
        height: 0;
    }

    .allwr-settings__group,
    .allwr-settings__items {
        display: contents;
    }

    .allwr-settings__group-label {
        display: none;
    }

    .allwr-settings__item {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0.4rem 0.8rem;
        border: 1px solid var(--allwr-line);
        border-radius: var(--allwr-radius-pill);
        background: var(--allwr-card);
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .allwr-settings__item::before {
        display: none;
    }

    .allwr-settings__item.is-active,
    .allwr-settings__item[aria-current="page"] {
        border-color: color-mix(in srgb, var(--allwr-gold) 55%, var(--allwr-line));
    }

}

@container (max-width: 520px) {
    .allwr-subscription__row-main,
    .allwr-subscription__row--catalog .allwr-subscription__row-main {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.4rem 0.65rem;
    }

    .allwr-subscription__row-config,
    .allwr-subscription__row-price,
    .allwr-subscription__row-action {
        grid-column: 2;
    }

    .allwr-subscription__row-config {
        display: flex;
        flex-wrap: wrap;
        gap: 0.15rem 0.6rem;
    }

    .allwr-subscription__row-price {
        text-align: left;
        white-space: normal;
    }

    .allwr-subscription__row-action {
        justify-content: flex-start;
    }

    .allwr-subscription__row--addon {
        margin-left: 1rem;
    }

    .allwr-subscription__includes-inline {
        display: none;
    }
}

@media (max-width: 760px) {
    .allwr-settings-page__form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-settings__identity {
        align-items: flex-start;
    }

    .allwr-dialog {
        padding: 0.75rem;
        align-items: end;
    }

    .allwr-dialog__box {
        max-height: calc(100vh - 1.5rem);
    }

    .allwr-subscription__pending li {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .allwr-subscription__pending small {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-settings__item,
    .allwr-settings__item::before,
    .allwr-settings__item svg,
    .allwr-settings__type-option,
    .allwr-settings__language,
    .allwr-settings__language svg,
    .allwr-dialog__close,
    .allwr-subscription__row,
    .allwr-subscription__search,
    .allwr-subscription__chip,
    .allwr-subscription__pending-undo,
    .allwr-invoices__expander svg,
    .allwr-invoices__breakdown {
        transition-duration: 0.01ms !important;
    }

    .allwr-settings__item:hover,
    .allwr-settings__type-option:hover,
    .allwr-subscription__chip:hover,
    .allwr-invoices__expander:hover svg {
        transform: none !important;
    }

    .allwr-invoices__expander[aria-expanded="true"] svg {
        transform: rotate(90deg) !important;
    }

    .allwr-tabs--underline .allwr-tab::after {
        transition-duration: 0.01ms !important;
    }
}

/* ===== A. Machine (AI chat over the user's own data) ===================== */
.allwr-machine {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.allwr-machine__model-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.allwr-machine__model-row label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--allwr-muted);
}

.allwr-machine__model-select {
    min-height: var(--allwr-control-h, 36px);
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    font: 500 0.86rem var(--allwr-font-body);
    outline: none;
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-fast);
}

.allwr-machine__model-select:focus-visible {
    border-color: var(--allwr-gold);
    box-shadow: 0 0 0 3px var(--allwr-gold-soft);
}

.allwr-machine__messages {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.25rem 0.1rem;
    margin-bottom: 0.85rem;
}

.allwr-machine__empty {
    padding: 1.5rem 0;
    color: var(--allwr-muted);
    font-size: 0.9rem;
    text-align: center;
}

.allwr-machine__msg {
    max-width: 78%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
}

.allwr-machine__msg-text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.92rem;
    line-height: 1.5;
}

.allwr-machine__msg-meta {
    display: block;
    margin-top: 0.3rem;
    color: var(--allwr-muted);
    font-size: 0.72rem;
}

.allwr-machine__msg--user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--allwr-navy) 8%, var(--allwr-card));
}

.allwr-machine__msg--assistant {
    align-self: flex-start;
    background: var(--allwr-card);
}

.allwr-machine__msg--thinking .allwr-machine__msg-text {
    color: var(--allwr-muted);
    font-style: italic;
}

.allwr-machine__msg--error {
    align-self: flex-start;
    background: var(--allwr-off-white);
    border-color: var(--allwr-danger);
}

.allwr-machine__msg--error .allwr-machine__msg-text {
    color: var(--allwr-danger);
}

.allwr-machine__form {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.allwr-machine__textarea {
    flex: 1;
    min-height: 44px;
    max-height: 160px;
    resize: vertical;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    font: 500 0.9rem var(--allwr-font-body);
    outline: none;
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-fast);
}

.allwr-machine__textarea:focus-visible {
    border-color: var(--allwr-gold);
    box-shadow: 0 0 0 3px var(--allwr-gold-soft);
}

.allwr-machine__disclaimer {
    margin: 0.6rem 0 0;
    color: var(--allwr-muted);
    font-size: 0.76rem;
}

.allwr-machine__log .allwr-table details summary {
    cursor: pointer;
    color: var(--allwr-ink);
}

.allwr-machine__log .allwr-table details[open] summary {
    color: var(--allwr-muted);
}

@media (prefers-reduced-motion: reduce) {
    .allwr-machine__model-select,
    .allwr-machine__textarea {
        transition-duration: 0.01ms;
    }
}

/* ============================================================
   Aviso de migración (banner superior de /app/support)
   ============================================================ */

/* Invitación temporal a importar tickets desde otra herramienta. Se pinta
   antes del panel "Portal y dominios" y caduca sola (ver
   allwr_support_import_hint_state en src/support_portal_admin.php). Sin
   hovers propios: los botones ya traen el suyo de .allwr-btn. */

.allwr-import-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--allwr-space-3);
    margin: 0 var(--allwr-gutter) var(--allwr-space-4);
    padding: var(--allwr-space-3) var(--allwr-space-4);
    border: 1px solid var(--allwr-gold-soft);
    border-radius: 16px;
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-import-hint[hidden] {
    display: none;
}

.allwr-import-hint__icon {
    flex: none;
    display: inline-flex;
    color: var(--allwr-gold-text);
}

.allwr-import-hint__copy {
    flex: 1 1 320px;
    min-width: 0;
}

.allwr-import-hint__title {
    margin: 0;
    font-weight: 700;
    color: var(--allwr-ink);
}

.allwr-import-hint__body {
    margin: var(--allwr-space-1) 0 0;
    color: var(--allwr-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.allwr-import-hint__error {
    margin: var(--allwr-space-1) 0 0;
    color: var(--allwr-danger);
    font-size: 0.92rem;
}

.allwr-import-hint__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-2);
}

/* ============================================================
   Support workspace: tab header of /app/support (portal managers)
   ============================================================ */

.allwr-support-workspace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--allwr-space-2) var(--allwr-space-4);
    margin: 0 var(--allwr-gutter) var(--allwr-space-4);
    container: allwr-support-header / inline-size;
}

.allwr-support-workspace__tabs {
    flex: 1 1 auto;
    min-width: 0;
}

.allwr-support-workspace__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
}

.allwr-support-workspace__tab svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke-width: 1.8;
}

.allwr-support-workspace__portal {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-3);
    min-width: 0;
    max-width: 100%;
}

.allwr-support-workspace__portal-name {
    min-width: 0;
    overflow: hidden;
    color: var(--allwr-ink);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-support-workspace__portal-link {
    flex: none;
    text-decoration: none;
}

.allwr-support-workspace__view {
    display: grid;
    gap: var(--allwr-space-4);
    margin: 0 var(--allwr-gutter) var(--allwr-space-5);
}

.allwr-support-workspace__title {
    margin: 0;
    color: var(--allwr-ink);
    font: 700 clamp(1.15rem, 1rem + 0.5vw, 1.35rem) var(--allwr-font-display);
}

.allwr-support-workspace__description {
    margin: 0.25rem 0 0;
    color: var(--allwr-muted);
    font-size: 0.92rem;
}

/* Too narrow for four labelled tabs: icons only, except the current tab; the label stays as the accessible name. */
@container allwr-support-header (max-width: 31rem) {
    .allwr-tabs--underline .allwr-support-workspace__tab {
        padding-inline: 0.6rem;
    }

    .allwr-tabs--underline .allwr-support-workspace__tab::after {
        left: 0.6rem;
        right: 0.6rem;
    }

    .allwr-support-workspace__tab:not([aria-current="page"]) span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-support-workspace__tab,
    .allwr-support-workspace__tab::after,
    .allwr-support-workspace__portal-link {
        transition-duration: 0.01ms;
    }
}

/* ============================================================
   Support workspace: list and drawer views (support-contacts.js, support-companies.js)
   ============================================================ */

.allwr-support-list {
    display: grid;
    align-items: start;
    gap: var(--allwr-space-4);
    min-width: 0;
}

.allwr-support-list__main {
    display: grid;
    gap: var(--allwr-space-4);
    min-width: 0;
    padding: var(--allwr-space-4);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    container: allwr-support-list / inline-size;
}

.allwr-support-list__toolbar {
    display: grid;
    gap: var(--allwr-space-3);
    min-width: 0;
}

.allwr-support-list__search,
.allwr-support-list__picker-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.allwr-support-list__search > svg,
.allwr-support-list__picker-search > svg {
    position: absolute;
    left: 0.85rem;
    width: 17px;
    height: 17px;
    color: var(--allwr-muted);
    pointer-events: none;
}

.allwr-support-list__search-input,
.allwr-support-list__picker-input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.55rem 2.75rem 0.55rem 2.6rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-sm);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 500 0.92rem var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-support-list__picker-input {
    min-height: 38px;
    padding-right: 0.75rem;
    font-size: 0.88rem;
}

.allwr-support-list__search-input::placeholder,
.allwr-support-list__picker-input::placeholder {
    color: var(--allwr-muted);
}

.allwr-support-list__search-input::-webkit-search-cancel-button {
    appearance: none;
}

.allwr-support-list__search-input:hover,
.allwr-support-list__picker-input:hover {
    border-color: var(--allwr-line-strong);
}

.allwr-support-list__search-clear {
    position: absolute;
    right: 0.4rem;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--allwr-radius-pill);
    background: transparent;
    color: var(--allwr-muted);
    cursor: pointer;
    transition: background var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-support-list__search-clear:hover {
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
}

.allwr-support-list__search-clear svg,
.allwr-support-list__sort svg,
.allwr-support-list__page svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.allwr-support-list__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-2);
}

.allwr-support-list__filter {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-sm);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 600 0.86rem var(--allwr-font-body);
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-support-list__filter:hover {
    border-color: var(--allwr-line-strong);
    background: var(--allwr-off-white);
}

.allwr-support-list__filter[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--allwr-ink) 32%, var(--allwr-line));
    background: color-mix(in srgb, var(--allwr-ink) 7%, var(--allwr-card));
}

.allwr-support-list__filter-count {
    min-width: 1.6rem;
    padding: 0.12rem 0.42rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.allwr-support-list__table-wrap {
    min-width: 0;
}

.allwr-support-list__table-wrap tbody {
    transition: opacity var(--allwr-transition-fast);
}

.allwr-support-list__table-wrap[aria-busy="true"] tbody {
    opacity: 0.55;
}

.allwr-support-list__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.allwr-support-list__th {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--allwr-line);
    text-align: left;
}

.allwr-support-list__th--name { width: 38%; }
.allwr-support-list__th--company { width: 26%; }
.allwr-support-list__th--tickets { width: 16%; }
.allwr-support-list__th--last_activity { width: 20%; }

.allwr-support-list__sort {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0 -0.35rem;
    padding: 0.25rem 0.35rem;
    border: 0;
    border-radius: var(--allwr-r-sm);
    background: transparent;
    color: var(--allwr-ink-2);
    font: 600 0.82rem var(--allwr-font-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-support-list__sort:hover,
.allwr-support-list__th[aria-sort] .allwr-support-list__sort {
    color: var(--allwr-ink);
}

.allwr-support-list__sort:hover {
    background: var(--allwr-surface-2);
}

.allwr-support-list__th-label {
    color: var(--allwr-ink-2);
    font: 600 0.82rem var(--allwr-font-body);
    white-space: nowrap;
}

.allwr-support-list__sort [data-sort-icon] {
    display: inline-flex;
    color: var(--allwr-ink-3);
}

.allwr-support-list__th[aria-sort] [data-sort-icon] {
    color: var(--allwr-ink);
}

.allwr-support-list__row {
    cursor: pointer;
    transition: background var(--allwr-transition-fast);
}

.allwr-support-list__row > td {
    min-width: 0;
    padding: 0.65rem 0.6rem;
    border-bottom: 1px solid var(--allwr-line);
    vertical-align: middle;
}

.allwr-support-list__row:hover {
    background: var(--allwr-off-white);
}

.allwr-support-list__row.is-selected {
    background: color-mix(in srgb, var(--allwr-ink) 6%, var(--allwr-card));
    box-shadow: inset 3px 0 0 var(--allwr-ink);
}

.allwr-support-list__row--skeleton {
    cursor: default;
}

.allwr-support-list__skeleton {
    display: block;
    width: 60%;
    height: 0.75rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
}

.allwr-support-list__skeleton--short {
    width: 35%;
    margin-top: 0.45rem;
}

.allwr-support-list__entity {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    padding: 0.15rem;
    border: 0;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.allwr-support-list__identity {
    display: grid;
    min-width: 0;
}

.allwr-support-list__name,
.allwr-support-list__email,
.allwr-support-list__company-link,
.allwr-support-list__company-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-support-list__name {
    color: var(--allwr-ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.allwr-support-list__email {
    color: var(--allwr-muted);
    font-size: 0.8rem;
}

.allwr-support-list__company {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.86rem;
}

.allwr-support-list__company-link,
.allwr-support-list__link {
    border-radius: var(--allwr-r-sm);
    color: var(--allwr-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--allwr-transition-fast);
}

.allwr-support-list__company-link:hover,
.allwr-support-list__link:hover {
    text-decoration-color: var(--allwr-gold-dec);
}

.allwr-support-list__company-text {
    color: var(--allwr-ink);
}

.allwr-support-list__muted {
    margin: 0;
    color: var(--allwr-muted);
    font-size: 0.86rem;
}

.allwr-support-list__cell-action {
    appearance: none;
    display: grid;
    justify-items: start;
    gap: 0.1rem;
    margin: -0.2rem -0.35rem;
    padding: 0.2rem 0.35rem;
    border: 0;
    border-radius: var(--allwr-r-sm);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--allwr-transition-fast);
}

.allwr-support-list__cell-action:hover {
    background: var(--allwr-surface-2);
}

.allwr-support-list__open {
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-support-list__open.is-active {
    color: var(--allwr-red);
    font-weight: 700;
}

.allwr-support-list__total,
.allwr-support-list__relative {
    color: var(--allwr-muted);
    font-size: 0.78rem;
}

.allwr-support-list__cell--activity {
    font-variant-numeric: tabular-nums;
}

.allwr-support-list__date {
    display: block;
    color: var(--allwr-ink);
    font-size: 0.84rem;
}

.allwr-support-list__relative {
    display: block;
}

.allwr-support-list__state {
    display: grid;
    justify-items: center;
    gap: var(--allwr-space-2);
    padding: var(--allwr-space-6) var(--allwr-space-4);
    text-align: center;
}

.allwr-support-list__state-title {
    margin: 0;
    color: var(--allwr-ink);
    font-weight: 600;
}

.allwr-support-list__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--allwr-space-3);
}

.allwr-support-list__summary {
    margin: 0;
    color: var(--allwr-muted);
    font-size: 0.84rem;
}

.allwr-support-list__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.allwr-support-list__page {
    appearance: none;
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink);
    font: 600 0.84rem var(--allwr-font-body);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-support-list__page:hover:not(:disabled) {
    background: var(--allwr-surface-2);
}

.allwr-support-list__page[aria-current="page"] {
    border-color: var(--allwr-line-2);
    background: color-mix(in srgb, var(--allwr-ink) 7%, var(--allwr-card));
}

.allwr-support-list__page:disabled {
    cursor: default;
    opacity: 0.45;
}

.allwr-support-list__gap {
    padding: 0 0.25rem;
    color: var(--allwr-muted);
}

/* Drawer: beside the list on wide screens, a side sheet below 1200px, full screen below 720px. */
.allwr-support-list__drawer {
    display: grid;
    align-content: start;
    min-width: 0;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-support-list__drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.1rem 0.9rem;
}

.allwr-support-list__avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
}

.allwr-support-list__drawer-identity {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.2rem;
}

.allwr-support-list__drawer-title {
    margin: 0;
    border-radius: var(--allwr-r-sm);
    color: var(--allwr-ink);
    font: 700 1.05rem var(--allwr-font-body);
    overflow-wrap: anywhere;
}

.allwr-support-list__drawer-title:focus {
    outline: none;
}

.allwr-support-list__drawer-sub {
    display: grid;
    justify-items: start;
    gap: 0.3rem;
}

.allwr-support-list__drawer-sub:empty {
    display: none;
}

.allwr-support-list__drawer-email {
    margin: 0.15rem 0 0;
    color: var(--allwr-muted);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.allwr-support-list__drawer-close {
    flex: none;
}

.allwr-support-list__drawer-body {
    min-width: 0;
}

.allwr-support-list__drawer-message {
    display: grid;
    justify-items: start;
    gap: var(--allwr-space-2);
    margin: 0;
    padding: 0 1.1rem 1.1rem;
    color: var(--allwr-muted);
    font-size: 0.88rem;
}

.allwr-support-list__drawer-message p {
    margin: 0;
}

.allwr-support-list__drawer-tabs {
    display: flex;
    gap: var(--allwr-space-5);
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-support-list__drawer-tab {
    appearance: none;
    margin-bottom: -1px;
    padding: 0.6rem 0.1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--allwr-ink-2);
    font: 600 0.88rem var(--allwr-font-body);
    cursor: pointer;
    transition: color var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-support-list__drawer-tab:hover {
    color: var(--allwr-ink);
}

.allwr-support-list__drawer-tab[aria-selected="true"] {
    border-bottom-color: var(--allwr-gold-dec);
    color: var(--allwr-ink);
}

.allwr-support-list__panel {
    display: grid;
    gap: var(--allwr-space-5);
    padding: 1.1rem;
}

.allwr-support-list__section {
    display: grid;
    gap: var(--allwr-space-2);
    min-width: 0;
}

.allwr-support-list__section-title {
    margin: 0;
    color: var(--allwr-ink);
    font: 700 0.95rem var(--allwr-font-body);
}

.allwr-support-list__facts {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.allwr-support-list__facts > div {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    gap: 0.75rem;
}

.allwr-support-list__facts dt {
    color: var(--allwr-muted);
    font-size: 0.84rem;
}

.allwr-support-list__facts dd {
    margin: 0;
    color: var(--allwr-ink);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.allwr-support-list__company-box {
    display: grid;
    gap: var(--allwr-space-2);
    padding: 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-off-white);
}

.allwr-support-list__company-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.allwr-support-list__company-origin,
.allwr-support-list__impact {
    margin: 0;
    color: var(--allwr-muted);
    font-size: 0.8rem;
}

.allwr-support-list__error {
    margin: 0;
    color: var(--allwr-danger);
    font-size: 0.84rem;
}

.allwr-support-list__text {
    margin: 0;
    color: var(--allwr-ink);
    font-size: 0.88rem;
}

.allwr-support-list__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    justify-self: start;
    font-size: 0.86rem;
}

.allwr-support-list__link svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.allwr-support-list__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: var(--allwr-r-md);
    background: color-mix(in srgb, var(--allwr-ink) 5%, var(--allwr-card));
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
}

.allwr-support-list__note svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 0.1rem;
}

.allwr-support-list__card-list {
    display: grid;
    gap: var(--allwr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-support-list__card {
    display: grid;
    gap: 0.25rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-support-list__card:hover {
    border-color: var(--allwr-line-strong);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-support-list__card-code {
    color: var(--allwr-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.allwr-support-list__card-title {
    color: var(--allwr-ink);
    font-size: 0.9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.allwr-support-list__card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    color: var(--allwr-muted);
    font-size: 0.78rem;
}

.allwr-support-list__status--open {
    background: color-mix(in srgb, var(--allwr-amber) 12%, var(--allwr-card));
    color: var(--allwr-amber);
}

.allwr-support-list__status--closed {
    background: color-mix(in srgb, var(--allwr-green) 12%, var(--allwr-card));
    color: var(--allwr-green);
}

/* Company picker (combobox + listbox popup). */
.allwr-support-list__picker {
    position: relative;
    justify-self: start;
    width: 100%;
}

.allwr-support-list__picker-trigger svg {
    width: 15px;
    height: 15px;
}

.allwr-support-list__picker-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 30;
    display: grid;
    gap: var(--allwr-space-2);
    padding: 0.6rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-support-list__picker-baja {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    cursor: pointer;
}

.allwr-support-list__picker-baja input {
    accent-color: var(--allwr-ink);
}

.allwr-support-list__picker-list {
    display: grid;
    gap: 2px;
    max-height: min(18rem, 45vh);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.allwr-support-list__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--allwr-r-md);
    cursor: pointer;
    transition: background var(--allwr-transition-fast);
}

.allwr-support-list__option:hover,
.allwr-support-list__option.is-active {
    background: var(--allwr-surface-2);
}

.allwr-support-list__option.is-active {
    box-shadow: inset 3px 0 0 var(--allwr-ink);
}

.allwr-support-list__option-text {
    display: grid;
    min-width: 0;
}

.allwr-support-list__option-name {
    color: var(--allwr-ink);
    font-size: 0.86rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.allwr-support-list__option-meta {
    overflow: hidden;
    color: var(--allwr-muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-support-list__option-check {
    display: inline-flex;
    visibility: hidden;
    color: var(--allwr-ink);
}

.allwr-support-list__option-check svg {
    width: 16px;
    height: 16px;
}

.allwr-support-list__option[aria-selected="true"] .allwr-support-list__option-check {
    visibility: visible;
}

.allwr-support-list__option-meta--wrap {
    overflow: visible;
    white-space: normal;
}

.allwr-support-list__picker-hint {
    margin: 0;
    padding: 0 0.6rem;
    color: var(--allwr-muted);
    font-size: 0.78rem;
}

.allwr-support-list__picker-footer {
    padding-top: var(--allwr-space-2);
    border-top: 1px solid var(--allwr-line);
}

.allwr-support-list__search-input:focus-visible,
.allwr-support-list__picker-input:focus-visible,
.allwr-support-list__search-clear:focus-visible,
.allwr-support-list__filter:focus-visible,
.allwr-support-list__sort:focus-visible,
.allwr-support-list__entity:focus-visible,
.allwr-support-list__cell-action:focus-visible,
.allwr-support-list__company-link:focus-visible,
.allwr-support-list__link:focus-visible,
.allwr-support-list__page:focus-visible,
.allwr-support-list__drawer-title:focus-visible,
.allwr-support-list__drawer-tab:focus-visible,
.allwr-support-list__panel:focus-visible,
.allwr-support-list__card:focus-visible,
.allwr-support-list__picker-baja input:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

/* Empresas: columns, access badge, stats, email domains and the access radios. */
.allwr-support-companies .allwr-support-list__th--name { width: 32%; }
.allwr-support-companies .allwr-support-list__th--contacts { width: 13%; }
.allwr-support-companies .allwr-support-list__th--tickets { width: 15%; }
.allwr-support-companies .allwr-support-list__th--last_activity { width: 18%; }
.allwr-support-companies .allwr-support-list__th--access { width: 22%; }

.allwr-support-companies__avatar svg {
    width: 18px;
    height: 18px;
}

.allwr-support-companies .allwr-support-list__avatar--lg svg {
    width: 24px;
    height: 24px;
}

.allwr-support-companies__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.4rem;
    min-width: 0;
    color: var(--allwr-muted);
    font-size: 0.8rem;
}

.allwr-support-companies__count {
    color: var(--allwr-ink);
    font-size: 0.86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.allwr-support-companies__count--zero {
    color: var(--allwr-muted);
    font-weight: 400;
}

.allwr-support-companies__tickets {
    display: grid;
    gap: 0.1rem;
}

.allwr-support-companies__access {
    appearance: none;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
    font: 600 0.78rem var(--allwr-font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-support-companies__access--shared {
    border-color: color-mix(in srgb, var(--allwr-ink) 28%, var(--allwr-line));
    background: color-mix(in srgb, var(--allwr-ink) 6%, var(--allwr-card));
    color: var(--allwr-ink);
}

.allwr-support-companies__access:hover {
    border-color: var(--allwr-line-strong);
}

.allwr-support-companies__drawer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin: 0.15rem 0 0;
    color: var(--allwr-muted);
    font-size: 0.84rem;
}

.allwr-support-companies__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--allwr-space-2);
    margin: 0;
}

.allwr-support-companies__stats > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-off-white);
}

.allwr-support-companies__stats dt {
    color: var(--allwr-muted);
    font-size: 0.78rem;
}

.allwr-support-companies__stats dd {
    margin: 0;
    color: var(--allwr-ink);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.allwr-support-companies__stats .allwr-support-companies__stat-date {
    font-size: 0.86rem;
    font-weight: 600;
}

.allwr-support-companies__board {
    justify-self: start;
    text-decoration: none;
}

.allwr-support-companies__domains {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-support-companies__domains li {
    padding: 0.2rem 0.6rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.allwr-support-companies__fieldset {
    display: grid;
    gap: var(--allwr-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.allwr-support-companies__fieldset > legend {
    margin-bottom: var(--allwr-space-2);
    padding: 0;
}

.allwr-support-companies__scope {
    margin: 0 0 var(--allwr-space-1);
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
    line-height: 1.45;
}

.allwr-support-companies__locked {
    margin: 0 0 var(--allwr-space-1);
    color: var(--allwr-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.allwr-support-companies__choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-support-companies__choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--allwr-ink) 32%, var(--allwr-line));
    background: color-mix(in srgb, var(--allwr-ink) 5%, var(--allwr-card));
}

.allwr-support-companies__choice input {
    grid-row: 1;
    width: 16px;
    height: 16px;
    margin: 0.15rem 0 0;
    accent-color: var(--allwr-ink);
}

.allwr-support-companies__choice label {
    grid-column: 2;
    color: var(--allwr-ink);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.allwr-support-companies__choice-help {
    grid-column: 2;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
}

.allwr-support-companies__fieldset:disabled .allwr-support-companies__choice,
.allwr-support-companies__choice:has(input:disabled) {
    opacity: 0.7;
}

.allwr-support-companies__fieldset:disabled label,
.allwr-support-companies__choice input:disabled + label {
    cursor: default;
}

.allwr-support-companies__notice {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-support-companies__notice.is-success {
    color: var(--allwr-green);
}

.allwr-support-companies__notice svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.allwr-support-companies__access:focus-visible,
.allwr-support-companies__board:focus-visible,
.allwr-support-companies__choice input:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

@media (min-width: 1200px) {
    .allwr-support-list.has-drawer {
        grid-template-columns: minmax(0, 1fr) 440px;
    }

    .allwr-support-list__drawer {
        position: sticky;
        top: calc(var(--allwr-topbar-h) + var(--allwr-space-4));
        max-height: calc(100vh - var(--allwr-topbar-h) - var(--allwr-space-6));
        overflow-y: auto;
    }
}

@media (max-width: 1199.98px) {
    .allwr-support-list__drawer {
        position: fixed;
        top: var(--allwr-topbar-h);
        right: 0;
        bottom: 0;
        z-index: 45;
        width: min(440px, 100%);
        overflow-y: auto;
        border-radius: var(--allwr-radius-lg) 0 0 var(--allwr-radius-lg);
        box-shadow: var(--allwr-shadow-dropdown);
    }
}

@media (max-width: 719.98px) {
    .allwr-support-list__main {
        padding: var(--allwr-space-3);
    }

    .allwr-support-list__drawer {
        top: 0;
        z-index: 1100;
        width: 100%;
        border: 0;
        border-radius: 0;
    }

    .allwr-support-companies__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-support-list__facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }
}

/* The list's own width decides the row layout: the sidebar and the drawer beside it narrow it at any viewport. */
@container allwr-support-list (max-width: 51.99rem) {
    .allwr-support-companies .allwr-support-list__th--contacts,
    .allwr-support-companies .allwr-support-list__row > .allwr-support-companies__cell--contacts {
        display: none;
    }
}

@container allwr-support-list (max-width: 39.99rem) {
    .allwr-support-list__table,
    .allwr-support-list__table thead,
    .allwr-support-list__table tbody {
        display: block;
    }

    .allwr-support-list__table thead tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.9rem;
        padding-bottom: var(--allwr-space-2);
        border-bottom: 1px solid var(--allwr-line);
    }

    .allwr-support-list__th {
        width: auto;
        padding: 0;
        border: 0;
    }

    .allwr-support-list__sort {
        white-space: nowrap;
    }

    .allwr-support-list__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "contact tickets" "company tickets";
        align-items: center;
        gap: 0.3rem 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--allwr-line);
    }

    .allwr-support-list__row > td {
        display: block;
        padding: 0;
        border: 0;
    }

    .allwr-support-list__cell--contact { grid-area: contact; }
    .allwr-support-list__cell--tickets { grid-area: tickets; }

    .allwr-support-list__cell--company { grid-area: company; }

    .allwr-support-list__row > .allwr-support-list__cell--company {
        padding-left: calc(34px + 0.9rem);
    }

    .allwr-support-list__row > .allwr-support-list__cell--activity {
        display: none;
    }

    .allwr-support-list__row--skeleton {
        display: block;
    }

    .allwr-support-companies .allwr-support-list__th {
        width: auto;
    }

    .allwr-support-companies .allwr-support-list__row {
        grid-template-areas: "name tickets" "access tickets";
    }

    .allwr-support-companies__cell--name { grid-area: name; }
    .allwr-support-companies__cell--access { grid-area: access; }

    .allwr-support-companies .allwr-support-list__row > .allwr-support-companies__cell--access {
        padding-left: calc(34px + 0.9rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-support-list__search-input,
    .allwr-support-list__picker-input,
    .allwr-support-list__search-clear,
    .allwr-support-list__filter,
    .allwr-support-list__table-wrap tbody,
    .allwr-support-list__sort,
    .allwr-support-list__row,
    .allwr-support-list__company-link,
    .allwr-support-list__link,
    .allwr-support-list__cell-action,
    .allwr-support-list__page,
    .allwr-support-list__drawer-tab,
    .allwr-support-list__card,
    .allwr-support-list__option,
    .allwr-support-companies__access,
    .allwr-support-companies__choice {
        transition-duration: 0.01ms;
    }
}

/* Last on purpose: several parts set their own display, which would beat [hidden]. */
.allwr-support-list [hidden] {
    display: none;
}

/* ============================================================
   Support workspace: settings tab (support-settings.js)
   ============================================================ */

.allwr-support-settings {
    display: grid;
    gap: var(--allwr-space-4);
    min-width: 0;
    max-width: 60rem;
}

.allwr-support-settings__card {
    display: grid;
    gap: var(--allwr-space-4);
    min-width: 0;
    padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    border: 1px solid var(--allwr-line);
    border-radius: 18px;
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-support-settings__head {
    display: grid;
    gap: 0.25rem;
}

.allwr-support-settings__title {
    margin: 0;
    color: var(--allwr-ink);
    font: 700 1rem var(--allwr-font-body);
}

.allwr-support-settings__description {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
}

.allwr-support-settings__form {
    display: grid;
    gap: var(--allwr-space-4);
    min-width: 0;
}

.allwr-support-settings__field,
.allwr-support-settings__fieldset,
.allwr-support-settings__add {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    max-width: 32rem;
}

.allwr-support-settings__fieldset {
    gap: var(--allwr-space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.allwr-support-settings__fieldset > legend {
    margin-bottom: var(--allwr-space-2);
}

.allwr-support-settings__label {
    padding: 0;
    color: var(--allwr-ink);
    font-size: 0.88rem;
    font-weight: 600;
}

.allwr-support-settings__input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-sm);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 500 0.92rem var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-support-settings__input::placeholder {
    color: var(--allwr-muted);
}

.allwr-support-settings__input:hover {
    border-color: var(--allwr-line-strong);
}

.allwr-support-settings__input[aria-invalid="true"] {
    border-color: var(--allwr-danger);
}

.allwr-support-settings__input:disabled {
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    cursor: not-allowed;
}

.allwr-support-settings__textarea {
    min-height: 6.5rem;
    line-height: 1.5;
    resize: vertical;
}

.allwr-support-settings__help {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
}

.allwr-support-settings__field-error,
.allwr-support-settings__form-error {
    margin: 0;
    color: var(--allwr-danger);
    font-size: 0.84rem;
}

.allwr-support-settings__choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-support-settings__choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--allwr-ink) 32%, var(--allwr-line));
    background: color-mix(in srgb, var(--allwr-ink) 5%, var(--allwr-card));
}

.allwr-support-settings__choice input {
    grid-row: 1;
    width: 16px;
    height: 16px;
    margin: 0.15rem 0 0;
    accent-color: var(--allwr-ink);
}

.allwr-support-settings__choice label {
    grid-column: 2;
    color: var(--allwr-ink);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.allwr-support-settings__choice-help {
    grid-column: 2;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
}

.allwr-support-settings__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--allwr-space-2) var(--allwr-space-3);
}

.allwr-support-settings__dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--allwr-amber);
    font-size: 0.84rem;
    font-weight: 600;
}

.allwr-support-settings__dirty::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--allwr-radius-pill);
    background: currentColor;
}

.allwr-support-settings__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-support-settings__status.is-success {
    color: var(--allwr-green);
}

.allwr-support-settings__status svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.allwr-support-settings__notice {
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: var(--allwr-r-md);
    background: color-mix(in srgb, var(--allwr-amber) 10%, var(--allwr-card));
    color: var(--allwr-amber);
    font-size: 0.84rem;
}

.allwr-support-settings__domains {
    display: grid;
    gap: var(--allwr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-support-settings__domain {
    display: grid;
    gap: var(--allwr-space-2);
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
}

.allwr-support-settings__domain.is-off {
    background: var(--allwr-off-white);
}

.allwr-support-settings__domain-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    min-width: 0;
}

.allwr-support-settings__host {
    min-width: 0;
    color: var(--allwr-ink);
    font: 600 0.92rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.allwr-support-settings__domain.is-off .allwr-support-settings__host {
    color: var(--allwr-ink-2);
}

.allwr-support-settings__badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.allwr-support-settings__badge--pending {
    background: color-mix(in srgb, var(--allwr-amber) 12%, var(--allwr-card));
    color: var(--allwr-amber);
}

.allwr-support-settings__badge--progress {
    border-color: var(--allwr-line);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
}

.allwr-support-settings__badge--active {
    background: color-mix(in srgb, var(--allwr-green) 12%, var(--allwr-card));
    color: var(--allwr-green);
}

.allwr-support-settings__badge--error {
    background: color-mix(in srgb, var(--allwr-danger) 12%, var(--allwr-card));
    color: var(--allwr-danger);
}

.allwr-support-settings__badge--off {
    border-color: var(--allwr-line);
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
}

.allwr-support-settings__checked {
    margin-left: auto;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
}

.allwr-support-settings__domain-error,
.allwr-support-settings__result {
    margin: 0;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.allwr-support-settings__domain-error,
.allwr-support-settings__result--error {
    color: var(--allwr-danger);
}

.allwr-support-settings__result--ok {
    color: var(--allwr-green);
}

.allwr-support-settings__result--warn {
    color: var(--allwr-amber);
}

.allwr-support-settings__domain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-2);
}

.allwr-support-settings__domain-actions .allwr-btn {
    text-decoration: none;
}

.allwr-support-settings__dns {
    display: grid;
    gap: var(--allwr-space-2);
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-off-white);
}

.allwr-support-settings__dns-intro,
.allwr-support-settings__hint {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-support-settings__records {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.allwr-support-settings__record {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.allwr-support-settings__record dt {
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    font-weight: 600;
}

.allwr-support-settings__record dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--allwr-space-2);
    min-width: 0;
    margin: 0;
}

.allwr-support-settings__code {
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border-radius: var(--allwr-r-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 500 0.84rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.allwr-support-settings__copy {
    flex: none;
}

.allwr-support-settings__copy-status {
    margin: 0;
    color: var(--allwr-green);
    font-size: 0.8rem;
}

.allwr-support-settings__empty {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px dashed var(--allwr-line-strong);
    border-radius: var(--allwr-r-lg);
    text-align: center;
}

.allwr-support-settings__empty-title {
    margin: 0;
    color: var(--allwr-ink);
    font-size: 0.92rem;
    font-weight: 600;
}

.allwr-support-settings__empty-body {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-support-settings__add-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-2);
}

.allwr-support-settings__add-row .allwr-support-settings__input {
    flex: 1 1 14rem;
    width: auto;
}

.allwr-support-settings__title:focus-visible,
.allwr-support-settings__input:focus-visible,
.allwr-support-settings__choice input:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-support-workspace__portal-link[hidden] {
    display: none;
}

@media (max-width: 719.98px) {
    .allwr-support-settings__checked {
        flex-basis: 100%;
        margin-left: 0;
    }

    .allwr-support-settings__record {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-support-settings__input,
    .allwr-support-settings__choice {
        transition-duration: 0.01ms;
    }
}

/* Last on purpose: several parts set their own display, which would beat [hidden]. */
.allwr-support-settings [hidden] {
    display: none;
}

/* Contract templates and client contract workflow. */
.allwr-contracts {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2fr);
    gap: var(--allwr-space-5, 24px);
}

.allwr-contracts__list,
.allwr-contracts__editor,
.allwr-contracts__preview,
.allwr-contracts__reminders {
    display: grid;
    align-content: start;
    gap: var(--allwr-space-3, 12px);
}

.allwr-contracts__template {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: var(--allwr-space-2, 8px);
    padding: var(--allwr-space-3, 12px);
    border: 1px solid var(--allwr-line);
    border-radius: 12px;
    color: var(--allwr-ink, var(--allwr-navy));
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--allwr-transition-base), box-shadow var(--allwr-transition-base);
}

.allwr-contracts__template:hover,
.allwr-contracts__template.is-active {
    border-color: var(--allwr-gold-text, var(--allwr-gold));
    box-shadow: var(--allwr-shadow-soft);
}

.allwr-contracts__editor > label,
.allwr-contracts__field label,
.allwr-contracts__signer label,
.allwr-contracts__modal form > label,
.allwr-contracts__modal [data-send-fields] > label {
    display: grid;
    gap: var(--allwr-space-1, 4px);
}

.allwr-contracts__import,
.allwr-contracts__actions,
.allwr-contracts__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--allwr-space-2, 8px);
}

.allwr-contracts__markdown {
    min-height: 24rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.allwr-contracts__field,
.allwr-contracts__signer {
    display: grid;
    grid-template-columns: minmax(120px, 0.9fr) minmax(150px, 1.2fr) minmax(100px, 0.7fr) minmax(140px, 1fr) auto auto;
    align-items: end;
    gap: var(--allwr-space-2, 8px);
    padding: var(--allwr-space-2, 8px) 0;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-contracts__reminders {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    padding: var(--allwr-space-4, 16px);
    border: 1px solid var(--allwr-line);
    border-radius: 14px;
}

.allwr-contracts__reminders legend {
    padding: 0 var(--allwr-space-2, 8px);
    font-weight: 700;
}

.allwr-contracts__preview {
    padding: var(--allwr-space-4, 16px);
    border: 1px solid var(--allwr-line);
    border-radius: 14px;
    background: #fff;
    max-height: 36rem;
    overflow: auto;
}

.allwr-contracts__status[data-kind="error"] {
    color: #9b1c1c;
}

.allwr-contracts__document {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--allwr-space-3, 12px);
    padding: var(--allwr-space-3, 12px) 0;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-contracts__document p {
    margin: var(--allwr-space-1, 4px) 0 0;
    color: var(--allwr-muted);
}

.allwr-contracts__document-link {
    /* In the client sheet the list sits in a narrow column: the actions wrap below instead of squeezing the text. */
    flex: 1 1 16rem;
    min-width: 0;
    display: grid;
    gap: var(--allwr-space-1, 4px);
    padding: var(--allwr-space-2, 8px);
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--allwr-ink, var(--allwr-navy));
    text-align: left;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), background-color var(--allwr-transition-fast);
}

.allwr-contracts__document-link span,
.allwr-contracts__review-list span {
    color: var(--allwr-muted);
}

.allwr-contracts__document-link:hover {
    border-color: var(--allwr-line);
    background: var(--allwr-canvas, var(--allwr-off-white));
}

.allwr-contracts__document-link:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-contracts__review-list {
    display: grid;
    gap: var(--allwr-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-contracts__review-list li {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto;
    gap: var(--allwr-space-2, 8px);
    align-items: center;
    padding-bottom: var(--allwr-space-2, 8px);
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-contracts__proposals {
    display: grid;
    gap: var(--allwr-space-2, 8px);
    margin-bottom: var(--allwr-space-3, 12px);
}

.allwr-contracts__proposals .allwr-contracts__review-list li {
    grid-template-columns: 1fr auto;
}

.allwr-contracts__field--changed > input,
.allwr-contracts__field--changed > select,
.allwr-contracts__field--changed > textarea {
    border-color: var(--allwr-gold-text, var(--allwr-gold));
}

.allwr-contracts__changed-note {
    color: var(--allwr-gold-text, var(--allwr-gold));
}

.allwr-contracts__document-status {
    font-weight: 700;
    color: var(--allwr-ink, var(--allwr-navy));
}

.allwr-contracts__document-meta {
    margin: var(--allwr-space-1, 4px) 0 0;
    color: var(--allwr-muted);
    overflow-wrap: anywhere;
}

.allwr-contracts__modal {
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
}

@media (max-width: 820px) {
    .allwr-contracts,
    .allwr-contracts__field,
    .allwr-contracts__signer,
    .allwr-contracts__reminders,
    .allwr-contracts__review-list li {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-contracts__template,
    .allwr-contracts__document-link {
        transition-duration: 0.01ms;
    }
}

/* --- Impersonación (soporte interno) ------------------------------------- */

.allwr-impersonation-banner {
    position: sticky;
    top: var(--allwr-topbar-h);
    z-index: 49;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem clamp(0.75rem, 2vw, 1.25rem);
    background: var(--allwr-gold-bg);
    border-bottom: 1px solid var(--allwr-gold-dec);
    color: var(--allwr-ink);
    font-size: 0.85rem;
}

.allwr-impersonation-banner i {
    color: var(--allwr-gold-text);
    flex-shrink: 0;
}

.allwr-impersonation-banner__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-impersonation-banner form {
    margin-left: auto;
    flex-shrink: 0;
}

.allwr-impersonation-banner__stop {
    border: 1px solid var(--allwr-gold-text);
    border-radius: 999px;
    background: transparent;
    color: var(--allwr-gold-text);
    font: inherit;
    font-weight: 600;
    padding: 0.2rem 0.85rem;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-impersonation-banner__stop:hover {
    background: var(--allwr-gold-text);
    color: #fff;
}

.allwr-impersonation-banner__stop:focus-visible {
    outline: 3px solid var(--allwr-focus-ring);
    outline-offset: 2px;
}

.allwr-impersonation__toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.allwr-impersonation__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 360px;
    height: var(--allwr-control-h);
    padding-inline: 0.65rem;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-impersonation__search:focus-within {
    border-color: var(--allwr-line-2);
}

.allwr-impersonation__search i {
    color: var(--allwr-ink-3);
    flex-shrink: 0;
}

.allwr-impersonation__search input {
    border: 0;
    background: transparent;
    width: 100%;
    font: inherit;
    color: var(--allwr-ink);
    outline: none;
}

.allwr-impersonation__count {
    color: var(--allwr-ink-2);
    font-size: 0.85rem;
    white-space: nowrap;
}

.allwr-impersonation__user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.allwr-impersonation__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.allwr-impersonation__avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-weight: 600;
}

.allwr-impersonation__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.allwr-impersonation__name {
    font-weight: 600;
    color: var(--allwr-ink);
}

.allwr-impersonation__email {
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.allwr-impersonation__badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.allwr-impersonation__badge--you {
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
}

.allwr-impersonation__badge--inactive {
    background: rgba(178, 58, 72, 0.12);
    color: var(--allwr-danger);
}

.allwr-impersonation__badge--granted {
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
    margin-left: 0;
}

.allwr-impersonation__muted {
    color: var(--allwr-ink-3);
}

.allwr-impersonation__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.allwr-impersonation__btn {
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
}

.allwr-impersonation__empty {
    margin-top: 1rem;
    color: var(--allwr-ink-2);
}

@media (prefers-reduced-motion: reduce) {
    .allwr-impersonation-banner__stop,
    .allwr-impersonation__search {
        transition-duration: 0.01ms;
    }
}

/* ==========================================================================
   EQUIPO · Mi espacio (/app/my-space) — autoservicio del trabajador.
   Hover por tipo de componente según AGENTS.md §Motion: botones cambian fondo
   o borde, las tarjetas clicables elevan sombra, los enlaces crecen subrayado.
   Ningún `transform` en :hover — el zoom huele a plantilla.
   ========================================================================== */

.allwr-myspace {
    display: flex;
    flex-direction: column;
    gap: var(--allwr-space-4);
    padding: var(--allwr-space-5) var(--allwr-gutter) var(--allwr-space-7);
}

/* --- Cabecera: pestañas + indicadores del mes ----------------------------- */

.allwr-myspace__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--allwr-space-4);
}

.allwr-myspace__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-5);
}

.allwr-myspace__tab {
    position: relative;
    border: 0;
    background: none;
    padding: var(--allwr-space-2) 0;
    font: inherit;
    font-weight: 500;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition: color var(--allwr-transition-fast);
}

.allwr-myspace__tab::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--allwr-gold-dec);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--allwr-transition-base);
}

.allwr-myspace__tab:hover { color: var(--allwr-ink); }
.allwr-myspace__tab:hover::after,
.allwr-myspace__tab.is-active::after { transform: scaleX(1); }
.allwr-myspace__tab.is-active { color: var(--allwr-ink); font-weight: 600; }
.allwr-myspace__tab:focus-visible { outline: 2px solid var(--allwr-focus-ring); outline-offset: 3px; border-radius: var(--allwr-r-sm); }

.allwr-myspace__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-3);
}

.allwr-myspace__metric {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-3);
    min-width: 190px;
    padding: var(--allwr-space-3) var(--allwr-space-4);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-myspace__metric-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
}

.allwr-myspace__metric-icon svg { width: 20px; height: 20px; }
.allwr-myspace__metric-body { display: flex; flex-direction: column; gap: 2px; }

.allwr-myspace__metric-label {
    font-size: 0.75rem;
    color: var(--allwr-ink-2);
    line-height: 1.2;
}

.allwr-myspace__metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--allwr-ink);
}

/* Sólo se tiñe cuando hay algo que mirar: cero incidencias es buena noticia. */
.allwr-myspace__metric.is-alert .allwr-myspace__metric-icon {
    background: color-mix(in srgb, var(--allwr-red) 12%, var(--allwr-card));
    color: var(--allwr-red);
}
.allwr-myspace__metric.is-alert .allwr-myspace__metric-value { color: var(--allwr-red); }

/* --- Tarjetas ------------------------------------------------------------- */

/* Un panel por pestaña. `display: flex` gana al `display: none` que el
   navegador aplica a [hidden], así que la ocultación se declara explícitamente
   o las cuatro pestañas se pintarían a la vez. */
.allwr-myspace__panel {
    display: flex;
    flex-direction: column;
    gap: var(--allwr-space-4);
}

.allwr-myspace__panel[hidden] { display: none; }

/* `display: flex/inline-flex` gana al `display: none` que el navegador aplica a
   [hidden]: sin estas reglas, el badge de estado y el botón de pausa se pintan
   vacíos cuando el estado del día no los contempla. */
.allwr-myspace__btn[hidden],
.allwr-myspace__badge[hidden],
.allwr-myspace__note[hidden],
.allwr-myspace__metrics[hidden] { display: none; }

.allwr-myspace__note-text { flex: 1 1 auto; }
.allwr-myspace__timeline-main { min-width: 0; }

.allwr-myspace__card,
.allwr-myspace__hero {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    padding: var(--allwr-space-5);
}

.allwr-myspace__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--allwr-space-3);
    margin-bottom: var(--allwr-space-4);
}

.allwr-myspace__card-title {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-2);
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--allwr-ink);
}

.allwr-myspace__card-icon { display: inline-grid; place-items: center; color: var(--allwr-ink-2); }
.allwr-myspace__card-icon svg { width: 18px; height: 18px; }
.allwr-myspace__card-range { font-size: 0.8rem; color: var(--allwr-ink-3); }

.allwr-myspace__card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--allwr-space-1);
    position: relative;
    margin-top: var(--allwr-space-4);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--allwr-ink);
    text-decoration: none;
    transition: color var(--allwr-transition-fast);
}

.allwr-myspace__card-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 18px;
    bottom: -2px;
    height: 1px;
    background: var(--allwr-gold-dec);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--allwr-transition-base);
}

.allwr-myspace__card-link:hover::after,
.allwr-myspace__card-link:focus-visible::after { transform: scaleX(1); }
.allwr-myspace__card-link svg { width: 16px; height: 16px; }
.allwr-myspace__card-link:focus-visible { outline: 2px solid var(--allwr-focus-ring); outline-offset: 3px; border-radius: var(--allwr-r-sm); }

/* --- Tarjeta principal de fichaje ----------------------------------------- */

.allwr-myspace__hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--allwr-space-6);
}

.allwr-myspace__hero-gauge {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
}

.allwr-myspace__ring { transform: rotate(-90deg); }
.allwr-myspace__ring circle { fill: none; stroke-width: 10; }
.allwr-myspace__ring-track { stroke: var(--allwr-line); }

.allwr-myspace__ring-value {
    stroke: var(--allwr-ink);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--allwr-transition-slow);
}

.allwr-myspace__ring-value[data-state="on_break"] { stroke: var(--allwr-ink-3); }
.allwr-myspace__ring-value[data-state="off"] { stroke: var(--allwr-line-strong); }

.allwr-myspace__ring-icon {
    position: absolute;
    display: grid;
    place-items: center;
    color: var(--allwr-ink);
}

.allwr-myspace__ring-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }

.allwr-myspace__ring-dot {
    position: absolute;
    top: 8px;
    right: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--allwr-green);
    box-shadow: 0 0 0 3px var(--allwr-card);
}

.allwr-myspace__hero-main { min-width: 0; }

.allwr-myspace__hero-date {
    margin: 0 0 var(--allwr-space-1);
    font-size: 0.8rem;
    color: var(--allwr-ink-2);
}

.allwr-myspace__hero-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--allwr-space-3);
    margin: 0;
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    font-weight: 700;
    color: var(--allwr-ink);
}

.allwr-myspace__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--allwr-space-1);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
}

.allwr-myspace__badge[data-kind="live"] {
    background: color-mix(in srgb, var(--allwr-green) 12%, var(--allwr-card));
    color: var(--allwr-green);
}

.allwr-myspace__badge[data-kind="break"] {
    background: color-mix(in srgb, var(--allwr-ink) 10%, var(--allwr-card));
    color: var(--allwr-ink);
}

.allwr-myspace__badge[data-kind="done"] {
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
}

.allwr-myspace__hero-worked {
    margin: var(--allwr-space-2) 0 var(--allwr-space-4);
    font-size: 0.95rem;
    color: var(--allwr-ink-2);
}

.allwr-myspace__hero-worked strong { color: var(--allwr-ink); font-weight: 600; }

.allwr-myspace__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-3);
}

/* --- Botones -------------------------------------------------------------- */

.allwr-myspace__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--allwr-space-2);
    min-height: 42px;                  /* diana ≥40px (accesibilidad) */
    padding: 0 var(--allwr-space-4);
    border: 1px solid var(--allwr-line-strong);
    border-radius: var(--allwr-r-lg);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast),
        color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-myspace__btn-icon { display: inline-grid; place-items: center; }
.allwr-myspace__btn-icon svg { width: 16px; height: 16px; }

.allwr-myspace__btn:hover:not(:disabled) {
    border-color: var(--allwr-ink-3);
    background: var(--allwr-surface-2);
}

.allwr-myspace__btn--primary {
    border-color: var(--allwr-ink);
    background: var(--allwr-ink);
    color: var(--allwr-card);
}

/* Primario: oscurece el fondo y aparece sombra. Nunca escala. */
.allwr-myspace__btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--allwr-ink) 88%, #000);
    border-color: color-mix(in srgb, var(--allwr-ink) 88%, #000);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-myspace__btn:focus-visible { outline: 2px solid var(--allwr-focus-ring); outline-offset: 2px; }
.allwr-myspace__btn:disabled { cursor: not-allowed; opacity: 0.55; }
.allwr-myspace__btn.is-loading { cursor: progress; }

/* --- Información contextual de la tarjeta principal ------------------------ */

.allwr-myspace__hero-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: var(--allwr-space-4) var(--allwr-space-6);
    margin: 0;
    padding-left: var(--allwr-space-6);
    border-left: 1px solid var(--allwr-line);
}

.allwr-myspace__context-item { display: flex; align-items: flex-start; gap: var(--allwr-space-3); }
.allwr-myspace__context-icon { display: grid; place-items: center; color: var(--allwr-ink-3); padding-top: 2px; }
.allwr-myspace__context-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
.allwr-myspace__hero-context dt { font-size: 0.75rem; color: var(--allwr-ink-3); }
.allwr-myspace__hero-context dd { margin: 2px 0 0; font-weight: 600; color: var(--allwr-ink); }

.allwr-myspace__hero-context dd[data-tone="good"] { color: var(--allwr-green); }
.allwr-myspace__hero-context dd[data-tone="warn"] { color: var(--allwr-amber); }
.allwr-myspace__hero-context dd[data-tone="muted"] { color: var(--allwr-ink-3); font-weight: 500; }

/* --- Fichaje automático ----------------------------------------------------- */

.allwr-myspace__autoclock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
    gap: var(--allwr-space-6);
    align-items: start;
}

.allwr-myspace__autoclock .allwr-myspace__card-title {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-2);
}

/* Icono decorativo: nunca interactivo, sin hover (AGENTS.md §Motion). */
.allwr-myspace__autoclock-icon {
    display: inline-flex;
    color: var(--allwr-gold-text);
}
.allwr-myspace__autoclock-icon i { width: 18px; height: 18px; }

.allwr-myspace__autoclock-lead {
    margin: var(--allwr-space-2) 0 0;
    color: var(--allwr-ink-2);
    max-width: 62ch;
}

.allwr-myspace__autoclock-facts {
    margin: var(--allwr-space-4) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--allwr-space-2);
}

.allwr-myspace__autoclock-facts li {
    position: relative;
    padding-left: var(--allwr-space-5);
    color: var(--allwr-ink-3);
    font-size: 0.9375rem;
}

.allwr-myspace__autoclock-facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--allwr-gold);
}

.allwr-myspace__autoclock-controls {
    display: grid;
    gap: var(--allwr-space-3);
    align-content: start;
}

.allwr-myspace__switch {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-3);
    cursor: pointer;
}

.allwr-myspace__switch input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--allwr-ink);
    cursor: pointer;
}

/* Deshabilitado gris y sin cursor de acción: el interruptor de ubicación no
   significa nada mientras el autofichaje esté apagado, y prometerlo sería
   mentir sobre lo que ese clic hace. */
.allwr-myspace__switch:has(input:disabled) {
    cursor: default;
    opacity: 0.45;
}
.allwr-myspace__switch input:disabled { cursor: default; }

.allwr-myspace__switch-label { font-size: 0.9375rem; }

.allwr-myspace__switch input:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-myspace__autoclock-state {
    margin: var(--allwr-space-2) 0 0;
    font-size: 0.875rem;
    color: var(--allwr-ink-3);
}

.allwr-myspace__autoclock[data-enabled="1"] .allwr-myspace__autoclock-state {
    color: var(--allwr-green);
}

/* --- Pulso: «cómo va la jornada» -------------------------------------------
   Ocupa el ancho completo de la tarjeta, bajo las dos columnas. Es el dato que
   más se mira de toda la pantalla cuando nadie pulsa nada, así que no comparte
   columna con el texto legal ni con los interruptores. */

.allwr-myspace__autoclock-pulse {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: var(--allwr-space-3);
    margin-top: var(--allwr-space-4);
    padding-top: var(--allwr-space-4);
    border-top: 1px solid var(--allwr-line);
}

.allwr-myspace__autoclock-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--allwr-ink-3);
}

/* Latiendo: verde y con pulso. La animación no es adorno — es la diferencia
   entre "está registrando" y "hace rato que no sé nada de tu equipo", y es lo
   único de la tarjeta que se lee de un vistazo desde lejos. */
.allwr-myspace__autoclock-pulse[data-tracking="1"] .allwr-myspace__autoclock-dot {
    background: var(--allwr-green);
    animation: allwr-myspace-pulse 2s ease-in-out infinite;
}

.allwr-myspace__autoclock-pulse[data-tracking="0"] .allwr-myspace__autoclock-dot {
    background: var(--allwr-amber);
}

@keyframes allwr-myspace-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31, 107, 75, 0.45); }
    70%      { box-shadow: 0 0 0 7px rgba(31, 107, 75, 0); }
}

.allwr-myspace__autoclock-pulse-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.allwr-myspace__autoclock-pulse-head {
    font-size: 0.9375rem;
    color: var(--allwr-ink);
}

.allwr-myspace__autoclock-pulse-meta {
    font-size: 0.875rem;
    color: var(--allwr-ink-2);
    line-height: 1.5;
}

/* --- Extensión de Chrome ---------------------------------------------------
   Fila completa de la tarjeta, como el pulso: la vinculación no es un ajuste
   del fichaje (no lo enciende ni lo apaga), es la lista de qué navegadores lo
   están latiendo y desde cuándo. */

.allwr-myspace__autoclock-extension {
    grid-column: 1 / -1;
    margin-top: var(--allwr-space-4);
    padding-top: var(--allwr-space-4);
    border-top: 1px solid var(--allwr-line);
}

.allwr-myspace__autoclock-extension-head {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-2);
}

.allwr-myspace__autoclock-extension-title {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--allwr-ink);
}

.allwr-myspace__autoclock-extension-lead {
    margin: var(--allwr-space-2) 0 0;
    max-width: 62ch;
    color: var(--allwr-ink-2);
    font-size: 0.9375rem;
}

.allwr-myspace__autoclock-extension-devices {
    margin: var(--allwr-space-3) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--allwr-space-2);
}

.allwr-myspace__extension-device {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-3);
    padding: var(--allwr-space-2) var(--allwr-space-3);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
}

.allwr-myspace__extension-device-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--allwr-ink-3);
}

.allwr-myspace__extension-device[data-active="1"] .allwr-myspace__extension-device-dot {
    background: var(--allwr-green);
}

.allwr-myspace__extension-device-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.allwr-myspace__extension-device-label {
    color: var(--allwr-ink);
    font-size: 0.9375rem;
}

.allwr-myspace__extension-device-meta {
    color: var(--allwr-ink-3);
    font-size: 0.8125rem;
}

.allwr-myspace__extension-device-meta code {
    font-size: inherit;
    color: var(--allwr-ink-2);
}

.allwr-myspace__autoclock-extension-empty {
    margin: var(--allwr-space-3) 0 0;
    color: var(--allwr-ink-3);
    font-size: 0.9375rem;
}

.allwr-myspace__autoclock-extension-hint {
    margin: var(--allwr-space-3) 0 0;
    color: var(--allwr-ink-3);
    font-size: 0.8125rem;
}

/* --- Incidencias ----------------------------------------------------------- */

.allwr-myspace__incidents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--allwr-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--allwr-space-4);
}

.allwr-myspace__incident-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--allwr-space-3);
}

.allwr-myspace__incident {
    padding: var(--allwr-space-4);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-canvas);
}

.allwr-myspace__incident-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--allwr-space-3);
    margin-bottom: 2px;
}

.allwr-myspace__incident-date {
    margin: 0 0 var(--allwr-space-2);
    font-size: 0.8125rem;
    color: var(--allwr-ink-3);
}

.allwr-myspace__incident-message,
.allwr-myspace__incident-reply {
    margin: 0;
    font-size: 0.875rem;
    color: var(--allwr-ink);
    line-height: 1.55;
}

.allwr-myspace__incident-reply {
    margin-top: var(--allwr-space-2);
    padding-top: var(--allwr-space-2);
    border-top: 1px dashed var(--allwr-line);
    color: var(--allwr-ink-2);
}

/* --- Acciones en línea (anotar / reportar) --------------------------------- */

.allwr-myspace__detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--allwr-space-3);
    margin-top: var(--allwr-space-2);
}

/* Enlace-botón: acción terciaria dentro de una fila de datos. Subrayado que
   crece de izquierda a derecha, nunca scale (AGENTS.md §Motion). */
.allwr-myspace__linkbtn {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--allwr-gold-text);
    cursor: pointer;
    transition: color var(--allwr-transition-fast);
}

.allwr-myspace__linkbtn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--allwr-transition-base);
}

.allwr-myspace__linkbtn:hover::after,
.allwr-myspace__linkbtn:focus-visible::after { transform: scaleX(1); }

/* --- Diálogo con formulario ------------------------------------------------ */

.allwr-myspace__modal-box--form { width: min(520px, 100%); }

.allwr-myspace__modal-title {
    margin: 0 0 var(--allwr-space-2);
    font-size: 1.0625rem;
    color: var(--allwr-ink);
}

.allwr-myspace__modal-lead {
    margin: 0 0 var(--allwr-space-4);
    font-size: 0.875rem;
    color: var(--allwr-ink-2);
    line-height: 1.55;
}

.allwr-myspace__modal-form { display: grid; gap: var(--allwr-space-4); }

.allwr-myspace__field { display: grid; gap: 6px; }

.allwr-myspace__field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--allwr-ink-2);
}

.allwr-myspace__field-hint {
    font-size: 0.75rem;
    color: var(--allwr-ink-3);
    line-height: 1.5;
}

.allwr-myspace__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: inherit;
    transition: border-color var(--allwr-transition-fast);
}

.allwr-myspace__input:focus { border-color: var(--allwr-gold-text); }
.allwr-myspace__input.is-invalid { border-color: var(--allwr-danger); }
textarea.allwr-myspace__input { resize: vertical; min-height: 92px; }

@media (prefers-reduced-motion: reduce) {
    .allwr-myspace__autoclock-dot { animation: none !important; }
    .allwr-myspace__linkbtn::after {
        transition: none !important;
        transform: scaleX(1) !important;
    }
}

/* --- Cronología del día ---------------------------------------------------- */

.allwr-myspace__timeline-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--allwr-space-6);
}

.allwr-myspace__timeline { margin-top: var(--allwr-space-4); }

.allwr-myspace__track {
    position: relative;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 0 var(--allwr-space-4);
}

/* El filete que une los hitos vive detrás de los puntos, no entre ellos: así
   no hay que calcular anchos de segmento y aguanta cualquier número de hitos. */
.allwr-myspace__track::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: calc(var(--allwr-space-4) - 5px);
    height: 2px;
    background: var(--allwr-line-strong);
}

/* Tramo aún abierto: la jornada no ha terminado, así que la línea se va
   punteada en vez de cerrar en seco. */
.allwr-myspace__track.is-open::after {
    content: "";
    position: absolute;
    left: calc(100% - 2px);
    width: 22%;
    bottom: calc(var(--allwr-space-4) - 5px);
    border-top: 2px dashed var(--allwr-line-strong);
}

.allwr-myspace__track-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: var(--allwr-space-4);
}

.allwr-myspace__track-time { font-size: 0.85rem; font-weight: 600; color: var(--allwr-ink); }
.allwr-myspace__track-text { font-size: 0.78rem; color: var(--allwr-ink-2); }

.allwr-myspace__track-dot {
    position: absolute;
    left: 0;
    bottom: calc(var(--allwr-space-4) - 10px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--allwr-ink);
    box-shadow: 0 0 0 3px var(--allwr-card);
}

.allwr-myspace__track-item[data-kind="clock_in"] .allwr-myspace__track-dot,
.allwr-myspace__track-item[data-kind="now"] .allwr-myspace__track-dot { background: var(--allwr-green); }
.allwr-myspace__track-item[data-kind="clock_out"] .allwr-myspace__track-dot { background: var(--allwr-ink-3); }

.allwr-myspace__timeline-stats { display: flex; gap: var(--allwr-space-3); }

.allwr-myspace__stat {
    display: flex;
    flex-direction: column;
    gap: var(--allwr-space-1);
    align-items: center;
    min-width: 116px;
    padding: var(--allwr-space-3) var(--allwr-space-4);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
}

.allwr-myspace__stat span { font-size: 0.75rem; color: var(--allwr-ink-2); }
.allwr-myspace__stat-value { font-size: 1.15rem; font-weight: 700; color: var(--allwr-ink); }
.allwr-myspace__stat-value--work { color: var(--allwr-green); }
.allwr-myspace__stat-value--break { color: var(--allwr-ink); }

/* --- Resumen semanal y acciones rápidas ------------------------------------ */

.allwr-myspace__split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--allwr-space-4);
    align-items: start;
}

.allwr-myspace__week { display: flex; flex-direction: column; gap: var(--allwr-space-3); }

.allwr-myspace__week-row {
    display: grid;
    grid-template-columns: 2.6rem 2rem minmax(60px, 1fr) auto auto;
    align-items: center;
    gap: var(--allwr-space-3);
    font-size: 0.85rem;
}

.allwr-myspace__week-day { color: var(--allwr-ink-2); }
.allwr-myspace__week-num { color: var(--allwr-ink); font-weight: 600; }

.allwr-myspace__week-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--allwr-surface-2);
    overflow: hidden;
}

.allwr-myspace__week-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--allwr-ink);
    transition: width var(--allwr-transition-slow);
}

.allwr-myspace__week-fill[data-status="ok"] { background: var(--allwr-green); }
.allwr-myspace__week-fill[data-status="incomplete"] { background: var(--allwr-amber); }
.allwr-myspace__week-fill[data-status="missing"] { background: var(--allwr-red); }
.allwr-myspace__week-fill[data-status="off"] { background: var(--allwr-line-strong); }

.allwr-myspace__week-time { color: var(--allwr-ink-2); white-space: nowrap; }

.allwr-myspace__pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
}

.allwr-myspace__pill[data-status="ok"] {
    background: color-mix(in srgb, var(--allwr-green) 12%, var(--allwr-card));
    color: var(--allwr-green);
}
.allwr-myspace__pill[data-status="working"],
.allwr-myspace__pill[data-status="on_break"] {
    background: color-mix(in srgb, var(--allwr-ink) 10%, var(--allwr-card));
    color: var(--allwr-ink);
}
.allwr-myspace__pill[data-status="incomplete"] {
    background: color-mix(in srgb, var(--allwr-amber) 14%, var(--allwr-card));
    color: var(--allwr-amber);
}
.allwr-myspace__pill[data-status="missing"] {
    background: color-mix(in srgb, var(--allwr-red) 10%, var(--allwr-card));
    color: var(--allwr-red);
}

.allwr-myspace__quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--allwr-space-3);
}

.allwr-myspace__quick {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--allwr-space-3) var(--allwr-space-4);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

/* Fila clicable = sombra elevada + borde. Nunca scale (AGENTS.md §Motion). */
.allwr-myspace__quick:hover:not(:disabled) {
    border-color: var(--allwr-line-strong);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-myspace__quick:focus-visible { outline: 2px solid var(--allwr-focus-ring); outline-offset: 2px; }
.allwr-myspace__quick-icon { display: grid; place-items: center; color: var(--allwr-ink-2); flex: none; }
.allwr-myspace__quick-icon svg { width: 18px; height: 18px; }
.allwr-myspace__quick-label { flex: 1 1 auto; font-size: 0.88rem; line-height: 1.35; }
.allwr-myspace__quick-chevron { width: 16px; height: 16px; color: var(--allwr-ink-3); }

.allwr-myspace__quick--soon { cursor: not-allowed; color: var(--allwr-ink-3); }
.allwr-myspace__quick--soon:hover { box-shadow: none; border-color: var(--allwr-line); }

/* Valla de obra en oro: es un marcador de estado, uso sancionado del oro. */
.allwr-myspace__quick-soon {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--allwr-gold-dec);
}

.allwr-myspace__quick-soon svg { width: 16px; height: 16px; }

.allwr-myspace__note {
    display: flex;
    align-items: center;
    gap: var(--allwr-space-2);
    margin: var(--allwr-space-4) 0 0;
    padding: var(--allwr-space-3) var(--allwr-space-4);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-surface-2);
    font-size: 0.82rem;
    color: var(--allwr-ink-2);
}

.allwr-myspace__note-icon { display: grid; place-items: center; color: var(--allwr-ink-3); }
.allwr-myspace__note-icon svg { width: 16px; height: 16px; }

/* --- Tabla de últimos registros -------------------------------------------- */

/* La tabla es el único contenido ancho: scrolla en su propia caja para que el
   body nunca tenga barra horizontal. */
.allwr-myspace__table-wrap { overflow-x: auto; }

.allwr-myspace__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.allwr-myspace__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--allwr-card);
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--allwr-ink-3);
    padding: var(--allwr-space-2) var(--allwr-space-3);
    border-bottom: 1px solid var(--allwr-line);
    white-space: nowrap;
}

.allwr-myspace__table tbody td {
    padding: var(--allwr-space-3);
    border-bottom: 1px solid var(--allwr-line);
    color: var(--allwr-ink);
    white-space: nowrap;
}

.allwr-myspace__table tbody tr { transition: background var(--allwr-transition-fast); }
.allwr-myspace__table tbody tr:hover { background: var(--allwr-surface-2); }
.allwr-myspace__num { font-variant-numeric: tabular-nums; }

/* --- Vacíos, placeholders y panel de detalle -------------------------------- */

.allwr-myspace__placeholder {
    display: grid;
    justify-items: center;
    gap: var(--allwr-space-2);
    padding: var(--allwr-space-7) var(--allwr-space-5);
    border: 1px dashed var(--allwr-line-strong);
    border-radius: var(--allwr-radius-lg);
    text-align: center;
    color: var(--allwr-ink-2);
}

.allwr-myspace__placeholder--inline { border: 0; padding: var(--allwr-space-6) var(--allwr-space-4); }
.allwr-myspace__placeholder-icon { color: var(--allwr-ink-3); }
.allwr-myspace__placeholder-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.allwr-myspace__placeholder h3 { margin: 0; font-size: 1rem; color: var(--allwr-ink); }
.allwr-myspace__placeholder p { margin: 0; font-size: 0.85rem; }
.allwr-myspace__empty { margin: 0; padding: var(--allwr-space-4) 0; color: var(--allwr-ink-3); font-size: 0.85rem; }

.allwr-myspace__drawer { position: fixed; inset: 0; z-index: 1200; }
.allwr-myspace__drawer[hidden] { display: none; }
.allwr-myspace__drawer-scrim { position: absolute; inset: 0; background: rgba(2, 21, 43, 0.45); }

.allwr-myspace__drawer-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
    overflow-y: auto;
}

.allwr-myspace__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--allwr-space-3);
    padding: var(--allwr-space-4) var(--allwr-space-5);
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-myspace__drawer-head h3 { margin: 0; font-size: 1rem; color: var(--allwr-ink); }

.allwr-myspace__drawer-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-r-md);
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-myspace__drawer-close:hover { background: var(--allwr-surface-2); border-color: var(--allwr-line-strong); }
.allwr-myspace__drawer-close:focus-visible { outline: 2px solid var(--allwr-focus-ring); outline-offset: 2px; }
.allwr-myspace__drawer-body { padding: var(--allwr-space-5); }
.allwr-myspace__drawer-date { margin: 0 0 var(--allwr-space-4); font-size: 0.85rem; color: var(--allwr-ink-2); }
.allwr-myspace__detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--allwr-space-4); }
.allwr-myspace__detail-item { display: flex; gap: var(--allwr-space-4); }
.allwr-myspace__detail-time { font-weight: 700; color: var(--allwr-ink); min-width: 3.2rem; }
.allwr-myspace__detail-body { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: var(--allwr-ink-2); }
.allwr-myspace__detail-body strong { color: var(--allwr-ink); font-size: 0.88rem; }

.allwr-myspace__modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--allwr-space-5);
    background: rgba(2, 21, 43, 0.45);
}

.allwr-myspace__modal-box {
    width: min(440px, 100%);
    padding: var(--allwr-space-5);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-myspace__modal-box p { margin: 0 0 var(--allwr-space-4); color: var(--allwr-ink); line-height: 1.55; }
.allwr-myspace__modal-actions { display: flex; justify-content: flex-end; gap: var(--allwr-space-2); }

body.allwr-myspace-drawer-open { overflow: hidden; }

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1200px) {
    .allwr-myspace__hero { grid-template-columns: auto minmax(0, 1fr); }
    .allwr-myspace__hero-context {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-top: var(--allwr-space-4);
        border-left: 0;
        border-top: 1px solid var(--allwr-line);
    }
    .allwr-myspace__timeline-card { grid-template-columns: minmax(0, 1fr); }
    .allwr-myspace__autoclock { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .allwr-myspace__split { grid-template-columns: minmax(0, 1fr); }
    .allwr-myspace__head { align-items: flex-start; }
    .allwr-myspace__metric { flex: 1 1 160px; min-width: 0; }
}

@media (max-width: 680px) {
    .allwr-myspace { padding-inline: var(--allwr-space-4); }
    .allwr-myspace__hero { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .allwr-myspace__hero-actions { width: 100%; }
    .allwr-myspace__btn--primary { flex: 1 1 100%; }

    /* Cronología en vertical: en horizontal, cuatro hitos en 320px se pisan. */
    .allwr-myspace__track { flex-direction: column; gap: var(--allwr-space-4); padding-bottom: 0; }
    .allwr-myspace__track::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
    .allwr-myspace__track.is-open::after { display: none; }
    .allwr-myspace__track-item { padding: 0 0 0 var(--allwr-space-5); }
    .allwr-myspace__track-dot { left: 0; top: 4px; bottom: auto; }
    .allwr-myspace__timeline-stats { flex-wrap: wrap; }
    .allwr-myspace__stat { flex: 1 1 90px; min-width: 0; }
    .allwr-myspace__quick-grid { grid-template-columns: minmax(0, 1fr); }
    .allwr-myspace__week-row { grid-template-columns: 2.4rem 1.8rem minmax(40px, 1fr) auto; }
    .allwr-myspace__week-row .allwr-myspace__pill { grid-column: 3 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-myspace__tab,
    .allwr-myspace__tab::after,
    .allwr-myspace__card-link,
    .allwr-myspace__card-link::after,
    .allwr-myspace__btn,
    .allwr-myspace__quick,
    .allwr-myspace__week-fill,
    .allwr-myspace__ring-value,
    .allwr-myspace__table tbody tr,
    .allwr-myspace__drawer-close {
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
    }
    /* El subrayado que "crece" se muestra ya crecido: el estado final debe
       seguir siendo legible aunque no se anime. */
    .allwr-myspace__tab.is-active::after,
    .allwr-myspace__tab:hover::after,
    .allwr-myspace__card-link:hover::after,
    .allwr-myspace__card-link:focus-visible::after {
        transform: none !important;
    }
}

/* ============================================================================
   Dashboard personal — layout condensado (rediseño Ago 2026)
   Banda de KPIs + A. Machine, entidades y productos a dos columnas, franja
   horizontal de productos y movimientos "pendientes de conciliar" por
   defecto. Todo nuevo aquí: los componentes de public.css que se reutilizan
   (allwr-app__product, allwr-card-visual, allwr-app__chip, allwr-app__btn,
   allwr-app__tab…) sólo se consumen, nunca se editan — public.css es
   compartido con la landing pública y queda fuera de alcance.
   ============================================================================ */

/* El dashboard ensancha su capa de contenido ~20% sobre el .allwr-container
   base (1240px de public.css, compartido con la landing — no se toca allí) y
   compacta el ritmo vertical: sin toolhead propia, arranca a ~24px de la
   topbar y separa los grandes bloques con el mismo paso. */
.allwr-app--dashboard .allwr-container {
    max-width: 1480px;
}

.allwr-app--dashboard {
    padding-block: 1.5rem;
}

.allwr-app--dashboard .allwr-app__section {
    margin: 1.5rem 0;
}

.allwr-app--dashboard .allwr-container > .allwr-app__section:first-child {
    margin-top: 0;
}

/* Connect compacta igual que el dashboard: la tarjeta de reauth arranca a
   ~24px de la topbar y los bloques comparten el mismo paso vertical. */
.allwr-app--connect {
    padding-block: 1.5rem;
}

.allwr-app--connect .allwr-app__section {
    margin: 1.5rem 0;
}

.allwr-app--connect .allwr-container > .allwr-app__section:first-child {
    margin-top: 0;
}

.allwr-dashboard-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
    /* stretch: la tarjeta de entidades y el panel de productos terminan a la
       misma altura; el pie de entidades baja con margin-top auto. */
    align-items: stretch;
    gap: 1rem;
}

/* --- Banda de KPIs + A. Machine ------------------------------------------- */
.allwr-kpi-band__row {
    display: flex;
}

.allwr-kpi-band__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: 1 1 0;
    min-width: 0;
    padding: 1.35rem 1.5rem;
    border-right: 1px solid var(--allwr-line-2);
}

.allwr-kpi-band__item:last-child {
    border-right: 0;
}

.allwr-kpi-band__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.allwr-kpi-band__icon-svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

.allwr-kpi-band__item--networth .allwr-kpi-band__icon {
    background: color-mix(in srgb, var(--allwr-ink) 12%, transparent);
    color: var(--allwr-ink);
}

.allwr-kpi-band__item--available .allwr-kpi-band__icon {
    background: color-mix(in srgb, var(--allwr-gold-dec) 20%, transparent);
    color: var(--allwr-gold-text);
}

.allwr-kpi-band__item--income .allwr-kpi-band__icon {
    background: color-mix(in srgb, var(--allwr-green) 16%, transparent);
    color: var(--allwr-green);
}

.allwr-kpi-band__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.allwr-kpi-band__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font: 700 0.7rem var(--allwr-font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--allwr-ink-2);
}

.allwr-kpi-band__value {
    font: 800 1.5rem var(--allwr-font-body);
    color: var(--allwr-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.allwr-kpi-band__sub {
    font: 500 0.78rem var(--allwr-font-body);
    color: var(--allwr-ink-3);
}

.allwr-kpi-band__machine {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--allwr-line-2);
    text-decoration: none;
    color: inherit;
    transition: background var(--allwr-transition-fast);
}

.allwr-kpi-band__machine:hover {
    background: var(--allwr-surface-2);
}

.allwr-kpi-band__machine:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: -2px;
}

.allwr-kpi-band__machine-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--allwr-gold-text);
}

.allwr-kpi-band__machine-icon svg {
    width: 16px;
    height: 16px;
}

.allwr-kpi-band__machine-label {
    flex: 0 0 auto;
    font: 800 0.7rem var(--allwr-font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--allwr-gold-text);
}

.allwr-kpi-band__machine-msg {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font: 600 0.88rem var(--allwr-font-body);
    color: var(--allwr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-kpi-band__machine-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--allwr-ink-3);
}

.allwr-kpi-band__machine-chevron svg {
    width: 16px;
    height: 16px;
}

/* --- Entidades conectadas -------------------------------------------------- */
.allwr-entities {
    display: flex;
    flex-direction: column;
}

.allwr-entities__head {
    padding: 1.1rem 1.25rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.allwr-entities__head h2 {
    margin: 0;
    color: var(--allwr-ink);
    font: 800 1rem var(--allwr-font-body);
}

.allwr-entities__actions {
    display: inline-flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* Acción icon-only: el pill base a 36px se vuelve círculo, misma familia
   visual que .allwr-products-strip__nav. El label vive en title/aria-label. */
.allwr-app__btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    flex: 0 0 auto;
}

.allwr-app__btn--icon .allwr-app__btn-icon-svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.allwr-app__btn--icon:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

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

.allwr-entities__item + .allwr-entities__item {
    border-top: 1px solid var(--allwr-line-2);
}

.allwr-entities__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1.25rem;
}

.allwr-entities__logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 auto;
}

.allwr-entities__logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font: 700 0.75rem var(--allwr-font-body);
    color: var(--allwr-ink);
    background: color-mix(in srgb, var(--allwr-gold-dec) 20%, transparent);
}

.allwr-entities__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 0.9rem var(--allwr-font-body);
    color: var(--allwr-ink);
}

.allwr-entities__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.allwr-entities__chip svg {
    width: 13px;
    height: 13px;
}

.allwr-entities__chip[data-status="active"] {
    color: var(--allwr-green);
}

.allwr-entities__chip[data-status="error"],
.allwr-entities__chip[data-status="expired"] {
    color: var(--allwr-red);
}

.allwr-entities__chip[data-status="2fa"] {
    color: var(--allwr-amber);
}

.allwr-entities__chip[data-status="stale"] {
    color: var(--allwr-amber);
}

.allwr-entities__reauth {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.allwr-entities__menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

.allwr-entities__menu-toggle {
    appearance: none;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--allwr-r-sm);
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

.allwr-entities__menu-toggle:hover,
.allwr-entities__menu-toggle[aria-expanded="true"] {
    background: var(--allwr-surface-2);
    border-color: var(--allwr-line-2);
    color: var(--allwr-ink);
}

.allwr-entities__menu-toggle:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
}

.allwr-entities__menu-toggle svg {
    width: 17px;
    height: 17px;
}

.allwr-entities__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.3rem);
    right: 0;
    min-width: 210px;
    padding: 0.35rem;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-entities__menu[hidden] {
    display: none;
}

.allwr-entities__menu-info {
    margin: 0.15rem 0.1rem 0.4rem;
    padding: 0 0.5rem 0.45rem;
    border-bottom: 1px solid var(--allwr-line-2);
    color: var(--allwr-ink-3);
    font: 500 0.76rem var(--allwr-font-body);
}

.allwr-entities__menu-item {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: var(--allwr-r-sm);
    background: transparent;
    color: var(--allwr-ink);
    font: 600 0.86rem var(--allwr-font-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--allwr-transition-fast);
}

.allwr-entities__menu-item:hover {
    background: var(--allwr-surface-2);
}

.allwr-entities__menu-item:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
}

.allwr-entities__menu-item svg {
    width: 16px;
    height: 16px;
}

.allwr-entities__menu-item--danger {
    color: var(--allwr-red);
}

.allwr-entities__advice {
    margin: 0 1.25rem 0.75rem;
}

/* Sin pie (no hay datos huérfanos que purgar) la lista cierra la tarjeta y
   necesita el aire que daba el pie. */
.allwr-entities__list:last-child {
    padding-bottom: 1rem;
}

.allwr-entities__foot {
    padding: 0.6rem 1.25rem 1rem;
    /* La tarjeta estira hasta la altura del panel de productos (dashboard-row
       en stretch); el pie queda anclado abajo. */
    margin-top: auto;
}

/* --- Tarjeta Productos ------------------------------------------------------ */
.allwr-products-card {
    padding: 1.1rem 1.25rem 1.25rem;
    min-width: 0;
}

.allwr-products-card .allwr-app__tab.is-active {
    background: var(--allwr-ink);
    border-color: var(--allwr-ink);
}

/* El botón de paginación flota sobre el borde derecho de la franja: si ocupara
   una columna del flujo, aparecer o no según haya overflow cambiaría el ancho
   de las tarjetas al saltar de pestaña (34px + gap repartidos entre 3 columnas
   ≈ 14px menos por tarjeta en Tarjetas que en Cuentas). */
.allwr-products-strip-wrap {
    position: relative;
}

/* Rejilla paginada de N filas x 3 columnas: el flujo por columnas hace que
   cada "página" ocupe exactamente el viewport de la franja y los botones de
   navegación (que avanzan clientWidth) salten página a página. Las filas en
   1fr igualan la altura de las tarjetas de una página.

   El número de filas NO es fijo: la fila del dashboard mide lo que mide la
   tarjeta de entidades conectadas, así que `--allwr-products-rows` lo publica
   JS con las filas que caben en ese alto (mínimo 2 = la página canónica de 6).
   Sin JS, el default de 2 deja la rejilla exactamente como estaba. */
.allwr-products-strip {
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    /* Anula el `repeat(auto-fill, minmax(220px, 1fr))` que hereda de
       .allwr-app__products: esas columnas explícitas convivían con las
       implícitas de `grid-auto-columns` y las tarjetas de la primera página
       salían de otro tamaño que las siguientes. Aquí TODAS las columnas deben
       ser implícitas para que midan lo mismo. */
    grid-template-columns: none;
    grid-template-rows: repeat(var(--allwr-products-rows, 2), minmax(0, 1fr));
    grid-auto-columns: calc((100% - 2 * 0.75rem) / 3);
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
}

.allwr-products-strip::-webkit-scrollbar {
    display: none;
}

.allwr-products-strip .allwr-app__product,
.allwr-products-strip .allwr-card-visual {
    scroll-snap-align: start;
}

/* Alto único de la franja: cambiar de pestaña no puede cambiar el tamaño de
   las tarjetas ni el alto de la sección. El valor es el alto natural de
   .allwr-app__product con su contenido canónico (tipo + nombre + sub +
   importe) redondeado hacia arriba; si ese contenido cambia, hay que remedirlo
   midiendo la caja de ambos tipos de tarjeta y exigiendo delta 0. */
.allwr-products-strip .allwr-app__product,
.allwr-products-strip .allwr-card-visual {
    min-height: var(--allwr-product-card-h);
}

/* Densidad: dos filas visibles sin crecer en alto — menos padding, mismo
   cuerpo de letra. */
.allwr-products-strip .allwr-app__product {
    padding: 0.7rem 0.85rem;
}

/* La proporción de plástico (1.586/1) haría la tarjeta el doble de alta que
   la de cuenta a igual anchura de columna: dentro de la franja el alto lo fija
   la fila, no la proporción. El padding se recorta para que el contenido quepa
   en ese alto sin recortarse (la tarjeta lleva overflow: hidden). */
.allwr-products-strip .allwr-card-visual {
    aspect-ratio: auto;
    padding: 0.55rem 0.85rem;
}

/* Cada botón sólo existe mientras haya productos hacia ese lado. La ocultación
   es por `visibility`, no por [hidden]: así puede transicionar y, de paso,
   sale del orden de tabulación sin tocar tabindex. El deslizamiento entra
   desde el borde por el que la bolita aparece. */
.allwr-products-strip__nav {
    position: absolute;
    /* Centrado sin `transform`: la mitad de su propio alto (34px). El único
       transform que lleva es el deslizamiento de entrada, que reduced-motion
       anula sin descolocarlo. */
    top: calc(50% - 17px);
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--allwr-line);
    border-radius: 50%;
    background: var(--allwr-card);
    color: var(--allwr-ink);
    box-shadow: var(--allwr-shadow-card);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--allwr-transition-fast),
        visibility var(--allwr-transition-fast),
        transform var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast);
}

.allwr-products-strip__nav--next {
    right: 0.35rem;
    transform: translateX(6px);
}

.allwr-products-strip__nav--prev {
    left: 0.35rem;
    transform: translateX(-6px);
}

.allwr-products-strip__nav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.allwr-products-strip__nav:hover {
    box-shadow: var(--allwr-shadow-hover);
    border-color: var(--allwr-line-2);
}

.allwr-products-strip__nav:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
}

.allwr-products-strip__nav svg {
    width: 18px;
    height: 18px;
}

.allwr-products-strip__nav[hidden] {
    display: none;
}

/* Regla de posición: el filete parte del texto "N de M" y los puntos, que son
   la única pista de cuánto queda por ver en un scroll horizontal sin barra.

   El hueco se reserva aunque haya una sola página (`visibility`, no [hidden]):
   este bloque es cromo que mide el cálculo de filas, y si apareciera y
   desapareciera habría dos estados igual de estables (2 filas con regla ↔ 3
   filas sin ella) y el panel se quedaría en el que tocara por historia. */
.allwr-products-pager {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.9rem;
    /* Con el contenido apagado la caja mediría el filete (1px) y el hueco no
       estaría reservado de verdad. El alto lo fija el punto (20px), que es el
       elemento más alto de la banda. */
    min-height: 20px;
    visibility: hidden;
}

.allwr-products-pager.is-visible {
    visibility: visible;
}

.allwr-products-pager::before,
.allwr-products-pager::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--allwr-line);
}

.allwr-products-pager__status {
    color: var(--allwr-ink-2);
    font: 500 0.82rem var(--allwr-font-body);
    /* Cifras de ancho fijo: pasar de página no debe mover los puntos. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.allwr-products-pager__dots {
    display: flex;
    align-items: center;
}

/* El punto mide 9px pero su botón 20: el objetivo táctil no puede ser el
   adorno. El espacio entre puntos sale de ese área, no de un `gap`. */
.allwr-products-pager__dot {
    appearance: none;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.allwr-products-pager__dot::before {
    content: '';
    width: 9px;
    height: 9px;
    border: 1px solid var(--allwr-line-2);
    border-radius: 50%;
    background: transparent;
    transition:
        background var(--allwr-transition-fast),
        border-color var(--allwr-transition-fast);
}

.allwr-products-pager__dot:hover::before {
    border-color: var(--allwr-ink);
}

.allwr-products-pager__dot.is-active::before {
    background: var(--allwr-ink);
    border-color: var(--allwr-ink);
}

.allwr-products-pager__dot:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 0;
}

/* Demasiadas páginas para contarlas de un vistazo: queda el "N de M", que
   sigue diciendo dónde estás sin convertir la regla en una fila de puntos
   ilegible. */
.allwr-products-pager__dots[hidden] {
    display: none;
}

/* --- Movimientos ------------------------------------------------------------ */
.allwr-movements-card {
    padding: 1.1rem 1.25rem 1.25rem;
}

/* Cabecera: título estable + línea de contexto que dice qué se está viendo.
   El botón de la derecha es el único que cambia de modo. */
.allwr-movements-head {
    align-items: flex-start;
}

.allwr-movements-head__titles {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.allwr-movements-head__context {
    margin: 0;
    color: var(--allwr-ink-2);
    font: 500 0.85rem var(--allwr-font-body);
}

.allwr-movements-card.is-reconciling .allwr-movements-head__context {
    color: var(--allwr-gold-text);
}

/* Con el contenedor ensanchado los seis filtros caben en una fila: todos
   crecen un poco y Buscar es claramente el más ancho. En pantallas estrechas
   siguen envolviendo (flex-wrap del base en public.css). */
.allwr-app--dashboard .allwr-app__filter {
    flex: 1 1 auto;
}

.allwr-app--dashboard .allwr-app__filter--grow {
    flex: 3 1 16rem;
}

.allwr-mov-view-toggle[aria-pressed="true"] {
    background: var(--allwr-ink);
    border-color: var(--allwr-ink);
    color: var(--allwr-card);
}

.allwr-mov-view-toggle--empty,
.allwr-mov-view-toggle:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* === Modo conciliación ===================================================== */
/* La columna Estado sólo existe mientras se concilia: fuera de ese modo no hay
   nada que hacer con ella y su abreviatura obligaba a aprender la interfaz. */
.allwr-movements-card:not(.is-reconciling) .allwr-app__table--movements [data-col="status"] {
    display: none;
}

/* Progreso: sólo tiene sentido cuando el usuario está conciliando. */
.allwr-movements-card:not(.is-reconciling) [data-allwr-mov-progress-item] {
    display: none;
}

.allwr-mov-summary__value--progress {
    font-size: 0.95rem;
}

/* Conciliando, la columna deja de ser una bolita suelta: aloja marca,
   incidencia, cuenta atrás y deshacer. */
.allwr-movements-card.is-reconciling .allwr-app__col--status {
    width: 1%;
    text-align: left;
}

.allwr-mov-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* La incidencia es acción secundaria: aparece al sobrevolar la fila (o al
   enfocarla con teclado) y se queda fija si ya está marcada. */
.allwr-mov-flag {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--allwr-radius-pill);
    background: transparent;
    color: var(--allwr-ink-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-mov-flag__icon {
    width: 14px;
    height: 14px;
}

tr:hover > td > .allwr-mov-status > .allwr-mov-flag,
.allwr-mov-status:focus-within > .allwr-mov-flag,
.allwr-mov-flag.is-on {
    opacity: 1;
}

.allwr-mov-flag:hover,
.allwr-mov-flag.is-on {
    color: var(--allwr-amber);
}

.allwr-mov-flag:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
    opacity: 1;
}

/* Cuenta atrás + deshacer: el usuario tiene que entender que todavía puede
   rectificar, no sólo que algo va a pasar. */
.allwr-mov-settle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.allwr-mov-settle__count {
    min-width: 1ch;
    color: var(--allwr-ink-2);
    font: 600 0.8rem var(--allwr-font-body);
    font-variant-numeric: tabular-nums;
}

.allwr-mov-settle__undo {
    padding: 0;
    border: 0;
    background: none;
    color: var(--allwr-gold-text);
    font: 500 0.78rem var(--allwr-font-body);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.allwr-mov-settle__undo:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
}

/* Durante la cuenta atrás la fila se tiñe de verde casi imperceptible: es un
   "hecho", no un "borrado". */
tr.is-settling > td {
    background: color-mix(in srgb, var(--allwr-green) 7%, transparent);
}

/* Salida en dos tiempos: se apaga (160 ms) y después colapsa el alto (200 ms).
   Se anima el contenido de las celdas porque el alto de un <tr> no transiciona
   de forma fiable. */
tr.is-settled-out > td {
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0;
    line-height: 0;
    border-bottom-width: 0;
    transition:
        opacity 160ms ease-out,
        padding 200ms ease-out 160ms,
        font-size 200ms ease-out 160ms,
        line-height 200ms ease-out 160ms;
}

/* Sin esto la fila se queda encallada en los 44 px del logo del banco y el
   colapso termina de golpe al quitarla del DOM. A estas alturas la celda ya
   está a opacidad 0, así que encoger su contenido no se ve. */
tr.is-settled-out > td * {
    height: 0;
    min-height: 0;
    transition: height 200ms ease-out 160ms;
}

/* Rechazo: sacudida corta y borde rojo temporal. El mensaje explica qué falta;
   la bolita sólo dice "no, aquí no". */
@keyframes allwr-mov-refuse {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    45%      { transform: translateX(5px); }
    70%      { transform: translateX(-3px); }
}

.allwr-app__txn-mark.is-refused {
    animation: allwr-mov-refuse 160ms ease-out;
    border-color: var(--allwr-red);
    background: color-mix(in srgb, var(--allwr-red) 12%, transparent);
}

.allwr-mov-hint > td {
    padding-top: 0;
    padding-bottom: 0.6rem;
}

.allwr-mov-hint__text {
    margin: 0;
    color: var(--allwr-ink-2);
    font: 500 0.82rem var(--allwr-font-body);
}

.allwr-mov-hint__field {
    padding: 0;
    border: 0;
    background: none;
    color: var(--allwr-gold-text);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.allwr-mov-hint__field:focus-visible {
    outline: 2px solid var(--allwr-focus-ring);
    outline-offset: 2px;
}

/* --- Responsive --------------------------------------------------------------- */
@media (max-width: 900px) {
    .allwr-dashboard-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .allwr-products-strip {
        grid-auto-columns: calc((100% - 0.75rem) / 2);
    }
    .allwr-kpi-band__row {
        flex-direction: column;
    }
    .allwr-kpi-band__item {
        border-right: 0;
        border-bottom: 1px solid var(--allwr-line-2);
    }
    .allwr-kpi-band__item:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 560px) {
    .allwr-kpi-band__machine-msg {
        white-space: normal;
        text-align: left;
    }
    .allwr-products-strip {
        grid-auto-columns: 85%;
    }
}

/* === Scroll magnético ======================================================
   La tarjeta se acopla al dock (justo bajo la topbar, con el mismo aire que
   separa las secciones) y a partir de ahí el mismo gesto de scroll recorre las
   filas. El motor vive en public/assets/js/scroll-magnet.js — leer su cabecera
   antes de tocar nada de aquí. Tres invariantes que NO son cosméticos:

     1. El cuerpo va `overflow-y: hidden`, jamás `auto`. Así la rueda sobre la
        tabla no se queda atrapada en un segundo scroll: cae al documento, y el
        JS traduce la posición del documento a scrollTop de la lista. Es lo que
        hace que el traspaso página → lista → página se sienta continuo.
     2. La tabla pierde su `overflow: hidden` al armarse. Si no, sería ella el
        scrollport más cercano y el `thead` sticky no tendría a qué pegarse.
     3. El recorte y el radio se mudan al contenedor del cuerpo, que es quien
        recorta de verdad mientras el imán está armado.
   ========================================================================= */
.allwr-app--dashboard .allwr-magnet {
    margin: 1.5rem 0;
}

/* El margen vive en el track: dentro, la tarjeta debe empezar exactamente en
   el borde superior del track o el cálculo del dock se desplazaría. */
.allwr-app--dashboard .allwr-magnet > .allwr-app__section {
    margin: 0;
}

.allwr-magnet {
    scroll-margin-top: calc(var(--allwr-topbar-h) + var(--allwr-magnet-gap));
}

/* Pestaña sin movimientos: sin esto el track dejaría su hueco y sus márgenes. */
.allwr-magnet:has(> [hidden]) {
    display: none;
}

.allwr-magnet.is-armed > .allwr-card {
    position: sticky;
    top: calc(var(--allwr-topbar-h) + var(--allwr-magnet-gap));
    z-index: 20;                 /* bajo el sidebar (40) y la topbar (50) */
    transition: box-shadow var(--allwr-transition-base);
}

/* Acoplada: la tarjeta se despega del papel y asienta unos píxeles. Nada de
   rebote — es un encaje, no una animación de entrada. */
.allwr-magnet.is-magnetized > .allwr-card {
    box-shadow: var(--allwr-shadow-hover);
    animation: allwr-magnet-settle 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.allwr-magnet.is-releasing > .allwr-card {
    animation: allwr-magnet-release 140ms ease-out both;
}

@keyframes allwr-magnet-settle {
    from { transform: translateY(4px); }
    to   { transform: translateY(0); }
}

@keyframes allwr-magnet-release {
    from { transform: translateY(-2px); }
    to   { transform: translateY(0); }
}

.allwr-magnet.is-armed [data-allwr-magnet-body] {
    /* dvh en vez de vh: con las barras dinámicas del navegador, vh miente. */
    max-height: calc(100dvh - var(--allwr-topbar-h) - (var(--allwr-magnet-gap) * 2) - var(--allwr-magnet-chrome, 0px));
    overflow-y: hidden;          /* ver invariante 1 */
    overflow-anchor: none;       /* el ancla del navegador competiría con el JS */
}

.allwr-magnet.is-armed .allwr-movements-table-wrap {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-magnet.is-armed .allwr-app__table--movements {
    overflow: visible;           /* ver invariante 2 */
    border: 0;
    border-radius: 0;
}

.allwr-magnet.is-armed .allwr-app__table--movements thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* border-collapse deja atrás el borde inferior al pegarse la cabecera: la
       línea se repinta como sombra interior, que sí viaja con la celda. */
    box-shadow: inset 0 -1px 0 var(--allwr-line);
}

/* Al imprimir no hay dock ni gesto que traspasar: la tarjeta vuelve a ser una
   tarjeta con toda la lista. Sin esto el papel saldría con las filas recortadas
   a la altura de la ventana. */
@media print {
    .allwr-magnet.is-armed {
        height: auto !important;   /* el track lo fija JS en línea */
    }
    .allwr-magnet.is-armed > .allwr-card {
        position: static;
        box-shadow: none;
    }
    .allwr-magnet.is-armed [data-allwr-magnet-body] {
        max-height: none;
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-kpi-band__machine,
    .allwr-entities__menu-toggle,
    .allwr-entities__menu-item,
    .allwr-products-strip,
    .allwr-products-strip__nav,
    .allwr-products-pager__dot::before,
    .allwr-mov-flag,
    tr.is-settled-out > td {
        transition-duration: 0.01ms;
    }
    /* El acoplamiento sigue comunicándose por la sombra; lo que desaparece es
       el asentamiento. El imán en sí no es una animación: no se toca. */
    .allwr-magnet.is-armed > .allwr-card {
        transition-duration: 0.01ms;
    }
    .allwr-magnet.is-magnetized > .allwr-card,
    .allwr-magnet.is-releasing > .allwr-card {
        animation: none;
        transform: none !important;
    }
    .allwr-products-strip {
        scroll-behavior: auto;
    }
    /* La bolita sigue apareciendo y desapareciendo (es información: hay más
       productos hacia ese lado); lo que se anula es el deslizamiento. */
    .allwr-products-strip__nav,
    .allwr-products-strip__nav.is-visible {
        transform: none !important;
    }
    /* El rechazo sigue comunicándose por color y por el mensaje contextual;
       lo que se anula es el desplazamiento. */
    .allwr-app__txn-mark.is-refused {
        animation: none;
        transform: none !important;
    }
}

/* === Affiliates & attribution (app-affiliates.php + affiliates.js) ===
   Deliberately thin: table/card/badge/modal/button chrome all comes from the
   shared .allwr-table / .allwr-kpi / .allwr-card / .allwr-modal / .allwr-tag /
   .allwr-app__btn components already defined above and in public.css — this
   block only covers layout that has no existing equivalent. */
.allwr-aff {
    display: grid;
    gap: 1rem;
}

.allwr-aff__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.allwr-aff__custom-range {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.allwr-aff__custom-range label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font: 700 0.75rem var(--allwr-font-body);
    color: var(--allwr-muted);
}

.allwr-aff__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.allwr-aff__link-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.allwr-aff__link-row code {
    padding: 0.35rem 0.6rem;
    border-radius: var(--allwr-r-sm);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
    font-size: 0.85rem;
    word-break: break-all;
}

/* Compact funnel stats inside the partner detail panel — a description
   list, not another .allwr-kpi grid (those are for the page-level totals). */
.allwr-aff__funnel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem 1rem;
    margin: 0.75rem 0 1rem;
    padding: 0;
    list-style: none;
}

.allwr-aff__funnel dt {
    color: var(--allwr-muted);
    font: 800 0.7rem var(--allwr-font-body);
    text-transform: uppercase;
}

.allwr-aff__funnel dd {
    margin: 0.15rem 0 0;
    color: var(--allwr-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.allwr-aff__detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.allwr-aff__detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.allwr-aff__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0 0.5rem;
}

.allwr-aff__commissions-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.allwr-aff__commissions-toolbar input[type="text"] {
    min-width: 12rem;
}

.allwr-aff__form {
    display: grid;
    gap: 0.75rem;
}

.allwr-aff__form label {
    display: grid;
    gap: 0.3rem;
    font: 700 0.82rem var(--allwr-font-body);
    color: var(--allwr-ink-2, var(--allwr-navy));
}

.allwr-aff__form label small {
    font-weight: 500;
    color: var(--allwr-muted);
}

/* Two classes on the same <label> (see modalAffPartner's "active" checkbox):
   higher specificity than ".allwr-aff__form label" wins the cascade honestly,
   no !important needed (AGENTS.md §3 CSS). */
.allwr-aff__form .allwr-aff__checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.allwr-aff__form-status {
    min-height: 1.2rem;
    color: var(--allwr-green);
    font-size: 0.85rem;
    font-weight: 700;
}

.allwr-aff__form-status[data-state="error"] {
    color: var(--allwr-red);
}

/* Partner row acts as a button (.allwr-billing__row-button, already focus-
   and hover-styled in public.css); this only adds the pointer affordance
   the wrapping <tr> itself needs. */
.allwr-aff__row {
    cursor: pointer;
}

@media (max-width: 720px) {
    .allwr-aff__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === Cards real-time (Open Sync / Wenalyze) ===
   Botón/badge en la lista de productos y en la ficha de tarjeta, ambos
   renderizados por allwr_cards_realtime_widget_html() (src/cards_realtime.php)
   para que no diverjan. El modal de enrolamiento lo construye
   public/assets/js/cards-realtime.js sobre las clases .allwr-modal / .allwr-
   modal__* ya definidas en public.css. */
.allwr-cards-rt { display: inline-flex; align-items: center; }
.allwr-cards-rt__badge { display: inline-flex; align-items: center; gap: 0.4rem; }
.allwr-cards-rt__badge-icon { width: 14px; height: 14px; }

.allwr-cards-rt-overlay { z-index: 1200; }
.allwr-cards-rt-modal { width: min(560px, 100%); }
.allwr-cards-rt-modal .allwr-modal__body { display: grid; gap: 1.1rem; }

.allwr-cards-rt-modal__steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0 0 0 1.35rem;
}
.allwr-cards-rt-modal__step-title {
    margin: 0 0 0.2rem;
    font-weight: 700;
    color: var(--allwr-ink, var(--allwr-navy));
    font-size: 0.92rem;
}
.allwr-cards-rt-modal__step-hint {
    margin: 0;
    color: var(--allwr-ink-2, var(--allwr-muted));
    font-size: 0.82rem;
    line-height: 1.5;
}
.allwr-cards-rt-modal__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.55rem;
}
/* Botón secundario: cambio de borde/fondo sutil en hover, nunca scale/translate
   (ver AGENTS.md "Motion, hover y accesibilidad", fila "Botón secundario"). */
.allwr-cards-rt-modal__store {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--allwr-line-2, var(--allwr-line));
    border-radius: var(--allwr-radius-xs, 10px);
    background: var(--allwr-card, #fff);
    color: var(--allwr-ink, var(--allwr-navy));
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}
.allwr-cards-rt-modal__store:hover { border-color: var(--allwr-navy); background: var(--allwr-canvas, var(--allwr-off-white)); }
.allwr-cards-rt-modal__store:focus-visible {
    outline: 3px solid var(--allwr-gold-soft, #f1d99a);
    outline-offset: 2px;
}
.allwr-cards-rt-modal__store.is-detected {
    border-color: var(--allwr-gold-dec, var(--allwr-gold));
}
.allwr-cards-rt-modal__store svg { width: 15px; height: 15px; }

.allwr-cards-rt-modal__email-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
}
.allwr-cards-rt-modal__email-row code {
    padding: 0.4rem 0.7rem;
    border-radius: var(--allwr-radius-xs, 8px);
    background: var(--allwr-canvas, var(--allwr-off-white));
    border: 1px solid var(--allwr-line-2, var(--allwr-line));
    font-size: 0.88rem;
    color: var(--allwr-ink, var(--allwr-navy));
}

.allwr-cards-rt-modal__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border-radius: var(--allwr-radius-xs, 10px);
    background: var(--allwr-canvas, var(--allwr-off-white));
}
.allwr-cards-rt-modal__countdown-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--allwr-ink-3, var(--allwr-muted));
}
[data-allwr-cards-rt-countdown] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--allwr-ink, var(--allwr-navy));
}
.allwr-cards-rt-modal__status-text {
    font-size: 0.85rem;
    color: var(--allwr-ink-2, var(--allwr-muted));
}

@media (prefers-reduced-motion: reduce) {
    .allwr-cards-rt-modal__store { transition-duration: 0.01ms; }
}

/* ============================================================================
   Shell móvil (companion) — body.allwr-mobile. El teléfono no es la app de
   escritorio en pequeño: cromo apagado (mismo mecanismo que .allwr-embed),
   cabecera propia y tap targets >= 56px. Ver AGENTS.md § "Shell móvil".
   ========================================================================== */
body.allwr-mobile .allwr-topbar,
body.allwr-mobile .allwr-sidebar,
body.allwr-mobile .allwr-app-foot,
body.allwr-mobile .allwr-skip { display: none !important; }
body.allwr-mobile .allwr-app-shell { display: block; }
body.allwr-mobile .allwr-app-shell__content { margin: 0; max-width: none; min-height: 100dvh; }
body.allwr-mobile { background: var(--allwr-canvas); }

.allwr-mob {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    max-width: 560px;
    margin: 0 auto;
}
.allwr-mob__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
}
.allwr-mob__logo { display: block; height: 28px; width: auto; }
.allwr-mob__title {
    margin: 0;
    font-size: 1.35rem;
    color: var(--allwr-ink);
}
.allwr-mob__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-left: -0.75rem;
    border-radius: 50%;
    color: var(--allwr-ink);
    transition: background var(--allwr-transition-fast);
}
.allwr-mob__back:hover { background: var(--allwr-surface-2); }
.allwr-mob__greeting {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--allwr-ink);
}
.allwr-mob__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.allwr-mob-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 88px;
    padding: 1rem 1.15rem;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    box-shadow: var(--allwr-shadow-card);
    color: var(--allwr-ink);
    text-decoration: none;
    transition: box-shadow var(--allwr-transition-base), border-color var(--allwr-transition-base);
}
.allwr-mob-card:hover {
    box-shadow: var(--allwr-shadow-hover);
    border-color: var(--allwr-line-2);
}
.allwr-mob-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}
.allwr-mob-card__icon svg { width: 26px; height: 26px; }
.allwr-mob-card__text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.allwr-mob-card__title { font-size: 1.1rem; font-weight: 700; }
.allwr-mob-card__hint { font-size: 0.85rem; color: var(--allwr-ink-2); }
.allwr-mob-card__badge {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 13px;
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
    font-size: 0.8rem;
    font-weight: 700;
}
.allwr-mob-card__chevron { color: var(--allwr-ink-3); display: inline-flex; }
.allwr-mob__note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--allwr-ink-3);
    text-align: center;
}
.allwr-mob__foot { margin-top: auto; text-align: center; padding-top: 1rem; }
.allwr-mob__switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 1.5rem;
    color: var(--allwr-ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--allwr-transition-fast);
}
.allwr-mob__switch:hover { color: var(--allwr-ink); }
.allwr-mob__body { display: flex; flex-direction: column; gap: 1rem; }
.allwr-mob__empty,
.allwr-mob__status {
    margin: 1.5rem 0;
    text-align: center;
    color: var(--allwr-ink-2);
}
.allwr-mob__error { margin: 1rem 0; text-align: center; color: var(--allwr-danger); }

/* Captura de gastos */
.allwr-mob__capture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 200px;
    padding: 1.5rem;
    border: 2px dashed var(--allwr-line-2);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--allwr-transition-base), background var(--allwr-transition-base);
}
.allwr-mob__capture:hover { border-color: var(--allwr-gold-dec); background: var(--allwr-gold-bg); }
.allwr-mob__capture-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}
.allwr-mob__capture-icon svg { width: 32px; height: 32px; }
.allwr-mob__preview { text-align: center; }
.allwr-mob__preview img {
    max-width: 100%;
    height: auto;
    max-height: 45dvh;
    object-fit: contain;
    border-radius: var(--allwr-radius-md);
    border: 1px solid var(--allwr-line);
}
.allwr-mob__preview-file {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--allwr-ink-3);
    overflow-wrap: anywhere;
}
.allwr-mob__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-fast);
}
.allwr-mob__btn--primary { background: var(--allwr-ink); color: var(--allwr-card); }
.allwr-mob__btn--primary:hover { background: var(--allwr-navy); box-shadow: var(--allwr-shadow-card); }
.allwr-mob__btn--ghost { background: transparent; border-color: var(--allwr-line-2); color: var(--allwr-ink); }
.allwr-mob__btn--ghost:hover { background: var(--allwr-surface-2); }
.allwr-mob__btn:disabled { opacity: 0.4; cursor: default; }
.allwr-mob__done-icon { margin: 1.5rem 0 0; text-align: center; color: var(--allwr-success); }
.allwr-mob__done-icon svg { width: 48px; height: 48px; }
.allwr-mob__done-title { margin: 0; text-align: center; font-size: 1.3rem; color: var(--allwr-ink); }
.allwr-mob__done-hint { margin: 0 0 0.5rem; text-align: center; color: var(--allwr-ink-2); }
.allwr-mob__pending { margin: 0; text-align: center; font-size: 0.85rem; color: var(--allwr-gold-text); }

/* Saldos */
.allwr-mob__totals { display: flex; gap: 0.75rem; }
.allwr-mob__total {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    box-shadow: var(--allwr-shadow-card);
}
.allwr-mob__total-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--allwr-ink-3); }
.allwr-mob__total-value { font-size: 1.25rem; font-weight: 700; color: var(--allwr-ink); font-variant-numeric: tabular-nums; }
.allwr-mob__accounts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.allwr-mob-account {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 64px;
    padding: 0.75rem 1rem;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
}
.allwr-mob-account__logo { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; flex: 0 0 36px; }
.allwr-mob-account__logo--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
}
.allwr-mob-account__text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.allwr-mob-account__name { font-weight: 600; color: var(--allwr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allwr-mob-account__meta { font-size: 0.8rem; color: var(--allwr-ink-3); }
.allwr-mob-account__balance { font-weight: 700; color: var(--allwr-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tareas */
.allwr-mob-task {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    background: var(--allwr-card);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    box-shadow: var(--allwr-shadow-card);
    min-height: 40dvh;
}
.allwr-mob-task__project { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--allwr-ink-3); }
.allwr-mob-task__title { margin: 0; font-size: 1.25rem; color: var(--allwr-ink); overflow-wrap: anywhere; }
.allwr-mob-task__meta { margin: 0; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.allwr-mob-task__priority {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    font-weight: 600;
}
.allwr-mob-task__priority[data-priority="urgent"] { background: rgba(184, 41, 47, 0.1); color: var(--allwr-red); }
.allwr-mob-task__priority[data-priority="high"] { background: var(--allwr-gold-bg); color: var(--allwr-amber); }
.allwr-mob-task__due { font-size: 0.85rem; color: var(--allwr-ink-2); }
.allwr-mob-task__open {
    margin-top: auto;
    color: var(--allwr-gold-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.allwr-mob__pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.allwr-mob__pager-btn { width: 72px; flex: 0 0 72px; }
.allwr-mob__pager-counter { color: var(--allwr-ink-2); font-variant-numeric: tabular-nums; }

/* Accesibilidad: anillo de foco propio y reduced-motion (§ Motion). */
.allwr-mob a:focus-visible,
.allwr-mob button:focus-visible,
.allwr-mob label:focus-within {
    outline: 3px solid var(--allwr-gold-soft, var(--allwr-gold-dec));
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .allwr-mob-card,
    .allwr-mob__back,
    .allwr-mob__switch,
    .allwr-mob__capture,
    .allwr-mob__btn { transition-duration: 0.01ms; }
}

/* Franja "Ver versión móvil" — salida siempre visible cuando la versión
   completa se sirve en un teléfono (body.allwr-has-mobile-band, decidido en
   allwr_app_render_shell_start). Fija arriba; el topbar sticky se apila debajo.
   Sólo aparece en móvil, así que no toca el desktop ni el scroll-magnético
   (que sólo se arma a >=1024px). Ambos son sticky en el flujo del documento:
   ocupan su caja arriba y se quedan pegados al hacer scroll, sin solaparse. */
:root { --allwr-mobile-band-h: 44px; }

.allwr-mobile-band {
    position: sticky;
    top: 0;
    z-index: 60; /* por encima del topbar (z-index 50) */
    height: var(--allwr-mobile-band-h);
    display: flex;
    align-items: stretch;
    background: var(--allwr-navy);
    color: #fff;
}

.allwr-mobile-band__link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    transition: background var(--allwr-transition-fast);
}

.allwr-mobile-band__link:hover { background: rgba(255, 255, 255, 0.10); }

.allwr-mobile-band__link:focus-visible {
    outline: 3px solid var(--allwr-gold);
    outline-offset: -3px;
}

.allwr-mobile-band__icon { flex: none; }

/* El topbar deja de pegarse a 0 y se apila justo debajo de la franja. */
body.allwr-has-mobile-band .allwr-topbar { top: var(--allwr-mobile-band-h); }

/* ==========================================================================
   Portada de la app ("Principal") — landings/_components/app-welcome.php
   ==========================================================================
   Reglas de hover de AGENTS.md §"Motion, hover y accesibilidad": las tarjetas
   se elevan con sombra y filete, NUNCA con scale ni translateY; los botones
   cambian fondo/borde; el ojo y las notas manuscritas son decoración y no
   reaccionan al ratón. Todas las duraciones salen de los tokens canónicos. */

.allwr-welcome {
    /* Arriba, lo justo para no pegarse a la topbar; abajo, el aire normal. */
    padding-block: clamp(0.5rem, 1vw, 0.75rem) clamp(1.25rem, 3vw, 2.25rem);
    background: var(--allwr-canvas);
    /* Cuánto se monta la tarjeta de configuración sobre el hero (ver abajo). */
    --allwr-welcome-overlap: clamp(2.25rem, 3.5vw, 3.25rem);
}

.allwr-welcome .allwr-container {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* --- Hero --------------------------------------------------------------- */

.allwr-welcome__waitlist {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius);
    background: var(--allwr-surface);
}
.allwr-welcome__waitlist-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--allwr-ink);
}
.allwr-welcome__waitlist-body {
    margin: 0;
    color: var(--allwr-ink-2);
    line-height: 1.55;
}

.allwr-welcome__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    /* Sin padding vertical: el alto lo pone la ilustración, y el aire de
       abajo lo ocupa la tarjeta que se monta encima. */
    padding-block: 0;
}

.allwr-welcome__hero-copy {
    display: grid;
    gap: 0.85rem;
    justify-items: start;
    min-width: 0;
    /* Anclado arriba, no centrado: el texto queda un poco por encima del eje
       del isotipo y la cabecera gana autoridad. El padding fija dónde. */
    align-self: start;
    padding-top: clamp(2rem, 4vw, 3.25rem);
}

.allwr-welcome__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    font-weight: 600;
}

.allwr-welcome__eyebrow-emoji {
    font-size: 0.95rem;
    line-height: 1;
}

.allwr-welcome__title {
    margin: 0;
    max-width: 22ch;
    color: var(--allwr-ink);
    font-family: var(--allwr-font);
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.allwr-welcome__lede {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.5;
}

/* --- Ilustración: nebulosa + isotipo ------------------------------------- */

/* El área oscura NO es un disco recortado: es una nebulosa que se funde con el
   papel. Va anclada AL OJO con `inset` negativo, no al contenedor: el contenedor
   desborda mucho hacia el borde de la pantalla y un degradado en porcentajes
   sobre él deja el núcleo oscuro lejos del dibujo. Con `closest-side` el
   degradado muere exactamente en su propio borde, así que no hay corte. */
.allwr-welcome__art {
    position: relative;
    display: grid;
    /* Ojo y lema en fila, los dos dentro de la nebulosa (como el mockup). */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    min-height: 345px;
    padding-bottom: 1.5rem;
    min-width: 0;
}

/* Masa de tinta del hero.
   ------------------------------------------------------------------------
   El blob es UNA forma SVG (ver el markup en app-welcome.php); aquí sólo se
   encuadra. Se pasó a SVG porque con degradados CSS la silueta siempre acababa
   leyéndose como una elipse —o como dos apiladas—, y el desvanecido salía
   igual de grueso en todo el perímetro. Con `feTurbulence` el contorno es
   irregular de verdad, y con una máscara el fade se controla zona a zona.

   El desvanecido es CARO de calcular pero se calcula UNA vez: el filtro es
   estático y el navegador cachea la capa rasterizada. Lo único que se anima
es la opacidad de las capas de deriva y la escala de la pila (ver abajo).

   Todo lo que se suele querer tocar está en variables (`:root`): el encuadre,
   cuánto sangra por cada lado y la opacidad del conjunto. La silueta y el
   grosor del fade se tocan en el SVG, que lleva su porqué comentado. */
/* En pantallas medianas la columna del hero se estrecha y la masa se acerca
   demasiado al titular. Lo que se recorta es el sangrado DERECHO, no el
   izquierdo: al estrechar el lienzo, el isotipo pasa a ocupar más proporción de
   él y se aleja del corte izquierdo. Recortar por la izquierda hacía justo lo
   contrario — le metía el corte dentro y le dejaba medio dibujo sobre el papel. */
@media (max-width: 1500px) {
    :root {
        --allwr-hero-ink-left: -45%;
        --allwr-hero-ink-right: -8vw;
    }
}

/* La pila de las tres capas de tinta (ver el markup): ocupa la caja de la
   ilustración y es lo único que escala — una respiración de 1,5 % con el
   origen sobre el isotipo, así que junto al ojo nada se mueve y el contorno
   lejano deriva unos píxeles. */
.allwr-welcome__ink-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-origin: 42% 50%;
    will-change: transform;
    animation: allwr-ink-breathe 16s ease-in-out infinite alternate;
}

@keyframes allwr-ink-breathe {
    from { transform: scale(1); }
    to { transform: scale(1.015); }
}

/* Las capas de deriva: mismo encuadre que la base, opacidad en fundido lento y
   a contratiempo (la segunda va medio periodo por detrás). Sólo opacidad —
   el filtro de cada una se calculó una vez y vive en su capa. */
.allwr-welcome__ink-drift {
    opacity: 0;
    will-change: opacity;
    animation: allwr-ink-drift 22s ease-in-out infinite;
}

.allwr-welcome__ink-drift--b {
    animation-delay: -11s;
}

@keyframes allwr-ink-drift {
    0%, 100% { opacity: 0; }
    50% { opacity: var(--allwr-hero-ink-opacity); }
}

.allwr-welcome__ink,
.allwr-welcome__ink-drift {
    position: absolute;
    /* Sangra por arriba y por la derecha —ahí la masa se sale del viewport a
       propósito— y muere dentro por abajo y por la izquierda, que es donde se
       encuentra con el contenido.

       El tamaño va en `width`/`height` calculados y NO con los cuatro offsets:
       un `<svg>` es un elemento reemplazado, así que con `left` + `right` +
       `width: auto` la especificación le da su tamaño intrínseco en lugar de
       estirarlo, e ignora uno de los dos offsets. Las variables son negativas,
       de modo que restarlas suma. */
    top: var(--allwr-hero-ink-top);
    left: var(--allwr-hero-ink-left);
    width: calc(100% - var(--allwr-hero-ink-left) - var(--allwr-hero-ink-right));
    height: calc(100% - var(--allwr-hero-ink-top) - var(--allwr-hero-ink-bottom));
    /* `public.css` trae el reset `img, svg { max-width: 100% }`, pensado para
       que ninguna imagen desborde su columna. Aquí desbordar es justo el
       objetivo, y sin esto el ancho se recorta en silencio al del contenedor:
       ni un `width` en línea lo salta. */
    max-width: none;
    pointer-events: none;
}

.allwr-welcome__ink {
    opacity: var(--allwr-hero-ink-opacity);
}

.allwr-welcome__eye {
    position: relative;
    z-index: 1;
    /* Más ancho que alto: el mockup lo quiere apaisado, no circular. */
    width: min(334px, 100%);
    aspect-ratio: 1.22 / 1;
    /* El doble clic repite la animación (ver welcome-eye.js). Sin `cursor` ni
       hover a propósito: la decoración no promete acciones — lo único que hace
       falta es que el gesto no deje un destello de selección. */
    user-select: none;
}

/* Halo ambiental: un resplandor dorado muy tenue detrás del dibujo que respira
   una vez asentado. Es un solo nodo animando opacidad y escala, nada más. */
.allwr-welcome__eye::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 50%, rgba(240, 180, 41, 0.06) 0%, transparent 65%);
    opacity: 0;
    pointer-events: none;
}

.allwr-welcome__eye.is-settled::before {
    animation: allwr-eye-bloom 10s ease-in-out infinite;
}

/* Arranca en 0, que es donde estaba: un mínimo de 0,3 (el del original) hacía
   que el halo apareciera de golpe en el frame del asiento. */
@keyframes allwr-eye-bloom {
    0%, 100% { opacity: 0; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Estrellas: puntos sueltos alrededor del isotipo, más tenues y más pequeños.
   Las coloca el motor fuera del dibujo para que la nebulosa no quede vacía. */
.allwr-welcome__eye-star {
    position: absolute;
    width: var(--allwr-eye-star, 2px);
    height: var(--allwr-eye-star, 2px);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold-dec);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: allwr-eye-star-in 900ms ease-out var(--allwr-eye-delay, 0ms) forwards;
}

@keyframes allwr-eye-star-in {
    0%   { opacity: 0; }
    100% { opacity: var(--allwr-eye-rest); }
}

.allwr-welcome__eye.is-settled .allwr-welcome__eye-star {
    animation: none;
    opacity: var(--allwr-eye-rest);
}

.allwr-welcome__eye.is-settled .allwr-welcome__eye-star--tw {
    animation: allwr-eye-twinkle var(--allwr-eye-tf, 5s) ease-in-out var(--allwr-eye-td, 0s) infinite;
}

/* Lema lateral, en versalitas espaciadas y con su filete dorado. */
.allwr-welcome__claim {
    position: relative;
    z-index: 2;
    margin: 0;
    display: grid;
    gap: 0.35rem;
    justify-items: start;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(2, 21, 43, 0.85);
}

.allwr-welcome__claim::after {
    content: "";
    width: 42px;
    height: 2px;
    margin-top: 0.5rem;
    background: var(--allwr-gold);
}

.allwr-welcome__eye-canvas {
    position: absolute;
    inset: 0;
    /* Encima de la nebulosa y del halo, que son pseudo-elementos hermanos
       pintados antes en orden de documento. */
    z-index: 1;
    /* `contain` acota el recálculo a este subárbol: son ~850 nodos y sin él
       cada frame de la ignición invalidaría el layout de toda la portada. */
    contain: layout style;
}

.allwr-welcome__eye-dot {
    position: absolute;
    width: var(--allwr-eye-big);
    height: var(--allwr-eye-big);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-gold);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    animation: allwr-eye-ignite var(--allwr-eye-ignite, 700ms) ease-out var(--allwr-eye-delay, 0ms) forwards;
    will-change: transform, opacity;
}

.allwr-welcome__eye-dot--sm {
    width: var(--allwr-eye-small);
    height: var(--allwr-eye-small);
}

/* Único matiz por zona: el iris un punto más claro, para que el centro tenga
   profundidad. Nada de bicolor navy/oro — el criterio geométrico de zonas no
   coincide con el dibujo y el oro salía desperdigado en vez de formar el iris. */
.allwr-welcome__eye-dot--iris {
    background: #ffd97a;
}

/* Ignición, tal cual la del original: el punto nace blanco-oro, estalla a 1,7×
   con un halo grande y una aberración cromática mínima (rojo a un lado, azul
   al otro, el "analógico" de Blade Runner) y se asienta en su oro sin rebote.
   El color final NO se fija aquí: al terminar vuelve al de base (oro, o el
   ámbar del iris), así el asiento no cambia de tono. */
@keyframes allwr-eye-ignite {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
        background: #fff6da;
        box-shadow: none;
    }
    25% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.7);
        background: #fff6da;
        box-shadow: -1px 0 3px rgba(255, 60, 0, 0.4), 1px 0 3px rgba(0, 150, 255, 0.4), 0 0 14px #ffe6a3, 0 0 24px #ffcf5e;
    }
    100% {
        opacity: var(--allwr-eye-rest);
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 5px rgba(240, 180, 41, 0.45);
    }
}

/* Asentado: se retiran las ~850 animaciones ya terminadas y el reposo pasa a
   ser el CSS base. Sólo sigue viva la fracción que late.

   El `will-change` NO se retira aquí, a propósito. Mientras la animación
   rellena su estado final cada punto vive en su propia capa del compositor;
   al quitarles la capa a los 850 en el MISMO frame, el navegador los vuelve a
   rasterizar en el lienzo padre y cada uno se mueve hasta medio píxel: un
   «salto» en el último frame de la animación. Medido comparando el frame
   anterior y el posterior al asiento: ~5.000 píxeles distintos retirándolo,
   33 dejándolo. Las capas son diminutas y ya existían durante la animación. */
.allwr-welcome__eye.is-settled .allwr-welcome__eye-dot {
    animation: none;
    opacity: var(--allwr-eye-rest);
    box-shadow: 0 0 5px rgba(240, 180, 41, 0.45);
}

.allwr-welcome__eye.is-settled .allwr-welcome__eye-dot--tw {
    animation: allwr-eye-heartbeat var(--allwr-eye-tf, 5s) ease-in-out var(--allwr-eye-td, 0s) infinite;
}

/* Latido de los puntos del dibujo, el del original: se apagan un poco, ganan
   brillo y encogen a 0,85 en un ciclo de ~5 s. Es lento a propósito — a ese
   ritmo la escala se lee como respiración; más rápido se leería como
   vibración. Cada punto lleva periodo y retardo (negativo) propios. */
@keyframes allwr-eye-heartbeat {
    0%, 100% {
        opacity: var(--allwr-eye-rest);
        filter: brightness(1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: calc(var(--allwr-eye-rest) * 0.65);
        filter: brightness(1.2);
        transform: translate(-50%, -50%) scale(0.85);
    }
}

/* Titileo de las ESTRELLAS: sólo brillo, nunca tamaño — son puntos de 2px y
   escalarlos se lee como parpadeo roto.

   El ciclo es asimétrico —baja, sube por ENCIMA de su reposo y vuelve— porque
   un vaivén simétrico se lee como una respiración acompasada. Lo que hace que
   parezca un cielo es que cada punto tenga su propio periodo y su propio
   retardo (los reparte welcome-eye.js), así que nunca coinciden. El valor de
   arriba puede pasar de 1: `opacity` lo acota sola, y ese recorte es justo lo
   que da el destello. */
@keyframes allwr-eye-twinkle {
    0%, 100% { opacity: var(--allwr-eye-rest); }
    26%      { opacity: calc(var(--allwr-eye-rest) * 0.32); }
    58%      { opacity: calc(var(--allwr-eye-rest) * 1.5); }
    78%      { opacity: calc(var(--allwr-eye-rest) * 0.72); }
}

/* Notas manuscritas del prototipo. Sin webfont propia: no vamos a añadir un
   round-trip de CDN por un adorno (AGENTS.md §Page Speed). */
.allwr-welcome__script {
    color: var(--allwr-ink-2);
    font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
}

.allwr-welcome__script--inline {
    display: inline-block;
    margin-top: 0.35rem;
}

@media (max-width: 1080px) {
    .allwr-welcome {
        --allwr-welcome-overlap: 0px;
    }

    .allwr-welcome__hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-welcome__hero-copy {
        padding-top: 0;
    }

    .allwr-welcome__art {
        display: none;
    }
}

/* --- Barra de configuración --------------------------------------------- */

.allwr-welcome__setup {
    /* Se monta sobre el borde inferior del hero: es la siguiente acción, no
       otra sección. El solape es un margen negativo sobre el flujo normal —
       nada de posiciones absolutas — y por eso la sección siguiente sube con
       ella. `z-index` para quedar por encima de la masa de tinta, que sangra
       por debajo del hero justo para meterse aquí debajo. */
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--allwr-welcome-overlap));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.6rem);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-welcome__setup-title {
    grid-column: 1 / -1;
    margin: 0 0 0.9rem;
    color: var(--allwr-ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.allwr-welcome__setup-count {
    color: var(--allwr-ink-2);
    font-weight: 500;
}

.allwr-welcome__setup-count::before {
    content: " · ";
    color: var(--allwr-ink-3);
}

.allwr-welcome__steps {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada paso ocupa lo mismo y la línea que los une nace de él: así el hilo se
   estira solo con el ancho disponible, sin medir nada desde JS. */
.allwr-welcome__step {
    position: relative;
    flex: 1 1 0;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    min-width: 0;
    text-align: center;
}

.allwr-welcome__step + .allwr-welcome__step::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--allwr-line);
}

.allwr-welcome__step.is-done + .allwr-welcome__step::before,
.allwr-welcome__step.is-done::before {
    background: var(--allwr-gold);
}

.allwr-welcome__step-mark {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--allwr-line-strong);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    color: var(--allwr-ink-3);
    font-size: 0.78rem;
    font-weight: 800;
}

.allwr-welcome__step.is-done .allwr-welcome__step-mark {
    border-color: var(--allwr-gold);
    background: var(--allwr-gold);
    color: var(--allwr-navy);
}

.allwr-welcome__step-mark svg {
    width: 15px;
    height: 15px;
    stroke-width: 3;
}

.allwr-welcome__step-label {
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    font-weight: 600;
}

.allwr-welcome__step.is-done .allwr-welcome__step-label {
    color: var(--allwr-ink);
}

.allwr-welcome__setup-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-left: clamp(1rem, 2vw, 2rem);
    border-left: 1px solid var(--allwr-line);
    color: var(--allwr-gold-text);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--allwr-transition-fast);
}

.allwr-welcome__setup-cta:hover {
    color: var(--allwr-ink);
}

.allwr-welcome__setup-cta svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 860px) {
    .allwr-welcome__setup {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-welcome__setup-cta {
        padding-left: 0;
        border-left: 0;
        margin-top: 0.9rem;
    }
}

/* --- Cabecera de sección ------------------------------------------------- */

.allwr-welcome__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.9rem;
    margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

.allwr-welcome__section-title {
    margin: 0;
    color: var(--allwr-ink);
    font-family: var(--allwr-font);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -0.015em;
}

.allwr-welcome__section-sub {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.95rem;
}

/* --- Franja de lo que desbloquea el perfil de negocio -------------------- */

.allwr-welcome__unlocked {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.5rem);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-welcome__unlocked-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--allwr-radius-md);
    background: #DCEFE4;
    color: var(--allwr-green);
}

.allwr-welcome__unlocked-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.6;
}

.allwr-welcome__unlocked-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.allwr-welcome__unlocked-title {
    margin: 0;
    color: var(--allwr-ink);
    font-family: var(--allwr-font);
    font-size: 1.15rem;
    font-weight: 800;
}

.allwr-welcome__unlocked-text {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
}

.allwr-welcome__unlocked-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.allwr-welcome__unlocked-note {
    margin: 0;
    padding-left: clamp(0.9rem, 2vw, 1.5rem);
    border-left: 1px solid var(--allwr-line);
    color: var(--allwr-ink-2);
    font-size: 0.86rem;
    max-width: 9rem;
}

.allwr-welcome__unlocked-note::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-bottom: 0.5rem;
    background: var(--allwr-gold);
}

@media (max-width: 1100px) {
    .allwr-welcome__unlocked {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .allwr-welcome__unlocked-actions,
    .allwr-welcome__unlocked-note {
        grid-column: 2;
    }

    .allwr-welcome__unlocked-note {
        padding-left: 0;
        border-left: 0;
        max-width: none;
    }
}

/* --- Tarjetas de tour --------------------------------------------------- */

.allwr-welcome__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

.allwr-welcome__grid--pair {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.allwr-welcome__card {
    position: relative;
    display: grid;
    gap: 0.55rem;
    align-content: start;
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    transition:
        border-color var(--allwr-transition-fast),
        box-shadow var(--allwr-transition-base);
}

.allwr-welcome__card:hover,
.allwr-welcome__card:focus-within {
    border-color: var(--allwr-line-strong);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-welcome__card-step {
    position: absolute;
    top: clamp(1.1rem, 2vw, 1.5rem);
    right: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--allwr-ink-3);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.allwr-welcome__card-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 0.35rem;
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
}

.allwr-welcome__card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
}

.allwr-welcome__card-title {
    margin: 0;
    color: var(--allwr-ink);
    font-family: var(--allwr-font);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.allwr-welcome__card-text {
    margin: 0 0 0.55rem;
    color: var(--allwr-ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
}

.allwr-welcome__card-cta {
    justify-content: center;
    width: 100%;
    padding-block: 0.7rem;
}

/* Cada tarjeta tiñe sólo su fondo y su icono. El acento no llega al botón:
   la acción es la misma en las tres y debe leerse igual. */
.allwr-welcome__card--rose   { background: linear-gradient(180deg, #FDF3F3 0%, var(--allwr-card) 62%); }
.allwr-welcome__card--rose   .allwr-welcome__card-icon { background: #FBE4E4; color: #B8292F; }
.allwr-welcome__card--blue   { background: linear-gradient(180deg, #F1F6FD 0%, var(--allwr-card) 62%); }
.allwr-welcome__card--blue   .allwr-welcome__card-icon { background: #DEEAFA; color: #1B4F8A; }
.allwr-welcome__card--violet { background: linear-gradient(180deg, #F6F3FD 0%, var(--allwr-card) 62%); }
.allwr-welcome__card--violet .allwr-welcome__card-icon { background: #E8E1FA; color: #5B3EA6; }
.allwr-welcome__card--green  { background: linear-gradient(180deg, #F1F8F4 0%, var(--allwr-card) 62%); }
.allwr-welcome__card--green  .allwr-welcome__card-icon { background: #DCEFE4; color: var(--allwr-green); }
.allwr-welcome__card--amber  { background: linear-gradient(180deg, #FDF6EA 0%, var(--allwr-card) 62%); }
.allwr-welcome__card--amber  .allwr-welcome__card-icon { background: #F7E7C8; color: var(--allwr-amber); }

.allwr-welcome__card--wide {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
        "icon  title"
        "icon  text"
        "cta   cta";
    column-gap: 1rem;
    row-gap: 0.35rem;
}

.allwr-welcome__card--wide .allwr-welcome__card-icon  { grid-area: icon; margin-bottom: 0; }
.allwr-welcome__card--wide .allwr-welcome__card-title { grid-area: title; }
.allwr-welcome__card--wide .allwr-welcome__card-text  { grid-area: text; }
.allwr-welcome__card--wide .allwr-welcome__card-cta   { grid-area: cta; margin-top: 0.5rem; }

/* --- Banda "¿eres autónomo o empresa?" ---------------------------------- */

.allwr-welcome__activity {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    padding-right: clamp(2.5rem, 3vw, 3rem);
    border: 1px solid #CFE5D8;
    border-radius: var(--allwr-radius-lg);
    background: linear-gradient(180deg, #F2F9F5 0%, var(--allwr-card) 78%);
}

.allwr-welcome__activity-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--allwr-radius-pill);
    background: #DCEFE4;
    color: var(--allwr-green);
}

.allwr-welcome__activity-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.6;
}

.allwr-welcome__activity-copy {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.allwr-welcome__activity-eyebrow,
.allwr-welcome__feedback-eyebrow {
    /* ink-2, no ink-3: en versalita a 0.7rem hace falta 4.5:1 sobre papel. */
    color: var(--allwr-ink-2);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.allwr-welcome__activity-title,
.allwr-welcome__feedback-title {
    margin: 0;
    color: var(--allwr-ink);
    font-family: var(--allwr-font);
    font-size: 1.15rem;
    font-weight: 800;
}

.allwr-welcome__activity-lede,
.allwr-welcome__feedback-text {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.92rem;
    line-height: 1.5;
}

.allwr-welcome__activity-question {
    margin: 0.35rem 0 0;
    color: var(--allwr-ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.allwr-welcome__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.allwr-welcome__benefit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--allwr-ink-2);
    font-size: 0.86rem;
}

.allwr-welcome__benefit svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    stroke-width: 2;
    color: var(--allwr-green);
}

.allwr-welcome__benefit--more {
    color: var(--allwr-ink-2);
    font-style: italic;
}

.allwr-welcome__activity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.allwr-welcome__activity-dismiss {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--allwr-radius-pill);
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

.allwr-welcome__activity-dismiss:hover:not(:disabled) {
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
}

.allwr-welcome__activity-dismiss svg {
    width: 17px;
    height: 17px;
}

@media (max-width: 900px) {
    .allwr-welcome__activity {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-welcome__activity-icon {
        display: none;
    }
}

/* --- Bloque de feedback -------------------------------------------------- */

.allwr-welcome__feedback {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-welcome__feedback-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--allwr-radius-pill);
    background: #DCEFE4;
    color: var(--allwr-green);
}

.allwr-welcome__feedback-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.6;
}

.allwr-welcome__feedback-copy {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.allwr-welcome__feedback-mail {
    display: inline-block;
    margin-inline: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--allwr-radius-pill);
    background: #E8F1FB;
    color: #1B4F8A;
    font-weight: 700;
    text-decoration: none;
    transition:
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

.allwr-welcome__feedback-mail:hover {
    background: #D8E7F8;
    color: #123A69;
}

.allwr-welcome__feedback-copy-btn {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    vertical-align: middle;
    border: 0;
    border-radius: var(--allwr-r-sm);
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition:
        background var(--allwr-transition-fast),
        color var(--allwr-transition-fast);
}

.allwr-welcome__feedback-copy-btn:hover,
.allwr-welcome__feedback-copy-btn.is-copied {
    background: var(--allwr-surface-2);
    color: var(--allwr-ink);
}

.allwr-welcome__feedback-copy-btn svg {
    width: 15px;
    height: 15px;
}

.allwr-welcome__feedback-points {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0 0 clamp(1rem, 2vw, 1.75rem);
    border-left: 1px solid var(--allwr-line);
    list-style: none;
}

@media (max-width: 900px) {
    .allwr-welcome__feedback {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-welcome__feedback-icon {
        display: none;
    }

    .allwr-welcome__feedback-points {
        padding-left: 0;
        border-left: 0;
    }
}

/* Motion reducido: la portada no anima nada por transform, así que basta con
   acortar las transiciones de color y sombra — que siguen comunicando estado. */
@media (prefers-reduced-motion: reduce) {
    .allwr-welcome__eye-dot,
    .allwr-welcome__eye.is-settled .allwr-welcome__eye-dot,
    .allwr-welcome__eye.is-settled .allwr-welcome__eye-dot--tw {
        animation: none !important;
        opacity: var(--allwr-eye-rest) !important;
        transform: translate(-50%, -50%) scale(1) !important;
        filter: none !important;
    }

    .allwr-welcome__eye::before,
    .allwr-welcome__eye.is-settled::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Sin animación, las capas de deriva vuelven a su `opacity: 0` base:
       no hace falta apagarlas aparte. */
    .allwr-welcome__ink-stack,
    .allwr-welcome__ink-drift {
        animation: none !important;
        transform: none !important;
    }

    .allwr-welcome__card,
    .allwr-welcome__activity-dismiss,
    .allwr-welcome__feedback-mail,
    .allwr-welcome__feedback-copy-btn,
    .allwr-user-menu__hint {
        transition-duration: 0.01ms;
    }
}

.allwr-campaign {
    display: grid;
    gap: 1.25rem;
    padding-block: 1rem 2rem;
}

.allwr-campaign__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 0;
    color: var(--allwr-ink-2);
    font: 600 0.9rem var(--allwr-font-body);
}

.allwr-campaign__status {
    color: var(--allwr-green);
}

.allwr-campaign__status[data-status="paused"],
.allwr-campaign__status[data-status="draft"] {
    color: var(--allwr-amber);
}

.allwr-campaign__status[data-status="done"] {
    color: var(--allwr-ink-2);
}

.allwr-campaign__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.allwr-campaign__chart-card .allwr-card__body {
    position: relative;
    height: 18rem;
}

.allwr-campaign__chart-card canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.allwr-acquisition {
    display: grid;
    gap: 1.25rem;
    padding-block: 1rem 2rem;
}

.allwr-acquisition__period {
    justify-self: start;
    flex-wrap: wrap;
}

.allwr-acquisition__period .allwr-seg__item {
    display: inline-flex;
    align-items: center;
}

.allwr-acquisition__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.allwr-acquisition__note {
    margin: 0;
}

.allwr-acquisition__split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 1.25rem;
}

/* Half-width cards: the global 720px table floor would force a scroll on three columns. */
.allwr-acquisition__split .allwr-table {
    min-width: 0;
}

/* =====================================================================
   Hiring (Contratación) — /app/hiring. Gen-B kit: tokens only, no
   transform on hover, own :focus-visible ring, container queries.
   Board component (.allwr-board) is generic (public/assets/js/board.js).
   ===================================================================== */
.allwr-hiring {
    container: hiring / inline-size;
    display: grid;
    gap: 1rem;
}

.allwr-hiring__app {
    min-width: 0;
}

/* --- Skeleton (opacity pulse; static under reduced motion) --- */
@keyframes allwr-hiring-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.allwr-hiring-skeleton {
    display: grid;
    gap: 0.85rem;
}

.allwr-hiring-skeleton__line,
.allwr-hiring-skeleton__block,
.allwr-hiring-skeleton__row,
.allwr-board__skeleton {
    border-radius: var(--allwr-r-md);
    background: var(--allwr-surface-2);
    animation: allwr-hiring-pulse 1.4s ease-in-out infinite;
}

.allwr-hiring-skeleton__line {
    display: block;
    height: 14px;
    width: 100%;
}

.allwr-hiring-skeleton__line--crumb { width: 30%; }
.allwr-hiring-skeleton__line--title { height: 28px; width: 45%; }

.allwr-hiring-skeleton__tabs {
    display: flex;
    gap: 1rem;
}

.allwr-hiring-skeleton__tabs .allwr-hiring-skeleton__line { width: 90px; }

.allwr-hiring-skeleton__block {
    height: 160px;
    border-radius: var(--allwr-radius-lg);
}

.allwr-hiring-skeleton__block--short { height: 90px; }

.allwr-hiring-skeleton__row {
    height: 52px;
    border-radius: var(--allwr-radius-xs);
}

/* --- Layout: bar, tabs, panels, toolbars --- */
.allwr-hiring-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.allwr-hiring-bar .allwr-hiring-tabs {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.allwr-hiring-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
}

.allwr-hiring-tabs {
    display: flex;
    width: 100%;
}

.allwr-hiring-tabs .allwr-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.allwr-hiring-tabs .allwr-tab svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}

.allwr-hiring-tabs__count {
    min-width: 1.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-size: 0.72rem;
    text-align: center;
}

.allwr-hiring-panel {
    min-width: 0;
    padding-top: 1rem;
}

.allwr-hiring-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.allwr-hiring-toolbar__lead {
    max-width: 70ch;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.9rem;
    line-height: 1.5;
}

.allwr-hiring-toolbar__spacer {
    flex: 1 1 auto;
}

.allwr-hiring-section {
    margin-top: 1.5rem;
}

.allwr-hiring-section__title {
    margin: 0 0 0.35rem;
    color: var(--allwr-navy);
    font: 800 1rem var(--allwr-font);
}

.allwr-hiring-section__lead {
    max-width: 72ch;
    margin: 0 0 0.75rem;
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

.allwr-hiring-more {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* --- Entity header and breadcrumb --- */
.allwr-hiring-entity {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

/* Entity header: with many actions, the actions wrap under the title instead of squeezing it. */
.allwr-hiring-head {
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.allwr-hiring-head .allwr-page-head__copy {
    flex: 1 1 340px;
}

.allwr-hiring-head .allwr-page-head__actions {
    flex: 0 1 auto;
}

/* The narrow header stacks in a column: a 340px basis would become a 340px height. */
@container hiring (max-width: 720px) {
    .allwr-hiring-head .allwr-page-head__copy {
        flex: 0 0 auto;
    }
}

.allwr-hiring-head__title {
    overflow-wrap: anywhere;
}

.allwr-hiring-head__title:focus {
    outline: none;
}

.allwr-hiring-head__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.35rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.9rem;
}

.allwr-hiring-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--allwr-ink-3);
    font-size: 0.82rem;
}

.allwr-hiring-crumbs li + li::before {
    content: "/";
    margin-right: 0.35rem;
    color: var(--allwr-ink-3);
}

.allwr-hiring-crumbs a {
    color: var(--allwr-ink-2);
    text-decoration: none;
    transition: color var(--allwr-transition-fast);
}

.allwr-hiring-crumbs a:hover {
    color: var(--allwr-navy);
    text-decoration: underline;
    text-decoration-color: var(--allwr-gold-dec);
}

/* --- Text helpers, links, tags, chips --- */
.allwr-hiring-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--allwr-navy);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--allwr-transition-fast);
}

.allwr-hiring-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--allwr-gold-dec);
    text-underline-offset: 3px;
}

.allwr-hiring-link svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.allwr-hiring-link.is-done {
    color: var(--allwr-ink-3);
    text-decoration: line-through;
}

.allwr-hiring-sub {
    display: block;
    margin-top: 2px;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
}

.allwr-hiring-sub--warning {
    color: var(--allwr-amber);
}

.allwr-hiring-muted {
    color: var(--allwr-ink-3);
}

.allwr-hiring-overdue {
    color: var(--allwr-danger);
    font-weight: 700;
}

/* --- Tones: one palette per data-tone value, consumed by tags, banners, notices,
   interview signals and meters (--tone = accent/icon/fill, --tone-text = body text) --- */
:where(.allwr-hiring-tag, .allwr-hiring-banner, .allwr-hiring-notice, .allwr-hiring-progress) {
    --tone: var(--allwr-ink-2);
    --tone-bg: var(--allwr-off-white);
    --tone-line: var(--allwr-line);
    --tone-text: var(--allwr-ink-2);
}

:where(.allwr-hiring, .allwr-hiring-form, .allwr-dialog) [data-tone="muted"] {
    --tone: var(--allwr-ink-3);
    --tone-bg: var(--allwr-card);
    --tone-line: var(--allwr-line);
    --tone-text: var(--allwr-ink-2);
}

:where(.allwr-hiring, .allwr-hiring-form, .allwr-dialog) [data-tone="info"] {
    --tone: var(--allwr-ink);
    --tone-bg: color-mix(in srgb, var(--allwr-ink) 7%, var(--allwr-card));
    --tone-line: color-mix(in srgb, var(--allwr-ink) 18%, var(--allwr-line));
    --tone-text: var(--allwr-ink);
}

:where(.allwr-hiring, .allwr-hiring-form, .allwr-dialog) [data-tone="positive"] {
    --tone: var(--allwr-green);
    --tone-bg: color-mix(in srgb, var(--allwr-green) 10%, var(--allwr-card));
    --tone-line: color-mix(in srgb, var(--allwr-green) 26%, var(--allwr-line));
    --tone-text: var(--allwr-ink);
}

:where(.allwr-hiring, .allwr-hiring-form, .allwr-dialog) [data-tone="warning"] {
    --tone: var(--allwr-amber);
    --tone-bg: color-mix(in srgb, var(--allwr-amber) 10%, var(--allwr-card));
    --tone-line: color-mix(in srgb, var(--allwr-amber) 30%, var(--allwr-line));
    --tone-text: var(--allwr-ink);
}

:where(.allwr-hiring, .allwr-hiring-form, .allwr-dialog) [data-tone="danger"] {
    --tone: var(--allwr-danger);
    --tone-bg: color-mix(in srgb, var(--allwr-danger) 9%, var(--allwr-card));
    --tone-line: color-mix(in srgb, var(--allwr-danger) 28%, var(--allwr-line));
    --tone-text: var(--allwr-ink);
}

:where(.allwr-hiring, .allwr-hiring-form, .allwr-dialog) [data-tone="gold"] {
    --tone: var(--allwr-gold-text);
    --tone-bg: var(--allwr-gold-bg);
    --tone-line: color-mix(in srgb, var(--allwr-gold) 38%, var(--allwr-line));
    --tone-text: var(--allwr-ink);
}

:where(.allwr-hiring, .allwr-hiring-form, .allwr-dialog) [data-tone="navy"] {
    --tone: var(--allwr-navy);
    --tone-bg: color-mix(in srgb, var(--allwr-navy) 7%, var(--allwr-card));
    --tone-line: color-mix(in srgb, var(--allwr-navy) 18%, var(--allwr-line));
    --tone-text: var(--allwr-ink);
}

.allwr-hiring-tag {
    border-color: var(--tone-line);
    background: var(--tone-bg);
    color: var(--tone);
}

.allwr-hiring-tag svg {
    width: 12px;
    height: 12px;
    flex: none;
}

.allwr-hiring-tag--score {
    font-variant-numeric: tabular-nums;
}

.allwr-hiring-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.allwr-hiring-chip-btn {
    appearance: none;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
    font: 700 0.78rem var(--allwr-font-body);
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-hiring-chip-btn:hover {
    border-color: var(--allwr-line-strong);
    background: var(--allwr-off-white);
    color: var(--allwr-navy);
}

/* --- Round icon-only button (row actions) --- */
.allwr-hiring-icon-btn {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--allwr-ink-2);
    cursor: pointer;
    transition: color var(--allwr-transition-fast), background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-hiring-icon-btn:hover {
    border-color: var(--allwr-line);
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-hiring-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.allwr-hiring-icon-btn svg {
    width: 16px;
    height: 16px;
}

/* --- Forms (pages and dialogs; dialogs live outside .allwr-hiring) --- */
.allwr-hiring-form {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.allwr-hiring-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.allwr-hiring-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.allwr-hiring-field--full {
    grid-column: 1 / -1;
}

.allwr-hiring-field--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.allwr-hiring-field__label {
    color: var(--allwr-ink-2);
    font: 700 0.8rem var(--allwr-font-body);
}

.allwr-hiring-field__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    color: var(--allwr-ink-3);
    font-size: 0.78rem;
    line-height: 1.45;
}

.allwr-hiring-field__hint svg {
    width: 14px;
    height: 14px;
    flex: none;
    margin-top: 1px;
}

/* :where() keeps these at one-class specificity so components can override them. */
.allwr-hiring-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.allwr-hiring :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 500 0.9rem var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-fast);
}

.allwr-hiring-form :where(textarea),
.allwr-hiring :where(textarea) {
    min-height: 76px;
    line-height: 1.5;
    resize: vertical;
}

.allwr-hiring-form :where(input, select, textarea):hover,
.allwr-hiring :where(input, select, textarea):hover {
    border-color: var(--allwr-line-strong);
}

.allwr-hiring-form :where(input, select, textarea):focus-visible,
.allwr-hiring :where(input, select, textarea):focus-visible {
    border-color: var(--allwr-navy);
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 1px;
}

.allwr-hiring-form [aria-invalid="true"],
.allwr-hiring [aria-invalid="true"] {
    border-color: var(--allwr-danger);
}

.allwr-hiring-form :where(input, select):disabled,
.allwr-hiring :where(input, select):disabled {
    background: var(--allwr-off-white);
    color: var(--allwr-ink-3);
    cursor: not-allowed;
}

.allwr-hiring-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--allwr-ink);
    font-size: 0.88rem;
    cursor: pointer;
}

.allwr-hiring-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--allwr-navy);
}

.allwr-hiring-check--inline {
    font-size: 0.8rem;
    white-space: nowrap;
}

.allwr-hiring-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
}

.allwr-hiring-fieldset legend {
    padding: 0 0.35rem;
    color: var(--allwr-navy);
    font: 800 0.82rem var(--allwr-font-body);
}

.allwr-hiring-details {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    padding: 0.6rem 0.9rem;
}

.allwr-hiring-details > summary {
    color: var(--allwr-navy);
    font: 700 0.86rem var(--allwr-font-body);
    cursor: pointer;
}

.allwr-hiring-details[open] > summary {
    margin-bottom: 0.75rem;
}

.allwr-hiring-form__error,
.allwr-hiring-board-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--allwr-danger) 28%, var(--allwr-line));
    border-radius: var(--allwr-radius-xs);
    background: color-mix(in srgb, var(--allwr-danger) 7%, var(--allwr-card));
    color: var(--allwr-danger);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.45;
}

.allwr-hiring-form__error svg,
.allwr-hiring-board-error svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
}

.allwr-hiring-form__error a {
    color: inherit;
    font-weight: 800;
}

.allwr-hiring-board-error {
    margin-bottom: 0.75rem;
}

.allwr-hiring-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.allwr-hiring-form .allwr-dialog__note svg {
    width: 15px;
    height: 15px;
    margin-right: 0.25rem;
    vertical-align: -3px;
}

.allwr-hiring-search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: min(100%, 260px);
    height: 38px;
    padding: 0 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    color: var(--allwr-ink-3);
    transition: border-color var(--allwr-transition-fast);
}

.allwr-hiring-search:hover {
    border-color: var(--allwr-line-strong);
}

.allwr-hiring-search:focus-within {
    border-color: var(--allwr-navy);
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 1px;
}

.allwr-hiring-search svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.allwr-hiring-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
}

.allwr-hiring-search input:hover {
    border: 0;
}

.allwr-hiring-search input:focus-visible {
    outline: none;
}

.allwr-hiring-search--block {
    display: flex;
    width: 100%;
}

.allwr-hiring-inline-select {
    min-width: 160px;
}

/* --- Pickers (search results inside dialogs) --- */
.allwr-hiring-pick {
    display: grid;
    gap: 0.35rem;
    max-height: 260px;
    overflow: auto;
}

.allwr-hiring-pick:empty {
    display: none;
}

.allwr-hiring-pick__item {
    appearance: none;
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    color: var(--allwr-navy);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-hiring-pick__item:hover {
    border-color: var(--allwr-line-strong);
    background: var(--allwr-off-white);
}

.allwr-hiring-pick__item.is-selected {
    border-color: var(--allwr-navy);
    background: var(--allwr-gold-bg);
    box-shadow: inset 0 0 0 1px var(--allwr-navy);
}

.allwr-hiring-duplicates {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--allwr-amber) 34%, var(--allwr-line));
    border-radius: var(--allwr-radius-md);
    background: color-mix(in srgb, var(--allwr-amber) 6%, var(--allwr-card));
}

.allwr-hiring-duplicates__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--allwr-navy);
    font-weight: 800;
}

.allwr-hiring-duplicates__title svg {
    width: 18px;
    height: 18px;
    color: var(--allwr-amber);
}

.allwr-hiring-duplicates__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-duplicates__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
}

.allwr-hiring-duplicates > .allwr-btn {
    justify-self: start;
}

/* --- Tables (cards under 720px of container) --- */
.allwr-hiring-table td:first-child {
    min-width: 220px;
    white-space: normal;
}

.allwr-hiring-table tr[data-row-href] {
    cursor: pointer;
}

.allwr-hiring-table__actions {
    text-align: right;
}

/* --- Empty, error, notice, banner --- */
.allwr-hiring-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--allwr-line-strong);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    text-align: center;
}

.allwr-hiring-empty--compact {
    padding: 1.5rem 1rem;
}

.allwr-hiring-empty--page {
    margin-top: 2rem;
}

.allwr-hiring-empty__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}

.allwr-hiring-empty__icon svg,
.allwr-hiring-empty--page > svg {
    width: 22px;
    height: 22px;
}

.allwr-hiring-empty__title {
    margin: 0.25rem 0 0;
    color: var(--allwr-navy);
    font: 800 1.05rem var(--allwr-font);
}

.allwr-hiring-empty__text {
    max-width: 48ch;
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.9rem;
    line-height: 1.5;
}

.allwr-hiring-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.allwr-hiring-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--allwr-danger) 26%, var(--allwr-line));
    border-radius: var(--allwr-radius-md);
    background: color-mix(in srgb, var(--allwr-danger) 5%, var(--allwr-card));
}

.allwr-hiring-error > svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--allwr-danger);
}

.allwr-hiring-error__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.allwr-hiring-error__title {
    margin: 0;
    color: var(--allwr-navy);
    font-weight: 800;
}

.allwr-hiring-error__text {
    margin: 0.2rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
}

.allwr-hiring-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--tone-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--tone-bg);
    color: var(--tone-text);
    font-size: 0.86rem;
    line-height: 1.45;
}

.allwr-hiring-notice svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
    color: var(--tone);
}

.allwr-hiring-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--tone-line);
    border-radius: var(--allwr-radius-md);
    background: var(--tone-bg);
    color: var(--tone-text);
    font-weight: 600;
}

.allwr-hiring-banner svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--tone);
}

.allwr-hiring-banner__text {
    flex: 1 1 260px;
    min-width: 0;
}

.allwr-hiring-bullets {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--allwr-ink-2);
}

.allwr-hiring-bullets li + li {
    margin-top: 0.25rem;
}

.allwr-hiring-rule {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--allwr-line);
}

/* --- Lists, facts, cards inside panels --- */
.allwr-hiring-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-list__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-hiring-list__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.allwr-hiring-facts {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.allwr-hiring-facts__row {
    display: grid;
    grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
}

.allwr-hiring-facts dt {
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    font-weight: 700;
}

.allwr-hiring-facts dd {
    margin: 0;
    color: var(--allwr-ink);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.allwr-hiring-card-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.allwr-hiring-summary,
.allwr-hiring-candidate {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.allwr-hiring-summary__main,
.allwr-hiring-summary__side,
.allwr-hiring-candidate__main,
.allwr-hiring-candidate__side {
    display: grid;
    gap: 1rem;
    min-width: 0;
    align-content: start;
}

.allwr-hiring-summary__side:empty,
[data-hiring-hook]:empty {
    display: none;
}

.allwr-hiring-result__headline {
    margin: 0 0 0.4rem;
}

.allwr-hiring-result__total {
    margin: 0;
    color: var(--allwr-navy);
    font: 700 1.2rem var(--allwr-font-body);
    font-variant-numeric: tabular-nums;
}

/* --- Opening: onboarding, docs, team, settings, stages --- */
.allwr-hiring-onboarding {
    margin-bottom: 1rem;
}

.allwr-hiring-onboarding__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-onboarding__step {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--allwr-transition-base), box-shadow var(--allwr-transition-base);
}

.allwr-hiring-onboarding__step:hover {
    border-color: var(--allwr-line-strong);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-hiring-onboarding__step > svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-left: auto;
    color: var(--allwr-ink-3);
}

.allwr-hiring-onboarding__index {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--allwr-navy);
    color: var(--allwr-card);
    font-weight: 800;
    font-size: 0.82rem;
}

.allwr-hiring-onboarding__copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.allwr-hiring-onboarding__copy strong {
    color: var(--allwr-navy);
}

.allwr-hiring-onboarding__copy span {
    color: var(--allwr-ink-2);
    font-size: 0.82rem;
    line-height: 1.4;
}

.allwr-hiring-docs {
    display: grid;
    gap: 1.25rem;
}

.allwr-hiring-docs__role {
    margin: 0 0 0.5rem;
    color: var(--allwr-ink-2);
    font: 800 0.74rem var(--allwr-font-body);
    text-transform: uppercase;
}

.allwr-hiring-roles {
    margin-top: 1.5rem;
}

.allwr-hiring-roles__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.allwr-hiring-roles__list > div {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-hiring-roles__list dt {
    color: var(--allwr-navy);
    font-weight: 800;
}

.allwr-hiring-roles__list dd {
    margin: 0.25rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.85rem;
    line-height: 1.45;
}

.allwr-hiring-settings {
    display: grid;
    gap: 1rem;
    max-width: var(--allwr-content-max);
}

.allwr-hiring-stages {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.allwr-hiring-stages__row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1.4fr) minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
}

.allwr-hiring-stages__row.is-inactive {
    background: var(--allwr-off-white);
}

.allwr-hiring-stages__row.is-inactive .allwr-hiring-stages__name {
    color: var(--allwr-ink-3);
}

.allwr-hiring-stages__order {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    font-weight: 800;
}

.allwr-hiring-stages__moves {
    display: inline-flex;
    gap: 0.15rem;
}

/* --- Files --- */
.allwr-hiring-files-panel {
    display: grid;
    gap: 1rem;
}

.allwr-hiring-upload {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
}

.allwr-hiring-upload .allwr-hiring-form__error {
    grid-column: 1 / -1;
}

.allwr-hiring-dropzone {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.2rem;
    min-height: 96px;
    padding: 1rem;
    border: 1.5px dashed var(--allwr-line-strong);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
    color: var(--allwr-ink-2);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-hiring-dropzone:hover,
.allwr-hiring-dropzone.is-drag {
    border-color: var(--allwr-gold-dec);
    background: var(--allwr-gold-bg);
}

.allwr-hiring-dropzone.is-busy {
    cursor: progress;
    opacity: 0.75;
}

.allwr-hiring-dropzone svg {
    width: 22px;
    height: 22px;
    color: var(--allwr-ink-3);
}

.allwr-hiring-dropzone__title {
    color: var(--allwr-navy);
    font-weight: 700;
    font-size: 0.9rem;
}

.allwr-hiring-dropzone__hint {
    font-size: 0.78rem;
    color: var(--allwr-ink-3);
}

.allwr-hiring-files {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-files__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-hiring-files__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--allwr-r-md);
    background: var(--allwr-off-white);
    color: var(--allwr-ink-2);
}

.allwr-hiring-files__icon svg {
    width: 18px;
    height: 18px;
}

.allwr-hiring-files__copy {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Activity: composer, timeline, notes --- */
.allwr-hiring-activity {
    display: grid;
    gap: 1rem;
    max-width: 880px;
}

.allwr-hiring-composer .allwr-card__body {
    display: grid;
    gap: 0.6rem;
}

.allwr-hiring-composer__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.allwr-hiring-composer__actions select {
    width: auto;
}

.allwr-hiring-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-timeline__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-hiring-timeline__item:last-child {
    border-bottom: 0;
}

.allwr-hiring-timeline__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--allwr-line);
    border-radius: 50%;
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
}

.allwr-hiring-timeline__item--note .allwr-hiring-timeline__icon {
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}

.allwr-hiring-timeline__icon svg {
    width: 15px;
    height: 15px;
}

.allwr-hiring-timeline__body {
    min-width: 0;
}

.allwr-hiring-timeline__text {
    margin: 0.3rem 0 0;
    color: var(--allwr-ink);
    font-size: 0.9rem;
}

.allwr-hiring-timeline__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.15rem 0 0;
    color: var(--allwr-ink-3);
    font-size: 0.78rem;
}

.allwr-hiring-note {
    margin: 0.35rem 0 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Popover menu (header actions, «Mover etapa») --- */
.allwr-hiring-menu {
    z-index: 1250;
    display: grid;
    gap: 2px;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 16px));
    max-height: min(420px, calc(100vh - 16px));
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-hiring-menu__item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink);
    font: 600 0.86rem var(--allwr-font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-hiring-menu__item:hover,
.allwr-hiring-menu__item:focus {
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-hiring-menu__item svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--allwr-ink-2);
}

.allwr-hiring-menu__item--danger,
.allwr-hiring-menu__item--danger svg {
    color: var(--allwr-danger);
}

.allwr-hiring-menu__item[aria-checked="true"] {
    font-weight: 800;
}

.allwr-hiring-menu__item[aria-disabled="true"] {
    color: var(--allwr-ink-3);
    cursor: default;
}

.allwr-hiring-menu__hint {
    margin-left: auto;
    color: var(--allwr-ink-3);
    font-size: 0.74rem;
    font-weight: 600;
}

/* --- Board (generic) --- */
.allwr-board {
    position: relative;
    min-width: 0;
}

.allwr-board__track {
    display: flex;
    gap: 0.75rem;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--allwr-line-strong) transparent;
}

.allwr-board__column {
    display: flex;
    flex: 0 0 clamp(240px, 21%, 300px);
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.6rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-surface-2);
}

.allwr-board__column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0.25rem;
}

.allwr-board__column-title {
    margin: 0;
    overflow: hidden;
    color: var(--allwr-navy);
    font: 800 0.84rem var(--allwr-font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-board__count {
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--allwr-radius-pill);
    background: var(--allwr-card);
    color: var(--allwr-ink-2);
    font-size: 0.74rem;
    font-weight: 800;
    text-align: center;
}

.allwr-board__list {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-height: 72px;
}

.allwr-board__empty {
    margin: -72px 0 0;
    padding: 1.4rem 0.5rem;
    border: 1px dashed var(--allwr-line-strong);
    border-radius: var(--allwr-radius-xs);
    color: var(--allwr-ink-3);
    font-size: 0.8rem;
    text-align: center;
    pointer-events: none;
}

.allwr-board__card {
    position: relative;
    min-width: 0;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
    transition: border-color var(--allwr-transition-base), box-shadow var(--allwr-transition-base), opacity var(--allwr-transition-fast);
}

.allwr-board__card:not(.is-locked) {
    cursor: grab;
}

.allwr-board__card:hover {
    border-color: var(--allwr-line-strong);
    box-shadow: var(--allwr-shadow-hover);
}

.allwr-board__card.is-ghost {
    border-style: dashed;
    border-color: var(--allwr-gold-dec);
    background: var(--allwr-gold-bg);
    box-shadow: none;
    opacity: 0.6;
}

.allwr-board__card.is-chosen {
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-board__card.is-pending {
    cursor: progress;
    opacity: 0.7;
}

.allwr-board.is-dragging .allwr-board__card:hover {
    box-shadow: var(--allwr-shadow-card);
}

.allwr-board__move {
    appearance: none;
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--allwr-ink-3);
    cursor: pointer;
    transition: color var(--allwr-transition-fast), background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-board__move:hover,
.allwr-board__move[aria-expanded="true"] {
    border-color: var(--allwr-line);
    background: var(--allwr-surface-2);
    color: var(--allwr-navy);
}

.allwr-board__move svg {
    width: 15px;
    height: 15px;
}

.allwr-board__column--skeleton {
    gap: 0.6rem;
}

.allwr-board__skeleton--title {
    height: 16px;
    width: 55%;
}

.allwr-board__skeleton--card {
    height: 84px;
    border-radius: var(--allwr-radius-xs);
}

/* Board card content (Hiring) */
.allwr-hiring-card {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 2.4rem 0.7rem 0.75rem;
    border-radius: inherit;
    color: var(--allwr-ink);
    text-decoration: none;
}

.allwr-hiring-card__name {
    color: var(--allwr-navy);
    font: 800 0.92rem var(--allwr-font-body);
    overflow-wrap: anywhere;
}

.allwr-hiring-card__sub {
    overflow: hidden;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-hiring-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--allwr-ink-3);
    font-size: 0.76rem;
}

.allwr-hiring-card__meta span + span::before {
    content: "·";
    margin-right: 0.35rem;
}

.allwr-hiring-card__signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

/* --- Focus ring (separate from hover) --- */
.allwr-hiring-link:focus-visible,
.allwr-hiring-crumbs a:focus-visible,
.allwr-hiring-icon-btn:focus-visible,
.allwr-hiring-chip-btn:focus-visible,
.allwr-hiring-pick__item:focus-visible,
.allwr-hiring-onboarding__step:focus-visible,
.allwr-hiring-dropzone:focus-visible,
.allwr-hiring-menu__item:focus-visible,
.allwr-hiring-details > summary:focus-visible,
.allwr-board__move:focus-visible,
.allwr-hiring-check input:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-hiring-card:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: -3px;
}

.allwr-hiring-menu__item:focus:not(:focus-visible) {
    outline: none;
}

/* --- Header meta with dot separators (hidden parts take no dot) --- */
.allwr-hiring-meta-part {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.allwr-hiring-meta-part + .allwr-hiring-meta-part::before {
    content: "·";
    color: var(--allwr-ink-3);
}

/* Side cards are narrow: label above value. */
.allwr-hiring-summary__side .allwr-hiring-facts__row,
.allwr-hiring-candidate__side .allwr-hiring-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
}

.allwr-hiring-toolbar .allwr-hiring-search {
    flex: 1 1 280px;
    max-width: 420px;
}

/* --- Responsive (container queries on the module root) --- */
@container hiring (max-width: 980px) {
    .allwr-hiring-summary,
    .allwr-hiring-candidate {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-hiring-onboarding__steps,
    .allwr-hiring-roles__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container hiring (max-width: 720px) {
    .allwr-hiring-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .allwr-hiring-table {
        min-width: 0;
    }

    .allwr-hiring-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .allwr-hiring-table tbody,
    .allwr-hiring-table tr,
    .allwr-hiring-table td {
        display: block;
    }

    .allwr-hiring-table tr {
        margin-bottom: 0.75rem;
        padding: 0.75rem 1rem;
        border: 1px solid var(--allwr-line);
        border-radius: var(--allwr-radius-md);
        background: var(--allwr-card);
        box-shadow: var(--allwr-shadow-card);
    }

    .allwr-hiring-table td,
    .allwr-hiring-table th.allwr-table__num,
    .allwr-hiring-table td.allwr-table__num {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.3rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    .allwr-hiring-table td::before {
        content: attr(data-label);
        flex: none;
        color: var(--allwr-ink-3);
        font: 700 0.72rem var(--allwr-font-body);
        text-align: left;
        text-transform: uppercase;
    }

    .allwr-hiring-table td:first-child {
        display: block;
        min-width: 0;
        padding-bottom: 0.5rem;
        text-align: left;
    }

    .allwr-hiring-table td:first-child::before,
    .allwr-hiring-table td.allwr-hiring-table__actions::before {
        content: none;
    }

    .allwr-hiring-table td.allwr-hiring-table__actions {
        justify-content: flex-end;
    }

    .allwr-hiring-bar__actions,
    .allwr-hiring-toolbar .allwr-btn--primary {
        width: 100%;
    }

    .allwr-hiring-bar__actions .allwr-btn {
        width: 100%;
    }

    .allwr-hiring-search {
        width: 100%;
    }

    .allwr-board__track {
        scroll-snap-type: x proximity;
    }

    .allwr-board__column {
        flex-basis: min(84%, 320px);
        scroll-snap-align: start;
    }

    .allwr-hiring-upload {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-hiring-stages__row {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .allwr-hiring-stages__row > :nth-child(n + 3) {
        grid-column: 2;
    }

    .allwr-hiring-facts__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .allwr-hiring .allwr-page-head {
        flex-direction: column;
    }

    .allwr-hiring .allwr-page-head__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .allwr-hiring-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-hiring-duplicates__item {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (hover: none) {
    .allwr-board__move {
        color: var(--allwr-ink-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-hiring *,
    .allwr-hiring *::before,
    .allwr-hiring *::after,
    .allwr-hiring-form *,
    .allwr-hiring-menu * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .allwr-hiring-skeleton__line,
    .allwr-hiring-skeleton__block,
    .allwr-hiring-skeleton__row,
    .allwr-board__skeleton {
        animation: none !important;
        opacity: 0.8;
    }

    .allwr-hiring :hover,
    .allwr-hiring :focus-visible,
    .allwr-hiring :active {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------
   Hiring — evaluation UI (hiring-interview.js): interview mode, score
   control, result, doubts, flags, evaluator comparison, decisions.
   Tokens only; hover never moves things; focus ring separate from hover.
   --------------------------------------------------------------------- */
.allwr-hiring-prewrap {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* --- Radio cards (interview kind, decision) --- */
.allwr-hiring-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.allwr-hiring-choice--stack {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.allwr-hiring-choice legend {
    margin-bottom: 0.4rem;
    padding: 0;
}

.allwr-hiring-choice__option {
    position: relative;
    display: block;
    cursor: pointer;
}

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

.allwr-hiring-choice__option > span {
    display: grid;
    gap: 0.15rem;
    height: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    transition: border-color var(--allwr-transition-fast), background var(--allwr-transition-fast);
}

.allwr-hiring-choice__option strong {
    font: 700 0.88rem var(--allwr-font-body);
}

.allwr-hiring-choice__option small {
    color: var(--allwr-ink-2);
    font-size: 0.78rem;
    line-height: 1.4;
}

.allwr-hiring-choice__option:hover > span {
    border-color: var(--allwr-line-strong);
    background: var(--allwr-surface-2);
}

.allwr-hiring-choice__option input:checked + span {
    border-color: color-mix(in srgb, var(--allwr-gold) 55%, var(--allwr-line));
    background: var(--allwr-gold-bg);
}

.allwr-hiring-choice__option input:checked + span strong {
    color: var(--allwr-gold-text);
}

.allwr-hiring-choice__option input:focus-visible + span {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

/* --- Checkbox groups in dialogs --- */
.allwr-hiring-pickset {
    display: grid;
    gap: 0.45rem;
    margin: 1rem 0 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
}

.allwr-hiring-pickset legend {
    padding: 0 0.3rem;
}

.allwr-hiring-pickset__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.35rem 1rem;
}

.allwr-hiring-pickset__group {
    display: grid;
    gap: 0.3rem;
}

.allwr-hiring-pickset__group + .allwr-hiring-pickset__group {
    padding-top: 0.5rem;
    border-top: 1px solid var(--allwr-line);
}

.allwr-hiring-pickset__title {
    margin: 0;
    color: var(--allwr-navy);
    font: 700 0.82rem var(--allwr-font-body);
}

.allwr-hiring-specific {
    display: grid;
    gap: 0.6rem;
}

.allwr-hiring-specific:empty {
    display: none;
}

.allwr-hiring-specific__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
}

/* --- Interviews list --- */
.allwr-hiring-iv-item {
    align-items: flex-start;
}

.allwr-hiring-iv-item__icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--allwr-off-white);
    color: var(--allwr-ink-2);
}

.allwr-hiring-iv-item__icon svg {
    width: 18px;
    height: 18px;
}

.allwr-hiring-iv-item__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-navy);
}

.allwr-hiring-iv-item__meta {
    margin: 0.2rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.allwr-hiring-iv-item__people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
}

.allwr-hiring-iv-item__person {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* --- Interview mode --- */
.allwr-hiring-iv {
    display: grid;
    gap: 1rem;
}

.allwr-hiring-iv__bar {
    position: sticky;
    top: var(--allwr-topbar-h);
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-card);
}

.allwr-hiring-iv__who {
    flex: 1 1 280px;
    min-width: 0;
}

.allwr-hiring-iv__name {
    margin: 0;
    color: var(--allwr-navy);
    font: 800 1.15rem var(--allwr-font);
}

.allwr-hiring-iv__name:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 3px;
}

.allwr-hiring-iv__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-hiring-iv__save {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--allwr-ink-2);
    font: 600 0.8rem var(--allwr-font-body);
}

.allwr-hiring-iv__save-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--allwr-green);
}

.allwr-hiring-iv__save[data-state="pending"] .allwr-hiring-iv__save-dot,
.allwr-hiring-iv__save[data-state="saving"] .allwr-hiring-iv__save-dot {
    background: var(--allwr-amber);
}

.allwr-hiring-iv__save[data-state="error"],
.allwr-hiring-iv__save[data-state="conflict"],
.allwr-hiring-iv__save[data-state="blocked"],
.allwr-hiring-iv__save[data-state="invalid"] {
    color: var(--allwr-danger);
}

.allwr-hiring-iv__save[data-state="error"] .allwr-hiring-iv__save-dot,
.allwr-hiring-iv__save[data-state="conflict"] .allwr-hiring-iv__save-dot,
.allwr-hiring-iv__save[data-state="blocked"] .allwr-hiring-iv__save-dot,
.allwr-hiring-iv__save[data-state="invalid"] .allwr-hiring-iv__save-dot {
    background: var(--allwr-danger);
}

.allwr-hiring-iv__layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.allwr-hiring-iv__nav {
    position: sticky;
    top: calc(var(--allwr-topbar-h) + 5.5rem);
    max-height: calc(100vh - var(--allwr-topbar-h) - 7rem);
    overflow: auto;
}

.allwr-hiring-iv__navbox {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-hiring-iv__navbox > summary {
    display: none;
}

.allwr-hiring-iv__navlist {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
}

.allwr-hiring-iv__navitem {
    appearance: none;
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-radius-xs);
    background: transparent;
    color: var(--allwr-ink);
    text-align: left;
    cursor: pointer;
    transition: background var(--allwr-transition-fast), border-color var(--allwr-transition-fast);
}

.allwr-hiring-iv__navitem:hover {
    background: var(--allwr-surface-2);
}

.allwr-hiring-iv__navitem[aria-current="step"] {
    border-color: color-mix(in srgb, var(--allwr-gold) 45%, var(--allwr-line));
    background: var(--allwr-gold-bg);
}

.allwr-hiring-iv__navitem:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 1px;
}

.allwr-hiring-iv__navnum {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--allwr-off-white);
    color: var(--allwr-ink-2);
    font: 700 0.75rem var(--allwr-font-body);
}

.allwr-hiring-iv__navnum svg {
    width: 14px;
    height: 14px;
}

.allwr-hiring-iv__navtext {
    display: grid;
    min-width: 0;
}

.allwr-hiring-iv__navq {
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.allwr-hiring-iv__navc {
    overflow: hidden;
    color: var(--allwr-ink-3);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.allwr-hiring-iv__dot {
    width: 10px;
    height: 10px;
    border: 2px solid var(--allwr-line-strong);
    border-radius: 50%;
    background: transparent;
}

.allwr-hiring-iv__dot[data-state="partial"] {
    border-color: var(--allwr-amber);
    background: color-mix(in srgb, var(--allwr-amber) 35%, var(--allwr-card));
}

.allwr-hiring-iv__dot[data-state="complete"] {
    border-color: var(--allwr-green);
    background: var(--allwr-green);
}

.allwr-hiring-iv__dot[data-state="problem"] {
    border-color: var(--allwr-danger);
    background: var(--allwr-danger);
}

.allwr-hiring-iv__main {
    min-width: 0;
}

.allwr-hiring-iv__step {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2.4vw, 1.5rem);
}

.allwr-hiring-iv__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-ink-3);
    font: 700 0.76rem var(--allwr-font-body);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.allwr-hiring-iv__qtext {
    margin: 0;
    color: var(--allwr-navy);
    font: 700 clamp(1.15rem, 1rem + 0.7vw, 1.45rem) var(--allwr-font);
    line-height: 1.35;
}

.allwr-hiring-iv__qtext:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 3px;
}

.allwr-hiring-iv__evaluates {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.4rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
}

.allwr-hiring-iv__evaluates svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--allwr-gold-text);
}

.allwr-hiring-iv__listen {
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--allwr-gold);
    border-radius: 0 var(--allwr-radius-xs) var(--allwr-radius-xs) 0;
    background: var(--allwr-gold-bg);
    color: var(--allwr-ink);
    font-size: 0.9rem;
}

.allwr-hiring-iv__listen-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.25rem;
    color: var(--allwr-gold-text);
    font: 700 0.78rem var(--allwr-font-body);
    text-transform: uppercase;
}

.allwr-hiring-iv__listen-title svg {
    width: 14px;
    height: 14px;
}

.allwr-hiring-iv__signallist {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.allwr-hiring-iv__signallist dt {
    color: var(--allwr-ink-2);
    font: 700 0.78rem var(--allwr-font-body);
}

.allwr-hiring-iv__signallist div[data-tone] dt {
    color: var(--tone);
}

.allwr-hiring-iv__signallist dd {
    margin: 0.1rem 0 0;
    font-size: 0.88rem;
}

.allwr-hiring-iv__field textarea,
.allwr-hiring-iv__flagform textarea,
.allwr-hiring-iv__flagform input,
.allwr-hiring-iv__flagform select {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    color: var(--allwr-ink);
    font: 400 0.92rem/1.5 var(--allwr-font-body);
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-fast);
}

.allwr-hiring-iv__field textarea {
    resize: vertical;
}

.allwr-hiring-iv__field textarea:hover,
.allwr-hiring-iv__flagform :where(textarea, input, select):hover {
    border-color: var(--allwr-line-strong);
}

.allwr-hiring-iv__field textarea:focus-visible,
.allwr-hiring-iv__flagform :where(textarea, input, select):focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 1px;
    border-color: var(--allwr-gold);
}

.allwr-hiring-iv__field textarea[aria-invalid="true"],
.allwr-hiring-iv__flagform [aria-invalid="true"] {
    border-color: var(--allwr-danger);
}

.allwr-hiring-iv__criterion {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-off-white);
}

.allwr-hiring-iv__criterion[data-problem] {
    border-color: color-mix(in srgb, var(--allwr-danger) 45%, var(--allwr-line));
}

.allwr-hiring-iv__chead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.allwr-hiring-iv__ctitle {
    margin: 0;
    color: var(--allwr-navy);
    font: 800 0.98rem var(--allwr-font);
}

.allwr-hiring-iv__expect {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.86rem;
}

.allwr-hiring-iv__problem {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--allwr-danger);
    font: 600 0.84rem var(--allwr-font-body);
}

.allwr-hiring-iv__problem svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.allwr-hiring-iv__readonly {
    display: grid;
    gap: 0.3rem;
}

.allwr-hiring-iv__flags {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
}

.allwr-hiring-iv__flagform {
    display: grid;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--allwr-danger) 30%, var(--allwr-line));
    border-radius: var(--allwr-radius-md);
    background: color-mix(in srgb, var(--allwr-danger) 4%, var(--allwr-card));
}

.allwr-hiring-iv__flaglist {
    display: grid;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-iv__flaglist li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.86rem;
}

.allwr-hiring-iv__flaglist svg {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 0.15rem;
    color: var(--allwr-danger);
}

.allwr-hiring-iv__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--allwr-line);
}

.allwr-hiring-iv__keys {
    flex: 1 1 200px;
    color: var(--allwr-ink-3);
    font-size: 0.76rem;
    text-align: center;
}

.allwr-hiring-iv__checklist {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-iv__check {
    display: grid;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-hiring-iv__check[data-problem] {
    border-color: color-mix(in srgb, var(--allwr-danger) 45%, var(--allwr-line));
}

.allwr-hiring-iv__checkhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.allwr-hiring-iv__checkname {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* --- Score control (1–4): the shared .allwr-perm-seg as four equal columns --- */
.allwr-hiring-score {
    display: grid;
    gap: 0.35rem;
    justify-items: start;
}

.allwr-hiring-score__seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    border-radius: var(--allwr-radius-xs);
}

.allwr-hiring-score__seg .allwr-perm-seg__option {
    position: relative;
}

.allwr-hiring-score__seg .allwr-perm-seg__option span {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    height: 100%;
    padding: 0.5rem 0.4rem;
    font: inherit;
    text-align: center;
    white-space: normal;
}

.allwr-hiring-score__seg strong {
    color: var(--allwr-navy);
    font: 800 1.05rem var(--allwr-font-body);
    font-variant-numeric: tabular-nums;
}

.allwr-hiring-score__seg small {
    font-size: 0.72rem;
    line-height: 1.25;
}

.allwr-hiring-score__seg input:checked + span strong {
    color: var(--allwr-gold-text);
}

.allwr-hiring-score__clear {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--allwr-ink-2);
    font: 600 0.78rem var(--allwr-font-body);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--allwr-transition-fast);
}

.allwr-hiring-score__clear:hover {
    color: var(--allwr-navy);
}

.allwr-hiring-score__clear:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

/* --- Evaluation tab --- */
.allwr-hiring-eval {
    display: grid;
    gap: 1rem;
}

.allwr-hiring-eval__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.allwr-hiring-eval__subtitle {
    margin-top: 1rem;
}

.allwr-hiring-eval__ok {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--allwr-green);
    font-weight: 600;
}

.allwr-hiring-eval__ok svg {
    width: 16px;
    height: 16px;
}

.allwr-hiring-result {
    margin-bottom: 0.75rem;
}

.allwr-hiring-result__big {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    color: var(--allwr-navy);
    font-variant-numeric: tabular-nums;
}

.allwr-hiring-result__big strong {
    font: 800 2.1rem var(--allwr-font-body);
}

.allwr-hiring-result__big span {
    color: var(--allwr-ink-3);
    font: 600 1rem var(--allwr-font-body);
}

.allwr-hiring-result__meta {
    margin: 0.2rem 0 0;
    color: var(--allwr-ink-2);
    font-size: 0.84rem;
}

.allwr-hiring-result-card {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
}

.allwr-hiring-dims {
    display: grid;
    gap: 0.7rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.allwr-hiring-dims__head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.allwr-hiring-dims__name {
    flex: 1 1 auto;
    color: var(--allwr-ink);
    font-weight: 700;
}

.allwr-hiring-dims__score {
    color: var(--allwr-navy);
    font-variant-numeric: tabular-nums;
}

.allwr-hiring-dims__meta {
    margin: 0.2rem 0 0;
    color: var(--allwr-ink-3);
    font-size: 0.76rem;
}

/* Meters: the shared .allwr-progress, coloured by the tone palette. */
.allwr-hiring-progress {
    display: block;
    height: 8px;
    margin-top: 0.3rem;
}

.allwr-hiring-progress .allwr-progress__bar {
    background: var(--tone);
    transition: width var(--allwr-transition-slow);
}

.allwr-hiring-doubts,
.allwr-hiring-flags,
.allwr-hiring-decisions {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.allwr-hiring-doubt,
.allwr-hiring-flag,
.allwr-hiring-decision {
    display: grid;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-hiring-doubt__head,
.allwr-hiring-flag__head,
.allwr-hiring-decision__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.allwr-hiring-doubt__score {
    margin-left: auto;
    color: var(--allwr-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.allwr-hiring-doubt__evidence {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--allwr-line-strong);
    background: var(--allwr-off-white);
    color: var(--allwr-ink-2);
    font-size: 0.86rem;
}

.allwr-hiring-doubt__evidence p {
    margin: 0;
}

.allwr-hiring-doubt__evidence footer {
    margin-top: 0.25rem;
    color: var(--allwr-ink-3);
    font-size: 0.76rem;
}

.allwr-hiring-doubts__resolved {
    margin-bottom: 0.75rem;
}

.allwr-hiring-flag[data-status="pending"] {
    border-color: color-mix(in srgb, var(--allwr-amber) 35%, var(--allwr-line));
}

.allwr-hiring-flag[data-status="confirmed"] {
    border-color: color-mix(in srgb, var(--allwr-danger) 40%, var(--allwr-line));
}

.allwr-hiring-flag[data-status="dismissed"] {
    background: var(--allwr-off-white);
}

.allwr-hiring-flag__head svg {
    width: 15px;
    height: 15px;
    color: var(--allwr-danger);
}

.allwr-hiring-flag__evidence {
    font-size: 0.88rem;
}

.allwr-hiring-flag__meta,
.allwr-hiring-flag__resolution,
.allwr-hiring-decision__meta {
    margin: 0;
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
}

.allwr-hiring-decision__head .allwr-hiring-muted {
    margin-left: auto;
    font-size: 0.8rem;
}

.allwr-hiring-compare__cell {
    display: grid;
    gap: 0.3rem;
    justify-items: start;
}

.allwr-hiring-compare__evidence > summary {
    color: var(--allwr-ink-2);
    font: 600 0.76rem var(--allwr-font-body);
    cursor: pointer;
}

.allwr-hiring-compare__evidence > summary:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-hiring-compare__evidence p {
    max-width: 42ch;
    margin-top: 0.3rem;
    font-size: 0.82rem;
}

.allwr-hiring-compare tr[data-spread] td {
    background: color-mix(in srgb, var(--allwr-amber) 7%, var(--allwr-card));
}

.allwr-hiring-decide__system {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    color: var(--allwr-ink-2);
    font-weight: 600;
}

.allwr-hiring-decide__override .allwr-hiring-notice {
    margin-bottom: 0.6rem;
}

@container hiring (max-width: 980px) {
    .allwr-hiring-eval__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container hiring (max-width: 900px) {
    .allwr-hiring-iv__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-hiring-iv__nav {
        position: static;
        max-height: none;
    }

    .allwr-hiring-iv__navbox > summary {
        display: block;
        padding: 0.65rem 0.9rem;
        color: var(--allwr-navy);
        font: 700 0.88rem var(--allwr-font-body);
        cursor: pointer;
    }

    .allwr-hiring-iv__navbox > summary:focus-visible {
        outline: 3px solid var(--allwr-gold-soft);
        outline-offset: 2px;
    }

    .allwr-hiring-iv__bar {
        position: static;
    }
}

@container hiring (max-width: 560px) {
    .allwr-hiring-score__seg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .allwr-hiring-score__seg .allwr-perm-seg__option:nth-child(3) {
        border-left: 0;
    }

    .allwr-hiring-score__seg .allwr-perm-seg__option:nth-child(n + 3) {
        border-top: 1px solid var(--allwr-line);
    }

    .allwr-hiring-iv__keys {
        display: none;
    }

    .allwr-hiring-iv__footer .allwr-btn {
        flex: 1 1 auto;
    }

    .allwr-hiring-specific__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .allwr-hiring-specific__row > :nth-child(2) {
        grid-column: 1;
    }
}

@media (pointer: coarse) {
    .allwr-hiring-score__seg .allwr-perm-seg__option span {
        min-height: 44px;
    }

    .allwr-hiring-iv__navitem {
        min-height: 44px;
    }
}

/* =====================================================================
   Hiring — method editor, templates, lists and metrics (hiring-method.js)
   ===================================================================== */

/* --- Method editor --- */
.allwr-hiring-method {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.allwr-hiring-method__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.allwr-hiring-method__introcopy {
    flex: 1 1 320px;
    min-width: 0;
}

.allwr-hiring-method__introcopy .allwr-hiring-section__lead {
    margin-bottom: 0.35rem;
}

.allwr-hiring-method__source {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.82rem;
}

.allwr-hiring-method__source svg {
    width: 14px;
    height: 14px;
}

.allwr-hiring-method__section {
    margin-top: 0.25rem;
}

.allwr-hiring-method__sectionhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.35rem;
}

.allwr-hiring-method__sectionhead .allwr-hiring-section__title {
    margin: 0;
}

.allwr-hiring-method__sum {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--allwr-success) 35%, var(--allwr-line));
    border-radius: var(--allwr-radius-pill);
    background: color-mix(in srgb, var(--allwr-success) 8%, var(--allwr-card));
    color: var(--allwr-success);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.allwr-hiring-method__sum[data-ok="false"] {
    border-color: color-mix(in srgb, var(--allwr-danger) 35%, var(--allwr-line));
    background: color-mix(in srgb, var(--allwr-danger) 7%, var(--allwr-card));
    color: var(--allwr-danger);
}

.allwr-hiring-method__sum svg {
    width: 15px;
    height: 15px;
}

.allwr-hiring-method__thresholds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
}

.allwr-hiring-method__thresholds input,
.allwr-hiring-method__thresholds select {
    max-width: 12rem;
}

.allwr-hiring-method__thresholds[data-invalid="true"],
.allwr-hiring-method__dim[data-invalid="true"],
.allwr-hiring-method__entry[data-invalid="true"] > .allwr-hiring-method__item,
.allwr-hiring-form__grid[data-invalid="true"] {
    border-color: var(--allwr-danger);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--allwr-danger) 45%, transparent);
}

.allwr-hiring-method__dims,
.allwr-hiring-method__items {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.allwr-hiring-method__dim {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem 1rem 1rem;
}

.allwr-hiring-method__dim.is-inactive {
    background: var(--allwr-surface-2);
}

.allwr-hiring-method__dimhead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: end;
    gap: 0.6rem 0.9rem;
}

.allwr-hiring-method__dimname input {
    font-weight: 700;
}

.allwr-hiring-method__weightbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--allwr-ink-2);
    font-weight: 700;
}

.allwr-hiring-method__weightbox input {
    width: 6.5rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.allwr-hiring-method__dimhead .allwr-hiring-check {
    padding-bottom: 0.55rem;
}

.allwr-hiring-method__dimhead .allwr-hiring-method__moves {
    padding-bottom: 0.2rem;
}

.allwr-hiring-method__subhead {
    margin: 0.2rem 0 0;
    color: var(--allwr-muted);
    font: 800 0.72rem var(--allwr-font-body);
    text-transform: uppercase;
}

.allwr-hiring-method__none {
    margin: 0 0 0.6rem;
    font-size: 0.86rem;
}

.allwr-hiring-method__item {
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-canvas);
    transition: border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-fast);
}

.allwr-hiring-method__item.is-inactive {
    background: var(--allwr-surface-2);
}

.allwr-hiring-method__item.is-inactive .allwr-hiring-method__itemtitle {
    color: var(--allwr-ink-2);
}

.allwr-hiring-method__item > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: inherit;
    cursor: pointer;
    list-style: none;
}

.allwr-hiring-method__item > summary::-webkit-details-marker {
    display: none;
}

.allwr-hiring-method__item > summary::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    flex: none;
    border-right: 2px solid var(--allwr-ink-3);
    border-bottom: 2px solid var(--allwr-ink-3);
    transform: rotate(-45deg);
    transition: transform var(--allwr-transition-fast);
}

.allwr-hiring-method__item[open] > summary::before {
    transform: rotate(45deg);
}

.allwr-hiring-method__item > summary:hover {
    background: var(--allwr-surface-2);
}

.allwr-hiring-method__item > summary:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-hiring-method__item[open] > summary {
    border-bottom: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md) var(--allwr-radius-md) 0 0;
}

.allwr-hiring-method__itemtitle {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--allwr-navy);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.allwr-hiring-method__flagicon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--allwr-danger);
}

.allwr-hiring-method__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding: 0.85rem 0.9rem 0.9rem;
}

.allwr-hiring-method__itemfoot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
}

.allwr-hiring-method__moves {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
}

.allwr-hiring-method__remove:hover {
    color: var(--allwr-danger);
}

.allwr-hiring-method__filter select {
    min-width: 12rem;
    max-width: 100%;
}

.allwr-hiring-method__problems {
    align-items: flex-start;
}

.allwr-hiring-method__problems ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-weight: 600;
}

.allwr-hiring-method__problems .allwr-hiring-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.allwr-hiring-method__problemstitle {
    margin: 0;
    font-weight: 800;
}

.allwr-hiring-method__savebar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-md);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
}

.allwr-hiring-method__state {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--allwr-ink-2);
    font-size: 0.86rem;
    font-weight: 700;
}

.allwr-hiring-method__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--allwr-success);
    transition: background var(--allwr-transition-base);
}

.allwr-hiring-method__savebar[data-dirty="true"] .allwr-hiring-method__dot {
    background: var(--allwr-amber);
}

.allwr-hiring-method__savebar[data-dirty="true"] .allwr-hiring-method__state {
    color: var(--allwr-navy);
}

/* Read-only method (interviewers and viewers): interview material, not a form. */
.allwr-hiring-method__dim--read {
    gap: 0.4rem;
}

.allwr-hiring-method__readhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.allwr-hiring-method__readtitle {
    margin: 0;
    color: var(--allwr-navy);
    font: 800 1rem var(--allwr-font);
}

.allwr-hiring-method__readlist {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-method__readlist .allwr-hiring-details > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.allwr-hiring-method__readdl {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.allwr-hiring-method__readrow dt {
    color: var(--allwr-muted);
    font: 800 0.72rem var(--allwr-font-body);
    text-transform: uppercase;
}

.allwr-hiring-method__readrow dd {
    margin: 0.15rem 0 0;
    color: var(--allwr-ink);
    font-size: 0.9rem;
    line-height: 1.5;
}

.allwr-hiring-method__readflag {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-xs);
    background: var(--allwr-card);
    font-size: 0.9rem;
}

.allwr-hiring-method__readflag svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    color: var(--allwr-danger);
}

/* --- Templates library --- */
.allwr-hiring-tplgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.allwr-hiring-tplcard {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1rem 1rem 0.75rem;
}

.allwr-hiring-tplcard__link {
    color: var(--allwr-navy);
    font: 800 1rem var(--allwr-font);
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* The whole card opens the template; the menu button stays above the overlay. */
.allwr-hiring-tplcard__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.allwr-hiring-tplcard__link:focus-visible {
    outline: none;
}

.allwr-hiring-tplcard__link:focus-visible::after {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-hiring-tplcard__desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--allwr-ink-2);
    font-size: 0.88rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.allwr-hiring-tplcard__counts {
    margin: 0;
    color: var(--allwr-ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.allwr-hiring-tplcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.allwr-hiring-tplcard__menu {
    position: relative;
    z-index: 1;
}

.allwr-hiring-config__card + .allwr-hiring-config__card {
    margin-top: 1rem;
}

.allwr-hiring-optcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
    align-items: start;
}

.allwr-hiring-optlist {
    display: grid;
    gap: 0.4rem;
    margin: 0.6rem 0 0.75rem;
    padding: 0;
    list-style: none;
}

.allwr-hiring-optlist__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
}

.allwr-hiring-optlist__row.is-inactive input[type="text"] {
    color: var(--allwr-ink-3);
    text-decoration: line-through;
}

/* --- Metrics --- */
.allwr-hiring-metrics {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.allwr-hiring-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
}

.allwr-hiring-metrics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

.allwr-hiring-metrics__card .allwr-table {
    min-width: 0;
}

/* Four columns do not fit half a row. */
.allwr-hiring-metrics__card--wide {
    grid-column: 1 / -1;
}

/* Half-width cards: headers wrap instead of pushing the last column out of the card. */
.allwr-hiring-metrics__table th {
    white-space: normal;
}

.allwr-hiring-metrics__bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.allwr-hiring-metrics__bar .allwr-hiring-progress {
    flex: 1 1 80px;
    min-width: 60px;
    margin-top: 0;
}

.allwr-hiring-metrics__barvalue {
    min-width: 3.5ch;
    color: var(--allwr-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.allwr-hiring-metrics__recs {
    margin: 0.6rem 0;
}

@container hiring (max-width: 720px) {
    .allwr-hiring-method__thresholds,
    .allwr-hiring-method__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .allwr-hiring-method__dimhead {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .allwr-hiring-method__dimname {
        grid-column: 1 / -1;
    }

    .allwr-hiring-method__savebar {
        gap: 0.5rem;
        padding: 0.55rem 0.65rem;
    }

    .allwr-hiring-method__state {
        flex: 1 1 100%;
    }

    .allwr-hiring-method__savebar .allwr-hiring-toolbar__spacer {
        display: none;
    }

    .allwr-hiring-method__savebar .allwr-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .allwr-hiring-metrics__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Card mode: the label cannot shrink, so the bar takes its own line under it. */
    .allwr-hiring-metrics__table td {
        flex-wrap: wrap;
    }

    .allwr-hiring-metrics__table .allwr-hiring-metrics__bar {
        flex: 1 1 100%;
    }

    .allwr-hiring-optlist__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .allwr-hiring-optlist__row .allwr-hiring-stages__moves {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* Components here set display (.allwr-btn is inline-flex, cards are grids), which
   would beat the UA [hidden] rule: one scoped rule, last in the block so it wins. */
.allwr-hiring [hidden],
.allwr-hiring-form [hidden],
.allwr-board [hidden] {
    display: none;
}

/* === In-app feedback: toast, side panel and launcher (feedback.js) ==========
   docs/agents/feedback-prompts.md. Toast bottom left (non-modal), panel from the
   right (modal), launcher bottom right. Hover never moves anything; enter/leave
   use opacity + a short slide that reduced motion removes. */
.allwr-feedback__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.allwr-feedback__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid transparent;
    border-radius: var(--allwr-radius-sm);
    font: 600 0.9rem / 1.2 var(--allwr-font-body);
    cursor: pointer;
    transition: background-color var(--allwr-transition-fast), border-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base), color var(--allwr-transition-fast);
}

.allwr-feedback__btn--primary { background: var(--allwr-navy); color: var(--allwr-card); }
.allwr-feedback__btn--primary:hover { background: color-mix(in srgb, var(--allwr-navy) 90%, var(--allwr-card)); box-shadow: var(--allwr-shadow-card); }
.allwr-feedback__btn--ghost { background: transparent; border-color: var(--allwr-line); color: var(--allwr-navy); }
.allwr-feedback__btn--ghost:hover { background: var(--allwr-surface-2); border-color: var(--allwr-line-strong); }

.allwr-feedback__btn:focus-visible,
.allwr-feedback-toast__close:focus-visible,
.allwr-feedback-panel__close:focus-visible,
.allwr-feedback-launcher:focus-visible,
.allwr-feedback-panel__foot a:focus-visible {
    outline: 3px solid var(--allwr-gold-soft);
    outline-offset: 2px;
}

.allwr-feedback-toast {
    position: fixed;
    left: calc(var(--allwr-sidebar-w) + 1.25rem);
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 950;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    width: min(23rem, calc(100vw - 2rem));
    padding: 1.1rem 1rem 1rem 1.1rem;
    border: 1px solid var(--allwr-line);
    border-radius: var(--allwr-radius-lg);
    background: var(--allwr-card);
    box-shadow: var(--allwr-shadow-dropdown);
    color: var(--allwr-ink);
    font-family: var(--allwr-font-body);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--allwr-transition-slow), transform var(--allwr-transition-slow);
}

body.allwr-sidebar-collapsed .allwr-feedback-toast { left: calc(var(--allwr-sidebar-w-collapsed) + 1.25rem); }
.allwr-feedback-toast.is-visible { opacity: 1; transform: none; }

.allwr-feedback-toast__icon {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--allwr-radius-sm);
    background: var(--allwr-gold-bg);
    color: var(--allwr-gold-text);
}

.allwr-feedback-toast__icon svg { width: 1.25rem; height: 1.25rem; }
.allwr-feedback-toast__body { min-width: 0; }

.allwr-feedback-toast__title {
    margin: 0.1rem 0 0.2rem;
    color: var(--allwr-navy);
    font: 700 1.02rem / 1.3 var(--allwr-font);
}

.allwr-feedback-toast__text { margin: 0; color: var(--allwr-ink-2); font-size: 0.9rem; line-height: 1.45; }
.allwr-feedback-toast__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.allwr-feedback-toast__note { margin: 0.75rem 0 0; color: var(--allwr-ink-3); font-size: 0.78rem; }

.allwr-feedback-toast__close,
.allwr-feedback-panel__close {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--allwr-r-md);
    background: transparent;
    color: var(--allwr-ink-3);
    cursor: pointer;
    transition: background-color var(--allwr-transition-fast), color var(--allwr-transition-fast);
}

.allwr-feedback-toast__close:hover,
.allwr-feedback-panel__close:hover { background: var(--allwr-surface-2); color: var(--allwr-navy); }
.allwr-feedback-toast__close svg,
.allwr-feedback-panel__close svg { width: 1.1rem; height: 1.1rem; }

.allwr-feedback-launcher {
    position: fixed;
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 940;
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--allwr-gold) 55%, var(--allwr-navy));
    border-radius: 50%;
    background: var(--allwr-navy);
    box-shadow: var(--allwr-shadow-hover);
    color: var(--allwr-gold);
    cursor: pointer;
    transition: background-color var(--allwr-transition-fast), box-shadow var(--allwr-transition-base);
}

.allwr-feedback-launcher:hover { background: color-mix(in srgb, var(--allwr-navy) 88%, var(--allwr-card)); box-shadow: var(--allwr-shadow-dropdown); }
.allwr-feedback-launcher svg { width: 1.45rem; height: 1.45rem; }

.allwr-feedback-launcher__dot {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--allwr-navy);
    border-radius: 50%;
    background: var(--allwr-gold);
}

.allwr-feedback-launcher__dot[hidden] { display: none; }
body.allwr-feedback-open .allwr-feedback-launcher { visibility: hidden; }

.allwr-feedback-panel { position: fixed; inset: 0; z-index: 1150; }

.allwr-feedback-panel__scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--allwr-navy) 32%, transparent);
    opacity: 0;
    transition: opacity var(--allwr-transition-slow);
}

.allwr-feedback-panel__sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(27rem, 100vw);
    background: var(--allwr-card);
    border-left: 1px solid var(--allwr-line);
    box-shadow: var(--allwr-shadow-dropdown);
    color: var(--allwr-ink);
    font-family: var(--allwr-font-body);
    transform: translateX(100%);
    transition: transform var(--allwr-transition-slow);
}

.allwr-feedback-panel__sheet:focus { outline: none; }
.allwr-feedback-panel.is-open .allwr-feedback-panel__scrim { opacity: 1; }
.allwr-feedback-panel.is-open .allwr-feedback-panel__sheet { transform: none; }

.allwr-feedback-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem 0.9rem 1.5rem;
    border-bottom: 1px solid var(--allwr-line);
}

.allwr-feedback-panel__brand { display: block; width: auto; height: 1.375rem; }

.allwr-feedback-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.5rem 1rem;
}

.allwr-feedback-panel__hello { margin: 0 0 0.4rem; color: var(--allwr-ink-2); font-size: 0.95rem; }
.allwr-feedback-panel__status { margin: 1rem 0; color: var(--allwr-ink-2); font-size: 0.92rem; }

.allwr-feedback-panel__context {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--allwr-radius-sm);
    background: var(--allwr-surface-2);
    color: var(--allwr-ink-2);
    font-size: 0.8rem;
    line-height: 1.45;
}

.allwr-feedback-panel__context svg { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--allwr-ink-3); }

.allwr-feedback-panel__foot {
    padding: 0.9rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--allwr-line);
    color: var(--allwr-ink-2);
    font-size: 0.85rem;
}

.allwr-feedback-panel__mail { margin: 0; }

.allwr-feedback-panel__foot a {
    color: var(--allwr-gold-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--allwr-gold-text) 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--allwr-transition-fast);
}

.allwr-feedback-panel__foot a:hover { text-decoration-color: currentColor; }

/* The respondent runtime inside the panel: one narrow column, no full-page air. */
.allwr-feedback-panel__form .allwr-form-rt { min-height: 0; }
.allwr-feedback-panel__form .allwr-form-rt__stage { padding: 0.25rem 0 3.75rem; align-items: start; }
.allwr-feedback-panel__form .allwr-form-rt__slide { width: 100%; }
.allwr-feedback-panel__form .allwr-form-rt__title { font-size: 1.35rem; }
.allwr-feedback-panel__form .allwr-form-rt__qtitle { font-size: 1.2rem; }
.allwr-feedback-panel__form .allwr-form-rt__lead,
.allwr-feedback-panel__form .allwr-form-rt__qdesc { font-size: 0.95rem; }
.allwr-feedback-panel__form .allwr-form-rt__nav { right: 0; bottom: 0; }
.allwr-feedback-panel__form .allwr-form-rt[data-layout="classic"] .allwr-form-rt__stage { padding-bottom: 0.5rem; }
.allwr-feedback-panel__form .allwr-form-rt__list { gap: 1.5rem; }
.allwr-feedback-panel__form .allwr-form-rt__field { margin-top: 0.9rem; }
.allwr-feedback-panel__form .allwr-form-rt__actions--submit { margin-top: 1.25rem; }
.allwr-feedback-panel__form .allwr-form-rt__choice { padding-block: 0.5rem; }
.allwr-feedback-panel__form .allwr-form-rt__error:empty { min-height: 0; margin: 0; }
.allwr-feedback-panel__form .allwr-form-rt__card--intro:has(> .allwr-form-rt__title:empty):not(:has(.allwr-form-rt__lead, .allwr-form-rt__meta)) { display: none; }

body.allwr-feedback-open { overflow: hidden; }

.allwr-demo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.65rem clamp(1rem, 3vw, 2rem);
    color: var(--allwr-ink);
    background: var(--allwr-gold-soft);
    border-bottom: 1px solid var(--allwr-border);
}

.allwr-demo-banner form { margin: 0; }

/* Phones (the full version on a phone): the toast spans the width above the
   bottom edge and the panel takes the screen. The launcher is hidden there: a
   fixed round button covers the last row of tables and forms, which are the
   primary actions of the full version on that width. Milestone toasts still
   appear; the general form has no entry point there (the mail link stays). */
@media (max-width: 760px) {
    .allwr-feedback-toast,
    body.allwr-sidebar-collapsed .allwr-feedback-toast {
        left: 1rem;
        right: 1rem;
        width: auto;
    }
    .allwr-feedback-launcher { display: none; }
    .allwr-feedback-panel__sheet { width: 100vw; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .allwr-feedback-toast,
    .allwr-feedback-panel__scrim,
    .allwr-feedback-panel__sheet,
    .allwr-feedback__btn,
    .allwr-feedback-launcher { transition-duration: 0.01ms; }
    .allwr-feedback-toast { transform: none; }
    .allwr-feedback-panel__sheet { transform: none; }
    .allwr-feedback-panel:not(.is-open) .allwr-feedback-panel__sheet { visibility: hidden; }
    .allwr-feedback__btn:is(:hover, :focus-visible, :active),
    .allwr-feedback-launcher:is(:hover, :focus-visible, :active) { transform: none !important; }
}