/* Interfaz de la app (barra, editor, botones). La hoja del script vive en script.css.

   Lenguaje visual inspirado en Hex (hex.tech), con nuestros colores: esquinas casi rectas,
   bordes de 1 px, fondo cuadriculado, etiquetas de sección en mayúsculas monoespaciadas,
   títulos en negrita apretada con acento en serif itálica, y el botón principal con relleno
   pastel y borde oscuro. */
/* Tokens del design system (docs/DESIGN.md). Usa siempre estas variables: un valor
   escrito a mano es una excepción y se comenta. */
:root {
  /* Color: superficies y tinta */
  --bg: #f5f2ea;            /* papel cálido (fondo de página) */
  --surface: #fffdf8;       /* tarjetas, barras, paneles */
  --field: #fff;            /* campos y botones claros */
  --paper: #fffdf7;         /* papel de la hoja (paso 2, miniaturas) */
  --fg: #1f1a14;            /* tinta */
  --fg-soft: #4a4238;       /* texto secundario largo (mensajes de diálogo) */
  --muted: #6f665a;         /* texto de apoyo, íconos */
  --muted-soft: #a99f8e;    /* marcadores de posición, números de línea */
  --line: #e3dccb;          /* bordes suaves */
  --line-strong: #cbc0a8;   /* bordes de campos y botones */
  --hover: #1f1a140d;       /* fondo al pasar el mouse sobre algo sin borde */
  --code-bg: #efe7d4;
  --gutter: #f8f4ea;        /* columna de números de línea */
  --grid: #8a5a0010;        /* cuadrícula del fondo */
  --backdrop: #1f1a1466;    /* fondo detrás de un diálogo */
  /* Tintes de las secciones del editor (Canción, Reparto, Efectos, Diseño): apenas
     distintos entre sí para separar recuadros vecinos; la Letra va en --field. */
  --tint-song: #fdfaf1;
  --tint-cast: #f9f9f2;
  --tint-extras: #faf7f8;
  --tint-design: #fcf6f2;
  /* Color: acento */
  --primary: #8a5a00;       /* dorado oscuro */
  --primary-tint: #f8ebcf;  /* relleno pastel del botón principal y de lo seleccionado */
  --primary-ink: #4a3000;   /* texto sobre el relleno pastel */
  /* Color: estados (fondo, borde, color, texto oscuro) */
  --ok-bg: #edf8f0; --ok-line: #b3e2c3; --ok-fg: #3f8a5c; --ok-ink: #22543d;
  --warn-bg: #fff4d6; --warn-line: #ecc94b; --warn: #b7791f; --warn-ink: #3d2c00;
  --danger-bg: #fff5f5; --danger-line: #f0b4b4; --danger: #c53030; --danger-ink: #9b2c2c;
  /* Tipografía */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --font-accent: "Playfair Display", Georgia, serif;
  --text-2xs: .625rem;  /* números y ejes de gráficos */
  --text-xs: .72rem;    /* etiquetas de sección (.eyebrow), notas mínimas */
  --text-sm: .8rem;     /* ayudas, botones chicos, metadatos */
  --text-md: .875rem;   /* texto de apoyo, avisos, listas densas */
  --text-base: 1rem;
  --text-lg: 1.15rem;   /* subtítulos */
  --text-xl: 1.35rem;   /* títulos de diálogo y de tarjeta */
  --text-2xl: 2rem;     /* títulos de página */
  /* Forma */
  --radius: 4px;        /* casi recto: botones, campos, tarjetas */
  --radius-sm: 2px;     /* tarjetas con esquinas decorativas, código */
  --radius-pill: 999px; /* pills y chips */
  /* Separaciones (margin, padding, gap): múltiplos de 2 px */
  --space-3xs: .125rem;   /* 2 px: separaciones mínimas (chips, filas densas) */
  --space-2xs: .25rem;    /* 4 px */
  --space-xs: .375rem;    /* 6 px: relleno vertical de controles chicos */
  --space-sm: .5rem;      /* 8 px: lo más común entre elementos */
  --space-md: .75rem;     /* 12 px */
  --space-lg: 1rem;       /* 16 px: relleno de tarjetas y paneles */
  --space-xl: 1.25rem;    /* 20 px */
  --space-2xl: 1.5rem;    /* 24 px: entre secciones */
  --space-3xl: 2rem;      /* 32 px */
  --space-4xl: 3rem;      /* 48 px: bloques de la portada */
  --space-5xl: 4rem;      /* 64 px */
  /* Barra superior: su alto en desktop. --header-h = barra + avisos (lo mide maintenance.js);
     la barra lateral se fija justo debajo. */
  --topbar-h: 3.25rem;    /* 52 px */
  --header-h: var(--topbar-h);
  /* Profundidad */
  --shadow-sm: 0 2px 10px #0000000f;  /* tarjetas al pasar el mouse, la hoja */
  --shadow-md: 0 8px 24px #00000022;  /* menús, paneles flotantes, avisos */
  --shadow-lg: 0 20px 60px #00000038; /* diálogos */
  --z-dropdown: 5;      /* sugerencias y menús dentro de un formulario */
  --z-sticky: 8;        /* barras fijas dentro del contenido */
  --z-sticky-top: 9;    /* pestañas del editor, menú lateral en móvil */
  --z-topbar: 10;
  --z-popover: 20;      /* menús de la barra y paneles flotantes */
  --z-overlay: 30;      /* avisos flotantes y lo que se arrastra */
  /* Movimiento (nada se mueve si el sistema pide reducir movimiento) */
  --dur-fast: 120ms;    /* hover, presionar */
  --dur: 200ms;         /* abrir menús, paneles y desplegables */
  --dur-slow: 350ms;    /* avisos que se desvanecen */
  --ease: cubic-bezier(.2, .7, .3, 1);
  font-family: var(--font-ui);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Doble toque sin zoom (en el editor se toca mucho y la vista se descuadraba); pellizcar
   para hacer zoom sigue funcionando. */
html { touch-action: manipulation; }
body { margin: 0; background: var(--bg); color: var(--fg); }
/* Fondo cuadriculado (no en el editor ni en la hoja: ahí distrae). */
body:not(.editor, .view) {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 100vh;
}
main { padding: var(--space-lg); }
code { background: var(--code-bg); padding: 0 .25em; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .85em; }
h1 { letter-spacing: -.02em; line-height: 1.1; }
/* Links: tinta del acento, subrayado separado (la hoja del script tiene sus propios estilos). */
a { color: var(--primary-ink); text-underline-offset: 3px; }
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: 0; }
/* Etiqueta de sección: pequeña, mayúsculas, monoespaciada (como "TRUSTED BY…" en Hex). */
.eyebrow, form legend, .auth-card h2, .pane-title, .list-page h2 {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Un <details> cerrado no muestra su contenido. Firefox igual lo mide y, si es alto (la
   tabla de «Cifras» en la barra fija), alarga la página con espacio vacío al final. */
details:not([open]) > :not(summary) { display: none; }
/* Desplegable (.disclosure): flecha › que gira a ˅ al abrir; el contenido se desliza. Es el
   único marcador de desplegable de la interfaz (no el triángulo del navegador). */
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 .6em .15em .15em;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; vertical-align: middle;
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease);
}
.disclosure[open] > summary::before { transform: rotate(45deg) translate(-.1em, -.1em); }
/* La misma flecha en un menú que se abre con su propio botón (acceso general en Compartir). */
.menu-caret {
  display: inline-block; flex: none; width: .42em; height: .42em; margin: 0 .25em .2em;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
details[open] > summary .menu-caret { transform: rotate(-135deg) translate(-.15em, -.15em); }
.topbar {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg); background: var(--surface); border-bottom: 1px solid var(--line);
}
/* La barra y los avisos se quedan arriba juntos al hacer scroll. */
.site-header { position: sticky; top: 0; z-index: var(--z-topbar); }
/* Alto exacto en desktop: la barra lateral (sticky, top: --topbar-h) queda pegada debajo en
   todas las páginas, también en las largas. En el teléfono crece con el botón del menú. */
@media (min-width: 701px) { .topbar { box-sizing: border-box; height: var(--topbar-h); } }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 800; letter-spacing: -.02em; color: inherit; text-decoration: none; margin-right: auto; white-space: nowrap; }
/* Ícono chico de la marca (favicon.svg): 22 px, del alto de la letra de la barra con aire. */
.brand-icon { width: 22px; height: 22px; flex: none; }
.topbar .btn { white-space: nowrap; }
/* En la vista del script, en móvil, la barra tiene varios botones: solo el ícono. */
@media (max-width: 480px) { body:is(.view, .editor) .brand-text { display: none; } }
@media (max-width: 480px) {
  .topbar { gap: var(--space-xs); padding: var(--space-sm) var(--space-md); }
  .topbar .btn { padding: var(--space-sm) var(--space-md); }
}
/* Menú ⋯ del permalink (view.js): en desktop no existe (todo en la barra); en pantallas
   angostas agrupa Compartir, ajustes de lectura y PDF. */
.nav-more, .nav-more-items { display: contents; }
.topbar .nav-more-toggle, .topbar .in-menu, .topbar .menu-icon { display: none; }
@media (max-width: 600px) {
  .nav-more.is-ready { display: block; position: relative; }
  .nav-more.is-ready .nav-more-toggle { display: inline-flex; font-size: var(--text-lg); line-height: 1; }
  .nav-more.is-ready .nav-more-items {
    display: none; position: absolute; top: calc(100% + .4rem); right: 0; z-index: var(--z-overlay);
    min-width: 13rem; padding: var(--space-2xs); flex-direction: column; gap: var(--space-3xs);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  .nav-more.is-ready.is-open .nav-more-items { display: flex; }
  .nav-more.is-ready .nav-more-items .btn {
    width: 100%; justify-content: flex-start; text-align: left; border-color: transparent; background: none;
  }
  .nav-more.is-ready .nav-more-items .btn:hover { background: var(--primary-tint); }
  .nav-more.is-ready .in-menu { display: inline; }
  .nav-more.is-ready .not-in-menu { display: none; }
  .nav-more.is-ready .menu-icon { display: inline-block; flex: none; margin-right: var(--space-sm); color: var(--muted); }
  .nav-more.is-open .nav-more-toggle { background: var(--primary-tint); border-color: var(--fg); }
}

.btn {
  display: inline-block; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none;
  font: inherit; font-weight: 500; text-align: center; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.btn:hover { border-color: var(--fg); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:active:not(:disabled) { transform: translateY(1px); } /* respuesta al presionar */
/* Principal: relleno pastel + borde y texto oscuros. */
.btn.primary { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--primary-tint) 70%, var(--primary) 30%); border-color: var(--primary-ink); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-2xl); }
.muted { color: var(--muted); }

/* Editor */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-lg); }
/* La barra de botones va siempre al borde inferior de la ventana, aunque el formulario sea
   corto: la página ocupa al menos toda la altura, el formulario se estira con la cuadrícula
   y la barra (sticky) se empuja al final con margin-top: auto. */
body.editor { min-height: 100dvh; display: flex; flex-direction: column; }
body.editor main { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 0; }
body.editor .editor-layout { flex: 1 0 auto; }
#script-form { display: flex; flex-direction: column; }
#script-form > .actions { margin-top: auto; }
/* minmax(0, …): que nada ancho (p. ej. la fila deslizable de personas del paso 2) estire la página. */
@media (max-width: 900px) { .editor-layout { grid-template-columns: minmax(0, 1fr); } }

form fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 0 0 var(--space-lg); }
form legend { padding: 0 var(--space-xs); }
form label { display: block; margin: var(--space-sm) 0; font-weight: 500; font-size: var(--text-base); }
form label small { font-weight: 400; color: var(--muted); }
form input:not([type=checkbox], [type=radio]), form textarea, select {
  display: block; width: 100%; margin-top: var(--space-2xs); padding: var(--space-sm) var(--space-sm);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--field);
  font: inherit; font-weight: 400; color: var(--fg);
}
/* Select con el estilo de los campos y la misma flecha que los desplegables. */
select {
  appearance: none; padding-right: var(--space-3xl);
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236f665a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .55rem center / .75rem;
  cursor: pointer;
}
form input:focus, form textarea:focus, select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--muted-soft); }
/* Selector con vista previa (option-picker.js): se ve como un select, pero cada opción se
   muestra como quedaría (fuente, efecto, adorno o textura); el navegador no lo hace en las
   opciones de un <select>. */
.option-picker { position: relative; margin-top: var(--space-2xs); }
.option-picker-button {
  display: block; width: 100%; padding: var(--space-sm) var(--space-3xl) var(--space-sm) var(--space-sm); text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--fg); cursor: pointer;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236f665a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .55rem center / .75rem;
  font: inherit; font-weight: 400; font-size: var(--text-lg); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.option-picker-button:focus-visible, .option-picker-button[aria-expanded="true"] { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.option-picker-list {
  position: absolute; top: calc(100% + var(--space-2xs)); left: 0; z-index: var(--z-dropdown);
  width: max(100%, 15rem); max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2xs);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md);
  animation: reveal var(--dur) var(--ease);
}
.option-picker-group { margin: var(--space-xs) var(--space-sm) var(--space-2xs); font: 600 var(--text-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.option-picker-option { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-lg); line-height: 1.35; font-weight: 400; color: var(--fg); cursor: pointer; }
.option-picker-option:hover, .option-picker-option:focus { outline: none; background: color-mix(in srgb, var(--surface) 88%, var(--muted)); }
.option-picker-option[aria-selected="true"] { background: var(--primary-tint); }
.option-picker-list.opens-up { top: auto; bottom: calc(100% + var(--space-2xs)); }
/* Muestras (efecto, adorno, textura): un cuadrito con el color del papel o del fondo. */
.option-picker-current, .option-picker-option { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.option-picker-current > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.opt-swatch { flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 3rem; height: 2rem; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.option-picker-button .opt-swatch { height: 1.6rem; }
/* Paleta de integrantes: sus colores en fila, sobre el papel del tema. */
.opt-swatch.opt-palette { display: inline-flex; gap: 2px; width: auto; min-width: 3rem; padding: 0 var(--space-2xs); }
.opt-palette i { width: .6rem; height: .6rem; border-radius: var(--radius-pill); }
.opt-swatch.sheet { max-width: none; font-size: 16px; line-height: 1; background: var(--paper); }
.opt-swatch.sheet h2 { margin: 0; font-size: 1.15rem; }
.option-picker-list .opt-swatch.sheet { width: 3.6rem; height: 2.4rem; }
.option-picker-list .opt-swatch.sheet h2 { font-size: 1.45rem; }
.opt-ornament { width: 2rem; place-items: start; padding: 2px; }
.opt-ornament .orn-corner { position: static; width: 100%; height: 100%; }
.option-picker-effect .option-picker-option, .option-picker-ornament .option-picker-option, .option-picker-texture .option-picker-option { font-size: var(--text-md); }
.option-picker-effect .option-picker-button, .option-picker-ornament .option-picker-button, .option-picker-texture .option-picker-button { font-size: var(--text-md); }
/* Transparencia de los recuadros (theme-editor.js la muestra solo si no son sólidos). */
.theme-opacity[hidden] { display: none; }
.theme-range { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-2xs); }
.theme-range input[type="range"] { flex: 1; accent-color: var(--primary); }
.theme-range output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.option-picker-list [role="group"] + [role="group"] { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px dashed var(--line-strong); }
form textarea { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-md); resize: vertical; }
/* Pantallas táctiles: iOS hace zoom al enfocar un campo con letra menor a 16 px (y la vista
   queda descuadrada). Excepción a los tokens: 16 px es el umbral de iOS. */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"]), textarea, select { font-size: max(1rem, 16px) !important; }
}
label.check { font-weight: 400; }
/* Controles amplios y bordes finos, siguiendo las tarjetas de selección de Hex. */
label.check { display: flex; align-items: center; gap: var(--space-sm); min-height: 2.6rem; cursor: pointer; }
input[type="checkbox"], input[type="radio"] {
  appearance: none; display: inline-grid; place-content: center; flex: 0 0 1.25rem;
  width: 1.25rem; height: 1.25rem; margin: 0; border: 1px solid var(--line-strong);
  background: var(--surface); vertical-align: middle; cursor: pointer;
}
input[type="checkbox"] { border-radius: var(--radius); }
input[type="radio"] { border-radius: 50%; }
input[type="radio"]::before {
  content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: var(--primary); transform: scale(0);
}
input[type="checkbox"]::before {
  content: ""; width: .35rem; height: .65rem; border: solid var(--primary);
  border-width: 0 2px 2px 0; transform: translateY(-.1rem) rotate(45deg) scale(0);
}
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:checked::before { transform: translateY(-.1rem) rotate(45deg) scale(1); }
input:is([type="radio"], [type="checkbox"]):checked { border-color: var(--primary); background: var(--primary-tint); }
@media (forced-colors: active) {
  input[type="checkbox"], input[type="radio"] { appearance: auto; }
  input[type="checkbox"]::before, input[type="radio"]::before { display: none; }
}
.help { font-size: var(--text-md); color: var(--muted); margin-top: 0; }
.lane-editor { margin-bottom: var(--space-md); }
.lane-bar { display: flex; gap: var(--space-xs); }
.lane-bar input { margin-top: 0 !important; font-weight: 600 !important; }
.remove-lane {
  display: grid; place-items: center; width: 2.4rem; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--muted); cursor: pointer;
}
/* Quitar o borrar algo de una lista: papelera neutra que se pone roja al pasar el mouse. */
.remove-lane:hover, .remove-btn:hover, .cast-row .remove:hover { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
.remove-btn { color: var(--muted); }
.remove-btn svg, .cast-row .remove svg { display: block; margin: auto; }
.lane-editor:first-child .remove-lane { display: none; } /* la voz principal no se borra */
.actions {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm);
  position: sticky; bottom: 0; padding: var(--space-md) 0; background: var(--bg);
  container-type: inline-size; /* lo que se acorta depende del ancho de la barra */
}
.btn.discard { background: var(--field); }
/* «Enviar comentarios» a la izquierda de la barra, luego «Cifras»; Descartar y Guardar a la
   derecha. Cuando la barra se angosta se acorta, en orden: comentarios queda en ícono,
   «Guardar cambios» pasa a «Guardar» y se oculta la barrita de «Cifras». */
.actions .feedback-link { margin-right: auto; display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--muted); align-self: stretch; }
.actions .feedback-link:hover { color: var(--fg); }
.feedback-link svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.actions .label-short { display: none; }
.actions .btn { white-space: nowrap; }
@container (max-width: 620px) {
  .actions .feedback-link { padding-inline: var(--space-md); }
  .actions .feedback-label { display: none; }
}
@container (max-width: 480px) {
  .actions .label-long { display: none; }
  .actions .label-short { display: inline; }
}
@container (max-width: 380px) {
  .actions .btn { padding-inline: var(--space-md); }
  .actions .stats-mini { display: none; }
}
@media (max-width: 400px) { .actions { gap: var(--space-xs); } }
.section-actions { display: flex; justify-content: flex-end; margin-top: var(--space-sm); }

/* Pestañas Editar / Vista previa (móvil) */
.editor-tabs {
  position: sticky; top: 0; z-index: var(--z-sticky-top);
  display: flex; gap: var(--space-2xs); padding: var(--space-2xs); margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-lg);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.editor-tabs button {
  flex: 1; padding: var(--space-sm); border: 1px solid transparent; border-radius: var(--radius); background: none;
  font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
}
.editor-tabs button[aria-selected="true"] { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-ink); }
.editor-tabs button { white-space: nowrap; }
@media (max-width: 400px) { .editor-tabs button { padding-inline: var(--space-2xs); font-size: var(--text-md); } }
.warn-count { color: var(--warn); }
.editor-tabs[hidden] { display: none; }
@media (min-width: 901px) { .editor-tabs { display: none; } }
@media (max-width: 900px) {
  body.editor .site-header { position: static; }
  .editor-layout.tabs-on[data-tab="edit"] .preview-pane { display: none; }
  /* «Vista previa»: del formulario solo queda la barra de botones (Crear script / Guardar).
     display: contents la deja como hija de la cuadrícula, después de la vista previa y
     pegada al borde inferior aunque la hoja sea larga o corta. */
  .editor-layout.tabs-on[data-tab="preview"] { grid-template-rows: 1fr auto; row-gap: 0; }
  .editor-layout.tabs-on[data-tab="preview"] #script-form { display: contents; }
  .editor-layout.tabs-on[data-tab="preview"] #script-form > :not(.actions) { display: none; }
  .editor-layout.tabs-on[data-tab="preview"] #script-form > .actions { order: 2; }
  .editor-layout.tabs-on .pane-title { display: none; }
  .editor-layout.tabs-on .editor-step-nav .steps { display: none; } /* van en las pestañas */
  .editor-layout.tabs-on .editor-step-nav { margin-bottom: 0; } /* sin pasos queda vacía, salvo la sugerencia */
  .editor-layout.tabs-on .editor-step-nav .editor-tip:not([hidden]) { margin-bottom: var(--space-lg); }
}

.preview-pane { position: sticky; top: 3.5rem; align-self: start; max-height: calc(100vh - 4.5rem); overflow: auto; }
@media (max-width: 900px) { .preview-pane { position: static; max-height: none; } }
.pane-title { font-size: var(--text-base); margin: 0 0 var(--space-sm); }
.warnings { list-style: none; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); font-size: var(--text-md); }
.warnings li + li { margin-top: var(--space-2xs); }
.warnings .btn.small { margin: var(--space-2xs) 0 var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); }
.tag-pill {
  margin: var(--space-2xs) 0 var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-sm); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); background: var(--field); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.tag-pill:hover { background: var(--primary-tint); border-color: var(--primary); }
.tag-pill:disabled { opacity: .45; cursor: default; }
/* Fila agregada desde una etiqueta desconocida: brilla un momento. */
.cast-row.is-added { animation: row-added 2.4s ease-out; }
@keyframes row-added { 0%, 40% { background: var(--primary-tint); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cast-row.is-added { animation: none; } }
/* Nota bajo «Mostrar etiquetas» (contrast.py): aparece al tocar el checkbox, nunca después. */
.tags-hint { margin: calc(-1 * var(--space-2xs)) 0 var(--space-xs) var(--space-3xl); font-size: var(--text-md); color: var(--primary); }

.editor-feedback { margin: 0 0 var(--space-lg); color: var(--primary-ink); }
.editor-feedback p { margin: var(--space-xs) 0; }
.editor-error { margin: 0 0 var(--space-lg); }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Permalink */
body.view main { padding: var(--space-lg) 0; }
.sheet-wrap { padding: 0 var(--space-sm); }
@media (max-width: 700px) { .sheet-wrap { padding: 0 var(--space-2xs); } }
.sheet-wrap .sheet { box-shadow: var(--shadow-sm); border-radius: var(--radius); }

@media print {
  .site-header { display: none; }
  body, main, .sheet-wrap { padding: 0; margin: 0; background: none; }
  .sheet-wrap .sheet { box-shadow: none; }
}

/* Ajustes de lectura (permalink) */
.reading-panel {
  background: var(--field); border-bottom: 1px solid var(--line);
  padding: var(--space-sm) var(--space-lg); display: grid; gap: var(--space-sm);
  position: absolute; top: 100%; left: 0; right: 0;
  box-shadow: var(--shadow-md);
}
.reading-panel[hidden] { display: none; }
/* En desktop, un panel flotante bajo «Aa» del ancho de su contenido, no una franja. */
@media (min-width: 701px) {
  .reading-panel {
    left: auto; right: 1rem; width: max-content; max-width: calc(100vw - 2rem); /* view.js fija left */
    border: 1px solid var(--line); border-radius: var(--radius);
  }
}
.reading-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.reading-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.reading-label { font-weight: 600; font-size: var(--text-md); min-width: 5rem; }
.reading-note { flex-basis: 100%; margin: 0; font-size: var(--text-md); color: var(--muted); }
.reading-more summary { cursor: pointer; width: max-content; font-size: var(--text-md); font-weight: 600; }
.reading-more[open] summary { margin-bottom: var(--space-xs); }
.reading-panel .btn { padding: var(--space-xs) var(--space-md); }
.reading-panel .btn.link { border: 0; background: none; text-decoration: underline; color: var(--muted); }
#size-value { min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.segmented button {
  min-width: 2.6rem; padding: var(--space-xs) var(--space-md); border: 0; border-left: 1px solid var(--line);
  background: var(--field); font: inherit; cursor: pointer;
}
.segmented button:first-child { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
/* El mismo segmentado con links (filtros de la galería): la opción activa lleva aria-current. */
.segmented a { padding: var(--space-xs) var(--space-md); border-left: 1px solid var(--line); background: var(--field); color: inherit; text-decoration: none; white-space: nowrap; }
.segmented a:first-child { border-left: 0; }
.segmented a:hover { background: var(--primary-tint); }
.segmented a[aria-current] { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.segmented a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* El mismo segmentado con radios (funciona sin JS): Diseño › Etiquetas. */
.segmented label { position: relative; margin: 0; font-size: inherit; font-weight: 400; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-left: 1px solid var(--line); background: var(--field); cursor: pointer; }
.segmented label:first-child { border-left: 0; }
.segmented label:has(input:checked) { background: var(--primary-tint); color: var(--primary-ink); font-weight: 600; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
@media (min-width: 701px) { .mobile-only { display: none; } }
#reading-toggle[aria-expanded="true"] { background: var(--bg); border-color: var(--primary); }
body.view main { padding-top: var(--space-lg); }

/* Editor de integrantes y grupos en filas (cast-editor.js) */
.cast-section { margin-bottom: var(--space-lg); }
.cast-section h3 { font-size: var(--text-base); margin: var(--space-sm) 0 var(--space-xs); }
.cast-section h3 small { font-weight: 400; color: var(--muted); }
.cast-head, .cast-row.member {
  display: grid; grid-template-columns: 1.8rem 4rem minmax(0, 1fr) auto 2rem;
  gap: var(--space-xs); align-items: center;
}
.cast-head { font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-2xs); }
.cast-head span:first-child { grid-column: 2; }
.cast-head span:nth-child(3) { grid-column: 4 / span 2; }
.cast-palette { margin-bottom: var(--space-md); }
.member-drag {
  padding: var(--space-xs) 0; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: var(--text-xl); cursor: grab; touch-action: none; user-select: none;
}
.member-drag:active { cursor: grabbing; }
.cast-row.member { padding: var(--space-2xs); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cast-row.is-dragging { opacity: .25; border-style: dashed; }
.member-drag-ghost { position: fixed !important; z-index: var(--z-overlay); pointer-events: none; box-shadow: var(--shadow-md); }
.cast-row { margin-bottom: var(--space-xs); }
.cast-row.team {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 2.2rem; gap: var(--space-xs); align-items: center;
  padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius);
}
form .cast-row input:not([type=color]) { margin-top: 0; }
form .cast-row input.code { font-weight: 600; }
form .cast-row input.dup { border-color: var(--danger); background: var(--danger-bg); }
.color-box { display: flex; align-items: center; gap: var(--space-3xs); position: relative; }
/* Poco contraste con el fondo del tema: una marca sobre la muestra, sin mover la fila. */
.color-box.low-contrast::after {
  content: "!"; position: absolute; top: -.35rem; left: 1.9rem; width: 1rem; height: 1rem;
  border-radius: 50%; background: var(--warn-line); color: var(--warn-ink); font: 700 .7rem/1rem system-ui;
  text-align: center; pointer-events: none;
}
form .cast-row input[type=color] {
  width: 2.4rem; height: 2.2rem; padding: 2px; margin: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--field); cursor: pointer;
}
.color-auto, .cast-row .remove {
  border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted); padding: var(--space-2xs);
}
.cast-row .remove { width: 2.2rem; height: 2.2rem; border-radius: var(--radius); }
.member-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.member-chip {
  --chip: var(--muted);
  padding: var(--space-2xs) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--field); font: inherit; font-size: var(--text-md); cursor: pointer; color: var(--fg-soft);
}
.member-chip[aria-pressed="true"] {
  border-color: var(--chip); color: var(--chip); font-weight: 600;
  background: color-mix(in srgb, var(--chip) 12%, #fff);
}
.btn.link { border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); padding-left: 0; }
.btn.link:hover { color: var(--fg); }

/* Pasos del editor (assign.js) */
.steps { display: flex; gap: var(--space-2xs); padding: var(--space-2xs); margin-bottom: var(--space-lg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.editor-step-nav { position: sticky; top: var(--editor-sticky-top, 3.5rem); z-index: var(--z-sticky); margin-bottom: var(--space-lg); }
.editor-step-nav .steps { margin-bottom: 0; }
@media (max-width: 900px) { .editor-step-nav { top: var(--editor-sticky-top, 3.25rem); } }
.editor-tip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--line-strong); background: var(--primary-tint); font-size: var(--text-sm); }
.editor-tip [data-tip-text] { flex: 1; min-width: 10rem; }
.tip-dismiss { border: 0; background: none; color: var(--muted); cursor: pointer; padding: var(--space-xs); }
.editor-section { scroll-margin-top: calc(var(--editor-sticky-top, 3.5rem) + 4rem); }
.steps button {
  flex: 1; padding: var(--space-sm); border: 1px solid transparent; border-radius: var(--radius); background: none;
  font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
}
.steps button[aria-selected="true"] { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-ink); }

/* Paso 2: asignar líneas */
.step-assign { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-md); margin-bottom: var(--space-lg); }
.step-assign > .help { margin-top: 0; }
/* Columnas: pestañas subrayadas (la activa, con línea dorada), distintas de las pills de personas. */
.assign-lanes { display: flex; gap: var(--space-md); margin-bottom: var(--space-sm); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.assign-lanes button {
  padding: var(--space-xs) var(--space-2xs); margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: var(--text-md); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.assign-lanes button:hover { color: var(--fg); }
.assign-lanes::-webkit-scrollbar { display: none; }
/* Centradas con márgenes automáticos (no justify-content: center, que cortaría el inicio y
   no dejaría deslizar hasta la primera cuando no caben). */
.assign-lanes button:first-child { margin-left: auto; }
.assign-lanes button:last-child { margin-right: auto; }
/* Filas que se deslizan hacia el lado (personas en el teléfono, columnas): se desvanece el
   borde que tiene más elementos escondidos (assign.js pone data-fade). */
.scroll-fade {
  --fade-left: 0px; --fade-right: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent);
}
.scroll-fade[data-fade~="left"] { --fade-left: var(--space-3xl); }
.scroll-fade[data-fade~="right"] { --fade-right: var(--space-3xl); }
/* Sin nada escondido, sin máscara: una máscara recorta todo lo que sale de la caja (p. ej. el
   contorno del tema elegido en la galería de Diseño). */
.scroll-fade:not([data-fade~="left"]):not([data-fade~="right"]) { -webkit-mask-image: none; mask-image: none; }
.assign-lanes button[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--fg); font-weight: 600; }
.assign-palette { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.pick {
  --c: var(--muted);
  padding: var(--space-xs) var(--space-md); border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); border-radius: var(--radius-pill);
  background: var(--field); color: var(--c); font: inherit; font-size: var(--text-md); font-weight: 600; cursor: pointer;
}
.pick.team { border-style: dashed; }
.pick.special { --c: var(--muted); font-weight: 500; }
.pick[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; border-style: solid; }

.assign-lines {
  max-height: 60vh; overflow: auto; padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); font-family: "Lora", Georgia, serif; font-size: var(--text-base); line-height: 1.5;
}
.a-line { position: relative; padding: var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-3xl); border-radius: var(--radius); cursor: pointer; min-height: 1.5em; }
/* Número de línea (contador CSS: no es texto, no estorba al seleccionar). Coincide con el
   número de línea del cuadro de letra del paso 1. */
.assign-lines { position: relative; counter-reset: a-line; }
.a-line { counter-increment: a-line; }
.a-line::before {
  content: counter(a-line); position: absolute; left: .2rem; top: .3rem; width: 1.5rem;
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1.2rem; text-align: right;
  color: var(--muted-soft); pointer-events: none; user-select: none;
}
/* Paso 2: al arrastrar, solo el panel donde empezó es seleccionable (assign.js). */
.assign-confine body { -webkit-user-select: none; user-select: none; }
.assign-confine .assign-lines.is-selecting { -webkit-user-select: text; user-select: text; }
.a-line.blank::before { content: none; } /* cuenta, pero no se muestra: es más baja y se montaría */
.a-line:hover { background: var(--hover); }
.a-line.blank { min-height: .8em; cursor: default; }
.a-line.blank:hover, .a-line.tag-only:hover { background: none; }
.a-line.tag-only { cursor: default; font-size: .85em; }
.a-line.sel { background: color-mix(in srgb, var(--primary) 14%, #fff); outline: 2px solid var(--primary); }
.a-tag { font-weight: 700; margin-right: .3em; user-select: none; -webkit-user-select: none; }
.a-run.assigned { color: var(--c, var(--fg)); }
.a-run.rest { color: var(--muted-soft); }
.a-run.pending { color: var(--muted); text-decoration: underline dotted; text-underline-offset: .2em; }
.a-run.sel { background: color-mix(in srgb, var(--primary) 22%, #fff); border-radius: var(--radius); }
.assign-status { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); font-size: var(--text-md); color: var(--fg-soft); min-height: 2rem; }
.assign-status .btn.link { margin-left: auto; }

/* Columnas que siguen a la principal */
.lane-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin: var(--space-xs) 0 var(--space-2xs); }
.lane-format { display: inline-flex; gap: var(--space-2xs); margin-right: auto; }
.lane-format .btn { min-width: 2rem; justify-content: center; padding-inline: var(--space-sm); font-family: Georgia, serif; }
.btn.small { padding: var(--space-2xs) var(--space-md); font-size: var(--text-md); }
/* Ícono de trazo delante del texto de un botón (Mis temas: Editar, Publicar, Duplicar). */
.btn-icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lane-editor:first-child .lane-copy { display: none; }

/* Avisos (<dialog>) */
.confirm-dialog {
  --tone: var(--primary);
  width: min(26rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--radius); border-top: 3px solid var(--tone); box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.confirm-dialog[data-tone="danger"] { --tone: var(--danger); }
.confirm-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
.confirm-dialog form { padding: var(--space-lg) var(--space-xl) var(--space-lg); }
.confirm-title { margin: 0 0 var(--space-xs); font-size: var(--text-lg); color: var(--tone); }
.confirm-message { margin: 0 0 var(--space-lg); color: var(--fg-soft); line-height: 1.4; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); }
/* Salir sin guardar: lo destructivo, separado de Seguir editando y Guardar y salir. */
.leave-dialog { width: min(33rem, calc(100vw - 2rem)); }
.leave-dialog .leave-discard { margin-right: auto; }
@media (max-width: 480px) {
  .leave-dialog .confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .leave-dialog .leave-discard { margin: var(--space-2xs) 0 0; }
}
.confirm-ok { background: var(--tone); border-color: var(--tone); color: #fff; font-weight: 600; }

/* Botones con color (mismos tonos que sus avisos) */
.btn.tone-primary, .btn.tone-danger {
  color: var(--tone); border-color: color-mix(in srgb, var(--tone) 45%, #fff);
  background: color-mix(in srgb, var(--tone) 7%, #fff); font-weight: 600;
}
.btn.tone-primary { --tone: var(--primary); }
.btn.tone-danger { --tone: var(--danger); }
.btn.tone-primary:hover, .btn.tone-danger:hover { background: color-mix(in srgb, var(--tone) 14%, #fff); }

/* Ayuda flotante de la letra (popover nativo) */
.help-toggle {
  width: 1.5rem; height: 1.5rem; margin-left: var(--space-xs); padding: 0; vertical-align: middle;
  border: 1px solid var(--primary); border-radius: 50%; background: var(--field); color: var(--primary);
  font: inherit; font-size: var(--text-md); font-weight: 700; line-height: 1; cursor: pointer;
}
.help-toggle:hover { background: var(--primary); color: #fff; }
.help-pop {
  padding: var(--space-md) var(--space-lg); border: 1px solid var(--line-strong); border-top: 3px solid var(--primary);
  border-radius: var(--radius); background: var(--surface); font-size: var(--text-md);
}
/* Flotante solo donde existe "popover"; si no, se ve como un recuadro normal en su sitio. */
@supports selector(:popover-open) {
  .help-pop {
    position: fixed; inset: auto 1rem 1rem auto; margin: 0;
    width: min(22rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto;
    box-shadow: var(--shadow-lg);
  }
}
@supports not selector(:popover-open) { .help-toggle, .help-close { display: none; } }
@media (min-width: 901px) {
  @supports selector(:popover-open) {
    .help-pop { inset: auto; left: 1rem; top: 1rem; }
  }
}
.help-pop-head { display: flex; align-items: center; justify-content: space-between; color: var(--primary); }
.help-close { border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; padding: var(--space-2xs) var(--space-xs); }
.help-pop p { margin: var(--space-xs) 0; }
.help-pop dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-sm); margin: var(--space-sm) 0; }
.help-pop dt { white-space: nowrap; }
.help-pop dd { margin: 0; }

.lanes-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); margin: var(--space-2xs) 0 var(--space-sm); }
.assign-top { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.assign-cols { display: inline-flex; gap: var(--space-2xs); }
.assign-cols .btn[aria-pressed="true"] { background: var(--primary-tint); border-color: var(--fg); font-weight: 600; }
/* Paneles: una o dos columnas a la vez (assign.js). */
.assign-panes { display: grid; gap: var(--space-md); }
.assign-panes.is-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assign-pane { min-width: 0; }
.assign-pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.assign-pane-head .assign-lanes { margin-bottom: 0; min-width: 0; flex: 1; }
form .assign-lane-select { flex: 1; min-width: 0; width: auto; margin: 0; padding: var(--space-xs) var(--space-2xl) var(--space-xs) var(--space-xs); font-weight: 600; }
.is-split .assign-lines { font-size: var(--text-base); }
@media (max-width: 700px) {
  .is-split .assign-lines { font-size: var(--text-md); padding: var(--space-xs); }
  .is-split .assign-pane-head { flex-wrap: wrap; justify-content: flex-end; }
  .is-split .assign-lane-select { flex-basis: 100%; }
}
/* Quitar todas las asignaciones (al final de la letra): link neutro, rojo solo al pasar el mouse. */
.assign-pane-foot { display: flex; justify-content: flex-end; margin-top: var(--space-xs); }
.assign-pane-foot .assign-reset { padding-right: 0; font-size: var(--text-sm); text-align: right; }
.assign-pane-foot .assign-reset:hover { color: var(--danger); }
.assign-help { margin-bottom: var(--space-md); font-size: var(--text-md); color: var(--fg-soft); }
.assign-help > summary { font-weight: 600; }
.assign-help .help { margin: var(--space-xs) 0 0; }
/* Teléfono: una columna; la letra usa el scroll de la página (sin cuadro con scroll propio) y
   las personas quedan fijas arriba, en una fila que se desliza hacia el lado. */
@media (max-width: 700px) {
  .assign-top { display: none; }
  .assign-lines { max-height: none; overflow: visible; }
  .assign-palette-bar {
    position: sticky; top: var(--assign-sticky-top, 0px); z-index: var(--z-sticky);
    margin: 0 calc(-1 * var(--space-md)) var(--space-sm); padding: var(--space-2xs) var(--space-md);
    background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .assign-palette { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: var(--space-2xs) 0; }
  .assign-palette::-webkit-scrollbar { display: none; }
  .assign-palette .pick { flex: none; white-space: nowrap; }
}
.confirm-dialog[data-tone="warning"] { --tone: var(--warn); }
.confirm-list { margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); padding-left: var(--space-xl); color: var(--fg-soft); line-height: 1.4; }
.confirm-list li + li { margin-top: var(--space-2xs); }

/* Barra: inicial de quien inició sesión (lleva a "Mis scripts") */
.avatar {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none;
  border-radius: 50%; border: 1px solid var(--primary); background: var(--primary-tint);
  color: var(--primary-ink); font-weight: 700; text-decoration: none;
}
.avatar:hover { background: color-mix(in srgb, var(--primary-tint) 70%, var(--primary) 30%); }
/* Menú de la cuenta: se abre bajo el círculo, alineado a la derecha. */
.admin-badge { flex: none; font: 600 .65rem var(--font-mono); letter-spacing: .06em; padding: var(--space-2xs) var(--space-xs); color: var(--fg); background: var(--primary-tint); border: 1px solid var(--line-strong); text-decoration: none; }
.admin-page { max-width: 52rem; margin: var(--space-3xl) auto; padding: 0 var(--space-lg); }
.admin-status { border: 1px solid var(--line); background: var(--surface); padding: var(--space-lg); margin: var(--space-lg) 0; }
/* Catálogo del design system (/admin/design) */
.design-page h2.eyebrow { margin: var(--space-3xl) 0 var(--space-md); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--line); }
.design-brand { display: flex; flex-wrap: wrap; gap: var(--space-2xl); align-items: end; }
.design-brand figure { margin: 0; display: grid; justify-items: start; gap: var(--space-sm); }
.design-brand figcaption { font-size: var(--text-sm); color: var(--muted); }
.design-brand .brand { margin-right: 0; }
.design-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-sm); }
.design-swatch { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: var(--space-sm); align-items: center; font-size: var(--text-sm); }
.design-swatch code { justify-self: start; }
.design-swatch small { grid-column: 2; color: var(--muted); font-size: var(--text-xs); }
.design-chip { grid-row: span 2; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.design-stack .design-type { margin: var(--space-xs) 0; }
.design-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.design-box { display: grid; gap: var(--space-2xs); width: 10rem; padding: var(--space-md); border: 1px solid var(--line); background: var(--surface); font-size: var(--text-sm); }
.design-box small { color: var(--muted); font-size: var(--text-xs); }
.design-table { margin-top: var(--space-lg); border-collapse: collapse; font-size: var(--text-sm); }
.design-table td { padding: var(--space-2xs) var(--space-md) var(--space-2xs) 0; border-bottom: 1px solid var(--line); }
.design-space-bar { display: block; height: .75rem; background: var(--primary-tint); border: 1px solid var(--primary); box-sizing: content-box; }
.design-form { max-width: 24rem; }
.design-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-xl); }
.design-cards .auth-card { margin: 0; }
.design-toast.toast { position: static; transform: none; margin-top: var(--space-lg); }
.design-options.permission-popover { position: static; width: min(19rem, 100%); }
.admin-status code { overflow-wrap: anywhere; }
.admin-status form + form { margin-top: var(--space-md); }
.admin-status label { display: block; margin-bottom: var(--space-lg); }
.admin-status textarea { display: block; width: 100%; box-sizing: border-box; }
.maintenance-history { padding-left: var(--space-xl); }
.maintenance-history li { margin-bottom: var(--space-md); overflow-wrap: anywhere; }
/* Banda de solo lectura (cuenta suspendida o «Ver como»), bajo la barra superior. */
.read-only-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs) var(--space-md); padding: var(--space-xs) var(--space-md); background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--warn-line); font-size: var(--text-sm); text-align: center; }
.read-only-banner form { margin: 0; }
/* Administración: cifras, cuentas y actividad. */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0 var(--space-md); }
.admin-stats > div { border: 1px solid var(--line); background: var(--surface); padding: var(--space-md) var(--space-lg); }
.admin-stats dt { font-size: var(--text-sm); color: var(--muted); }
.admin-stats dd { margin: var(--space-2xs) 0; font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-stats small { color: var(--muted); font-size: var(--text-xs); }
.admin-actions, .admin-filter { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
/* Panel de Administración (admin.html): en desktop, estado y cifras a la izquierda y las
   herramientas a la derecha; Mantenimiento abajo, a todo el ancho. */
@media (min-width: 1200px) {
  .admin-home { max-width: 72rem; }
  .admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); align-items: start; }
}
.admin-home .admin-stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
/* «Ver cuentas» y «Ver actividad»: botones grandes, del mismo ancho, con ícono. */
.admin-big-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.admin-big-link { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-lg); font-size: var(--text-lg); font-weight: 600; }
.admin-big-link svg, .admin-tool svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) { .admin-big-links { grid-template-columns: minmax(0, 1fr); } }
/* Herramientas: una fila por herramienta (ícono, nombre y qué hace, contador si hay algo
   pendiente, flecha); toda la fila es el link. */
.admin-tools { list-style: none; margin: var(--space-lg) 0; padding: var(--space-2xs); border: 1px solid var(--line); background: var(--surface); }
.admin-tools li + li { border-top: 1px solid var(--line); }
.admin-tool { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.admin-tool:hover { background: var(--primary-tint); }
.admin-tool:hover b { text-decoration: underline; text-underline-offset: 3px; }
.admin-tool-icon { color: var(--muted); }
.admin-tool-text { display: grid; gap: var(--space-3xs); flex: 1; min-width: 0; }
.admin-tool-text small { color: var(--muted); font-size: var(--text-sm); }
.admin-tool .admin-tool-chevron { width: 16px; height: 16px; color: var(--muted); }
.admin-tool-warning { color: var(--danger-ink); font-weight: 600; }
/* Contador de pendientes (dorado): en las filas de Administración. */
.count-badge { flex: none; min-width: 1.75rem; padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--primary); border-radius: var(--radius-pill); background: var(--primary-tint); color: var(--primary-ink); font-size: var(--text-sm); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.admin-actions form + form, .admin-actions form { margin: 0; }
.admin-filter { margin: var(--space-lg) 0 var(--space-sm); }
.admin-filter > * { width: auto; margin: 0; }
.admin-filter input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); background: var(--surface); border: 1px solid var(--line); }
.admin-table th, .admin-table td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { font-size: var(--text-sm); color: var(--muted); font-weight: 600; white-space: nowrap; }
.admin-table td { overflow-wrap: anywhere; }
/* En el teléfono, cada cuenta es una tarjeta: el nombre arriba y los datos con su etiqueta
   (data-label) debajo, en vez de una tabla con columnas de dos letras. */
@media (max-width: 560px) {
  .admin-table thead { display: none; }
  .admin-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs) var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); }
  .admin-table td { padding: 0; border: 0; }
  .admin-table td:first-child { grid-column: 1 / -1; }
  .admin-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--text-xs); }
}
.admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-lg); }
.admin-facts dt { color: var(--muted); }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .admin-facts { grid-template-columns: 1fr; } .admin-facts dd { margin-bottom: var(--space-xs); } }
.activity-list { list-style: none; padding: 0; margin: var(--space-md) 0; font-size: var(--text-md); }
.activity-list li { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.activity-list time { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .activity-list li { grid-template-columns: 1fr; gap: var(--space-3xs); } }

/* Comentarios (feedback.py): formulario (página o modal) y lista en Administración.
   Con «.feedback-form» delante para ganarle a las reglas generales de «form label/fieldset». */
.feedback-page { padding: 0 var(--space-lg); }
.feedback-dialog .feedback-page { margin: 0; padding: 0; max-width: none; }
.feedback-dialog h1 { font-size: var(--text-xl); }
.feedback-dialog .auth-card:last-child { margin-bottom: 0; }
body:has(#feedback-dialog[open]) { overflow: hidden; }
.feedback-form .feedback-kinds { border: 0; background: none; padding: 0; margin: 0 0 var(--space-lg); display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-xs) var(--space-sm); }
.feedback-form .feedback-kinds legend { padding: 0; margin-bottom: var(--space-xs); font-weight: 600; }
.feedback-form .feedback-kind {
  display: inline-flex; align-items: center; gap: var(--space-sm); box-sizing: border-box; height: 2.5rem;
  margin: 0; padding: 0 var(--space-md); line-height: 1; white-space: nowrap; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer;
}
.feedback-form .feedback-kind:has(input:checked) { border-color: var(--line-strong); background: var(--primary-tint); }
.feedback-form textarea { margin-bottom: var(--space-md); }
.feedback-form .feedback-attach { display: flex; gap: var(--space-sm); align-items: flex-start; margin: 0 0 var(--space-md); font-weight: 600; }
.feedback-attach input { margin-top: var(--space-3xs); }
.feedback-attach small { display: block; font-weight: 400; margin-top: var(--space-2xs); }
.feedback-privacy { margin: 0 0 var(--space-lg); }
.feedback-item.is-new { border-color: var(--line-strong); }
.feedback-meta { overflow-wrap: anywhere; }
.feedback-message { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg, transparent); border-left: 2px solid var(--line-strong); padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); }
.feedback-agent { font-size: var(--text-xs); overflow-wrap: anywhere; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.feedback-actions form, .admin-status .feedback-actions form + form { margin: 0; }
.menu-count { display: inline-block; min-width: 1.2rem; padding: 0 var(--space-xs); margin-left: var(--space-2xs); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--primary-tint); font-size: var(--text-xs); text-align: center; line-height: 1.2rem; }
.maintenance-banner { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--primary-tint); border-bottom: 1px solid var(--line-strong); font-size: var(--text-md); }
.maintenance-banner[hidden] { display: none; }
.maintenance-message { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.maintenance-countdown { flex: none; min-width: 3.75rem; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font: 600 .75rem var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
@media print { .maintenance-banner, .admin-badge { display: none; } }
.account-menu { position: relative; flex: none; }
.account-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu[open] > summary { background: color-mix(in srgb, var(--primary-tint) 70%, var(--primary) 30%); }
.account-menu-items {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: var(--z-popover);
  min-width: 13.5rem; max-width: calc(100vw - 1.5rem); padding: var(--space-2xs);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
}
.account-menu-who {
  margin: 0 0 var(--space-2xs); padding: var(--space-sm) var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--line);
  display: grid; gap: var(--space-3xs); font-size: var(--text-md); overflow-wrap: anywhere;
}
.account-menu-who span { color: var(--muted); font-size: var(--text-sm); }
.account-menu-items a, .account-menu-items button {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-sm);
  border: 0; border-radius: var(--radius); background: none; color: var(--fg);
  font: inherit; font-size: var(--text-base); text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu-items a:hover, .account-menu-items button:hover { background: var(--primary-tint); }
.account-menu-items svg {
  width: 16px; height: 16px; flex: none; color: var(--muted);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.account-menu-items form { margin: var(--space-2xs) 0 0; padding-top: var(--space-2xs); border-top: 1px solid var(--line); }
/* «Entrar» en la barra: un botón sin borde (no un link subrayado), con fondo gris al pasar. */
.topbar .btn.link {
  padding: var(--space-sm) var(--space-md); margin-right: var(--space-2xs); text-decoration: none; color: var(--fg); font-weight: 600;
}
.topbar .btn.link:hover { background: var(--hover); color: var(--fg); }

/* Link para compartir + botón "Compartir…" en el editor */

/* Cuentas, compartir, desbloquear: una columna angosta */
.auth-page { max-width: 28rem; margin: var(--space-4xl) auto; }
.auth-page h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-lg); }
.auth-page h1:has(+ p) { margin-bottom: var(--space-xs); }
.auth-page > p { margin: 0 0 var(--space-xl); }
.auth-page > p:not(.form-ok, .form-error, .form-notice) { color: var(--muted); }
.auth-card h2 { margin: 0 0 var(--space-md); }
/* Tarjeta con marcas en las esquinas (como las de Hex). */
.auth-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--space-lg) var(--space-xl); margin: 0 0 var(--space-xl);
}
/* Esquinas decorativas (sello de la marca, como las de Hex): solo en tarjetas de formulario,
   las tarjetas de la portada y el ítem activo del menú lateral. Nunca en listas ni paneles. */
.auth-card::before, .home-card::before, .workspace-link[aria-current="page"]::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  --c: var(--line-strong);
  background:
    linear-gradient(var(--c), var(--c)) top left / 9px 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px 9px,
    linear-gradient(var(--c), var(--c)) top right / 9px 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px 9px,
    linear-gradient(var(--c), var(--c)) bottom left / 9px 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 9px,
    linear-gradient(var(--c), var(--c)) bottom right / 9px 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 9px;
  background-repeat: no-repeat;
}
.auth-card label:first-of-type { margin-top: 0; }
.account-username > summary { cursor: pointer; color: var(--muted); }
.account-username[open] > summary { margin-bottom: var(--space-md); }
.account-username-value {
  display: block; margin: var(--space-xs) 0 0 var(--space-lg); color: var(--fg); overflow-wrap: anywhere;
}
.auth-alt { text-align: center; color: var(--muted); }
.auth-back { margin: 0 0 var(--space-sm); }
.auth-link summary { cursor: pointer; font-weight: 600; }
.auth-link form { margin-top: var(--space-sm); }
.btn.wide { width: 100%; margin-top: var(--space-xs); }
.code-input { font-size: var(--text-xl) !important; letter-spacing: .3em; text-align: center; }
.form-error { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-ink); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); }
.form-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); }
.form-notice { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); }
.dev-notice { background: var(--warn-bg); border: 1px dashed var(--warn); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-lg); }
.dev-code { font-size: var(--text-lg); letter-spacing: .15em; }
.inline-form { display: flex; gap: var(--space-sm); align-items: center; }
.inline-form input { margin-top: 0 !important; }
.qr { display: block; margin: var(--space-sm) 0; background: var(--field); }
.totp-secret { word-break: break-all; }
.steps-list { padding-left: var(--space-xl); }
.steps-list li { margin-bottom: var(--space-sm); }
/* Códigos de respaldo de la 2FA */
.recovery-codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-lg);
  margin: 0 0 var(--space-md); padding-left: var(--space-2xl); font-variant-numeric: tabular-nums;
}
.recovery-codes li::marker { color: var(--muted); font-size: .85em; }
.recovery-codes code { font-size: var(--text-base); letter-spacing: .04em; }
@media (max-width: 22rem) { .recovery-codes { grid-template-columns: 1fr; } }
.two-buttons { display: flex; gap: var(--space-sm); }
.two-buttons .btn { flex: 1; text-align: center; }
.recovery-status { margin: 0 0 var(--space-sm); }
.recovery-status.is-low { color: var(--warn); }
/* Cuenta (auth/account.html): en desktop, dos columnas (Perfil · Seguridad) y «Dejar la
   cuenta» abajo a todo el ancho. 1200 px de pantalla: con la barra lateral abierta, cada
   columna queda del ancho de una tarjeta de formulario. */
.account-column-title { margin: 0 0 var(--space-sm); }
@media (min-width: 1200px) {
  .account-page { max-width: 60rem; }
  .account-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); align-items: start; }
  .account-leave { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); }
.card-head h2 { margin: 0; }
/* Etiqueta de estado (p. ej. «✓ Activada»): verde si está activo, neutra si no. */
.status-pill { display: inline-flex; align-items: center; padding: var(--space-3xs) var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg); color: var(--muted); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.status-pill.is-on { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
/* Segundo paso dentro de una tarjeta (generar códigos, desactivar): cerrado hasta que se pide. */
.account-step { margin-top: var(--space-sm); border-top: 1px solid var(--line); padding-top: var(--space-sm); }
.account-step > summary { font-weight: 500; }
.account-step form { margin-top: var(--space-sm); }
.account-step .help { margin: 0 0 var(--space-sm); }
.account-leave { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
.account-leave-option { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-sm); }
.account-leave-option p { margin: 0; }
.account-leave-option .btn.wide { margin-top: 0; }

.code-input:not([inputmode="numeric"]) { font-size: var(--text-lg) !important; letter-spacing: .08em; }
.recovery-login > summary { cursor: pointer; color: var(--muted); }
.recovery-login[open] > summary { margin-bottom: var(--space-md); }
.inline-form select, .people select { width: auto; margin-top: 0; }

/* Compartir */
.share-link { width: 100%; padding: var(--space-sm) var(--space-sm); margin-bottom: var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--text-md); background: var(--field); }
.radio-list label { margin: var(--space-xs) 0; }
.radio-list .check { padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius); }
.radio-list .check:has(:checked) { border-color: var(--primary); background: var(--primary-tint); }
.people { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.people li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); }
.people .person { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.people small { display: block; }
.people form { margin: 0; }
.people-add label { margin-bottom: var(--space-xs); }
.share-dialog {
  width: min(35rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--space-lg);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-lg); overflow: auto;
}
.share-dialog::backdrop { background: var(--backdrop); }
body:has(#share-dialog[open]) { overflow: hidden; }
.share-dialog-head { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }
.share-dialog .share-page { margin: 0; max-width: none; }
.share-dialog h1 { font-size: var(--text-xl); overflow-wrap: anywhere; }
.share-dialog .auth-card:last-child { margin-bottom: 0; }
.share-dialog .people li { flex-wrap: wrap; }
.share-dialog .person { min-width: 8rem; }
.share-panel h1 { margin: 0 0 var(--space-lg); font-size: var(--text-xl); font-weight: 500; }
.share-panel .people-add { padding-bottom: var(--space-md); border-bottom: 1px solid var(--line); }
/* Fila de búsqueda entre dos líneas (como Hex): el campo no tiene borde ni al enfocarlo; las
   líneas se oscurecen para mostrar el foco. */
.share-entry-row {
  position: relative; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0;
  border-block: 1px solid var(--line); transition: border-color var(--dur-fast);
}
.share-entry-row:focus-within { border-color: var(--line-strong); }
.share-search { display: flex; flex: 1; align-items: center; min-width: 0; }
.share-search-icon { color: var(--muted); font-size: var(--text-xl); }
.share-panel .share-search input {
  min-width: 0; margin: 0; border-color: transparent; background: transparent; padding-left: var(--space-2xs);
}
.share-panel .share-search input:focus { border-color: transparent; box-shadow: none; }
.role-menu { flex: none; position: relative; }
.role-menu > summary {
  display: flex; align-items: center; gap: var(--space-3xs); list-style: none; cursor: pointer; padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent; border-radius: var(--radius); color: var(--primary-ink); font-size: var(--text-sm);
}
.role-menu > summary::-webkit-details-marker { display: none; }
.role-menu > summary:hover, .role-menu[open] > summary { background: var(--primary-tint); border-color: var(--line); }
.share-entry-row > button { flex: none; padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); }
.share-search-status { min-height: 1.35em; font-size: var(--text-xs); margin: var(--space-xs) 0 0; }
.share-search-status.form-ok { padding: 0; border: 0; background: none; color: var(--ok-ink); }
.recipient-chip { display: inline-flex; align-items: center; max-width: 100%; gap: var(--space-2xs); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2xs) var(--space-2xs); background: var(--primary-tint); font-size: var(--text-sm); }
.recipient-chip [data-recipient-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.recipient-chip button { border: 0; padding: var(--space-3xs) var(--space-3xs); background: none; color: var(--muted); font: inherit; cursor: pointer; flex: none; }
.share-panel .share-search input[type="search"] { width: 100%; font-size: var(--text-md); }
.share-suggestions {
  position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: var(--z-dropdown);
  padding: var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-md);
}
.share-suggestion {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm);
  border: 1px solid transparent; border-radius: var(--radius); background: none;
  font: inherit; font-size: var(--text-md); text-align: left; color: var(--fg); cursor: pointer;
}
.share-suggestion:hover, .share-suggestion[aria-selected="true"] { background: var(--primary-tint); border-color: var(--line); }
.share-suggestion small { display: block; color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-3xs); }
/* Flota bajo la fila de búsqueda (share.js la ubica con posición fija): no empuja nada. */
.share-panel .share-suggestions { position: fixed; top: auto; right: auto; overflow-y: auto; animation: pop-in var(--dur) var(--ease); transform-origin: top center; }
.share-suggestions-head { margin: var(--space-xs) var(--space-sm) var(--space-3xs); font-size: var(--text-2xs); }
.share-suggestions-head:first-child { margin-top: var(--space-3xs); }
.recipient-chip .person-avatar { flex: 0 0 1rem; width: 1rem; height: 1rem; }
.person-avatar {
  display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem;
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--primary-ink); font-size: var(--text-sm);
}
.share-panel .people { margin: var(--space-sm) 0 var(--space-lg); }
.share-panel .people li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
  padding: var(--space-md) 0; border-bottom: 0; gap: var(--space-md);
}
.share-panel .people .person { min-width: 0; font-size: var(--text-md); }
.share-panel .people small { font-size: var(--text-xs); }
.share-owner-role { color: var(--muted); font-size: var(--text-xs); text-align: right; max-width: 7rem; }
.person-permissions { position: relative; }
.person-permissions > summary, .share-access-menu > summary {
  list-style: none; cursor: pointer; padding: var(--space-xs) var(--space-xs); border: 1px solid transparent;
  border-radius: var(--radius); color: var(--primary-ink); font-size: var(--text-sm);
}
.person-permissions > summary::-webkit-details-marker, .share-access-menu > summary::-webkit-details-marker { display: none; }
.person-permissions > summary:hover, .person-permissions[open] > summary { background: var(--primary-tint); border-color: var(--line); }
.permission-popover {
  position: absolute; bottom: calc(100% + .25rem); right: 0; z-index: var(--z-dropdown);
  width: min(19rem, calc(100vw - 5rem)); padding: var(--space-xs); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md);
}
.share-panel .permission-option, .permission-option {
  position: relative; display: flex; align-items: start; gap: var(--space-sm); padding: var(--space-sm); margin: 0;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.permission-option:hover { background: var(--hover); }
.permission-option:has(:checked) { background: var(--primary-tint); border-color: var(--line); }
/* Sin círculo de selección (como Hex): lo elegido se marca con el fondo. El radio sigue
   ahí, invisible, para el teclado, los lectores de pantalla y el formulario sin JS. */
.permission-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.permission-option:has(:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.permission-option:has(:checked) b { font-weight: 600; }
.permission-option b { font-weight: 500; font-size: var(--text-md); }
.permission-option small { display: block; color: var(--muted); margin-top: var(--space-2xs); line-height: 1.4; }
.permission-remove { margin-top: var(--space-sm) !important; padding-top: var(--space-xs); border-top: 1px solid var(--line); }
/* Alineado con el texto de las opciones (mismo relleno), rojo sin subrayado. */
.permission-remove .btn {
  width: 100%; padding: var(--space-sm) var(--space-sm); border-radius: var(--radius); font-size: var(--text-sm);
  border: 0; background: none; text-align: left; text-decoration: none; color: var(--danger);
}
.permission-remove .btn:hover { background: var(--danger-bg); color: var(--danger-ink); }
/* Comentarios: cerrar con algo escrito pide confirmar dentro del mismo diálogo. */
.discard-bar {
  position: sticky; bottom: -1rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin: var(--space-lg) calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--warn-line);
  background: var(--warn-bg); font-size: var(--text-md); animation: pop-up var(--dur) var(--ease);
}
.discard-bar p { flex: 1 1 12rem; margin: 0; }
.discard-bar .btn { flex: none; }
.share-footer { position: relative; border-top: 1px solid var(--line); padding-top: var(--space-md); }
.share-access-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); max-width: calc(100% - 7.5rem); height: 2.3rem; padding: var(--space-sm); background: var(--primary-tint); }
.share-access-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-share-link { position: absolute; top: .8rem; right: 0; }
.access-options { position: absolute; top: calc(100% + .3rem); left: 0; z-index: var(--z-dropdown); width: min(23rem, calc(100vw - 2rem)); padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.share-password-status { font-size: var(--text-xs); margin-bottom: 0; }
.share-password input[aria-invalid="true"] { border-color: var(--danger-ink); }
.share-panel .radio-list .check { font-size: var(--text-md); }
.share-panel .share-link { margin: var(--space-md) 0 0; }
.share-panel .share-password { font-size: var(--text-md); }

/* Los datos ya completos dejan a la letra como centro del editor. */
/* Cada sección con su tinte (--tint-*) y una cabecera un poco más oscura, para que dos
   recuadros abiertos seguidos (Diseño y Letra) no se confundan. */
.editor-section { --section-tint: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); background: var(--section-tint); margin-bottom: var(--space-lg); }
.editor-section[data-editor-section="song"] { --section-tint: var(--tint-song); }
.editor-section[data-editor-section="cast"] { --section-tint: var(--tint-cast); }
.editor-section[data-editor-section="extras"] { --section-tint: var(--tint-extras); }
.editor-section[data-editor-section="design"] { --section-tint: var(--tint-design); }
.editor-section > summary { padding: var(--space-md) var(--space-md); cursor: pointer; background: color-mix(in srgb, var(--section-tint) 90%, var(--line-strong)); }
.section-summary { margin-left: var(--space-md); color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
form .editor-section > fieldset { border: 0; margin: 0; padding: var(--space-2xs) var(--space-md) var(--space-md); min-width: 0; background: transparent; }
/* Letra: el centro del editor. Fondo blanco y cabecera de banda como las secciones (la
   leyenda flotante deja de cortar el borde del recuadro y ocupa todo el ancho). */
form fieldset.lyrics-section { background: var(--field); border-color: var(--line-strong); padding-top: 0; }
.lyrics-section > legend {
  float: left; box-sizing: border-box; width: calc(100% + 2 * var(--space-md));
  margin: 0 calc(-1 * var(--space-md)) var(--space-md); padding: var(--space-md);
  background: color-mix(in srgb, var(--surface) 90%, var(--line-strong)); border-bottom: 1px solid var(--line-strong);
}
.lyrics-section > :not(legend) { clear: both; }
.editor-section[open] > summary { border-bottom: 1px solid var(--line); }
.editor-insights { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-md); margin: var(--space-lg) 0; background: var(--surface); }
.insights-stats > summary { cursor: pointer; }
.live-label { float: right; font-size: var(--text-2xs); color: var(--primary); }
.stats-scroll { overflow-x: auto; margin-top: var(--space-md); }
.stats-table { border-collapse: collapse; width: 100%; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--line); text-align: right; }
.stats-table th:first-child { text-align: left; overflow-wrap: anywhere; }
.stats-table thead th { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; text-transform: uppercase; }
.stats-table small { display: block; color: var(--muted); font-weight: 400; }
.stats-note { font-size: var(--text-xs); margin: var(--space-md) 0 0; }
/* «Reparto en cifras»: pastilla en la barra de botones, junto a «Enviar comentarios»
   (editor.js la mueve ahí). El contenido se abre hacia arriba, a lo ancho de la barra. */
.stats-window {
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
.stats-window.is-undiscovered {
  border-color: var(--primary);
  animation: stats-glow 4s ease-in-out infinite;
}
@keyframes stats-glow {
  0%, 100% { box-shadow: 0 0 0 1px #8a5a0010; }
  50% { box-shadow: 0 0 12px 2px #8a5a0030; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-window.is-undiscovered { animation: none; }
}
.stats-window .stats-content { padding: var(--space-md); max-height: min(65dvh, 30rem); overflow: auto; }
.chart-key { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); font-size: var(--text-xs); margin-bottom: var(--space-md); }
.chart-key > span { display: inline-flex; gap: var(--space-xs); align-items: center; }
.chart-key i { width: .65rem; height: .65rem; border-radius: 1px; }
.chart-frame { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: var(--space-xs); }
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 var(--space-4xl); color: var(--muted); font-size: var(--text-2xs); text-align: right; }
.chart-axis span { line-height: 1; }
.chart-scroll { min-width: 0; overflow-x: auto; }
.stats-chart { display: flex; justify-content: space-around; gap: var(--space-md); width: max-content; min-width: 100%; }
.chart-column { display: grid; grid-template-rows: 9rem 2.5rem; flex: 0 0 5rem; width: 5rem; text-align: center; }
.chart-bar-area { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line-strong); }
.chart-stack { display: flex; flex-direction: column-reverse; width: 4.5rem; }
.chart-stack.empty { min-height: 1px; background: var(--line-strong); }
.chart-segment { display: flex; justify-content: center; align-items: center; gap: var(--space-2xs); flex-basis: 0; min-height: 0; overflow: hidden; color: #fff; font-size: var(--text-2xs); font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.chart-segment + .chart-segment { box-shadow: inset 0 -1px #fff; }
.chart-code { max-width: 2.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-table caption { text-align: left; font-weight: 600; padding: var(--space-md) 0 var(--space-xs); }
.chart-name { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; overflow: hidden; }
.stats-detail-table { margin-top: var(--space-md); }
.stats-detail-table > summary { font-size: var(--text-sm); cursor: pointer; color: var(--primary-ink); }
.actions .stats-window { margin-right: auto; }
.actions:has(> .stats-window:not([hidden])) .feedback-link { margin-right: 0; }
.actions .stats-window > .insights-stats > summary {
  display: flex; align-items: center; padding: 0 var(--space-md); cursor: pointer; white-space: nowrap;
  min-height: 2.3125rem; /* el alto de .btn (39 px) menos el borde de la ventana */
}
.stats-icon { width: 1rem; height: 1rem; flex: none; margin-right: var(--space-xs); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Barrita con el reparto de la voz principal: siempre a la vista en la pastilla. */
.stats-mini {
  display: flex; width: 3rem; height: .55rem; margin-left: var(--space-sm); flex: none;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--line);
}
.stats-mini i { flex-basis: 0; min-width: 0; }
.stats-mini i + i { box-shadow: inset 1px 0 var(--surface); }
/* En la barra no cabe el título largo junto a los botones: dice «Cifras». */
.actions .stats-window .stats-title-long, .actions .stats-window .live-label { display: none; }
.actions .stats-window > .insights-stats[open] > summary { background: var(--primary-tint); }
.actions .stats-window > .insights-stats[open] > .stats-content {
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: var(--z-popover);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 -8px 28px #0002; max-height: min(55dvh, 30rem);
}
.group-suggestions { margin-top: var(--space-lg); }
.group-suggestion { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-top: 1px solid var(--line); }
.group-suggestion > span { flex: 1; min-width: 9rem; font-size: var(--text-md); overflow-wrap: anywhere; }
@media (max-width: 600px) { .section-summary { display: block; margin: var(--space-xs) 0 0 var(--space-lg); } }

/* Inicio, papelera y cuenta comparten la navegación del espacio personal. */
.workspace main { padding: 0; }
/* Ancho de la barra lateral: --sidebar-w (abierta, o compacta más abajo). */
body[data-sidebar] { --sidebar-w: 18rem; }
.workspace-layout { display: grid; grid-template-columns: var(--sidebar-w, 18rem) minmax(0, 1fr); min-height: calc(100dvh - var(--header-h)); transition: grid-template-columns var(--dur) ease; }
.workspace-sidebar { position: sticky; top: var(--header-h); align-self: start; height: calc(100dvh - var(--header-h)); overflow-y: auto; border-right: 1px solid var(--line); background: var(--surface); padding: var(--space-lg) var(--space-md); }
.workspace-sidebar nav { display: flex; flex-direction: column; gap: var(--space-2xs); min-height: 100%; }
.workspace-links { display: grid; gap: var(--space-2xs); }
.workspace-link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-md); border: 1px solid transparent; border-radius: var(--radius); color: var(--muted); text-decoration: none; }
.workspace-link:hover { background: color-mix(in srgb, var(--surface) 92%, var(--muted)); color: var(--fg); }
.workspace-link[aria-current="page"] { position: relative; background: var(--primary-tint); border-color: var(--line-strong); color: var(--primary-ink); }
.workspace-link[aria-current="page"]::before { inset: -4px; }
.workspace-feedback { margin-top: auto; } /* comentarios y cuenta, al pie de la barra */
.sidebar-recent { margin: var(--space-xl) 0 var(--space-lg); min-width: 0; height: 12rem; flex: none; }
.sidebar-recent h2 { margin: 0 var(--space-md) var(--space-sm); }
.sidebar-recent ul { list-style: none; padding: 0; margin: 0; }
.recent-row { position: relative; display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-md); border-radius: var(--radius); }
.recent-row:hover, .recent-row:focus-within, .recent-row:has(details[open]) { background: color-mix(in srgb, var(--surface) 92%, var(--muted)); }
.recent-main { display: flex; align-items: center; gap: var(--space-sm); flex: 1; min-width: 0; color: var(--fg); text-decoration: none; font-size: var(--text-md); padding: var(--space-2xs) 0; }
.recent-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-actions { display: flex; align-items: center; flex: none; gap: var(--space-3xs); }
.recent-empty { font-size: var(--text-sm); padding: var(--space-sm) var(--space-md); }
.recent-menu { position: relative; }
.recent-menu summary { list-style: none; }
.recent-menu summary::-webkit-details-marker { display: none; }
.recent-menu-panel { position: absolute; top: calc(100% + .2rem); right: 0; z-index: var(--z-popover); min-width: 11rem; padding: var(--space-2xs); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.recent-menu-panel a, .recent-menu-panel button { display: block; width: 100%; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius); background: transparent; color: var(--fg); text-decoration: none; font: inherit; font-size: var(--text-md); text-align: left; cursor: pointer; }
.recent-menu-panel a:hover, .recent-menu-panel button:hover { background: var(--primary-tint); }
.recent-menu-panel form { margin: 0; }
.workspace-sidebar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.workspace-content { min-width: 0; padding: var(--space-lg) var(--space-3xl); }
/* Arriba de la barra lateral: la marca y el botón de compactar (sidebar.js). En desktop estas
   páginas no tienen barra de arriba; bajo 900 px sí (con el botón ☰) y esta cabecera se oculta. */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin: 0 0 var(--space-md); }
/* Sin el margin-right: auto de .brand (barra de arriba): compacta, la cabecera es una columna
   centrada y ese margen empujaba el logo a la izquierda. Abierta, el centro del ícono queda
   alineado con los de los links: su relleno + borde (1 px), menos 2 px porque el logo mide
   22 px y los íconos 18. */
.sidebar-brand { min-width: 0; margin-right: 0; padding-left: calc(var(--space-md) - 1px); }
@media (min-width: 901px) {
  body[data-sidebar] .topbar { display: none; }
  /* Sin barra, el encabezado mide 0 (o lo que midan los avisos: maintenance.js lo mide). */
  html:has(> body[data-sidebar]) { --header-h: 0px; }
}
/* Tu cuenta, al pie de la barra (como en Hex): la fila abre el menú «⋯» (.account-more) y el
   engranaje lleva a Cuenta. */
.sidebar-account { display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--line); }
.sidebar-account-row { flex: 1; min-width: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sidebar-account-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-dots { opacity: 0; }
.sidebar-account-row:is(:hover, :focus-visible) .sidebar-account-dots, .sidebar-account-row[aria-expanded="true"] .sidebar-account-dots { opacity: 1; }
@media (hover: none) { .sidebar-account-dots { opacity: 1; } }
.sidebar-gear { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid transparent; border-radius: var(--radius); color: var(--muted); }
.sidebar-gear:hover, .sidebar-gear[aria-current] { border-color: var(--line-strong); background: var(--primary-tint); color: var(--primary-ink); }
.sidebar-avatar {
  position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: none; /* poco más que los íconos (18 px) */
  border: 1px solid var(--primary); border-radius: 50%; background: var(--primary-tint);
  color: var(--primary-ink); font-size: var(--text-xs); font-weight: 700;
}
.sidebar-avatar .news-dot { position: absolute; top: -2px; right: -2px; margin: 0; border: 1px solid var(--surface); box-sizing: content-box; }
/* Menú «⋯» de la cuenta (popover, en la capa superior). sidebar.js lo pone sobre la fila; sin
   JS queda abajo a la izquierda, donde está la fila. */
.account-more {
  position: fixed; inset: auto auto var(--space-4xl) var(--space-md); margin: 0; min-width: 14rem; padding: var(--space-2xs);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md);
}
.account-more a, .account-more button {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--fg); font: inherit; font-size: var(--text-md);
  text-align: left; text-decoration: none; cursor: pointer;
}
.account-more a:hover, .account-more button:hover { background: var(--primary-tint); }
.account-more svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.account-more-ext { margin-left: auto; color: var(--muted); }
.account-more .news-dot { vertical-align: 0; }
.account-more form { margin: 0; }
.account-more hr { margin: var(--space-2xs) var(--space-xs); border: 0; border-top: 1px solid var(--line); }
/* Editor de scripts en desktop: qué estás haciendo y «Ver script» / «Compartir» (bajo 900 px
   van en la barra de arriba). */
.editor-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.editor-top .eyebrow { margin: 0; }
.editor-top-actions { display: flex; gap: var(--space-xs); }
@media (max-width: 900px) { .editor-top { display: none; } }
.sidebar-toggle { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; }
.sidebar-toggle:hover { border-color: var(--line-strong); background: var(--primary-tint); color: var(--primary-ink); }
.sidebar-toggle svg { transition: transform var(--dur) ease; }
/* En el editor, el script abierto se marca en «Mis scripts». */
.recent-row:has(> .recent-main[aria-current]) { background: var(--primary-tint); }
.recent-main[aria-current] { color: var(--primary-ink); font-weight: 600; }
/* Editores (editor.html, theme_edit.html): la barra va fija a la izquierda y el contenido se
   corre su ancho. Bajo 900 px se abre con el botón ☰, como en las listas (abajo). */
body.editor .workspace-sidebar { position: fixed; top: var(--header-h); bottom: 0; left: 0; z-index: var(--z-sticky); width: var(--sidebar-w); height: auto; align-self: stretch; /* con «start» (listas) se encoge a su contenido */ transition: width var(--dur) ease; }
body.editor[data-sidebar] main { margin-left: var(--sidebar-w); transition: margin-left var(--dur) ease; }
@media (max-width: 900px) {
  html:not(.js) body.editor .workspace-sidebar { display: none; }
  body.editor[data-sidebar] main { margin-left: 0; }
}
.workspace .auth-page { margin-top: var(--space-3xl); }
.list-page { max-width: 56rem; margin: var(--space-3xl) auto; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.list-head h1 { font-size: var(--text-2xl); margin: 0; }
.list-page h2 { margin: var(--space-2xl) 0 var(--space-sm); }
.script-list {
  list-style: none; padding: 0; margin: 0 0 var(--space-2xl);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, var(--primary-tint));
}
.script-list > li:last-child { border-bottom: 0; }
.home-script-list {
  padding: var(--space-xs);
  /* Grano de papel tenue, generado en SVG y sin descargar imágenes. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.045'/%3E%3C/svg%3E");
}
.script-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-lg) 0; font-size: var(--text-md); }
.script-view-all { margin: calc(-1 * var(--space-md)) 0 var(--space-2xl); }
.script-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 8rem) minmax(5rem, 8rem) 6.5rem;
  align-items: center; gap: var(--space-md); min-height: 3.15rem; padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
}
.script-row:hover, .script-row:focus-within { background: color-mix(in srgb, var(--surface) 94%, var(--muted)); }
.trash-row:hover, .trash-row:focus-within { background: color-mix(in srgb, var(--surface) 92%, var(--muted)); }
.script-main { display: flex; align-items: center; gap: var(--space-md); min-width: 0; padding: var(--space-2xs) 0; color: var(--fg); text-decoration: none; }
.script-icon { flex: none; color: var(--muted); }
.script-name { min-width: 0; }
.script-title { font-weight: 500; overflow-wrap: anywhere; }
.script-main:hover .script-title { text-decoration: underline; text-underline-offset: 3px; }
.script-subtitle { display: block; color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-3xs); overflow-wrap: anywhere; }
.script-access { min-width: 0; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.script-author { min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.script-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2xs); }
.script-actions form, .trash-actions form { margin: 0; }
.row-action {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem;
  padding: 0; background: transparent; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius); color: var(--muted); text-decoration: none;
}
.row-action:hover { color: var(--primary-ink); border-color: var(--line-strong); background: var(--primary-tint); }
.trash-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); border-radius: var(--radius); }
/* Papelera: el link del título cubre toda la fila (se puede tocar en cualquier parte); los
   botones van por encima. Subrayado solo al pasar el mouse. */
.trash-link { color: var(--fg); text-decoration: none; }
.trash-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.trash-row:hover .trash-link { text-decoration: underline; text-underline-offset: 3px; }
.trash-link:focus-visible { outline: none; }
.trash-link:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.trash-row .trash-actions { position: relative; z-index: 1; }
.trash-expiry.is-soon { color: var(--danger-ink); }
.trash-actions, .delete-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-sm); }
.trash-row .script-name { flex: 1; }
.delete-script-dialog { max-width: min(30rem, calc(100vw - 2rem)); padding: var(--space-2xl); background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.delete-script-dialog::backdrop { background: var(--backdrop); }
.delete-script-dialog h2 { margin-top: 0; }
.delete-script-dialog p { overflow-wrap: anywhere; }
.danger-dialog { border-color: var(--danger); background: var(--danger-bg); }
.danger-dialog h2 { color: var(--danger-ink); }
.trash-preview-warning { max-width: 56rem; margin: 0 auto var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger-bg); color: var(--danger-ink); }
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: var(--z-overlay); width: max-content; max-width: calc(100vw - 2rem); padding: var(--space-md) var(--space-lg); border: 1px solid var(--ok-line); border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-fg); box-shadow: var(--shadow-md); font-size: var(--text-md); font-weight: 500; transition: opacity var(--dur-slow), translate var(--dur-slow); }
.saved-badge.leaving { opacity: 0; }
.toast.leaving { opacity: 0; translate: 0 .5rem; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .toast, .saved-badge { transition: none; } }
.toast a { color: inherit; }
.maintenance-toast { display: flex; align-items: center; gap: var(--space-md); }
.maintenance-toast-content { min-width: 0; }
.toast-close { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ok-fg); cursor: pointer; }
.toast-close svg { display: block; width: .75rem; height: .75rem; }
.toast-close:hover { background: var(--ok-line); color: var(--ok-fg); }
/* «✓ Listo» junto al control que se acaba de guardar (Cuenta); toast.js lo desvanece. */
.saved-badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs); margin-left: auto; padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--ok-line); border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-fg);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap; transition: opacity var(--dur-slow);
}
.saved-badge::before { content: "✓"; }
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .script-actions { opacity: 0; pointer-events: none; }
  .script-row:hover .script-actions, .script-row:focus-within .script-actions { opacity: 1; pointer-events: auto; }
  .recent-actions { opacity: 0; pointer-events: none; }
  .recent-row:hover .recent-actions, .recent-row:focus-within .recent-actions, .recent-row:has(details[open]) .recent-actions { opacity: 1; pointer-events: auto; }
}
@media (max-width: 1000px) {
  body[data-sidebar] { --sidebar-w: 15rem; }
  .workspace-content { padding: var(--space-lg); }
  .script-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3xs) var(--space-sm); padding: var(--space-sm); }
  .script-main { grid-column: 1; grid-row: 1; }
  /* Sangría = ícono (18 px) + su separación: alineados con el título. */
  .script-author { grid-column: 1; grid-row: 2; padding-left: calc(18px + var(--space-md)); }
  .script-access { grid-column: 1; grid-row: 3; padding-left: calc(18px + var(--space-md)); white-space: normal; }
  .script-actions { grid-column: 2; grid-row: 1 / span 3; }
  .list-head { gap: var(--space-sm); }
  .trash-row { flex-wrap: wrap; }
  .trash-actions { width: 100%; }
}
@media (max-width: 700px) {
  .workspace-layout { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .workspace-sidebar { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-sm); }
  .workspace-sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-links { display: contents; }
  .workspace-link { justify-content: center; gap: var(--space-xs); padding: var(--space-md) var(--space-xs); font-size: var(--text-md); }
  .workspace-links > .workspace-link { grid-row: 1; }
  .workspace-account { grid-column: 3; grid-row: 1; margin-top: 0; }
  .workspace-feedback { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .workspace-admin { grid-column: 1 / -1; grid-row: 4; }
  .sidebar-recent { grid-column: 1 / -1; grid-row: 2; margin: var(--space-md) 0; height: 16.5rem; }
  .row-action { width: 2.5rem; height: 2.5rem; }
  .workspace-content { padding: var(--space-md); }
  .workspace .list-page, .workspace .auth-page { margin: var(--space-lg) auto; }
}
/* Menú hamburguesa (sidebar.js), en listas y editores. Solo bajo 900 px y con JS (html.js,
   marcado en base.html antes de pintar, así no hay destello al cargar): el botón muestra tres
   líneas que se convierten en una X; la barra lateral se abre a pantalla completa bajo la
   barra de arriba, con la misma estructura que en desktop. */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  html.js body[data-sidebar] .menu-toggle {
    position: relative; display: inline-block; width: 2.5rem; height: 2.5rem; padding: 0; flex: none;
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer;
  }
  .menu-toggle span {
    position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.5px; margin-left: calc(-1 * var(--space-sm));
    border-radius: 1px; background: var(--fg); transition: transform var(--dur) ease, opacity var(--dur) ease;
  }
  .menu-toggle span:nth-child(1) { transform: translateY(-5px); }
  .menu-toggle span:nth-child(3) { transform: translateY(5px); }
  .menu-toggle[aria-expanded="true"] { background: var(--primary-tint); }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

  html.js .workspace-layout { grid-template-columns: minmax(0, 1fr); }
  html.js .workspace-sidebar {
    position: fixed; inset: var(--menu-top, var(--header-h)) 0 0 0; z-index: var(--z-sticky-top); width: auto; height: auto;
    align-self: stretch; /* con «start» (desktop) no se estira hasta abajo */
    overflow-y: auto; overscroll-behavior: contain; padding: var(--space-lg); border: 0;
    visibility: hidden; opacity: 0; transform: translateY(-.5rem);
    transition: opacity var(--dur) ease, transform var(--dur) ease, visibility 0s linear var(--dur);
  }
  html.js body.menu-open .workspace-sidebar {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur) ease, transform var(--dur) ease;
  }
  html.js .workspace-sidebar nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
  html.js .workspace-links { display: grid; gap: var(--space-2xs); }
  html.js .workspace-link { justify-content: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-md); font-size: var(--text-base); }
  html.js :is(.workspace-links > .workspace-link, .workspace-account, .workspace-admin) { grid-row: auto; grid-column: auto; }
  html.js .workspace-feedback { grid-row: auto; grid-column: auto; margin-top: auto; }
  html.js .sidebar-recent { height: auto; margin: var(--space-lg) 0; padding-top: var(--space-lg); border-top: 1px dashed var(--line-strong); }
  .sidebar-head { display: none; }
  body.menu-locked { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle span, html.js .workspace-sidebar { transition: none !important; }
}

/* Barra lateral compacta: solo íconos (el nombre sale al pasar el mouse y lo siguen leyendo
   los lectores de pantalla). Las mismas reglas van tres veces porque cambia la condición:
   1) la persona la compactó (data-sidebar="compact", sidebar.js);
   2) y 3) sin elección («auto»): en listas, compacta bajo 1100 px; en editores, bajo 1600 px,
   donde el formulario y la vista previa necesitan el espacio. Bajo 900 px, el menú ☰. */
@media (min-width: 901px) {
  body[data-sidebar="compact"] { --sidebar-compact: 1; --sidebar-w: 3.75rem; }
  body[data-sidebar="compact"] .workspace-sidebar { padding-inline: var(--space-xs); overflow-x: hidden; }
  body[data-sidebar="compact"] .sidebar-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-sidebar="compact"] :is(.sidebar-recent, .sidebar-account-dots) { display: none; }
  body[data-sidebar="compact"] .sidebar-account { flex-direction: column; }
  body[data-sidebar="compact"] :is(.workspace-link, .sidebar-head) { justify-content: center; padding-inline: 0; }
  body[data-sidebar="compact"] .sidebar-head { flex-direction: column; }
  body[data-sidebar="compact"] .sidebar-brand { padding-left: 0; }
  body[data-sidebar="compact"] .sidebar-toggle svg { transform: scaleX(-1); }
}
@media (min-width: 901px) and (max-width: 1099px) {
  body[data-sidebar="auto"][data-sidebar-kind="list"] { --sidebar-compact: 1; --sidebar-w: 3.75rem; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] .workspace-sidebar { padding-inline: var(--space-xs); overflow-x: hidden; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] .sidebar-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] :is(.sidebar-recent, .sidebar-account-dots) { display: none; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] .sidebar-account { flex-direction: column; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] :is(.workspace-link, .sidebar-head) { justify-content: center; padding-inline: 0; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] .sidebar-head { flex-direction: column; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] .sidebar-brand { padding-left: 0; }
  body[data-sidebar="auto"][data-sidebar-kind="list"] .sidebar-toggle svg { transform: scaleX(-1); }
}
@media (min-width: 901px) and (max-width: 1599px) {
  body[data-sidebar="auto"][data-sidebar-kind="editor"] { --sidebar-compact: 1; --sidebar-w: 3.75rem; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] .workspace-sidebar { padding-inline: var(--space-xs); overflow-x: hidden; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] .sidebar-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] :is(.sidebar-recent, .sidebar-account-dots) { display: none; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] .sidebar-account { flex-direction: column; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] :is(.workspace-link, .sidebar-head) { justify-content: center; padding-inline: 0; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] .sidebar-head { flex-direction: column; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] .sidebar-brand { padding-left: 0; }
  body[data-sidebar="auto"][data-sidebar-kind="editor"] .sidebar-toggle svg { transform: scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-layout, body.editor .workspace-sidebar, body.editor main, .sidebar-toggle svg { transition: none; }
}

@media (pointer: coarse) and (min-width: 701px) {
  .row-action { width: 2.5rem; height: 2.5rem; }
  .sidebar-recent { height: 16.5rem; }
}
.badge {
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap;
}

/* Registro: una línea para mensajes; el username necesita dos en móvil. */
.register-form .field-message {
  min-height: 1.35em; margin: var(--space-xs) 0 var(--space-sm); font-size: var(--text-sm);
  line-height: 1.35; color: var(--muted); overflow-wrap: anywhere;
}
.register-form .username-message { min-height: 2.7em; }
@media (min-width: 600px) { .register-form .username-message { min-height: 1.35em; } }
.register-form input[aria-invalid="true"] {
  border-color: var(--danger-ink); background: var(--danger-bg);
}
.register-form input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-ink) 12%, transparent); }
.register-form input[aria-invalid="true"] + .field-message,
.register-form .input-prefix:has(input[aria-invalid="true"]) + .field-message,
.register-form .register-message { color: var(--danger-ink); }
.register-form .input-prefix:has(input[aria-invalid="true"]) span { border-color: var(--danger-ink); }
.register-form .register-message { min-height: 1.35em; margin: 0; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.field-head label { margin-bottom: 0; }
.field-head .btn.link { padding: 0; font-size: var(--text-md); }

/* Separador con texto ("o"), como en Hex */
.divider {
  display: flex; align-items: center; gap: var(--space-md); margin: var(--space-xl) 0;
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }

/* Campo con prefijo ("@usuario") */
.input-prefix { display: flex; align-items: stretch; margin-top: var(--space-2xs); }
.input-prefix span {
  display: grid; place-items: center; padding: 0 var(--space-sm); border: 1px solid var(--line-strong);
  border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--bg);
  font-family: var(--font-mono); color: var(--muted);
}
form .input-prefix input { margin-top: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.input-prefix + .help { margin-top: var(--space-xs); }
.small-link { font-size: var(--text-md); }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Selector de color (color-picker.js). Una muestra junto al campo abre un panel flotante. */
.cp-trigger {
  width: 2.4rem; height: 2.2rem; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px #fff;
}
.cp-trigger:hover { border-color: var(--fg); }
/* Sin color (automático): la muestra queda en blanco; el punto del integrante, a cuadros. */
.cp-trigger.is-auto { background: var(--field); }
.member-dot.is-auto {
  background: repeating-conic-gradient(#e7e1d3 0 25%, #fff 0 50%) 0 0 / 10px 10px;
}
.cp-panel {
  position: fixed; inset: auto; margin: 0; width: 17rem; padding: var(--space-md);
  background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-md); font-family: var(--font-ui);
}
.cp-top { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.cp-count { display: flex; gap: var(--space-2xs); margin-left: auto; }
.cp-icon, .cp-harmony {
  min-width: 2rem; height: 2rem; padding: 0 var(--space-sm); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--field); font: inherit; font-size: var(--text-base); cursor: pointer; color: var(--fg);
}
.cp-harmony { font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.cp-icon:hover, .cp-harmony:hover { border-color: var(--fg); }
.cp-icon:disabled { opacity: .4; cursor: default; }
.cp-wheel {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-strong); touch-action: none; cursor: crosshair;
}
.cp-dot {
  position: absolute; width: 1.1rem; height: 1.1rem; padding: 0; translate: -50% -50%;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #0005, 0 2px 6px #0004; cursor: grab;
}
.cp-dot.is-primary { width: 1.6rem; height: 1.6rem; border-width: 3px; }
.cp-dot:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.cp-panel label.cp-light-row { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-sm); font-weight: 400; }
.cp-light-row .eyebrow { margin: 0; }
.cp-panel input.cp-light {
  flex: 1; width: auto; margin: 0; padding: 0; height: .9rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  appearance: none;
  background: linear-gradient(90deg, hsl(var(--cp-hue, 0) var(--cp-sat, 70%) 12%), hsl(var(--cp-hue, 0) var(--cp-sat, 70%) 50%), hsl(var(--cp-hue, 0) var(--cp-sat, 70%) 88%));
}
.cp-light::-webkit-slider-thumb { appearance: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--field); border: 1px solid var(--fg); }
.cp-light::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--field); border: 1px solid var(--fg); }
.cp-swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.cp-swatch-option { aspect-ratio: 1; padding: 0; border: 1px solid #0002; border-radius: 50%; cursor: pointer; }
.cp-swatch-option:hover { outline: 2px solid var(--fg); outline-offset: 1px; }
.cp-foot { display: flex; align-items: center; gap: var(--space-xs); }
.cp-preview { flex: none; width: 2rem; height: 2rem; border-radius: var(--radius); border: 1px solid var(--line-strong); }
.cp-panel input.cp-hex { width: 5.5rem; min-width: 0; flex: 1; margin: 0; padding: var(--space-xs) var(--space-sm); font-family: var(--font-mono); font-size: var(--text-md); }
.cp-foot .btn { flex: none; }
@media (max-width: 480px) { .cp-panel { width: min(20rem, calc(100vw - 1rem)); } }

/* Campo de color en formularios y botones en fila */
.color-field { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-2xs); }
.color-field-label { font-family: var(--font-mono); font-size: var(--text-md); color: var(--muted); }
.form-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }

/* Grupos */
.group-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-md); } /* 17rem: caben las tres acciones de Mis temas en una línea */
.group-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.group-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.group-cover { display: block; height: 3.5rem; border-bottom: 1px solid var(--line); }
.group-cover.large { width: 4.5rem; height: 4.5rem; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.group-card-body { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-md); }
.group-back { margin: 0 0 var(--space-lg); }
.group-hero { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.group-hero h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2xs); overflow-wrap: anywhere; }
.group-hero p { margin: 0; }
.group-members { list-style: none; padding: 0; margin: 0 0 var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.group-member { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-md); border-top: 1px solid var(--line); }
.group-member:first-child { border-top: 0; }
.member-dot { flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid #0002; }
.group-member-main { flex: 1; min-width: 10rem; display: grid; gap: var(--space-3xs); }
.group-member-main small { overflow-wrap: anywhere; }
.group-member-edit[open] { flex-basis: 100%; }
.group-member-edit > summary { list-style: none; display: inline-block; }
.group-member-edit > summary::-webkit-details-marker { display: none; }
.group-member-edit[open] > summary { margin-bottom: var(--space-sm); }
.group-member-edit .auth-card { margin: 0; }
.group-member-remove { margin: 0; }
.icon-btn { min-width: 2rem; padding-inline: var(--space-sm); font-size: var(--text-lg); line-height: 1; }
.group-members-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.group-members-head .eyebrow { margin: 0; }
.group-members-head .btn { margin-left: auto; }
/* Editar y ×: siempre en el mismo lugar; el formulario se abre debajo, a todo el ancho. */
.group-member-actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.group-member-actions .btn { height: 2rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.group-member-actions a.btn[aria-expanded="true"] { border-color: var(--fg); background: var(--primary-tint); }
.group-member-actions .icon-btn { width: 2rem; min-width: 0; padding: 0; }
.group-member-form { flex-basis: 100%; margin: var(--space-2xs) 0 0; }
.icon-btn-spacer { width: 2rem; height: 2rem; flex: none; }
.role-tag { /* «Dueño» / «Admin» en grupos. No usar .tag: es la etiqueta [Ma] de la hoja (script.css). */  display: inline-block; margin-left: var(--space-xs); padding: 0 var(--space-xs); border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; color: var(--muted); }
.form-dialog {
  width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-lg); overflow: auto;
}
.form-dialog::backdrop { background: var(--backdrop); }
body:has(.form-dialog[open]) { overflow: hidden; }
.form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.form-dialog-head h2 { margin: 0; font-size: var(--text-xl); }
.link-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--primary-tint); }
.link-suggestion .help { margin: 0; flex: 1; min-width: 12rem; }
.member-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-lg); }
.member-form-grid .member-form-account { grid-column: 1 / -1; }
@media (max-width: 600px) { .member-form-grid { grid-template-columns: 1fr; } }
/* Temas sugeridos de un grupo (su propia sección): tres selectores con la hoja en miniatura
   (option-picker.js, tipo «theme»), o tarjetas de solo lectura para quien no administra. */
.group-section { margin-top: var(--space-3xl); }
.group-section > .help { margin: calc(-1 * var(--space-xs)) 0 var(--space-md); }
.group-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; }
.group-theme-slot { margin: 0; min-width: 0; }
.group-theme-slot .option-picker, .group-theme-slot .option-picker-button { width: 100%; }
.option-picker-theme .opt-swatch { width: 4.5rem; height: 3rem; }
.option-picker-theme .option-picker-button .opt-swatch { height: 2.4rem; }
.opt-theme.theme-swatch { display: block; max-width: none; margin: 0; padding: 4px; font-size: 9px; } /* miniatura: la hoja a escala de una muestra */
.opt-theme.theme-swatch:not(.has-backdrop) { padding: 0; }
.opt-theme .sheet-paper { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 100%; padding: 2px 6px; border-width: 1px; }
.opt-theme-none { background: repeating-linear-gradient(135deg, var(--bg) 0 6px, var(--surface) 6px 12px); }
.group-theme-cards { margin: 0; }
.group-settings { margin-top: var(--space-3xl); } /* después de Temas sugeridos */
@media (max-width: 700px) { .group-themes { grid-template-columns: minmax(0, 1fr); } }
.group-page details.auth-card > summary { cursor: pointer; }
.group-page details.auth-card > summary .eyebrow { margin: 0; }
.group-page details.auth-card[open] > summary { margin-bottom: var(--space-sm); }
.group-leave { margin-top: var(--space-lg); }

/* Integrantes de tus grupos en el editor (cast-editor.js) */
.cast-row.member { position: relative; }
.contact-suggestions {
  position: absolute; z-index: var(--z-popover); top: calc(100% + .2rem); left: 4.9rem; right: 2.6rem; padding: var(--space-2xs);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.contact-option { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm); border-radius: var(--radius); cursor: pointer; font-size: var(--text-md); }
.contact-option[aria-selected="true"], .contact-option:hover { background: var(--primary-tint); }
.contact-option small { margin-left: auto; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-suggestions { max-height: min(18rem, 50dvh); overflow-y: auto; }
.contact-suggestions { scroll-margin: 4rem 0 9rem; }
label.has-suggestions { position: relative; }
label.has-suggestions .contact-suggestions { left: 0; right: 0; font-weight: normal; }
.contact-dot.group-swatch { border-radius: var(--radius-sm); }
.contact-option.is-group .contact-nick { font-weight: 600; }
.contact-dot { flex: none; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid #0002; background: repeating-conic-gradient(#e7e1d3 0 25%, #fff 0 50%) 0 0 / 6px 6px; }

/* Compartir con grupos */
.group-share-add { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-md); }
form.group-share-add select { width: auto; margin: 0; padding: var(--space-xs) var(--space-2xl) var(--space-xs) var(--space-sm); background-position: right .45rem center; font-size: var(--text-sm); }
form.group-share-add select[name="group_id"] { flex: 1; min-width: 8rem; }
.group-share-add + .help { margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
.group-avatar { border-radius: var(--radius); }

.account-smule .inline-form { flex-wrap: wrap; }
.account-smule .input-prefix { flex: 1; min-width: 12rem; margin-top: 0; }

/* Ajustes del grupo: portada y nombre en una línea; eliminar y transferir lado a lado. */
.group-name-row { display: flex; align-items: center; gap: var(--space-sm); }
.group-name-row .color-field { margin-top: 0; }
.group-name-field { flex: 1; margin: 0; }
.group-name-field input { margin-top: 0; }
form .group-name-row > input { flex: 1; min-width: 0; margin-top: 0; } /* «Nuevo grupo»: el nombre sin label propio */
.group-danger-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.btn.is-disabled { color: var(--muted); background: var(--surface); border-color: var(--line); cursor: not-allowed; }
.btn.is-disabled:hover { border-color: var(--line); }
/* Mini ayuda flotante (como un alt text) para botones deshabilitados: hover, foco o toque. */
.tip-wrap { position: relative; display: inline-flex; }
.tip {
  display: none; position: absolute; bottom: calc(100% + .45rem); right: 0; z-index: var(--z-dropdown);
  width: min(16rem, 75vw); padding: var(--space-sm) var(--space-sm);
  background: var(--fg); color: var(--surface); border-radius: var(--radius); font-size: var(--text-sm); line-height: 1.35;
  box-shadow: var(--shadow-md);
}
.tip::after { content: ""; position: absolute; top: 100%; right: 1rem; border: 6px solid transparent; border-top-color: var(--fg); }
.tip-wrap:hover .tip, .tip-wrap:focus-within .tip, .tip-wrap.show-tip .tip { display: block; }
/* Diálogo de transferir: integrantes sin cuenta en gris y no seleccionables. */
.transfer-options { display: grid; gap: var(--space-xs); margin: var(--space-md) 0; }
.transfer-option { display: flex; align-items: center; gap: var(--space-sm); margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.transfer-option:has(input:checked) { border-color: var(--fg); background: var(--primary-tint); }
.transfer-option input { width: auto; margin: 0; }
.transfer-option small { display: block; color: var(--muted); }
.transfer-option.is-unavailable { opacity: .55; cursor: not-allowed; background: color-mix(in srgb, var(--line) 35%, transparent); }

/* Al crear un script: «¿Compartirlo con el reparto?» (editor.html) */
.cast-share-dialog .form-row-actions { justify-content: flex-end; }
.cast-share-role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; }
.cast-share-role select { width: auto; margin: 0; }
/* @ de Smule: el «✓ Listo» va arriba a la derecha (junto al título) para no correr la fila
   del campo en móvil ni moverla al desaparecer. */
.account-smule { position: relative; }
.account-smule .saved-badge { position: absolute; top: .9rem; right: 1rem; }
.stats-window .live-label { margin-left: var(--space-md); }
/* Sugerencias de tus grupos bajo el nombre de un grupo del script (cast-editor.js). */
.cast-row.team { position: relative; }
.cast-row.team .contact-suggestions { top: 3rem; left: .5rem; right: 3rem; }

/* Diseño (editor): galería de temas y editor. Las miniaturas usan las clases reales de la
   hoja (.sheet, .sheet-paper, frame-*), así que se ven como el tema de verdad. */
/* Las medidas dependen del ancho de la sección (container queries), no de la pantalla: la
   columna del editor es angosta incluso en escritorio. */
.theme-panel > fieldset, #theme-form { container-type: inline-size; } /* 6 o 3 colores por fila (.theme-colors) */
.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-md); }
/* Angosta (teléfono): una sola fila que se desliza de lado, con el borde desvanecido
   (.scroll-fade; theme-editor.js pone data-fade). El relleno deja ver el contorno del elegido. */
@container (max-width: 30rem) {
  .theme-gallery {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 6.5rem;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-md)); padding: var(--space-2xs) var(--space-md);
  }
  .theme-gallery::-webkit-scrollbar { display: none; }
  .theme-gallery .theme-option { scroll-snap-align: start; scroll-margin-inline: var(--space-md); }
}
.theme-option { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; cursor: pointer; font-size: var(--text-sm); text-align: center; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option .sheet.theme-swatch {
  display: block; width: 100%; max-width: none; height: 4rem; margin: 0; padding: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; overflow: hidden;
}
.theme-option .sheet.theme-swatch:not(.has-backdrop) { padding: 0; }
.theme-option .theme-swatch .sheet-paper {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2xs);
  height: 100%; padding: var(--space-xs) var(--space-sm); border-width: 2px;
}
.theme-option .theme-swatch.frame-double .sheet-paper { border-width: 4px; }
.theme-option .theme-swatch.frame-rounded .sheet-paper { border-radius: 8px; box-shadow: 0 2px 8px #0003; }
.theme-swatch b { font-family: var(--font-title); font-weight: var(--title-weight); color: var(--accent); font-size: var(--text-lg); line-height: 1; }
.theme-swatch i { display: block; width: 85%; height: .3rem; border-radius: var(--radius-sm); background: var(--ink); opacity: .3; }
.theme-swatch i + i { width: 55%; background: var(--card); opacity: 1; height: .45rem; }
.theme-option:has(input:checked) .theme-swatch { outline: 2px solid var(--fg); outline-offset: 2px; }
.theme-option:has(input:checked) .theme-option-name { font-weight: 600; }
.theme-option:has(input:focus-visible) .theme-swatch { outline: 2px dashed var(--fg); outline-offset: 2px; }
/* Diseño › Etiquetas: fuera de «Personalizar» (es del script, no del tema). */
/* Etiqueta encima, como los demás campos de Diseño (.theme-field); muestras en tonos neutros. */
.tag-style { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); margin-bottom: var(--space-md); font-size: var(--text-md); font-weight: 500; }
.tag-sample { display: inline-block; padding: 0 .4em; border-radius: var(--radius-pill); background: var(--muted); color: var(--field); font-size: .8em; font-weight: 600; line-height: 1.5; }
.tag-sample-text { color: var(--muted); font-weight: 600; }
.theme-custom > summary { display: inline-flex; align-items: center; gap: var(--space-xs); list-style: none; cursor: pointer; }
.theme-custom > summary::-webkit-details-marker { display: none; }
.theme-custom[open] > summary { margin-bottom: var(--space-sm); }
/* Botones del final en una fila (con «Cerrar»). Los del tema solo con «Personalizar» abierto. */
.theme-actions { flex-wrap: wrap; gap: var(--space-sm); }
.theme-panel:not(:has(.theme-custom[open])) .theme-actions :is([data-reset-theme], [data-save-theme]) { display: none; }
.theme-editor { display: grid; gap: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px dashed var(--line-strong); }
/* Canción › Grupo: «‹Grupo› sugiere el tema «…»» con su botón «Usar». */
.group-theme-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin: calc(-1 * var(--space-xs)) 0 var(--space-sm); font-size: var(--text-sm); color: var(--primary-ink); }
.group-theme-choices { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* «Fondo con los colores de un grupo» (bajo Colores): un botón por grupo con su portada. */
.group-backdrops { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); font-size: var(--text-sm); }
.group-backdrops .btn { display: inline-flex; align-items: center; gap: var(--space-xs); }
.group-swatch { display: inline-block; flex: none; width: 1.1em; height: 1.1em; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
/* Subgrupo de ajustes con subtítulo (Colores, Título, Letra…). */
.theme-group { display: grid; gap: var(--space-md); min-width: 0; }
.theme-group > h3 { margin: 0; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--line); }
.theme-checks { display: grid; }
.theme-checks .tags-hint { margin-top: calc(-1 * var(--space-xs)); }
/* Los seis colores en una fila; 3 × 2 si la sección es angosta. */
.theme-colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
@container (max-width: 30rem) { .theme-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.theme-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.theme-custom > summary .icon { flex: none; }
form .theme-field { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; font-size: var(--text-md); }
.theme-field .color-field { margin-top: 0; }
form .theme-field select { margin: 0; }
/* Imagen de fondo (Diseño): lugares (imagen; o arriba, medio y abajo) y «Tus imágenes». El
   lugar marcado lleva el contorno del tema elegido; las miniaturas se acomodan en filas. */
.bg-mode { max-width: 16rem; }
.bg-slots { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.bg-slot { position: relative; }
.bg-slot[hidden] { display: none; }
.bg-slot-pick {
  display: grid; justify-items: center; gap: var(--space-2xs); width: 6.5rem; padding: var(--space-xs);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--field);
  color: var(--fg-soft); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.bg-slot-pick[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 2px; }
.bg-slot-img {
  display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  background: repeating-conic-gradient(var(--hover) 0 25%, var(--field) 0 50%) 0 0 / 12px 12px; /* damero: «vacío» */
}
.bg-slot-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bg-slot-clear {
  position: absolute; top: calc(-1 * var(--space-xs)); right: calc(-1 * var(--space-xs));
  width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--muted); font-size: var(--text-xs); line-height: 1; cursor: pointer;
}
.bg-slot-clear:hover { color: var(--danger); border-color: var(--danger-line); }
.bg-slot-clear[hidden] { display: none; }
.bg-library { display: grid; gap: var(--space-xs); }
.bg-library-title { font-size: var(--text-sm); }
.bg-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-sm); max-height: 15rem; overflow-y: auto; padding: var(--space-2xs); }
.bg-thumb { position: relative; display: block; }
.bg-thumb-pick { display: block; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--field); cursor: pointer; }
.bg-thumb-pick img { display: block; width: 4rem; height: 4rem; object-fit: cover; }
.bg-thumb-pick:hover { border-color: var(--fg); }
.bg-thumb .remove-btn { position: absolute; right: var(--space-3xs); bottom: var(--space-3xs); padding: var(--space-3xs); background: var(--surface); }
.bg-upload {
  position: relative; display: grid; place-content: center; justify-items: center; width: 4rem; height: 4rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--field);
  color: var(--fg-soft); font-size: var(--text-xs); cursor: pointer;
}
.bg-upload span { font-size: var(--text-lg); line-height: 1; }
.bg-upload:hover, .bg-upload:focus-within { border-color: var(--fg); color: var(--fg); }
.bg-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* el label lo abre; sigue enfocable */
.bg-upload.is-busy { opacity: .6; pointer-events: none; cursor: progress; }
.bg-usage, .bg-note { margin: 0; font-size: var(--text-sm); }
.bg-tint[hidden] { display: none; }
.bg-rejected { color: var(--warn-ink); }
/* Permalink: «Reportar la imagen de fondo», discreto, bajo la hoja. */
.report-image { max-width: 210mm; margin: var(--space-lg) auto var(--space-2xl); padding: 0 var(--space-md); font-size: var(--text-sm); color: var(--muted); }
.report-image form { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); max-width: 32rem; }
.report-image textarea { width: 100%; }
.report-image .btn { justify-self: start; }
/* Pestañas o filtros en fila de botones chicos (.tab-chips; .admin-tabs es el nombre viejo):
   Administración, pestañas de Temas y filtros de la galería. */
.admin-tabs, .tab-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0; }
:is(.admin-tabs, .tab-chips) [aria-current="page"] { background: var(--primary-tint); color: var(--primary-ink); border-color: var(--primary); font-weight: 600; }
/* Administración › Imágenes de fondo: cada imagen con su miniatura a la izquierda. */
.moderation-item { display: flex; gap: var(--space-lg); align-items: flex-start; }
.moderation-thumb img { display: block; width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field); }
.moderation-body { display: grid; gap: var(--space-xs); min-width: 0; }
.moderation-body p { margin: 0; }
.moderation-reason { color: var(--fg-soft); font-style: italic; }
.moderation-off { border-color: var(--warn-line); background: var(--warn-bg); }
@media (max-width: 30rem) { .moderation-item { flex-direction: column; } }
/* Sección Temas (/themes): tarjetas con la miniatura real de la hoja, nombre y acciones. */
.theme-grid { list-style: none; padding: 0; margin: 0 0 var(--space-lg); display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-md); } /* 17rem: caben las tres acciones de Mis temas en una línea */
.theme-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.theme-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.theme-card-link { display: block; color: inherit; text-decoration: none; }
.theme-card .sheet.theme-swatch {
  display: block; width: 100%; max-width: none; height: 7rem; margin: 0; padding: 10px;
  border-bottom: 1px solid var(--line); font-size: 14px; overflow: hidden;
}
.theme-card .sheet.theme-swatch:not(.has-backdrop) { padding: 0; }
.theme-card .theme-swatch .sheet-paper {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-xs);
  height: 100%; padding: var(--space-sm) var(--space-md); border-width: 2px;
}
.theme-card .theme-swatch b { font-size: var(--text-xl); }
.theme-card-body { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-md) var(--space-xs); }
.theme-card-description { color: var(--fg-soft); overflow-wrap: anywhere; }
/* Acciones en una sola línea, repartidas a lo ancho; borrar va en la esquina de la vista previa. */
.theme-card-actions { display: flex; gap: var(--space-xs); margin-top: auto; padding: var(--space-xs) var(--space-md) var(--space-md); }
/* Cada botón mide lo que su contenido y el sobrante se reparte por igual: mismos márgenes internos. */
.theme-card-actions > * { flex: 1 1 auto; }
.theme-card-actions form { display: flex; margin: 0; }
.theme-card-actions .btn { display: inline-flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: var(--space-2xs); padding-inline: var(--space-xs); font-size: var(--text-sm); white-space: nowrap; }
.theme-card-delete { position: absolute; top: var(--space-xs); right: var(--space-xs); margin: 0; }
.theme-card-delete .remove-btn { padding-block: var(--space-xs); background: var(--surface); box-shadow: var(--shadow-sm); }
/* Galería de temas (gallery.py): pestañas de Temas, filtros, paginación, etiqueta «En la
   galería» y la página de un tema (datos a la izquierda, hoja de ejemplo a la derecha). */
.themes-tabs { margin-top: 0; }
.gallery-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); margin-bottom: var(--space-lg); font-size: var(--text-sm); }
.filter-group { display: flex; align-items: center; gap: var(--space-xs); }
.filter-label { color: var(--muted); font-weight: 600; }
/* En móvil, uno por fila: títulos en una columna y segmentados alineados en otra. */
@media (max-width: 700px) {
  .gallery-filters { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-sm); }
  .filter-group { display: contents; }
  .gallery-filters .segmented { justify-self: start; }
}
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); margin: var(--space-lg) 0; }
.theme-badge { justify-self: start; padding: 0 var(--space-xs); border: 1px solid var(--ok-line); border-radius: var(--radius-pill); background: var(--ok-bg); color: var(--ok-ink); font-size: var(--text-xs); font-weight: 600; }
.theme-badge.is-removed { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-ink); }
.moderation-item .moderation-thumb.theme-swatch { flex: none; width: 120px; height: 120px; margin: 0; padding: 10px; font-size: 14px; color: inherit; text-decoration: none; overflow: hidden; }
.moderation-thumb.theme-swatch .sheet-paper { display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs); height: 100%; padding: var(--space-sm); }
.gallery-theme { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; padding: var(--space-lg) var(--space-lg) var(--space-3xl); }
.gallery-theme-info { display: grid; gap: var(--space-sm); position: sticky; top: calc(var(--header-h) + var(--space-lg)); }
.gallery-theme-info > * { margin: 0; }
.gallery-theme-info h1 { overflow-wrap: anywhere; }
.gallery-theme-description { overflow-wrap: anywhere; }
.gallery-theme-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.gallery-theme-actions form { margin: 0; }
.gallery-theme-preview { min-width: 0; }
.gallery-theme-preview .sheet { margin-top: 0; }
.report-theme { margin: var(--space-sm) 0 0; padding: 0; }
.report-kinds { display: grid; gap: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.report-kinds legend { margin-bottom: var(--space-2xs); padding: 0; font: inherit; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--fg); }
.report-kinds label.check { min-height: 2rem; color: var(--fg); }
@media (max-width: 900px) {
  .gallery-theme { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-md); }
  .gallery-theme-info { position: static; }
}
/* Publicar un tema: miniatura y estado, avisos y el formulario. */
.theme-publish-summary { display: flex; gap: var(--space-lg); align-items: flex-start; margin: var(--space-lg) 0; }
.theme-publish-summary > .theme-swatch { flex: none; width: 9rem; height: 7rem; margin: 0; padding: 10px; font-size: 14px; overflow: hidden; }
.theme-publish-summary > .theme-swatch .sheet-paper { display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs); height: 100%; padding: var(--space-sm) var(--space-md); }
.theme-publish-summary p { margin: 0 0 var(--space-xs); }
.theme-publish-form { display: grid; gap: var(--space-sm); max-width: 36rem; margin: var(--space-lg) 0; }
.theme-publish-form .btn { justify-self: start; }
.theme-unpublish { margin: var(--space-lg) 0; }
@media (max-width: 30rem) { .theme-publish-summary { flex-direction: column; } }
/* Editor de temas (/themes/<id>): nombre y descripción arriba; vista previa con su script. */
/* Sin ocupar todo el ancho: centrado, con margen a los costados en pantallas anchas.
   76rem (~1216 px): ajustes y vista previa siguen cómodos; más allá solo se estiran. */
.theme-studio .editor-layout { width: 100%; max-width: 76rem; margin-inline: auto; }
@media (min-width: 1100px) {
  .theme-studio main { padding-inline: var(--space-4xl); }
  .theme-studio .editor-layout { gap: var(--space-3xl); }
}
.theme-studio-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.theme-studio-head .eyebrow { margin: 0; }
.theme-studio-head label { margin: 0; }
.theme-name-field input { font-size: var(--text-lg); font-weight: 600; }
.theme-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-sm); }
.theme-preview-head .pane-title { margin: 0; }
/* Buscador del script de la vista previa (theme-studio.js): cuadro con lista debajo. */
.sample-picker { position: relative; width: min(18rem, 100%); }
.sample-search { display: block; width: 100%; margin: 0; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--field); font: inherit; font-size: var(--text-md); color: var(--fg); }
.sample-search::placeholder { color: var(--fg); opacity: 1; } /* «Script de ejemplo» es lo elegido, no una pista */
.sample-search:focus::placeholder { color: var(--muted); }
.sample-options {
  position: absolute; top: calc(100% + var(--space-3xs)); right: 0; left: 0; z-index: var(--z-popover);
  max-height: min(22rem, 60dvh); overflow-y: auto; padding: var(--space-2xs);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md);
}
.sample-option { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); cursor: pointer; }
.sample-option b { font-weight: 500; font-size: var(--text-md); overflow-wrap: anywhere; }
.sample-option small { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.sample-option:hover, .sample-option.is-active { background: var(--primary-tint); }
.sample-option[aria-selected="true"] b::after { content: " ✓"; color: var(--primary-ink); }
.sample-message { margin: var(--space-2xs) var(--space-sm); color: var(--muted); font-size: var(--text-sm); }
@media (max-width: 900px) {
  .theme-studio .editor-layout.tabs-on[data-tab="preview"] #theme-form { display: none; }
  .theme-studio .editor-layout.tabs-on .pane-title { display: block; }
}
/* Avisos de color y paletas que se leen bien (vista previa del editor de temas). */
.theme-report { margin-bottom: var(--space-md); font-size: var(--text-sm); }
.theme-report .warnings { margin: 0 0 var(--space-xs); }
.palette-fit { margin: 0; color: var(--fg-soft); }
.theme-group-help { margin: calc(-1 * var(--space-xs)) 0 0; font-size: var(--text-sm); }
/* «Nuevo tema»: dos opciones y, con «A partir de un tema», las miniaturas. */
.new-theme-dialog { width: min(44rem, calc(100vw - 2rem)); }
.new-theme-start { margin-top: 0; border: 0; padding: 0; }
.new-theme-gallery .eyebrow { margin: var(--space-md) 0 var(--space-xs); }
.new-theme-gallery[hidden] { display: none; }
.new-theme-form .form-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }
/* Sugerencias de tamaño de la imagen (una por modo) y bloques que dependen del modo. */
.bg-guide p { margin: 0; font-size: var(--text-sm); }
.bg-panel .theme-pair[hidden], .bg-panel [data-range-field][hidden] { display: none; }
.saved-theme-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Números de línea del cuadro de letra (line-numbers.js): franja a la izquierda, dentro del
   borde; el medidor oculto (.ln-mirror) calcula cuánto ocupa cada línea al partirse. */
.numbered { position: relative; }
form .numbered textarea { padding-left: calc(2.1rem + var(--space-sm)); } /* franja de números (.ln-gutter) + separación */
.ln-gutter {
  position: absolute; top: 1px; bottom: 1px; left: 1px; width: 2.1rem; overflow: hidden;
  pointer-events: none; user-select: none; border-right: 1px solid var(--line);
  border-radius: var(--radius) 0 0 var(--radius); background: var(--gutter);
}
.ln-gutter > div > div {
  padding-right: var(--space-xs); text-align: right; color: var(--muted-soft);
  font-family: var(--font-mono); font-size: var(--text-2xs); overflow: hidden;
}
/* Fijo y de alto 0: aunque mida toda la letra, no alarga la página (Firefox sí contaba su
   alto con position: absolute y dejaba espacio vacío al final). Sus filas se miden igual. */
.ln-mirror {
  position: fixed; left: -9999px; top: 0; height: 0; overflow: hidden;
  visibility: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word;
}

/* Pie: Créditos y Privacidad. Al final de la página (si es corta, abajo de la ventana); en el
   espacio personal, al pie de la barra lateral. */
body:has(> .site-footer) { min-height: 100dvh; display: flex; flex-direction: column; }
body:has(> .site-footer) > main { flex: 1 0 auto; }
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-xl) var(--space-lg) var(--space-2xl); color: var(--muted); font-size: var(--text-sm);
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--fg); }
/* Puntito de «nuevo» junto a Novedades: el link no se parte (el punto no baja solo). */
.footer-news { white-space: nowrap; }
.news-dot {
  display: inline-block; width: .45em; height: .45em;
  border-radius: 50%; background: var(--primary); vertical-align: .35em; margin-left: var(--space-2xs);
}
/* Link a otra web (p. ej. «Estado»): flecha hacia afuera. */
.external-link { display: inline-flex; align-items: center; gap: .2em; }
.external-link svg { width: .85em; height: .85em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Los grupos de links no cuentan en el pie de página: una sola línea que se parte sola. */
.footer-group { display: contents; }
/* En móvil, el pie de página también va en dos filas (si no, «Términos» queda solo abajo). */
@media (max-width: 480px) {
  .site-footer { flex-direction: column; align-items: center; }
  .site-footer .footer-group { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-sm); }
  .site-footer .footer-group-sep { display: none; }
}
@media print { .site-footer { display: none; } }

/* Créditos y privacidad */
/* Texto largo: sobre papel blanco (la cuadrícula del fondo distrae al leer). */
.about-page {
  max-width: 44rem; margin: var(--space-3xl) auto var(--space-lg); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--line); padding: var(--space-2xl) var(--space-3xl) var(--space-2xl);
}
@media (max-width: 480px) { .about-page { margin: var(--space-2xs) auto; padding: var(--space-lg) var(--space-md); } }
.about-page .credit-table { background: none; }
.about-page h1 { font-size: var(--text-2xl); margin: var(--space-2xs) 0 var(--space-sm); }
.about-page .lead { font-size: var(--text-base); color: var(--muted); margin: 0 0 var(--space-2xl); }
.about-page h2 { font-size: var(--text-lg); margin: var(--space-3xl) 0 var(--space-sm); }
.about-page ul { padding-left: var(--space-xl); }
.about-page li + li { margin-top: var(--space-xs); }
.about-page a { color: var(--primary); }
/* Novedades: una entrada por publicación, separada con una línea. */
.release { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); }
.release-date { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.about-page .release h2 { margin: var(--space-2xs) 0 var(--space-sm); }
.release-body img { display: block; max-width: 100%; height: auto; margin: var(--space-md) auto; border: 1px solid var(--line); }
.release-body h2, .release-body h3 { font-size: var(--text-base); margin: var(--space-lg) 0 var(--space-xs); }
.release-body pre { overflow-x: auto; }
.release-admin { margin: calc(-1 * var(--space-lg)) 0 0; }
/* Novedades en Administración: lista y editor. */
.admin-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.post-list { list-style: none; padding: 0; }
.post-list > li.admin-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.post-list-title { font-weight: 600; }
.post-list .help { margin: var(--space-2xs) 0 0; }
.post-editor textarea { display: block; width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--text-md); line-height: 1.5; }
.post-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0 var(--space-lg); }
.post-upload label { margin: 0; }
.post-preview { max-width: none; margin: var(--space-lg) 0; }
/* Editor de Novedades: la vista previa en vivo a la derecha del formulario en cuanto el
   espacio del contenido (no la ventana: la barra lateral resta) llega a 40rem; si no, debajo.
   La página es más ancha que las demás de Administración. */
.admin-page.post-editor { max-width: 80rem; container-type: inline-size; }
.post-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
@container (min-width: 40rem) { .post-editor-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.post-editor-grid > form.admin-status { margin: 0; }
.post-live { position: sticky; top: calc(var(--header-h) + var(--space-md)); max-width: none; margin: 0; max-height: calc(100vh - var(--header-h) - var(--space-xl)); overflow-y: auto; }
.post-live .release { margin-top: var(--space-sm); padding-top: 0; border-top: 0; }
.post-preview .release { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 480px) {
  .credit-table { font-size: var(--text-sm); }
  .credit-table td.license { white-space: normal; }
  .credit-table th, .credit-table td { padding: var(--space-xs) var(--space-xs); }
}
.table-scroll { overflow-x: auto; }
.credit-table .license { white-space: nowrap; }
.credit-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); background: var(--surface); border: 1px solid var(--line); }
.credit-table th, .credit-table td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); vertical-align: top; }
.credit-table th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

/* Entrar: un solo formulario (login.js) */
.login-form .login-password { margin-top: var(--space-lg); }
.login-form input[readonly], .auth-card input.otp-account { background: color-mix(in srgb, var(--surface) 85%, var(--line)); color: var(--muted); }
.delete-account-list { margin: 0 0 var(--space-lg); padding-left: var(--space-xl); }
.delete-account-list li + li { margin-top: var(--space-xs); }
/* Dejar la cuenta: cada script o grupo con su desplegable «pasar a». */
.leave-page form { display: grid; gap: var(--space-lg); }
.leave-transfer h3 { font-size: var(--text-base); margin: var(--space-lg) 0 var(--space-xs); }
.leave-all { margin-top: var(--space-sm); }
.leave-list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.leave-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-top: 1px solid var(--line); }
.leave-list .leave-name { min-width: 0; overflow-wrap: anywhere; }
.leave-list select { flex: 0 1 14rem; min-width: 0; }
@media (max-width: 480px) {
  .leave-list li { flex-direction: column; align-items: stretch; gap: var(--space-2xs); }
  .leave-list select { flex: none; }
}

/* ---------------------------------------------------------------- Portada (index.html) */
body.home main { padding: 0 var(--space-lg); }
.home-hero, .home-section { max-width: 72rem; margin: 0 auto; }
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-4xl);
  align-items: start; padding: var(--space-4xl) 0 var(--space-5xl);
}
/* La hoja de ejemplo mide unos 960 px (home.js reserva el alto de su tema más alto). En
   pantallas más bajas, el texto va arriba y fijo al bajar: centrado dejaría el botón de
   registro fuera de la vista. Si el hero entero cabe en la pantalla, centrado (sin vacío
   debajo del texto). El relleno alinea el título con la hoja, bajo los botones de tema. */
.home-hero-text { position: sticky; top: calc(var(--header-h) + var(--space-3xl)); padding-top: var(--space-4xl); }
@media (min-height: 1100px) {  /* ≈ hero completo: barra + rellenos + botones + hoja */
  .home-hero { align-items: center; }
  .home-hero-text { position: static; padding-top: 0; }
}
.home-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.03em; margin: var(--space-sm) 0 var(--space-lg); }
.home-lead { font-size: var(--text-lg); line-height: 1.55; color: var(--muted); margin: 0; max-width: 34rem; }
.home-hero .hero-actions { justify-content: flex-start; }
.home-fineprint { margin: var(--space-lg) 0 0; font-size: var(--text-md); color: var(--muted); }
.home-demo { margin: 0; }
.home-demo figcaption {
  display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm) var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--primary-ink);
}
.demo-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--primary); animation: demo-pulse 1.8s ease-in-out infinite; }
@keyframes demo-pulse { 50% { opacity: .25; } }
.demo-swipe { display: none; }
@media (prefers-reduced-motion: reduce) { .demo-dot { animation: none; } }
/* Mismo corte que la franja deslizable de columnas de script.css (700 px). */
@media (max-width: 700px) {
  .demo-swipe { display: block; flex-basis: 100%; text-align: center; color: var(--muted); }
}
.home-demo .sheet-wrap { padding: 0; }
.home-demo .sheet { box-shadow: 0 18px 50px #4a300018, 0 2px 8px #0001; }
.home-demo .sheet { display: flex; flex-direction: column; min-height: var(--demo-height, 0px); }
.home-demo .sheet-paper { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.home-theme-buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.home-theme-buttons [aria-pressed="true"] { background: var(--primary-tint); border-color: var(--primary); }
.sheet.member-discovery .singers a { display: inline-block; animation: member-glow 3.5s ease-in-out infinite; }
@keyframes member-glow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent); }
  50% { box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet.member-discovery .singers a { animation: none; background: color-mix(in srgb, var(--accent) 8%, transparent); }
}

.home-section { padding: var(--space-5xl) 0; border-top: 1px solid var(--line); scroll-margin-top: 4rem; }
.home-section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; margin: var(--space-xs) 0 var(--space-2xl); }
.home-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--space-xl) var(--space-xl) var(--space-lg);
}
.home-card h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.home-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.home-steps, .home-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-lg); }
.home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-number { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--primary); margin-bottom: var(--space-2xl); }
.home-card code { font-family: var(--font-mono); font-size: .85em; background: var(--primary-tint); padding: 0 .25em; border-radius: var(--radius-sm); color: var(--primary-ink); }
.home-grid svg {
  width: 22px; height: 22px; margin-bottom: var(--space-md); color: var(--primary);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.home-grid a { color: var(--primary); }
.home-aside { color: var(--muted); font-style: italic; }

.home-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-4xl); align-items: center; }
.home-intro { max-width: 40rem; margin-bottom: var(--space-2xl); }
.home-feature-text p:not(.eyebrow) { color: var(--muted); font-size: var(--text-base); line-height: 1.55; margin: 0; }
.home-feature-text h2 { margin-bottom: var(--space-lg); }
.home-chart { padding: var(--space-2xl); }
.home-bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-md); align-items: center; margin-bottom: var(--space-lg); }
.home-bar-label { font-size: var(--text-md); color: var(--muted); }
.home-bar { display: flex; height: 2.1rem; border-radius: var(--radius-sm); overflow: hidden; }
.home-bar span {
  display: grid; place-items: center; flex-basis: 0; min-width: 0; overflow: hidden;
  color: #fff; font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 2px #0006;
}
.home-chart .chart-key { margin: var(--space-lg) 0 0; font-size: var(--text-sm); }

.home-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.home-theme { margin: 0; }
.home-theme figcaption { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; }
/* Una hoja de verdad, a la mitad de su tamaño: se ve el principio (título, reparto). */
.home-theme-frame { height: 21rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.home-theme-frame .sheet { width: 200%; transform: scale(.5); transform-origin: top left; pointer-events: none; }

.home-cta { text-align: center; padding: var(--space-5xl) 0 var(--space-4xl); }
.home-cta-logo { display: block; margin: 0 auto var(--space-lg); }
.home-cta h2 { margin-bottom: var(--space-sm); }
.home-cta p { color: var(--muted); font-size: var(--text-lg); margin: 0; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); padding: var(--space-3xl) 0 var(--space-4xl); }
  .home-hero-text { position: static; padding-top: 0; }
  .home-feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .home-steps { grid-template-columns: minmax(0, 1fr); }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .home-themes { grid-template-columns: minmax(0, 1fr); }
  .home-theme-frame { height: 13rem; }
  .home-bar-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .home-section { padding: var(--space-4xl) 0; }
  /* Teléfono: botones del inicio centrados, y los de tema del ejemplo más grandes para el dedo */
  .home-hero .hero-actions { justify-content: center; }
  .home-demo figcaption { justify-content: center; margin-left: 0; flex-wrap: wrap; }
  /* Teléfono: «Y además» en dos columnas compactas (seis tarjetas apiladas alargaban mucho
     la página). */
  .home-grid { gap: var(--space-sm); }
  .home-grid .home-card { padding: var(--space-md); }
  .home-grid h3 { font-size: var(--text-base); }
  .home-grid p { font-size: var(--text-md); }
  .home-theme-buttons { justify-content: center; gap: var(--space-sm); }
  .home-theme-buttons .btn.small { padding: var(--space-sm) var(--space-lg); font-size: var(--text-base); }
}

/* 2FA: recordar el dispositivo, y olvidar los recordados (Cuenta) */
.trust-device { margin: var(--space-md) 0 var(--space-2xs); font-size: var(--text-md); color: var(--muted); }
.forget-devices { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.forget-devices .help { margin-bottom: var(--space-sm); }

/* ---------------------------------------------------------------- Movimiento
   Corto y sutil (--dur-fast / --dur / --dur-slow, curva --ease): menús y paneles aparecen
   desde su botón, los diálogos con el fondo oscureciéndose y los desplegables deslizan su
   contenido al abrir. Con «reducir movimiento» del sistema, nada se mueve. */
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes pop-up { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.account-menu[open] > .account-menu-items, .recent-menu[open] .recent-menu-panel,
.nav-more.is-open .nav-more-items, .reading-panel {
  animation: pop-in var(--dur) var(--ease); transform-origin: top right;
}
.person-permissions[open] .permission-popover, .role-menu[open] .permission-popover,
.actions .stats-window > .insights-stats[open] > .stats-content {
  animation: pop-up var(--dur) var(--ease); transform-origin: bottom center;
}
dialog[open] { animation: dialog-in var(--dur) var(--ease); }
dialog[open]::backdrop { animation: fade-in var(--dur) var(--ease); }
.disclosure[open] > :not(summary) { animation: reveal var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}