/* ============================================================================
 * Studio web — uStreamers
 * ============================================================================
 *
 * Los tokens de color son los de /panel/panel.css (mismo producto, misma paleta). Tres
 * columnas (barra lateral · formulario · vista previa) a partir de 1100 px; por debajo, la barra
 * lateral pasa a un menú, y por debajo de 900 px la vista previa baja debajo del formulario.
 *
 * Tema: sigue al sistema (prefers-color-scheme) y se puede forzar con html[data-theme]. Nada de
 * estilos inline en el HTML ni en el JS (la CSP no los admite): lo dinámico entra por clases y por
 * custom properties escritas con style.setProperty.
 *
 * Contraste AA: el texto atenuado (--text-muted) y los controles se eligieron para llegar a 4.5:1
 * sobre su fondo en los dos temas. Todo es navegable con teclado y tiene foco visible.
 * ========================================================================= */

:root {
    --bg: #0b0b0e;
    --surface: #121217;
    --surface-raised: #181820;
    --surface-highlight: #22222d;
    --border: #2c2c3b;
    --border-strong: #40405a;

    --text: #ffffff;
    --text-muted: #a8a8ba;
    --text-faint: #8a8a9e;

    --accent: #ff68c8;
    --accent-ink: #1a0a14;
    --accent-soft: rgba(255, 104, 200, 0.14);
    --danger: #ff6b86;
    --danger-ink: #1a0a0e;
    --ok: #3ddc84;
    --warn: #ffb84d;
    --info: #6ab7ff;
    --twitch: #a970ff;
    --kick: #53fc18;
    --focus: #8fd0ff;

    --radius: 10px;
    --radius-sm: 6px;
    --sidebar-w: 264px;
    --preview-w: 380px;
    font-size: 15px;
    color-scheme: dark;
}

/* Claro: por preferencia del sistema (si no se forzó oscuro)... */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #f4f4f7;
        --surface: #ffffff;
        --surface-raised: #f7f7fa;
        --surface-highlight: #ebebf0;
        --border: #dcdce4;
        --border-strong: #b9b9c8;
        --text: #15151c;
        --text-muted: #55556a;
        --text-faint: #6f6f84;
        --accent: #c41f8a;
        --accent-ink: #ffffff;
        --accent-soft: rgba(196, 31, 138, 0.1);
        --danger: #c81e3f;
        --danger-ink: #ffffff;
        --ok: #12803f;
        --warn: #9a5b00;
        --info: #0b62b8;
        --twitch: #6a22d9;
        --kick: #0b7a0c;
        --focus: #0b62b8;
        color-scheme: light;
    }
}

/* ...o forzado por el selector de tema. */
:root[data-theme="light"] {
    --bg: #f4f4f7;
    --surface: #ffffff;
    --surface-raised: #f7f7fa;
    --surface-highlight: #ebebf0;
    --border: #dcdce4;
    --border-strong: #b9b9c8;
    --text: #15151c;
    --text-muted: #55556a;
    --text-faint: #6f6f84;
    --accent: #c41f8a;
    --accent-ink: #ffffff;
    --accent-soft: rgba(196, 31, 138, 0.1);
    --danger: #c81e3f;
    --danger-ink: #ffffff;
    --ok: #12803f;
    --warn: #9a5b00;
    --info: #0b62b8;
    --twitch: #6a22d9;
    --kick: #0b7a0c;
    --focus: #0b62b8;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

kbd {
    font: inherit; font-size: 0.78rem; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; opacity: 0.8;
}

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

.visually-hidden, .offscreen {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 8px; }

.boot-loading, .noscript { padding: 40px; text-align: center; color: var(--text-muted); }

/* ═══ Botones ═════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface-raised); color: var(--text); cursor: pointer; font-weight: 600; text-decoration: none; line-height: 1.2;
}
.btn:hover:not(:disabled) { background: var(--surface-highlight); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }
.btn--ghost { background: transparent; }
.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.btn--danger.btn--ghost { background: transparent; color: var(--danger); }
.btn--small { min-height: 32px; padding: 4px 12px; font-size: 0.9rem; }
.btn--icon { min-width: 40px; padding: 8px; }
.btn kbd { margin-left: 4px; }

/* ═══ Cáscara: tres columnas ═════════════════════════════════════════════ */

.studio {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--preview-w);
    grid-template-areas: "side main prev";
    min-height: 100vh;
}
.studio:has(.preview-col[hidden]) { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-areas: "side main"; }

.topbar { display: none; }

.sidebar {
    grid-area: side; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px; padding: 18px 12px;
    background: var(--surface); border-right: 1px solid var(--border);
}

.main { grid-area: main; min-width: 0; padding: 24px clamp(16px, 3vw, 40px) 32px; outline: none; }

.preview-col {
    grid-area: prev; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
    padding: 24px 20px; background: var(--surface); border-left: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 14px;
}

.sidebar__id { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.avatar {
    position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-weight: 700; overflow: hidden;
}
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sidebar__who { min-width: 0; }
.sidebar__who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.chip { font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.chip--twitch { color: var(--twitch); }
.chip--kick { color: var(--kick); }
.chip--plus { color: var(--accent); }
/* MAX incluye Plus+: mismo color, pero relleno para que se distinga de un vistazo. */
.chip--max { color: var(--accent); background: var(--accent-soft); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav__group { margin-top: 12px; }
.nav__group-title { display: block; padding: 0 10px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.nav__sub { display: flex; flex-direction: column; gap: 1px; }
.nav__link {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; font-weight: 500;
}
.nav__link:hover { background: var(--surface-highlight); }
.nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__pill { display: inline-flex; gap: 4px; align-items: center; flex: none; }
/* Estado en la barra lateral: un punto (verde ok, ámbar falta activar, gris apagado). Plus+ y "Pronto" quedan chicos. */
.nav__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.nav__dot--connected { color: var(--ok); }
.nav__dot--needs { color: var(--warn); }
.nav__dot--off, .nav__dot--locked, .nav__dot--soon { color: var(--text-muted); }
.nav__pill .pill { font-size: 0.64rem; padding: 0 6px; }
.secret-form { display: contents; } /* <form> sólo para contener el campo de contraseña; no toca el diseño */
.nav__lock { width: 1em; height: 1em; opacity: 0.7; }

.sidebar__foot { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.device { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; color: var(--text-muted); padding: 0 6px; }
.device small { flex-basis: 100%; padding-left: 26px; }
.sidebar__tools { display: flex; gap: 6px; }
.sidebar__tools .input { flex: 1; min-width: 0; }

/* ═══ Pastillas, etiquetas y avisos ══════════════════════════════════════ */

.pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
    border: 1px solid currentColor; white-space: nowrap; line-height: 1.5;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--connected { color: var(--ok); }
.pill--needs { color: var(--warn); }
.pill--off, .pill--locked, .pill--soon { color: var(--text-muted); }
.pill--plus { color: var(--accent); }
/* Datos (plantilla predeterminada, sorteo verificable): azul, para no confundirse con el sello Plus+. */
.pill--info { color: var(--info); }
.pill--plus::before, .pill--locked::before, .pill--soon::before { display: none; }

.badge { font-size: 0.68rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; margin-left: 8px; vertical-align: 1px; }
.badge--plus { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }

.band {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: var(--surface-raised); margin-bottom: 14px;
}
.band__text { flex: 1 1 260px; }
.band__actions { display: flex; gap: 8px; }
.band--warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.band--error { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.band--info { border-color: var(--info); background: color-mix(in srgb, var(--info) 10%, var(--surface)); }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-raised);
    border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.toast--ok { border-color: var(--ok); }
.toast--error { border-color: var(--danger); }

.error-text { color: var(--danger); }
.error-code { color: var(--text-muted); }

/* ═══ Sección ═════════════════════════════════════════════════════════════ */

.section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section__title { font-size: 1.6rem; line-height: 1.2; }
.section__subtitle { color: var(--text-muted); margin-top: 4px; }
.section__intro { color: var(--text-muted); margin-bottom: 14px; max-width: 70ch; }
.section__loading { color: var(--text-muted); padding: 24px 0; }
.section__error { padding: 16px; border: 1px solid var(--danger); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.section { max-width: 860px; }
.section__body { display: flex; flex-direction: column; gap: 14px; }

.card { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.card__title { font-size: 1.05rem; }

.soon { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-muted); }
.soon__title { color: var(--text); font-size: 1.2rem; }

/* «¿Cómo usar?»: el mini tutorial plegable al final de una sección (ui.js howToCard) */
.howto { margin-top: 18px; }
.howto__summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.howto__summary::-webkit-details-marker { display: none; }
.howto__summary::after { content: "▸"; margin-left: auto; color: var(--text-muted); transition: transform 0.15s ease; }
.howto[open] > .howto__summary::after { transform: rotate(90deg); }
.howto__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.howto__summary .icon { color: var(--accent); flex: none; }
.howto__intro { color: var(--text-muted); max-width: 70ch; }
.howto__block { display: flex; flex-direction: column; gap: 6px; }
.howto__heading { font-size: 0.95rem; }
.howto__list { margin: 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); max-width: 75ch; }
.howto__list--steps { list-style: decimal; }
.howto__list li::marker { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .howto__summary::after { transition: none; } }

/* ═══ Formularios ═════════════════════════════════════════════════════════ */

.form__body { display: flex; flex-direction: column; }
.tabpanel { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 12px; }

/* Barra fina visible: en pantallas angostas las últimas pestañas quedan fuera y sin ella no hay
   pista de que se puede desplazar. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; overflow-x: auto; scrollbar-width: thin; }
.tab {
    padding: 10px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab--dirty::after { content: " •"; color: var(--warn); }

.field {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; border-left: 3px solid transparent;
}
.field--dirty { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, transparent); }
.field--invalid { border-left-color: var(--danger); }
.field--flash { animation: flash 2.2s ease-out 1; }
@keyframes flash { 0%, 40% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); } 100% { background: transparent; box-shadow: none; } }
.field--disabled > .field__head, .field--disabled > .field__control, .field--disabled > .switch, .field--disabled > .segmented, .field--disabled > .checks { opacity: 0.55; }
.field--heading { font-size: 1rem; margin-top: 14px; padding-bottom: 0; border: 0; }
.field--info { flex-direction: row; gap: 10px; align-items: flex-start; background: var(--surface-raised); border: 1px solid var(--border); }
.field--info.info--warn { border-color: var(--warn); }
.info__body p + p { margin-top: 6px; }

.field__head { display: flex; align-items: center; }
.field__label { font-weight: 600; }
.field__control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field__help { font-size: 0.88rem; color: var(--text-muted); max-width: 70ch; }
.field__hint { font-size: 0.85rem; color: var(--text-muted); }
.field__note { font-size: 0.88rem; color: var(--warn); }
.field__error { font-size: 0.88rem; color: var(--danger); font-weight: 600; }

/* "?" translúcido junto a la etiqueta; el cartel flota sobre el control (hover o toque). */
.field__head--tip { position: relative; gap: 6px; }
.help-tip__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid currentColor; border-radius: 50%;
    background: transparent; color: var(--text-muted); font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1; cursor: help; opacity: 0.55;
}
.help-tip__btn:hover, .help-tip__btn:focus-visible, .help-tip--open .help-tip__btn { opacity: 1; }
.help-tip__pop {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max-content; max-width: min(28rem, 100%); padding: 10px 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text);
    font-size: 0.85rem; font-weight: 400; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.help-tip--open .help-tip__pop { display: grid; gap: 6px; }
@media (hover: hover) { .help-tip:hover .help-tip__pop { display: grid; gap: 6px; } }
.help-tip__row { display: block; }

.input {
    min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); max-width: 100%;
}
.field__control > .input:not(.input--number):not(.input--select) { flex: 1 1 280px; }
.input--number { width: 140px; }
.input--select { padding-right: 28px; }
.input--small { min-height: 32px; padding: 4px 8px; }
.input--textarea { width: 100%; resize: vertical; }
.input:disabled { cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--danger); }

/* Interruptor. `position: relative` ancla el <input> oculto a su etiqueta: sin eso su caja se
   ubica respecto del primer ancestro posicionado (el <dialog> del editor de premios), queda lejos
   de donde se ve el interruptor y, al recibir el foco, el navegador desplaza el diálogo entero
   para "mostrarlo" y el panel queda vacío. */
.switch { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; width: 44px; height: 24px; flex: none; border-radius: 999px; background: var(--border-strong); transition: background 0.15s; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: 0.6; }
.switch input:disabled ~ .switch__label { cursor: not-allowed; }

/* Botones segmentados (radio) */
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented__item { position: relative; cursor: pointer; }
.segmented__item span { display: block; padding: 8px 16px; font-weight: 600; background: var(--surface-raised); border-right: 1px solid var(--border-strong); }
.segmented__item:last-child span { border-right: 0; }
.segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented__input:checked + span { background: var(--accent); color: var(--accent-ink); }
.segmented__input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.segmented__input:disabled + span { cursor: not-allowed; }

/* Casillas múltiples */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Control deslizante */
.field__control--slider { flex-wrap: nowrap; }
.slider {
    -webkit-appearance: none; appearance: none; flex: 1; min-width: 160px; height: 6px; border-radius: 999px; --fill: 0%;
    background: linear-gradient(to right, var(--accent) var(--fill), var(--border-strong) var(--fill));
}
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); cursor: pointer; }
.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); cursor: pointer; }
.slider:disabled { opacity: 0.5; }
.slider__value { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Filas editables */
.rows__list { display: flex; flex-direction: column; gap: 8px; }
.rows__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rows__row .input { flex: 1 1 160px; }
.rows__actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

/* ═══ Barra de guardado ═══════════════════════════════════════════════════ */

.savebar {
    position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
    margin-top: 18px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--warn);
    background: var(--surface-raised); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.savebar__info { display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
.savebar__error { color: var(--danger); font-weight: 600; font-size: 0.9rem; }
.savebar__actions { display: flex; gap: 8px; }

/* ═══ Inicio ══════════════════════════════════════════════════════════════ */

.home__greeting { font-size: 1.1rem; color: var(--text-muted); }
.checklist__list { display: flex; flex-direction: column; gap: 8px; }
.checklist__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.checklist__item--pending { border-color: var(--warn); }
.checklist__mark { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); }
.checklist__item--done .checklist__mark { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.checklist__item--pending .checklist__mark { border-color: var(--warn); }
.checklist__text { flex: 1; min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.summary {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
    color: var(--text); text-decoration: none;
}
.summary:hover { border-color: var(--accent); }
.summary__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.summary__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.summary__pill { margin-top: 4px; align-self: flex-start; }
.summary__text { font-size: 0.85rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ Enlaces de OBS (tapados) ═══════════════════════════════════════════ */

.links { display: flex; flex-direction: column; gap: 14px; }
.secret-link { display: flex; flex-direction: column; gap: 4px; }
.secret-link__label { font-weight: 600; }
.secret-link__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.secret-link__url {
    flex: 1 1 260px; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; overflow-wrap: anywhere;
}
.secret-link__actions { display: flex; gap: 6px; }
.secret-link__note { font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; }

/* ═══ Candado (sólo en el teléfono) ══════════════════════════════════════ */

.locked-list { display: flex; flex-direction: column; gap: 10px; }
.locked-card {
    display: flex; gap: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px dashed var(--border-strong);
    background: color-mix(in srgb, var(--text-muted) 8%, var(--surface));
}
.locked-card__icon { color: var(--text-muted); padding-top: 2px; }
.locked-card__title { font-size: 1rem; }
.locked-card__body { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); }
.locked-card__body .locked-card__title { color: var(--text); }
.locked-card__path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--text); }

.readlist { display: flex; flex-direction: column; }
.readlist__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.readlist__item:last-child { border-bottom: 0; }

/* ═══ Tops ════════════════════════════════════════════════════════════════ */

.tops { display: flex; flex-direction: column; gap: 10px; counter-reset: top; }
.tops__item { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.tops__item--off { opacity: 0.8; }
.tops__order { display: flex; flex-direction: column; gap: 4px; }
.tops__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tops__extra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ═══ ElevenLabs ══════════════════════════════════════════════════════════ */

.eleven { display: flex; flex-direction: column; gap: 10px; }
.eleven__status { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }
.eleven__form { display: flex; gap: 8px; flex-wrap: wrap; }
.eleven__form .input { flex: 1 1 260px; }
.eleven__guide { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; }
.eleven__guide summary { cursor: pointer; font-weight: 600; }
.eleven__guide ol { margin: 10px 0 10px 20px; list-style: decimal; display: flex; flex-direction: column; gap: 6px; }
.field--preview-voice { flex-direction: row; align-items: center; gap: 10px; }

/* ═══ Vista previa ════════════════════════════════════════════════════════ */

.preview { display: flex; flex-direction: column; gap: 10px; }
.preview__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
/* La altura acompaña a la de la ventana: fija en 420 px ocupaba casi toda una notebook de 720 px
   de alto y desperdiciaba un monitor vertical. */
.preview__stage { position: relative; height: clamp(280px, 46vh, 560px); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.preview__stage--dark { background: #0b0b0e; }
.preview__stage--light { background: #f1f1f5; }
.preview__stage--game { background: linear-gradient(135deg, #1d3557 0%, #5a2a7a 55%, #8a2f45 100%); }
/* color-scheme: light a propósito: si el iframe hereda el oscuro del Studio y la página del overlay no declara
   esquema, el navegador le pone un fondo opaco blanco al iframe y la vista previa deja de simular el lienzo de OBS. */
.preview__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light; }
/* Escena de OBS a escala (caja de alertas): la página mide 1920 × 1080 y se achica al ancho. */
.preview__stage--canvas { height: auto; aspect-ratio: 16 / 9; }
.preview__stage--canvas .preview__frame { inset: auto; top: 0; left: 0; width: 1920px; height: 1080px; transform: scale(var(--preview-scale, 0.16)); transform-origin: 0 0; }
.preview__bg { display: flex; gap: 6px; }
.preview__bg [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.preview__note { font-size: 0.85rem; color: var(--text-muted); }
.test-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.test-status { font-size: 0.88rem; color: var(--text-muted); min-height: 1.2em; }

/* ═══ Diálogos y buscador ═════════════════════════════════════════════════ */

.dialog { max-width: min(480px, calc(100vw - 32px)); padding: 22px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog__title { font-size: 1.15rem; margin-bottom: 8px; }
.dialog__body { color: var(--text-muted); }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.dialog--search { width: min(620px, calc(100vw - 32px)); margin-top: 12vh; padding: 0; }
.search__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.search__input { flex: 1; border: 0; background: transparent; min-height: 36px; }
.search__input:focus-visible { outline: none; }
.search__results { max-height: 50vh; overflow-y: auto; }
.search__item { display: flex; flex-direction: column; padding: 10px 16px; cursor: pointer; }
.search__item[aria-selected="true"] { background: var(--accent-soft); }
.search__context { font-size: 0.82rem; color: var(--text-muted); }
.search__empty, .search__hint { padding: 10px 16px; font-size: 0.85rem; color: var(--text-muted); }

/* ═══ Vinculación ═════════════════════════════════════════════════════════ */

.pairing-host, .pairing { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.pairing__card { width: min(760px, 100%); display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 4vw, 36px); border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.pairing__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--accent); }
.pairing__grid { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.pairing__qrbox { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 200px; }
.pairing__qr { width: 220px; height: 220px; image-rendering: pixelated; border-radius: 10px; background: #fff; }
.pairing__code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.7rem; font-weight: 800; letter-spacing: 0.1em; }
.pairing__countdown, .pairing__status { color: var(--text-muted); min-height: 1.3em; }
.pairing__title { font-size: 1.5rem; margin-bottom: 10px; }
.pairing__list { margin-left: 22px; list-style: decimal; display: flex; flex-direction: column; gap: 6px; }
.pairing__nocam { margin-top: 12px; color: var(--text-muted); }
.pairing__options { display: flex; flex-direction: column; gap: 8px; }
.pairing__options .field { padding: 6px 0; }
.pairing__safe { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.9rem; }
.pairing__manual { display: flex; flex-direction: column; gap: 4px; }
.pairing__lead { color: var(--text-muted); }
.pair-page { display: block; }

/* ═══ Responsive ══════════════════════════════════════════════════════════ */

/*
 * Por debajo de 1100 px la barra lateral pasa a un menú (barra de arriba + cajón): fija, le
 * quitaba 264 px al formulario justo donde menos ancho hay (tablet, monitor vertical de 1080).
 *   900–1099  formulario y vista previa lado a lado; la vista previa queda fija al desplazarse.
 *   < 900     la vista previa baja debajo del formulario.
 *   < 720     teléfono: la barra de arriba se achica.
 */
@media (max-width: 1099px) {
    :root { --preview-w: 340px; --topbar-h: 57px; }
    /* Lo que se enfoca o se busca con Ctrl+K no queda debajo de la barra de arriba. */
    html { scroll-padding-top: calc(var(--topbar-h) + 8px); }
    .studio { grid-template-columns: minmax(0, 1fr) var(--preview-w); grid-template-areas: "top top" "main prev"; grid-template-rows: auto 1fr; }
    .studio:has(.preview-col[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
    .topbar {
        grid-area: top; display: flex; align-items: center; gap: 10px; min-height: var(--topbar-h); padding: 8px 12px; position: sticky; top: 0; z-index: 30;
        background: var(--surface); border-bottom: 1px solid var(--border);
    }
    .topbar__title { flex: 1; font-weight: 800; }
    /* El cajón cerrado además se oculta (visibility): si no, Tab recorría sus enlaces fuera de la pantalla. */
    .sidebar {
        position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100vh; height: 100dvh; transform: translateX(-102%);
        visibility: hidden; transition: transform 0.18s ease-out, visibility 0s linear 0.18s; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    }
    .sidebar--open { transform: none; visibility: visible; transition: transform 0.18s ease-out; }
    /* Velo detrás del cajón abierto: un clic afuera lo cierra (main.js). */
    .studio:has(.sidebar--open)::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.5); }
    .preview-col { top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); }
}

@media (max-width: 899px) {
    .studio, .studio:has(.preview-col[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "prev"; grid-template-rows: auto auto auto; }
    /* La vista previa baja debajo del formulario. */
    .preview-col { position: static; height: auto; border-left: 0; border-top: 1px solid var(--border); background: var(--bg); padding: 20px clamp(16px, 3vw, 40px) 32px; }
    .preview__stage { height: clamp(240px, 38vh, 420px); }
}

@media (max-width: 719px) {
    .topbar__search span, .topbar__search kbd { display: none; }
    .pairing__grid { grid-template-columns: 1fr; }
    .section__head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══ discord ═══ */
.discord-status { display: flex; flex-direction: column; gap: 8px; }
.discord-status__line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.discord-webhook__current { font-size: 0.92rem; color: var(--text-muted); overflow-wrap: anywhere; }
.discord-intervalfield .discord-interval__notes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.discord-interval .segmented__input:disabled + span { opacity: 0.5; cursor: not-allowed; }
.discord-interval .segmented__input:checked:disabled + span { opacity: 0.75; }
.discord-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.discord-var { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.discord-preview { margin-top: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--border); }
.discord-preview__label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.discord-preview__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.discord-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.discord-actions__row { display: flex; flex-wrap: wrap; gap: 8px; }
.discord-actions__result { color: var(--text); }

/* ═══ discord: vincular cuenta, elegir canal, servidor y misión ═══ */
.discord-flow { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.discord-flow__status { margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.discord-flow__status:empty { display: none; }
.discord-flow__status.songs-status--error { color: var(--danger); font-weight: 600; }
.discord-flow__extra:empty { display: none; }
.discord-channel__chosen { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.discord-channel__name { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ok); font-weight: 600; overflow-wrap: anywhere; }
.discord-channel__name .icon { width: 16px; height: 16px; flex: none; }
.discord-account__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.discord-account__names { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.discord-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-highlight); }
.discord-avatar--initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--text); border: 1px solid var(--border-strong); }
.discord-server__mission { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.discord-points { max-width: 10ch; }

/* ═══ songs ═══ */
.songs-card { display: flex; flex-direction: column; gap: 12px; }
.songs-title { font-size: 1.05rem; }
.songs-subtitle { font-size: 0.95rem; margin-top: 8px; color: var(--text-muted); }
.songs-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-raised); font-size: 0.92rem; max-width: 80ch; }
.songs-note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.songs-note--warn { border-color: var(--warn); }
.songs-note--danger { border-color: var(--danger); color: var(--danger); }
.songs-switch { padding: 4px 0; }
.songs-status { display: flex; gap: 6px; align-items: center; min-height: 1.4em; font-size: 0.92rem; color: var(--text-muted); }
.songs-status .icon { width: 16px; height: 16px; flex: none; }
.songs-status--ok { color: var(--ok); }
.songs-status--error { color: var(--danger); font-weight: 600; }
.songs-details { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface-raised); }
.songs-details > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.songs-details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.songs-details[open] > summary { margin-bottom: 8px; }
.songs-details > * + * { margin-top: 8px; }
.songs-steps { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; max-width: 80ch; }
.songs-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.songs-row .input { flex: 1 1 260px; min-width: 0; }
.songs-block { display: flex; flex-direction: column; gap: 6px; }
.songs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
.songs-account { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.songs-account .icon { width: 18px; height: 18px; flex: none; }
.songs-authorize { padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.songs-locked { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-muted); }
.songs-locked .icon { width: 22px; height: 22px; flex: none; }
.songs-locked__title { font-weight: 600; color: var(--text); }
.songs-playlists { display: flex; flex-direction: column; gap: 6px; max-width: 80ch; }
.songs-playlist { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.songs-playlist:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.songs-playlist:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.songs-playlist input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.songs-playlist__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songs-playlist__count { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.songs-blocklist { list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 80ch; }
.songs-block-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.songs-block-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.songs-block-row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songs-block-row__meta { font-size: 0.85rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songs-commands { display: grid; grid-template-columns: minmax(180px, max-content) 1fr; gap: 6px 16px; align-items: baseline; max-width: 90ch; }
.songs-commands code { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 0.88rem; }
@media (max-width: 719px) {
    .songs-commands { grid-template-columns: 1fr; }
    .songs-commands dd { margin-bottom: 6px; }
}

/* ═══ discord (bloques internos de los widgets: el contenedor ya es un .field) ═══ */
.discord-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ═══ bot ═══════════════════════════════════════════════════════════════════
 * Sección @uStreamersBOT: tablas de comandos, timers y contadores con panel lateral, importador
 * y respaldo. Sólo clases .bot-*; los colores salen de las variables de arriba (los dos temas).
 * ========================================================================= */

/* Las tablas necesitan más ancho que un formulario. */
.section:has(> .bot) { max-width: 1280px; }
.bot { display: flex; flex-direction: column; gap: 12px; }
.bot-hints { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.85rem; color: var(--text-muted); }
.bot-tabpanel { padding-top: 2px; }

/* Lista + panel lateral */
.bot-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.bot-split--open { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
.bot-split__main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bot-panel {
    position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 16px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
}
.bot-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
/* Entre 900 y 1099 la barra lateral ya es un menú y la sección del bot (sin vista previa) tiene
   el ancho completo: la lista y el editor todavía entran lado a lado. */
@media (max-width: 1099px) {
    /* El editor fijo no se mete debajo de la barra de arriba. */
    .bot-panel { top: calc(var(--topbar-h) + 12px); max-height: calc(100vh - var(--topbar-h) - 24px); }
}
@media (max-width: 899px) {
    .bot-split--open { grid-template-columns: minmax(0, 1fr); }
    .bot-panel { position: static; max-height: none; }
}

/* Barra de herramientas */
.bot-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 14px; }
.bot-toolbar__controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; flex: 1 1 420px; }
.bot-toolbar__search { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 360px; }
.bot-toolbar__search .icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
.bot-toolbar__search .input { width: 100%; padding-left: 34px; }
.bot-toolbar__filter { display: flex; flex-direction: column; gap: 2px; }
.bot-toolbar__actions { display: flex; gap: 8px; }
.bot-count { color: var(--text-muted); font-size: 0.88rem; }

/* Tablas */
.bot-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bot-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.bot-table th, .bot-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.bot-table thead th { background: var(--surface-raised); color: var(--text-muted); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.bot-table tbody tr:last-child > * { border-bottom: 0; }
.bot-table tbody th { font-weight: 600; }
.bot-row:hover { background: var(--surface-raised); }
.bot-row--selected { background: var(--accent-soft); }
.bot-row--off .bot-col--name, .bot-row--off .bot-col--response { opacity: 0.65; }
.bot-row--flash { animation: flash 2.2s ease-out 1; }
.bot-col--switch { width: 64px; }
.bot-col--num { text-align: right !important; white-space: nowrap; }
.bot-col--actions { text-align: right !important; white-space: nowrap; }
.bot-col--response { max-width: 420px; min-width: 200px; }
.bot-col--stepper { white-space: nowrap; }
.bot-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--text-muted); }
.bot-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.bot-link:hover { text-decoration: underline; }
.bot-link--code { font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; font-weight: 600; }
.bot-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bot-row__aliases { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bot-rowswitch { position: relative; }

.bot-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.bot-badge--live { color: var(--ok); border-color: currentColor; }
.bot-badge--official { color: var(--accent); border-color: currentColor; }
.bot-dots { display: inline-flex; gap: 4px; }
.bot-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; color: var(--bg); }
.bot-dot--twitch { background: var(--twitch); }
.bot-dot--kick { background: var(--kick); }
.bot-dot--off { background: transparent; color: var(--text-muted); border: 1px dashed var(--text-muted); }
.bot-danger { color: var(--danger); }
.bot-danger:hover { border-color: var(--danger); }

/* Chips (alias y variables) */
.bot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised); color: var(--text); font-size: 0.85rem; }
button.bot-chip { cursor: pointer; }
button.bot-chip:hover { border-color: var(--accent); }
.bot-chip code { color: var(--accent); font-family: ui-monospace, Consolas, monospace; }
button.bot-chip span { color: var(--text-muted); font-size: 0.8rem; }
.bot-chip--small { padding: 0 8px; font-size: 0.75rem; }
.bot-chip__x { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.bot-chip__x:hover { color: var(--danger); }

/* Estado vacío */
.bot-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.bot-empty > .icon { width: 2.4rem; height: 2.4rem; color: var(--text-faint); }
.bot-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Editor lateral */
.bot-editor { display: flex; flex-direction: column; gap: 4px; }
.bot-editor__bands:empty { display: none; }
.bot-editor__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bot-editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bot-field { padding: 8px 2px; }
.bot-field__head { flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; }
.bot-fieldset { margin: 0; min-width: 0; border: 0; }
.bot-fieldset > legend { padding: 0; }
.bot-prefix { color: var(--text-muted); font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.bot-charrow { display: flex; justify-content: flex-end; }
.bot-charcount--over { color: var(--danger); font-weight: 700; }
.bot-response { min-height: 110px; }
.bot-bubble { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); overflow-wrap: anywhere; white-space: pre-wrap; }
.bot-preview { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; }
.bot-picker { margin-top: 6px; }
.bot-messages { display: flex; flex-direction: column; gap: 8px; }
.bot-message { display: flex; align-items: flex-start; gap: 6px; }
.bot-message .input { flex: 1; }
.bot-stepper { display: inline-flex; align-items: center; gap: 10px; }
.bot-stepper__value { min-width: 5ch; text-align: center; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* Importar y exportar */
.bot-import { display: flex; flex-direction: column; gap: 14px; }
.bot-source__head { display: flex; align-items: flex-start; gap: 12px; }
.bot-source__head > .icon { width: 1.6rem; height: 1.6rem; margin-top: 2px; color: var(--accent); }
.bot-source--off { opacity: 0.7; }
.bot-form { display: flex; flex-direction: column; gap: 10px; }
.bot-filepick { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bot-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bot-file:focus-visible + .btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.bot-importtext { min-height: 160px; font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; font-size: 0.9rem; }
.bot-preview__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bot-preview__selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bot-preview__foot {
    position: sticky; bottom: 12px; z-index: 15; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 12px 16px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-raised); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.bot-flip { transform: rotate(180deg); }
.bot-status { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.bot-status--ok { color: var(--ok); }
.bot-status--warn { color: var(--warn); }
.bot-status--danger { color: var(--danger); }
.bot-import__text { overflow-wrap: anywhere; font-size: 0.9rem; }
.bot-import__warnings { padding-left: 18px; list-style: disc; color: var(--text-muted); font-size: 0.85rem; }
.bot-result__stats { display: flex; flex-direction: column; gap: 4px; }

/* Ajustes: perfil del bot, cómo funciona */
.bot-profile__card { flex-direction: row; align-items: center; gap: 14px; }
.bot-profile__avatar { width: 56px; height: 56px; font-size: 1.3rem; }
.bot-profile__handles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bot-settings__bands { display: flex; flex-direction: column; gap: 8px; }
.bot-howto > summary { cursor: pointer; }
.bot-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-left: 18px; list-style: decimal; }
.bot-steps__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bot-howto__faq { margin-top: 12px; }
.bot-faq > summary { cursor: pointer; font-weight: 600; }

@media (max-width: 719px) {
    .bot-editor__row { grid-template-columns: 1fr; }
    .bot-toolbar__search { max-width: none; }
}

/* ═══ points ═══ */
/* Sección "Puntos y premios": moneda, tramos de importación y catálogo de premios. */

.points-panels { display: flex; flex-direction: column; gap: 14px; }
.points-widget { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--radius-sm); }
.points-msg[hidden] { display: none; }
.points-num { width: 160px; }
.points-num-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.points-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.points-chip {
    min-height: 32px; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised);
    color: var(--text); cursor: pointer; font-weight: 600; font-size: 0.85rem;
}
.points-chip:hover { background: var(--surface-highlight); }
.points-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.points-chip--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chip.points-chip--warn { color: var(--warn); }
.points-badge--risk { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); border: 1px solid var(--danger); }

/* Moneda e ícono */
.points-coin { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--surface-highlight); color: var(--text-muted); }
.points-coin--sm { width: 22px; height: 22px; }
.points-coin--lg { width: 56px; height: 56px; }
.points-coin .icon { width: 60%; height: 60%; }
.points-coin__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.points-icon { gap: 10px; }
.points-icon__row { display: flex; flex-wrap: wrap; gap: 16px; }
.points-icon__preview { display: flex; gap: 14px; align-items: flex-start; }
.points-icon__figure { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.points-icon__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--surface-highlight); }
.points-icon__side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.points-icon__notices { display: flex; flex-direction: column; gap: 6px; }
.points-icon__notices .band { margin-bottom: 0; }
.points-icon__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.points-file { padding: 6px 8px; max-width: 100%; }

/* Tramos de importación y espejos */
.points-imports { display: flex; flex-direction: column; gap: 14px; }
.points-import__head { display: flex; flex-direction: column; gap: 4px; }
.points-import__head .card__title { display: flex; align-items: center; gap: 8px; }
.points-import__notes { display: flex; flex-direction: column; }
.points-import__notes .band { margin-bottom: 8px; }
.points-tiers { display: flex; flex-direction: column; gap: 10px; }
.points-tier { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
.points-tier__amounts { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.points-tier__amounts .field { padding: 0; }
.points-tier__arrow { padding-bottom: 10px; color: var(--text-muted); font-weight: 700; }
.points-tier__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.points-tier__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.points-tier__error { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--danger); color: var(--danger); font-weight: 600; font-size: 0.9rem; }
.points-import__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.points-mirror { background: var(--surface-raised); }
.points-mirror--twitch { border-left: 3px solid var(--twitch); }
.points-mirror--kick { border-left: 3px solid var(--kick); }
.points-mirror .card__title { display: flex; align-items: center; gap: 8px; }
.points-mirror__body { display: flex; flex-direction: column; gap: 8px; }
.points-mirror__body .band { margin-bottom: 0; }
.points-mirror__actions { display: flex; gap: 8px; }

/* Catálogo de premios */
.points-rewards { display: flex; flex-direction: column; gap: 14px; }
.points-rewards__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.points-rewards__titles { flex: 1 1 260px; min-width: 0; }
.points-rewards__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.points-rewards__full { flex-basis: 100%; }
.points-counter { padding: 2px 12px; border: 1px solid var(--border-strong); border-radius: 999px; font-weight: 700; color: var(--text-muted); }
.points-counter--full { border-color: var(--danger); color: var(--danger); }
.points-empty { align-items: flex-start; }
.points-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.points-table { width: 100%; border-collapse: collapse; }
.points-table th, .points-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.points-table thead th { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.points-table tbody tr:last-child > * { border-bottom: 0; }
.points-row--highlight { background: var(--accent-soft); }
.points-cell-title { min-width: 220px; font-weight: 400; }
.points-cell-title > * { display: block; }
.points-cell-title__line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.points-cell-title__line .badge { margin-left: 0; }
.points-link { padding: 0; border: 0; background: none; color: var(--text); font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.points-link:hover { color: var(--accent); }
.points-type-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.points-cost { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.points-cell-actions { white-space: nowrap; text-align: right; }
.points-cell-actions .btn + .btn { margin-left: 6px; }
.points-pause { white-space: nowrap; }

/* Tipos y plantillas */
.points-typepicker, .points-templates__body { display: flex; flex-direction: column; gap: 14px; }
.points-typegroup { display: flex; flex-direction: column; gap: 8px; }
.points-typegroup__title { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.points-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.points-type, .points-template {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; height: 100%; padding: 12px; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.points-type:hover:not(:disabled), .points-template:hover:not(:disabled) { border-color: var(--accent); }
.points-type--selected { border-color: var(--accent); background: var(--accent-soft); }
.points-type:disabled, .points-template:disabled { opacity: 0.55; cursor: not-allowed; }
.points-type__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.points-type__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.points-type__title { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-weight: 700; }
.points-type__hint { font-size: 0.85rem; color: var(--text-muted); }
.points-type__platforms { font-size: 0.78rem; color: var(--text-faint); }
.points-templates__bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* Panel lateral del editor y diálogo de plantillas */
.dialog.points-editor, .dialog.points-templates { max-width: none; padding: 0; }
.dialog.points-editor {
    margin: 0 0 0 auto; width: min(760px, 100vw); border-radius: var(--radius) 0 0 var(--radius);
    /* dvh: en el teléfono 100vh incluye la barra del navegador y el pie (Guardar) quedaba tapado. */
    height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh;
}
.dialog.points-templates { width: min(940px, calc(100vw - 32px)); max-height: 88vh; max-height: 88dvh; }
.dialog.points-editor[open], .dialog.points-templates[open] { display: flex; flex-direction: column; }
.points-editor__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.points-editor__title { flex: 1; font-size: 1.1rem; }
.points-editor__body, .points-templates__body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; }
.points-editor__body { display: flex; flex-direction: column; gap: 12px; }
.points-editor__type { display: flex; align-items: center; gap: 10px; }
.points-editor__foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-raised); }
.points-editor__foot[hidden] { display: none; }
.points-editor__actions { display: flex; justify-content: flex-end; gap: 8px; }
.points-editor__issue { padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--warn); font-size: 0.9rem; }
.points-editor__issue--block { border-color: var(--danger); color: var(--danger); font-weight: 600; }
.points-preview { display: flex; flex-direction: column; gap: 6px; }
.points-preview__label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.points-preview__card { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
.points-preview__main { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.points-preview__cost { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.points-preview__card .badge { margin-left: 0; }
.points-duplicate { display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.points-duplicate[hidden] { display: none; }
.points-announce { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.points-announce__text { overflow-wrap: anywhere; }
.points-risk { display: flex; flex-direction: column; gap: 6px; }

/* Juegos permitidos y prohibidos */
.points-games-box { gap: 8px; }
.points-results { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.points-results[hidden] { display: none; }
.points-results__platform { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.points-results__list, .points-games, .points-tokens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.points-result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; color: var(--text); }
.points-result:hover { border-color: var(--accent); }
.points-result__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.points-result__thumb { width: 28px; height: 36px; flex: none; object-fit: cover; border-radius: 4px; background: var(--surface-highlight); }
.points-result__thumb--empty { display: grid; place-items: center; color: var(--text-muted); }
.points-games__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
.points-games__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.points-games__badges { display: flex; gap: 4px; }
.points-games__actions { display: flex; gap: 2px; }
.points-games__empty { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--danger); border-radius: var(--radius-sm); color: var(--danger); }
.points-tokens { flex-direction: row; flex-wrap: wrap; }
.points-token { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised); }
.points-token__remove { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.points-token__remove:hover { color: var(--danger); }

@media (max-width: 719px) {
    .points-typegrid { grid-template-columns: 1fr; }
    .dialog.points-editor { border-radius: 0; }
}

/* ═══ points ═══ */
/* Ajustes del panel lateral: el cuerpo se desplaza solo y la cabecera y el pie quedan fijos.
   `clip` y no `hidden`: un contenedor `hidden` igual se puede desplazar por código (foco,
   scrollIntoView) y la cabecera y el pie se irían de la vista dejando el panel en negro. */
.dialog.points-editor, .dialog.points-templates { overflow: clip; }
.points-editor__body, .points-templates__body { min-height: 0; }
.points-editor__head .btn { flex: none; }
.points-cell-title .badge, .points-type__title .badge { white-space: nowrap; }

/* ── YouTube en Novedades y vínculo de Google (fase 3) ───────────────────── */
.youtube-review { display: flex; flex-direction: column; gap: 12px; }
.youtube-item { gap: 10px; }
.youtube-item__title { overflow-wrap: anywhere; font-size: 1rem; }
.youtube-item__link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.youtube-item__link .icon { width: 16px; height: 16px; }
.youtube-empty { align-items: center; text-align: center; color: var(--text-muted); }
.youtube-empty .icon { width: 28px; height: 28px; }
.youtube-preview { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); max-width: 80ch; }
.youtube-preview__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.youtube-variables { gap: 6px; }
.google-link__body { display: flex; flex-direction: column; gap: 8px; }

/* ─── Sorteos y torneos ─────────────────────────────────────────────────────
 * Las secciones "Sorteos" y "Torneos": formulario, control en vivo, listas, verificación y llaves.
 * Lo dinámico (la barra de votos) entra por la custom property --pct escrita con style.setProperty.
 */
.field__control--color { display: flex; gap: 8px; align-items: center; }
.input--color { width: 44px; height: 36px; padding: 2px; cursor: pointer; }
.input--hex { width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }

.sorteos-status { min-height: 1.4em; margin: 8px 0 0; font-size: 0.92rem; color: var(--text-muted); }
.sorteos-status--ok { color: var(--ok); }
.sorteos-status--error { color: var(--danger); font-weight: 600; }
.sorteos-create, .sorteos-templates, .sorteos-live, .sorteos-history { display: flex; flex-direction: column; gap: 14px; }
.sorteos-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sorteos-bar__label { font-weight: 600; }
.sorteos-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sorteos-empty { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.sorteos-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; }
.sorteos-head__title { margin: 0; font-size: 1.15rem; }
.sorteos-subtitle { margin: 6px 0; font-size: 1rem; }
.sorteos-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.sorteos-facts li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sorteos-facts span { font-size: 0.8rem; color: var(--text-muted); }
.sorteos-hash { overflow-wrap: anywhere; font-size: 0.8rem; }
.sorteos-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sorteos-clock { font-variant-numeric: tabular-nums; font-weight: 700; }
.sorteos-clock--ending { color: var(--danger); }
.sorteos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sorteos-list__item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sorteos-list__item--removed { opacity: 0.55; }
.sorteos-list__main { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.sorteos-list__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sorteos-list--compact .sorteos-list__item { padding: 4px 10px; }
.sorteos-draw--pending { border-color: var(--warn); }
.sorteos-draw--confirmed, .sorteos-draw--drawn { border-color: var(--ok); }
.sorteos-draw--expired, .sorteos-draw--rerolled, .sorteos-draw--disqualified { opacity: 0.6; }
.sorteos-draw__status { font-size: 0.85rem; color: var(--text-muted); }
.sorteos-messages { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.sorteos-message { font-size: 0.88rem; color: var(--text-muted); }
.sorteos-winners { font-size: 0.88rem; color: var(--text-muted); }
.sorteos-pager { display: flex; gap: 10px; align-items: center; }
.sorteos-add { display: flex; flex-wrap: wrap; gap: 8px; }
.sorteos-add .input { flex: 1 1 220px; }
.sorteos-entries { display: flex; flex-direction: column; gap: 8px; }
.sorteos-verify { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sorteos-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; align-items: center; }
.sorteos-dl dt { font-weight: 600; }
.sorteos-dl dd { margin: 0; display: flex; gap: 6px; align-items: center; min-width: 0; }
.sorteos-checks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sorteos-ok { color: var(--ok); }
.sorteos-bad { color: var(--danger); font-weight: 600; }
.sorteos-total { font-weight: 700; margin: 6px 0 0; }
.sorteos-details > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.sorteos-table-wrap { overflow-x: auto; }
.sorteos-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.sorteos-table th, .sorteos-table td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border); }

/* Llaves */
.bracket { display: flex; flex-direction: column; gap: 16px; }
.bracket-columns { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.bracket-column { display: flex; flex-direction: column; gap: 8px; min-width: 210px; flex: none; }
.bracket-column__title { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.bracket-column__matches { display: flex; flex-direction: column; gap: 8px; }
.bracket-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bracket-group { display: flex; flex-direction: column; gap: 8px; }
.bracket-match { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bracket-match--live { border-color: var(--ok); }
.bracket-match--current { box-shadow: 0 0 0 2px var(--accent-soft); border-color: var(--accent); }
.bracket-match--bye, .bracket-match--void { opacity: 0.55; }
.bracket-match__head { display: flex; justify-content: space-between; gap: 6px; font-size: 0.75rem; color: var(--text-muted); }
.bracket-slot { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; border-radius: 4px; background: var(--surface); }
.bracket-slot__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-slot--winner { font-weight: 700; border-left: 3px solid var(--ok); }
.bracket-slot--empty, .bracket-slot--pending { color: var(--text-faint); font-style: italic; }
.bracket-vote { height: 8px; border-radius: 4px; background: var(--surface-highlight); overflow: hidden; }
.bracket-vote__fill { width: var(--pct, 50%); height: 100%; background: var(--accent); }
.bracket-match__vote-time { font-size: 0.8rem; color: var(--text-muted); }
.bracket-match__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bracket-champion { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--ok); border-radius: var(--radius); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.bracket-champion__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }

/* Torneo por equipos (TASK_EQUIPOS.md): tarjetas de la fase `teams`, banco y peso por inscripto */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.team-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.team-card--bench { border-style: dashed; margin-top: 12px; }
.team-card--champion { border-color: var(--ok); }
.team-card--eliminated { opacity: 0.6; }
.team-card__head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.team-card__name { flex: 1 1 160px; min-width: 0; font-weight: 600; }
.team-card__title { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.team-card__meta { font-size: 0.8rem; color: var(--text-muted); }
.team-card__seed { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.team-card__empty { color: var(--warn); }
.weight-input { width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
/* Peso escrito que el servidor todavía no tomó (cupo de pedidos): se reintenta solo. */
.weight-input--pending { border-style: dashed; border-color: var(--warn); }

/* Mis archivos (TASK_ESPACIO_STREAMER): uso, subida y la grilla de la biblioteca de los overlays.
 * El ancho de la barra entra por la custom property --pct escrita con style.setProperty. */
.media-usage__numbers { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.media-usage__plan { font-size: 0.85rem; color: var(--text-muted); }
.media-usage__bar { height: 10px; border-radius: 5px; background: var(--surface-highlight); overflow: hidden; }
.media-usage__fill { width: var(--pct, 0%); height: 100%; background: var(--accent); transition: width 0.3s ease; }
.media-usage__bar--high .media-usage__fill { background: var(--warn); }
.media-usage__bar--over .media-usage__fill { background: var(--danger); }
.media-file { padding: 6px 8px; max-width: 100%; }
.media-upload__picked { overflow-wrap: anywhere; }
.media-upload__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.media-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.media-item { display: flex; flex-direction: column; min-width: 0; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.media-item__preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--surface-highlight); }
.media-item__preview--audio { aspect-ratio: auto; padding: 16px 8px; }
.media-item__preview--none { color: var(--text-faint); font-size: 0.85rem; }
.media-item__img, .media-item__video { width: 100%; height: 100%; object-fit: contain; }
.media-item__audio { width: 100%; }
.media-item__body { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; }
.media-item__name { font-size: 0.95rem; font-weight: 600; overflow-wrap: anywhere; }
.media-item__meta { font-size: 0.8rem; color: var(--text-muted); }
.media-item__rename { width: 100%; }
.media-item__actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* Caja de alertas (TASK_CAJA_ALERTAS): el editor de cada tipo de alerta y sus variaciones por monto. */
.alert-editor { display: flex; flex-direction: column; gap: 12px; }
.alert-editor__heading { margin: 8px 0 0; font-size: 1rem; }
.alert-editor__variation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: start; padding: 12px; background: var(--surface-highlight); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.alert-editor__variation > .btn { justify-self: start; }
.alert-editor__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.alert-detail { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; padding: 16px 18px 18px; background: var(--surface-raised); border: 1px solid var(--accent); border-radius: var(--radius); }
.alert-detail__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.alert-group { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.alert-group__title { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.alert-group__subtitle { margin: 4px 0 0; font-size: 0.95rem; }
.alert-group > .btn { align-self: flex-start; }
.alert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
@media (max-width: 720px) {
  .alert-grid { grid-template-columns: 1fr; }
}
.alert-detail__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.alert-list { display: flex; flex-direction: column; gap: 6px; }
.alert-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.alert-row--selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.alert-row--off .alert-row__text { opacity: 0.6; }
.alert-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.alert-row__main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alert-row__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--dot, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--accent)) 30%, transparent); }
.alert-row__text { display: flex; flex-direction: column; min-width: 0; }
.alert-row__name { font-weight: 600; }
.alert-row__summary { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-row__switch { flex: none; }
.alert-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip--token { padding: 4px 10px; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-highlight); color: inherit; cursor: pointer; }
.chip--token:hover:not(:disabled) { border-color: var(--accent); }
.alert-media { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.alert-media > .input { flex: 1 1 220px; }
.alert-peek--image { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-highlight); }
.alert-peek--audio { height: 36px; max-width: 240px; }
.alert-peek--video { font-size: 0.8rem; color: var(--text-muted); }
.alert-color { display: flex; align-items: center; gap: 10px; }
.alert-files { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.alert-files__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.alert-files__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alert-files__detail { font-size: 0.8rem; color: var(--text-muted); }
.alert-files > .btn { flex: none; }
@media (max-width: 520px) {
  .alert-editor__variation { grid-template-columns: 1fr; }
}

/* Dibujos y personajes (TASK_DIBUJOS_IA D10): estado de sólo lectura; se configura en la app. */
.drawings-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.drawings-facts__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.drawings-facts__item:last-child { border-bottom: 0; padding-bottom: 0; }
.drawings-facts__label { color: var(--text-muted); }
.drawings-facts__value { text-align: right; }