/* ============================================================================
   redesign-components.css  —  capa de componentes canónicos .ss-* (clean/iOS)
   ----------------------------------------------------------------------------
   Parte del rediseño del dashboard (ver Redesign/Plan.md + Redesign/design-system/).
   Carga DESPUÉS de design-tokens.css. Token-driven (cero hex/rgba sueltos),
   sin `transition: all`, sin selectores globales agresivos / [class*=],
   sin `!important`, blur/backdrop solo en overlays.
   Las clases solo aplican donde se usan (F2..N); este archivo es inerte
   mientras los markups no las referencien.
   Batch 1 (F1): tipografía, botones, switch, inputs/select/stepper, pill/chip/
   segment, card + row. Batch 2 (con sus vistas): sheet/modal, skeleton/empty/
   error/banner, toast, iconos.
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   Tipografía (roles)
   ────────────────────────────────────────────────────────────────────────── */
.ss-label {
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: var(--ss-leading-snug);
    color: var(--ss-text-muted);
}
.ss-value {
    font-weight: var(--ss-weight-semibold);
    line-height: var(--ss-leading-tight);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    color: var(--ss-text);
}
.ss-body {
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-weight-regular);
    line-height: var(--ss-leading-normal);
    color: var(--ss-text-secondary);
}
/* Contenedores de datos: números tabulares (tablas, KPIs, valores) */
.ss-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ──────────────────────────────────────────────────────────────────────────
   Botones — .ss-btn (+ variantes + tamaños)
   ────────────────────────────────────────────────────────────────────────── */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss-space-2);
    box-sizing: border-box;
    min-height: var(--ss-tap-min);
    padding: 0 var(--ss-space-4);
    border: 1px solid transparent;
    border-radius: var(--ss-r-control);
    font-family: inherit;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--ss-dur-fast) var(--ss-ease),
                border-color var(--ss-dur-fast) var(--ss-ease),
                color var(--ss-dur-fast) var(--ss-ease),
                box-shadow var(--ss-dur-fast) var(--ss-ease),
                transform var(--ss-dur-fast) var(--ss-ease);
}
.ss-btn:focus-visible {
    outline: none;
    box-shadow: var(--ss-focus-ring);
}
.ss-btn:active { transform: scale(0.97); }
.ss-btn[disabled],
.ss-btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}
.ss-btn[aria-busy="true"] { pointer-events: none; }

/* tamaños */
.ss-btn--sm { min-height: 32px; padding: 0 var(--ss-space-3); font-size: var(--ss-text-xs); }
.ss-btn--md { min-height: 38px; }                 /* default */
.ss-btn--lg { min-height: 44px; font-size: 15px; }

/* variantes */
.ss-btn--primary {
    background: var(--ss-grad-accent);
    color: var(--ss-on-accent);
}
.ss-btn--primary:hover { box-shadow: var(--ss-shadow-glow-sm); }
.ss-btn--accent-soft {
    background: var(--ss-green-dim);
    color: var(--ss-green);
    border-color: var(--ss-border-accent);
}
.ss-btn--accent-soft:hover { border-color: var(--ss-green); }
.ss-btn--secondary {
    background: transparent;
    color: var(--ss-text);
    border-color: var(--ss-border);
}
.ss-btn--secondary:hover { background: var(--ss-bg-hover); border-color: var(--ss-border-hover); }
.ss-btn--danger {
    background: var(--ss-red-dim);
    color: var(--ss-red);
    border-color: var(--ss-red-dim);
}
.ss-btn--danger:hover { border-color: var(--ss-red); }
/* ghost = link/acción terciaria inline (control secundario → no se fuerza 44px;
   WCAG 2.2 permite <44 inline). Para CTAs táctiles usar primary/secondary. */
.ss-btn--ghost {
    background: transparent;
    color: var(--ss-text-secondary);
    min-height: 0;
    padding: var(--ss-space-1) var(--ss-space-2);
}
.ss-btn--ghost:hover { color: var(--ss-text); }

/* loading: el JS pone aria-busy="true"; mostramos un spinner y el label baja a 0 opacidad
   (el ancho del botón no salta). El consumidor agrega <span class="ss-btn__spinner"> al markup. */
.ss-btn[aria-busy="true"] .ss-btn__label { opacity: 0; }
.ss-btn__spinner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ss-spin 0.6s linear infinite;
}
.ss-btn { position: relative; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-btn--icon {
    width: var(--ss-tap-min);
    height: var(--ss-tap-min);
    padding: 0;
    color: var(--ss-text-secondary);
    border-color: var(--ss-border);
    background: transparent;
}
.ss-btn--icon:hover { color: var(--ss-text); border-color: var(--ss-border-hover); background: var(--ss-bg-hover); }

/* ──────────────────────────────────────────────────────────────────────────
   Switch iOS — .ss-switch (track + knob). role="switch" + aria-checked en el JS.
   Anima transform del knob (no left/width).
   ────────────────────────────────────────────────────────────────────────── */
.ss-switch {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    box-sizing: border-box;
    width: var(--ss-switch-w);
    height: var(--ss-switch-h);
    padding: 0;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-pill);
    background: var(--ss-bg-elevated);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color var(--ss-dur-normal) var(--ss-ease),
                border-color var(--ss-dur-normal) var(--ss-ease);
}
.ss-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: var(--ss-switch-knob);
    height: var(--ss-switch-knob);
    border-radius: 50%;
    background: var(--ss-knob-bg);
    box-shadow: var(--ss-knob-shadow);
    transform: translateY(-50%);
    transition: transform var(--ss-dur-normal) var(--ss-ease);
}
.ss-switch[aria-checked="true"] {
    background: var(--ss-green);
    border-color: var(--ss-green);
}
.ss-switch[aria-checked="true"]::after { transform: translate(var(--ss-switch-travel), -50%); }
.ss-switch:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); }
.ss-switch[disabled], .ss-switch[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
/* compacto para filas densas de settings */
.ss-switch--compact { width: 44px; height: 26px; }
.ss-switch--compact::after { width: 22px; height: 22px; }
.ss-switch--compact[aria-checked="true"]::after { transform: translate(18px, -50%); }

/* ──────────────────────────────────────────────────────────────────────────
   Inputs / select / stepper
   ────────────────────────────────────────────────────────────────────────── */
.ss-input, .ss-select {
    box-sizing: border-box;
    min-height: 38px;
    width: 100%;
    padding: var(--ss-space-2) var(--ss-space-3);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-field);
    background: var(--ss-bg-elevated);
    color: var(--ss-text);
    font-family: inherit;
    font-size: var(--ss-text-sm);
    line-height: 1.2;
    transition: border-color var(--ss-dur-fast) var(--ss-ease),
                box-shadow var(--ss-dur-fast) var(--ss-ease);
}
.ss-input::placeholder { color: var(--ss-text-muted); }
.ss-input:focus, .ss-select:focus,
.ss-input:focus-visible, .ss-select:focus-visible {
    outline: none;
    border-color: var(--ss-border-accent);
    box-shadow: var(--ss-focus-ring);
}
.ss-input[disabled], .ss-select[disabled] { opacity: 0.5; pointer-events: none; }
/* estado de error (lo setea el JS con .is-error + texto debajo) */
.ss-input.is-error { border-color: var(--ss-red); }
.ss-input.is-success { border-color: var(--ss-green); }
.ss-input:read-only, .ss-input[readonly] { opacity: 0.7; cursor: default; }
.ss-field-error { margin-top: var(--ss-space-1); font-size: 11px; color: var(--ss-red-light); }
/* inputs nativos de fecha/hora/number en ambos temas */
.ss-input[type="time"], .ss-input[type="date"], .ss-input[type="number"] { color-scheme: light dark; }

.ss-stepper { display: inline-flex; align-items: center; gap: var(--ss-space-1); }
.ss-stepper > .ss-input { width: 64px; text-align: center; }

/* ──────────────────────────────────────────────────────────────────────────
   Pills / chips / segmented
   ────────────────────────────────────────────────────────────────────────── */
.ss-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    padding: 6px 12px;
    border-radius: var(--ss-r-chip);
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-weight-semibold);
    line-height: 1;
    /* color de fondo/texto los setea el JS desde STATUS_CONFIG / tokens de fase */
}
.ss-chip {
    /* [C] filtro = control secundario denso: alto visual ~32px (no se fuerza 44px
       para no recargar barras de muchos chips). Para touch, agrandar hit-area con
       ::after por uso si hace falta (WCAG 2.2 permite <44 en secundarios inline). */
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-1);
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-chip);
    background: transparent;
    color: var(--ss-text-secondary);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: var(--ss-weight-semibold);
    cursor: pointer;
    transition: background-color var(--ss-dur-fast) var(--ss-ease),
                border-color var(--ss-dur-fast) var(--ss-ease),
                color var(--ss-dur-fast) var(--ss-ease);
}
.ss-chip:hover { border-color: var(--ss-border-hover); color: var(--ss-text); }
.ss-chip:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); }
.ss-chip[aria-pressed="true"] {
    background: var(--ss-green-dim);
    color: var(--ss-green);
    border-color: var(--ss-border-accent);
}
/* [C] Signal Board (2026-06-18): toggle-pills cuyo estado activo lo maneja el JS
   via classList.toggle('st-active') (NO aria-pressed) — status/tier/anomaly + sb-chip.
   Mismo aspecto activo que [aria-pressed=true]. El CSS responde a la clase; el JS la
   togglea (no se toca su lógica). Mismo criterio que .al-preset-card.is-active. */
.ss-chip.st-active {
    background: var(--ss-green-dim);
    color: var(--ss-green);
    border-color: var(--ss-border-accent);
}
/* [C] Variante SEMÁNTICA del chip de filtro (Signal Board Advanced Filters:
   status / tier / risk-flags). El JS NO inyecta estilo inline: solo setea las
   custom props --chip-fg/--chip-bg/--chip-border (desde tokens) por chip y
   togglea .st-active. El color identifica la categoría siempre; activo lo
   intensifica (bg-dim + borde). Cae a verde si no hay vars. Va DESPUÉS de
   .ss-chip.st-active para ganarle por orden (misma especificidad). */
.ss-chip--semantic { color: var(--chip-fg, var(--ss-text-secondary)); }
/* [C] Preservar el color de categoría en hover (.ss-chip:hover fuerza --ss-text). */
.ss-chip--semantic:hover { color: var(--chip-fg, var(--ss-text-secondary)); border-color: var(--ss-border-hover); }
.ss-chip--semantic.st-active {
    background: color-mix(in srgb, var(--chip-fg, var(--ss-green)) 14%, transparent);
    color: var(--chip-fg, var(--ss-green));
    border-color: color-mix(in srgb, var(--chip-fg, var(--ss-green)) 45%, transparent);
}

.ss-segment {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--ss-r-segment);
    background: var(--ss-bg-elevated);
    gap: 2px;
}
.ss-segment__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 var(--ss-space-3);
    border: none;
    border-radius: calc(var(--ss-r-segment) - 3px);
    background: transparent;
    color: var(--ss-text-muted);
    font-family: inherit;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-weight-medium);
    cursor: pointer;
    transition: color var(--ss-dur-fast) var(--ss-ease), background-color var(--ss-dur-fast) var(--ss-ease);
}
.ss-segment__item:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); }
.ss-segment__item[aria-selected="true"], .ss-segment__item.is-active {
    background: var(--ss-bg-surface);
    color: var(--ss-text);
    box-shadow: var(--ss-shadow-card);
}

/* ──────────────────────────────────────────────────────────────────────────
   Cards (3 niveles) + inset rows
   ────────────────────────────────────────────────────────────────────────── */
.ss-card {
    box-sizing: border-box;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-card);
    background: var(--ss-bg-surface);
    box-shadow: var(--ss-elev-card);
    padding: var(--ss-space-4);
}
.ss-card--alt { background: var(--ss-bg-surface-alt); }
.ss-card--clickable { cursor: pointer; transition: border-color var(--ss-dur-fast) var(--ss-ease), box-shadow var(--ss-dur-fast) var(--ss-ease); }
.ss-card--clickable:hover { border-color: var(--ss-border-hover); box-shadow: var(--ss-shadow-glow-sm); }
.ss-card__item {
    border-radius: var(--ss-r-card-in);
    background: var(--ss-bg-hover);
    padding: var(--ss-space-3);
}

.ss-row {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    min-height: var(--ss-tap-min);
    padding: var(--ss-space-3) var(--ss-space-4);
    border-bottom: 1px solid var(--ss-border);
    color: var(--ss-text);
    text-align: left;
    background: transparent;
}
.ss-row:last-child { border-bottom: none; }
button.ss-row, a.ss-row { width: 100%; border-left: none; border-right: none; border-top: none; font-family: inherit; cursor: pointer; transition: background-color var(--ss-dur-fast) var(--ss-ease); }
button.ss-row:hover, a.ss-row:hover { background: var(--ss-bg-hover); }
button.ss-row:focus-visible, a.ss-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ss-border-accent); }
.ss-row__main { flex: 1; min-width: 0; }
.ss-row__chevron { color: var(--ss-text-faint); flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   .ss-menu — dropdown de navegacion (hamburger). Contenedor flotante (NO card):
   bg-elevated + elevacion de dropdown + radio interno. Items hover-only (no divisor
   por item), separadores de grupo como elementos reales (.ss-menu__sep, role=separator).
   ────────────────────────────────────────────────────────────────────────── */
.ss-menu {
    box-sizing: border-box;
    background: var(--ss-bg-elevated);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-card-in);
    box-shadow: var(--ss-elev-dropdown);
    padding: var(--ss-space-1);
}
.ss-menu__label {
    font-size: var(--ss-text-xs);
    font-weight: var(--ss-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ss-text-muted);
    padding: var(--ss-space-2) var(--ss-space-3) var(--ss-space-1);
}
.ss-menu__sep { height: 1px; background: var(--ss-border); margin: var(--ss-space-1) 0; border: none; }
.ss-menu-item {
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    width: 100%;
    min-height: 40px;
    padding: var(--ss-space-2) var(--ss-space-3);
    border: none;
    border-radius: var(--ss-r-control);
    background: transparent;
    color: var(--ss-text-secondary);
    font-family: inherit;
    font-size: var(--ss-text-sm);
    font-weight: var(--ss-weight-medium);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ss-dur-fast) var(--ss-ease), color var(--ss-dur-fast) var(--ss-ease);
}
.ss-menu-item:hover { background: var(--ss-bg-hover); color: var(--ss-text); }
.ss-menu-item:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); }
.ss-menu-item.active { color: var(--ss-green); background: var(--ss-green-dim); }   /* el tab actual (la JS togglea .active) */
.ss-menu-item .ss-icon { color: var(--ss-text-muted); }
.ss-menu-item:hover .ss-icon, .ss-menu-item.active .ss-icon { color: inherit; }

/* ──────────────────────────────────────────────────────────────────────────
   prefers-reduced-motion: NO se honra (decision de producto 2026-07-10).
   Las animaciones/transiciones corren identicas para todos.
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   Batch 2 — overlays, estados, feedback
   (focus-trap / scroll-lock / Escape / restore-focus los maneja el JS al usarlos;
   acá va la capa visual). Specs: Redesign/design-system/componentes.md
   ────────────────────────────────────────────────────────────────────────── */

/* Backdrop de overlay (modal/sheet). Glass solo acá (overlay), permitido. */
.ss-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ss-space-4);
    background: var(--ss-overlay-bg);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
}
/* Modal centrado (desktop) */
.ss-modal {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-modal);
    background: var(--ss-bg-elevated);
    box-shadow: var(--ss-elev-modal);
    animation: ss-modal-in var(--ss-dur-normal) var(--ss-ease);
}
@keyframes ss-modal-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* Header / footer / body del modal. El .ss-modal es overflow:hidden flex-col;
   __body es el único hijo que scrollea; __head/__foot fijos con superficie de contraste. */
.ss-modal__head,
.ss-modal__foot {
    flex-shrink: 0;
    background: var(--ss-bg-surface);
}
.ss-modal__head { border-bottom: 1px solid var(--ss-border); }
.ss-modal__foot { border-top: 1px solid var(--ss-border); }
.ss-modal__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Delete dentro del modal de alerts: icon button semánticamente destructivo (rojo en hover). */
.al-mine-delete.ss-btn--icon:hover { color: var(--ss-red-light); border-color: var(--ss-red); }

/* Bottom sheet (móvil) */
.ss-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    box-sizing: border-box;
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top-left-radius: var(--ss-r-sheet);
    border-top-right-radius: var(--ss-r-sheet);
    background: var(--ss-bg-elevated);
    box-shadow: var(--ss-elev-sheet);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: ss-sheet-in var(--ss-dur-normal) var(--ss-ease);
}
@keyframes ss-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.ss-sheet__grabber {
    width: var(--ss-sheet-grabber-w);
    height: var(--ss-sheet-grabber-h);
    border-radius: var(--ss-r-pill);
    background: var(--ss-text-faint);
    margin: var(--ss-space-2) auto;
    flex-shrink: 0;
}

/* Skeleton (shimmer) */
.ss-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--ss-bg-hover);
    border-radius: var(--ss-r-card-in);
}
.ss-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--ss-skeleton-shine), transparent);
    animation: ss-shimmer 1.4s infinite;
}
@keyframes ss-shimmer { to { transform: translateX(100%); } }

/* Empty / error / banner */
.ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ss-space-3);
    padding: var(--ss-space-8) var(--ss-space-4);
    color: var(--ss-text-secondary);
}
.ss-empty__icon { color: var(--ss-text-muted); }
.ss-error { color: var(--ss-red-light); }
.ss-banner {
    padding: var(--ss-space-2) var(--ss-space-4);
    font-size: var(--ss-text-xs);
    line-height: var(--ss-leading-snug);
}
.ss-banner--warn  { background: var(--ss-amber-dim); color: var(--ss-amber-light); }
.ss-banner--error { background: var(--ss-red-dim);   color: var(--ss-red-light); }

/* Toast */
.ss-toast {
    position: fixed;
    z-index: 1100;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ss-space-5));
    transform: translateX(-50%);
    max-width: calc(100vw - var(--ss-space-8));
    padding: var(--ss-space-3) var(--ss-space-4);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-control);
    background: var(--ss-bg-elevated);
    box-shadow: var(--ss-elev-dropdown);
    color: var(--ss-text);
    font-size: var(--ss-text-sm);
}

/* Icon sizing helper (SVG inline hereda currentColor) */
.ss-icon { display: inline-flex; flex-shrink: 0; }
.ss-icon svg { width: 100%; height: 100%; display: block; }
.ss-icon--16 { width: 16px; height: 16px; }
.ss-icon--20 { width: 20px; height: 20px; }
.ss-icon--24 { width: 24px; height: 24px; }

/* [C] T1.3 (2026-06-18): badge "Soon" para acciones aún no implementadas.
   Honesto: el control queda visible pero claramente marcado como no disponible.
   Tokenizado (amber-dim + amber-light). Va inline dentro del label del botón. */
.ss-soon-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--ss-space-2);
    padding: 1px 6px;
    border-radius: var(--ss-r-pill);
    background: var(--ss-amber-dim);
    color: var(--ss-amber-light);
    font-size: 9px;
    font-weight: var(--ss-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
}

/* [C] Fase 1.5 (2026-07-10): badge "Pro" para features gateadas en el plan Free.
   Mismo shape que .ss-soon-badge pero verde (green-dim + green-light), consistente
   con el badge "PRO" del card de Plan & billing. Sin borde (badge = bg + texto). */
.ss-pro-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--ss-space-2);
    padding: 1px 6px;
    border-radius: var(--ss-r-pill);
    background: var(--ss-green-dim);
    color: var(--ss-green-light);
    font-size: 9px;
    font-weight: var(--ss-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
}

/* Preset card activo (Alerts) — ring de acento por estado */
.al-preset-card.is-active { border-color: var(--ss-border-accent); box-shadow: var(--ss-shadow-glow-sm); }
.al-preset-status { color: var(--ss-text-muted); }
.al-preset-status.is-active { color: var(--ss-green-light); }

/* ──────────────────────────────────────────────────────────────────────────
   Hamburger nav menu + icon button (#nav-hamburger-menu, #nav-hb-wrap)
   ----------------------------------------------------------------------------
   FIX: estas clases (.ed-icon-btn / .ed-menu*) vivían SOLO en
   editorial-overrides.css, que el rediseño dejó de linkear → el dropdown
   quedó sin layout (ítems superpuestos). Re-provistas acá tokenizadas
   (equivalentes a las originales; --ed-* mapeadas a tokens --ss-*). El markup
   conserva los nombres .ed-* (sin tocar contrato DOM). --ss-bg-elevated y
   --ss-border ya flipean por tema, así que cubren dark+light sin override.
   ────────────────────────────────────────────────────────────────────────── */
.ed-icon-btn {
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-md);
    transition: border-color var(--ss-dur-fast) var(--ss-ease), background var(--ss-dur-fast) var(--ss-ease), color var(--ss-dur-fast) var(--ss-ease);
}
.ed-icon-btn:hover {
    border-color: var(--ss-border-hover);
    background: var(--ss-bg-hover);
}
.ed-icon-btn[aria-expanded="true"] {
    border-color: var(--ss-border-accent);
    color: var(--ss-green-light);
    background: var(--ss-green-dim);
}
.ed-menu {
    background: var(--ss-bg-elevated);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r-lg);
    box-shadow: var(--ss-shadow-card);
    overflow: hidden;
    /* [C] guard anti-overflow en phones muy estrechos (Codex 2026-06-18); no-op en desktop */
    max-width: calc(100vw - 24px);
    animation: edMenuIn 0.18s var(--ss-ease);
}
@keyframes edMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ed-menu-section-label {
    padding: 10px 14px 6px;
    font-size: 9.5px;
    font-weight: var(--ss-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ss-text-muted);
}
.ed-menu-section-label:not(:first-child) {
    border-top: 1px solid var(--ss-border);
    margin-top: 4px;
}
.ed-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--ss-text-body);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background var(--ss-dur-fast) var(--ss-ease), color var(--ss-dur-fast) var(--ss-ease);
    line-height: 1.2;
}
.ed-menu-item:hover {
    background: var(--ss-bg-hover);
    color: var(--ss-text);
}
.ed-menu-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: var(--ss-text-muted);
    flex-shrink: 0;
}
.ed-menu-item:hover .ed-menu-icon {
    color: var(--ss-text);
}
/* [C] Signal Board quick chips: en mobile portrait / vistas angostas, distribuir
   en 2 columnas de ancho IGUAL (en vez del flex-wrap de ancho-contenido que deja
   filas irregulares). Approach Codex (bsnk7nj30): el contenedor ya es display:flex
   inline → no se puede pasar a grid sin !important, así que se usa flex-basis 50%.
   "Advanced Filters" ocupa fila completa. Bajo 360px → 1 columna (labels largos con
   white-space:nowrap no entran en media pantalla). NO toca el look por-botón (lo
   setea el JS inline); solo el layout del contenedor. Sin !important. */
@media (max-width: 520px) {
    #sb-chips { min-width: 0; }
    #sb-chips .sb-chip,
    #sb-chips #sb-adv-toggle {
        box-sizing: border-box;
        min-width: 0;
        width: auto;
        max-width: none;
        justify-content: center;
        text-align: center;
    }
    #sb-chips .sb-chip {
        flex: 0 1 calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
    }
    #sb-chips #sb-adv-toggle {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* [C] 1-col bajo 390px: medido (chrome-devtools) el chip más ancho ("Quiet
   Accumulation") = 163px natural; a 360px la celda 2-up es ~152px → overflow con
   nowrap. A ≥390px la celda (~167px) ya lo contiene. Por eso 1-col ≤389 (no el 359
   de Codex, que dejaba una banda de overflow 360-389). */
@media (max-width: 389px) {
    #sb-chips .sb-chip,
    #sb-chips #sb-adv-toggle {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* [C] T2.2 (2026-06-18): filas de Eligibility Thresholds (eTh) en phones angostos.
   Cada fila #e-*-wrap es flex-wrap:wrap [switch][label 130px][control steppers+input].
   Bajo 390px el trío queda apretado; bajamos el control (steppers + input) a su
   propia línea full-width. NO se toca eTh ni .eth-sw ni IDs/onclick; solo layout.
   El control div es el único hijo del wrap SIN class (eth-sw y eth-desc sí tienen),
   y su único estilo inline es flex-shrink:0 (sin flex-basis) → flex-basis:100% lo
   empuja a su línea sin necesitar !important. Selector e-*-wrap ⇒ solo las 8 filas
   de eligibility (ec-mode-wrap NO matchea [id^="e-"]). */
@media (max-width: 389px) {
    div[id^="e-"][id$="-wrap"] > div:not([class]) {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-top: 2px;
    }
}

/* [C] T2.3 (2026-06-18): fila "Type DELETE + Delete permanently" (Settings → Privacy)
   desbordaba a 320-390px. El markup ya pasa a flex-wrap + input flex:1 1 120px;min-width:0.
   Bajo 420px el botón "Delete permanently" pasa a su línea, full-width. El botón solo
   tiene flex-shrink:0 inline (sin flex-basis/width) → flex-basis/width desde CSS aplican
   sin !important. Selector por id estable; sin tocar la lógica de borrado. */
@media (max-width: 420px) {
    .acct-del-row > #acct-delete-confirm {
        flex-basis: 100%;
        width: 100%;
    }
}