/* ════════════════════════════════════════════════════════════════
   COREOSYNC — Sistema de temas (claro / oscuro)
   Toda la paleta vive en variables. El tema oscuro es el de :root y
   el claro se aplica con  <html data-theme="light">.
   Conmutador en la cabecera (app.toggleTema en app.js).
   ════════════════════════════════════════════════════════════════ */

/* ── TEMA OSCURO (por defecto) ───────────────────────────────────── */
/* Paleta portada del Design System · dirección "Estudio" (sobrio/pro),
   tema oscuro. Superficies pizarra fría, acentos vivos sin glow. */
:root {
    color-scheme: dark;

    /* Fondos (Estudio · surfaces) */
    --bg:        #101319;   /* surface-app — fondo general pizarra */
    --bg-panel:  #1b2029;   /* surface-card — tarjetas / paneles */
    --bg-elev:   #212835;   /* surface-card-hover — paneles elevados (.gray) / hover */
    --bg-input:  #0b0d12;   /* surface-sunken — campos de formulario (hundidos) */
    --bg-soft:   #212835;   /* hover suave */
    --bg-sunken: #0b0d12;   /* listas internas, hundidos */
    --bg-canvas: #07090d;   /* lienzo del waveform (contraste intencional) */
    --bg-tray:   #0b0d12;   /* bandeja del contenedor principal (más contraste) */
    --border-tray: #232a35; /* borde del contenedor principal */

    /* Insignia de icono: contenedor que hace resaltar los iconos */
    --ico-chip:      rgba(255,255,255,0.06);
    --ico-chip-bd:   rgba(255,255,255,0.08);

    /* Marca / acento principal (= Editor índigo) */
    --primary:        #5b6cff;   /* accent (cat-editor) */
    --primary-hover:  #6e7dff;
    --primary-soft:   rgba(91,108,255,0.16);
    --accent-grad:    linear-gradient(135deg, var(--primary-hover), var(--primary));  /* "chispa": deriva del acento de la sección */

    /* Texto */
    --text:    #f3f5f8;          /* text-strong */
    --muted:   #8b94a3;          /* text-muted */
    --faint:   #5d6675;          /* text-faint */
    --link:    #8fa0ff;          /* enlaces / autoría */

    /* Bordes */
    --border:  #2b323d;
    --border-soft: #20262e;

    /* Acentos por categoría (Estudio dark) */
    --c-editor:   #5b6cff;   /* índigo */
    --c-musica:   #2bb6c7;   /* cian */
    --c-entreno:  #34b178;   /* verde */
    --c-coreopro: #e0a13a;   /* ámbar */

    /* Tintes suaves por categoría (halos / chips) */
    --c-editor-soft:   rgba(91,108,255,0.16);
    --c-musica-soft:   rgba(43,182,199,0.16);
    --c-entreno-soft:  rgba(52,177,120,0.16);
    --c-coreopro-soft: rgba(224,161,58,0.16);

    /* Estados */
    --info:    #5b6cff;          /* azul de acción (✏️ editar, etc.) */
    --info-hover: #4a5bf0;
    --danger:  #e5544b;
    --danger-hover: #c4433b;
    --ok:      #34b178;
    --ok-hover: #2c9968;

    /* Texto sobre acentos vivos */
    --on-musica:   #04181b;
    --on-entreno:  #04190f;
    --on-coreopro: #1c1304;

    --radius:  12px;
    --radius-sm: 8px;
    --shadow:  0 8px 24px rgba(0,0,0,0.50);   /* elev-pop */
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.45); /* elev-raised */

    /* Fondo plano (Estudio): sin glow radial */
    --glow-1: transparent;
    --glow-2: transparent;
}

/* ── TEMA CLARO ──────────────────────────────────────────────────── */
/* Variante clara derivada de "Estudio" para salas luminosas. */
:root[data-theme="light"] {
    color-scheme: light;

    --bg:        #f4f6f9;   /* surface-app */
    --bg-panel:  #ffffff;   /* surface-card — tarjetas */
    --bg-elev:   #eef2f7;   /* paneles elevados (.gray) */
    --bg-input:  #ffffff;   /* campos */
    --bg-soft:   #eef2f7;   /* hover */
    --bg-sunken: #e9edf2;   /* listas internas */
    --bg-canvas: #0e1116;   /* el waveform se mantiene oscuro (contraste) */
    --bg-tray:   #e9edf2;   /* bandeja del contenedor principal */
    --border-tray: #d4dae3; /* borde del contenedor principal */

    --ico-chip:      var(--bg-tray);   /* insignia con el color del contenedor de paneles */
    --ico-chip-bd:   var(--border-tray);

    --primary:        #4c5bf0;
    --primary-hover:  #3a49d8;
    --primary-soft:   rgba(76,91,240,0.12);
    --accent-grad:    linear-gradient(135deg, var(--primary-hover), var(--primary));

    --text:    #131720;          /* text-strong */
    --muted:   #677083;          /* text-muted */
    --faint:   #97a0b0;          /* text-faint */
    --link:    #4c5bf0;

    --border:  #d7dde7;
    --border-soft: #e6eaf1;

    --c-editor:   #4c5bf0;
    --c-musica:   #0f93a6;   /* cian más oscuro para contraste en blanco */
    --c-entreno:  #1f9c66;   /* verde más oscuro */
    --c-coreopro: #b9791a;   /* ámbar más oscuro */

    --c-editor-soft:   rgba(76,91,240,0.12);
    --c-musica-soft:   rgba(15,147,166,0.12);
    --c-entreno-soft:  rgba(31,156,102,0.12);
    --c-coreopro-soft: rgba(185,121,26,0.12);

    --info:    #4c5bf0;
    --info-hover: #3a49d8;
    --danger:  #d23b32;
    --danger-hover: #b83229;
    --ok:      #1f9c66;
    --ok-hover: #1a8557;

    --on-musica:   #ffffff;
    --on-entreno:  #ffffff;
    --on-coreopro: #ffffff;

    --shadow:  0 10px 28px rgba(20,28,46,0.14);   /* elev-pop light */
    --shadow-soft: 0 2px 8px rgba(20,28,46,0.10); /* elev-raised light */

    --glow-1: transparent;
    --glow-2: transparent;
}

/* ── PRIMITIVAS (agnósticas de tema) · Design System "foundation" ──── */
:root {
    /* Pesos y tracking */
    --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;
    --ls-tight: -0.02em;  --ls-wide: 0.04em;  --ls-wider: 0.12em;

    /* Motion */
    --dur-1: 90ms;  --dur-2: 160ms;  --dur-3: 240ms;  --dur-4: 380ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Targets táctiles */
    --tap-min: 44px;  --tap-lg: 56px;

    /* Realce del "paso 1" en los timelines (ámbar fijo, independiente de la
       sección, para que destaque sobre las figuras y el fondo) */
    --beat1: #e0a13a;  --beat1-on: #1c1304;
}
@media (prefers-reduced-motion: reduce) {
    :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    background-image: radial-gradient(circle at 15% -10%, var(--glow-1), transparent 45%),
                      radial-gradient(circle at 110% 0%, var(--glow-2), transparent 40%);
    background-attachment: fixed;
    color: var(--text);
    margin: 0; padding: 9px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;   /* sin destello gris al tocar (usamos :active propio) */
    transition: background-color 0.25s ease, color 0.25s ease;
}

header {
    position: sticky; top: 0; z-index: 500;
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
    margin: -9px -9px 14px;              /* compensa el padding del body: cabecera a todo el ancho */
    padding: calc(12px + env(safe-area-inset-top, 0px)) 9px 12px;   /* respeta el notch en PWA */
    font-size: 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    transition: padding 0.22s ease, box-shadow 0.22s ease;
}
header h1 { font-size: 20px; display: flex; align-items: center; gap: 8px; margin: 0; }
.hdr-logo { height: 44px; width: auto; transition: height 0.22s ease; }
.hdr-name { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0.2px; font-style: italic; }

/* ── LOGO DE MARCA · dorado (tema oscuro) / tinta (tema claro) ────────
   El diseñador entregó dos versiones; se conmutan por [data-theme]. */
.hdr-logo.logo-ink { display: none; }
:root[data-theme="light"] .hdr-logo.logo-gold { display: none; }
:root[data-theme="light"] .hdr-logo.logo-ink  { display: inline-block; }

/* Logo grande de las pantallas de inicio (setup / login) */
.logo-splash { width: 161px; max-width: 66%; height: auto; margin: 0 auto 10px; }
.logo-splash.splash-ink  { display: none; }
.logo-splash.splash-gold { display: block; }
:root[data-theme="light"] .logo-splash.splash-gold { display: none; }
:root[data-theme="light"] .logo-splash.splash-ink  { display: block; }
.hdr-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ── Cabecera condensada al hacer scroll (ancho → estrecho) ──────────
   Logo centrado y, a la derecha, solo el conmutador de tema. */
header.condensed {
    padding-top: 6px; padding-bottom: 6px; flex-wrap: nowrap;
    box-shadow: var(--shadow-soft);
    justify-content: center;                 /* logo centrado al condensar */
}
header.condensed .hdr-brand { margin: 0; }
header.condensed .hdr-right { display: none; }   /* nombre/rol/badge: ocultos al condensar */
header.condensed .hdr-logo { height: 26px; }
header.condensed .hdr-name { display: none; }    /* el logo ya lleva el nombre */

h1, h2, h3, h4 { margin: 5px 0; color: var(--text); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: 1.15; }

/* ── CONMUTADOR DE TEMA ──────────────────────────────────────────── */
.theme-toggle {
    width: 40px; height: 40px; flex: 0 0 auto;
    margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: 50%;
    font-size: 18px; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--bg-soft); transform: rotate(-12deg); }

/* ── PANELES ─────────────────────────────────────────────── */
.box {
    background: var(--bg-panel);
    padding: 16px; border-radius: var(--radius); margin-bottom: 14px;
    box-shadow: var(--shadow); border: 1px solid var(--border-soft);
}
.gray { background: var(--bg-elev); border-color: var(--border); }

/* Contenedores sin acento de color: borde uniforme y sutil. El color de
   categoría queda solo en los iconos. */
.box { border: 1px solid var(--border-soft); }

/* Login / primer inicio: panel centrado de ancho acotado (no a todo el ancho). */
#panel-login, #panel-setup {
    max-width: 400px;
    margin: 28px auto 14px;
}

/* ── CoreoWave en el Editor: adopta el índigo de la sección Edición ─────────
   Solo dentro del editor, los acentos de CoreoWave (botones, iconos, marcadores
   del waveform, etc.) toman el índigo del Editor para integrarse con esa sección.
   En la categoría Bailar (y en el resto), --c-coreopro conserva su ámbar propio,
   que es el color de la categoría Bailar y coincide con su tarjeta de inicio. */
#sub-editor-coreopro {
    --c-coreopro:      var(--c-editor);
    --c-coreopro-soft: var(--c-editor-soft);
    --on-coreopro:     #fff;
}

/* Los botones por defecto de cada sección adoptan el acento de su categoría:
   Música = cian (en Editor ya es índigo, que es el --primary global). */
#main-musica {
    --primary:       var(--c-musica);
    --primary-hover: var(--c-musica);
    --primary-soft:  var(--c-musica-soft);
}
#main-practica {
    --primary:       var(--c-entreno);
    --primary-hover: var(--c-entreno);
    --primary-soft:  var(--c-entreno-soft);
}
#main-bailar {
    --primary:       var(--c-coreopro);
    --primary-hover: var(--c-coreopro);
    --primary-soft:  var(--c-coreopro-soft);
}
/* Los sub-paneles internos (.gray) mantienen un acento más sutil */
.box .box.gray { border-top-width: 1px; }

/* Panel agrupado de controles de una función */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.panel-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--bg-elev), var(--bg-panel));
    border-bottom: 1px solid var(--border);
}
.panel-head .ico { width: 26px; height: 26px; flex-shrink: 0; }
.panel-head h3, .panel-head h4 { margin: 0; font-size: 16px; }
.panel-head .sub { color: var(--muted); font-size: 12px; font-weight: normal; }
.panel-body { padding: 16px; }
/* Agrupación interna de un panel SIN caja anidada: solo un separador sutil.
   Sustituye a las antiguas ".box gray" dentro de los paneles para mantener
   un único nivel de panel (nada de panel dentro de panel). */
.panel-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.panel-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.panel-section > h4:first-child { margin-top: 0; }
/* Acentos de color de panel retirados: el color de categoría va solo en iconos. */

/* ── FASE 0 · utilidades de cabecera y acciones de panel ──────────────────
   Reemplazan los display:flex / paddings inline para que TODOS los paneles
   compartan la misma cabecera (icono + título + subtítulo) y la misma fila
   de botones. El bloque título/subtítulo puede encoger sin romper la fila. */
.panel-head > div:not(.panel-actions) { min-width: 0; flex: 1; }   /* el bloque título crece y, si falta sitio, empuja los botones a otra línea */
.panel-head .sub { display: block; line-height: 1.3; }

/* Fila de botones homogénea dentro de un panel */
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.panel-actions > button { margin: 0; }
.panel-actions .grow { flex: 1; min-width: 120px; }          /* acción principal: ocupa el resto */
.panel-actions .btn-x { width: auto; flex: 0 0 auto; padding: 11px 14px; }  /* botón compacto (solo icono / secundario) */

/* ── FASE 4 · utilidades de texto y secciones (reemplazan inline repetidos) ──
   .hint   → línea de ayuda gris bajo una cabecera/acción (antes el inline
             repetido `class="muted" style="font-size:12px;margin:0 0 10px;"`).
   .reveal → bloque que se despliega bajo un panel (lista de compases, figuras,
             biblioteca…): separador superior y espaciado. El estado lo sigue
             dando `style="display:none"` que conmuta el JS. */
.hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.reveal { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }

/* Estado vacío de una lista: mensaje centrado y sutil que guía a la acción.
   Unifica los avisos de "todavía no hay…" de todas las listas. */
.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 16px 10px; margin: 0; line-height: 1.4; }

/* Lista desplegable con altura limitada y scroll interno: evita que un panel
   con muchas filas crezca sin fin. El gesto de swipe (horizontal) y el scroll
   (vertical) conviven; overscroll-behavior evita arrastrar el scroll a la página. */
.list-scroll {
    max-height: min(48vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;            /* aire para la barra de scroll */
}
/* Las fichas conservan su tamaño y el contenedor hace scroll: sin esto, en un
   contenedor flex en columna con altura limitada los hijos se encogerían. */
.list-scroll > * { flex: 0 0 auto; }

/* Al abrir el editor CoreoWave se hace scroll hasta él; este margen evita que
   la cabecera fija lo tape. */
#cp-editor-view { scroll-margin-top: 72px; }

/* Acción de swipe «Añadir» (no destructiva): se revela al deslizar a la
   izquierda, como el borrar, pero en azul de información. */
.sd-gesture__action--add { background: var(--info); margin-left: auto; }
/* «Añadir a lista» como acción DERECHA (se revela al deslizar a la derecha,
   ocupa el lado izquierdo): mismo azul pero sin empujar a la derecha. */
.sd-gesture__action--addlist { background: var(--info); }

.label-strong { font-size: 13px; color: var(--muted); display:block; margin: 8px 0 2px; font-weight: 600; }

/* ── INSIGNIA DE ICONO ───────────────────────────────────────────
   Los iconos son SVG de colores vivos con detalles blancos; sobre un
   fondo claro perderían contraste. Se colocan en una insignia con
   fondo propio que los hace resaltar en ambos temas, en armonía. */
.ico {
    background: var(--ico-chip);
    border: 1px solid var(--ico-chip-bd);
    border-radius: 6px;
    padding: 2px;
    box-sizing: content-box;
}

/* Icono dentro de cabeceras de sección (h3/h4 que no están en .panel-head).
   Se alinea con el texto del título y conserva la insignia .ico. */
h3 > img.ico, h4 > img.ico,
h3 > .ico-tint, h4 > .ico-tint {
    width: 22px; height: 22px;
    vertical-align: middle;
    margin: -3px 8px 0 0;   /* margen derecho + ligero ajuste de baseline */
}

/* ── ICONO TEÑIDO (identificativos de categoría) ─────────────────────
   La imagen actúa de máscara y el color lo pone la categoría (--tint),
   de modo que el icono adopta el color del borde de los paneles de su
   categoría. Queda como silueta monocroma sobre la insignia .ico. */
.ico-tint {
    position: relative;
    display: inline-block;
    width: 22px; height: 22px;
}
.ico-tint::after {
    content: ""; position: absolute; inset: 0;
    background-color: var(--tint, var(--text));
    -webkit-mask: var(--m) center / contain no-repeat;
            mask: var(--m) center / contain no-repeat;
}
.ico-c-editor   { --tint: var(--c-editor); }
.ico-c-musica   { --tint: var(--c-musica); }
.ico-c-entreno  { --tint: var(--c-entreno); }
.ico-c-coreopro { --tint: var(--c-coreopro); }

/* Icono dentro de botones de acción con texto. Insignia clara (independiente
   del tema) para que el icono de color resalte tanto sobre botones de color
   sólido como sobre los secundarios. */
.ico-btn {
    width: 18px; height: 18px;
    vertical-align: middle;
    margin: -2px 10px 0 0;   /* misma separación icono-texto en todos los botones */
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.10);
    flex-shrink: 0;
}
.ico-solo { margin-right: 0; }   /* botones de solo icono (sin texto, p.ej. ✕) */
.small .ico-btn { width: 15px; height: 15px; }

/* Icono en las franjas de acción de las filas (deslizar → reproducir/editar,
   ← borrar). La insignia clara resalta sobre el verde/rojo de la franja. */
.edit-row-action .ico-btn { width: 26px; height: 26px; margin: 0; }

/* Iconos en los controles del reproductor (botones grandes/redondos que solo
   contienen el icono). Mayor tamaño y, en los redondos, insignia circular. */
.transport-ico { width: 24px; height: 24px; margin: 0; }
.small .transport-ico { width: 20px; height: 20px; margin: 0; }
.cppl-btn-play .transport-ico { border-radius: 50%; }

/* Icono pequeño inline en labels/textos (etiquetas de volumen, etc.). Insignia
   sutil que se adapta al tema. */
label > img.ico, .ico-inline {
    width: 15px; height: 15px;
    vertical-align: -3px; margin-right: 5px;
    padding: 1px;
}

/* ── ICONOS LUCIDE (UI) ──────────────────────────────────────────────
   SVG de trazo de Lucide (ISC), servidos localmente desde icons/lucide/.
   Se usan como máscara para que adopten el color del contexto (currentColor),
   integrándose con el tema y el acento de categoría:
     <span class="lico" style="--i:url('icons/lucide/play.svg')"></span>
   Pendiente de cablear en app.js (transporte/gestos) tras validación visual. */
.lico {
    display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em;
    background-color: currentColor; flex-shrink: 0;
    -webkit-mask: var(--i) center / contain no-repeat;
            mask: var(--i) center / contain no-repeat;
}
/* Iconos Lucide en botones con texto (heredan el color del botón) */
.lico-btn { width: 18px; height: 18px; vertical-align: middle; margin: -1px 8px 0 0; }
.lico-solo { margin-right: 0; }
.small .lico-btn { width: 15px; height: 15px; }
/* Controles del reproductor */
.lico-transport { width: 24px; height: 24px; vertical-align: middle; }
.small .lico-transport { width: 20px; height: 20px; }
/* Franjas de acción (deslizar) y asa de arrastrar de las filas */
.edit-row-action .lico { width: 26px; height: 26px; }
.edit-row-grip .lico { width: 20px; height: 20px; vertical-align: middle; }

/* ── FORMULARIOS ─────────────────────────────────────────── */
label { font-size: 14px; color: var(--muted); }

input, select, button, textarea {
    width: 100%; padding: 11px; margin: 6px 0; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-input); color: var(--text);
    box-sizing: border-box; font-size: 15px; font-family: inherit;
}
/* Campos de texto a 16px: por debajo, iOS hace zoom automático al enfocarlos
   (molesto en móvil/tablet, que es el uso principal). Los botones no aplican. */
input, select, textarea { font-size: 16px; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type="checkbox"] { width: auto; margin-right: 8px; transform: scale(1.3); accent-color: var(--primary); }
input[type="range"] {
    padding: 0; -webkit-appearance: none; appearance: none;
    height: 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%; background: var(--primary);
    cursor: pointer; box-shadow: 0 0 6px var(--primary-soft); border: 2px solid #fff;
}
input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: var(--primary);
    cursor: pointer; border: 2px solid #fff;
}
input[type="number"] { padding: 9px; }

button {
    background: var(--bg-elev); font-weight: 700; border: 1px solid var(--border); cursor: pointer;
    transition: background 0.15s, filter 0.15s, transform 0.05s; color: var(--text);
}
button:hover { background: var(--bg-soft); }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; filter: none; }

/* Foco de teclado visible y coherente en toda la app */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm);
}
.btn-secondary { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-soft); }
.btn-danger { background: var(--danger); color:#fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
/* Botones unificados: todo neutro salvo el peligro (rojo). El resto de clases
   de color quedan como el secundario; el icono interior hereda el color de texto. */
.btn-ok, .btn-info, .btn-editor, .btn-musica, .btn-entreno, .btn-coreopro {
    background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
}
.btn-ok:hover, .btn-info:hover, .btn-editor:hover, .btn-musica:hover,
.btn-entreno:hover, .btn-coreopro:hover { background: var(--bg-soft); }
.small { width: auto; padding: 6px 11px; font-size: 13px; margin: 2px; border-radius: 6px; }

/* Contador de los botones de gestión (usuarios / sugerencias). El círculo del
   menú inferior suma los dos; estos lo desglosan por categoría. */
.chip-contador {
    display: inline-block; margin-left: 8px; min-width: 20px; padding: 0 6px;
    background: var(--danger); color: #fff; border-radius: 10px;
    font-size: 12px; line-height: 18px; font-weight: 700; text-align: center;
}

/* ── Aviso de versión nueva ───────────────────────────────────────────────
   Se queda esperando en vez de recargar solo: una recarga automática cortaría
   el metrónomo o la música en mitad de una clase. */
#banner-actualizacion {
    position: fixed; left: 12px; right: 12px; z-index: 950;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius);
    background: var(--bg-elev); border: 1px solid var(--primary);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
/* "Sin conexión": franja fina arriba del todo. Informa sin tapar nada ni pedir nada,
   y no estorba mientras dure — que puede ser toda una clase. */
#banner-offline {
    position: fixed; top: 0; left: 0; right: 0; z-index: 960;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px;
    font-size: 13px; text-align: center; font-weight: 700;
    background: var(--c-coreopro); color: var(--on-coreopro);
}
/* La franja empuja el contenido hacia abajo en vez de taparlo, y la cabecera (que es
   sticky en top:0) se queda pegada justo debajo. La altura la mide la app y la escribe
   en --offline-h: con el notch de un móvil no es un valor fijo. */
:root { --offline-h: 0px; }
body.sin-conexion { padding-top: var(--offline-h); }
body.sin-conexion header { top: var(--offline-h); }

/* Lo que necesita servidor se apaga mientras no hay red: mejor que dejar pulsar algo
   que va a fallar y explicarlo después con un error. */
body.sin-conexion [data-online] { opacity: 0.4; pointer-events: none; }

/* Distintivo de ORIGEN de una CoreoWave. Son tres cosas distintas y antes solo se
   distinguían por la ausencia de un icono, que es la peor forma de distinguir algo:
   online (SoundCloud, siempre necesita red), del servidor, o importada a este aparato. */
.sd-origen {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 6px; padding: 1px 7px; border-radius: 9px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.sd-origen .lico { width: 12px; height: 12px; }
.sd-origen.es-online    { background: var(--c-musica-soft);   color: var(--c-musica); }
.sd-origen.es-servidor  { background: var(--bg-soft);         color: var(--muted); }
.sd-origen.es-dispositivo { background: var(--c-entreno-soft); color: var(--c-entreno); }

/* Botón de guardar/quitar del dispositivo en la esquina de la ficha de CoreoWave */
.sd-off-btn {
    width: auto; margin: 0 0 0 auto; padding: 2px 6px; background: transparent;
    border: none; color: var(--muted); line-height: 1;
}
.sd-off-btn:hover { background: transparent; color: var(--text); }
.sd-off-btn.guardada { color: var(--c-entreno); }

#banner-actualizacion span { flex: 1; font-size: 14px; }
#banner-actualizacion button { width: auto; margin: 0; padding: 8px 14px; font-size: 13px; }
#banner-actualizacion .cerrar { background: transparent; border: none; color: var(--muted); padding: 8px; }

/* ── Pestañas del panel de acceso (Entrar / Crear cuenta) ─────────────────
   Segmentado y no dos botones sueltos: el botón de enviar de debajo se llama
   igual que la pestaña ("Entrar"), así que la activa tiene que distinguirse
   de un vistazo o parecen dos botones que hacen lo mismo. */
.auth-tabs {
    display: flex; gap: 4px; margin-bottom: 16px; padding: 4px;
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.auth-tab {
    flex: 1; width: auto; margin: 0; padding: 9px 10px; font-size: 14px;
    background: transparent; border: 1px solid transparent; color: var(--muted);
    border-radius: var(--radius-sm);
}
.auth-tab:hover { background: var(--bg-elev); color: var(--text); }
.auth-tab.activa { background: var(--primary); border-color: var(--primary); color: #fff; }
.auth-tab.activa:hover { background: var(--primary-hover); }

/* Botones de color por categoría */
/* (btn-editor/musica/entreno/coreopro neutralizados arriba junto con btn-ok/info) */

/* Cada categoría: paneles "sueltos" (sin bandeja), apilados en rejilla, igual
   que el HOME. Sin sub-pestañas: todos los paneles de la categoría se muestran. */
.main-tab {
    /* Sin bandeja contenedora: los paneles van "sueltos" como en el HOME.
       Solo se conserva la maqueta en rejilla (1 columna en móvil; varias
       columnas centradas, cada panel topado a 440px, en pantalla ancha). */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 440px));
    justify-content: center;
    column-gap: 9px;
    row-gap: 0;        /* el espacio vertical lo dan los márgenes (14px) de cada box/panel */
    align-items: start;
    max-width: 1600px;
    margin-inline: auto;
}
/* El espaciado entre paneles —y entre los boxes internos de un sub-content,
   como gestión + editor— lo da el margin-bottom propio de cada .box/.panel
   (14px), uniforme y sin depender del display que el JS fija en línea.
   Por eso NO se anula el margen del último hijo: así el espacio es el mismo
   esté el editor desplegado o cerrado. */
.main-tab .sub-content { margin-bottom: 0; }
/* Los paneles flotantes de Música ocupan todo el ancho cuando aparecen */
#panel-crear-lista, #panel-editar-lista { grid-column: 1 / -1; }

/* Reserva espacio para que la barra inferior fija no tape el contenido */
#app-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ── BARRA DE NAVEGACIÓN INFERIOR (menú principal) ───────────── */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.28);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav button {
    flex: 1; margin: 0; padding: 9px 4px 11px;
    background: transparent; border: none; border-radius: 0;
    color: var(--muted); font-size: 11px; font-weight: 600;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: relative; transition: color 0.15s;
}
.bottom-nav button:hover { background: transparent; color: var(--text); }
.bottom-nav button .ico { width: 24px; height: 24px; }
.bottom-nav button { transition: color var(--dur-2) var(--ease-standard); }
.bottom-nav button.active { color: var(--primary); }
.bottom-nav button.active .ico {
    background: var(--primary-soft); border-color: var(--primary);
    transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2);
}
.bottom-nav button.active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 42%; height: 3px; background: var(--primary); border-radius: 0 0 3px 3px;
}
/* Cada sección activa adopta su color de categoría (orientación por color) */
#mtab-editor.active        { color: var(--c-editor); }
#mtab-editor.active .ico   { background: var(--c-editor-soft); border-color: var(--c-editor); }
#mtab-editor.active::before { background: var(--c-editor); }
#mtab-musica.active        { color: var(--c-musica); }
#mtab-musica.active .ico   { background: var(--c-musica-soft); border-color: var(--c-musica); }
#mtab-musica.active::before { background: var(--c-musica); }
#mtab-entrenamiento.active        { color: var(--c-entreno); }
#mtab-entrenamiento.active .ico   { background: var(--c-entreno-soft); border-color: var(--c-entreno); }
#mtab-entrenamiento.active::before { background: var(--c-entreno); }

/* ── Menú inferior reducido: tema (izq) · HOME círculo (centro) · usuario (der) ── */
.bottom-nav { overflow: visible; }                 /* el círculo central sobresale */
.bn-side { gap: 4px; justify-content: flex-end; }
.bn-side .lico { width: 24px; height: 24px; background-color: currentColor; }

/* Botón central HOME: círculo que sobresale por encima de la barra */
.bn-home { overflow: visible; justify-content: flex-end; }
.bn-home__circle {
    width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center;
    margin-top: -32px; margin-bottom: 2px;          /* sobresale hacia arriba */
    background: var(--primary);
    border: 4px solid var(--bg-panel);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    transition: transform var(--dur-2, .18s) var(--ease-standard, ease);
}
.bn-home__circle .lico { width: 26px; height: 26px; background-color: #fff; }
.bn-home:hover .bn-home__circle { transform: translateY(-2px); }
.bn-home.active { color: var(--primary); }
.bn-home.active::before { display: none; }          /* el círculo ya marca el estado */
#mtab-usuario.active { color: var(--primary); }

/* ── PANTALLA DE INICIO (HOME) ───────────────────────────────
   Hub de navegación con tarjetas tipo "imagen + título + descripción"
   y un botón circular de avance (flecha), al estilo de las apps de tarjetas. */
#main-home { max-width: 1100px; margin-inline: auto; }
.home-hello { padding: 6px 6px 14px; }
.home-greet { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: 0.2px; }
.home-greet #home-username { color: var(--c-entreno); }
.home-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.home-card {
    /* reset de button */
    appearance: none; margin: 0; padding: 0; width: 100%; text-align: left;
    background: var(--bg-panel);
    border: 1px solid var(--cat, var(--border));   /* borde fino de color SIEMPRE */
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    transition: transform var(--dur-2, .18s) var(--ease-standard, ease),
                box-shadow var(--dur-2, .18s) var(--ease-standard, ease),
                border-color var(--dur-2, .18s) var(--ease-standard, ease);
}
.home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--cat, var(--border)); }
.home-card:active { transform: translateY(-1px); }
.home-card:focus-visible { outline: 2px solid var(--cat, var(--primary)); outline-offset: 2px; }

.home-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-sunken); }
.home-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo inferior para que la flecha y el borde con el cuerpo respiren */
.home-card__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35));
    pointer-events: none;
}
.home-card__go {
    position: absolute; right: 14px; bottom: -22px; z-index: 2;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--cat, var(--primary)); color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    border: 3px solid var(--bg-panel);
    transition: transform var(--dur-2, .18s) var(--ease-standard, ease);
}
.home-card:hover .home-card__go { transform: scale(1.08); }
.home-card__go .lico { width: 22px; height: 22px; background-color: #fff; }

.home-card__body { padding: 16px 16px 18px; }
.home-card__title {
    margin: 0; font-size: 18px; font-weight: 800;
    display: flex; align-items: center; gap: 9px; color: var(--text);
}
.home-card__ico { width: 22px; height: 22px; background-color: var(--cat, var(--text)); flex-shrink: 0; }
.home-card__desc { margin: 7px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* Color de categoría por tarjeta (acento del botón, icono y borde en hover) */
.home-card.cat-entreno  { --cat: var(--c-entreno); }
.home-card.cat-coreopro { --cat: var(--c-coreopro); }
.home-card.cat-musica   { --cat: var(--c-musica); }
.home-card.cat-editor   { --cat: var(--c-editor); }

/* ── GRID LAYOUTS ────────────────────────────────────────── */
.grid-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
@media(min-width: 600px) { .grid-layout { grid-template-columns: repeat(8, 1fr); } }
.grid-split { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media(min-width: 750px) { .grid-split { grid-template-columns: 1fr 1fr; } }
/* Evita que un hijo ancho (p.ej. el timeline) desborde la columna y agrande la página */
.grid-split > * { min-width: 0; }

/* ── BEAT CIRCLES (metrónomo visual) ─────────────────────── */
.beat-circle {
    background: var(--bg-elev); text-align: center; padding: 10px 2px; border-radius: 8px;
    font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: center;
    border: 1px solid var(--border); font-size: 12px;
    transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1) var(--ease-standard),
                box-shadow var(--dur-2), color var(--dur-1), border-color var(--dur-1);
}
/* Beat activo: pulso estilo Design System (halo del acento + escala con muelle) */
.beat-circle.active {
    background: var(--primary); color: #fff; border-color: transparent;
    box-shadow: 0 0 0 5px var(--primary-soft), var(--shadow-soft); transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) { .beat-circle.active { transform: none; } }

/* BEAT STEP EDITOR */
.beat-step-box { background: var(--bg-input); padding: 6px; border-radius: 6px; text-align: center; border: 1px solid var(--border); }
.beat-step-box label { font-size: 11px; display: block; color: var(--muted); }
.beat-step-box select { padding: 4px; font-size: 11px; margin: 2px 0; }

/* ── CARDS (canciones, listas...) ────────────────────────── */
.song-card {
    display: flex; justify-content: space-between; align-items: center; padding: 11px;
    border: 1px solid var(--border-soft); background: var(--bg-panel);
    border-radius: var(--radius-sm); margin-bottom: 7px;
    gap: 8px; flex-wrap: wrap; box-shadow: var(--shadow-soft);
    transition: background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2), border-color var(--dur-2);
}
.song-card:hover { background: var(--bg-soft); }

/* Tarjeta de canción "rica" (catálogo): miniatura + título, al estilo del kit */
.song-card.sc-rich { justify-content: flex-start; gap: 14px; padding: 10px 12px; }
.sc-art {
    width: 48px; height: 48px; flex: none; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--c-musica-soft); color: var(--c-musica);
}
.sc-art .lico { width: 24px; height: 24px; }
.sc-body { flex: 1; min-width: 0; }
.sc-title { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-card > div:last-child { display: flex; gap: 4px; flex-wrap: wrap; }
.card-active   { box-shadow: 0 0 0 2px var(--primary) inset; }

/* Catálogo: tarjeta de canción sin botones, se abre con pulsación larga */
.song-card[data-song] { cursor: pointer; user-select: none; -webkit-user-select: none; }
.song-card[data-song]:active { background: var(--bg-soft); }

/* ── FILA DE CANCIÓN (estilo "sd-song" del kit) ──────────────────────────
   Arte con icono de categoría · título · intérprete · BPM + duración + EQ ·
   botón play/pause. El color de categoría se inyecta con --cat (por defecto
   música). Reutilizable en cualquier lista cambiando --cat y el icono. */
.sd-song {
    --cat: var(--c-musica);
    --cat-soft: var(--c-musica-soft);
    display: flex; align-items: center; gap: 14px; padding: 10px 12px;
    background: var(--bg-panel); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-bottom: 8px;
    transition: background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2), border-color var(--dur-2);
}
.sd-song:hover { background: var(--bg-soft); }
.sd-song.is-playing { border-color: var(--cat); }
.sd-song[data-song] { cursor: pointer; user-select: none; -webkit-user-select: none; }

.sd-song__art {
    width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--cat-soft); color: var(--cat);
    display: flex; align-items: center; justify-content: center;
}
.sd-song__art .lico { width: 24px; height: 24px; }
.sd-song__body { flex: 1; min-width: 0; }
.sd-song__title { color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-song__artist { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sd-song__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 7px; }

/* Los iconos de acción van en su propia columna, no mezclados con los datos: en un móvil
   la línea de datos ya iba justa y todo junto quedaba apelmazado. */
.sd-song__acciones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* Badge tintado con el color de categoría (BPM, compás, canción…) */
.sd-bpm {
    font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 8px;
    border-radius: var(--radius-sm); background: var(--cat-soft); color: var(--cat);
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-song__time { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; color: var(--faint); }

/* Ecualizador animado: indicador de "sonando ahora" (solo visible al reproducir).
   Se anima con transform:scaleY (fiable y fluido en móvil). */
.sd-song__eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.sd-song.is-playing .sd-song__eq { display: inline-flex; }
.sd-song__eq i { width: 3px; height: 14px; background: var(--cat); border-radius: 1px; transform-origin: bottom; animation: sd-eq 0.9s var(--ease-standard, ease) infinite; }
.sd-song__eq i:nth-child(2) { animation-delay: .15s; }
.sd-song__eq i:nth-child(3) { animation-delay: .3s; }
@keyframes sd-eq { 0%, 100% { transform: scaleY(0.28) } 50% { transform: scaleY(1) } }
/* Con "reducir movimiento" no se detiene (es indicador de reproducción), solo más lento. */
@media (prefers-reduced-motion: reduce) { .sd-song__eq i { animation-duration: 1.5s; } }

/* Botón circular play/pause tintado por categoría */
.sd-song__play {
    flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cat-soft); color: var(--cat);
    transition: background var(--dur-2), color var(--dur-2), transform var(--dur-1);
}
.sd-song__play:hover { background: var(--cat); color: #fff; }
.sd-song__play:active { transform: scale(.94); }
.sd-song.is-playing .sd-song__play { background: var(--cat); color: #fff; }
.sd-song__play .lico { width: 20px; height: 20px; }

/* Variantes de categoría para la fila */
.sd-song.cat-musica   { --cat: var(--c-musica);   --cat-soft: var(--c-musica-soft); }
.sd-song.cat-editor   { --cat: var(--c-editor);   --cat-soft: var(--c-editor-soft); }
.sd-song.cat-entreno  { --cat: var(--c-entreno);  --cat-soft: var(--c-entreno-soft); }
.sd-song.cat-coreopro { --cat: var(--c-coreopro); --cat-soft: var(--c-coreopro-soft); }

/* ── ENVOLTORIO CON GESTO DE SWIPE (sd-gesture) ──────────────────────────
   Acciones ocultas debajo; el "foreground" se arrastra para revelarlas.
   Deslizar ▶ (derecha) reproduce · ◀ (izquierda) borra. Suelta y vuelve. */
.sd-gesture {
    --cat: var(--c-musica); --cat-soft: var(--c-musica-soft);
    position: relative; overflow: hidden; border-radius: var(--radius);
    border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft);
    background: var(--bg-panel); margin-bottom: 8px;
    transition: border-color var(--dur-2);
}
.sd-gesture.cat-editor   { --cat: var(--c-editor);   --cat-soft: var(--c-editor-soft); }
.sd-gesture.cat-entreno  { --cat: var(--c-entreno);  --cat-soft: var(--c-entreno-soft); }
.sd-gesture.cat-coreopro { --cat: var(--c-coreopro); --cat-soft: var(--c-coreopro-soft); }
.sd-gesture.is-playing { border-color: var(--cat); }

.sd-gesture__actions { position: absolute; inset: 0; display: flex; align-items: stretch; }
.sd-gesture__action {
    display: flex; align-items: center; gap: 8px; padding: 0 22px;
    font-weight: 600; font-size: 14px; color: #fff; user-select: none;
}
.sd-gesture__action .lico { width: 18px; height: 18px; background-color: #fff; }
.sd-gesture__action--play { background: var(--ok); }
.sd-gesture__action--edit { background: var(--info); }
.sd-gesture__action--del  { background: var(--danger); margin-left: auto; }

.sd-gesture__fg {
    position: relative; background: var(--bg-panel); touch-action: pan-y; cursor: grab;
    transition: transform var(--dur-3) var(--ease-standard);
}
.sd-gesture:hover .sd-gesture__fg { background: var(--bg-soft); }
.sd-gesture__fg.is-dragging { transition: none; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .sd-gesture__fg { transition: none; } }

/* La fila va "a ras" dentro del envoltorio: el borde/sombra los pone el gesto */
.sd-gesture .sd-song {
    border: 0; box-shadow: none; border-radius: 0; margin-bottom: 0; background: transparent;
}
.sd-gesture .sd-song:hover { background: transparent; }

/* Etiquetas de la ficha de subida de música */
.ficha-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 8px 0 4px; }

/* ── MÚSICA · LISTA CON TICS (crear lista nueva) ─────────────────────── */
.check-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px; background: var(--bg-sunken); }
.check-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.check-row:hover { background: var(--bg-soft); }
.check-row input { width: auto; margin: 0; transform: scale(1.25); accent-color: var(--c-musica); }
.check-row span { flex: 1; }
/* Fila del selector de canciones (buscador + filtro): género, título e intérprete. */
.sel-song { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.sel-song__src { width: 15px; height: 15px; flex: 0 0 auto; align-self: center; color: var(--muted); opacity: .8; }
.sel-song__genre { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--c-musica); padding: 1px 7px; border-radius: 999px; flex: 0 0 auto; }
.sel-song__title { font-weight: 600; color: var(--text); }
.sel-song__artist { font-size: 12px; color: var(--muted); }
/* Barra de filtros del selector (buscar + género). */
.sel-filtros { display: flex; gap: 8px; margin: 0 0 8px; }
.sel-filtros input { flex: 2; min-width: 0; margin: 0; }
.sel-filtros select { flex: 1; min-width: 0; margin: 0; }

/* ── MÚSICA · EDITAR LISTA CON GESTOS ────────────────────────────────── */
.edit-list { display: flex; flex-direction: column; gap: 8px; }
.edit-row {
    --cat: var(--c-musica); --cat-soft: var(--c-musica-soft);
    position: relative; overflow: hidden; border-radius: var(--radius);
    border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft);
    background: var(--bg-panel); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.edit-row.cat-editor   { --cat: var(--c-editor);   --cat-soft: var(--c-editor-soft); }
.edit-row.cat-entreno  { --cat: var(--c-entreno);  --cat-soft: var(--c-entreno-soft); }
.edit-row.cat-coreopro { --cat: var(--c-coreopro); --cat-soft: var(--c-coreopro-soft); }
.edit-row-action {
    position: absolute; top: 0; bottom: 0; width: 70px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; opacity: 0; transition: opacity 0.12s;
}
.act-play { left: 0; background: var(--ok); }
.act-del  { right: 0; background: var(--danger); }
.edit-row.reveal-play .act-play { opacity: 1; }
.edit-row.reveal-del  .act-del  { opacity: 1; }
.edit-row-fg {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 14px;
    padding: 10px 12px; background: var(--bg-panel); will-change: transform;
}
.edit-row.playing .edit-row-fg { box-shadow: inset 0 0 0 2px var(--cat); }

/* Aspecto rico (kit) dentro de la fila editable: chip de icono + título + meta.
   Mismas medidas que la ficha de canción (sd-song). */
.sd-row__art {
    width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--cat-soft); color: var(--cat);
}
.sd-row__art .lico { width: 24px; height: 24px; }
.sd-row__body { flex: 1; min-width: 0; }
.sd-row__title { color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-row__meta { color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-row.dragging { box-shadow: var(--shadow); z-index: 5; }
.edit-row.dragging .edit-row-fg { background: var(--bg-soft); }
.edit-row-grip {
    color: var(--muted); font-size: 22px; cursor: grab; line-height: 1;
    padding: 6px 8px; margin: -6px -4px -6px -6px;   /* zona táctil mayor */
    touch-action: none;                              /* arrastre sin que el navegador haga scroll */
}
.edit-row.dragging .edit-row-grip { cursor: grabbing; }
.edit-row-grip img.ico { width: 20px; height: 20px; padding: 1px; vertical-align: middle; pointer-events: none; }
.edit-row-title { flex: 1; font-size: 14px; }
/* Cola de CoreoPro: mismos gestos que Música; el realce de "sonando" usa su acento */
#cppl-lista-items .edit-row.playing .edit-row-fg { box-shadow: inset 0 0 0 2px var(--c-coreopro); }

/* Menú modal con acciones en columna (long-press de canción, elegir lista) */
.modal-box .modal-acciones.vertical { flex-direction: column; }
.modal-box .modal-acciones.vertical button { max-width: none; width: 100%; }

/* ── MISC ────────────────────────────────────────────────── */
.control-group { margin: 12px 0; }
.text-center { text-align: center; }
.playback-controls { display: flex; justify-content: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.playback-controls button { width: auto; height: 50px; padding: 0 18px; }

/* ── FASE 3 · ESCALA DE BOTONES ──────────────────────────────────────
   Alturas táctiles fijas (mín. 44px) que reemplazan los tamaños inline
   dispersos (50/52/60px). Se usan `button.x` para empatar en especificidad
   con `.playback-controls button` y, al ir después, prevalecer.
     · btn-lg        acción principal grande (Lanzar, etc.)  → 56px
     · btn-round-lg  play principal, redondo                 → 56px
     · btn-icon      botón de solo icono, cuadrado           → 44px  */
button.btn-lg { height: var(--tap-lg); padding: 0 22px; font-size: 16px; }
button.btn-round-lg, button.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; flex: 0 0 auto;
}
button.btn-round-lg { width: var(--tap-lg); height: var(--tap-lg); border-radius: 50%; }
button.btn-icon { width: var(--tap-min); height: var(--tap-min); }

/* ── FASE 5 · ACCIÓN PRINCIPAL (acento suave) ────────────────────────────
   La acción principal de cada panel se tiñe con el color de su sección
   (--primary, que cada sección ya redefine), en versión suave: fondo
   translúcido + texto/icono del color. Las demás siguen neutras. El icono
   (.lico-btn) hereda currentColor, así que toma el color del acento. */
button.btn-soft { background: var(--primary-soft); color: var(--primary); border: 1px solid transparent; font-weight: 700; }
button.btn-soft:hover { background: var(--primary-soft); border-color: var(--primary); }
.design-save { border: 1px dashed var(--primary); margin-top: 12px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.chip { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; }
.chip-coreopro { background: var(--c-coreopro-soft); color: var(--c-coreopro); }

/* Display grande de figura actual */
.figura-display {
    background: var(--bg-input); border-radius: var(--radius); padding: 18px; text-align:center;
    border: 2px solid var(--primary);
}
.figura-display h2 { font-size: 34px; margin: 8px 0; }

/* ── COREOPRO WAVEFORM EDITOR ────────────────────────────── */
.cp-config-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 520px; }

.cp-waveform-container {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--bg-canvas);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    height: 120px;
    cursor: crosshair;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;          /* permite scroll horizontal pero el navegador no roba el gesto a los hijos con touch-action:none */
}
.cp-waveform-canvas {
    display: block;
    height: 80px;
    margin-top: 20px;
    image-rendering: pixelated;
    touch-action: pan-x;          /* permite desplazar el waveform; el tap se detecta en JS */
}
.cp-cursor {
    position: absolute;
    top: 0;
    width: 22px;
    height: 100%;
    margin-left: -11px;
    background: transparent;
    cursor: ew-resize;
    z-index: 6;
    pointer-events: all;
    touch-action: none;           /* CLAVE en móvil: el arrastre del cursor no hace scroll */
}
.cp-cursor::before {
    /* asa superior arrastrable más visible/táctil */
    content: '';
    position: absolute;
    left: 4px; top: 0;
    width: 14px; height: 16px;
    background: #ff3b3b;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 6px rgba(255,59,59,0.7);
}
.cp-cursor::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 59, 59, 0.95);
    border-radius: 1px;
    pointer-events: none;
}
.cp-markers-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
}
.cp-marker {
    position: absolute;
    top: 0;
    height: 100%;
    pointer-events: all;
    cursor: grab;
    z-index: 3;
    user-select: none;
    touch-action: none;           /* CLAVE en móvil: arrastrar marca no hace scroll */
    min-width: 16px;              /* zona táctil mínima */
}
.cp-marker:active { cursor: grabbing; }
.cp-marker-line {
    position: absolute;
    left: 0;
    top: 16px;
    width: 2px;
    height: calc(100% - 16px);
    background: var(--c-coreopro);
    border-radius: 1px;
}
.cp-marker-label {
    position: absolute;
    top: 0;
    left: 4px;
    background: var(--c-coreopro);
    color: var(--on-coreopro);
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-marker-del {
    position: absolute;
    top: 0;
    left: -16px;
    width: 16px;
    height: 16px;
    background: var(--danger);
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    line-height: 16px;
    text-align: center;
}
.cp-marker-del:hover { background: var(--danger-hover); }

.cp-paleta-btn { width: auto; padding: 9px 14px; margin: 0; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); }
.cp-paleta-btn:hover { background: var(--bg-soft); }
.cp-paleta-btn.selected { background: var(--c-coreopro); color: var(--on-coreopro); box-shadow: 0 0 10px var(--c-coreopro-soft); border-color: var(--c-coreopro); }

/* Aviso central autodescartable (reemplaza los toasts; aparece en medio de la pantalla) */
.toast {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.92);
    background: var(--bg-elev); color: var(--text); padding: 20px 26px; border-radius: 14px;
    border: 2px solid var(--primary); box-shadow: 0 12px 44px rgba(0,0,0,0.45); z-index: 9999;
    font-size: 17px; font-weight: 600; text-align: center; max-width: 86%;
    opacity: 0; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Modal de confirmación / aviso con botones (centrado) */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out);
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-box {
    background: var(--bg-elev); color: var(--text); border-radius: 14px; padding: 24px;
    width: 420px; max-width: 90%; box-shadow: var(--shadow); text-align: center;
    transform: scale(0.92); transition: transform var(--dur-3) var(--ease-out); border: 1px solid var(--border);
}
.modal-overlay.show .modal-box { transform: scale(1); }
.modal-box h3 { margin: 0 0 12px; font-size: 20px; }
.modal-box p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 20px; white-space: pre-line; }
.modal-box .modal-acciones { display: flex; gap: 10px; justify-content: center; }
.modal-box .modal-acciones button { flex: 1; max-width: 170px; margin: 0; }
.modal-box .modal-input {
    width: 100%; box-sizing: border-box; margin: 0 0 20px; padding: 11px 12px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text);
    font-size: 15px; outline: none;
}
.modal-box .modal-input:focus { border-color: var(--ok); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Indicador de pantalla activa (wake lock) */
.wake-badge { font-size: 11px; color: var(--c-entreno); display: none; }
.wake-badge.on { display: inline; }

/* ── Timeline de coreografía por pasos ───────────────────────────────────── */
/* Ancho de celda fijo (1 paso). Si se cambia, actualizar TL_CELL_W en app.js */
/* El contenedor scrollea horizontalmente sin afectar al ancho de la página */
#coreo-timeline { max-width: 100%; }
#coreo-timeline-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;      /* no dispara gestos de navegación del navegador */
    -webkit-overflow-scrolling: touch;   /* scroll con inercia en móvil */
}
.tl-row { position: relative; height: 34px; white-space: nowrap; font-size: 0; }
.tl-figuras { margin-top: 4px; }
.tl-cell {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 32px; box-sizing: border-box;
    border: 1px solid var(--border); font-size: 11px; color: var(--faint);
}
.tl-cell.tl-beat1 { background: var(--beat1); color: var(--beat1-on); font-weight: bold; } /* paso 1 destacado (ámbar fijo) */
.tl-fig {
    position: absolute; top: 0; height: 32px; box-sizing: border-box;
    background: var(--c-editor); color: #fff; border: 1px solid #fff; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; overflow: hidden; padding: 0 14px 0 4px;
    cursor: grab; user-select: none; touch-action: none;
}
.tl-fig.dragging { opacity: 0.85; cursor: grabbing; box-shadow: 0 0 10px var(--c-editor); z-index: 5; }
.tl-fig .tl-del {
    position: absolute; top: 0; right: 0; height: 100%;
    display: flex; align-items: center; padding: 0 4px;
    font-size: 11px; color: #fff; background: rgba(0,0,0,0.25); cursor: pointer;
}