/* 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. */
:root {
  --bg: #f5f2ea;            /* papel cálido */
  --surface: #fffdf8;       /* tarjetas, barra */
  --ok-bg: #edf8f0;         /* confirmaciones: «✓ Listo», avisos flotantes */
  --ok-line: #b3e2c3;
  --ok-fg: #3f8a5c;
  --fg: #1f1a14;            /* tinta */
  --muted: #6f665a;
  --line: #e3dccb;          /* bordes suaves */
  --line-strong: #cbc0a8;   /* bordes de campos */
  --grid: #8a5a0010;        /* cuadrícula del fondo */
  --primary: #8a5a00;       /* dorado oscuro: acento */
  --primary-tint: #f8ebcf;  /* relleno pastel del botón principal */
  --primary-ink: #4a3000;   /* texto sobre el relleno pastel */
  --radius: 4px;
  --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;
  font-family: var(--font-ui);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
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: 1rem; }
code { background: #efe7d4; padding: 0 .25em; border-radius: 2px; 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: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.topbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 800; letter-spacing: -.02em; color: inherit; text-decoration: none; margin-right: auto; white-space: nowrap; }
.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: .4rem; padding: .5rem .75rem; }
  .topbar .btn { padding: .45rem .65rem; }
}
/* 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: 1.1rem; line-height: 1; }
  .nav-more.is-ready .nav-more-items {
    display: none; position: absolute; top: calc(100% + .4rem); right: 0; z-index: 30;
    min-width: 13rem; padding: .3rem; flex-direction: column; gap: .15rem;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: 0 8px 24px #0002;
  }
  .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: .55rem; color: var(--muted); }
  .nav-more.is-open .nav-more-toggle { background: var(--primary-tint); border-color: var(--fg); }
}

.btn {
  display: inline-block; padding: .5rem .9rem; 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 .12s, border-color .12s;
}
.btn:hover { border-color: var(--fg); }
.btn:disabled { opacity: .5; cursor: default; }
/* 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: .6rem; justify-content: center; margin-top: 1.5rem; }
.muted { color: var(--muted); }

/* Editor */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; }
@media (max-width: 900px) { .editor-layout { grid-template-columns: 1fr; } }

form fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 0 0 1rem; }
form legend { padding: 0 .4rem; }
form label { display: block; margin: .6rem 0; font-weight: 500; font-size: .95rem; }
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: .3rem; padding: .5rem .6rem;
  border: 1px solid var(--line-strong); border-radius: 3px; background: #fff;
  font: inherit; font-weight: 400; color: var(--fg);
}
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: #a99f8e; }
form textarea { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; resize: vertical; }
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: .6rem; 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: 3px; }
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: .85rem; color: var(--muted); margin-top: 0; }
.lane-editor { margin-bottom: .75rem; }
.lane-bar { display: flex; gap: .4rem; }
.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;
}
.remove-lane:hover { color: #c53030; border-color: #f0b4b4; background: #fff5f5; }
.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: .5rem;
  position: sticky; bottom: 0; padding: .75rem 0; background: var(--bg);
}
.btn.discard { background: #fff; }
.section-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* Pestañas Editar / Vista previa (móvil) */
.editor-tabs {
  position: sticky; top: 0; z-index: 9;
  display: flex; gap: .25rem; padding: .25rem; margin: -1rem -1rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.editor-tabs button {
  flex: 1; padding: .55rem; 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); }
.warn-count { color: #b7791f; }
.editor-tabs[hidden] { display: none; }
@media (min-width: 901px) { .editor-tabs { display: none; } }
@media (max-width: 900px) {
  body.editor .topbar { position: static; }
  .editor-layout.tabs-on[data-tab="edit"] .preview-pane,
  .editor-layout.tabs-on[data-tab="preview"] form { display: none; }
  .editor-layout.tabs-on .pane-title { display: none; }
}

.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: 1rem; margin: 0 0 .5rem; }
.warnings { background: #fff4d6; border: 1px solid #ecc94b; border-radius: var(--radius); padding: .5rem .75rem .5rem 1.5rem; font-size: .85rem; }

.editor-feedback { margin: 0 0 1rem; color: var(--primary-ink); }
.editor-feedback p { margin: .4rem 0; }
.editor-error { margin: 0 0 1rem; }
.error-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Permalink */
body.view main { padding: 1rem 0; }
.sheet-wrap { padding: 0 .5rem; }
@media (max-width: 700px) { .sheet-wrap { padding: 0 .25rem; } }
.sheet-wrap .sheet { box-shadow: 0 2px 16px #0001; border-radius: 4px; }

@media print {
  .topbar { 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: #fff; border-bottom: 1px solid var(--line);
  padding: .6rem 1rem; display: grid; gap: .5rem;
  position: absolute; top: 100%; left: 0; right: 0;
  box-shadow: 0 6px 16px #0000001a;
}
.reading-panel[hidden] { display: none; }
.reading-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.reading-label { font-weight: 600; font-size: .9rem; min-width: 5rem; }
.reading-panel .btn { padding: .35rem .7rem; }
.reading-panel .btn.link { border: 0; background: none; text-decoration: underline; color: #6b6f76; }
#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: .35rem .7rem; border: 0; border-left: 1px solid var(--line);
  background: #fff; 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; }
@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: 1rem; }

/* Editor de integrantes y grupos en filas (cast-editor.js) */
.cast-section { margin-bottom: 1rem; }
.cast-section h3 { font-size: .95rem; margin: .5rem 0 .4rem; }
.cast-section h3 small { font-weight: 400; color: #6b6f76; }
.cast-head, .cast-row.member {
  display: grid; grid-template-columns: 1.8rem 4rem minmax(0, 1fr) auto 2rem;
  gap: .4rem; align-items: center;
}
.cast-head { font-size: .75rem; color: #6b6f76; margin-bottom: .2rem; }
.cast-head span:first-child { grid-column: 2; }
.cast-head span:nth-child(3) { grid-column: 4 / span 2; }
.cast-palette { margin-bottom: .8rem; }
.member-drag {
  padding: .4rem 0; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 1.3rem; cursor: grab; touch-action: none; user-select: none;
}
.member-drag:active { cursor: grabbing; }
.cast-row.member { padding: .3rem; 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: 30; pointer-events: none; box-shadow: 0 5px 18px #0002; }
.cast-row { margin-bottom: .4rem; }
.cast-row.team {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 2.2rem; gap: .4rem; align-items: center;
  padding: .5rem; 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: #e53e3e; background: #fff5f5; }
.color-box { display: flex; align-items: center; gap: .15rem; }
form .cast-row input[type=color] {
  width: 2.4rem; height: 2.2rem; padding: 2px; margin: 0; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; cursor: pointer;
}
.color-auto, .cast-row .remove {
  border: 0; background: none; cursor: pointer; font: inherit; color: #6b6f76; padding: .2rem;
}
.cast-row .remove { width: 2.2rem; height: 2.2rem; border-radius: 6px; }
.cast-row .remove:hover { background: #f3f1ec; color: #c53030; }
.member-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem; }
.member-chip {
  --chip: #888;
  padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: inherit; font-size: .9rem; cursor: pointer; color: #4b4f56;
}
.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: .25rem; padding: .25rem; margin-bottom: 1rem; 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: 8; margin-bottom: 1rem; }
.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: .5rem; padding: .6rem; border: 1px solid var(--line-strong); background: var(--primary-tint); font-size: .8rem; }
.editor-tip [data-tip-text] { flex: 1; min-width: 10rem; }
.tip-dismiss { border: 0; background: none; color: var(--muted); cursor: pointer; padding: .4rem; }
.editor-section { scroll-margin-top: calc(var(--editor-sticky-top, 3.5rem) + 4rem); }
.steps button {
  flex: 1; padding: .55rem; border: 1px solid transparent; border-radius: 3px; 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: .75rem; margin-bottom: 1rem; }
.step-assign > .help { margin-top: 0; }
.assign-lanes { display: flex; gap: .25rem; margin-bottom: .6rem; overflow-x: auto; }
.assign-lanes button {
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.assign-lanes button[aria-selected="true"] { border-color: var(--primary); background: var(--bg); font-weight: 600; }
.assign-palette { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.pick {
  --c: #6b6f76;
  padding: .4rem .75rem; border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); border-radius: 999px;
  background: #fff; color: var(--c); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.pick.team { border-style: dashed; }
.pick.special { --c: #6b6f76; 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: .5rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fffdf7; font-family: "Lora", Georgia, serif; font-size: 1rem; line-height: 1.5;
}
.a-line { position: relative; padding: .15rem .4rem .15rem 2.1rem; border-radius: 6px; 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: .62rem; line-height: 1.2rem; text-align: right;
  color: #b0aa9c; pointer-events: none; user-select: none;
}
.a-line.blank::before { content: none; } /* cuenta, pero no se muestra: es más baja y se montaría */
.a-line:hover { background: #0000000a; }
.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: #b9b4a8; }
.a-run.pending { color: #8a8f98; background: repeating-linear-gradient(90deg, #8a8f9833 0 4px, transparent 4px 8px) bottom / 100% 1px no-repeat; }
.a-run.sel { background: color-mix(in srgb, var(--primary) 22%, #fff); border-radius: 3px; }
.assign-status { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .9rem; color: #4b4f56; 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: .4rem; margin: .4rem 0 .2rem; }
.lane-format { display: inline-flex; gap: .25rem; margin-right: auto; }
.lane-format .btn { min-width: 2rem; justify-content: center; padding-inline: .5rem; font-family: Georgia, serif; }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.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: 0 20px 50px #0000004d;
  background: var(--surface);
}
.confirm-dialog[data-tone="danger"] { --tone: #c53030; }
.confirm-dialog::backdrop { background: #1f232880; backdrop-filter: blur(2px); }
.confirm-dialog form { padding: 1.1rem 1.25rem 1rem; }
.confirm-title { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--tone); }
.confirm-message { margin: 0 0 1.1rem; color: #4b4f56; line-height: 1.4; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.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: #c53030; }
.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: .35rem; padding: 0; vertical-align: middle;
  border: 1px solid var(--primary); border-radius: 50%; background: #fff; color: var(--primary);
  font: inherit; font-size: .85rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.help-toggle:hover { background: var(--primary); color: #fff; }
.help-pop {
  padding: .8rem 1rem; border: 1px solid var(--line-strong); border-top: 3px solid var(--primary);
  border-radius: var(--radius); background: var(--surface); font-size: .9rem;
}
/* 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: 0 12px 36px #00000040;
  }
}
@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: #6b6f76; cursor: pointer; padding: .2rem .4rem; }
.help-pop p { margin: .4rem 0; }
.help-pop dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .6rem; margin: .5rem 0; }
.help-pop dt { white-space: nowrap; }
.help-pop dd { margin: 0; }

.lanes-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin: .25rem 0 .5rem; }
.assign-top { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-bottom: .6rem; }
.assign-cols { display: inline-flex; gap: .25rem; }
.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: .75rem; }
.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: .5rem; margin-bottom: .5rem; }
.assign-pane-head .assign-lanes { margin-bottom: 0; min-width: 0; }
.assign-pane-head [data-assign-reset] { flex: none; }
form .assign-lane-select { flex: 1; min-width: 0; width: auto; margin: 0; padding: .35rem .4rem; font-weight: 600; }
.is-split .assign-lines { font-size: .95rem; }
@media (max-width: 700px) {
  .is-split .assign-lines { font-size: .85rem; padding: .35rem; }
  .is-split .assign-pane-head { flex-wrap: wrap; justify-content: flex-end; }
  .is-split .assign-lane-select { flex-basis: 100%; }
}
.assign-palette .assign-clear { margin-left: auto; align-self: center; }
.confirm-dialog[data-tone="warning"] { --tone: #b7791f; }
.confirm-list { margin: -.5rem 0 1.1rem; padding-left: 1.2rem; color: #4b4f56; line-height: 1.4; }
.confirm-list li + li { margin-top: .3rem; }

/* 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. */
.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: 20;
  min-width: 13.5rem; max-width: calc(100vw - 1.5rem); padding: .3rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 8px 24px #0002; display: flex; flex-direction: column;
}
.account-menu-who {
  margin: 0 0 .3rem; padding: .45rem .6rem .6rem; border-bottom: 1px solid var(--line);
  display: grid; gap: .1rem; font-size: .9rem; overflow-wrap: anywhere;
}
.account-menu-who span { color: var(--muted); font-size: .82rem; }
.account-menu-items a, .account-menu-items button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem;
  border: 0; border-radius: var(--radius); background: none; color: var(--fg);
  font: inherit; font-size: .95rem; 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: .3rem 0 0; padding-top: .3rem; 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: .45rem .85rem; margin-right: .25rem; text-decoration: none; color: var(--fg); font-weight: 600;
}
.topbar .btn.link:hover { background: #1f1a140f; color: var(--fg); }

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

/* Cuentas, compartir, desbloquear: una columna angosta */
.auth-page { max-width: 28rem; margin: 2.5rem auto; }
.auth-page h1 { font-size: 2rem; margin: 0 0 1.1rem; }
.auth-page h1:has(+ p) { margin-bottom: .4rem; }
.auth-page > p { margin: 0 0 1.25rem; }
.auth-page > p:not(.form-ok, .form-error) { color: var(--muted); }
.auth-card h2 { margin: 0 0 .75rem; }
/* Tarjeta con marcas en las esquinas (como las de Hex). */
.auth-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 2px; padding: 1.1rem 1.2rem; margin: 0 0 1.25rem;
}
.auth-card::before, .home-card::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: .75rem; }
.account-username-value {
  display: block; margin: .35rem 0 0 1rem; color: var(--fg); overflow-wrap: anywhere;
}
.auth-alt { text-align: center; color: var(--muted); }
.auth-back { margin: 0 0 .5rem; }
.auth-link summary { cursor: pointer; font-weight: 600; }
.auth-link form { margin-top: .6rem; }
.btn.wide { width: 100%; margin-top: .4rem; }
.code-input { font-size: 1.4rem !important; letter-spacing: .3em; text-align: center; }
.form-error { background: #fff5f5; border: 1px solid #f0b4b4; color: #9b2c2c; border-radius: var(--radius); padding: .5rem .75rem; }
.form-ok { background: #f0fff4; border: 1px solid #9ae6b4; color: #22543d; border-radius: var(--radius); padding: .5rem .75rem; }
.dev-notice { background: #fffbea; border: 1px dashed #d69e2e; border-radius: var(--radius); padding: .6rem .75rem; margin: 0 0 1rem; }
.dev-code { font-size: 1.2rem; letter-spacing: .15em; }
.inline-form { display: flex; gap: .5rem; align-items: center; }
.inline-form input { margin-top: 0 !important; }
.qr { display: block; margin: .5rem 0; background: #fff; }
.totp-secret { word-break: break-all; }
.steps-list { padding-left: 1.2rem; }
.steps-list li { margin-bottom: .5rem; }
/* Códigos de respaldo de la 2FA */
.recovery-codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem 1rem;
  margin: 0 0 .8rem; padding-left: 1.6rem; font-variant-numeric: tabular-nums;
}
.recovery-codes li::marker { color: var(--muted); font-size: .85em; }
.recovery-codes code { font-size: 1.05rem; letter-spacing: .04em; }
@media (max-width: 22rem) { .recovery-codes { grid-template-columns: 1fr; } }
.two-buttons { display: flex; gap: .5rem; }
.two-buttons .btn { flex: 1; text-align: center; }
.recovery-status { margin: 0 0 .6rem; }
.recovery-status.is-low { color: #975a16; }
.code-input:not([inputmode="numeric"]) { font-size: 1.1rem !important; letter-spacing: .08em; }
.recovery-login > summary { cursor: pointer; color: var(--muted); }
.recovery-login[open] > summary { margin-bottom: .75rem; }
.inline-form select, .people select { width: auto; margin-top: 0; }

/* Compartir */
.share-link { width: 100%; padding: .45rem .55rem; margin-bottom: .6rem; border: 1px solid var(--line-strong); border-radius: 3px; font-family: var(--font-mono); font-size: .85rem; background: #fff; }
.radio-list label { margin: .35rem 0; }
.radio-list .check { padding: .6rem .7rem; 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 .75rem; }
.people li { display: flex; align-items: center; gap: .5rem; padding: .5rem 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: .4rem; }
.share-dialog {
  width: min(35rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg);
  box-shadow: 0 20px 80px #0003; overflow: auto;
}
.share-dialog::backdrop { background: #1f1a1466; }
body:has(#share-dialog[open]) { overflow: hidden; }
.share-dialog-head { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.share-dialog .share-page { margin: 0; max-width: none; }
.share-dialog h1 { font-size: 1.35rem; 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 1rem; font-size: 1.35rem; font-weight: 500; }
.share-panel .people-add { padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.share-entry-row { position: relative; display: flex; align-items: center; gap: .45rem; }
.share-search { display: flex; flex: 1; align-items: center; min-width: 0; }
.share-search-icon { color: var(--muted); font-size: 1.4rem; }
.share-panel .share-search input {
  min-width: 0; margin: 0; border-color: transparent; background: transparent; padding-left: .2rem;
}
.share-panel .share-search input:focus { border-color: var(--line-strong); box-shadow: none; }
.share-entry-row select { flex: none; width: auto; max-width: 6rem; margin: 0; padding: .35rem .15rem; font-size: .75rem; }
.share-entry-row > button { flex: none; padding: .4rem .5rem; font-size: .8rem; }
.share-search-status { min-height: 1.35em; font-size: .7rem; margin: .4rem 0 0; }
.share-search-status.form-ok { padding: 0; border: 0; background: none; color: #22543d; }
.recipient-chip { display: inline-flex; align-items: center; max-width: 100%; gap: .25rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .3rem; background: var(--primary-tint); font-size: .8rem; }
.recipient-chip [data-recipient-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.recipient-chip button { border: 0; padding: .1rem .15rem; background: none; color: var(--muted); font: inherit; cursor: pointer; flex: none; }
.share-panel .share-search input[type="search"] { width: 100%; font-size: .85rem; }
.share-suggestions {
  position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 5;
  padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 8px 24px #0002;
}
.share-suggestion {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem;
  border: 1px solid transparent; border-radius: var(--radius); background: none;
  font: inherit; font-size: .9rem; 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: .75rem; margin-top: .15rem; }
/* En el flujo (no flotando): así el diálogo crece con la lista en vez de recortarla. */
.share-panel .share-suggestions { position: static; margin-top: .4rem; max-height: min(20rem, 50dvh); overflow-y: auto; box-shadow: none; }
.share-suggestions-head { margin: .35rem .5rem .15rem; font-size: .65rem; }
.share-suggestions-head:first-child { margin-top: .15rem; }
.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: .8rem;
}
.share-panel .people { margin: .5rem 0 1rem; }
.share-panel .people li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
  padding: .7rem 0; border-bottom: 0; gap: .65rem;
}
.share-panel .people .person { min-width: 0; font-size: .9rem; }
.share-panel .people small { font-size: .75rem; }
.share-owner-role { color: var(--muted); font-size: .75rem; text-align: right; max-width: 7rem; }
.person-permissions { position: relative; }
.person-permissions > summary, .share-access-menu > summary {
  list-style: none; cursor: pointer; padding: .35rem .4rem; border: 1px solid transparent;
  border-radius: var(--radius); color: var(--primary-ink); font-size: .8rem;
}
.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: 4;
  width: min(19rem, calc(100vw - 5rem)); padding: .4rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px #0002;
}
.share-panel .permission-option {
  display: flex; align-items: start; gap: .6rem; padding: .6rem; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.permission-option:has(:checked), .permission-option:hover { background: var(--primary-tint); border-color: var(--line); }
.permission-option input { margin-top: .1rem; }
.permission-option b { font-weight: 500; font-size: .85rem; }
.permission-option small { color: var(--muted); margin-top: .25rem; line-height: 1.4; }
.permission-remove { margin-top: .5rem !important; padding-top: .4rem; border-top: 1px solid var(--line); }
.permission-remove .btn { font-size: .8rem; text-align: left; width: 100%; }
.share-footer { position: relative; border-top: 1px solid var(--line); padding-top: .8rem; }
.share-access-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: .4rem; max-width: calc(100% - 7.5rem); height: 2.3rem; padding: .5rem; 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: 4; width: min(23rem, calc(100vw - 2rem)); padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px #0002; }
.share-password-status { font-size: .75rem; margin-bottom: 0; }
.share-password input[aria-invalid="true"] { border-color: #9b2c2c; }
.share-panel .radio-list .check { font-size: .85rem; }
.share-panel .share-link { margin: .75rem 0 0; }
.share-panel .share-password { font-size: .85rem; }

/* Los datos ya completos dejan a la letra como centro del editor. */
.editor-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; }
.editor-section > summary { padding: .7rem .85rem; cursor: pointer; }
.section-summary { margin-left: .65rem; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
form .editor-section > fieldset { border: 0; margin: 0; padding: .2rem .85rem .85rem; min-width: 0; }
.editor-section[open] > summary { border-bottom: 1px solid var(--line); }
.editor-insights { border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem; margin: 1rem 0; background: var(--surface); }
.insights-stats > summary { cursor: pointer; }
.live-label { float: right; font-size: .6rem; color: var(--primary); }
.stats-scroll { overflow-x: auto; margin-top: .7rem; }
.stats-table { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: .45rem .35rem; 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: .65rem; font-weight: 500; text-transform: uppercase; }
.stats-table small { display: block; color: var(--muted); font-weight: 400; }
.stats-note { font-size: .75rem; margin: .7rem 0 0; }
.stats-window {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  width: min(34rem, calc(100vw - 2rem)); border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 32px #0002;
}
.stats-window > .insights-stats > summary { padding: .85rem; min-height: 2.75rem; touch-action: pan-y; cursor: grab; user-select: none; }
.stats-window.is-left { right: auto; left: 1rem; }
.stats-window.is-dragging { box-shadow: 0 14px 40px #0003; }
.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.is-dragging > .insights-stats > summary { cursor: grabbing; }
/* Colapsada ocupa solo lo que necesita su encabezado. */
.stats-window:not(:has(> .insights-stats[open])) { width: auto; max-width: calc(100vw - 2rem); }
.stats-window > .insights-stats[open] > summary { border-bottom: 1px solid var(--line); }
.stats-window .stats-content { padding: .85rem; max-height: min(65dvh, 30rem); overflow: auto; }
.chart-key { display: flex; flex-wrap: wrap; gap: .45rem .8rem; font-size: .7rem; margin-bottom: .75rem; }
.chart-key > span { display: inline-flex; gap: .35rem; 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: .35rem; }
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 2.5rem; color: var(--muted); font-size: .6rem; 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: .65rem; 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: 2.75rem; }
.chart-stack.empty { min-height: 1px; background: var(--line-strong); }
.chart-segment { display: grid; place-items: center; flex-basis: 0; min-height: 0; overflow: hidden; color: #fff; font-size: .62rem; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 2px #0006; }
.chart-name { margin-top: .35rem; font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; overflow: hidden; }
.stats-detail-table { margin-top: .75rem; }
.stats-detail-table > summary { font-size: .8rem; cursor: pointer; color: var(--primary-ink); }
@media (max-width: 900px) {
  .stats-window { bottom: 5.5rem; }
  .stats-window .stats-content { max-height: 50dvh; }
}
/* Móvil: dentro de la barra de botones (editor.js la mueve ahí). La pastilla dice «Cifras» y
   el contenido se abre hacia arriba, a lo ancho, pegado a la barra. */
.actions .stats-window {
  position: static; width: auto; max-width: none; margin-right: auto; box-shadow: none;
}
.actions .stats-window > .insights-stats > summary {
  display: flex; align-items: center; min-height: 0; padding: .55rem .7rem; cursor: pointer; touch-action: auto;
}
.actions .stats-window .stats-title-long, .actions .stats-window .live-label { display: none; }
.actions .stats-window > .insights-stats[open] > summary { border-bottom: 0; background: var(--primary-tint); }
.actions .stats-window > .insights-stats[open] > .stats-content {
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: 20;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 -8px 28px #0002; max-height: 55dvh;
}
.group-suggestions { margin-top: 1rem; }
.group-suggestion { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.group-suggestion > span { flex: 1; min-width: 9rem; font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 600px) { .section-summary { display: block; margin: .35rem 0 0 1rem; } }

/* Inicio, papelera y cuenta comparten la navegación del espacio personal. */
.workspace main { padding: 0; }
.workspace-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); min-height: calc(100dvh - 3.5rem); }
.workspace-sidebar { position: sticky; top: 3.5rem; align-self: start; height: calc(100dvh - 3.5rem); overflow-y: auto; border-right: 1px solid var(--line); background: var(--surface); padding: 1rem .75rem; }
.workspace-sidebar nav { display: flex; flex-direction: column; gap: .3rem; min-height: 100%; }
.workspace-links { display: grid; gap: .3rem; }
.workspace-link { display: flex; align-items: center; gap: .65rem; padding: .4rem .65rem; 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"] { background: var(--primary-tint); border-color: var(--line-strong); color: var(--primary-ink); }
.workspace-account { margin-top: auto; }
.sidebar-recent { margin: .25rem 0 1rem; min-width: 0; height: 12rem; flex: none; }
.sidebar-recent h2 { margin: 0 .65rem .6rem; }
.sidebar-recent ul { list-style: none; padding: 0; margin: 0; }
.recent-row { position: relative; display: flex; align-items: center; gap: .2rem; padding: .15rem .3rem .15rem .65rem; 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: .5rem; flex: 1; min-width: 0; color: var(--fg); text-decoration: none; font-size: .85rem; padding: .3rem 0; }
.recent-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-actions { display: flex; align-items: center; flex: none; gap: .15rem; }
.recent-empty { font-size: .8rem; padding: .5rem .65rem; }
.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: 15; min-width: 11rem; padding: .3rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 6px 18px #0002; }
.recent-menu-panel a, .recent-menu-panel button { display: block; width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--fg); text-decoration: none; font: inherit; font-size: .85rem; 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: 1rem 2rem; }
.workspace .auth-page { margin-top: 2rem; }
.list-page { max-width: 56rem; margin: 2rem auto; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.list-head h1 { font-size: 2rem; margin: 0; }
.list-page h2 { margin: 1.5rem 0 .6rem; }
.script-list {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  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: .4rem;
  /* 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: .75rem; margin: 1rem 0; font-size: .85rem; }
.script-view-all { margin: -.75rem 0 1.5rem; }
.script-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 8rem) minmax(5rem, 8rem) 6.5rem;
  align-items: center; gap: .75rem; min-height: 3.15rem; padding: .35rem .5rem;
  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: .65rem; min-width: 0; padding: .25rem 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: .75rem; margin-top: .15rem; overflow-wrap: anywhere; }
.script-access { min-width: 0; color: var(--muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.script-author { min-width: 0; font-size: .8rem; overflow-wrap: anywhere; }
.script-actions { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; }
.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 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .5rem; border-bottom: 1px solid var(--line); }
.trash-actions, .delete-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.trash-row .script-name { flex: 1; }
.delete-script-dialog { max-width: min(30rem, calc(100vw - 2rem)); padding: 1.5rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.delete-script-dialog::backdrop { background: #1f1a1455; }
.delete-script-dialog h2 { margin-top: 0; }
.delete-script-dialog p { overflow-wrap: anywhere; }
.danger-dialog { border-color: #c53030; background: #fff8f7; }
.danger-dialog h2 { color: #9b2c2c; }
.trash-preview-warning { max-width: 56rem; margin: 0 auto 1rem; padding: .85rem 1rem; border: 1px solid #c53030; border-radius: var(--radius); background: #fff8f7; color: #752323; }
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100vw - 2rem); padding: .8rem 1rem; border: 1px solid var(--ok-line); border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-fg); box-shadow: 0 4px 20px #0002; font-size: .85rem; font-weight: 500; transition: opacity .35s, translate .35s; }
.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; }
/* «✓ Listo» junto al control que se acaba de guardar (Cuenta); toast.js lo desvanece. */
.saved-badge {
  display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: .25rem .55rem;
  border: 1px solid var(--ok-line); border-radius: var(--radius); background: var(--ok-bg); color: var(--ok-fg);
  font-size: .8rem; font-weight: 600; white-space: nowrap; transition: opacity .35s;
}
.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) {
  .workspace-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .workspace-content { padding: 1rem; }
  .script-row { grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .5rem; padding: .5rem; }
  .script-main { grid-column: 1; grid-row: 1; }
  .script-author { grid-column: 1; grid-row: 2; padding-left: 1.8rem; }
  .script-access { grid-column: 1; grid-row: 3; padding-left: 1.8rem; white-space: normal; }
  .script-actions { grid-column: 2; grid-row: 1 / span 3; }
  .list-head { gap: .5rem; }
  .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: .5rem; }
  .workspace-sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-links { display: contents; }
  .workspace-link { justify-content: center; gap: .4rem; padding: .65rem .4rem; font-size: .85rem; }
  .workspace-links > .workspace-link { grid-row: 2; }
  .workspace-account { grid-column: 3; grid-row: 2; margin-top: 0; }
  .sidebar-recent { grid-column: 1 / -1; grid-row: 1; margin: .75rem 0; height: 16.5rem; }
  .row-action { width: 2.5rem; height: 2.5rem; }
  .workspace-content { padding: .75rem; }
  .workspace .list-page, .workspace .auth-page { margin: 1rem auto; }
}
/* Menú hamburguesa del espacio personal (workspace.js). Solo en pantallas angostas 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 superior, con la misma estructura que en desktop. */
.menu-toggle { display: none; }
@media (max-width: 700px) {
  html.js body.workspace .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: -.55rem;
    border-radius: 1px; background: var(--fg); transition: transform .25s ease, opacity .2s 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 .workspace-sidebar {
    position: fixed; inset: var(--topbar-h, 3.25rem) 0 0 0; z-index: 9; height: auto;
    align-self: stretch; /* con «start» (desktop) no se estira hasta abajo */
    overflow-y: auto; overscroll-behavior: contain; padding: 1rem; border: 0;
    visibility: hidden; opacity: 0; transform: translateY(-.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  html.js .workspace-layout.menu-open .workspace-sidebar {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  html.js .workspace-layout .workspace-sidebar nav { display: flex; flex-direction: column; gap: .3rem; }
  html.js .workspace-layout .workspace-links { display: grid; gap: .3rem; }
  html.js .workspace-layout .workspace-link { justify-content: flex-start; gap: .75rem; padding: .7rem .65rem; font-size: 1rem; }
  html.js .workspace-layout .workspace-links > .workspace-link, html.js .workspace-layout .workspace-account { grid-row: auto; grid-column: auto; }
  html.js .workspace-layout .workspace-account { margin-top: .3rem; }
  html.js .workspace-layout .sidebar-recent { height: auto; margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--line-strong); }
  body.menu-locked { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle span, html.js .workspace-layout .workspace-sidebar { transition: none !important; }
}

@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: 999px; padding: .05rem .55rem;
  font-family: var(--font-mono); font-size: .7rem; 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: .35rem 0 .5rem; font-size: .8rem;
  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: #9b2c2c; background: #fff5f5;
}
.register-form input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px #9b2c2c20; }
.register-form input[aria-invalid="true"] + .field-message,
.register-form .input-prefix:has(input[aria-invalid="true"]) + .field-message,
.register-form .register-message { color: #9b2c2c; }
.register-form .input-prefix:has(input[aria-invalid="true"]) span { border-color: #9b2c2c; }
.register-form .register-message { min-height: 1.35em; margin: 0; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.field-head label { margin-bottom: 0; }
.field-head .btn.link { padding: 0; font-size: .85rem; }

/* Separador con texto ("o"), como en Hex */
.divider {
  display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0;
  font-family: var(--font-mono); font-size: .72rem; 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: .3rem; }
.input-prefix span {
  display: grid; place-items: center; padding: 0 .6rem; border: 1px solid var(--line-strong);
  border-right: 0; border-radius: 3px 0 0 3px; background: var(--bg);
  font-family: var(--font-mono); color: var(--muted);
}
form .input-prefix input { margin-top: 0; border-radius: 0 3px 3px 0; }
.input-prefix + .help { margin-top: .35rem; }
.small-link { font-size: .85rem; }
.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: #fff; }
.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: .75rem;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 10px 30px #0003; font-family: var(--font-ui);
}
.cp-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.cp-count { display: flex; gap: .25rem; margin-left: auto; }
.cp-icon, .cp-harmony {
  min-width: 2rem; height: 2rem; padding: 0 .5rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; font: inherit; font-size: .95rem; cursor: pointer; color: var(--fg);
}
.cp-harmony { font-size: .72rem; 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: .6rem; margin: .7rem 0 .5rem; 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: 999px; 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: #fff; border: 1px solid var(--fg); }
.cp-light::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; border: 1px solid var(--fg); }
.cp-swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: .25rem; margin-bottom: .6rem; }
.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: .35rem; }
.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: .35rem .45rem; font-family: var(--font-mono); font-size: .85rem; }
.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: .6rem; margin-top: .3rem; }
.color-field-label { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); }
.form-row-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* Grupos */
.group-create { padding: .9rem 1rem; margin: 1.25rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.group-create .eyebrow { display: block; margin-bottom: .5rem; }
.group-create-row { display: flex; gap: .5rem; align-items: center; }
form .group-create-row input[name="name"] { margin: 0; flex: 1; min-width: 0; }
.group-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.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: 0 4px 14px #0001; }
.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: .2rem; padding: .7rem .8rem; }
.group-back { margin: 0 0 1rem; }
.group-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.group-hero h1 { font-size: 2rem; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.group-hero p { margin: 0; }
.group-members { list-style: none; padding: 0; margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.group-member { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: .65rem .8rem; 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: .1rem; }
.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: .5rem; }
.group-member-edit .auth-card { margin: 0; }
.group-member-remove { margin: 0; }
.icon-btn { min-width: 2rem; padding-inline: .45rem; font-size: 1.1rem; line-height: 1; }
.group-members-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.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: .4rem; 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: .25rem 0 0; }
.icon-btn-spacer { width: 2rem; height: 2rem; flex: none; }
.role-tag { /* «Dueño» en grupos. No usar .tag: es la etiqueta [Ma] de la hoja (script.css). */  display: inline-block; margin-left: .35rem; padding: 0 .4rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-mono); font-size: .7rem; 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: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg);
  box-shadow: 0 20px 80px #0003; overflow: auto;
}
.form-dialog::backdrop { background: #1f1a1466; }
body:has(.form-dialog[open]) { overflow: hidden; }
.form-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.form-dialog-head h2 { margin: 0; font-size: 1.3rem; }
.link-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .35rem; padding: .35rem .5rem; 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 .9rem; }
.member-form-grid .member-form-account { grid-column: 1 / -1; }
@media (max-width: 600px) { .member-form-grid { grid-template-columns: 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: .6rem; }
.group-leave { margin-top: 1rem; }

/* Integrantes de tus grupos en el editor (cast-editor.js) */
.cast-row.member { position: relative; }
.contact-suggestions {
  position: absolute; z-index: 20; top: calc(100% + .2rem); left: 4.9rem; right: 2.6rem; padding: .25rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 6px 18px #0002;
}
.contact-option { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: var(--radius); cursor: pointer; font-size: .9rem; }
.contact-option[aria-selected="true"], .contact-option:hover { background: var(--primary-tint); }
.contact-option small { margin-left: auto; font-size: .75rem; 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: 2px; }
.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: .45rem; align-items: center; margin-top: .75rem; }
form.group-share-add select { width: auto; margin: 0; padding: .35rem .3rem; font-size: .8rem; }
form.group-share-add select[name="group_id"] { flex: 1; min-width: 8rem; }
.group-share-add + .help { margin: .35rem 0 0; font-size: .8rem; }
.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: .6rem; }
.group-name-row .color-field { margin-top: 0; }
.group-name-field { flex: 1; margin: 0; }
.group-name-field input { margin-top: 0; }
.group-danger-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: .75rem; 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: 5;
  width: min(16rem, 75vw); padding: .45rem .6rem;
  background: var(--fg); color: var(--surface); border-radius: var(--radius); font-size: .8rem; line-height: 1.35;
  box-shadow: 0 6px 20px #0003;
}
.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: .4rem; margin: .75rem 0; }
.transfer-option { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem .7rem; 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: .5rem; 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: .75rem; }
/* 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. */
.theme-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .6rem; margin-bottom: .75rem; }
.theme-option { position: relative; display: flex; flex-direction: column; gap: .35rem; margin: 0; cursor: pointer; font-size: .8rem; 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: 4.6rem; 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: .3rem;
  height: 100%; padding: .35rem .55rem; 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: 1.15rem; line-height: 1; }
.theme-swatch i { display: block; width: 85%; height: .3rem; border-radius: 2px; 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; }
.theme-custom > summary { display: inline-flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer; }
.theme-custom > summary::-webkit-details-marker { display: none; }
.theme-custom .chevron { display: inline-block; line-height: 1; transition: transform .15s; }
.theme-custom[open] .chevron { transform: rotate(180deg); }
.theme-custom[open] > summary { margin-bottom: .6rem; }
.theme-editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.theme-editor { display: grid; gap: .9rem; padding-top: .75rem; border-top: 1px dashed var(--line-strong); }
.theme-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .7rem 1rem; }
.theme-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
.theme-custom > summary .icon { flex: none; }
form .theme-field { display: flex; flex-direction: column; gap: .3rem; margin: 0; font-size: .85rem; }
.theme-field .color-field { margin-top: 0; }
form .theme-field select { margin: 0; }
/* Tus temas (Cuenta) */
.saved-themes { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.saved-themes li { display: flex; align-items: center; gap: .75rem; }
.saved-themes .sheet.theme-swatch { flex: none; width: 3.5rem; height: 2.4rem; max-width: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 12px; }
.saved-themes .sheet.theme-swatch:not(.has-backdrop) { padding: 0; }
.saved-themes .theme-swatch .sheet-paper { display: grid; place-items: center; height: 100%; padding: 0; border-width: 2px; }
.saved-themes .theme-swatch.frame-rounded .sheet-paper { border-radius: 6px; }
.saved-themes .theme-swatch b { font-family: var(--font-title); font-weight: var(--title-weight); color: var(--accent); }
.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: 2.6rem; }
.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: #f8f4ea;
}
.ln-gutter > div > div {
  padding-right: .35rem; text-align: right; color: #b0aa9c;
  font-family: var(--font-mono); font-size: .62rem; overflow: hidden;
}
.ln-mirror {
  position: absolute; left: -9999px; top: 0; 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: .3rem .5rem;
  padding: 1.25rem 1rem 1.5rem; color: var(--muted); font-size: .82rem;
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--fg); }
.site-footer.sidebar-footer { justify-content: flex-start; padding: .4rem .65rem 0; font-size: .75rem; }
@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: 2rem auto 1rem; line-height: 1.55;
  background: var(--surface); border: 1px solid var(--line); padding: 1.6rem 2rem 1.4rem;
}
@media (max-width: 480px) { .about-page { margin: .25rem auto; padding: 1.1rem .85rem; } }
.about-page .credit-table { background: none; }
.about-page h1 { font-size: 2rem; margin: .2rem 0 .6rem; }
.about-page .lead { font-size: 1.08rem; color: var(--muted); margin: 0 0 1.5rem; }
.about-page h2 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.about-page ul { padding-left: 1.2rem; }
.about-page li + li { margin-top: .35rem; }
.about-page a { color: var(--primary); }
@media (max-width: 480px) {
  .credit-table { font-size: .84rem; }
  .credit-table td.license { white-space: normal; }
  .credit-table th, .credit-table td { padding: .4rem .35rem; }
}
.table-scroll { overflow-x: auto; }
.credit-table .license { white-space: nowrap; }
.credit-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); border: 1px solid var(--line); }
.credit-table th, .credit-table td { text-align: left; padding: .45rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.credit-table th { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.workspace-sidebar .sidebar-footer { grid-column: 1 / -1; } /* sin JS en móvil, la barra es una cuadrícula */

/* Entrar: un solo formulario (login.js) */
.login-form .login-password { margin-top: .9rem; }
.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 1rem; padding-left: 1.2rem; }
.delete-account-list li + li { margin-top: .35rem; }

/* ---------------------------------------------------------------- Portada (index.html) */
body.home main { padding: 0 1rem; }
.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: 3rem;
  align-items: center; padding: 3.5rem 0 4rem;
}
.home-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.03em; margin: .6rem 0 1.1rem; }
.home-lead { font-size: 1.15rem; line-height: 1.55; color: var(--muted); margin: 0; max-width: 34rem; }
.home-hero .hero-actions { justify-content: flex-start; }
.home-fineprint { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }
.home-demo { margin: 0; }
.home-demo figcaption {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem .5rem;
  font-family: var(--font-mono); font-size: .72rem; 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; } }
@media (prefers-reduced-motion: reduce) { .demo-dot { animation: none; } }
.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: .4rem; margin-bottom: .75rem; }
.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: 3.5rem 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: .4rem 0 1.6rem; }
.home-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 2px; padding: 1.3rem 1.3rem 1.1rem;
}
.home-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.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: 1rem; }
.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: .8rem; color: var(--primary); margin-bottom: 1.4rem; }
.home-card code { font-family: var(--font-mono); font-size: .85em; background: var(--primary-tint); padding: 0 .25em; border-radius: 2px; color: var(--primary-ink); }
.home-grid svg {
  width: 22px; height: 22px; margin-bottom: .8rem; 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: 3rem; align-items: center; }
.home-intro { max-width: 40rem; margin-bottom: 1.6rem; }
.home-feature-text p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin: 0; }
.home-feature-text h2 { margin-bottom: 1rem; }
.home-chart { padding: 1.5rem; }
.home-bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; align-items: center; margin-bottom: .9rem; }
.home-bar-label { font-size: .9rem; color: var(--muted); }
.home-bar { display: flex; height: 2.1rem; border-radius: 2px; overflow: hidden; }
.home-bar span {
  display: grid; place-items: center; flex-basis: 0; min-width: 0; overflow: hidden;
  color: #fff; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 2px #0006;
}
.home-chart .chart-key { margin: 1.1rem 0 0; font-size: .8rem; }

.home-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home-theme { margin: 0; }
.home-theme figcaption { margin-top: .5rem; font-family: var(--font-mono); font-size: .72rem; 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: 2px; 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: 4rem 0 3rem; }
.home-cta h2 { margin-bottom: .6rem; }
.home-cta p { color: var(--muted); font-size: 1.1rem; margin: 0; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem 0 3rem; }
  .home-feature { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .home-steps, .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 560px) and (max-width: 900px) { .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: .3rem; }
  .home-section { padding: 2.5rem 0; }
}

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