/* Los tokens salen de playlists.palette.variables_css() en base.html. */

/* La ruta inicial viaja con el anfitrión entre las pantallas que configuran
   su primera noche. Es deliberadamente compacta: explica la tarea actual sin
   convertir cada herramienta en otro tutorial de cinco tarjetas. */
.inicio-ruta {
    width: min(100%, 46rem);
    margin: 0 auto 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(127, 174, 152, .3);
    border-radius: 1rem;
    color: #f4ede4;
    background: linear-gradient(145deg, rgba(71, 117, 96, .14), rgba(14, 12, 14, .96));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.inicio-ruta-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.inicio-ruta-paso {
    color: #9fc8ac;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.inicio-ruta-cabeza a,
.inicio-ruta-despues {
    color: #dba17d;
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
}

.inicio-ruta > strong {
    display: block;
    margin-top: .45rem;
    font: 800 .96rem/1.3 "Sora", sans-serif;
}

.inicio-ruta > p {
    margin: .3rem 0 .7rem;
    color: #ab9f93;
    font-size: .76rem;
    line-height: 1.45;
}

.inicio-ruta-progreso {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inicio-ruta-progreso li {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
}

.inicio-ruta-progreso li::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: calc(50% + .8rem);
    left: calc(-50% + .8rem);
    height: 1px;
    background: rgba(255, 255, 255, .09);
}

.inicio-ruta-progreso li:first-child::before { display: none; }

.inicio-ruta-progreso li > span:first-child {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    color: #776d66;
    background: #100e0f;
    font-size: .65rem;
    font-weight: 850;
}

.inicio-ruta-progreso li.is-done > span:first-child {
    border-color: rgba(127, 174, 152, .42);
    color: #bce0ca;
    background: #17241e;
}

.inicio-ruta-progreso li.is-current > span:first-child {
    border-color: rgba(239, 180, 137, .62);
    color: #f1c4a4;
    background: #281712;
    box-shadow: 0 0 0 3px rgba(215, 138, 99, .08);
}

.inicio-ruta-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.inicio-ruta-despues {
    display: inline-flex;
    margin-top: .8rem;
}

@media (max-width: 420px) {
    .inicio-ruta { padding: .8rem .85rem; }
    .inicio-ruta-cabeza { align-items: flex-start; }
    .inicio-ruta-cabeza a { max-width: 7rem; text-align: right; }
}

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

html {
    min-height: 100%;
    color-scheme: dark;
    background:
        radial-gradient(circle at 18% 18%, rgba(110, 45, 47, 0.24), transparent 34%),
        radial-gradient(circle at 52% 0%, rgb(from var(--accent) r g b / 0.12), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(62, 28, 33, 0.16), transparent 30%),
        linear-gradient(180deg, #0c090a 0%, #090708 44%, #070507 100%);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Manrope", sans-serif;
    background: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.mobile-menu-open {
    overflow: hidden;
}

body:not(.cabaret-active-page) .site-shell::before,
body:not(.cabaret-active-page) .site-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body:not(.cabaret-active-page) .site-shell::before {
    background:
        radial-gradient(circle at 15% 6%, rgba(110, 45, 47, 0.24), transparent 28%),
        radial-gradient(circle at 35% 24%, rgb(from var(--accent) r g b / 0.055), transparent 20%),
        linear-gradient(180deg, rgba(5, 5, 6, 0), rgba(3, 3, 4, 0.2));
    filter: blur(8px);
    opacity: 0.76;
}

body:not(.cabaret-active-page) .site-shell::after {
    background:
        linear-gradient(180deg, rgba(3, 3, 4, 0.14), rgba(3, 3, 4, 0)),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.006) 0,
            rgba(255, 255, 255, 0.006) 1px,
            transparent 1px,
            transparent 4px
        );
    opacity: 0.14;
    mix-blend-mode: soft-light;
}

body:not(.cabaret-active-page) .main-shell {
    position: relative;
    z-index: 1;
}

body.library-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(110, 45, 47, 0.12), transparent 26%),
        radial-gradient(circle at 78% 12%, rgb(from var(--accent) r g b / 0.05), transparent 24%);
    opacity: 0.85;
}

a {
    color: inherit;
    text-decoration: none;
}

a[href],
button,
[role="button"] {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
.page-title,
.section-title,
.hero-side-value,
.metric-value,
.category-count,
.brand-copy strong {
    font-family: "Sora", sans-serif;
}

.shell {
    width: min(calc(100% - 2rem), var(--shell));
    margin-inline: auto;
}

.site-shell {
    position: relative;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid rgb(from var(--accent) r g b / 0.08);
    background: rgba(7, 7, 8, 0.86);
    backdrop-filter: blur(24px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}

.topbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110, 45, 47, 0.14), rgb(from var(--accent) r g b / 0.28), transparent);
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 5.9rem;
    padding: 1rem 0;
}

@media (max-width: 980px) {
    .topbar-inner {
        min-height: 4.8rem;
        padding: 0.55rem 0;
        gap: 1rem;
    }
}

/* Cabina: el espacio, no Wurlitzer, es quien está trabajando esta noche. */
.cabina-brand-lockup {
    gap: .72rem;
}

.brand-badge.cabina-workspace-badge {
    width: 2.4rem;
    height: 2.4rem;
    overflow: hidden;
    border: 0;
    border-radius: .78rem;
    background: transparent;
    box-shadow: none;
}

.brand-badge.cabina-workspace-badge .brand-mark {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.brand-copy.cabina-brand-copy small {
    display: flex;
    align-items: center;
    gap: .38rem;
    color: #d99069;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .2em;
}

.cabina-brand-copy strong {
    display: flex;
    align-items: center;
    gap: .38rem;
    line-height: 1.05;
}

.cabina-workspace-chevron {
    color: #a59c94;
    font-family: Manrope, sans-serif;
    font-size: .9em;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-.08em);
}

.cabina-wordmark-icon {
    display: inline-block;
    width: 1.28rem;
    height: 1.28rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.cabina-account-trigger {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-color: rgba(220, 147, 109, .34);
    border-radius: 50%;
    background: linear-gradient(145deg, #5f3428, #241614);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.cabina-account-trigger .cabina-account-initials {
    position: static;
    width: auto;
    height: auto;
    color: #f6dfcd;
    background: transparent;
    transform: none;
    font-family: "Sora", sans-serif;
    font-size: .7rem;
    font-weight: 800;
}

.cabina-desktop-avatar {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border: 1px solid rgba(220, 147, 109, .34);
    border-radius: 50%;
    color: #f6dfcd;
    background: linear-gradient(145deg, #5f3428, #241614);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-family: "Sora", sans-serif;
    font-size: .7rem;
    font-weight: 800;
}

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

body.cabina-home-page .main-shell {
    padding-top: 1.35rem;
}

@media (max-width: 560px) {
    .brand-badge.cabina-workspace-badge {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: .78rem;
    }

    .brand-badge.cabina-workspace-badge .brand-mark {
        width: 100%;
        height: 100%;
    }

    .cabina-brand-copy strong { font-size: 1.08rem; }

    .brand-copy.cabina-brand-copy small {
        font-size: .72rem;
        letter-spacing: .19em;
    }

    .cabina-account-trigger {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        margin-left: auto;
    }

    body.cabina-home-page .main-shell { padding-top: .9rem; }
}

@media (max-width: 560px) {
    .topbar-inner {
        min-height: 4rem;
        padding: 0.35rem 0;
        gap: 0.65rem;
    }
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex-shrink: 0;
}

.brand-badge {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.35rem;
    border: 1px solid rgb(from var(--accent) r g b / 0.14);
    background:
        radial-gradient(circle at 50% 20%, rgb(from var(--accent) r g b / 0.13), transparent 48%),
        linear-gradient(180deg, rgba(20, 16, 18, 0.98), rgba(8, 8, 9, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 14px 30px rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .brand-badge {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 1rem;
    }
}

.brand-mark {
    width: 2.7rem;
    height: 2.7rem;
    object-fit: contain;
}

@media (max-width: 560px) {
    .brand-mark {
        width: 2rem;
        height: 2rem;
    }
}

/* El calce que se elige en Configurar manda también acá.

   Antes no: la barra fijaba `object-fit` a mano —`cover` en la cabina,
   `contain` en la pública— y el ajuste no cambiaba nada justo donde el logo se
   ve todo el rato. Van en porcentaje para servir a los dos tamaños de placa
   (2,4rem en la cabina, 4rem en la pública) sin repetir medidas.

   La especificidad se escribe completa a propósito: `.brand-badge
   .cabina-workspace-badge .brand-mark` ya vale (0,3,0), así que empatar no
   basta para ganarle. */
.brand-badge.workspace-fit-contain .brand-mark,
.brand-badge.cabina-workspace-badge.workspace-fit-contain .brand-mark {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.brand-badge.workspace-fit-cover .brand-mark,
.brand-badge.cabina-workspace-badge.workspace-fit-cover .brand-mark {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.brand-copy {
    min-width: 0;
}

.brand-copy strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-strong);
}

.brand-copy small {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    .brand-copy strong {
        font-size: 1rem;
        margin-bottom: 0.05rem;
    }

    .brand-copy small {
        margin-top: 0.05rem;
        font-size: 0.55rem;
        letter-spacing: 0.15em;
    }
}

.topbar-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

.nav-row,
.topbar-actions,
.mobile-panel-actions,
.action-row,
.tag-row,
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

@media (max-width: 720px) {
    .action-row,
    .tag-row {
        gap: 0.5rem;
    }
}

@media (max-width: 560px) {
    .action-row,
    .tag-row {
        gap: 0.35rem;
    }
}

.nav-row {
    justify-content: center;
    flex: 1;
}

.nav-pill,
.mobile-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--muted);
    font-weight: 650;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.nav-pill:hover,
.mobile-nav-link:hover {
    color: var(--text);
    border-color: var(--border-default);
    background: var(--surface-soft);
}

.nav-pill-active,
.mobile-nav-link-active {
    color: var(--text-strong);
    border-color: rgb(from var(--accent) r g b / 0.24);
    background:
        linear-gradient(180deg, rgb(from var(--accent) r g b / 0.13), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.026);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.topbar-actions {
    justify-content: flex-end;
}

.account-menu {
    position: relative;
}

.account-menu-toggle {
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 70;
    display: grid;
    min-width: 13.5rem;
    padding: 0.45rem;
    border: 1px solid var(--border-default);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(18, 17, 19, 0.99), rgba(8, 9, 11, 0.99));
    box-shadow: var(--shadow-lg);
}

.account-menu-dropdown[hidden] {
    display: none;
}

.account-menu-dropdown form {
    margin: 0;
}

.account-menu-item {
    display: flex;
    width: 100%;
    min-height: 2.45rem;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    padding: 0.65rem 0.75rem;
    color: var(--muted-strong);
    font-size: 0.88rem;
    font-weight: 750;
    text-align: left;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
    background: var(--surface-hover);
    color: var(--text-strong);
    outline: none;
}

.user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-default);
    background: var(--surface-soft);
    color: var(--muted-strong);
    font-size: 0.92rem;
    font-weight: 700;
}

.mobile-toggle {
    display: none;
    position: relative;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border: 1px solid var(--border-default);
    border-radius: 1rem;
    background: var(--surface-soft);
    color: var(--text);
    box-shadow: var(--shadow-md);
}

.mobile-toggle span {
    position: absolute;
    left: 50%;
    width: 1.2rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
    transition: transform 160ms ease, opacity 160ms ease;
}

.mobile-toggle span:nth-child(1) {
    top: 1rem;
}

.mobile-toggle span:nth-child(2) {
    top: 1.45rem;
}

.mobile-toggle span:nth-child(3) {
    top: 1.9rem;
}

body.mobile-menu-open .mobile-toggle span:nth-child(1) {
    transform: translateX(-50%) translateY(0.45rem) rotate(45deg);
}

body.mobile-menu-open .mobile-toggle span:nth-child(2) {
    opacity: 0;
}

body.mobile-menu-open .mobile-toggle span:nth-child(3) {
    transform: translateX(-50%) translateY(-0.45rem) rotate(-45deg);
}

.mobile-panel {
    display: none;
    padding-bottom: 1rem;
}

.mobile-panel[hidden] {
    display: none !important;
}

.mobile-nav-list {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border-default);
    border-radius: 1.6rem;
    background: rgba(15, 19, 24, 0.96);
    box-shadow: var(--shadow-lg);
}

.mobile-panel.is-open {
    animation: mobile-panel-enter 180ms ease-out;
}

.mobile-nav-link {
    justify-content: flex-start;
    min-height: 3rem;
}

.mobile-panel-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.mobile-panel-form {
    margin: 0;
}

@keyframes mobile-panel-enter {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-shell {
    padding: 2.25rem 0 5rem;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        filter 180ms ease;
}

body.is-page-leaving .main-shell {
    opacity: 0;
    transform: translateY(0.35rem);
    filter: blur(1.5px);
}

body.is-page-entering .main-shell {
    opacity: 0;
    transform: translateY(0.45rem);
    filter: blur(1.5px);
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
    animation-name: wurlitzer-page-out;
}

::view-transition-new(root) {
    animation-name: wurlitzer-page-in;
}

@keyframes wurlitzer-page-out {
    from {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateY(0.35rem);
        filter: blur(2px);
    }
}

@keyframes wurlitzer-page-in {
    from {
        opacity: 0;
        transform: translateY(0.45rem);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.toast-stack {
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 80;
    display: grid;
    gap: 0.7rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    padding: 0.95rem 1rem 1rem 1.05rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border-default);
    background:
        radial-gradient(circle at top right, rgba(184, 106, 79, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(25, 27, 30, 0.98), rgba(14, 16, 19, 0.98));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateX(1rem) scale(0.985);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease;
    cursor: pointer;
}

.toast::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: rgba(184, 106, 79, 0.92);
}

.toast::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(184, 106, 79, 0.82);
    box-shadow: 0 0 0 0.22rem rgba(184, 106, 79, 0.1);
}

.toast-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.toast-exit {
    opacity: 0;
    transform: translateX(0.8rem) scale(0.985);
}

.toast-body p {
    margin: 0;
    color: var(--text-strong);
    max-width: 28ch;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.5;
}

.toast-success {
    border-color: rgba(122, 145, 132, 0.18);
    background:
        radial-gradient(circle at top right, rgba(122, 145, 132, 0.1), transparent 36%),
        linear-gradient(180deg, rgba(25, 27, 30, 0.98), rgba(14, 16, 19, 0.98));
}

.toast-success::before,
.toast-success::after {
    background: rgba(122, 145, 132, 0.92);
}

.toast-error {
    border-color: rgba(200, 106, 95, 0.2);
    background:
        radial-gradient(circle at top right, rgba(200, 106, 95, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(25, 27, 30, 0.98), rgba(14, 16, 19, 0.98));
}

.toast-error::before,
.toast-error::after {
    background: rgba(200, 106, 95, 0.94);
}

.toast-info,
.toast-warning {
    border-color: rgba(184, 106, 79, 0.18);
    background:
        radial-gradient(circle at top right, rgba(184, 106, 79, 0.1), transparent 36%),
        linear-gradient(180deg, rgba(25, 27, 30, 0.98), rgba(14, 16, 19, 0.98));
}

.toast:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(0) translateY(-1px);
}

.page-stack {
    display: grid;
    gap: 1.5rem;
}

.page-hero,
.split-layout,
.hero-home,
.summary-grid,
.category-grid,
.workspace-grid,
.history-grid,
.catalog-grid,
.recipe-grid,
.filter-grid,
.field-grid,
.helper-grid,
.inner-grid {
    display: grid;
    gap: 1.25rem;
}

.page-hero {
    align-items: stretch;
}

.hero-home {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
}

.home-hero-minimal {
    min-height: 18rem;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.85rem;
}

.home-hero-minimal .page-title {
    max-width: none;
}

.home-stack {
    gap: 2rem;
}

.home-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
    align-items: stretch;
    gap: 1.25rem;
}

.home-welcome-copy,
.home-public-panel,
.home-section {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top left, rgba(110, 45, 47, 0.22), transparent 38%),
        linear-gradient(180deg, rgba(17, 18, 21, 0.98), rgba(9, 11, 14, 0.97));
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(18px);
}

.home-welcome-copy {
    display: grid;
    align-content: center;
    min-height: 24rem;
    padding: clamp(1.75rem, 2.4vw, 2.35rem);
}

.home-title {
    max-width: 16.6ch;
    margin-top: 0.9rem;
    color: var(--text-strong);
    font-family: "Sora", sans-serif;
    font-size: clamp(2.85rem, 3.55vw, 3.35rem);
    font-weight: 800;
    line-height: 1.04;
    text-wrap: balance;
}

.home-lead {
    max-width: 42rem;
    margin-top: 1.35rem;
    color: var(--muted-strong);
    font-size: 1.02rem;
    line-height: 1.7;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.55rem;
}

.home-public-panel {
    display: grid;
    align-content: space-between;
    gap: 1.2rem;
    padding: 1.65rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(184, 106, 79, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(16, 17, 20, 0.98), rgba(8, 9, 11, 0.98));
}

.home-system-logo {
    width: 5.75rem;
    height: 5.75rem;
    justify-self: center;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42));
}

.home-public-card {
    padding: 1.15rem;
    border: 1px solid rgb(from var(--accent) r g b / 0.12);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at top right, rgba(184, 106, 79, 0.08), transparent 42%),
        rgba(255, 255, 255, 0.026);
}

.home-public-card h2 {
    margin-top: 0.6rem;
    color: var(--text-strong);
    font-family: "Sora", sans-serif;
    font-size: 1.35rem;
    line-height: 1.22;
}

.home-public-action-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.home-public-action-list span {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--muted);
    line-height: 1.55;
    font-weight: 700;
}

.home-public-action-list span::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(184, 106, 79, 0.72);
    box-shadow: 0 0 0 0.32rem rgba(184, 106, 79, 0.08);
}

.home-public-panel > p {
    color: var(--muted);
    line-height: 1.6;
}

.home-section {
    padding: 1.8rem;
}

.home-workspace-grid {
    margin-top: 1.2rem;
}

.home-workspace-card {
    min-height: 8.6rem;
    padding: 1.15rem 1.25rem;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.home-workspace-card .workspace-logo-frame-large {
    width: clamp(4.45rem, 4.5vw, 5.1rem);
    height: clamp(4.45rem, 4.5vw, 5.1rem);
    border-radius: 1.1rem;
}

.home-workspace-card:hover {
    transform: translateY(-3px);
}

.home-workspace-brand {
    align-items: center;
    width: 100%;
    gap: 1.15rem;
}

.home-workspace-brand .workspace-copy p {
    margin-top: 0.45rem;
    color: var(--muted);
    line-height: 1.5;
}

.home-card-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid rgb(from var(--accent) r g b / 0.16);
    border-radius: 999px;
    color: var(--text-strong);
    background: rgba(255, 255, 255, 0.026);
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.home-card-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-workspace-card:hover .home-card-arrow {
    transform: translateX(3px);
    border-color: rgba(184, 106, 79, 0.32);
    background: rgba(184, 106, 79, 0.1);
}

.home-flow-section {
    display: grid;
    gap: 1.25rem;
}

.home-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-flow-item {
    min-width: 0;
    padding: 1.1rem;
    border: 1px solid rgb(from var(--accent) r g b / 0.11);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.02);
}

.home-flow-index {
    display: inline-flex;
    margin-bottom: 1rem;
    color: var(--accent-soft);
    font-family: "Sora", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}

.home-flow-item h3 {
    color: var(--text-strong);
    font-size: 1rem;
}

.home-flow-item p {
    margin-top: 0.55rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.split-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: start;
}

.split-tight {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
}

.stack-column {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.summary-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.category-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.workspace-grid,
.history-grid,
.catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.workspace-grid-minimal {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.recipe-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.helper-grid,
.inner-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: end;
}

.field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel,
.workspace-card,
.metric-card,
.category-card,
.history-card,
.catalog-card,
.slot-card,
.song-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(17, 18, 21, 0.98), rgba(9, 11, 14, 0.97));
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(18px);
}

.panel::before,
.workspace-card::before,
.metric-card::before,
.category-card::before,
.history-card::before,
.catalog-card::before,
.slot-card::before,
.song-card::before,
.hero-main::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at top left, rgb(from var(--accent) r g b / 0.055), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 38%);
    pointer-events: none;
}

.panel,
.workspace-card {
    padding: 1.8rem;
}

.metric-card,
.category-card,
.history-card,
.catalog-card,
.slot-card,
.song-card {
    padding: 1.35rem;
}

.panel-feature,
.hero-side {
    background:
        radial-gradient(circle at 0% 0%, rgba(110, 45, 47, 0.24), transparent 34%),
        linear-gradient(90deg, rgb(from var(--accent) r g b / 0.075), transparent 24%),
        linear-gradient(135deg, rgba(15, 12, 14, 0.99), rgba(10, 11, 13, 0.98) 58%, rgba(7, 8, 10, 0.98));
    border-color: rgba(210, 128, 88, 0.16);
    box-shadow:
        0 32px 86px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.018),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.panel-soft {
    background:
        linear-gradient(180deg, rgba(15, 16, 19, 0.95), rgba(9, 10, 13, 0.96));
    border-color: rgba(255, 255, 255, 0.045);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* En la barra de la casa de Wurlitzer cabe el nombre, pero no una firma
   completa. La regla de marca pide logotipo solo antes que forzar un lockup
   horizontal con el isotipo. */
.platform-brand-lockup {
    min-height: 2.4rem;
}

.platform-wordmark {
    display: block;
    width: 7.3rem;
    height: auto;
}

/* Reúne la versión que hoy ganaba en cascada, sin repetir .hero-main. */
.hero-main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 24rem;
    overflow: hidden;
    padding: 1.8rem;
    border: 1px solid rgba(210, 128, 88, 0.16);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 0% 0%, rgba(110, 45, 47, 0.24), transparent 34%),
        linear-gradient(90deg, rgb(from var(--accent) r g b / 0.075), transparent 24%),
        linear-gradient(135deg, rgba(15, 12, 14, 0.99), rgba(10, 11, 13, 0.98) 58%, rgba(7, 8, 10, 0.98));
    box-shadow:
        0 32px 86px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.018),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
}

body.library-page .panel::before,
body.library-page .metric-card::before,
body.library-page .catalog-card::before,
body.library-page .song-card::before {
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.022), transparent 46%);
}

body.library-page .panel-feature {
    background:
        radial-gradient(circle at top left, rgba(184, 106, 79, 0.055), transparent 30%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.02), transparent 24%),
        linear-gradient(180deg, rgba(26, 28, 31, 0.98), rgba(17, 19, 22, 0.96));
}

body.library-page .panel,
body.library-page .metric-card,
body.library-page .catalog-card,
body.library-page .song-card {
    border-color: var(--border-subtle);
}

body.library-page .table-card {
    background: rgba(12, 14, 17, 0.6);
}

body.library-page .filter-grid {
    grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(130px, 0.8fr)) minmax(150px, auto) minmax(15rem, auto);
    column-gap: 0.95rem;
    row-gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 1.35rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)),
        rgba(8, 10, 13, 0.58);
}

body.library-page .filter-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.7rem;
    min-width: 15rem;
}

body.library-page .filter-actions .button {
    min-height: 3.05rem;
    white-space: nowrap;
}

body.library-page .field-block-toggle {
    align-self: end;
    justify-items: start;
}

body.library-page .trending-filter-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 2.95rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.004)),
        rgba(255, 255, 255, 0.004);
    color: #958c84;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

body.library-page .trending-filter-chip:hover {
    border-color: rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.006)),
        rgba(255, 255, 255, 0.008);
    color: #aaa097;
    transform: translateY(-1px);
}

body.library-page .trending-filter-chip:has(input:checked) {
    border-color: rgba(243, 177, 104, 0.28);
    background:
        linear-gradient(135deg, rgba(232, 139, 99, 0.075), rgba(210, 168, 91, 0.045)),
        rgba(255, 255, 255, 0.008);
    color: #edc9ad;
    box-shadow:
        inset 0 1px 0 rgba(255, 226, 183, 0.018),
        0 3px 8px rgba(226, 128, 85, 0.028);
}

body.library-page .trending-filter-chip:has(input:focus-visible) {
    box-shadow:
        0 0 0 4px rgba(126, 185, 177, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

body.library-page .trending-filter-chip:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.012);
}

body.library-page .trending-filter-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 1180px) {
    body.library-page .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.library-page .filter-grid .field-block:first-child,
    body.library-page .filter-actions {
        grid-column: 1 / -1;
    }

    body.library-page .filter-actions {
        min-width: 0;
        justify-content: flex-end;
        align-items: center;
    }
}

@media (max-width: 720px) {
    body.library-page .filter-grid {
        padding: 0.8rem;
        gap: 0.55rem;
    }
}

@media (max-width: 560px) {
    body.library-page .filter-grid {
        padding: 0.65rem;
        gap: 0.45rem;
        border-radius: 1rem;
    }
}

body.library-page [data-open-library-demo].button-small {
    min-width: 5.4rem;
    border-color: rgba(255, 255, 255, 0.075);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.012);
}

body.library-page .catalog-grid {
    gap: 1.05rem;
}

body.library-page .catalog-card {
    min-height: 12.1rem;
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    gap: 0.95rem;
    padding: 1.2rem;
}

body.library-page .catalog-card-copy {
    min-width: 0;
}

body.library-page .catalog-card .song-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.library-page .catalog-card .song-artist {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.42rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.library-page .catalog-card-tags {
    margin-top: 0;
}

body.library-page .catalog-card-actions {
    display: flex;
    align-self: end;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

body.library-page .catalog-card-actions form {
    margin: 0;
}

body.library-page .catalog-listen-button {
    min-width: 0;
    padding-inline: 1rem;
}

body.library-page .catalog-add-button {
    min-width: 9.8rem;
}

.panel-nested {
    height: 100%;
}

.hero-side {
    padding: 1.8rem;
}

.hero-platform-logo {
    width: clamp(5.5rem, 12vw, 8.5rem);
    height: auto;
    object-fit: contain;
}

.hero-platform-logo {
    margin-bottom: 1rem;
}

.hero-home .page-title {
    max-width: 12ch;
    font-size: clamp(3rem, 6.4vw, 5.6rem);
    letter-spacing: -0.06em;
}

.home-hero-minimal {
    min-height: 22rem;
    border-color: rgba(210, 128, 88, 0.2);
}

.hero-side-value {
    margin: 0.85rem 0 0.65rem;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: var(--text-strong);
}

.eyebrow {
    margin: 0 0 0.5rem;
    color: #d4a596;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-size: clamp(2.35rem, 5vw, 4.55rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: var(--text-strong);
}

.page-title-compact {
    font-size: clamp(2.1rem, 4.2vw, 3.45rem);
    white-space: nowrap;
}

.section-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 2.25rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-strong);
}

.page-copy,
.section-copy,
.muted,
.song-artist {
    color: var(--muted);
    line-height: 1.7;
}

.page-copy,
.section-copy {
    margin-top: 0.9rem;
    max-width: 62ch;
    font-size: 1rem;
}

.muted {
    font-size: 0.95rem;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 720px) {
    .section-head {
        gap: 0.7rem;
    }
}

@media (max-width: 560px) {
    .section-head {
        gap: 0.5rem;
    }
}

.section-head-wide {
    align-items: flex-start;
}

.metric-card {
    min-height: 10.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-color: var(--border-subtle);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.01)),
        rgba(5, 6, 8, 0.24);
}

.metric-label {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.metric-value {
    margin-top: 0.85rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: var(--text-strong);
}

.metric-meta {
    display: block;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--muted);
    line-height: 1.55;
    font-size: 0.95rem;
}

.workspace-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.workspace-brand-large {
    align-items: center;
    gap: 1.18rem;
}

.workspace-logo-frame {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 4.9rem;
    height: 4.9rem;
    overflow: hidden;
    border-radius: 1.15rem;
    border: 1px solid rgba(210, 128, 88, 0.18);
    background: rgba(2, 2, 3, 0.92);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.workspace-logo-frame-has-image {
    width: 5.2rem;
    height: 5.2rem;
}

.workspace-logo-frame-large {
    width: clamp(6.65rem, 6.4vw, 7.85rem);
    height: clamp(6.65rem, 6.4vw, 7.85rem);
    margin-top: 0.18rem;
    border-radius: 1.48rem;
}

.workspace-logo-img {
    display: block;
    width: calc(100% - 0.6rem);
    height: calc(100% - 0.6rem);
    object-fit: contain;
    object-position: center;
    filter: saturate(1.02) contrast(1.02);
}

.workspace-logo-frame-large .workspace-logo-img {
    width: calc(100% - 0.72rem);
    height: calc(100% - 0.72rem);
}

.workspace-logo-fit-cover .workspace-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workspace-logo-fit-contain .workspace-logo-img {
    object-fit: contain;
}

.workspace-logo-frame-fallback {
    background:
        radial-gradient(circle at center, rgba(210, 128, 88, 0.24), transparent 66%),
        linear-gradient(135deg, rgba(110, 45, 47, 0.52), rgb(from var(--accent) r g b / 0.22)),
        rgba(5, 5, 7, 0.92);
}

.workspace-logo-letter {
    color: var(--text-strong);
    font-family: "Sora", sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.workspace-logo {
    flex: 0 0 auto;
    width: 4.7rem;
    height: 4.7rem;
    border-radius: 1.5rem;
    border: 1px solid var(--border-default);
    object-fit: cover;
    background: var(--surface-soft);
    box-shadow: var(--shadow-md);
}

.workspace-logo-image {
    object-fit: contain;
    padding: 0.45rem;
    background:
        radial-gradient(circle at center, rgba(210, 128, 88, 0.12), transparent 66%),
        rgba(8, 8, 10, 0.88);
}

.workspace-logo-large {
    width: 6rem;
    height: 6rem;
    border-radius: 1.8rem;
}

.workspace-logo-fallback {
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(110, 45, 47, 0.28), rgb(from var(--accent) r g b / 0.2));
    color: var(--text-strong);
    font-family: "Sora", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.workspace-copy {
    min-width: 0;
}

.workspace-copy h3,
.category-card h3,
.history-card h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.workspace-card-meta {
    margin-top: 1.1rem;
}

.workspace-card-minimal {
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.workspace-card-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.workspace-card-minimal.home-workspace-card {
    min-height: 7rem;
    justify-content: center;
}

.workspace-card-link.home-workspace-card {
    flex-direction: row;
    align-items: center;
}

.category-card {
    min-height: 12rem;
}

.category-card-bachata {
    border-color: rgba(176, 92, 82, 0.24);
    background:
        linear-gradient(180deg, rgba(176, 92, 82, 0.1), rgba(255, 255, 255, 0.014)),
        rgba(8, 10, 13, 0.72);
}

.category-card-salsa {
    border-color: rgba(199, 154, 59, 0.24);
    background:
        linear-gradient(180deg, rgba(199, 154, 59, 0.1), rgba(255, 255, 255, 0.014)),
        rgba(8, 10, 13, 0.72);
}

.category-card-merengue {
    border-color: rgba(78, 139, 132, 0.26);
    background:
        linear-gradient(180deg, rgba(78, 139, 132, 0.1), rgba(255, 255, 255, 0.014)),
        rgba(8, 10, 13, 0.72);
}

.category-count {
    display: block;
    margin: 1rem 0 0.4rem;
    font-size: 2.5rem;
    line-height: 0.95;
    color: var(--text-strong);
}

.list-stack {
    display: grid;
    gap: 0.95rem;
}

.library-results-stack {
    display: grid;
    gap: 1.35rem;
}

.library-completion-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgba(184, 106, 79, 0.18);
    border-radius: 1.05rem;
    background:
        linear-gradient(135deg, rgba(184, 106, 79, 0.11), rgb(from var(--accent) r g b / 0.045)),
        rgba(8, 10, 12, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.library-completion-copy {
    display: grid;
    gap: 0.32rem;
}

.library-completion-copy .section-title,
.library-completion-copy .section-copy,
.library-completion-note {
    margin: 0;
}

.library-completion-note {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.library-completion-actions {
    justify-content: flex-end;
}

.library-completion-actions form {
    margin: 0;
}

.list-link-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)),
        rgba(8, 10, 13, 0.72);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.list-link-card:hover,
.history-card:hover,
.workspace-card:hover,
.catalog-card:hover {
    transform: translateY(-2px);
    border-color: rgba(210, 128, 88, 0.28);
    background:
        linear-gradient(180deg, rgb(from var(--accent) r g b / 0.06), rgba(255, 255, 255, 0.016)),
        rgba(10, 11, 14, 0.82);
    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.list-link-card strong {
    display: block;
    color: var(--text-strong);
    line-height: 1.35;
}

.list-link-card span {
    display: block;
    margin-top: 0.3rem;
}

.list-link-card-spread {
    align-items: center;
}

.list-link-card-played {
    border-color: rgba(95, 143, 122, 0.24);
    background: linear-gradient(180deg, rgba(95, 143, 122, 0.08), rgba(255, 255, 255, 0.018));
}

.history-card {
    display: block;
    min-height: 13rem;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 14rem;
}

.message {
    padding: 1rem 1.05rem;
    border: 1px solid var(--border-default);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.026);
}

.message-error {
    border-color: rgba(200, 106, 95, 0.22);
    background: rgba(200, 106, 95, 0.08);
    color: #f4d3ce;
}

.classification-loader-form {
    max-width: 56rem;
}

.classification-tool-layout {
    align-items: start;
}

.classification-card-list {
    display: grid;
    gap: 0.95rem;
}

.classification-row {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.012)),
        rgba(8, 10, 13, 0.78);
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.classification-row:hover {
    transform: translateY(-2px);
    border-color: rgba(210, 128, 88, 0.26);
    background:
        linear-gradient(180deg, rgb(from var(--accent) r g b / 0.06), rgba(255, 255, 255, 0.014)),
        rgba(10, 11, 14, 0.84);
    box-shadow: var(--shadow-lg);
}

.classification-row-bachata {
    border-color: rgba(176, 92, 82, 0.22);
}

.classification-row-salsa {
    border-color: rgba(199, 154, 59, 0.22);
}

.classification-row-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.classification-position {
    display: grid;
    gap: 0.28rem;
    min-width: 5rem;
}

.classification-position-current {
    color: var(--text-strong);
    font-family: "Sora", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.classification-position-source {
    color: var(--muted);
    font-size: 0.84rem;
}

.classification-copy {
    min-width: 0;
}

.classification-row-actions {
    justify-content: flex-start;
}

.classification-issue {
    margin: 0.75rem 0 0;
}

.classification-tool-empty[hidden] {
    display: none;
}

.library-added-feedback[hidden] {
    display: none;
}

.library-added-feedback {
    margin-top: 1.2rem;
}

.library-added-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.35rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid rgba(95, 143, 122, 0.2);
    border-radius: 1.4rem;
    background:
        radial-gradient(circle at top right, rgba(95, 143, 122, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(15, 17, 19, 0.98), rgba(9, 11, 13, 0.96));
    box-shadow: 0 18px 38px rgba(5, 9, 14, 0.26);
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
}

.library-added-card.is-visible {
    animation: library-added-card-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.library-added-copy {
    min-width: 0;
}

.library-added-note {
    max-width: 58ch;
}

.helper-card {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.012)),
        rgba(8, 10, 13, 0.72);
}

.helper-card strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-strong);
}

.slot-card {
    border-color: rgba(184, 106, 79, 0.14);
}

.slot-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.slot-head h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 1.05rem;
}

.slot-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #1c1305;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(184, 106, 79, 0.18);
}

.song-title {
    font-family: "Sora", sans-serif;
    margin: 0;
    color: var(--text-strong);
    font-size: 1.02rem;
    line-height: 1.35;
}

.song-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    column-gap: 0;
    row-gap: 0.18rem;
}

.song-title-line .song-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.song-title-line [data-role="trending-host"] {
    display: inline-flex;
    flex: 0 0 auto;
}

.song-title-line [data-role="trending-host"]:empty {
    display: none;
}

.song-artist {
    margin-top: 0.3rem;
}

@media (max-width: 720px) {
    .song-title {
        font-size: 0.93rem;
    }

    .song-artist {
        margin-top: 0.18rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 560px) {
    .song-title {
        font-size: 0.85rem;
    }

    .song-artist {
        margin-top: 0.12rem;
        font-size: 0.78rem;
    }
}

.song-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

@media (max-width: 720px) {
    .song-card-head {
        gap: 0.7rem;
    }
}

@media (max-width: 560px) {
    .song-card-head {
        gap: 0.5rem;
    }
}

@keyframes library-added-card-enter {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }
    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.85rem 1.3rem;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, filter 160ms ease;
}

@media (max-width: 720px) {
    .button {
        min-height: 2.65rem;
        padding: 0.62rem 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 560px) {
    .button {
        min-height: 2.35rem;
        padding: 0.5rem 0.85rem;
        font-size: 0.76rem;
    }
}

.button:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    background: var(--surface-hover);
    filter: none;
}

.button:focus-visible,
.nav-pill:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-toggle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(126, 185, 177, 0.16);
}

.button-primary {
    border-color: rgb(from var(--accent) r g b / 0.38);
    background: linear-gradient(135deg, #cf8963, #a55546);
    color: #fef5f5;
    box-shadow:
        0 16px 34px rgba(110, 45, 47, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.button-primary:hover {
    border-color: rgb(from var(--accent) r g b / 0.42);
    background: linear-gradient(135deg, #d9966f, #b35e4e);
    color: #fef5f5;
    box-shadow:
        0 18px 36px rgba(110, 45, 47, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.button-secondary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
        rgba(255, 255, 255, 0.014);
    color: var(--text);
}

.button-ghost {
    background: transparent;
    color: var(--muted-strong);
}

.button-danger {
    border-color: rgba(200, 106, 95, 0.24);
    background:
        linear-gradient(180deg, rgba(200, 106, 95, 0.14), rgba(200, 106, 95, 0.07)),
        rgba(255, 255, 255, 0.012);
    color: #f6d0c9;
}

.button-small {
    min-height: 2.55rem;
    padding: 0.72rem 1rem;
    font-size: 0.88rem;
}

@media (max-width: 720px) {
    .button-small {
        min-height: 2.2rem;
        padding: 0.5rem 0.8rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 560px) {
    .button-small {
        min-height: 1.95rem;
        padding: 0.4rem 0.65rem;
        font-size: 0.7rem;
    }
}

.hold-remove-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hold-remove-button-progress {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, rgba(200, 106, 95, 0.18), rgba(200, 106, 95, 0.34));
    opacity: 1;
    transition: transform 120ms linear;
}

.hold-remove-button.is-holding {
    border-color: rgba(200, 106, 95, 0.28);
    color: #f7ddd8;
}

.hold-remove-button.is-holding .hold-remove-button-progress {
    animation: hold-remove-fill 1.2s linear forwards;
}

.hold-unlock-button.is-holding .hold-remove-button-progress {
    animation-duration: 800ms;
}

.hold-remove-button.is-confirmed .hold-remove-button-progress {
    background: linear-gradient(90deg, rgba(184, 106, 79, 0.24), rgba(200, 157, 108, 0.4));
    transform: scaleX(1);
}

.hold-remove-button-bachata .hold-remove-button-progress {
    background: linear-gradient(90deg, rgba(168, 99, 88, 0.18), rgba(168, 99, 88, 0.42));
}

.hold-remove-button-salsa .hold-remove-button-progress {
    background: linear-gradient(90deg, rgba(176, 143, 68, 0.18), rgba(176, 143, 68, 0.42));
}

.hold-remove-button-merengue .hold-remove-button-progress {
    background: linear-gradient(90deg, rgba(70, 143, 137, 0.18), rgba(70, 143, 137, 0.42));
}

.hold-remove-button-default .hold-remove-button-progress {
    background: linear-gradient(90deg, rgba(140, 148, 161, 0.18), rgba(140, 148, 161, 0.34));
}

.hold-remove-button-label {
    position: relative;
    z-index: 1;
}

@keyframes hold-remove-fill {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border-default);
    background: var(--surface-soft);
    color: var(--muted-strong);
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .pill {
        min-height: 1.75rem;
        padding: 0.25rem 0.65rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 560px) {
    .pill {
        min-height: 1.55rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.64rem;
    }
}

.pill-soft {
    border-color: rgba(184, 106, 79, 0.22);
    background: rgba(184, 106, 79, 0.1);
    color: #dbc39f;
}

/* ---- El color de un género ------------------------------------------------
   playlists.palette.variables_css() genera los selectores y entrega `--gen`
   y `--gen-ink`. Las reglas comunes de abajo los convierten en borde, fondo
   y texto sin duplicar tonos por pantalla. */

.pill-genre {
    border-color: rgba(var(--gen), 0.36);
    background: rgba(var(--gen), 0.22);
    color: var(--gen-ink);
}

/* Va después de .pill-genre a propósito: misma fuerza, gana el de más abajo.
   Un género sin color elegido y sin nombre reconocible se queda neutro, como
   siempre. */
.pill-genre-default {
    border-color: var(--border-default);
    background: var(--surface-soft);
    color: var(--muted-strong);
}

/* Selector que aparece solo cuando nace un género. Las muestras usan la
   misma tinta que las pastillas de la cabina: elegir acá es ver el resultado
   final, no interpretar una paleta desconectada del producto. */
.genre-colour-picker {
    min-width: 0;
    margin: 0.7rem 0 0;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 0.85rem;
    background: rgba(0, 0, 0, 0.17);
}

.genre-colour-picker legend {
    padding: 0 0.25rem;
    color: #ead8c8;
    font: 800 0.72rem "Sora", sans-serif;
}

.genre-colour-picker > p {
    margin: 0 0 0.65rem;
    color: #9f9388;
    font-size: 0.72rem;
    line-height: 1.4;
}

.genre-colour-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.genre-colour-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.3rem;
    padding: 0.32rem 0.62rem 0.32rem 0.38rem;
    border: 1px solid rgba(var(--gen), 0.25);
    border-radius: 999px;
    color: #bcaea2;
    background: rgba(var(--gen), 0.07);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 750;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease,
        transform 150ms ease;
}

.genre-colour-option:hover {
    color: var(--gen-ink);
    background: rgba(var(--gen), 0.13);
    transform: translateY(-1px);
}

.genre-colour-option input {
    position: absolute;
    width: 1px !important;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.genre-colour-option span {
    width: 1.45rem;
    height: 1.45rem;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--gen), 0.75);
    border-radius: 50%;
    background: rgb(var(--gen));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.genre-colour-option b { font: inherit; }

.genre-colour-option:has(input:checked) {
    border-color: rgba(var(--gen), 0.72);
    color: var(--gen-ink);
    background: rgba(var(--gen), 0.2);
    box-shadow: 0 0 0 2px rgba(var(--gen), 0.12);
}

.genre-colour-option:has(input:focus-visible) {
    outline: 2px solid #efb489;
    outline-offset: 2px;
}

.genre-colour-picker.is-compact {
    margin-top: 0.5rem;
    padding: 0.65rem;
}

.genre-colour-picker.is-compact > p { display: none; }
.genre-colour-picker.is-compact .genre-colour-option { padding-right: 0.38rem; }
.genre-colour-picker.is-compact .genre-colour-option b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (max-width: 600px) {
    .genre-colour-options { gap: 0.58rem; }
    .genre-colour-option { min-width: 2.7rem; min-height: 2.7rem; justify-content: center; padding: 0.4rem; }
    .genre-colour-option span { width: 1.65rem; height: 1.65rem; }
    .genre-colour-picker:not(.is-compact) .genre-colour-option b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .genre-colour-option { transition: none; }
}

/* ---- PEDIDO ESPECIAL: Fiestas Patrias -------------------------------------
   La única pastilla que no es un color plano. Es la bandera leída de izquierda
   a derecha: azul con la estrella, el filo blanco, y el rojo ocupando el
   resto. Sin animación aposta: en una lista de treinta canciones, treinta
   pastillas parpadeando es una pesadilla, y ésta ya resalta sola entre tonos
   apagados.

   PARA APAGARLO: se apaga desde playlists/palette.py (ver el comentario de
   FIESTAS_PATRIAS). Estas reglas pueden quedarse acá sin molestar a nadie. */

/* Un esmalte azul con la estrella solitaria y un filo rojo abajo. La bandera
   entera metida de fondo se veía barata y, peor, era frágil: el azul, el filo
   blanco, el relleno y la estrella iban en medidas fijas que tenían que cuadrar
   entre sí, y en el celular la pastilla achica su tipografía y se descuadraban
   todas —la estrella terminaba encima del texto—.

   Acá no hay nada que cuadrar. La estrella es un elemento más de la fila, así
   que nunca se monta sobre el nombre, y todo va en `em`: la pastilla se puede
   achicar o agrandar y se ve igual. Un color de campo y dos acentos, que es
   como se ve cara una insignia. */
.pill-genre.pill-genre-fiestas-patrias {
    gap: 0.42em;
    border-color: rgba(226, 234, 255, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, #22459c 0%, #16306f 100%);
    color: #f2f6ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1.5px 0 rgba(206, 46, 37, 0.92),
        0 2px 9px rgba(16, 34, 82, 0.42);
    letter-spacing: 0.005em;
}

/* La estrella va dibujada, no como carácter: `★` cambia de forma y de peso
   según la tipografía que alcance a cargar, y en una insignia eso se nota. */
.pill-genre.pill-genre-fiestas-patrias::before {
    content: "";
    flex: 0 0 auto;
    width: 0.92em;
    height: 0.92em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 1.8l3.09 6.57 6.91.95-5 5.07L18.18 22 12 18.6 5.82 22 7 14.39l-5-5.07 6.91-.95z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.pill-gold {
    border-color: rgba(184, 106, 79, 0.28);
    background: linear-gradient(135deg, rgba(184, 106, 79, 0.14), rgba(200, 157, 108, 0.1));
    color: #e4ceb0;
}

.pill-success {
    border-color: rgba(122, 145, 132, 0.24);
    background: var(--success-soft);
    color: #d0ddd5;
}

.song-trending-badge,
.pill-trending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 0.96rem;
    margin-left: 0.5rem;
    padding: 0.08rem 0.52rem;
    border: 1px solid rgba(243, 177, 104, 0.44);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(232, 139, 99, 0.18), rgba(210, 168, 91, 0.09)),
        rgba(107, 58, 42, 0.12);
    color: #ffd9bd;
    box-shadow:
        0 0 0 1px rgba(255, 226, 183, 0.025),
        0 3px 9px rgba(226, 128, 85, 0.08);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.015em;
    text-transform: none;
    white-space: nowrap;
}

.pill-warning {
    border-color: rgba(184, 106, 79, 0.3);
    background: rgba(184, 106, 79, 0.12);
    color: #e4ceb0;
}

.pill-active-playlist {
    border-color: rgba(184, 106, 79, 0.38);
    background: rgba(184, 106, 79, 0.18);
    color: #ead4b6;
}

.pill-played {
    border-color: rgba(150, 126, 116, 0.36);
    background: rgba(150, 126, 116, 0.16);
    color: #ddcbc3;
}

.pill-tag {
    border-color: rgba(123, 142, 132, 0.2);
    background: rgba(123, 142, 132, 0.08);
    color: #bcc8c1;
}

.pill-muted {
    color: var(--muted);
}

.top-gap {
    margin-top: 1.25rem;
}

@media (max-width: 720px) {
    .top-gap {
        margin-top: 0.85rem;
    }
}

@media (max-width: 560px) {
    .top-gap {
        margin-top: 0.6rem;
    }
}

.subtle-divider {
    height: 1px;
    margin: 1.5rem 0;
    background: linear-gradient(90deg, transparent, rgba(184, 106, 79, 0.18), transparent);
}

.form-stack {
    display: grid;
    gap: 1rem;
}

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

[data-library-filters].is-live-loading,
[data-library-results].is-live-loading {
    opacity: 0.62;
    transition: opacity 160ms ease;
}

[data-library-filters].is-live-loading {
    pointer-events: none;
}

.field-block {
    display: grid;
    gap: 0.6rem;
}

@media (max-width: 720px) {
    .field-block {
        gap: 0.4rem;
    }
}

@media (max-width: 560px) {
    .field-block {
        gap: 0.3rem;
    }
}

label {
    display: block;
    color: var(--muted-strong);
    font-size: 0.92rem;
    font-weight: 650;
}

.field-label {
    display: block;
    color: var(--muted-strong);
    font-size: 0.92rem;
    font-weight: 650;
}

@media (max-width: 720px) {
    label,
    .field-label {
        font-size: 0.8rem;
        font-weight: 600;
    }
}

form p {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.helptext {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgb(from var(--accent) r g b / 0.12);
    border-radius: 1.1rem;
    background:
        linear-gradient(180deg, rgba(18, 14, 17, 0.94), rgba(10, 10, 12, 0.98));
    padding: 0.92rem 1rem;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

@media (max-width: 720px) {
    input,
    select,
    textarea {
        padding: 0.75rem 0.85rem;
        border-radius: 0.9rem;
        font-size: 0.95rem;
    }
}

input::placeholder,
textarea::placeholder {
    color: #7d746a;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5.5 7.75 4.5 4.5 4.5-4.5' stroke='%23c9ac74' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.8rem;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(126, 185, 177, 0.34);
    background: rgba(12, 16, 21, 0.9);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    margin: 0;
    border-radius: 0.35rem;
    accent-color: var(--accent);
    box-shadow: none;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: 1.15rem;
    background: var(--surface-soft);
}

.checkbox-row label {
    margin: 0;
}

.choice-grid > div {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.choice-grid > div > div {
    min-width: 0;
}

.choice-grid label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 100%;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-default);
    border-radius: 1rem;
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.choice-grid label:hover {
    transform: translateY(-1px);
    border-color: var(--line);
    background: var(--surface-hover);
}

.form-errors,
ul.errorlist {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #e6ada3;
    font-size: 0.9rem;
    line-height: 1.5;
}

.form-errors,
form .errorlist {
    display: grid;
    gap: 0.25rem;
}

.table-card {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 1.55rem;
    background:
        linear-gradient(180deg, rgba(13, 15, 18, 0.99), rgba(8, 10, 13, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 24px 58px rgba(0, 0, 0, 0.24);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 760px;
}

th:nth-child(1),
td:nth-child(1) {
    width: 37%;
}

th:nth-child(2),
td:nth-child(2) {
    width: 12%;
}

th:nth-child(3),
td:nth-child(3) {
    width: 23%;
}

th:nth-child(4),
td:nth-child(4) {
    width: 15%;
}

th:nth-child(5),
td:nth-child(5) {
    width: 6%;
}

th:nth-child(6),
td:nth-child(6) {
    width: 7%;
}

thead {
    background:
        linear-gradient(180deg, rgb(from var(--accent) r g b / 0.025), rgba(255, 255, 255, 0.01)),
        rgba(255, 255, 255, 0.014);
}

th,
td {
    padding: 1rem 1.15rem;
    text-align: left;
    vertical-align: middle;
}

th {
    color: rgba(229, 217, 205, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.table-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.table-sort-link:hover,
.table-sort-link.is-active {
    color: var(--text-strong);
}

.table-sort-indicator {
    font-size: 0.82rem;
    letter-spacing: 0;
}

td {
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    overflow-wrap: anywhere;
}

.library-tag-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.library-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.library-tag-empty {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.2;
}

.song-flags,
.library-song-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

.playlist-song-flags:empty {
    display: none;
}

.library-table-action-cell {
    text-align: center;
    padding-left: 0.8rem;
    padding-right: 1.55rem;
}

.library-icon-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    min-width: 2.45rem;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
        rgba(255, 255, 255, 0.014);
    color: var(--muted-strong);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.library-icon-button:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--text-strong);
}

.library-icon-button svg {
    position: relative;
    z-index: 1;
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.library-tag-edit-button {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    border-color: rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        rgba(255, 255, 255, 0.018);
    color: #c7b9aa;
}

.library-tag-edit-button:hover {
    transform: none;
    border-color: rgba(184, 106, 79, 0.34);
    background:
        linear-gradient(180deg, rgba(184, 106, 79, 0.14), rgba(184, 106, 79, 0.055)),
        rgba(12, 10, 10, 0.9);
    color: #f0d7a4;
    box-shadow:
        0 0 0 4px rgba(184, 106, 79, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.library-tag-edit-button:focus-visible {
    border-color: rgba(184, 106, 79, 0.42);
    color: #f0d7a4;
}

.library-listen-button {
    border-color: rgba(184, 106, 79, 0.18);
    color: #d8b77f;
}

.library-listen-button:hover {
    border-color: rgba(184, 106, 79, 0.34);
    background: rgba(184, 106, 79, 0.08);
    color: #f0d7a4;
}

.library-listen-button svg {
    width: 1.05rem;
    height: 1.05rem;
}

.library-listen-button .listen-play-icon {
    fill: currentColor;
    stroke: none;
}

.library-remove-button {
    border-color: rgba(200, 106, 95, 0.18);
    color: #dfb8b0;
}

tbody tr {
    transition: background 160ms ease;
}

.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    background: rgba(6, 8, 10, 0.74);
    backdrop-filter: blur(14px);
}

body.modal-open .main-shell {
    z-index: 120;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal-panel {
    width: min(100%, 56rem);
    max-height: min(90vh, 58rem);
    overflow: hidden;
    border-radius: 1.6rem;
    border: 1px solid var(--border-default);
    background: var(--surface-strong);
    box-shadow: var(--shadow-xl);
}

.modal-head,
.modal-foot {
    padding: 1.2rem 1.3rem;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-foot {
    border-bottom: 0;
    border-top: 1px solid var(--border-subtle);
}

.modal-body {
    padding: 1.2rem 1.3rem;
    overflow: auto;
    max-height: calc(90vh - 11rem);
}

.demo-player-shell {
    border-radius: 1.45rem;
    border: 1px solid var(--border-default);
    background: var(--surface-softer);
    overflow: hidden;
}

.demo-player-shell iframe {
    display: block;
    width: 100%;
    min-height: 22rem;
    border: 0;
}

.demo-player-shell audio {
    display: block;
    width: 100%;
}

.tag-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.classification-editor-section {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.modal-section-label {
    margin: 0 0 0.75rem;
    color: var(--muted-strong);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* La casilla se alinea con el título y no con el centro del bloque: cuando la
   explicación ocupa dos líneas, centrarla la dejaba flotando a media altura,
   sin apuntar a nada. */
.classification-trending-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-height: 3.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(215, 138, 99, 0.2);
    border-radius: 1rem;
    background: rgba(215, 138, 99, 0.06);
    cursor: pointer;
}

.classification-trending-choice > input[type="checkbox"] {
    margin-top: 0.12rem;
}

.classification-trending-choice span {
    display: grid;
    gap: 0.22rem;
}

.classification-trending-choice strong {
    color: var(--text-strong);
    font-size: 0.95rem;
    line-height: 1.2;
}

.classification-trending-choice small {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.tag-editor-choice {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-default);
    border-radius: 1rem;
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.tag-editor-choice:hover {
    transform: translateY(-1px);
    border-color: var(--line);
    background: var(--surface-hover);
}

.modal-head-row,
.modal-foot-row {
    display: grid;
    gap: 1rem;
    align-items: center;
}

.modal-head-row {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
}

.modal-foot-row {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
}

.modal-close-button {
    width: 2.8rem;
    min-width: 2.8rem;
    padding: 0;
}

.modal-confirm-copy {
    min-width: 0;
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.modal-foot .action-row {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: max-content;
}

.modal-foot .action-row .button,
.modal-foot .action-row a,
.modal-foot .action-row form {
    flex: 0 0 auto;
    width: auto;
}

@media (max-width: 860px) {
    .library-completion-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .library-completion-actions,
    .library-completion-actions .button,
    .library-completion-actions form {
        width: 100%;
    }

    .modal-foot-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .modal-foot .action-row {
        justify-content: flex-end;
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .modal-backdrop {
        place-items: center;
        padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .modal-panel {
        width: min(100%, 38rem);
        max-height: calc(100svh - 1.5rem);
        display: flex;
        flex-direction: column;
        border-radius: 1.25rem;
    }

    .modal-head,
    .modal-foot {
        padding: 0.85rem 0.95rem;
    }

    .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        padding: 0.9rem 0.95rem;
    }

    .modal-head-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.75rem;
    }

    .modal-head .section-title {
        font-size: clamp(1.35rem, 7vw, 2rem);
        line-height: 1.04;
    }

    .modal-head .song-artist,
    .modal-head .section-copy {
        margin-top: 0.35rem;
        font-size: 0.86rem;
        line-height: 1.45;
    }

    .modal-close-button,
    .modal-close {
        width: 2.35rem;
        min-width: 2.35rem;
        height: 2.35rem;
    }

    .tag-editor-grid {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .tag-editor-choice {
        min-height: 3.05rem;
        padding: 0.75rem 0.82rem;
        border-radius: 0.95rem;
        font-size: 0.92rem;
    }

    .tag-editor-choice input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
    }

    .modal-foot-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .modal-confirm-copy {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .modal-foot .action-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0.55rem;
    }

    .modal-foot .action-row .button,
    .modal-foot .action-row a,
    .modal-foot .action-row form {
        width: 100%;
        min-width: 0;
    }

    .modal-foot .action-row .button {
        min-height: 2.35rem;
        padding: 0.55rem 0.7rem;
        font-size: 0.78rem;
    }
}

tbody tr:hover {
    background:
        linear-gradient(90deg, rgb(from var(--accent) r g b / 0.06), rgba(255, 255, 255, 0.015) 34%, transparent 82%);
}

.table-actions form {
    margin: 0;
}

.mobile-card-list {
    display: grid;
    gap: 1rem;
}

.empty-state {
    padding: 1.6rem;
    border: 1px dashed rgba(184, 106, 79, 0.24);
    border-radius: 1.5rem;
    background: rgba(242, 237, 229, 0.016);
}

.empty-state-inline {
    margin: 0.75rem;
}

.empty-state-small {
    padding: 1.1rem 1.2rem;
    border-radius: 1.15rem;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.auth-layout {
    min-height: calc(100vh - 13rem);
    display: grid;
    place-items: center;
    padding: 1.5rem 0 0.5rem;
}

.auth-panel {
    width: min(100%, 31rem);
    padding: 1.8rem 1.8rem 1.65rem;
}

.auth-head {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.auth-copy {
    display: grid;
    gap: 0.55rem;
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 1.95rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(123, 142, 132, 0.2);
    background: rgba(123, 142, 132, 0.08);
    color: var(--copper-pale-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.auth-copy .page-title {
    margin-top: 0.05rem;
}

.auth-copy-text {
    margin-top: 0;
    max-width: 28ch;
    color: var(--muted-strong);
}

.auth-logo {
    width: clamp(6.4rem, 11vw, 7.5rem);
    height: auto;
    justify-self: center;
    object-fit: contain;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
}

.auth-form {
    margin-top: 1.5rem;
}

.auth-form p + p {
    margin-top: 0.2rem;
}

.auth-actions {
    margin-top: 0.35rem;
    justify-content: flex-start;
}

.auth-actions .button {
    min-width: 0;
}

.auth-actions .button-primary {
    min-width: 7.4rem;
}

body.account-page .site-footer {
    display: none;
}

.account-password-panel {
    width: min(100%, 32rem);
    padding: clamp(1.25rem, 2.1vw, 1.65rem);
    background:
        radial-gradient(circle at 0% 0%, rgba(110, 45, 47, 0.16), transparent 31%),
        linear-gradient(90deg, rgb(from var(--accent) r g b / 0.045), transparent 24%),
        linear-gradient(135deg, rgba(15, 12, 14, 0.98), rgba(10, 11, 13, 0.98) 62%, rgba(7, 8, 10, 0.98));
    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.016),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.account-password-head {
    padding-bottom: 0.1rem;
}

.account-password-panel .page-title {
    max-width: 100%;
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.account-password-panel .auth-copy-text {
    max-width: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

.account-password-panel .auth-form {
    gap: 0.72rem;
    margin-top: 1.05rem;
}

.account-password-panel .field-block {
    gap: 0.38rem;
}

.account-password-panel label {
    font-size: 0.84rem;
}

.password-reveal-field {
    position: relative;
    display: grid;
}

.password-reveal-field input {
    min-height: 2.7rem;
    padding-right: 3.2rem;
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(13, 10, 12, 0.98), rgba(8, 8, 10, 0.98));
}

.password-reveal-button {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    transform: translateY(-50%);
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.password-reveal-button:hover,
.password-reveal-button:focus-visible {
    border-color: var(--border-default);
    background: var(--surface-hover);
    color: var(--text-strong);
    outline: none;
}

.password-reveal-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-reveal-button .password-eye-closed,
.password-reveal-field.is-visible .password-eye-open {
    display: none;
}

.password-reveal-field.is-visible .password-eye-closed {
    display: block;
}

.account-password-panel .errorlist {
    padding-left: 0.1rem;
    font-size: 0.82rem;
}

.account-password-panel .auth-actions {
    gap: 0.6rem;
    margin-top: 0.35rem;
}

.account-password-panel .auth-actions .button {
    min-height: 2.65rem;
    padding: 0.7rem 1.15rem;
}

.account-password-panel .account-password-back {
    min-height: 2.5rem;
    padding-inline: 0.95rem;
    color: var(--muted-strong);
}

.platform-admins-shell {
    gap: 1.25rem;
}

.platform-admins-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.platform-admins-layout {
    display: grid;
    grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1.22fr);
    gap: 1.25rem;
    align-items: start;
}

.platform-admins-layout > * {
    min-width: 0;
}

.workspace-choice-grid {
    margin-top: 0.15rem;
}

.admin-card-list {
    display: grid;
    gap: 0.85rem;
}

.admin-card {
    display: grid;
    gap: 0.95rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-default);
    border-radius: 1.15rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.01)),
        rgba(5, 6, 8, 0.26);
}

.admin-card-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-card h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-strong);
    font-size: 1.05rem;
}

.admin-card-tags {
    margin-top: 0.55rem;
    gap: 0.45rem;
}

.admin-workspaces {
    display: grid;
    gap: 0.25rem;
}

.admin-workspaces span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-workspaces p {
    margin: 0;
    color: var(--muted-strong);
    line-height: 1.5;
}

.admin-card-actions {
    display: grid;
    gap: 0.75rem;
}

.admin-card-actions form {
    margin: 0;
}

.site-footer {
    position: relative;
    z-index: 1;
    padding: 0 0 2rem;
}

.site-footer-inner {
    border: 1px solid rgb(from var(--accent) r g b / 0.08);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at top left, rgb(from var(--accent) r g b / 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008)),
        rgba(7, 8, 10, 0.72);
    color: var(--muted);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.site-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.4rem;
    align-items: center;
    padding: 1.45rem 1.55rem;
}

.site-footer-copy {
    min-width: 0;
    max-width: 42rem;
}

.site-footer-eyebrow {
    color: var(--accent-soft);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.site-footer-message {
    margin-top: 0.55rem;
    color: var(--muted);
    line-height: 1.65;
}

.site-footer-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    min-width: min(100%, 31rem);
}

.site-footer-contact-card {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.8rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgb(from var(--accent) r g b / 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.024);
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.site-footer-contact-card:hover {
    transform: translateY(-1px);
    border-color: rgba(184, 106, 79, 0.28);
    background: rgba(184, 106, 79, 0.07);
}

.site-footer-contact-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.8rem;
    color: #e4ceb0;
    background: rgba(184, 106, 79, 0.12);
}

.site-footer-contact-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer-contact-card:nth-child(2) .site-footer-contact-icon svg path:nth-child(2) {
    fill: currentColor;
    stroke: none;
}

.site-footer-contact-copy {
    min-width: 0;
}

.site-footer-contact-label {
    display: block;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.site-footer-contact-value {
    display: block;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    color: var(--text-strong);
    font-weight: 700;
    line-height: 1.35;
}

.site-footer-bottom {
    border-top: 1px solid rgb(from var(--accent) r g b / 0.08);
    padding: 0.85rem 1.55rem;
}

.site-footer-signature {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.admin-brand-logo {
    width: auto;
    height: 2.2rem;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.035);
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(184, 106, 79, 0.82), rgba(200, 157, 108, 0.78)) padding-box;
}

@media (max-width: 1180px) {
    .hero-home,
    .home-welcome,
    .split-layout,
    .split-tight {
        grid-template-columns: 1fr;
    }

    .home-welcome-copy {
        min-height: 0;
    }

    .home-title {
        max-width: 17ch;
    }

    .filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer-main {
        grid-template-columns: 1fr;
    }

    .site-footer-contact-list {
        min-width: 0;
    }

    .platform-admins-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .topbar-inner {
        min-height: 5.2rem;
    }

    .topbar-desktop {
        display: none;
    }

    .mobile-toggle,
    .mobile-panel {
        display: block;
    }

    .hero-home .page-title {
        max-width: 14ch;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .field-grid,
    .inner-grid,
    .helper-grid,
    .category-grid,
    .recipe-grid,
    .summary-grid,
    .summary-grid-compact {
        grid-template-columns: 1fr;
    }

    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .toast-stack {
        right: 0.85rem;
        left: 0.85rem;
        bottom: max(0.85rem, env(safe-area-inset-bottom));
        width: auto;
    }

    .toast {
        padding: 0.9rem 0.95rem 0.95rem 1rem;
        border-radius: 1rem;
        transform: translateY(0.9rem) scale(0.985);
        transition: opacity 220ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease;
    }

    .toast-visible {
        transform: translateY(0) scale(1);
    }

    .toast-exit {
        transform: translateY(0.7rem) scale(0.985);
    }

    .toast::after {
        top: 0.85rem;
        right: 0.85rem;
    }

    .toast-body p {
        max-width: none;
        font-size: 0.92rem;
    }
}

@media (max-width: 720px) {
    .shell {
        width: min(calc(100% - 1.25rem), var(--shell));
    }

    .main-shell {
        padding-top: 1.5rem;
        padding-bottom: 4rem;
    }

    .panel,
    .workspace-card,
    .hero-main,
    .hero-side {
        padding: 1.25rem;
    }

    .home-welcome-copy,
    .home-public-panel,
    .home-section {
        padding: 1.25rem;
    }

    .home-title {
        font-size: 2.75rem;
    }

    .home-lead {
        font-size: 1rem;
    }

    .home-flow-grid,
    .site-footer-contact-list {
        grid-template-columns: 1fr;
    }

    .site-footer-main {
        padding: 1.25rem;
    }

    .site-footer-bottom {
        padding: 0.85rem 1.25rem;
    }

    .metric-card,
    .category-card,
    .history-card,
    .catalog-card,
    .slot-card,
    .song-card {
        padding: 1rem;
    }

    .platform-admins-head {
        display: grid;
    }

    .workspace-brand-large {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-row {
        width: 100%;
    }

    .action-row .button,
    .action-row form {
        flex: 1 1 auto;
    }

    .action-row form .button {
        width: 100%;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .song-card-head {
        flex-direction: column;
    }

    .library-added-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .classification-row-main {
        flex-direction: column;
    }

    .classification-position {
        min-width: 0;
    }

    .pagination {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .metric-card,
    .category-card,
    .history-card,
    .catalog-card,
    .slot-card,
    .song-card {
        padding: 0.8rem;
    }
}

@media (max-width: 560px) {
    .page-title {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .brand-badge {
        width: 3.35rem;
        height: 3.35rem;
        border-radius: 1.1rem;
    }

    .brand-mark {
        width: 2.15rem;
        height: 2.15rem;
    }

    .brand-copy strong {
        font-size: 1.08rem;
    }

    .brand-copy small {
        font-size: 0.62rem;
        letter-spacing: 0.17em;
    }

    .workspace-grid,
    .history-grid,
    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .home-title {
        font-size: 2.35rem;
    }

    .home-workspace-brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .workspace-card-link.home-workspace-card {
        flex-direction: column;
        align-items: stretch;
    }

    .home-card-arrow {
        margin-top: 1rem;
        margin-left: 0;
        align-self: flex-end;
    }

    .button,
    .user-badge {
        width: 100%;
    }

    .auth-panel {
        width: min(100%, 33rem);
        padding: 1.35rem 1.2rem 1.2rem;
    }

    .auth-head {
        gap: 0.85rem;
    }

    .auth-actions {
        width: 100%;
    }

    .auth-actions .button,
    .auth-actions a {
        flex: 1 1 100%;
    }

    .account-password-panel {
        padding: 1rem 0.95rem;
        border-radius: 1.2rem;
    }

    body.account-page .main-shell {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    body.account-page .auth-layout {
        min-height: auto;
        place-items: start center;
        padding: 0.35rem 0 0;
    }

    .account-password-panel .auth-copy {
        gap: 0.4rem;
    }

    .account-password-panel .auth-kicker {
        min-height: 1.6rem;
        padding: 0.25rem 0.65rem;
        font-size: 0.62rem;
        letter-spacing: 0.18em;
    }

    .account-password-panel .page-title {
        font-size: clamp(1.55rem, 7vw, 1.95rem);
        line-height: 1.08;
    }

    .account-password-panel .auth-copy-text {
        font-size: 0.82rem;
        line-height: 1.45;
        white-space: normal;
    }

    .account-password-panel .auth-form {
        gap: 0.62rem;
        margin-top: 0.9rem;
    }

    .account-password-panel .field-block {
        gap: 0.34rem;
    }

    .account-password-panel label {
        font-size: 0.78rem;
    }

    .password-reveal-field input {
        min-height: 2.55rem;
        padding-right: 2.85rem;
        border-radius: 0.9rem;
    }

    .password-reveal-button {
        right: 0.35rem;
        width: 2rem;
        height: 2rem;
    }

    .account-password-panel .auth-actions {
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0.35rem;
    }

    .account-password-panel .auth-actions .button-primary {
        flex: 1 1 100%;
        width: 100%;
        min-height: 2.55rem;
        font-size: 0.84rem;
    }

    .account-password-panel .auth-actions .account-password-back {
        flex: 0 0 auto;
        width: auto;
        min-height: 2.1rem;
        padding: 0.45rem 0.75rem;
        border-color: transparent;
        background: transparent;
        font-size: 0.78rem;
    }

    .choice-grid > div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .topbar {
        overflow: visible;
        background: rgba(7, 7, 8, 0.94);
    }

    .topbar-inner {
        justify-content: space-between;
        min-height: 4.25rem;
        padding: 0.45rem 0;
    }

    .mobile-panel {
        position: absolute;
        top: calc(100% + 0.45rem);
        left: 0;
        right: 0;
        z-index: 45;
        padding: 0.55rem;
        border: 1px solid var(--border-default);
        border-radius: 1.2rem;
        background:
            linear-gradient(180deg, rgba(17, 16, 18, 0.99), rgba(7, 8, 10, 0.99));
        box-shadow: var(--shadow-lg);
    }

    .mobile-nav-list {
        gap: 0.45rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mobile-nav-link {
        min-height: 2.65rem;
        padding: 0 0.9rem;
        font-size: 0.92rem;
    }

    .mobile-panel-actions {
        margin-top: 0.45rem;
    }

    /* ------------------------------------------------------------------
       Navegación pública en celular.
       La casa del bailarín tiene tres puertas y nada más: esconderlas tras
       un menú cuesta un toque extra y borra dónde está parada la persona.
       Por eso aquí el panel deja de ser desplegable y se vuelve una fila
       de píldoras fija bajo el nombre del evento, como en el mockup.
       ------------------------------------------------------------------ */
    .topbar-publico .mobile-panel {
        display: block;
        position: static;
        padding: 0 0 0.5rem;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        animation: none;
    }

    .topbar-publico .mobile-nav-list {
        display: flex;
        gap: 0.4rem;
        /* si el evento tuviera más puertas, se arrastran en vez de apilarse */
        overflow-x: auto;
        scrollbar-width: none;
    }

    .topbar-publico .mobile-nav-list::-webkit-scrollbar {
        display: none;
    }

    .topbar-publico .mobile-nav-link {
        justify-content: center;
        flex: 0 0 auto;
        min-height: 2.5rem;
        padding: 0 0.95rem;
        border-color: var(--border-default);
        font-size: 0.86rem;
        white-space: nowrap;
    }

    .topbar-publico .mobile-nav-link-active {
        border-color: rgb(from var(--accent) r g b / 0.36);
    }

    .topbar-publico .topbar-inner {
        min-height: 3.9rem;
        padding-bottom: 0.2rem;
    }

    /* La navegación pública baja a la fila de píldoras, pero la cuenta no.
       Vive dentro de `topbar-desktop`, que la regla general móvil oculta
       completa. Se recupera solo su esquina para que entrar, configurar o
       salir siga estando disponible en cualquier ancho. */
    .topbar-publico .topbar-desktop {
        display: flex;
        flex: 0 0 auto;
        gap: 0;
    }

    .topbar-publico .topbar-desktop .nav-row {
        display: none;
    }

    .topbar-publico .topbar-actions {
        flex-wrap: nowrap;
    }
}

@media (max-width: 720px) {
    body.library-page .main-shell {
        padding-top: 0.95rem;
    }

    body.library-page .page-stack,
    body.library-page .library-results-stack {
        gap: 1rem;
    }

    body.library-page .panel-feature {
        padding: 1.05rem;
        border-radius: 1.55rem;
    }

    body.library-page .panel:not(.panel-feature) {
        padding: 1rem;
        border-radius: 1.35rem;
    }

    body.library-page .eyebrow {
        margin-bottom: 0.35rem;
        font-size: 0.62rem;
        letter-spacing: 0.22em;
    }

    body.library-page .page-title {
        font-size: clamp(2rem, 9.8vw, 2.8rem);
        line-height: 0.96;
    }

    body.library-page .page-copy,
    body.library-page .section-copy {
        margin-top: 0.65rem;
        font-size: 0.88rem;
        line-height: 1.6;
    }

    body.library-page .section-title {
        font-size: clamp(1.35rem, 6.8vw, 1.85rem);
    }

    body.library-page .summary-grid-compact {
        gap: 0.65rem;
    }

    body.library-page .metric-card {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.18rem 0.8rem;
        align-items: end;
        padding: 0.78rem 0.85rem;
        border-radius: 1rem;
    }

    body.library-page .metric-label {
        grid-column: 1 / -1;
        font-size: 0.58rem;
        letter-spacing: 0.18em;
    }

    body.library-page .metric-value {
        margin-top: 0;
        font-size: 1.7rem;
    }

    body.library-page .metric-meta {
        grid-column: 1 / -1;
        padding-top: 0.1rem;
        font-size: 0.72rem;
        line-height: 1.4;
    }

    body.library-page .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.52rem;
        padding: 0.65rem;
        border-radius: 1rem;
    }

    body.library-page .filter-grid .field-block:first-child,
    body.library-page .filter-actions {
        grid-column: 1 / -1;
    }

    body.library-page .field-block {
        gap: 0.28rem;
    }

    body.library-page label {
        color: var(--muted);
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    body.library-page input,
    body.library-page select {
        min-height: 2.35rem;
        padding: 0.52rem 0.75rem;
        border-radius: 0.78rem;
        font-size: 0.84rem;
    }

    body.library-page select {
        background-position: right 0.65rem center;
        background-size: 1rem;
        padding-right: 2rem;
    }

    body.library-page .filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        align-items: stretch;
    }

    body.library-page .filter-actions .button {
        width: 100%;
        min-height: 2.25rem;
        padding: 0.48rem 0.65rem;
        font-size: 0.76rem;
    }

    body.library-page .field-block-toggle {
        align-self: end;
    }

    body.library-page .trending-filter-chip {
        width: 100%;
        min-height: 2.28rem;
        padding: 0.46rem 0.68rem;
        border-radius: 999px;
        font-size: 0.74rem;
    }

    body.library-page .mobile-card-list {
        display: grid;
        gap: 0.65rem;
    }

    body.library-page .library-song-card {
        padding: 0.82rem;
        border-radius: 1rem;
        border-color: rgba(255, 255, 255, 0.07);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.008)),
            rgba(8, 10, 13, 0.76);
        box-shadow:
            0 10px 22px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.018);
    }

    body.library-page .library-song-main {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.7rem;
    }

    body.library-page .library-song-copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    body.library-page .library-song-card .song-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.86rem;
        line-height: 1.26;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body.library-page .library-song-card .song-artist {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 0.18rem;
        font-size: 0.73rem;
        line-height: 1.35;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body.library-page .library-song-controls {
        display: flex;
        flex: 0 0 auto;
        gap: 0.35rem;
    }

    body.library-page .library-song-controls form {
        margin: 0;
    }

    body.library-page .library-song-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.32rem;
        margin-top: 0.55rem;
    }

    body.library-page .library-song-card .pill {
        min-height: 1.45rem;
        padding: 0.18rem 0.48rem;
        font-size: 0.58rem;
    }

    body.library-page .library-song-card .library-icon-button {
        width: 2.05rem;
        height: 2.05rem;
        min-width: 2.05rem;
    }

    body.library-page .library-song-card .library-tag-edit-button {
        width: 1.45rem;
        height: 1.45rem;
        min-width: 1.45rem;
    }

    body.library-page .library-song-card .library-icon-button svg {
        width: 0.9rem;
        height: 0.9rem;
    }

    body.library-page .catalog-grid {
        gap: 0.7rem;
    }

    body.library-page .catalog-card {
        min-height: 0;
        gap: 0.7rem;
        padding: 0.82rem;
        border-radius: 1rem;
    }

    body.library-page .catalog-card .song-title {
        font-size: 0.86rem;
        line-height: 1.26;
    }

    body.library-page .catalog-card .song-artist {
        margin-top: 0.2rem;
        font-size: 0.74rem;
        line-height: 1.4;
    }

    body.library-page .catalog-card-tags {
        gap: 0.32rem;
    }

    body.library-page .catalog-card .pill {
        min-height: 1.45rem;
        padding: 0.18rem 0.48rem;
        font-size: 0.58rem;
    }

    body.library-page .catalog-card-actions {
        display: grid;
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
        gap: 0.45rem;
    }

    body.library-page .catalog-card-actions form,
    body.library-page .catalog-card-actions .button {
        width: 100%;
        min-width: 0;
    }

    body.library-page .catalog-card-actions form:only-child {
        grid-column: 1 / -1;
    }

    body.library-page .catalog-card-actions .button {
        min-height: 2.2rem;
        padding: 0.48rem 0.6rem;
        font-size: 0.72rem;
    }

    body.library-page .pagination {
        gap: 0.45rem;
        margin-top: 1rem;
    }

    body.library-page .mobile-pagination {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.6rem;
        align-items: center;
        margin-top: 0.95rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.055);
    }

    body.library-page .mobile-pagination-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2rem;
        min-width: 3.6rem;
        padding: 0.3rem 0.65rem;
        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.018);
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 800;
    }

    body.library-page .mobile-pagination-actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    body.library-page .mobile-page-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.45rem;
        padding: 0.58rem 0.72rem;
        border: 1px solid var(--border-default);
        border-radius: 999px;
        color: var(--text);
        font-size: 0.78rem;
        font-weight: 800;
        line-height: 1;
    }

    body.library-page .mobile-page-button-primary {
        border-color: rgb(from var(--accent) r g b / 0.34);
        background: linear-gradient(135deg, rgba(207, 137, 99, 0.92), rgba(165, 85, 70, 0.92));
        color: #1b0f0c;
    }

    body.library-page .mobile-page-button-secondary {
        background: rgba(255, 255, 255, 0.018);
        color: var(--muted-strong);
    }
}

@media (max-width: 560px) {
    .topbar .shell {
        width: min(calc(100% - 1rem), var(--shell));
    }

    .topbar-inner {
        min-height: 3.65rem;
        padding: 0.34rem 0;
        gap: 0.55rem;
    }

    .brand-lockup {
        flex: 1 1 auto;
        gap: 0.65rem;
        overflow: hidden;
    }

    .brand-badge {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.85rem;
    }

    .brand-mark {
        width: 1.72rem;
        height: 1.72rem;
    }

    .brand-copy strong {
        overflow: hidden;
        font-size: 0.98rem;
        line-height: 1.05;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-copy small {
        overflow: hidden;
        margin-top: 0.08rem;
        font-size: 0.52rem;
        letter-spacing: 0.14em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-toggle {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 0.85rem;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
    }

    .mobile-toggle span {
        width: 1.05rem;
    }

    .mobile-toggle span:nth-child(1) {
        top: 0.82rem;
    }

    .mobile-toggle span:nth-child(2) {
        top: 1.22rem;
    }

    .mobile-toggle span:nth-child(3) {
        top: 1.62rem;
    }

    body.mobile-menu-open .mobile-toggle span:nth-child(1) {
        transform: translateX(-50%) translateY(0.4rem) rotate(45deg);
    }

    body.mobile-menu-open .mobile-toggle span:nth-child(3) {
        transform: translateX(-50%) translateY(-0.4rem) rotate(-45deg);
    }

    .mobile-nav-list {
        padding: 0;
        border-radius: 0;
    }

    .mobile-nav-link {
        min-height: 2.45rem;
        padding: 0 0.78rem;
        font-size: 0.86rem;
    }

    body.library-page .main-shell {
        padding-top: 0.72rem;
    }

    body.library-page .panel-feature,
    body.library-page .panel:not(.panel-feature) {
        padding: 0.9rem;
        border-radius: 1.25rem;
    }

    body.library-page .page-title {
        font-size: clamp(1.9rem, 9.2vw, 2.45rem);
    }

    body.library-page .page-copy,
    body.library-page .section-copy {
        font-size: 0.82rem;
    }

    body.library-page .filter-grid {
        gap: 0.46rem;
        padding: 0.58rem;
    }

    body.library-page input,
    body.library-page select {
        min-height: 2.18rem;
        padding-top: 0.46rem;
        padding-bottom: 0.46rem;
        font-size: 0.8rem;
    }

    body.library-page .mobile-card-list {
        display: grid;
        gap: 0.58rem;
    }

    body.library-page .mobile-pagination {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    body.library-page .mobile-pagination-count {
        width: fit-content;
    }

    body.library-page .catalog-card {
        gap: 0.65rem;
    }

    body.library-page .catalog-card-actions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    body.library-page .trending-filter-chip {
        min-height: 2.18rem;
        padding: 0.48rem 0.65rem;
        font-size: 0.74rem;
    }

    body.library-page .trending-filter-chip input {
        width: 100%;
        height: 100%;
        padding: 0;
    }

    .song-trending-badge,
    .pill-trending {
        min-height: 0.92rem;
        margin-left: 0.42rem;
        padding: 0.07rem 0.44rem;
        font-size: 0.56rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01ms !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Nav de cabina por tareas — Fase 2b ===== */
/* Escritorio: las 4 tareas en la barra superior (rediseño coherente con la cabina). */
.topbar-desktop .cabina-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cabina-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.8rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--muted);
    font-weight: 650;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.cabina-nav-item svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 1.7;
    flex-shrink: 0;
}

.cabina-nav-badge {
    position: absolute;
    top: -0.32rem;
    right: -0.18rem;
    display: inline-grid;
    place-items: center;
    min-width: 1.16rem;
    height: 1.16rem;
    padding: 0 0.27rem;
    border: 2px solid var(--bg);
    border-radius: 999px;
    background: var(--accent-strong);
    color: #110b09;
    font: 800 0.64rem/1 "Manrope", sans-serif;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
}

.cabina-nav-item:hover {
    color: var(--text);
    border-color: var(--border-default);
    background: var(--surface-soft);
}

.cabina-nav-item.is-on {
    color: var(--text-strong);
    border-color: rgb(from var(--accent) r g b / 0.24);
    background:
        linear-gradient(180deg, rgb(from var(--accent) r g b / 0.13), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.026);
}

.cabina-nav-item.is-on svg {
    color: var(--accent-strong);
    stroke-width: 2;
}

/* Móvil: dock inferior fijo, fiel al mockup «La casa del organizador» (.cb-tabs). */
.cabina-tabs-dock,
.cabina-tabs-spacer {
    display: none;
}

@media (max-width: 980px) {
    .cabina-tabs-dock {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        background: rgba(8, 6, 7, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgb(from var(--accent) r g b / 0.22);
        padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    }

    .cabina-tabs-dock .cabina-nav {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
    }

    .cabina-tabs-dock .cabina-nav-item {
        flex-direction: column;
        gap: 4px;
        min-height: 0;
        padding: 6px 2px 5px;
        border: none;
        border-radius: 12px;
        background: none;
        color: #958c84;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .cabina-tabs-dock .cabina-nav-item svg {
        width: 19px;
        height: 19px;
        stroke-width: 1.7;
    }

    .cabina-tabs-dock .cabina-nav-badge {
        top: 2px;
        right: calc(50% - 21px);
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 9px;
    }

    .cabina-tabs-dock .cabina-nav-item:hover {
        color: var(--muted);
        background: none;
        border: none;
    }

    .cabina-tabs-dock .cabina-nav-item.is-on {
        color: var(--text-strong);
        background: rgba(207, 137, 99, 0.1);
        border: none;
    }

    .cabina-tabs-dock .cabina-nav-item.is-on svg {
        color: var(--accent-strong);
        stroke-width: 2;
    }

    .cabina-tabs-dock .cabina-nav-item:focus-visible {
        outline: 2px solid var(--accent-strong);
        outline-offset: -2px;
    }

    .cabina-tabs-spacer {
        display: block;
        height: calc(60px + env(safe-area-inset-bottom));
    }
}

/* ===== Estado de la jornada — Fase 2b (Paso 0: 5 estados explícitos) ===== */
/* Valores replicados del mockup "La casa del organizador" (.estado / .estado.espera). */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: .08em;
    font-weight: 800;
    text-transform: uppercase;
    color: #d2eee5;
    background: rgba(95, 143, 122, .14);
    border: 1px solid rgba(95, 158, 138, .36);
    border-radius: 999px;
    padding: 5px 11px;
}

.estado .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 7px rgba(95, 143, 122, .85);
}

.estado.espera {
    color: #e7d3c4;
    background: rgb(from var(--accent) r g b / .12);
    border-color: rgb(from var(--accent) r g b / .36);
}

.estado.espera .dot {
    background: var(--accent-strong);
    box-shadow: 0 0 7px rgba(215, 138, 99, .7);
}

.estado.vivo .dot {
    animation: estado-vivo-pulse 1.8s ease-out infinite;
}

@keyframes estado-vivo-pulse {
    0% { box-shadow: 0 0 0 0 rgba(95, 143, 122, .55); }
    70% { box-shadow: 0 0 0 6px rgba(95, 143, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(95, 143, 122, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .estado.vivo .dot {
        animation: none;
    }
}

/* ---- La nota del que está construyendo esto -------------------------------
   El «Invítame a un café» no cobra: pide tiempo. Abre esta nota, que dice que
   Wurlitzer lo hace una persona sola, se disculpa por lo que falta y deja un
   WhatsApp para quien quiera ayudar.

   Vive acá y no dentro de una pantalla porque la usan varias: la puerta de
   «todavía no hay jornada» y cualquier rincón en obra. El texto está una sola
   vez en playlists/includes/apoyo.html, así el número no queda escrito en dos
   lugares que después no coinciden. */

.apoyo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: center;
}

.apoyo-taza {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgb(from var(--accent) r g b / 0.26);
    background: rgb(from var(--accent) r g b / 0.1);
    color: var(--accent-strong);
}

.apoyo-taza svg {
    width: 1.2rem;
    height: 1.2rem;
}

.apoyo-titulo {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-strong);
}

.apoyo-texto {
    margin: 0;
    max-width: 24rem;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--muted);
}

/* El verde es de WhatsApp, no de la casa. Acá reconocer la marca de un vistazo
   vale más que la coherencia del color: el botón tiene que gritar «esto abre
   WhatsApp» antes de que nadie lea la etiqueta. */
.apoyo-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.85rem;
    margin-top: 0.6rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid rgba(37, 211, 102, 0.34);
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.12);
    font-size: 0.83rem;
    font-weight: 800;
    color: #a8e9c1;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.apoyo-boton:hover,
.apoyo-boton:focus-visible {
    border-color: rgba(37, 211, 102, 0.55);
    background: rgba(37, 211, 102, 0.2);
    color: #d6f8e4;
}

.apoyo-boton svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

.apoyo-pie {
    margin: 0.15rem 0 0;
    font-size: 0.73rem;
    line-height: 1.45;
    color: #8e857c;
}

/* ---- La nota, cuando llega como modal ---- */

.apoyo-modal {
    width: min(100% - 2rem, 25rem);
    max-height: calc(100dvh - 2.5rem);
    padding: 1.75rem 1.4rem 1.5rem;
    border: 1px solid rgba(241, 232, 219, 0.1);
    border-radius: 20px;
    background: #121013;
    color: var(--text-strong);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
    overflow: auto;
    overscroll-behavior: contain;
}

.apoyo-modal::backdrop {
    background: rgba(6, 5, 6, 0.72);
    backdrop-filter: blur(3px);
}

/* Entra y sale con calma, nunca de golpe. El cierre lo espera el guion: si se
   llamara close() de una, el modal desaparecería antes de animarse. */
.apoyo-modal[open] {
    animation: apoyo-entra 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.apoyo-modal[open]::backdrop {
    animation: apoyo-vela 240ms ease;
}

.apoyo-modal.se-va {
    animation: apoyo-sale 180ms ease forwards;
}

.apoyo-modal.se-va::backdrop {
    animation: apoyo-vela 180ms ease reverse forwards;
}

@keyframes apoyo-entra {
    from { opacity: 0; transform: translateY(0.9rem) scale(0.97); }
}

@keyframes apoyo-sale {
    to { opacity: 0; transform: translateY(0.5rem) scale(0.98); }
}

@keyframes apoyo-vela {
    from { opacity: 0; }
}

.apoyo-cerrar {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8e857c;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.apoyo-cerrar svg {
    width: 0.75rem;
    height: 0.75rem;
}

.apoyo-cerrar:hover,
.apoyo-cerrar:focus-visible {
    color: var(--text-strong);
    background: rgba(241, 232, 219, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .apoyo-modal[open],
    .apoyo-modal[open]::backdrop,
    .apoyo-modal.se-va,
    .apoyo-modal.se-va::backdrop {
        animation-duration: 1ms;
    }
}

/* ============================================================
   PIE LEGAL · prefijo pie-
   Una sola línea, apagada, al final de las pantallas públicas.
   Tiene que estar: se llega a Términos y Privacidad desde
   cualquier parte. No tiene que llamar la atención: nadie
   entra a Wurlitzer a leer un pie de página.
   ============================================================ */
.pie-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    /* El margen superior es grande a propósito: separa de lo que importa
       en vez de acompañarlo. */
    margin: 3.5rem auto 1.6rem;
    padding: 0 1.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: rgba(149, 140, 132, 0.75);
}

.pie-legal a {
    /* Área tocable de 44px sin engordar la línea: el relleno vertical
       se compensa con los márgenes negativos. */
    padding: 0.85rem 0.15rem;
    margin: -0.85rem 0;
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.pie-legal a:hover,
.pie-legal a:focus-visible {
    color: #edbd9d;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* ============================================================
   PÁGINAS LEGALES · .legal-page
   Términos y privacidad. La clase existía en las plantillas pero
   no tenía ni una regla detrás, así que estas páginas heredaban
   la tipografía de una pantalla de producto: título gigante,
   subtítulos casi tan grandes como el título, y —lo que peor se
   veía— párrafos sin ancho máximo, cruzando el panel entero.

   Un documento se lee distinto a un tablero. Acá manda una sola
   idea: una columna angosta, jerarquía tranquila y aire entre
   secciones. Los colores y bordes salen de las variables del
   sistema para que no parezca otra plataforma.
   ============================================================ */

/* El documento tiene su propio ancho y se centra. Sin esto el panel
   se estira a toda la pantalla mientras el texto ocupa 630px, y queda
   un vacío enorme a la derecha que hace ver la página sin terminar.
   La caja tiene que abrazar al texto, no contenerlo de lejos. */
.legal-page {
    width: min(100%, 47rem);
    margin-inline: auto;
}

/* La medida. Es el arreglo de fondo: una línea de más de ~70
   caracteres obliga al ojo a buscar dónde empieza la siguiente. */
.legal-page .panel > p,
.legal-page .panel > ul,
.legal-page .panel > h2,
.legal-page .page-copy {
    max-width: 68ch;
}

/* El cuerpo del documento se escribe con `:not(.panel-feature)` en
   todo lo que toca <p>. Sin eso, `.legal-page .panel > p` (0,2,0) le
   gana a `.eyebrow` (0,1,0) y la portada pierde su cobre y su tamaño
   chico: el sistema de clases sueltas de esta hoja se rompe callado
   cuando una regla de contexto pisa una de utilidad. */

/* Portada del documento: el título baja de 4.55rem a algo que no
   grita. Un texto legal se anuncia, no se impone. */
.legal-page .page-title {
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

/* La línea de versión y vigencia es metadato, no bajada: va más
   chica y espaciada, como la ficha de un documento. */
.legal-page .panel-feature .page-copy {
    margin-top: 0.85rem;
    font-size: 0.82rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--muted);
}

/* Los títulos de sección pasan a ser subordinados de verdad. Antes
   llegaban a 2.25rem contra un título de 2.8rem: casi el mismo
   peso, y con trece secciones eso aplana toda la jerarquía. */
.legal-page .panel h2.section-title {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: var(--text-strong);
}

/* El ritmo del documento: mucho aire ANTES de cada sección y poco
   después, para que el título se lea pegado a su propio texto y
   separado del anterior. `.top-gap` daba 1.25rem parejo, que en una
   pantalla de producto está bien y en un documento junta todo.

   La línea de arriba es el separador; la primera sección no la
   lleva porque no hay nada que separar. */
.legal-page .panel h2.section-title.top-gap {
    margin-top: 2.9rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--border-subtle);
}

.legal-page .panel h2.section-title + p,
.legal-page .panel h2.section-title + ul {
    margin-top: 0.8rem;
}

.legal-page .panel:not(.panel-feature) > p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--muted);
}

/* Los <strong> acá no son énfasis suelto: abren la mayoría de los
   ítems («Tu dirección IP», «Con qué derecho…»). Suben de color
   para que funcionen como entradilla sin tener que ser otro tamaño. */
.legal-page .panel:not(.panel-feature) strong {
    color: var(--text);
    font-weight: 700;
}

/* Listas con punto de cobre en vez de la viñeta del navegador, que
   viene con una sangría que no calza con nada. */
.legal-page .panel > ul {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.legal-page .panel > ul > li {
    position: relative;
    padding-left: 1.35rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--muted);
}

.legal-page .panel > ul > li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0.3rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-strong);
    opacity: 0.65;
}

/* Los nombres de las cookies. Van en monoespaciada y en una
   pastilla tenue: son literales que alguien podría ir a buscar en
   su navegador, así que tienen que verse copiables. */
.legal-page .panel code {
    padding: 0.12em 0.4em;
    border-radius: 5px;
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
    font-size: 0.84em;
    color: var(--muted-strong);
    overflow-wrap: anywhere;
}

/* Los enlaces se ven como enlaces. En un texto legal, adivinar
   dónde se puede hacer clic no es un juego que valga la pena. */
.legal-page .panel a {
    color: #edbd9d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: rgb(from var(--accent) r g b / 0.45);
    overflow-wrap: anywhere;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}

.legal-page .panel a:hover,
.legal-page .panel a:focus-visible {
    color: var(--text-strong);
    text-decoration-color: var(--accent-strong);
}

/* En celular el panel aprieta el texto contra el borde; se le baja
   el relleno lateral para recuperar ancho de lectura, y el aire
   entre secciones se ajusta a la pantalla más corta. */
@media (max-width: 640px) {
    .legal-page .panel {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .legal-page .panel h2.section-title.top-gap {
        margin-top: 2.1rem;
        padding-top: 1.3rem;
    }
}

/* ============================================================
   ENTRAR CON GOOGLE · prefijo auth-
   El botón de Google no se puede vestir con la paleta de la casa:
   Google exige su logo a color y su texto tal cual. Así que en vez
   de pelear con eso, se le da el fondo claro que su marca pide y
   se lo trata como lo que es — una puerta de otro, no un botón
   más de Wurlitzer.
   ============================================================ */
.auth-otra-via {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.4rem;
}

/* La «o» con una línea a cada lado: dice «hay dos caminos» sin
   escribirlo. */
.auth-o {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.auth-o::before,
.auth-o::after {
    content: "";
    height: 1px;
    background: var(--border-subtle);
}

.auth-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    /* 44px de alto: es un objetivo táctil, y en celular se toca con
       el pulgar a una mano. */
    min-height: 2.9rem;
    padding: 0.75rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    /* El gris de Google para texto sobre blanco, no negro puro. */
    color: #1f1f1f;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease;
}

.auth-google:hover,
.auth-google:focus-visible {
    color: #1f1f1f;
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.auth-google svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .auth-google:hover,
    .auth-google:focus-visible {
        transform: none;
    }
}

/* ============================================================
   Mi música — la casa de quien baila
   ============================================================
   Ancho propio y centrado: sin esto el panel se estira a los 1320px
   del shell mientras el texto queda corto, y se ve sin terminar.

   Nada de reglas de contexto sueltas del tipo `.mi-musica p`: en esta
   hoja las de contexto le ganan a las de utilidad y rompen en silencio
   otras pantallas. Todo va con clase propia.
   ============================================================ */

.mi-musica {
    width: min(100%, 70rem);
    margin-inline: auto;
    display: grid;
    gap: 1.25rem;
}

/* La navegación interna impide que Mi música vuelva a ser una portada, un
   historial y un editor apilados en una sola columna. Son enlaces reales: sin
   JavaScript llevan al bloque; con JavaScript cambian de vista sin recargar. */
.mi-musica-tabs {
    position: sticky;
    top: var(--mi-musica-tabs-top, 4.7rem);
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.32rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-inset) 92%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

.mi-musica-tab {
    min-width: 0;
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    color: var(--muted-strong);
    font-size: 0.84rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.mi-musica-tab span {
    min-width: 1.2rem;
    padding: 0.18rem 0.36rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
}

.mi-musica-tab:hover,
.mi-musica-tab:focus-visible {
    color: var(--text-strong);
    background: rgba(255, 255, 255, 0.045);
}

.mi-musica-tab.is-active {
    color: #17100c;
    background: var(--accent-strong);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--accent-strong) 22%, transparent);
}

.mi-musica-tab.is-active span {
    color: #17100c;
    background: rgba(23, 16, 12, 0.12);
}

.mi-musica.is-tabbed [data-mi-musica-panel][hidden] {
    display: none;
}

.mi-musica.is-tabbed [data-mi-musica-panel]:not([hidden]) {
    animation: mi-musica-vista-entra 0.22s ease both;
}

@keyframes mi-musica-vista-entra {
    from {
        opacity: 0;
        transform: translateY(0.35rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mi-musica-resumen,
.mi-musica-vista {
    display: grid;
    gap: 1rem;
}

.mi-musica-resumen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mi-musica-atajo {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.38rem;
    color: inherit;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.mi-musica-atajo:hover,
.mi-musica-atajo:focus-visible {
    transform: translateY(-2px);
    border-color: var(--line-strong);
}

.mi-musica-atajo > strong {
    color: var(--text-strong);
    font-family: "Sora", sans-serif;
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mi-musica-atajo > span:not(.eyebrow) {
    color: var(--muted);
    font-size: 0.84rem;
}

.mi-musica-atajo > b {
    margin-top: 0.35rem;
    color: var(--accent-strong);
    font-size: 0.8rem;
}

.mi-musica-vacio {
    display: grid;
    gap: 0.7rem;
}

.mi-musica-matches-resto {
    display: grid;
    gap: 0.65rem;
}

.mi-musica-matches-resto > summary {
    width: max-content;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.mi-musica-matches-resto[open] > summary {
    margin-bottom: 0.65rem;
}

.mi-musica-pedido.is-destacado,
#coincidencias.is-destacado {
    animation: mi-musica-destino 1.4s ease;
}

@keyframes mi-musica-destino {
    0%, 35% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong) 68%, transparent);
    }
    100% {
        box-shadow: none;
    }
}

.mi-musica-cabecera {
    display: grid;
    gap: 1rem;
}

.mi-musica-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
}

.mi-musica-cifra {
    display: grid;
    gap: 0.15rem;
}

.mi-musica-cifra strong {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
}

.mi-musica-cifra span {
    font-size: 0.82rem;
    color: var(--muted);
}

/* El input hereda `width: 100%` de la regla global; el ancho real lo
   fija el flex y por eso lleva `min-width: 0`. */
.mi-musica-nombre-form {
    display: grid;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

.mi-musica-nombre-form label {
    font-size: 0.82rem;
    color: var(--muted);
}

.mi-musica-nombre-fila {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mi-musica-nombre-fila input {
    flex: 1 1 auto;
    min-width: 0;
}

.mi-musica-pista {
    font-size: 0.78rem;
    color: var(--muted);
}

.mi-musica-aviso {
    border-color: var(--line-strong);
    display: grid;
    gap: 0.85rem;
    justify-items: start;
}

.mi-musica-bloque {
    display: grid;
    gap: 0.85rem;
}

.mi-musica-novedades {
    border-color: color-mix(in srgb, var(--accent-strong) 38%, var(--border-subtle));
}

.mi-musica-novedades-cabecera {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.mi-musica-novedades-cabecera > span:first-child {
    display: grid;
    gap: 0.28rem;
}

.mi-musica-nuevas,
.nav-notification-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
    padding-inline: 0.38rem;
    border-radius: 999px;
    background: var(--accent-strong);
    color: #17100c;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Las insignias de la barra están siempre puestas y en cero se esconden, para
   que `novedades.js` solo tenga que cambiarles el número al vuelo. Ambas se
   dibujan con `inline-grid`, así que sin esto `hidden` no las taparía: el
   display declarado le gana al del atributo. */
.cabina-nav-badge[hidden],
.nav-notification-count[hidden] {
    display: none;
}

/* El resumen de la noche. La cifra manda —es lo que se lee de una mirada— y
   el texto la acompaña; al revés hay que leer la frase entera para enterarse
   de cuántas fueron. */
.mi-musica-novedad-grupo {
    display: grid;
    gap: 0.5rem;
}

.mi-musica-novedad-grupo + .mi-musica-novedad-grupo {
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
}

.mi-musica-novedad-donde {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted-strong);
}

.mi-musica-novedad-donde span {
    color: var(--muted);
    font-weight: 500;
}

.mi-musica-novedad-lineas {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mi-musica-novedad-linea {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
}

.mi-musica-novedad-linea b {
    flex: 0 0 auto;
    min-width: 1.6rem;
    font-size: 1.5rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--muted-strong);
}

.mi-musica-novedad-linea span {
    color: var(--text-strong);
    font-size: 0.92rem;
    line-height: 1.3;
}

.mi-musica-novedad-linea--listo b {
    color: var(--success);
}

.mi-musica-novedad-linea--aceptado b {
    color: var(--accent-strong);
}

.mi-musica-novedad-linea--rechazado b {
    color: var(--muted);
}

/* La coincidencia nunca se agrupa ni se cuenta: es el evento más importante
   que ocurre acá, y es el único que sí lleva a alguna parte. */
.mi-musica-novedad-match {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-strong) 45%, var(--border-subtle));
    background: color-mix(in srgb, var(--accent-strong) 8%, var(--panel));
}

.mi-musica-novedad-match-copy {
    flex: 1 1 12rem;
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.mi-musica-novedad-match-copy strong {
    color: var(--text-strong);
    font-size: 0.96rem;
}

.mi-musica-novedad-match-copy span {
    color: var(--muted);
    font-size: 0.82rem;
}

.mi-musica-novedad-boton {
    flex: 0 0 auto;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    background: var(--accent-strong);
    color: #17100c;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

/* Una noche del archivo. `<details>` trae su propio triángulo y hay que
   sacarlo en los dos dialectos, o queda uno arriba del otro. */
.mi-musica-noche > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
}

.mi-musica-noche > summary::-webkit-details-marker {
    display: none;
}

.mi-musica-noche[open] > summary {
    margin-bottom: 0.85rem;
}

.mi-musica-noche-titulo {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.mi-musica-noche-titulo strong {
    color: var(--text-strong);
    font-size: 1.05rem;
}

.mi-musica-noche-cuando {
    color: var(--muted);
    font-size: 0.8rem;
}

/* El resumen se lee cerrado; con la noche abierta estorba, porque lo que dice
   está justo abajo en detalle. */
.mi-musica-noche-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.mi-musica-noche-resumen b {
    color: var(--muted-strong);
    font-variant-numeric: tabular-nums;
}

.mi-musica-noche[open] .mi-musica-noche-resumen {
    display: none;
}

.mi-musica-noche-flecha {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
}

.mi-musica-noche[open] .mi-musica-noche-flecha {
    transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
}

.nav-pill-personal,
.mobile-nav-link-personal {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
}

.mi-musica-subtitulo {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-strong);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.mi-musica-conteo {
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.mi-musica-nota {
    margin: 0;
    font-size: 0.85rem;
}

.mi-musica-lista,
.mi-musica-matches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

/* Un bloque plegable de canciones. La cabecera es un botón, así que hay que
   sacarle todo lo que el navegador le pone: fondo, borde y el texto centrado.
   El `<h2>` queda por fuera para no meter contenido de bloque dentro de un
   botón, que no es válido. */
.mi-musica-grupo-titulo {
    margin: 0;
}

.mi-musica-grupo-boton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mi-musica-flecha {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
    transition: transform 0.15s ease;
}

.mi-musica-grupo.is-plegado .mi-musica-flecha {
    transform: rotate(-45deg) translate(-0.1rem, 0.1rem);
}

.mi-musica-grupo-boton:hover .mi-musica-flecha,
.mi-musica-grupo-boton:focus-visible .mi-musica-flecha {
    border-color: var(--text-strong);
}

.mi-musica-grupo-cuerpo {
    display: grid;
    gap: 0.75rem;
}

.mi-musica-grupo-cuerpo[hidden] {
    display: none;
}

/* El input hereda `width: 100%` de la regla global, así que acá solo va lo
   suyo. Sin `[hidden]` explícito el `display` lo dejaría a la vista igual. */
.mi-musica-buscador {
    font-size: 0.88rem;
}

.mi-musica-buscador[hidden] {
    display: none;
}

.mi-musica-mas {
    justify-self: start;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--muted-strong);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.mi-musica-mas:hover,
.mi-musica-mas:focus-visible {
    border-color: var(--line-strong);
    color: var(--text-strong);
}

.mi-musica-mas[hidden],
.mi-musica-sin-resultado[hidden] {
    display: none;
}

.mi-musica-sin-resultado {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.mi-musica-cancion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

/* `.mi-musica-cancion` es `display: flex`, y eso le gana al `display: none`
   que el navegador le da a `[hidden]`. Sin esta regla, esconder una fila
   desde JavaScript no hace absolutamente nada. */
.mi-musica-cancion[hidden] {
    display: none;
}

/* Lo mismo con el bloque entero, que es `display: grid`. */
.mi-musica-grupo[hidden] {
    display: none;
}

/* Cambiar de opinión mueve la canción de una lista a la otra. Se va
   encogiéndose —no solo desvaneciéndose— para que las filas de abajo suban
   solas y el hueco no quede parpadeando. */
.mi-musica-cancion.is-saliendo {
    overflow: hidden;
    transform: translateX(0.6rem);
    opacity: 0;
    padding-block: 0;
    max-height: 0;
    transition: opacity 0.18s ease, transform 0.22s ease,
        max-height 0.26s ease, padding-block 0.26s ease;
}

/* Y llega encendida, porque aterriza arriba de una lista larga y si no, no se
   distingue de las que ya estaban ahí. */
.mi-musica-cancion.is-recien-llegada {
    animation: mi-musica-llegada 1.4s ease;
}

@keyframes mi-musica-llegada {
    0% {
        background: color-mix(in srgb, var(--accent-strong) 26%, var(--surface-soft));
        transform: translateX(-0.5rem);
    }
    22% {
        transform: translateX(0);
    }
    100% {
        background: var(--surface-soft);
    }
}

/* La fila se mueve sola; quien pidió que nada se mueva no necesita verlo. */
@media (prefers-reduced-motion: reduce) {
    .mi-musica.is-tabbed [data-mi-musica-panel]:not([hidden]),
    .mi-musica-pedido.is-destacado,
    #coincidencias.is-destacado {
        animation: none;
    }

    .mi-musica-atajo {
        transition: none;
    }

    .mi-musica-cancion.is-saliendo {
        transition: none;
    }

    .mi-musica-cancion.is-recien-llegada {
        animation: none;
    }
}

.mi-musica-caratula {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--surface-inset);
}

.mi-musica-caratula-vacia {
    display: block;
    border: 1px solid var(--border-subtle);
}

.mi-musica-cancion-texto {
    display: grid;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.mi-musica-cancion-titulo,
.mi-musica-cancion-artistas {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mi-musica-cancion-titulo {
    color: var(--text-strong);
    font-size: 0.95rem;
}

.mi-musica-cancion-artistas {
    color: var(--muted);
    font-size: 0.8rem;
}

.mi-musica-acciones {
    display: flex;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.mi-musica-accion {
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--muted-strong);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.mi-musica-accion:hover,
.mi-musica-accion:focus-visible {
    border-color: var(--line-strong);
    color: var(--text-strong);
}

.mi-musica-accion-borrar:hover,
.mi-musica-accion-borrar:focus-visible {
    border-color: var(--danger);
    color: var(--danger);
}

.mi-musica-match {
    display: grid;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    border-left: 3px solid var(--line-strong);
}

.mi-musica-match-super {
    border-left-color: var(--salsa);
}

.mi-musica-match-hyper {
    border-left-color: var(--accent-strong);
}

.mi-musica-match-nivel {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-strong);
}

.mi-musica-match-quien {
    color: var(--text-strong);
}

.mi-musica-match-detalle {
    font-size: 0.8rem;
    color: var(--muted);
}

@media (max-width: 520px) {
    .mi-musica-tabs {
        margin-inline: -0.2rem;
    }

    .mi-musica-tab {
        padding-inline: 0.48rem;
        font-size: 0.76rem;
    }

    .mi-musica-tab span {
        display: none;
    }

    .mi-musica-resumen {
        grid-template-columns: 1fr;
    }

    .mi-musica-cancion {
        flex-wrap: wrap;
    }

    .mi-musica-acciones {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (min-width: 900px) {
    .mi-musica-vista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* La esquina del público: la fotito y sus ajustes. */

.cuenta-publica-toggle {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-soft);
    color: var(--text-strong);
    font-size: 0.9rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.cuenta-publica-toggle:hover,
.cuenta-publica-toggle:focus-visible {
    border-color: var(--line-strong);
    background: var(--surface-hover);
}

.cuenta-publica-icono {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* Configuración: cada ajuste con su explicación al lado, no debajo. */

.ajuste-fila {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ajuste-texto {
    flex: 1 1 16rem;
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.ajuste-accion {
    flex: 0 0 auto;
}

.ajuste-trato {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--muted);
}

/* Un ajuste que depende del de arriba: se ve que cuelga de él, no que compite.
   Jugar a las coincidencias y que te avisen por correo son dos decisiones, pero
   la segunda solo existe si la primera está tomada. */
.ajuste-fila-secundaria {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
}

.ajuste-subtitulo {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-strong);
}

/* Pantallas de allauth: heredan la casa aunque no hereden la plantilla. */

.allauth-panel {
    display: grid;
    gap: 1rem;
    justify-items: start;
}

.allauth-marca img {
    width: 6.4rem;
    height: auto;
}

.allauth-panel h1 {
    font-size: 1.35rem;
    margin: 0;
    color: var(--text-strong);
}

.allauth-panel p {
    margin: 0;
    color: var(--muted-strong);
}

.allauth-panel button[type="submit"] {
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #1a1113;
    font-weight: 600;
    cursor: pointer;
}

/* El botón de Google es un <button> y ya no un <a>: sin esto hereda el
   aspecto de botón del navegador y pierde el borde y la tipografía. */
button.auth-google {
    font: inherit;
    cursor: pointer;
    width: 100%;
}

/* Aviso de que Google no está disponible y toca la salida de emergencia. */
.auth-emergencia {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    background: var(--surface-soft);
}

/* Los pedidos esperando respuesta: la pregunta viva de la pantalla. */
.mi-musica-pedidos {
    border-color: var(--line-strong);
}

/* La tarjeta de un pedido: la canción arriba, la respuesta abajo.
   No son tres columnas. Con tres, un título largo empujaba la meta a la
   línea siguiente y esa tarjeta quedaba alineada al revés que sus vecinas. */
.mi-musica-pedido {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

.mi-musica-pedido[hidden] {
    display: none;
}

.mi-musica-pedidos-mas {
    margin-top: 0.2rem;
}

.mi-musica-pedido-cabeza {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* El pie se alinea bajo el texto y no bajo la carátula: así el bloque de
   abajo cuelga del título, que es de lo que habla. */
.mi-musica-pedido-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: calc(44px + 0.75rem);
}

.mi-musica-pedido-estilo {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.66rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* La fecha es contexto, no noticia. En dorado competía de igual a igual con
   el resultado, que es lo único que la persona vino a leer. */
.mi-musica-pedido-cuando {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.mi-musica-pedido-cuando--vivo {
    color: var(--accent-strong);
}

/* La respuesta, empujada a la derecha con `margin-left: auto`. Al envolverse
   en pantallas angostas cae sola a la línea de abajo, alineada a la
   izquierda como todo lo demás en vez de quedar colgando. */
.mi-musica-pedido-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-inset);
    font-size: 0.78rem;
    line-height: 1.2;
}

.mi-musica-pedido-punto {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

.mi-musica-pedido-detalle {
    color: var(--muted);
    font-size: 0.72rem;
}

.mi-musica-pedido-detalle::before {
    content: "·";
    margin-right: 0.35rem;
}

.mi-musica-pedido-estado--pendiente {
    color: var(--accent-strong);
}

.mi-musica-pedido-estado--aceptado,
.mi-musica-pedido-estado--listo {
    color: var(--success);
}

.mi-musica-pedido-estado--sin-cupo {
    color: var(--muted-strong);
}

.mi-musica-pedido-estado--rechazado {
    color: var(--danger);
}

@media (max-width: 480px) {
    /* Sin la sangría, el pie de una tarjeta angosta se parte en tres líneas
       raquíticas contra el borde derecho. */
    .mi-musica-pedido-pie {
        margin-left: 0;
    }
}

/* La invitación al juego de las coincidencias, al final de la ronda. */

.vote-coincidencias {
    margin: 1.1rem auto 0;
    max-width: 22rem;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    display: grid;
    gap: 0.6rem;
}

.vote-coincidencias-titulo {
    margin: 0;
    color: var(--text-strong);
    font-weight: 600;
}

.vote-coincidencias-presentacion,
.vote-coincidencias-trato {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--muted);
}

/* ============================================================
   Invitación después de pedir — primero ocurre el gesto, luego la cuenta
   ============================================================ */
.request-account-invite {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(95, 158, 138, 0.36);
    border-radius: 1rem;
    background: linear-gradient(150deg, rgba(95, 143, 122, 0.1), rgba(22, 18, 20, 0.72));
    color: var(--text-strong);
}

.request-saved-note {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--success, #78c8b5) 40%, var(--border-subtle));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--success, #78c8b5) 6%, transparent);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
}

.request-saved-note strong {
    color: var(--text-strong);
}

.request-saved-note:hover,
.request-saved-note:focus-visible {
    border-color: color-mix(in srgb, var(--success, #78c8b5) 70%, var(--border-subtle));
}

.request-account-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-strong);
}

.request-account-copy {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

.request-account-form {
    display: block;
    margin: 0;
}

.request-account-form .auth-google {
    width: 100%;
    border-radius: 0.72rem;
}

.request-account-once {
    margin: 0.7rem 0 0;
    font-size: 0.69rem;
    line-height: 1.35;
    text-align: center;
    color: #958c84;
}

/* La cuenta conserva el pedido; esta segunda decisión permite firmarlo. */
.request-confirmation-layer {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 34%, rgba(200, 110, 90, 0.16), transparent 34rem),
        rgba(3, 3, 4, 0.82);
    backdrop-filter: blur(12px);
}

.request-confirmation-layer[hidden] { display: none; }

.request-confirmation-card {
    width: min(100%, 28rem);
    max-height: min(92dvh, 48rem);
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid rgba(239, 180, 137, 0.46);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 8% 0%, rgba(200, 110, 90, 0.25), transparent 18rem),
        radial-gradient(circle at 98% 12%, rgba(199, 154, 59, 0.13), transparent 16rem),
        linear-gradient(155deg, #241518 0%, #130d0f 54%, #09090b 100%);
    box-shadow:
        0 1.75rem 5rem rgba(0, 0, 0, 0.64),
        0 0 3rem rgba(200, 110, 90, 0.12);
    outline: none;
}

.request-confirmation-hero,
.request-confirmation-track,
.request-signature-preview {
    display: flex;
    align-items: center;
}

.request-confirmation-hero { gap: 0.65rem; }
.request-confirmation-hero > span {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(126, 240, 219, 0.58);
    border-radius: 50%;
    color: #bceade;
    background: radial-gradient(circle, rgba(95, 143, 122, 0.3), rgba(63, 125, 108, 0.12));
    box-shadow: 0 0 1.2rem rgba(126, 240, 219, 0.12);
    font-size: 1.1rem;
}
.request-confirmation-hero p,
.request-signature-eyebrow {
    margin: 0 0 0.2rem;
    color: #efb489;
    font: 800 0.66rem/1.2 "Manrope", sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.request-confirmation-hero h2 {
    margin: 0;
    color: var(--text-strong);
    font: 750 1rem/1.2 "Sora", sans-serif;
}
.request-confirmation-track,
.request-signature-preview {
    gap: 0.75rem;
    margin-top: 0.7rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.018);
    opacity: 0.68;
}
.request-confirmation-track > span:first-child,
.request-signature-note {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #f0c48f;
    background: rgba(210, 128, 88, 0.16);
}
.request-confirmation-track strong,
.request-confirmation-track small,
.request-signature-preview strong,
.request-signature-preview small { display: block; }
.request-confirmation-track strong,
.request-signature-preview strong { color: var(--text-strong); font-size: 0.88rem; }
.request-confirmation-track small,
.request-signature-preview small { margin-top: 0.12rem; color: var(--muted); font-size: 0.75rem; }

.request-signature {
    margin-top: 0.8rem;
    padding: 0.8rem;
    border: 1px solid rgba(239, 180, 137, 0.32);
    border-radius: 0.9rem;
    background: rgba(200, 110, 90, 0.075);
}
.request-signature form { margin: 0; }
.request-signature label > span:first-child {
    display: block;
    color: #fff1e6;
    font: 800 1rem/1.25 "Sora", sans-serif;
}
.request-signature-reason {
    display: block;
    margin-top: 0.2rem;
    color: #c8b9ad;
    font-size: 0.73rem;
    line-height: 1.4;
}
.request-signature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    margin-top: 0.45rem;
}
.request-signature input {
    width: 100%;
    min-height: 2.55rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(239, 180, 137, 0.72);
    border-radius: 0.75rem;
    background: rgba(7, 7, 8, 0.72);
    color: var(--text-strong);
    box-shadow: 0 0 0 3px rgba(200, 110, 90, 0.09), 0 0 1.3rem rgba(200, 110, 90, 0.12);
}
.request-signature input:focus {
    border-color: #efb489;
    outline: 2px solid rgba(239, 180, 137, 0.16);
    box-shadow: 0 0 1.2rem rgba(200, 110, 90, 0.15);
}
.request-signature-save,
.request-signature-no,
.request-confirmation-close { width: 100%; min-height: 2.5rem; border: 0; border-radius: 0.8rem; font-weight: 700; }
.request-signature-save {
    width: auto;
    padding: 0 1rem;
    border: 1px solid rgba(255, 221, 191, 0.52);
    background: #e5a271;
    color: #1f0f07;
    cursor: pointer;
    white-space: nowrap;
}
.request-signature-save:hover { background: #efb489; }
.request-signature-save:focus-visible {
    outline: 2px solid #ffd8bd;
    outline-offset: 3px;
}
.request-signature-no { width: auto; min-height: 2rem; display: block; margin: 0.35rem auto 0; padding: 0 0.35rem; background: transparent; color: var(--muted); font-size: 0.72rem; text-decoration: underline; text-decoration-color: rgba(183, 170, 154, 0.35); text-underline-offset: 0.2em; }
.request-confirmation-close { margin-top: 0.15rem; background: transparent; color: #8f857c; font-size: 0.78rem; }
.request-signature-no:hover,
.request-confirmation-close:hover { color: var(--text-strong); }
.request-signature-error { margin: 0.5rem 0 0; color: #ff9d92; font-size: 0.78rem; }
/* La invitación a la cuenta, en el segundo tiempo.

   Va más callada que el bloque de la firma —sin borde cobre, sin fondo
   encendido— porque llega cuando la persona ya hizo lo que se le pidió. Es una
   oferta, no una pregunta pendiente.

   `[hidden]` se declara explícito y no es opcional: la sección trae
   `display: grid` de la regla de abajo, y eso le gana al `display: none` que el
   navegador le da al atributo. Es la trampa que documenta AGENTS.md y que en
   esta hoja ya se pagó dos veces. */
.request-cuenta[hidden] { display: none; }
.request-cuenta {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(241, 232, 219, 0.09);
}
.request-cuenta-titulo {
    margin: 0;
    color: #fff1e6;
    font: 750 0.92rem/1.3 "Sora", sans-serif;
}
.request-cuenta-copy {
    margin: 0;
    color: #c8b9ad;
    font-size: 0.73rem;
    line-height: 1.45;
}
/* El botón de Google trae su propio ancho y su propia marca; lo único que se
   ajusta acá es cuánto aire tiene encima, porque `top-gap` lo deja demasiado
   suelto dentro de una tarjeta chica. */
.request-cuenta form { margin: 0.55rem 0 0; }

.request-signature-status { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
.request-signature-status strong { color: var(--text-strong); }
.request-signature-status a { color: #efb489; text-underline-offset: 0.18em; }

.request-signature-preview {
    border-color: rgba(239, 180, 137, 0.22);
    background:
        linear-gradient(100deg, rgba(200, 110, 90, 0.14), rgba(199, 154, 59, 0.06) 58%, rgba(255, 255, 255, 0.025));
    box-shadow: inset 3px 0 0 rgba(200, 110, 90, 0.72);
}
.request-signature-note {
    color: #ffe0a3;
    background: linear-gradient(145deg, rgba(200, 110, 90, 0.34), rgba(199, 154, 59, 0.22));
    box-shadow: 0 0 1.2rem rgba(199, 154, 59, 0.16);
}
.request-signature-preview small b { color: #efb489; }

.request-celebration {
    margin-top: 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(241, 232, 219, 0.1);
    border-radius: 0.85rem;
    background: #121212;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.24);
}
.request-celebration[hidden] { display: none; }

/* El reproductor solo ocupa lugar mientras suena de verdad.
 *
 * El iframe de Spotify no es siempre un reproductor. Si no puede reproducir
 * —visitante sin sesión de Spotify, autoplay bloqueado, o el adelanto de 30
 * segundos que terminó— se convierte en un aviso suyo: un cartel morado, en
 * inglés, con un botón «Get Spotify», más alto que la caja. Y ese caso no es
 * raro: es lo que ve la mayoría del público de una noche.
 *
 * El resultado era doblemente malo. Se veía mal —barras de scroll dentro de la
 * tarjeta y el texto cortado— y además mentía: nuestra barra seguía diciendo
 * «Tu elección está sonando» encima de un aviso ajeno.
 *
 * `is-playing` la pone el JS solo cuando Spotify confirma que está sonando, así
 * que sirve tal cual: mientras suena, se ve el reproductor; cuando deja de
 * sonar, la caja se cierra y queda nuestra fila, en nuestro idioma. */
.request-celebration-player {
    display: block;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
}
/* Techo holgado: el alto real lo decide el iframe de más abajo. */
.request-celebration.is-playing .request-celebration-player { max-height: 7rem; }

/* El alto del reproductor lo manda su ancho.
 *
 * Los 80px fijos salían de la medida "compacta" de Spotify, y esa medida solo
 * alcanza en tarjetas angostas: el contenido del embed crece con el ancho.
 * Medido con el embed real: a 300 y a 358 de ancho cabe en 80px, pero a 404
 * —que es lo que mide esta tarjeta en su ancho máximo— pide 86, y por eso se
 * veía cortado abajo el botón y la pastilla "Muestra".
 *
 * La proporción está calculada para el reproductor **sonando**, que es unos
 * pixeles más alto que en pausa y es el único estado que se ve: la caja se
 * abre con `is-playing`. Por eso conviene que sobre y no que falte. Si sobra,
 * queda una franja del fondo de la caja que se lee como aire; si falta, se
 * corta la pastilla "Muestra", que fue justo lo que pasó midiendo en pausa. */
.request-celebration-player iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 404 / 92;
    min-height: 82px;
    max-height: 96px;
    border: 0;
    overflow: hidden;
}
.request-celebration-status {
    display: flex;
    min-height: 2.35rem;
    padding: 0.4rem 0.7rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid rgba(241, 232, 219, 0.08);
    color: var(--muted);
    font-size: 0.7rem;
}
/* Con el reproductor cerrado, esa línea de arriba no separa nada: queda un
 * filo suelto en el borde de la caja. */
.request-celebration:not(.is-playing) .request-celebration-status { border-top-color: transparent; }
.request-celebration-status button {
    min-height: 1.9rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(239, 180, 137, 0.34);
    border-radius: 999px;
    background: rgba(200, 110, 90, 0.12);
    color: #efb489;
    font-size: 0.68rem;
    font-weight: 800;
}
.request-celebration.is-playing .request-celebration-status {
    color: #d2eee5;
    background: rgba(95, 143, 122, 0.1);
}

@keyframes request-cta-breathe {
    0%, 100% { box-shadow: 0 0.8rem 2rem rgba(200, 110, 90, 0.22); }
    50% { box-shadow: 0 0.9rem 2.45rem rgba(200, 110, 90, 0.37); }
}

@media (prefers-reduced-motion: reduce) {
    .request-signature-save { transition: none; }
    .request-celebration-player { transition: none; }
}

@media (max-width: 390px) {
    .request-confirmation-layer { padding: 0.65rem; }
    .request-confirmation-card { padding: 1rem; border-radius: 1.2rem; }
}

.request-matchviz {
    position: relative;
    display: flex;
    height: 2.75rem;
    margin-top: 0.7rem;
    align-items: center;
    justify-content: center;
}

.request-matchviz-disc {
    position: absolute;
    width: 1.65rem;
    height: 1.65rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0 0.22rem, #0d0a0b 0.22rem 100%);
    box-shadow: 0 0 0.72rem -0.06rem currentColor;
}

.request-matchviz-you {
    color: #7ef0db;
    animation: request-match-you 4.2s ease-in-out infinite;
}

.request-matchviz-them {
    color: #ff8a7f;
    animation: request-match-them 4.2s ease-in-out infinite;
}

.request-matchviz-rings {
    position: absolute;
    top: 50%;
    left: 50%;
}

.request-matchviz-rings i {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -0.625rem;
    border: 1px solid rgba(240, 196, 143, 0.65);
    border-radius: 50%;
    opacity: 0;
    animation: request-match-ring 4.2s ease-out infinite;
}

.request-matchviz-rings i:nth-child(2) {
    animation-delay: 220ms;
}

.request-matchviz-heart {
    position: absolute;
    z-index: 1;
    display: flex;
    color: #f6d4a6;
    opacity: 0;
    filter: drop-shadow(0 0 0.45rem rgba(240, 196, 143, 0.75));
    animation: request-match-heart 4.2s ease-in-out infinite;
}

.request-matchviz-heart svg {
    width: 1.08rem;
    height: 1.08rem;
    fill: currentColor;
}

.request-matchviz-label {
    margin: 0.1rem 0 0.65rem;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    color: #e8c9a4;
}

@keyframes request-match-you {
    0%, 8%, 92%, 100% { transform: translateX(-3.1rem); opacity: 0.5; }
    40%, 62% { transform: translateX(-1.3rem); opacity: 1; }
}

@keyframes request-match-them {
    0%, 8%, 92%, 100% { transform: translateX(3.1rem); opacity: 0.5; }
    40%, 62% { transform: translateX(1.3rem); opacity: 1; }
}

@keyframes request-match-ring {
    0%, 38% { opacity: 0; transform: scale(0.5); }
    47% { opacity: 0.7; transform: scale(1); }
    68%, 100% { opacity: 0; transform: scale(2.5); }
}

@keyframes request-match-heart {
    0%, 35% { opacity: 0; transform: scale(0.4); }
    46%, 60% { opacity: 1; transform: scale(1); }
    72%, 100% { opacity: 0; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .request-matchviz-you { animation: none; transform: translateX(-1.3rem); opacity: 1; }
    .request-matchviz-them { animation: none; transform: translateX(1.3rem); opacity: 1; }
    .request-matchviz-rings i { animation: none; }
    .request-matchviz-heart { animation: none; opacity: 1; }
}
.vote-coincidencias-trato { margin-top: .1rem; }

.vote-coincidencias-error {
    margin: 0;
    padding: 0.58rem 0.72rem;
    border: 1px solid rgba(255, 138, 127, 0.45);
    border-radius: 0.75rem;
    color: #fff7ee;
    background: rgba(255, 138, 127, 0.12);
    font-size: 0.78rem;
    line-height: 1.4;
}

.vote-coincidencias-acciones {
    display: grid;
    gap: 0.7rem;
}

/* El nombre solo aparece para quien todavía no tiene uno. */
.vote-coincidencias-nombre {
    display: grid;
    gap: 0.35rem;
    text-align: left;
}

.vote-coincidencias-nombre > span {
    font-size: 0.78rem;
    color: var(--muted-strong);
}

.vote-coincidencias-nombre input {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-strong);
    font: inherit;
}
.vote-coincidencias-identidad {
    display: grid;
    gap: .45rem;
}
.vote-coincidencias-identidad > p {
    margin: 0;
    color: rgba(255,247,238,.76);
    font-size: .82rem;
}
.vote-coincidencias-identidad > p strong {
    color: #fff7ee;
}
.vote-coincidencias-identidad details {
    border: 0;
}
.vote-coincidencias-identidad summary {
    width: fit-content;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--vote-gold-ink, #d9b98c);
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}
.vote-coincidencias-identidad details[open] summary {
    margin-bottom: .35rem;
}
.vote-coincidencias-identidad summary:focus-visible {
    outline: 2px solid var(--vote-gold-ink, #d9b98c);
    outline-offset: 3px;
    border-radius: .2rem;
}

.vote-coincidencias-botones {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Decir que no cuesta lo mismo que decir que sí: mismo tamaño, mismo lugar,
   sin esconder la salida ni pintarla de gris apagado. */
.vote-coincidencias-no,
.vote-coincidencias-si {
    flex: 1 1 0;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.vote-coincidencias-no {
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--muted-strong);
}

.vote-coincidencias-si {
    border: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #1a1113;
}

.vote-coincidencias-no:hover,
.vote-coincidencias-no:focus-visible {
    border-color: var(--line-strong);
    color: var(--text-strong);
}

/* Acciones que existen pero todavía no funcionan.

   Antes eran un recuadro de borde punteado con un texto en versalitas que
   decía «aún trabajando en esto»: parecía un error de maquetación más que una
   promesa. Ahora tienen forma de acción de verdad —el mismo alto y el mismo
   radio que un botón— apagadas, con una pastilla que dice cuándo. Se entiende
   que van a funcionar, no que quedaron a medio hacer. */

.pronto-fila {
    display: grid;
    gap: 0.5rem;
}

.pronto {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted-strong);
    text-align: left;
    cursor: not-allowed;
}

.pronto-texto {
    min-width: 0;
}

.pronto-pastilla {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-strong);
    background: rgb(from var(--accent) r g b / 0.14);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
}

/* «Tus votos quedaron guardados» — y dónde. Va justo después del trabajo,
   que es el único momento en que la persona entiende lo que puede perder. */
.vote-guardar {
    margin: 1rem auto 0;
    max-width: 22rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    display: grid;
    gap: 0.7rem;
}

.vote-guardar-aviso {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--muted-strong);
}

/* Lo que la persona ganó, arriba del recuadro que dice de qué depende
   conservarlo. Va más luminoso que el aviso a propósito: primero se lee la
   ganancia y después la condición. */
.vote-guardar-ganancia {
    margin: 0.9rem auto 0;
    max-width: 22rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-strong);
}
/* Ayuda contextual de cabina.

   Es una nota, no otra ruta obligatoria, pero tampoco un panel más de la
   pantalla. Tres decisiones la sostienen:

   1. No se estira. Vive en una columna de 34rem, la misma medida que la
      consola de EN VIVO, así que en escritorio ancho se lee como una tarjeta
      pensada y no como una franja de sistema pegada al borde.
   2. Ocupa su lugar desde el primer pintado. Antes crecía de alto cero al
      aparecer y empujaba la página entera hacia abajo un segundo después de
      cargar: quien ya iba con el dedo en camino terminaba tocando otra cosa.
      Ahora solo entra la luz; el alto ya estaba reservado.
   3. Gasta su expresividad en un solo gesto: una luz recorre el filo de
      arriba una vez, al entrar, y después se queda quieta. */
.cabina-contextual-help {
    --contextual-help-margin: 1.6rem;
    --contextual-help-radius: 20px;
    --contextual-help-pad-block: 1.15rem;
    --contextual-help-pad-inline: 1.35rem;
    --contextual-help-copper-lit: #f0b58c;
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1rem;
    width: min(100%, 34rem);
    margin: 0 auto var(--contextual-help-margin);
    padding: var(--contextual-help-pad-block) var(--contextual-help-pad-inline);
    overflow: hidden;
    border: 1px solid rgba(215, 138, 99, .32);
    border-radius: var(--contextual-help-radius);
    /* El foco cálido cae desde arriba a la izquierda, que es de donde entra la
       luz en toda la cabina. No es decoración suelta: separa la nota del negro
       plano de la página sin encender un color nuevo. */
    background:
        radial-gradient(120% 150% at 6% -30%, rgba(215, 138, 99, .22), rgba(215, 138, 99, .05) 46%, rgba(215, 138, 99, 0) 72%),
        linear-gradient(180deg, rgba(34, 26, 26, .97), rgba(15, 12, 13, .97));
    box-shadow:
        0 22px 54px rgba(0, 0, 0, .5),
        0 10px 34px -20px rgb(from var(--accent) r g b / .55),
        inset 0 1px rgba(255, 255, 255, .045);
    scroll-margin-block: 5rem;
}

/* La estructura de la noche anula el aire del shell general para pegar su
   tablero arriba y sin margen lateral. La ayuda se lo devuelve por su cuenta:
   si no, quedaría tocando la barra de arriba y los dos bordes de la pantalla. */
body.cabina-structure-page .cabina-contextual-help {
    width: min(calc(100% - 2rem), 34rem);
    margin-top: 2rem;
}

/* Con JavaScript el hueco se reserva igual; lo único que llega tarde es la
   luz. Así no hay salto de layout ni toque accidental. */
.js .cabina-contextual-help {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.99);
    pointer-events: none;
    transition:
        opacity 300ms ease,
        transform 460ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 460ms;
}

.js .cabina-contextual-help.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition:
        opacity 320ms ease,
        transform 460ms cubic-bezier(.22, 1, .36, 1),
        visibility 0s;
}

/* Al decir «Entendido» la nota se apaga y recién después recoge su alto. El
   orden importa: si el alto se fuera primero, la página daría un tirón antes
   de que la persona alcance a ver que su decisión quedó tomada. */
.js .cabina-contextual-help.is-leaving {
    transition:
        height 300ms cubic-bezier(.4, 0, .2, 1),
        margin 300ms cubic-bezier(.4, 0, .2, 1),
        padding 300ms cubic-bezier(.4, 0, .2, 1),
        opacity 160ms ease;
}

/* El filo encendido: la firma de la ayuda. Quieto casi siempre; una sola
   pasada de luz cuando entra. */
.cabina-contextual-help-mark {
    position: absolute;
    top: 0;
    right: 1.1rem;
    left: 1.1rem;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(240, 181, 140, 0),
        rgba(240, 181, 140, .55) 24%,
        rgba(252, 219, 194, .95) 50%,
        rgba(240, 181, 140, .55) 76%,
        rgba(240, 181, 140, 0)
    );
    box-shadow: 0 0 16px rgba(240, 181, 140, .45);
}

.cabina-contextual-help-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 236, 216, 0) 34%,
        rgba(255, 240, 224, 1) 50%,
        rgba(255, 236, 216, 0) 66%
    );
    transform: translateX(-110%);
}

.js .cabina-contextual-help.is-visible .cabina-contextual-help-mark::after {
    animation: cabina-contextual-help-sweep 1150ms cubic-bezier(.36, .02, .2, 1) 200ms 1 both;
}

@keyframes cabina-contextual-help-sweep {
    from { transform: translateX(-110%); }
    to { transform: translateX(110%); }
}

.cabina-contextual-help-copy {
    display: grid;
    gap: .38rem;
    min-width: 0;
}

.cabina-contextual-help-copy small {
    color: #e5a87e;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* El título manda. Antes medía casi lo mismo que el cuerpo y la nota se leía
   como pie de página de la pantalla que venía a explicar. */
.cabina-contextual-help-copy strong {
    color: #fbf5ec;
    font-family: "Sora", sans-serif;
    font-size: clamp(1.19rem, 1.02rem + .55vw, 1.44rem);
    font-weight: 800;
    letter-spacing: -.012em;
    line-height: 1.22;
    text-wrap: balance;
}

.cabina-contextual-help-copy p {
    margin: .1rem 0 0;
    color: #cdc0b3;
    font-size: .89rem;
    line-height: 1.6;
}

.cabina-contextual-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}

.cabina-contextual-help form {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
}

.cabina-contextual-help button,
.cabina-contextual-help-target {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.15rem;
    border: 1px solid rgba(244, 234, 223, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #e9ded2;
    font: 700 .82rem/1 "Manrope", sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease,
        color 150ms ease;
}

/* Cuando hay recorrido, el recorrido es lo primero. «Entendido» queda como lo
   que es: la salida tranquila. */
.cabina-contextual-help-target {
    border-color: rgba(215, 138, 99, .5);
    background: linear-gradient(135deg, #cf8963, #a55546);
    color: #fff6f0;
    font-weight: 800;
    box-shadow: 0 8px 22px -12px rgba(207, 137, 99, .85);
}

.cabina-contextual-help button:hover {
    border-color: rgba(215, 138, 99, .5);
    background: rgba(255, 255, 255, .07);
    color: #fbf5ec;
    transform: translateY(-1px);
}

.cabina-contextual-help-target:hover {
    border-color: rgba(240, 181, 140, .75);
    transform: translateY(-1px);
}

.cabina-contextual-help button:focus-visible,
.cabina-contextual-help-target:focus-visible {
    outline: 2px solid var(--contextual-help-copper-lit);
    outline-offset: 3px;
}

@media (max-width: 620px) {
    .cabina-contextual-help {
        --contextual-help-margin: 1.15rem;
        --contextual-help-radius: 17px;
        --contextual-help-pad-block: 1rem;
        --contextual-help-pad-inline: 1.05rem;
        gap: .85rem;
    }

    .cabina-contextual-help-mark { right: .85rem; left: .85rem; }

    .cabina-contextual-help-copy p {
        font-size: .86rem;
        line-height: 1.55;
    }

    /* En el celular las acciones se reparten el ancho. Un «Entendido» solo
       ocupa la fila entera en vez de quedar a media caja, que era como se veía
       antes. */
    .cabina-contextual-help-actions { gap: .5rem; }

    .cabina-contextual-help form { flex: 1 1 9rem; }

    .cabina-contextual-help button,
    .cabina-contextual-help-target {
        flex: 1 1 9rem;
        width: 100%;
        min-height: 46px;
        padding: 0 .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .cabina-contextual-help {
        transform: none;
        transition: opacity 1ms linear, visibility 0s;
    }

    .js .cabina-contextual-help.is-visible { transition: opacity 1ms linear, visibility 0s; }

    .js .cabina-contextual-help.is-leaving { transition: none; }

    .js .cabina-contextual-help.is-visible .cabina-contextual-help-mark::after { animation: none; }

    .cabina-contextual-help button,
    .cabina-contextual-help-target { transition: none; }

    .cabina-contextual-help button:hover,
    .cabina-contextual-help-target:hover { transform: none; }
}

/* ==========================================================================
   La aplicación instalada
   ==========================================================================

   Acá vive solo lo compartido: la barra que ofrece instalar, que sale en
   cualquier pantalla del espacio, y el arreglo de una regla vieja que se le
   cruzaba. Lo propio de cada pantalla —el selector, instalar, entrar— va en
   un `<style>` dentro de su plantilla, como la puerta del evento: son
   pantallas de una sola cosa y su estilo no se reutiliza en ninguna otra.

   La regla vieja es `.account-menu-item { display: flex }`. Como gana por
   especificidad al `display: none` que el navegador le da a `[hidden]`, un
   ítem del menú marcado como oculto se veía igual. Es la misma trampa que
   documenta AGENTS.md, y acá se paga explícito. */

.account-menu-item[hidden] {
    display: none;
}

[data-pwa-solo-instalada][hidden] {
    display: none;
}

/* --- La barra que ofrece instalar ---------------------------------------

   Va bajo la barra de arriba y empuja el contenido, no lo tapa: una capa
   flotante sobre la puerta de un evento es exactamente lo que nadie quiere
   mientras busca dónde pedir su canción.

   Va en crema, y esa es la decisión importante. Antes era oscura con un filo
   de cobre, igual que la barra de arriba y que todo lo demás, así que se
   camuflaba: estaba en la pantalla pero nadie la leía. En una aplicación toda
   oscura lo claro es lo primero que ve el ojo, y de paso no se confunde con la
   acción propia de la página —«Pide una canción» y el resto son cobre sobre
   negro—, porque es de otro material. Llamar la atención no es lo mismo que
   hostigar: sigue sin tapar nada, sin ventana que cerrar, y un «ahora no» la
   calla por 30 días.

   El crema es el mismo `--text-strong` de la marca, no un blanco cualquiera.

   `[hidden]` manda, y hay que decirlo explícito: `display: flex` le gana al
   `display: none` que el navegador le da al atributo, y es `pwa.js` quien la
   enciende y la apaga. */

.instalar-barra {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.85rem;
    padding: 0.7rem 0.75rem 0.7rem 0.7rem;
    border: 0;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #f6f1e8, #e9dfd0);
    box-shadow: 0 0.9rem 1.9rem rgba(0, 0, 0, 0.45);
}

.instalar-barra[hidden] {
    display: none;
}

/* La despedida.

   Apagarla con `hidden` a secas la hacía desaparecer de golpe y el contenido
   saltaba hacia arriba de un tirón, que es justo la sensación que no queremos
   dejarle a alguien que acaba de decir «ahora no».

   Se anima el alto, y por eso `pwa.js` lo mide antes de empezar y lo deja en
   `--alto-de-salida`: `height: auto` no se puede animar. Al terminar es el
   mismo `pwa.js` el que pone `hidden`; esta clase solo dibuja la salida. */
.instalar-barra.se-despide {
    overflow: hidden;
    pointer-events: none;
    animation: instalar-barra-se-despide 0.28s ease forwards;
}

@keyframes instalar-barra-se-despide {
    from {
        height: var(--alto-de-salida);
        opacity: 1;
        transform: none;
    }

    to {
        height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translateY(-0.4rem);
    }
}

.instalar-barra-texto {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.instalar-barra-texto strong {
    color: #21100a;
    font-size: 0.88rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.instalar-barra-texto span {
    color: rgba(33, 16, 10, 0.66);
    font-size: 0.79rem;
    line-height: 1.35;
}

.instalar-barra-acciones {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* Relleno y no contorno: sobre crema un borde suave se pierde, y este botón
   es la razón de que la barra exista. El cobre va más oscuro que el de los
   botones sobre negro para que el texto claro se lea encima. */
.instalar-barra-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(105deg, #c9764c, #b05f3d);
    color: #fff6ee;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.instalar-barra-accion:hover,
.instalar-barra-accion:focus-visible {
    color: #fff6ee;
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* El aspa se lee como «después», no como «nunca». Discreta a propósito. */
.instalar-barra-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(33, 16, 10, 0.5);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.instalar-barra-cerrar:hover,
.instalar-barra-cerrar:focus-visible {
    background: rgba(33, 16, 10, 0.09);
    color: #21100a;
    outline: none;
}

.instalar-barra-cerrar svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* En pantallas angostas la segunda línea es lo primero que sobra: el titular
   ya dice para qué sirve, y el botón tiene que caber en la misma fila. */
@media (max-width: 430px) {
    .instalar-barra {
        gap: 0.6rem;
        padding-left: 0.6rem;
    }

    .instalar-barra-texto span {
        display: none;
    }

    .instalar-barra-accion {
        padding: 0 0.8rem;
    }
}

/* Solo en el teléfono.
   
   «Instala la aplicación en tu celular» frente a un computador no dice nada, y
   la barra terminaba ocupando el mejor lugar de la pantalla para ofrecer algo
   que no corresponde. Se apaga cuando el aparato tiene puntero fino —un mouse,
   o sea un computador— o cuando la pantalla es de escritorio.

   La oferta no desaparece del todo: el ítem del menú de la cuenta sigue ahí
   para quien quiera instalarla igual, que en un computador es una decisión
   deliberada y no algo que haya que sugerir. */
@media (pointer: fine), (min-width: 900px) {
    .instalar-barra {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .instalar-barra-accion,
    .instalar-barra-cerrar {
        transition: none;
    }

    /* `pwa.js` ya se salta la despedida cuando se pide menos movimiento; esto
       es el cinturón, por si la clase llegara a ponerse igual. */
    .instalar-barra.se-despide {
        animation: none;
    }
}

.instalar-barra-icono {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    /* Fondo oscuro incluso sobre la barra clara: el logo es cobre y sobre
       crema se perdería. Además es el ícono tal como se va a ver instalado. */
    background: linear-gradient(160deg, #241a1c, #0f0d0f);
}

.instalar-barra-icono img {
    width: 1.5rem;
    height: 1.5rem;
}

/* --- La barra de la salida ----------------------------------------------

   Para quien llegó por el navegador que Instagram abre adentro de su propia
   aplicación. Ahí Google no deja entrar, la cookie del teléfono queda
   encerrada y la aplicación no se puede instalar; el detalle completo está en
   `playlists/navegador_incrustado.py`.

   Es la hermana de la barra de instalar y se dibuja con el mismo material a
   propósito: crema sobre una casa toda oscura, porque acá lo claro es lo
   primero que ve el ojo, y empujando el contenido en vez de taparlo. Repetir
   esa receta —en vez de reutilizar sus clases— es lo que permite que una
   cambie sin arrastrar a la otra: la de instalar ofrece algo y esta avisa que
   algo no va a funcionar, que no es lo mismo aunque se parezcan.

   No lleva la regla de «solo en el teléfono» que sí tiene la de instalar. No
   le hace falta: el servidor solo la manda cuando reconoció un teléfono, así
   que nunca llega a un computador.

   `[hidden]` manda, y hay que decirlo explícito: `display: grid` le gana al
   `display: none` que el navegador le da al atributo. */

.navegador-barra {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.85rem;
    padding: 0.7rem 0.75rem 0.7rem 0.7rem;
    border: 0;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #f6f1e8, #e9dfd0);
    box-shadow: 0 0.9rem 1.9rem rgba(0, 0, 0, 0.45);
}

.navegador-barra[hidden] {
    display: none;
}

/* La despedida, igual que la de instalar: `hidden` a secas la apaga de golpe y
   el contenido salta hacia arriba de un tirón. El alto lo mide y lo deja en
   `--alto-de-salida` el propio `navegador-externo.js`, porque `auto` no se
   puede animar. */
.navegador-barra.se-despide {
    overflow: hidden;
    pointer-events: none;
    animation: navegador-barra-se-despide 0.28s ease forwards;
}

@keyframes navegador-barra-se-despide {
    from {
        height: var(--alto-de-salida);
        opacity: 1;
        transform: none;
    }

    to {
        height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translateY(-0.4rem);
    }
}

/* El ícono no es el logo, y esa es la diferencia con la barra de al lado. La
   de instalar dice «esto es Wurlitzer»; esta tiene que decir «esto se abre en
   otra parte» antes de que nadie lea una palabra, y para eso sirve una flecha
   que sale de un recuadro y no una marca.

   El cuadro va oscuro por lo mismo que allá: sobre crema, un trazo claro se
   pierde. */
.navegador-barra-icono {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: linear-gradient(160deg, #241a1c, #0f0d0f);
}

.navegador-barra-icono svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: #e1ab98;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.navegador-barra-texto {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    min-width: 0;
}

.navegador-barra-texto strong {
    color: #21100a;
    font-size: 0.88rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.navegador-barra-texto span {
    color: rgba(33, 16, 10, 0.66);
    font-size: 0.79rem;
    line-height: 1.35;
}

.navegador-barra-acciones {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* Relleno y no contorno, como en la barra de instalar: sobre crema un borde
   suave se pierde. El cobre va más oscuro que el de los botones sobre negro
   para que el texto claro se lea encima. */
.navegador-barra-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(105deg, #c9764c, #b05f3d);
    color: #fff6ee;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.navegador-barra-accion:hover,
.navegador-barra-accion:focus-visible {
    color: #fff6ee;
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* Después de copiar, el botón deja de ser un botón y pasa a ser el acuse de
   que la copia salió. Que se vea apagado es justamente el mensaje: ya está,
   no hay que apretarlo de nuevo. */
.navegador-barra-accion:disabled {
    background: rgba(33, 16, 10, 0.09);
    color: rgba(33, 16, 10, 0.6);
    cursor: default;
    filter: none;
    transform: none;
}

/* El aspa se lee como «después», no como «nunca». Discreta a propósito. */
.navegador-barra-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(33, 16, 10, 0.5);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.navegador-barra-cerrar:hover,
.navegador-barra-cerrar:focus-visible {
    background: rgba(33, 16, 10, 0.09);
    color: #21100a;
    outline: none;
}

.navegador-barra-cerrar svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* En iPhone la segunda línea es la barra entera.

   En Android el titular basta —el botón hace el trabajo— y por eso ahí las
   tres cosas caben en una fila. En iPhone no hay botón que resuelva nada: lo
   único que existe es la instrucción de tocar los ••• , así que esa frase no
   se puede apretar ni esconder. Se le da el ancho completo y las acciones
   bajan a su propia fila, con el respaldo de copiar a un lado y el aspa al
   otro.

   Es la decisión contraria a la de la barra de instalar, que en pantallas
   angostas esconde su segunda línea. Allá sobra; acá es lo importante. */
[data-navegador-incrustado="ios"] .navegador-barra {
    grid-template-columns: auto 1fr;
    row-gap: 0.55rem;
}

[data-navegador-incrustado="ios"] .navegador-barra-acciones {
    grid-column: 1 / -1;
    justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
    .navegador-barra-accion,
    .navegador-barra-cerrar {
        transition: none;
    }

    /* `navegador-externo.js` ya se salta la despedida cuando se pide menos
       movimiento; esto es el cinturón, por si la clase llegara a ponerse. */
    .navegador-barra.se-despide {
        animation: none;
    }
}

/* --- El aviso donde iba el botón de Google -------------------------------

   Mismo problema, otro lugar: adentro del navegador incrustado el botón de
   Google no lleva a ninguna parte, así que en su lugar va esto. Va oscuro y no
   crema porque no es una barra que interrumpe la pantalla, es la pieza que
   reemplaza a un botón dentro de un panel que ya existe: tiene que pertenecer
   a ese panel.

   `top-gap` es la misma separación que traía el formulario que reemplaza. */
.google-bloqueado {
    display: grid;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    text-align: left;
}

.google-bloqueado strong {
    color: var(--text-strong);
    font-size: 0.88rem;
    font-weight: 750;
}

.google-bloqueado p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* ---- El menú desplegable de la casa ---------------------------------------

   El `<select>` del navegador no se puede pintar: en Windows abre una lista
   blanca con letras claras encima, ilegible sobre el fondo oscuro. Este es el
   mismo control que «Agregar música» ya usa para elegir género (`.ms-select`,
   dentro de su plantilla), traído acá con nombre propio para que cualquier
   pantalla pueda ocuparlo.

   Cuando le toque una revisión a «Agregar música», conviene que ese `.ms-`
   pase a usar estas clases y quede un solo control en la casa. */
.wz-select {
    position: relative;
}

.wz-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0.9rem;
    color: #f8eee6;
    background: rgba(255, 255, 255, 0.035);
    font: 600 0.86rem "Manrope", sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wz-select-trigger:focus-visible,
.wz-select.is-open .wz-select-trigger {
    outline: none;
    border-color: rgba(217, 139, 101, 0.65);
    box-shadow: 0 0 0 3px rgba(217, 139, 101, 0.11);
}

.wz-select-trigger[data-vacio="1"] {
    color: #988b80;
}

.wz-select-trigger svg {
    width: 0.85rem;
    height: 0.85rem;
    flex: 0 0 auto;
    color: #d98b65;
    transition: transform 180ms ease;
}

.wz-select.is-open .wz-select-trigger svg {
    transform: rotate(180deg);
}

.wz-select-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    right: 0;
    left: 0;
    overflow: hidden auto;
    max-height: 15rem;
    padding: 0.3rem;
    border: 1px solid rgba(217, 139, 101, 0.32);
    border-radius: 0.9rem;
    background: #150f10;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

.wz-select-panel[hidden] {
    display: none;
}

.wz-select-option {
    display: block;
    width: 100%;
    padding: 0.62rem 0.7rem;
    border: 0;
    border-radius: 0.65rem;
    color: #e6d5c6;
    background: transparent;
    font: 700 0.84rem "Manrope", sans-serif;
    text-align: left;
    cursor: pointer;
}

.wz-select-option:hover,
.wz-select-option:focus-visible {
    outline: none;
    color: #fff3e8;
    background: rgba(217, 139, 101, 0.16);
}

.wz-select-option[aria-selected="true"] {
    color: #ffe2d0;
    background: rgba(217, 139, 101, 0.24);
}

/* Sin JavaScript manda el `<select>` de siempre: feo, pero funciona. El menú
   de la casa aparece solo cuando hay con qué moverlo, y ahí el `<select>` se
   esconde de la vista y del lector de pantalla para no quedar duplicado. */
.wz-select > [data-wz-trigger],
.wz-select > [data-wz-panel] {
    display: none;
}

html.js .wz-select > [data-wz-trigger] {
    display: flex;
}

/* El panel se abre quitándole el atributo `hidden`; sin esta regla la de
   arriba lo dejaba en `display: none` para siempre y el menú no se veía. */
html.js .wz-select > [data-wz-panel]:not([hidden]) {
    display: block;
}

html.js .wz-select > [data-wz-campo] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Repertorio atómico: buscar, abrir y administrar una canción. */
/* El repertorio usa el ancho de la casa (`--shell`, 1320 px), el mismo de
   Preparar y Revisar. Antes se apretaba a 46 rem para calzar con «Agregar
   música», y al lado de sus vecinas se veía como una ventana chica: 736 px de
   columna contra 1320, y un título de 32 px contra 48.

   El botón de volver y la forma del título siguen siendo los de «Agregar
   música», que es de donde se entra y a donde se sale. */

.repertoire-atomic-shell {
    display: grid;
    gap: 1.15rem;
    width: 100%;
    padding-bottom: 2rem;
}

.repertoire-atomic-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.2rem;
}

.repertoire-back,
.repertoire-modal-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.018);
    color: #decbbc;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.repertoire-back:hover,
.repertoire-modal-close:hover {
    border-color: rgba(215, 138, 99, 0.4);
    color: #f3ddcd;
}

.repertoire-back svg {
    width: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.repertoire-atomic-head h1 {
    margin: 0;
    color: #fff5ec;
    font: 800 clamp(1.9rem, 5vw, 3rem)/1.04 "Sora", sans-serif;
    letter-spacing: -0.045em;
}

.repertoire-atomic-head p {
    margin: 0.25rem 0 0;
    color: #c9b7a5;
    font-size: 0.86rem;
}

/* La caja entera se comporta como un solo campo: el `input` de adentro no
   tiene borde propio, así que el aviso de foco lo tiene que dar ella. Se usa
   `:focus-within` y el mismo halo salvia de la casa.

   La sombra sale del token `--shadow-md` en vez de un valor inventado: es la
   misma profundidad que tienen las tarjetas del resto de la plataforma. */
.repertoire-main-search {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 4.6rem;
    padding: 0.5rem 0.55rem 0.5rem 1.15rem;
    border: 1px solid rgba(215, 138, 99, 0.32);
    border-radius: 1.05rem;
    background: #110e0f;
    box-shadow: var(--shadow-md);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.repertoire-main-search:focus-within {
    border-color: rgba(215, 138, 99, 0.55);
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(126, 185, 177, 0.16);
}

.repertoire-main-search svg {
    width: 1.2rem;
    fill: none;
    stroke: #cc8c68;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.repertoire-main-search input {
    width: 100%;
    min-height: 2.9rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-strong);
    font-size: 1.02rem;
}

/* El halo lo pone la caja de afuera, no el campo: si lo pusieran los dos, se
   verían dos anillos, uno dentro del otro. */
.repertoire-main-search input:focus {
    box-shadow: none;
}

.repertoire-main-search button {
    min-height: 3rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    background: rgba(215, 138, 99, 0.14);
    color: #efb58f;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.repertoire-main-search button:hover {
    background: rgba(215, 138, 99, 0.22);
    color: #f6cbab;
}

/* ---- La portada: lo que dice tu público ----------------------------------

   Antes acá había cuatro atajos de 2,4 rem, todos del mismo porte, con el
   nombre de la lista y nada más: «Más queridas» podía llevar a mil canciones
   o a ninguna y solo se sabía entrando. Ahora cada uno lleva su número
   adelante, que es lo que hace que valga la pena tocarlo.

   La grilla es de dos columnas y no de cuatro: cuatro cajas en una fila
   quedan del ancho de un botón y el número no alcanza a pesar. */
.repertoire-signals {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.repertoire-signals > p {
    margin: 0;
}

.repertoire-signal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.6rem;
}

.repertoire-signal-card {
    display: grid;
    align-content: start;
    gap: 0.1rem;
    padding: 0.95rem 1rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 1rem);
    background: rgba(12, 12, 14, 0.82);
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease;
}

.repertoire-signal-card strong {
    color: var(--gen-ink, #e8ded6);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.repertoire-signal-card > span {
    color: #e8ded6;
    font-size: 0.82rem;
    font-weight: 700;
}

.repertoire-signal-card small {
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

/* Cada señal se tiñe con su propio color, igual que los géneros: así la
   portada se lee de un vistazo y no como cuatro cajas iguales. */
.repertoire-signal-card.is-trending { --gen-ink: #e9a97f; }
.repertoire-signal-card.is-likes { --gen-ink: #b8e0d8; }
.repertoire-signal-card.is-discussed { --gen-ink: #f0c8c2; }
.repertoire-signal-card.is-requests { --gen-ink: #decbbc; }

.repertoire-signal-card:hover {
    border-color: rgba(215, 138, 99, 0.32);
    background: rgba(20, 19, 21, 0.9);
}

/* Sin datos no hay a qué entrar: la tarjeta se apaga pero no desaparece, para
   que la portada no cambie de forma según la semana. */
.repertoire-signal-card.is-vacia {
    opacity: 0.5;
}

/* Las vistas que no son una señal —todas, sin clasificar, fuera de rotación—
   van en una línea discreta: son puertas de servicio, no el contenido. */
.repertoire-quiet-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
    margin-top: 0.15rem;
}

.repertoire-quiet-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.2rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 160ms ease;
}

.repertoire-quiet-links a:hover {
    color: #e9aa82;
}

.repertoire-quiet-links b {
    color: var(--muted-strong);
    font-weight: 800;
}

/* ---- Los datos de la fila -----------------------------------------------

   Van siempre, no solo cuando ordenaste por ellos: antes, para saber cuándo
   sonó una canción había que reordenar la lista entera. Una línea sola, bajo
   el artista, con separadores dibujados por CSS para no ensuciar la
   plantilla. */
.repertoire-row-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.4rem;
    color: #7d736b;
    font-size: 0.66rem;
    line-height: 1.4;
}

.repertoire-row-facts > span + span::before {
    content: "·";
    margin-right: 0.4rem;
    color: #57504b;
}

/* Lo reciente se enciende: es la diferencia entre una canción que está
   pegando ahora y una que pidieron mucho hace un año. Reciente se cuenta en
   jornadas y no en días, porque un espacio que hace una social a la semana y
   otro que hace ocho al mes no viven el mismo mes. */
.repertoire-row-facts b {
    color: #d49470;
    font-weight: 700;
}

.repertoire-row-facts .repertoire-row-signal.is-warning {
    color: #df947f;
    font-weight: 700;
}

.repertoire-row-facts .repertoire-row-signal.is-rest {
    color: #a99c91;
    font-weight: 700;
}

/* El rechazo usa el rojo del pulgar abajo de Jornadas: es la misma cosa dicha
   en palabras, así que no estrena color. */
.repertoire-row-facts .repertoire-row-signal.is-negative {
    color: #f0c8c2;
    font-weight: 700;
}

/* Con dos menús en la misma fila —Género y Ordenar— el ancho no alcanza en un
   teléfono: se reparten la línea en vez de empujar el conteo. */
@media (max-width: 560px) {
    .repertoire-signal-grid {
        gap: 0.45rem;
    }

    .repertoire-signal-card {
        padding: 0.8rem 0.85rem 0.85rem;
    }

    .repertoire-signal-card strong {
        font-size: 1.4rem;
    }
}

.repertoire-section-title,
.repertoire-result-context {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* A la izquierda qué estás mirando y cuántas son; a la derecha lo que puedes
   hacerle a esa lista. */
.repertoire-result-context {
    align-items: flex-start;
}

/* El bloque de la izquierda ahora tiene tres líneas (rótulo, conteo y orden) y
   el de la derecha dos, así que repartir el sobrante dejaba el menú caído 13 px
   respecto del conteo con el que se lee. Se alinean por arriba y el menú queda
   a la altura de la cifra. */
/* Los tres controles de la lista —volver, género y orden— van en una sola
   línea: son del mismo rango y apilarlos hacía una escalera en la esquina. */
.repertoire-result-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem 0.9rem;
    padding-top: 0.1rem;
}

.repertoire-section-title p,
.repertoire-result-context p {
    margin: 0;
}

.repertoire-section-title a,
.repertoire-result-context a {
    color: #d99a74;
    font-size: 0.73rem;
    font-weight: 800;
    text-decoration: none;
    transition: color 160ms ease;
}

.repertoire-section-title a:hover,
.repertoire-result-context a:hover {
    color: #f0b189;
}

.repertoire-result-context strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-strong);
    font-size: 0.95rem;
}

/* El orden acompaña al conteo en voz baja: dice cómo está ordenada la lista
   sin hacerse pasar por el nombre de la lista. */
.repertoire-result-orden {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.repertoire-sort-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin: 0;
}

/* Un rótulo que repite lo que dice el gatillo no es un rótulo: «Género» al
   lado de «Todos los géneros» ocupaba ancho para decir lo mismo dos veces.
   Se esconde a la vista y sigue nombrando al menú para un lector de
   pantalla. */
.repertoire-sort-label.is-implicito {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.repertoire-sort-form label,
.repertoire-sort-label {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* En esta barra el menú va compacto: es un control secundario al lado del
   conteo, no un campo de formulario de pantalla completa. */
.repertoire-sort-select .wz-select-trigger {
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.repertoire-sort-select .wz-select-panel {
    left: auto;
    min-width: 11rem;
}

.repertoire-sort-form select {
    width: auto;
    min-height: 2.35rem;
    padding: 0.45rem 2rem 0.45rem 0.7rem;
    border-color: var(--line);
    border-radius: 0.7rem;
    background-color: var(--surface-soft);
    color: var(--muted-strong);
    font-size: 0.72rem;
}

.repertoire-browse {
    display: grid;
    gap: 0.65rem;
}

.repertoire-category-list,
.repertoire-result-list {
    display: grid;
    gap: 0.48rem;
}

.repertoire-category-row,
.repertoire-result-row,
.repertoire-add-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 4.35rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(12, 12, 14, 0.92);
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

/* Los 160 ms son los del botón de la casa. Sin esto, el repertorio era la
   única pantalla que cambiaba de color de golpe al pasar el mouse, y se
   sentía más tosca que sus vecinas aunque se viera igual quieta.

   Lo que no se copia de Preparar es el `transform` del hover: allá son tres o
   cuatro filas y acá son veinticinco, y veinticinco filas que se levantan al
   pasar el mouse marean en vez de responder. */

.repertoire-category-row:hover,
.repertoire-result-row:hover,
.repertoire-add-link:hover {
    border-color: rgba(215, 138, 99, 0.28);
    background: rgba(19, 16, 17, 0.96);
}

/* El mismo halo salvia que la casa le pone a `.button` y a los campos. Estas
   filas son botones de verdad, pero no llevan la clase `.button`, así que se
   quedaban con el contorno que dibuja el navegador: gris oscuro sobre fondo
   negro, o sea invisible. Quien recorre la pantalla con el teclado no tenía
   cómo saber dónde estaba parado. */
.repertoire-category-row:focus-visible,
.repertoire-result-row:focus-visible,
.repertoire-add-link:focus-visible,
.repertoire-back:focus-visible,
.repertoire-modal-close:focus-visible,
.repertoire-section-title a:focus-visible,
.repertoire-result-context a:focus-visible,
.repertoire-main-search button:focus-visible {
    outline: none;
    border-color: rgba(215, 138, 99, 0.42);
    box-shadow: 0 0 0 4px rgba(126, 185, 177, 0.16);
}

.repertoire-category-icon {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid currentColor;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.025);
    color: #c98563;
}

.repertoire-category-icon:not(.pill-genre-default) {
    border-color: rgba(var(--gen), 0.72);
    background: rgba(var(--gen), 0.1);
    color: var(--gen-ink);
}

.repertoire-category-icon.is-muted {
    color: #81766e;
}

.repertoire-category-icon svg {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.repertoire-category-copy,
.repertoire-result-copy,
.repertoire-add-link > span {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.repertoire-category-copy strong,
.repertoire-result-copy strong,
.repertoire-add-link strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repertoire-category-copy span,
.repertoire-result-copy span,
.repertoire-add-link small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repertoire-go,
.repertoire-add-link > svg {
    width: 1.1rem;
    fill: none;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.repertoire-add-link {
    margin-top: 0.1rem;
    grid-template-columns: 1fr auto;
}

.repertoire-add-link strong {
    color: #e9aa82;
}

/* La fila tiene dos formas. Con ancho, los datos de la canción son una
   columna más y todo cabe en una línea, como una tabla. Sin ancho, bajan a una
   segunda línea debajo del nombre. Van por áreas y no por orden de aparición
   para que sea el mismo HTML en los dos casos. */
.repertoire-result-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
        "marca copia pulgares genero flecha"
        "marca datos datos    datos  flecha";
    row-gap: 0.15rem;
    appearance: none;
    cursor: pointer;
    font: inherit;
}

.repertoire-result-row > .repertoire-result-mark { grid-area: marca; }
.repertoire-result-row > .repertoire-result-copy { grid-area: copia; }
.repertoire-result-row > .repertoire-row-facts { grid-area: datos; }
.repertoire-result-row > .repertoire-result-feedback { grid-area: pulgares; }
.repertoire-result-row > .repertoire-result-meta { grid-area: genero; }
.repertoire-result-row > .repertoire-go { grid-area: flecha; }

@media (min-width: 1000px) {
    .repertoire-result-row {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 17rem) auto auto auto;
        grid-template-areas: "marca copia datos pulgares genero flecha";
    }

    .repertoire-result-row > .repertoire-row-facts {
        justify-content: flex-start;
    }
}

.repertoire-result-feedback {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-end;
    min-width: 5rem;
    color: var(--muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.repertoire-result-feedback.is-empty {
    visibility: hidden;
}

.repertoire-result-feedback > span {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
}

/* ---- Los pulgares ---------------------------------------------------------

   El dibujo y los dos colores son los de «Respuesta del público» en Jornadas
   (`.history-feedback-count`, dentro de history_detail.html): salvia para el
   me gusta, rojo apagado para el no me gusta. La misma cifra tiene que verse
   igual en las dos pantallas.

   Lo que no se copia es la cápsula con borde y fondo: allá las cifras van en
   tarjetas grandes y acá se repiten en veinticinco filas seguidas, donde
   veinticinco pares de píldoras tapan los nombres de las canciones. Se
   conserva el símbolo y el color, que es lo que se reconoce.

   Si esos tonos cambian en Jornadas, hay que cambiarlos también acá. */
.repertoire-result-feedback svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    flex-shrink: 0;
}

.repertoire-result-feedback .is-liked {
    color: #b8e0d8;
}

.repertoire-result-feedback .is-disliked {
    color: #f0c8c2;
}

.repertoire-result-feedback strong {
    color: inherit;
    font-size: inherit;
    font-weight: 700;
}

/* Un cero no es una opinión: se apaga para que las canciones que sí tienen
   respuesta salten a la vista al recorrer la lista. */
.repertoire-result-feedback .is-cero {
    color: #6f665f;
}

.repertoire-trending-mark {
    width: 0.82rem;
    height: 0.82rem;
    margin-left: 0.35rem;
    fill: none;
    stroke: #d49470;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    vertical-align: -0.1em;
}

.repertoire-result-row.is-excluded {
    opacity: 0.6;
}

.repertoire-result-mark {
    width: 0.34rem;
    height: 2.4rem;
    border-radius: 999px;
    background: currentColor;
}

.repertoire-result-mark:not(.pill-genre-default) {
    background: rgb(var(--gen));
}

/* El ancho fijo es lo que mantiene quietos los números de al lado: sin él la
   columna la manda la palabra más larga de cada fila —«Merengue» contra
   «Salsa»— y los pulgares se corren de una canción a la siguiente. */
.repertoire-result-meta {
    display: grid;
    justify-items: end;
    gap: 0.2rem;
    min-width: 4.75rem;
    color: var(--muted-strong);
    font-size: 0.66rem;
}

.repertoire-result-meta small {
    color: #d49470;
    font-size: 0.62rem;
}

.repertoire-no-results {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    padding: 2.2rem 1.2rem;
    border: 1px dashed var(--line);
    border-radius: 1rem;
    text-align: center;
}

.repertoire-no-results strong {
    color: var(--text-strong);
}

.repertoire-no-results p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.repertoire-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--muted);
    font-size: 0.75rem;
}

.repertoire-atomic-page .repertoire-pagination {
    flex-wrap: wrap;
    gap: 0.45rem;
    border-top: 0;
}

.repertoire-atomic-page .repertoire-pagination > span {
    padding-inline: 0.35rem;
}

.repertoire-modal-close {
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
}

.repertoire-detail-body {
    display: grid;
    gap: 1rem;
}

.repertoire-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.repertoire-detail-pills .pill[hidden] {
    display: none;
}

.repertoire-category-editor {
    display: grid;
    gap: 0.4rem;
}

.repertoire-category-editor select {
    width: 100%;
}

.repertoire-detail-section {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.repertoire-detail-section[hidden] {
    display: none;
}

.repertoire-detail-section h3 {
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.repertoire-detail-section > p {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.repertoire-detail-signal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
}

.repertoire-detail-signal span {
    color: var(--muted);
    font-size: 0.68rem;
}

.repertoire-detail-signal strong {
    color: var(--muted-strong);
    font-size: 0.72rem;
    text-align: right;
}

.repertoire-detail-signal[data-tone="warning"] strong,
.repertoire-detail-signal[data-tone="rest"] strong {
    color: #dfa07c;
}

.repertoire-detail-signal[data-tone="negative"] strong {
    color: #f0c8c2;
}

/* ---- Skeletons ------------------------------------------------------------

   El repertorio no carga nada por detrás: cada filtro, cada género y cada
   página es una visita nueva. En una conexión lenta eso deja la lista vieja
   quieta en pantalla, sin señal de que algo está pasando, y la persona vuelve
   a tocar el mismo botón.

   Estas filas grises ocupan el lugar de la lista mientras el navegador trae la
   siguiente. Aparecen recién a los 180 ms (lo pone `library.html`): si la
   página llega antes —que es lo normal en el local— nunca se ven, y así no
   agregamos un parpadeo gratis a quien no lo necesita. */
/* Los 180 ms de retraso viven acá y no en un temporizador de JavaScript: el
   navegador congela los `setTimeout` de la página que está por reemplazar,
   pero sigue animando. `both` mantiene el `opacity: 0` durante la espera, así
   que en una conexión rápida esto no alcanza a dibujarse nunca. */
.repertoire-skeleton-list {
    display: grid;
    gap: 0.48rem;
    animation: repertoire-aparecer 140ms ease-out 180ms both;
}

@keyframes repertoire-aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

.repertoire-skeleton-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.35rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(12, 12, 14, 0.92);
}

.repertoire-skeleton-copy {
    display: grid;
    gap: 0.45rem;
}

.repertoire-skeleton-bar {
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(243, 235, 221, 0.07);
}

.repertoire-skeleton-mark {
    width: 0.34rem;
    height: 2.4rem;
    border-radius: 999px;
    background: rgba(243, 235, 221, 0.07);
}

.repertoire-skeleton-tail {
    width: 3.4rem;
    height: 0.62rem;
    border-radius: 999px;
    background: rgba(243, 235, 221, 0.07);
}

/* El brillo recorre la fila una sola vez por vuelta y no cambia de tamaño:
   solo se mueve, así que no obliga al navegador a rehacer el diseño. */
.repertoire-skeleton-bar,
.repertoire-skeleton-mark,
.repertoire-skeleton-tail{
    position: relative;
    overflow: hidden;
}

.repertoire-skeleton-bar::after,
.repertoire-skeleton-mark::after,
.repertoire-skeleton-tail::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(243, 235, 221, 0.07),
        transparent
    );
    transform: translateX(-100%);
    animation: repertoire-shimmer 1.25s ease-in-out infinite;
}

@keyframes repertoire-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .repertoire-skeleton-bar::after,
    .repertoire-skeleton-mark::after,
    .repertoire-skeleton-tail::after{
        animation: none;
    }

    /* El brillo se va, pero la demora se queda: es lo que evita el parpadeo
       cuando la página llega rápido. Por eso no se apaga la animación entera,
       solo se le saca el movimiento. */
    .repertoire-skeleton-list {
        animation: repertoire-aparecer 1ms linear 180ms both;
    }
}

.repertoire-clasificacion-grupo {
    display: grid;
    gap: 0.5rem;
}

.repertoire-clasificacion-rotulo {
    color: var(--muted-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* La casilla de moda y las de etiquetas son de la misma familia: el mismo alto
   y el mismo aire adentro, aunque una vaya encendida en cobre. */
body.repertoire-atomic-page .classification-trending-choice {
    min-height: 3.5rem;
    padding: 0.85rem 0.95rem;
}

body.repertoire-atomic-page .tag-editor-choice {
    min-height: 3.5rem;
}

/* ---- El panel de la canción ----------------------------------------------

   Se despliega dentro de la fila y empuja a las que siguen. Mismo gesto y
   misma animación que el reproductor del orden de la noche en Operar.

   Va pegado a la fila —sin separación y con las esquinas de arriba rectas—
   para que los dos se lean como una sola pieza que creció, y no como una
   tarjeta nueva que apareció debajo. */
.repertoire-panel {
    overflow: hidden;
    padding: 0.95rem;
    border: 1px solid rgba(215, 138, 99, 0.28);
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    background: rgba(19, 16, 17, 0.96);
    animation: repertoire-panel-in 220ms ease;
}

.repertoire-panel.is-closing {
    animation: repertoire-panel-out 200ms ease forwards;
    pointer-events: none;
}

@keyframes repertoire-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes repertoire-panel-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* La fila abierta pierde la curva de abajo y se queda encendida: es la que
   manda sobre el panel. */
.repertoire-result-row.is-abierta {
    border-color: rgba(215, 138, 99, 0.28);
    border-bottom-color: transparent;
    border-radius: 1rem 1rem 0 0;
    background: rgba(19, 16, 17, 0.96);
}

.repertoire-result-row.is-abierta .repertoire-go {
    transform: rotate(90deg);
}

.repertoire-go {
    transition: transform 200ms ease;
}

.repertoire-panel > * + * {
    margin-top: 0.85rem;
}

/* ---- Lo que se lee no se viste de botón --------------------------------

   «Bachata», «Ya sonó», «Sin etiquetas» y la tendencia dicen cómo está la
   canción: no se tocan. Con borde, fondo y 2 rem de alto tenían exactamente la
   misma forma que «Clasificar» y «Sacar de rotación», que están en el mismo
   panel dos dedos más abajo. Daban ganas de apretarlas y no pasaba nada.

   Pierden la cápsula y se leen como una línea de datos, igual que la de la
   fila. Lo único que conservan es el color: el género se reconoce por él en
   toda la pantalla, y la tendencia se enciende porque es un estado que vence.

   Va acotado al panel a propósito: `.pill` la usan muchas pantallas y esto
   parte acá. */
.repertoire-panel-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.4rem;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.5;
}

.repertoire-panel-pills .pill {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    white-space: normal;
}

.repertoire-panel-pills .pill + .pill::before {
    content: "·";
    margin-right: 0.4rem;
    color: #57504b;
}

.repertoire-panel-pills .pill-genre {
    color: var(--gen-ink, var(--muted-strong));
    font-weight: 800;
}

.repertoire-panel-pills [data-panel-trending] {
    color: #d49470;
    font-weight: 700;
}

.repertoire-panel-pills .pill[hidden] {
    display: none;
}

.repertoire-panel-cuerpo {
    display: grid;
    gap: 0.7rem;
}

.repertoire-panel-cuerpo[hidden] {
    display: none;
}

.repertoire-panel-actividad {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
}

.repertoire-panel-actividad[hidden] {
    display: none;
}

/* Los dos van lado a lado y se reparten el ancho. En el teléfono se apilaban
   por una regla de la casa —bajo 560 px todo `.button` va a ancho completo—,
   y dos botones apilados gastaban casi un centímetro de alto para nada: los
   nombres son cortos y caben de sobra en una línea. */
.repertoire-panel-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.repertoire-panel-acciones .button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* `display: flex` le gana a `[hidden]`, así que esconderlos desde el guion no
   bastaba: es la trampa que el CLAUDE.md de este repositorio advierte. */
.repertoire-panel-acciones[hidden] {
    display: none;
}

@media (max-width: 560px) {
    /* Siguen midiendo lo que mide un dedo aunque ya no ocupen la línea entera. */
    .repertoire-panel-acciones .button {
        min-height: 44px;
    }
}

.repertoire-panel-acciones form {
    margin: 0;
}

.repertoire-accion-sacar {
    margin-left: auto;
}

/* ---- Los formularios, también adentro ------------------------------------

   Clasificar y sacar de rotación se despliegan debajo de las acciones, en el
   mismo panel. Antes cada uno abría su propia caja flotante encima de la que
   ya estaba abierta. */
.repertoire-formulario {
    display: grid;
    gap: 1.15rem;
    margin: 0.85rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

/* ---- Clasificar: el género manda ----------------------------------------

   Acá la decisión es en qué género va la canción. «Canción de moda» venía en
   una tarjeta cobre de 3,25 rem con fondo y borde, así que pesaba más que el
   género aunque sea lo secundario, y cada etiqueta traía su propia caja de 3
   rem: tres bloques apilados para tres cosas chicas.

   Ahora el género va primero y solo, las etiquetas son fichas en una línea, y
   la moda es una línea con su casilla. Sigue siendo evidente que se tocan
   —llevan su casilla a la vista— sin gritar más que la decisión principal. */
.repertoire-formulario {
    gap: 0.9rem;
}

/* Las fichas: una para el género, otra para cada etiqueta. Son controles y se
   visten como tales —se aprietan y se ven apretadas—, al revés que los rótulos
   del panel, que solo se leen.

   La casilla se esconde porque la ficha entera ya dice si está elegida: la
   elegida se pinta con el color de su género, que es el mismo con el que esa
   canción aparece en toda la pantalla. */
.repertoire-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* La etiqueta lleva la clase del género solo para heredar su color; lo que se
   pinta es el `span` de adentro. Sin esto, `.pill-genre-default` le dibujaba
   encima su propio fondo cuadrado. */
.repertoire-ficha {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.repertoire-ficha input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.repertoire-ficha span {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.repertoire-ficha span:hover {
    border-color: var(--line);
    color: var(--muted-strong);
}

.repertoire-ficha input:checked + span {
    border-color: rgba(var(--gen), 0.5);
    background: rgba(var(--gen), 0.22);
    color: var(--gen-ink);
}

/* Sin color propio —«Sin clasificar» y las etiquetas— la elegida se enciende
   con la tinta de la casa. */
.repertoire-ficha.pill-genre-default input:checked + span,
.repertoire-ficha:not([class*="pill-genre-"]) input:checked + span {
    border-color: rgba(215, 138, 99, 0.45);
    background: rgba(215, 138, 99, 0.16);
    color: #efb58f;
}

.repertoire-ficha input:focus-visible + span {
    outline: none;
    box-shadow: 0 0 0 4px rgba(126, 185, 177, 0.16);
}

.repertoire-formulario .tag-editor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.repertoire-formulario .tag-editor-choice {
    min-height: 2.3rem;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.repertoire-formulario .tag-editor-choice:hover {
    transform: none;
}

.repertoire-formulario .classification-trending-choice {
    align-items: center;
    gap: 0.6rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.repertoire-formulario .classification-trending-choice span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.4rem;
}

.repertoire-formulario .classification-trending-choice strong {
    font-size: 0.84rem;
    font-weight: 800;
}

.repertoire-formulario .classification-trending-choice small {
    font-size: 0.74rem;
}

.repertoire-formulario-aviso {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.repertoire-formulario-pie {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
    .repertoire-panel,
    .repertoire-panel.is-closing,
    .repertoire-go {
        animation: none;
        transition: none;
    }
}

/* ---- Pedidas para esta noche --------------------------------------------

   Comparte con el repertorio la cáscara, la cabecera y la fila: son la misma
   casa. Lo suyo es esto. */
/* Las que esperan decisión van arriba y en su propio bloque: no son parte de
   la lista de esta noche todavía, y mezclarlas haría creer que van a sonar. */
.pedidas-esperando {
    display: grid;
    gap: 0.5rem;
}

.pedidas-esperando > p {
    margin: 0;
}

/* Las que esperan decisión van arriba, en su propio grupo, pero son filas
   iguales a las de abajo: mismo alto, misma densidad, y se abren igual. Antes
   eran una tarjeta aparte, más grande y sin reproductor —justo la canción que
   no conoces era la única que no se podía escuchar—. */
.pedidas-esperando {
    display: grid;
    gap: 0.5rem;
}

.pedidas-esperando > p {
    margin: 0;
}

/* Las acciones viven dentro de la fila abierta, bajo el reproductor. */
.candidata-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.6rem;
}

.candidata-acciones form {
    margin: 0;
}

.candidata-acciones .button {
    width: auto;
    min-height: 44px;
}

.candidata-primera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
}

/* «Otras opciones» no compite con Agregar: es texto con una flecha, y la
   flecha gira cuando lo de abajo está abierto. */
.candidata-ver-mas {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.candidata-ver-mas:hover {
    color: #e9aa82;
}

.candidata-ver-mas svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.candidata-ver-mas.is-abierto svg {
    transform: rotate(180deg);
}

/* Ojo con `[hidden]`: cualquier `display` le gana, así que el estado cerrado
   se declara aparte. Es la trampa documentada en CLAUDE.md. */
.candidata-mas {
    display: grid;
    gap: 0.55rem;
    width: 100%;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-default);
}

.candidata-mas[hidden] {
    display: none;
}

.candidata-mas .eyebrow {
    margin: 0;
}

.candidata-generos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}

/* Cada estilo con su color, como en todo el resto de la casa: la ficha se
   reconoce antes de leerla. */
.candidata-genero {
    width: auto;
    min-height: 2.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(var(--gen), 0.32);
    border-radius: 999px;
    background: rgba(var(--gen), 0.12);
    color: var(--gen-ink, var(--muted-strong));
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.candidata-genero:hover {
    border-color: rgba(var(--gen), 0.55);
    background: rgba(var(--gen), 0.22);
}

/* Separado de los géneros con una línea: pegado debajo y con la misma forma,
   «No incorporarla» se leía como un estilo más de la fila de arriba. */
.candidata-otras {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-top: 0.15rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-default);
}

.candidata-opcion {
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.candidata-opcion:hover {
    color: var(--muted-strong);
}

/* No es un enlace de pie de página: es la decisión que se toma cuando llega
   una canción que no quieres, o derechamente una broma. Tenue no puede ser. */
.candidata-opcion.es-descartar {
    padding: 0 13px;
    border: 1px solid rgba(200, 106, 95, .42);
    border-radius: 999px;
    color: #e3a49c;
}

.candidata-opcion.es-descartar:hover {
    border-color: rgba(200, 106, 95, .7);
    background: rgba(200, 106, 95, .12);
    color: #f0bcb2;
}

/* El reparto por estilo: fichas de lectura, no controles. Van con el color de
   su género, como todo lo demás, y la que no cabe se enciende. */
.pedidas-reparto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: -0.35rem;
}

.pedidas-estilo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(var(--gen), 0.28);
    border-radius: 999px;
    background: rgba(var(--gen), 0.12);
    color: var(--muted);
    font-size: 0.7rem;
}

.pedidas-estilo b {
    color: var(--gen-ink, var(--muted-strong));
    font-weight: 800;
}

/* Más pedidas que puestos: alguna se va a quedar fuera y conviene saberlo
   antes de generar, no después. */
.pedidas-estilo.no-caben {
    border-color: rgba(223, 148, 127, 0.45);
    background: rgba(223, 148, 127, 0.12);
    color: #df947f;
}

.pedidas-estilo.no-caben b {
    color: #f0c8c2;
}

/* Entró a la jornada: el verde salvia de «me gusta», que en esta casa es lo
   que salió bien. */
.repertoire-row-facts .repertoire-row-signal.is-dentro {
    color: #b8e0d8;
    font-weight: 700;
}

/* La salida de la pantalla: lo que sigue después de mirar los pedidos es
   armar la noche. La nota explica y el botón lleva. */
.pedidas-salida {
    display: grid;
    justify-items: start;
    gap: 0.6rem;
    margin-top: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

/* Mide lo que mide su texto, no la pantalla entera. Bajo 560 px una regla de
   la casa estira todo `.button`, y acá eso lo dejaba gritando: esta pantalla
   es para mirar, y armar la noche es el paso siguiente, no su propósito.

   El mismo botón, con el mismo texto, ocupa el 64 % del ancho en Preparar y
   se lee a 15,7 px. Esto lo iguala: medido, no es una preferencia. */
.pedidas-salida .button {
    width: auto;
    min-height: 44px;
    padding: 0.9rem 2rem;
    font-size: 0.98rem;
}

.repertoire-nota-pie {
    margin: 0.1rem 0 0;
    color: var(--muted);
    font-size: 0.72rem;
}

/* El reproductor cuelga de la fila como el panel del repertorio, pero acá no
   lleva nada más adentro: la pantalla solo mira. */
.repertoire-panel > iframe {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 80px;
    border: 0;
    border-radius: 1rem;
}

.repertoire-panel.is-esperando {
    position: relative;
    min-height: 80px;
    background: rgba(243, 235, 221, 0.035);
}

.repertoire-panel.is-esperando::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(243, 235, 221, 0.07),
        transparent
    );
    transform: translateX(-100%);
    animation: repertoire-shimmer 1.25s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .repertoire-panel.is-esperando::after {
        animation: none;
    }
}

/* Cambiar de género o de orden no recarga la página: la lista se atenúa
   mientras llega la nueva y conserva su alto, así uno se queda donde estaba
   leyendo. Vaciarla dejaba la página corta y el navegador devolvía el scroll
   arriba del todo, que es justo lo que se quería evitar. */
[data-library-results].is-cambiando {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    [data-library-results].is-cambiando {
        transition: none;
    }
}

/* ---- Escuchar dentro de la lista -----------------------------------------

   Calcado de la cabina (`.cj-demo` y `.cj-listen`, en cabina_jornada.html): el
   reproductor baja debajo de la fila y empuja lo que sigue, en vez de tapar la
   pantalla. Mismos 220 ms de entrada, mismos 80 px de alto, misma marca en la
   fila que está sonando. Escuchar una canción se hace igual en toda la casa.

   Acá `.cj-demo` no sirve tal cual porque allá vive dentro de una grilla y usa
   `grid-column: 1 / -1`; en el repertorio el reproductor es hermano de la fila,
   dentro del mismo envoltorio. */
.repertoire-result-item {
    display: grid;
}

/* La espera se pinta en el hueco que el reproductor va a ocupar, y él la tapa
   al llegar. No se esconde nada: el aviso anterior escondía el iframe hasta
   que avisara que había cargado, y un iframe escondido no carga nunca.

   Mide los mismos 80 px del embed, así que cuando la canción llega la lista no
   pega un salto. */
.repertoire-panel [data-panel-demo-host].is-esperando {
    position: relative;
    overflow: hidden;
    min-height: 80px;
    border-radius: 1rem;
    background: rgba(243, 235, 221, 0.035);
}

.repertoire-panel [data-panel-demo-host].is-esperando::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(243, 235, 221, 0.07),
        transparent
    );
    transform: translateX(-100%);
    animation: repertoire-shimmer 1.25s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .repertoire-panel [data-panel-demo-host].is-esperando::after {
        animation: none;
    }
}

.repertoire-panel [data-panel-demo-host] iframe {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 80px;
    border: 0;
    border-radius: 1rem;
}

.repertoire-result-row.is-sonando {
    border-color: rgba(215, 138, 99, 0.55);
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 560px) {
    body.repertoire-atomic-page .main-shell {
        padding-inline: 0.7rem;
    }

    .repertoire-atomic-shell {
        gap: 0.95rem;
        padding-bottom: 5.5rem;
    }

    .repertoire-main-search {
        min-height: 3.75rem;
    }

    .repertoire-main-search button {
        width: 2.9rem;
        overflow: hidden;
        color: transparent;
        position: relative;
    }

    .repertoire-main-search button::after {
        content: "→";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #efb58f;
        font-size: 1rem;
    }

    .repertoire-category-row,
    .repertoire-result-row,
    .repertoire-add-link {
        min-height: 4.05rem;
        border-radius: 0.85rem;
    }

    .repertoire-result-meta {
        display: none;
    }

    .repertoire-result-row {
        /* sin la columna del género, que acá se esconde */
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "marca copia pulgares flecha"
            "marca datos datos    flecha";
    }

    .repertoire-result-feedback {
        gap: 0.35rem;
    }

    

    .repertoire-skeleton-row {
        min-height: 4.05rem;
        border-radius: 0.85rem;
    }

    

    /* ---- En el teléfono manda el nombre --------------------------------

       Medido antes: el nombre se quedaba con 143 px de los 368 de la fila y
       los adornos con el resto, así que salía «Mil Preguntas - Bach…» y
       «Promise (feat. Usher…». El culpable era el ancho fijo de 5 rem que le
       puse a los pulgares para que no bailaran: en el escritorio sobra sitio
       y sirve, en el teléfono se lo quita al único dato que se busca.

       Acá los pulgares miden lo que miden y el aire entre columnas se
       aprieta. En el teléfono no está la columna del género, así que la
       lista igual se lee derecha. */
    .repertoire-result-row {
        gap: 0.5rem;
    }

    .repertoire-result-feedback {
        min-width: 0;
    }

    .repertoire-back,
    .repertoire-modal-close {
        width: 2.75rem;
        height: 2.75rem;
    }

    .repertoire-sort-select .wz-select-trigger {
        min-height: 44px;
    }

    .repertoire-pagination .button-small {
        min-height: 44px;
    }

    .repertoire-quiet-links a {
        min-height: 44px;
    }

    /* Los dos menús comparten una sola fila: apilados uno sobre otro se comían
       tres centímetros de alto para decir dos cosas. */
    .repertoire-result-context {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.5rem 1rem;
    }

    .repertoire-result-controls {
        display: contents;
    }

    .repertoire-result-context .repertoire-sort-form {
        grid-row: 2;
    }

    .repertoire-result-context .repertoire-genre-select {
        grid-column: 1;
    }

    /* El de género arranca en el margen, a plomo con el conteo de arriba; el
       del orden termina en el otro margen. */
    .repertoire-result-context .repertoire-sort-form:first-of-type {
        justify-content: flex-start;
    }

    /* El rótulo se esconde pero sigue nombrando al menú para quien usa lector
       de pantalla: los dos gatillos ya dicen qué son —«Todos los géneros» y el
       criterio elegido— y la palabra al lado solo robaba ancho. */
    .repertoire-sort-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* El menú se abre hacia el lado donde hay pantalla. El de género vive a la
   izquierda de la fila, así que se ancla por la izquierda; anclado a la
   derecha —como el del orden— sus 11 rem se salían del teléfono y las
   opciones aparecían cortadas por el borde. */
.repertoire-genre-select .wz-select-panel {
    right: auto;
    left: 0;
}

@media (max-width: 560px) {
    .repertoire-sort-select .wz-select-panel {
        max-width: calc(100vw - 1.6rem);
    }
}