/* ═══════════════════════════════════════════════════════════════
   TEMA ZONASTREAMING  (assets/zs-tema.css)
   Se carga DESPUES de style.css y movil.css y solo redefine el aspecto:
   tipografia Montserrat, acento azul #2962ff, fondos claros, bordes
   mas sobrios. No cambia ninguna funcion ni la estructura.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tema claro (por defecto): el del panel ZonaStreaming ── */
html:root[data-theme="light"] {
  --ink:        #F4F6FB;
  --surface:    #FFFFFF;
  --card:       #FFFFFF;
  --card-2:     #F6F8FC;
  --line:       #E3E8F1;
  --line-soft:  #EEF1F6;

  --tx:         #1F2A44;
  --tx-2:       #3C4A66;
  --tx-3:       #5A6785;
  --tx-4:       #7B88A5;

  --signal:     #2962FF;
  --signal-in:  #1E4FD8;
  --amber:      #B26B00;
  --mint:       #0E9F6E;
  --violet:     #5B47D6;
  --danger:     #E11D48;

  --sig-dim:    rgba(41, 98, 255, .08);
  --amb-dim:    rgba(178, 107, 0, .08);
  --mint-dim:   rgba(14, 159, 110, .08);
  --vio-dim:    rgba(91, 71, 214, .07);

  --shadow:     0 16px 40px -18px rgba(31, 42, 68, .18);
  --shadow-sm:  0 2px 8px rgba(31, 42, 68, .05);
  --glow:       0 6px 18px -6px rgba(41, 98, 255, .45);

  --r-sm: 7px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  color: var(--tx);
}

/* ── Tema oscuro: azul marino con el mismo acento azul ── */
html:root[data-theme="dark"], html:root:not([data-theme]) {
  --ink:        #0F1424;
  --surface:    #151B2E;
  --card:       #1A2238;
  --card-2:     #212A44;
  --line:       #2E3858;
  --line-soft:  #232C47;

  --tx:         #F3F6FF;
  --tx-2:       #D2D9EE;
  --tx-3:       #A6B0CC;
  --tx-4:       #8691AF;

  --signal:     #5B8CFF;
  --signal-in:  #7BA3FF;
  --sig-dim:    rgba(91, 140, 255, .15);
  --glow:       0 0 30px -6px rgba(91, 140, 255, .6);

  --r-sm: 7px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
}

/* ── Tipografia: Montserrat en todo ── */
html body { font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; letter-spacing: 0; }
html body h1, html body h2, html body h3, html body h4, html body .display,
html body .stat-val, html body .brand, html body .logo, html body [class*="titulo"], html body [class*="title"] {
  font-family: 'Montserrat', system-ui, sans-serif;
  letter-spacing: -.01em;
}
html body h1, html body h2, html body h3, html body h4, html body .display { font-weight: 800; }
html body .stat-val { font-weight: 800; letter-spacing: -.02em; }
/* numeros alineados, pero con la misma letra */
html body .num { font-family: 'Montserrat', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
/* las etiquetas tecnicas (excited, short pause...) siguen en letra de codigo, que se distingue */
html body .mono, html body code, html body .mark i { font-family: 'JetBrains Mono', ui-monospace, monospace; }
html body button, html body input, html body select, html body textarea { font-family: inherit; }

/* ── Tema claro: tarjetas con borde fino, como el panel ── */
html[data-theme="light"] body .card,
html[data-theme="light"] body .stat,
html[data-theme="light"] body .player { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* ── Naranjas que estaban fijos en la hoja original ── */
html body .fx-preset:hover { border-color: var(--signal); color: var(--signal); }
html body .fx-preset.active { background-color: var(--signal); color: #fff; border-color: var(--signal); }
html body .pm-card:hover { border-color: var(--signal); box-shadow: 0 2px 8px rgba(41, 98, 255, .12); }

/* ── Botones principales: azul solido como el panel ── */
html body .btn-primary, html body .btn.primary, html body .btn-signal { background: var(--signal); border-color: var(--signal); color: #fff; }
html body .btn-primary:hover, html body .btn.primary:hover, html body .btn-signal:hover { background: var(--signal-in); border-color: var(--signal-in); }

/* ── Cuadro de emociones: chips mas claros ── */
html body .mark { font-weight: 600; }
html body .mark i { font-size: .82em; opacity: .75; }
html body .mark:hover { border-color: var(--signal); color: var(--signal); }
html body #emoTabs button.on, html body .seg button.on { background: var(--signal); color: #fff; }

/* ── Modo oscuro: el diseño original deja el contenido (.page) en blanco sobre el marco
      oscuro. Se mantiene, pero con la paleta ZonaStreaming (acento azul, no naranja). ── */
html[data-theme="dark"] body .page {
  --surface:    #FFFFFF;
  --card:       #FFFFFF;
  --card-2:     #F6F8FC;
  --line:       #E3E8F1;
  --line-soft:  #EEF1F6;
  --tx:         #1F2A44;
  --tx-2:       #3C4A66;
  --tx-3:       #5A6785;
  --tx-4:       #7B88A5;
  --signal:     #2962FF;
  --signal-in:  #1E4FD8;
  --sig-dim:    rgba(41, 98, 255, .08);
  --glow:       0 6px 18px -6px rgba(41, 98, 255, .45);
  --shadow-sm:  0 2px 8px rgba(31, 42, 68, .06);
  color: var(--tx);
}

/* ── Logo de la marca en modo dia: placa oscura detras (los logos claros no se veian) ── */
html[data-theme="light"] body .brand-logo {
  background: #0F1424; padding: 5px 8px; border-radius: 9px; box-shadow: 0 2px 6px rgba(15, 20, 36, .18);
}

/* ── Campos mas compactos en todo el sistema (antes ~44 px de alto) ── */
html body .input, html body .select, html body .textarea {
  padding: 7px 12px; font-size: 13.5px; line-height: 1.45;
}
html body select.input, html body .select { padding-right: 32px; }
html body .textarea { min-height: 96px; line-height: 1.55; }
html body .field { margin-bottom: 11px; }
html body .field .hint, html body .hint { margin-top: 3px; }

/* ── Ajustes: cada tarjeta a la altura de su contenido (antes se estiraban para igualar
      a la de al lado y quedaban huecos vacios). Siguen dos por fila. ── */
@media (min-width: 1100px) {
  html body .tab-panel .grid-2 { align-items: start; }
  html body .tab-panel .grid-2 > .card { height: auto; }
  html body .tab-panel .grid-2 > .card > form { flex: 0 0 auto; }
  html body .tab-panel .grid-2 > .card .card-actions { margin-top: 12px; }
}

/* ═══ Todo mas bajo y parejo en todas las pantallas ═══ */
/* campos de una linea y desplegables: 34 px en todas (antes 34-39 segun la pagina) */
html body input.input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html body select.input, html body .select { height: 34px; padding-top: 0; padding-bottom: 0; }
/* botones: 34 px el normal (antes 40), el pequeno y el grande en proporcion */
html body .btn { padding: 8px 16px; }
html body .btn-sm { padding: 6px 11px; }
html body .btn-lg { padding: 11px 24px; }
/* tarjetas: menos relleno (antes 22 px); la tabla de dentro sigue llegando al borde */
html body .card { padding: 16px; }
html body .card + .card { margin-top: 14px; }
html body .table-wrap { margin: 0 -16px -16px; }
/* filas de las tablas mas compactas (antes 13 px arriba y abajo) */
html body th { padding-top: 9px; padding-bottom: 9px; }
html body td { padding: 9px 14px; }

/* ═══ Tarjetas de cifras (Total, Este mes, Disponibles...): compactas y bajas en todas las
       pantallas. Icono a la izquierda y la cifra al lado, en una sola franja. ═══ */
html body .stats { gap: 10px; margin-bottom: 14px; }
html body .stat { padding: 9px 14px; }
html body .stats.compact .stat { padding: 9px 14px; }
html body .stat-top { margin-bottom: 4px; gap: 8px; }
html body .stat-ic, html body .stats.compact .stat-ic { width: 26px; height: 26px; border-radius: 7px; }
html body .stat-ic svg { width: 14px; height: 14px; }
html body .stat-label { font-size: 9.5px; }
html body .stat-val, html body .stats.compact .stat-val { font-size: 19px; line-height: 1.1; }
html body .stat-note, html body .stats.compact .stat-note { font-size: 10.5px; margin-top: 1px; }
/* dos lineas: titulo arriba; cifra y nota en la misma linea ("165 spots generados") */
html body .stat, html body .stats.compact .stat {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "ic label label" "ic val note";
  column-gap: 10px; row-gap: 1px; align-items: center; align-content: center;
}
html body .stat-top, html body .stats.compact .stat-top { display: contents; }
html body .stat-ic, html body .stats.compact .stat-ic { grid-area: ic; align-self: center; }
html body .stat-label, html body .stats.compact .stat-label { grid-area: label; align-self: end; }
html body .stat-val, html body .stats.compact .stat-val { grid-area: val; margin-top: 0; }
html body .stat-note, html body .stats.compact .stat-note { grid-area: note; align-self: end; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  html body .stat-note, html body .stats.compact .stat-note { white-space: normal; overflow: visible; line-height: 1.25; }
}

/* ═══ Campos todavia mas bajos (los espacios donde se escribe) ═══ */
html body input.input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
html body select.input, html body .select { height: 30px; font-size: 13px; padding-left: 10px; padding-right: 10px; }
html body select.input, html body .select { padding-right: 28px; }
html body .input, html body .textarea { font-size: 13px; }
html body textarea.input { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
html body .textarea { min-height: 72px; padding-top: 6px; padding-bottom: 6px; }
html body .field { margin-bottom: 9px; }
html body .label, html body .field > label, html body .field-label { margin-bottom: 4px; }
html body .btn { padding: 6px 14px; }
/* desplegables: sin relleno vertical y texto centrado (con 30 px de alto el texto salia cortado) */
html body select.select, html body select.input, html body .select {
  padding-top: 0 !important; padding-bottom: 0 !important; line-height: 28px !important; font-size: 13px !important;
}
/* campos de una linea: sin relleno vertical (algunas paginas, como Mi perfil, ponian el suyo
   y con 30 px el texto se cortaba); el navegador centra el texto solo */
html body input.input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]) {
  padding-top: 0 !important; padding-bottom: 0 !important;
}

/* ── Selector "Vista" de Generar spot (cada cliente elige la suya) ── */
.zs-vista { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; }
.zs-vista-tit { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-4); margin-right: 6px; }
.zs-vista-btn { border: 1px solid var(--line); background: var(--card); color: var(--tx-2); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.zs-vista-btn:hover { border-color: var(--signal); color: var(--signal); }
.zs-vista-btn.on { background: var(--signal); border-color: var(--signal); color: #fff; cursor: default; }
.zs-vista-btn:disabled { opacity: .6; }

/* ═══ AJUSTES ordenado ═══
   Antes: tarjetas en filas de dos; si una era mas alta que su vecina quedaba un hueco debajo
   de la corta. Ahora: dos columnas que se rellenan solas (cada tarjeta va justo debajo de la
   anterior de su columna), sin huecos. Marca: tres columnas. */
@media (min-width: 1100px) {
  html body .tab-panel .grid-2 { display: block !important; column-count: 2; column-gap: 16px; }
  html body .tab-panel .grid-2 > .stack { display: contents !important; }
  html body .tab-panel .grid-2 .card {
    display: block !important; height: auto !important; width: 100%;
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    margin: 0 0 16px !important;
  }
  html body .tab-panel .grid-2 .card > form { display: block !important; }
}
@media (min-width: 1250px) {
  html body .tab-panel[data-panel="marca"] .grid-2 { column-count: 3; }
}
/* campos de NUMEROS cortos (30 dias, 260 ms, 6, 24...): no hace falta todo el ancho */
html body .tab-panel input.input[type="number"] { width: 120px !important; max-width: 120px; flex: 0 0 120px !important; }
html body .tab-panel .input-go { justify-content: flex-start; align-items: center; }
html body .tab-panel .field-row .field:has(> input.input[type="number"]) { flex: 0 1 auto; }

/* ═══════════════════════════════════════════════════════════════
   AJUSTES con diseño de panel profesional (con assets/zs-ajustes.js)
   menu de secciones a la izquierda + filas "informacion | campos"
   ═══════════════════════════════════════════════════════════════ */
.zs-aj { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.zs-aj-menu { position: sticky; top: 76px; }
.zs-aj-menu .tabs-ajustes {
  display: flex !important; flex-direction: column; gap: 2px; margin: 0 !important; padding: 8px !important;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); border-bottom-width: 1px !important;
}
.zs-aj-menu .tab-b {
  display: flex !important; align-items: center; gap: 11px; width: 100%; text-align: left; justify-content: flex-start;
  border: 0 !important; border-radius: 9px !important; padding: 9px 11px !important; background: transparent !important;
  color: var(--tx-2) !important; box-shadow: none !important; font-size: 13px !important;
}
.zs-aj-menu .tab-b svg { width: 16px; height: 16px; flex: none; color: var(--tx-4); }
.zs-aj-menu .tab-b:hover { background: var(--card-2) !important; }
.zs-aj-menu .tab-b.on { background: var(--sig-dim) !important; color: var(--signal) !important; }
.zs-aj-menu .tab-b.on svg { color: var(--signal); }
.zs-aj-txt { display: flex; flex-direction: column; min-width: 0; }
.zs-aj-tit { font-weight: 700; line-height: 1.25; }
.zs-aj-desc { font-size: 11px; font-weight: 500; color: var(--tx-4); line-height: 1.3; white-space: normal; }
.zs-aj-menu .tab-b.on .zs-aj-desc { color: var(--signal); opacity: .75; }

/* contenido: una sola columna (sin el reparto en dos columnas) */
html body .zs-aj .tab-panel .grid-2 { display: block !important; column-count: 1 !important; }
html body .zs-aj .tab-panel .grid-2 > .stack { display: contents !important; }
html body .zs-aj .tab-panel .card { margin: 0 0 14px !important; }

/* cada tarjeta: informacion a la izquierda | campos a la derecha */
html body .zs-aj .card.zs-aj-fila { display: grid !important; grid-template-columns: 250px minmax(0, 1fr); gap: 8px 28px; align-items: start; padding: 18px 20px; }
.zs-aj-info .card-head { margin-bottom: 6px !important; flex-wrap: wrap; row-gap: 6px; }
.zs-aj-info .card-head h2, .zs-aj-info .card-head h3 { font-size: 13px; }
.zs-aj-info p, .zs-aj-info .hint { font-size: 12px; color: var(--tx-3); line-height: 1.5; margin: 0 0 6px; }
.zs-aj-campos { min-width: 0; }
.zs-aj-campos .field, .zs-aj-campos .field-row { max-width: 640px; }
.zs-aj-campos .field-row { gap: 12px; }
.zs-aj-campos .hint { font-size: 11.5px; }
/* boton Guardar: tamaño normal, a la derecha (antes una barra azul de lado a lado) */
html body .zs-aj .zs-aj-campos .btn-block { width: auto !important; display: flex; margin: 8px 0 0 auto; padding: 8px 20px; }
html body .zs-aj .zs-aj-campos form { max-width: 640px; }
html body .zs-aj .zs-aj-campos .card-actions { max-width: 640px; }

/* pantallas medianas: informacion encima de los campos */
@media (max-width: 1300px) {
  html body .zs-aj .card.zs-aj-fila { grid-template-columns: minmax(0, 1fr); }
}
/* tableta y movil: las secciones vuelven arriba, en fila deslizable */
@media (max-width: 1000px) {
  .zs-aj { grid-template-columns: minmax(0, 1fr); }
  .zs-aj-menu { position: static; }
  .zs-aj-menu .tabs-ajustes { flex-direction: row; overflow-x: auto; }
  .zs-aj-menu .tab-b { width: auto; flex: none; }
  .zs-aj-desc { display: none; }
}

/* ═══ AJUSTES: tarjetas en cuadricula, MISMA ALTURA por fila ═══
   Voces 2 por fila · Marca 3 · Cobros 2 · Sistema 3 · Redactor (una sola) a todo el ancho.
   Dentro de cada tarjeta: titulo y explicacion arriba, campos debajo, Guardar abajo del todo. */
html body .zs-aj .tab-panel .grid-2 {
  display: grid !important; column-count: auto !important; gap: 14px; align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body .zs-aj .tab-panel[data-panel="marca"] .grid-2,
html body .zs-aj .tab-panel[data-panel="sistema"] .grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .zs-aj .tab-panel[data-panel="redactor"] .grid-2 { grid-template-columns: minmax(0, 1fr); }
html body .zs-aj .tab-panel .grid-2 > .stack { display: contents !important; }
html body .zs-aj .tab-panel .card,
html body .zs-aj .card.zs-aj-fila {
  display: flex !important; flex-direction: column; height: 100% !important; margin: 0 !important;
  grid-template-columns: none; padding: 16px 18px;
}
html body .zs-aj .card.zs-aj-fila .zs-aj-info { margin-bottom: 8px; }
html body .zs-aj .card.zs-aj-fila .zs-aj-campos { flex: 1 1 auto; display: flex; flex-direction: column; }
html body .zs-aj .zs-aj-campos > form:last-of-type { flex: 1 1 auto; display: flex !important; flex-direction: column; }
html body .zs-aj .zs-aj-campos > form:last-of-type > .btn-block:last-child,
html body .zs-aj .zs-aj-campos > form:last-of-type > button.btn-primary:last-child { margin-top: auto !important; }
html body .zs-aj .zs-aj-campos .field, html body .zs-aj .zs-aj-campos .field-row,
html body .zs-aj .zs-aj-campos form, html body .zs-aj .zs-aj-campos .card-actions { max-width: none; }
html body .zs-aj .zs-aj-campos .btn-block { width: 100% !important; justify-content: center; margin-left: 0; }
/* pantallas medianas: 2 por fila donde eran 3; pequeñas: 1 */
@media (max-width: 1450px) {
  html body .zs-aj .tab-panel[data-panel="marca"] .grid-2,
  html body .zs-aj .tab-panel[data-panel="sistema"] .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  html body .zs-aj .tab-panel .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   BORDES APENAS REDONDEADOS en todo (antes 9-20 px y pastillas de 99 px)
   Lo circular (avatares, play, marca de voz elegida) se respeta.
   ═══════════════════════════════════════════════════════════════ */
html:root[data-theme] { --r-sm: 4px; --r: 5px; --r-lg: 6px; --r-xl: 7px; }
html body .ab-btn,
html body .avatar,
html body .barra-flash,
html body .barra-flash button,
html body .brand-mark,
html body .btn,
html body .btn-bucle,
html body .btn-sm,
html body .card,
html body .carp,
html body .cat-buscar,
html body .cat-buscar button,
html body .chip,
html body .chip-num,
html body .collapse,
html body .confirmar-caja,
html body .cupon-box,
html body .dev,
html body .dl-btn,
html body .duo-n,
html body .duo-slot,
html body .dur-btn,
html body .empty-mark,
html body .est-btn,
html body .fa-cat-nueva,
html body .fa-cat-select,
html body .fx-preset,
html body .fx-toggle-num,
html body .icon-btn,
html body .input,
html body .linea-hecho,
html body .linea-pista,
html body .logo-prev,
html body .mark,
html body .nav-badge,
html body .nav-item,
html body .note,
html body .onair,
html body .pay-data > div,
html body .pay-qr,
html body .plan-row,
html body .player,
html body .pm-card,
html body .pm-icon,
html body .pm-modal,
html body .pm-modal-btn,
html body .pp-caja,
html body .pp-ic,
html body .pwa-aviso,
html body .pwa-ic,
html body .pwa-x,
html body .quota,
html body .quota-plan,
html body .seg,
html body .seg button,
html body .sel-bar,
html body .select,
html body .spot,
html body .stat,
html body .stat-ic,
html body .stats.compact .stat-ic,
html body .step-n,
html body .sub-block,
html body .tag,
html body .tag-op,
html body .tag-op-c,
html body .textarea,
html body .tg,
html body .tpl,
html body .track,
html body .voice,
html body .voice-mark { border-radius: 5px !important; }
html body .card, html body .stat, html body .player, html body .modal, html body .note,
html body .btn, html body .input, html body .select, html body .textarea, html body .seg, html body .seg button,
html body .tag, html body .chip, html body .mark, html body .nav-item, html body .icon-btn, html body .tab-b,
html body .voice, html body .prev, html body .fx-preset, html body .tg, html body .dur-btn,
html body .zs-vista-btn, html body .zs-pasos, html body .zs-paso-btn, html body .zs-aj-menu .tabs-ajustes,
html body .zs-aj-menu .tab-b, html body .brand-logo, html body .onair { border-radius: 5px !important; }
html body .tag, html body .chip, html body .zs-vista-btn { border-radius: 4px !important; }

/* ═══ TARJETAS LADO A LADO ALINEADAS ARRIBA ═══
   La regla ".card + .card" (separar una tarjeta de la anterior) bajaba ~14 px la de la derecha
   cuando estan una al lado de la otra (lista + formulario). */
html body .grid-2 > .card + .card, html body .grid-2 > * + .card,
html body .grid-2 > .stack:first-child, html body .grid-2 > :first-child + * { margin-top: 0 !important; }

/* ═══ Selector de tema (barra superior) ═══ */
.zs-tema-sel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--tx); }
.zs-tema-sel select {
  height: 32px; min-width: 110px; padding: 0 30px 0 12px; border: 1px solid var(--signal); border-radius: 5px; font: inherit; font-weight: 600;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B88A5' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--tx); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.zs-tema-sel select:focus { outline: 2px solid var(--sig-dim); outline-offset: 1px; }
@media (max-width: 640px) { .zs-tema-sel { font-size: 0; gap: 0; } .zs-tema-sel select { min-width: 92px; font-size: 12.5px; } }

/* ═══ TEMA COSMIC (morado oscuro, como el panel ZonaStreaming) ═══
   Por dentro es el tema oscuro (data-theme="dark") con data-variante="cosmic". */
html:root[data-theme="dark"][data-variante="cosmic"],
html[data-theme="dark"][data-variante="cosmic"] body .page {
  --ink:        #1B1B38;
  --surface:    #252547;
  --card:       #323259;
  --card-2:     #2A2A4F;
  --line:       #4A4A7C;
  --line-soft:  #3B3B66;
  --tx:         #FFFFFF;
  --tx-2:       #E2E2F6;
  --tx-3:       #B4B4DB;
  --tx-4:       #9A9AC9;
  --signal:     #A16EFF;
  --signal-in:  #B794FF;
  --amber:      #FFAA00;
  --mint:       #00D68F;
  --violet:     #A16EFF;
  --danger:     #FF708D;
  --sig-dim:    rgba(161, 110, 255, .18);
  --amb-dim:    rgba(255, 170, 0, .14);
  --mint-dim:   rgba(0, 214, 143, .14);
  --vio-dim:    rgba(161, 110, 255, .16);
  --shadow:     0 16px 40px -18px rgba(0, 0, 0, .55);
  --shadow-sm:  0 2px 10px rgba(0, 0, 0, .25);
  --glow:       0 6px 18px -6px rgba(161, 110, 255, .55);
  color: var(--tx);
}
html[data-theme="dark"][data-variante="cosmic"] body { background: var(--ink) !important; }
html[data-theme="dark"][data-variante="cosmic"] body .sidebar,
html[data-theme="dark"][data-variante="cosmic"] body .topbar,
html[data-theme="dark"][data-variante="cosmic"] body header.top { background: #323259; border-color: #1B1B38; }
html[data-theme="dark"][data-variante="cosmic"] body .card,
html[data-theme="dark"][data-variante="cosmic"] body .stat { background: var(--card); border-color: var(--line-soft); }
html[data-theme="dark"][data-variante="cosmic"] body .input,
html[data-theme="dark"][data-variante="cosmic"] body .select,
html[data-theme="dark"][data-variante="cosmic"] body .textarea { background-color: #252547; border-color: var(--line); color: var(--tx); }
html[data-theme="dark"][data-variante="cosmic"] body th { color: var(--tx-3); }

/* "Redactar con IA · Usar plantilla · Emociones y pausas": siempre en UNA fila.
   Cada boton ocupa lo que su texto; si la columna es estrecha, nombre corto (IA, Plantilla, Emociones). */
html body .zs-herr-guion { display: flex !important; flex-wrap: nowrap !important; gap: 6px; container-type: inline-size; }
html body .zs-herr-guion > .btn {
  flex: 0 1 auto; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden;
  padding: 6px 10px !important; font-size: 12px !important; gap: 5px;
}
html body .zs-herr-guion > .btn svg { flex: none; }
html body .zs-herr-guion .t-corto { display: none; }
@container (max-width: 500px) {
  html body .zs-herr-guion .t-largo { display: none; }
  html body .zs-herr-guion .t-corto { display: inline; }
  html body .zs-herr-guion > .btn { flex: 1 1 0; padding: 6px 6px !important; gap: 4px; }
}