:root {
    --tms-primary: #5b3df5;
    --tms-primary-dark: #4327d7;
    --tms-surface: #f5f6fa;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

body.admin-body {
    background: var(--tms-surface);
    color: #202235;
}

.login-card {
    width: min(100%, 460px);
    border-radius: 1.5rem;
}

.brand-mark,
.action-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(91, 61, 245, 0.12);
    color: var(--tms-primary);
    font-size: 2rem;
    font-weight: 700;
}

.admin-brand img,
.dashboard-logo {
    display: block;
    height: 50px;
    object-fit: contain;
    width: 50px;
}

.admin-wordmark {
    align-items: center;
    color: var(--tms-primary);
    display: inline-flex;
    font-size: 1.08rem;
    font-weight: 850;
    gap: .65rem;
    letter-spacing: -.02em;
    text-decoration: none;
}

.admin-wordmark:hover,
.admin-wordmark:focus-visible { color: var(--tms-primary-dark); }

.admin-wordmark-symbol {
    align-items: center;
    background: linear-gradient(145deg, var(--tms-primary), #795fff);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(91, 61, 245, .22);
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.admin-wordmark-lg { font-size: 1.35rem; }
.admin-wordmark-lg .admin-wordmark-symbol { border-radius: 18px; font-size: 1.8rem; height: 62px; width: 62px; }

.admin-wordmark-image {
    display: block;
    height: 58px;
    object-fit: contain;
    width: auto;
}

.admin-login-wordmark {
    display: block;
    height: auto;
    max-width: 100%;
    width: 210px;
}

.login-brand-link {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    width: fit-content;
}

.login-brand-link .admin-login-wordmark { width: 170px; }

.login-logo {
    display: block;
    height: 132px;
    object-fit: contain;
    width: 132px;
}

@media (max-width: 575.98px) {
    .admin-wordmark-image { height: 50px; }
    .admin-login-wordmark { width: 180px; }
    .login-brand-link .admin-login-wordmark { width: 150px; }
}

.btn-primary {
    --bs-btn-bg: var(--tms-primary);
    --bs-btn-border-color: var(--tms-primary);
    --bs-btn-hover-bg: var(--tms-primary-dark);
    --bs-btn-hover-border-color: var(--tms-primary-dark);
}

.text-primary {
    color: var(--tms-primary) !important;
}

.form-control:focus {
    border-color: rgba(91, 61, 245, 0.7);
    box-shadow: 0 0 0 0.25rem rgba(91, 61, 245, 0.14);
}

.action-card {
    border-radius: 1.25rem;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.action-card:hover,
.action-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2.5rem rgba(32, 34, 53, 0.12) !important;
}

.action-icon-live {
    color: #e53655;
    background: rgba(229, 54, 85, 0.12);
}

.admin-panel,
.live-show-card,
.empty-state {
    border-radius: 1.25rem;
}

.table > :not(caption) > * > * {
    padding: 1rem 1.25rem;
}

.table thead th {
    background: #f8f9fc;
    border-bottom-width: 1px;
    color: #656779;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.live-show-card {
    border-left: 5px solid #e53655 !important;
}

.show-category-picker {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.show-category-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    justify-content: space-between;
}

.show-category-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.show-category-option {
    align-items: center;
    background: #f8f7ff;
    border: 1px solid #e3dfff;
    border-radius: .8rem;
    cursor: pointer;
    display: flex;
    gap: .65rem;
    min-height: 46px;
    padding: .65rem .8rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.show-category-option:has(.form-check-input:checked) {
    background: #eeeaff;
    border-color: #9d8cff;
    color: var(--tms-primary-dark);
}

.show-category-option .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.next-request-card {
    background: radial-gradient(circle at 90% 15%, rgba(255, 255, 255, .18), transparent 30%), linear-gradient(135deg, #2d1a86, #6344f6);
    border-radius: 1.5rem;
    color: #fff;
    overflow: hidden;
}

.next-request-label {
    color: rgba(255, 255, 255, .72);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.next-request-title {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1;
}

.next-request-artist {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1.15rem, 2.5vw, 1.65rem);
    font-weight: 600;
}

.next-request-meta span {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    font-size: .82rem;
    padding: .45rem .7rem;
}

.next-request-dedication {
    background: #fff;
    border-radius: 14px;
    color: #24175f;
    padding: 1rem 1.1rem;
}

.next-request-dedication span,
.next-request-person span { color: #6d648f; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.next-request-dedication strong,
.next-request-person strong { display: block; font-size: clamp(1.08rem, 2.5vw, 1.35rem); line-height: 1.25; margin-top: .3rem; }

.next-request-person {
    background: #ffdc59;
    border-radius: 14px;
    color: #24175f;
    padding: 1rem 1.1rem;
}

.upcoming-request-item { border-color: #eceaf5; }

.upcoming-position {
    align-items: center;
    background: #ede9ff;
    border-radius: 50%;
    color: var(--tms-primary);
    display: inline-flex;
    flex: 0 0 38px;
    font-weight: 800;
    height: 38px;
    justify-content: center;
}

.upcoming-details { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.upcoming-details span { background: #f4f2fa; border-radius: 999px; color: #5d5870; font-size: .82rem; padding: .3rem .55rem; }
.min-w-0 { min-width: 0; }

.history-show-summary { border-left: 5px solid var(--tms-primary) !important; }

.history-stat {
    background: #f1effa;
    border-radius: 999px;
    color: #5d5870;
    font-size: .88rem;
    padding: .45rem .75rem;
}

.history-stat strong { color: #2c244d; }

.history-request-details {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(130px, .8fr) minmax(180px, 1.5fr) minmax(70px, .4fr);
}

.history-request-details span {
    background: #f6f5fa;
    border-radius: .75rem;
    padding: .65rem .75rem;
}

.history-request-details small { color: #777187; display: block; font-weight: 700; margin-bottom: .15rem; text-transform: uppercase; }
.history-request-details strong { color: #29243a; display: block; overflow-wrap: anywhere; }

.requests-show-strip {
    background: linear-gradient(90deg, #4328d5, #6549eb);
    color: #fff;
    padding: .7rem 0;
}

.requests-show-strip-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    line-height: 1.25;
    min-height: 30px;
}

.requests-show-strip-content > strong { line-height: 1.25; }

.requests-show-strip-date {
    border-left: 1px solid rgba(255, 255, 255, .35);
    font-size: .85rem;
    opacity: .85;
    padding-left: .75rem;
}

.requests-show-strip-venue {
    font-size: .85rem;
    opacity: .9;
}

.requests-show-strip-refresh {
    align-items: center;
    display: inline-flex;
    font-size: .78rem;
    gap: .3rem;
    margin-left: auto;
    opacity: .9;
    white-space: nowrap;
}

.requests-show-strip-refresh strong { font-variant-numeric: tabular-nums; }

.requests-show-strip-close {
    display: inline-flex;
    margin-left: .25rem;
}

.requests-show-strip-close .btn {
    min-height: 34px;
    white-space: nowrap;
}

.admin-action-bar {
    background: #fff;
    border-bottom: 1px solid #e4e2ed;
    box-shadow: 0 4px 12px rgba(31, 24, 65, .06);
    padding: .65rem 0;
}

.admin-action-bar-content {
    display: flex;
    gap: .55rem;
}

.admin-main-content {
    padding-bottom: 3rem;
    padding-top: 1.5rem;
}

.admin-action-bar .btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 38px;
}

@media (max-width: 575.98px) {
    .show-category-picker {
        grid-template-columns: 1fr;
    }

    .show-category-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .show-category-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .show-category-controls .btn {
        min-height: 42px;
    }

    .admin-action-bar {
        padding: .6rem 0;
    }

    .admin-main-content {
        padding-bottom: 2rem;
        padding-top: 1rem;
    }

    .admin-action-bar-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-action-bar .btn {
        min-height: 44px;
        white-space: normal;
    }

    .requests-show-strip {
        padding-bottom: .65rem;
        padding-top: .65rem;
    }

    .requests-show-strip-content { gap: .2rem .55rem; }
    .requests-show-strip-content > strong { flex-basis: 100%; }
    .requests-show-strip-date { margin-left: 0; }
    .requests-show-strip-refresh { margin-left: auto; }
    .requests-show-strip-close { margin-left: 0; }
    .requests-show-strip-close .btn { min-height: 38px; }

    .next-request-card { border-radius: 1.15rem; }
    .next-request-title { font-size: clamp(2rem, 12vw, 3rem); overflow-wrap: anywhere; }
    .next-request-card .card-body { padding: 1.25rem !important; }
    .next-request-actions .btn { min-height: 52px; }
    .upcoming-details { align-items: flex-start; flex-direction: column; }
    .upcoming-details span { border-radius: .6rem; }
    .history-request-details { grid-template-columns: 1fr; }
}

.requests-no-active {
    background: #f3f4f8;
    border-radius: .75rem;
    color: #757786;
    min-height: 60px;
    padding: .75rem 1rem;
}

.next-empty-icon {
    align-items: center;
    background: #e7f8ed;
    border-radius: 50%;
    color: #218443;
    display: flex;
    font-size: 1.35rem;
    font-weight: 800;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.navbar .nav-link.active {
    color: var(--tms-primary);
}

.page-heading {
    min-height: 60px;
}

.show-qr {
    background: #fff;
    border: 1px solid #e3e4eb;
    border-radius: 12px;
    padding: .5rem;
}

.show-qr img,
.show-qr canvas {
    display: block;
}

.band-logo-preview {
    background: #f3f3f7;
    border: 1px solid #e1e2e9;
    border-radius: 18px;
    height: 120px;
    object-fit: contain;
    padding: .5rem;
    width: 120px;
}

@media (max-width: 991.98px) {
    .songs-admin-table thead { display: none; }
    .songs-admin-table,
    .songs-admin-table tbody,
    .songs-admin-table tr,
    .songs-admin-table td { display: block; width: 100%; }

    .songs-admin-table tr {
        border-bottom: 1px solid #e6e4ee;
        padding: .9rem 1rem;
    }

    .songs-admin-table tr:last-child { border-bottom: 0; }

    .songs-admin-table td {
        border: 0;
        padding: .28rem 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .songs-admin-table td::before {
        color: #777187;
        content: attr(data-label);
        display: inline-block;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .04em;
        margin-right: .45rem;
        min-width: 4.2rem;
        text-transform: uppercase;
    }

    .songs-admin-table .song-admin-actions {
        align-items: center;
        display: flex;
        gap: .5rem;
        padding-top: .65rem !important;
    }

    .songs-admin-table .song-admin-actions form { display: inline-flex !important; }
}

@media (max-width: 575.98px) {
    .login-card {
        border-radius: 1.25rem;
    }

    .admin-body main.container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .admin-body .page-heading {
        align-items: flex-start !important;
        flex-direction: column;
        gap: .75rem;
        min-height: 0;
    }

    .admin-body .page-heading > .btn,
    .admin-body .page-heading > a {
        width: 100%;
    }

    .admin-body .action-card .card-body,
    .admin-body .admin-panel .card-body {
        padding: 1.25rem !important;
    }

    .admin-body .btn-sm {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 42px;
        padding-left: .8rem;
        padding-right: .8rem;
    }

    .admin-body .table > :not(caption) > * > * {
        padding: .8rem .9rem;
    }

    .admin-body .table-responsive {
        border-radius: 0 0 1.25rem 1.25rem;
    }

    .admin-body .table td.text-end.text-nowrap,
    .admin-body .table td.text-end.text-nowrap form {
        white-space: normal !important;
    }

    .admin-body .table td.text-end.text-nowrap form {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .navbar-brand {
        max-width: calc(100vw - 90px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Área pública */
.public-body {
    background: #f6f7fb;
    color: #202235;
    min-height: 100vh;
}

.public-container {
    max-width: 720px;
}

.public-hero {
    background: linear-gradient(145deg, #4d2be2, #7155ff);
    padding-bottom: 2.75rem;
}

.public-confirmation-view .public-hero { padding-bottom: .5rem; }

.public-logo {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.6rem;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.public-logo-image {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    flex: 0 0 auto;
    height: 64px;
    object-fit: contain;
    width: 64px;
}

.public-band-profile {
    align-items: center;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 210px minmax(0, 1fr);
}

.public-band-logo,
.public-band-logo-placeholder {
    background: #17122e;
    border: 3px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, .12),
        0 18px 38px rgba(24, 8, 82, .38),
        0 8px 18px rgba(24, 8, 82, .22);
    height: 140px;
    width: 210px;
}

.public-band-logo {
    display: block;
    object-fit: cover;
    padding: 0;
}

.public-band-logo-link {
    border-radius: 22px;
    display: block;
    width: max-content;
}

.public-band-logo-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.public-band-logo-link:hover .public-band-logo {
    box-shadow:
        0 0 0 7px rgba(255, 255, 255, .16),
        0 22px 42px rgba(24, 8, 82, .44),
        0 9px 20px rgba(24, 8, 82, .24);
    transform: translateY(-2px);
}
.public-band-logo-link .public-band-logo { transition: box-shadow .18s ease, transform .18s ease; }

.public-band-logo-placeholder {
    align-items: center;
    color: rgba(255, 255, 255, .9);
    display: flex;
    font-size: 3.5rem;
    justify-content: center;
}

.public-band-description {
    color: rgba(255, 255, 255, .8);
    line-height: 1.55;
    max-width: 480px;
}

.public-repertory-summary {
    background: #eeebff;
    border-radius: 14px;
    color: #555267;
    font-size: .95rem;
    padding: .7rem 1rem;
    text-align: center;
}

.public-repertory-summary strong { color: var(--tms-primary); }

.public-brand {
    color: rgba(255, 255, 255, 0.72);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.live-public,
.offline-public {
    align-items: center;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    color: #fff;
    display: flex;
    gap: .75rem;
    padding: .9rem 1rem;
}

.live-public div,
.offline-public {
    flex-direction: column;
}

.live-public strong,
.offline-public strong,
.live-public span,
.offline-public span {
    display: block;
}

.live-public div > span,
.offline-public > span {
    color: rgba(255, 255, 255, .74);
    font-size: .84rem;
}

.live-dot {
    animation: live-pulse 1.5s infinite;
    background: #2bd576;
    border-radius: 50%;
    height: 11px;
    width: 11px;
}

.public-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.public-socials a {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    gap: .4rem;
    font-size: 1rem;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    padding: 0 .7rem;
    text-decoration: none;
    width: auto;
}

.public-socials .social-label { font-size: .76rem; font-weight: 400; }

.social-icon { display: inline-flex; height: 19px; width: 19px; }
.social-icon svg { fill: none; height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 100%; }
.social-icon svg .social-icon-fill { fill: currentColor; stroke: none; }

.public-socials a:hover,
.public-socials a:focus-visible {
    background: #fff;
    color: var(--tms-primary);
}

.public-socials a.social-whatsapp { background: #20b968; border-color: #20b968; color: #fff; }
.public-socials a.social-whatsapp:hover,
.public-socials a.social-whatsapp:focus-visible { background: #168f4e; border-color: #168f4e; color: #fff; }

@keyframes live-pulse {
    50% { box-shadow: 0 0 0 7px rgba(43, 213, 118, .2); }
}

.public-actions {
    margin-top: -2.9rem;
}

.public-action {
    align-items: center;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 17px;
    box-shadow: 0 8px 24px rgba(31, 23, 70, .1);
    color: #28243b;
    display: flex;
    flex-direction: column;
    font-size: .88rem;
    gap: .35rem;
    height: 92px;
    justify-content: center;
    line-height: 1.18;
    text-align: center;
    text-decoration: none;
}

.public-action span {
    color: var(--tms-primary);
    font-size: 1.5rem;
    line-height: 1;
}

.public-action.active {
    background: #f7f5ff;
    border-color: var(--tms-primary);
    color: var(--tms-primary);
}

.public-action strong { font-weight: 800; }

.suggestion-success-card {
    border-radius: 1.5rem;
    margin-top: .75rem;
}

.suggestion-success-icon {
    align-items: center;
    background: #e2f8ea;
    border-radius: 50%;
    color: #198754;
    display: flex;
    font-size: 2rem;
    font-weight: 800;
    height: 72px;
    justify-content: center;
    width: 72px;
}

.suggestion-success-message {
    color: #5e596d;
    font-size: 1.08rem;
    line-height: 1.65;
    max-width: 680px;
}

.suggestion-success-card .public-socials a:not(.social-whatsapp) {
    background: #f1efff;
    border-color: #dcd5ff;
    color: var(--tms-primary);
}

.suggestion-success-card .public-socials a:not(.social-whatsapp):hover,
.suggestion-success-card .public-socials a:not(.social-whatsapp):focus-visible {
    background: var(--tms-primary);
    color: #fff;
}

.public-search {
    align-items: center;
    background: #fff;
    border: 2px solid #e4e5ec;
    border-radius: 16px;
    display: flex;
    min-height: 58px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.public-search-help {
    font-size: .78rem;
    margin: -.35rem 0 .85rem;
    padding-left: .25rem;
}

.public-search:focus-within {
    border-color: var(--tms-primary);
    box-shadow: 0 0 0 .25rem rgba(91, 61, 245, .12);
}

.public-search > span {
    color: #818393;
    font-size: 1.5rem;
    padding-left: 1rem;
}

.public-search input {
    background: transparent;
    border: 0;
    flex: 1;
    min-width: 0;
    outline: 0;
    padding: .75rem;
}

.public-search button {
    align-self: stretch;
    background: var(--tms-primary);
    border: 0;
    color: #fff;
    font-weight: 700;
    padding: 0 1rem;
}

.genre-scroll {
    display: flex;
    gap: .5rem;
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    overflow-x: auto;
    padding: .1rem calc(var(--bs-gutter-x) * .5) .5rem;
    scrollbar-width: none;
}

.genre-scroll::-webkit-scrollbar { display: none; }

.genre-chip {
    background: #fff;
    border: 1px solid #dedfe7;
    border-radius: 999px;
    color: #555767;
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem .85rem;
    text-decoration: none;
}

.genre-chip.active {
    background: var(--tms-primary);
    border-color: var(--tms-primary);
    color: #fff;
}

#buscar-musica,
#sugerir-musica { scroll-margin-top: 1rem; }

.sort-toolbar {
    align-items: center;
    display: flex;
    gap: .45rem;
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    overflow-x: auto;
    padding: .1rem calc(var(--bs-gutter-x) * .5) .45rem;
    scrollbar-width: none;
}

.sort-toolbar::-webkit-scrollbar { display: none; }

.sort-toolbar > span {
    color: #777987;
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 700;
}

.sort-button {
    background: #fff;
    border: 1px solid #dedfe7;
    border-radius: 10px;
    color: #616371;
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 700;
    min-height: 38px;
    padding: .55rem .7rem;
    text-decoration: none;
}

.sort-button.active {
    background: #ece8ff;
    border-color: var(--tms-primary);
    color: var(--tms-primary);
}

.song-list,
.ranking-list {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 5px 22px rgba(31, 35, 60, .06);
    overflow: hidden;
}

.song-list.is-loading {
    opacity: .55;
    pointer-events: none;
}

.quick-suggestion {
    background: linear-gradient(180deg, #fff, #f7f5ff);
}

.quick-suggestion-form {
    max-width: 430px;
    text-align: left;
}

.song-item,
.ranking-item {
    align-items: center;
    border-bottom: 1px solid #ececf2;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-height: 88px;
    padding: 1rem;
}

.song-item:last-child,
.ranking-item:last-child { border-bottom: 0; }

.song-copy,
.ranking-item > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.song-copy strong,
.ranking-item strong {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-copy > span,
.ranking-item div > span {
    color: #676978;
    font-size: .88rem;
}

.song-copy small {
    color: #999aa7;
    font-size: .7rem;
    margin-top: .12rem;
}

.request-button {
    background: var(--tms-primary);
    border: 0;
    border-radius: 12px;
    color: #fff;
    flex: 0 0 auto;
    font-size: .86rem;
    font-weight: 700;
    min-height: 43px;
    padding: .6rem 1rem;
}

.request-button:disabled {
    background: #c9cad2;
}

.request-button.requested:disabled {
    background: #20b96b;
    color: #fff;
    opacity: 1;
}

.request-dialog {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(22, 17, 55, .32);
    max-width: 520px;
    padding: 1.5rem;
    width: calc(100% - 2rem);
}

.request-dialog::backdrop { background: rgba(18, 16, 34, .68); backdrop-filter: blur(3px); }

.request-song-selected {
    background: #f1efff;
    border-radius: 14px;
    padding: .85rem 1rem;
}

.request-song-selected span { color: #777987; display: block; font-size: .74rem; }
.request-song-selected strong { color: var(--tms-primary); display: block; font-size: 1.08rem; }

.pagination-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
    padding: 1.5rem 0 0;
}

.page-pill {
    align-items: center;
    background: #fff;
    border: 1px solid #dedfe7;
    border-radius: 10px;
    color: #555767;
    display: inline-flex;
    font-weight: 600;
    height: 40px;
    justify-content: center;
    text-decoration: none;
    width: 40px;
}

.page-pill.active {
    background: var(--tms-primary);
    border-color: var(--tms-primary);
    color: #fff;
}

.public-form { border-radius: 18px; }

.public-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.public-empty > span {
    color: var(--tms-primary);
    font-size: 2rem;
    margin-bottom: .6rem;
}

.public-empty p {
    color: #777987;
    margin: .35rem 0 1rem;
}

.ranking-position {
    align-items: center;
    background: rgba(91, 61, 245, .1);
    border-radius: 12px;
    color: var(--tms-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ranking-hero { padding-bottom: 1.35rem; }

.ranking-back {
    color: rgba(255, 255, 255, .88);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.ranking-back:hover,
.ranking-back:focus-visible { color: #fff; text-decoration: underline; }

.ranking-page-main { margin-top: 0; padding-top: .75rem; position: relative; }

.ranking-request-button { align-items: center; display: inline-flex; justify-content: center; text-decoration: none; }
.ranking-request-button:hover,
.ranking-request-button:focus-visible { background: #4328d5; color: #fff; }

@media (max-width: 420px) {
    .public-action { font-size: .78rem; }
    .public-search button { padding: 0 .75rem; }
    .song-item { padding: .9rem; }
    .request-button { padding: .55rem .75rem; }
}

@media (max-width: 575.98px) {
    .public-hero { padding-bottom: 2.3rem; }
    .public-hero .public-container { padding-left: 1rem; padding-right: 1rem; }
    .public-logo { border-radius: 14px; height: 48px; width: 48px; }
    .public-band-profile { gap: 1rem; grid-template-columns: 112px minmax(0, 1fr); }
    .public-band-logo,
    .public-band-logo-placeholder {
        border-width: 2px;
        border-radius: 16px;
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, .11),
            0 12px 24px rgba(24, 8, 82, .34);
        height: 82px;
        width: 112px;
    }
    .public-band-logo-link { border-radius: 16px; }
    .public-band-logo-placeholder { font-size: 2.25rem; }
    .public-band-copy h1 { font-size: 1.45rem !important; }
    .public-band-description { font-size: .86rem; line-height: 1.4; }
    .public-hero h1 { font-size: 1.35rem !important; }
    .public-action { min-height: 92px; }
    .genre-chip { align-items: center; display: inline-flex; min-height: 44px; }
    .sort-button { align-items: center; display: inline-flex; min-height: 42px; }
    .request-button { min-height: 44px; }
    .ranking-hero { padding-bottom: 1.1rem; }
    .ranking-hero .public-band-profile { align-items: center; }
    .public-socials { gap: .25rem; }
    .public-socials a { gap: .25rem; height: 42px; min-width: 44px; padding: 0 .2rem; width: auto; }
    .public-socials .social-label { font-size: .68rem; }
    .public-socials .social-icon { height: 17px; width: 17px; }
    main.public-container { padding-bottom: 6rem !important; }
    .whatsapp-float {
        height: 54px;
        justify-content: center;
        padding: 0;
        width: 54px;
    }
    .whatsapp-float strong { display: none; }
    .whatsapp-float span { font-size: 1.3rem; }
    .song-copy strong,
    .ranking-item strong { white-space: normal; }
    .public-form .card-body { padding: 1.25rem !important; }
    .form-control,
    .form-select { font-size: 1rem; }
}

@media (max-width: 360px) {
    .song-item { align-items: stretch; flex-direction: column; }
    .request-button { width: 100%; }
    .ranking-item { align-items: stretch; flex-wrap: wrap; }
    .ranking-item > div { width: calc(100% - 58px); }
    .ranking-request-button { margin-left: 54px; width: calc(100% - 54px); }
    .whatsapp-float { bottom: max(.75rem, env(safe-area-inset-bottom)); left: auto; right: .75rem; }
    .public-action { font-size: .74rem; }
}

.whatsapp-float {
    align-items: center;
    background: #1fbf66;
    border-radius: 999px;
    bottom: max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 10px 28px rgba(14, 108, 55, .3);
    color: #fff;
    display: flex;
    height: 58px;
    justify-content: center;
    padding: 0;
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    text-decoration: none;
    width: 58px;
    z-index: 1030;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    background: #179d52;
    color: #fff;
}

.whatsapp-icon { fill: none; height: 30px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; width: 30px; }

/* Landing page */
.landing-body { background: #f7f7fb; color: #202235; }
.landing-container { max-width: 1120px; }
.landing-hero { background: radial-gradient(circle at 82% 42%, rgba(255, 92, 115, .24), transparent 28%), linear-gradient(145deg, #4020d4, #7053ff); color: #fff; min-height: 680px; }
.landing-brand { align-items: center; display: inline-flex; flex: 0 0 auto; text-decoration: none; }
.landing-brand-logo { display: block; height: auto; width: 150px; }
.landing-hero-content { padding-bottom: 3rem; padding-top: .5rem; }
.landing-hero .py-lg-6 { padding-bottom: 7rem !important; padding-top: 7rem !important; }
.landing-eyebrow { color: rgba(255,255,255,.72); font-size: .78rem; font-weight: 500; letter-spacing: .14em; }
.landing-title { font-size: clamp(2.7rem, 6vw, 4.7rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; margin: 1.25rem auto; max-width: 760px; }
.landing-lead { color: rgba(255,255,255,.78); font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 0 auto; max-width: 700px; }
.landing-hero-logo-wrap { align-items: center; display: flex; justify-content: center; position: relative; }
.landing-hero-logo-wrap::before { background: rgba(255,255,255,.12); border-radius: 50%; content: ''; filter: blur(2px); height: 90%; position: absolute; width: 90%; }
.landing-hero-logo { filter: drop-shadow(0 24px 34px rgba(20, 8, 82, .32)); height: auto; max-width: 430px; position: relative; width: 100%; }
.landing-how { background: #fff; scroll-margin-top: 1rem; }
.landing-section-lead { max-width: 720px; }
.landing-step { padding: 1.5rem; }
.landing-section-label { font-weight: 500; letter-spacing: .06em; }
.landing-section-title { font-weight: 500; }
.landing-step > span { align-items: center; background: rgba(91,61,245,.1); border-radius: 14px; color: var(--tms-primary); display: inline-flex; font-size: 1.1rem; font-weight: 500; height: 48px; justify-content: center; width: 48px; }
.landing-step h2 { font-size: 1.25rem; font-weight: 500; margin-top: 1rem; }
.landing-step p { color: #727483; margin: 0 auto; max-width: 290px; }
.plans-section { background: #f7f7fb; scroll-margin-top: 1rem; }
.plan-card { border-radius: 22px; }
.plan-featured { outline: 3px solid var(--tms-primary); transform: translateY(-8px); }
.plan-period { color: var(--tms-primary); font-size: .75rem; font-weight: 500; letter-spacing: .12em; }
.plan-title { font-weight: 500; }
.plan-card ul { color: #5f6170; list-style: none; margin: 1.5rem 0; padding: 0; }
.plan-card li { border-bottom: 1px solid #eeeef3; padding: .65rem 0; }
.plan-card li::before { color: var(--tms-primary); content: '✓'; font-weight: 500; margin-right: .6rem; }
.plan-price-placeholder { background: #f1efff; border-radius: 10px; color: var(--tms-primary); display: inline-block; font-weight: 500; padding: .65rem .9rem; }
.landing-footer { background: #202235; color: rgba(255,255,255,.72); }
.landing-back-to-top {
    align-items: center;
    background: rgba(91, 61, 245, .94);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    box-shadow: 0 10px 28px rgba(48, 28, 145, .28);
    color: #fff;
    display: flex;
    height: 48px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    transform: translateY(12px);
    transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
    width: 48px;
    z-index: 1040;
}
.landing-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.landing-back-to-top:hover,
.landing-back-to-top:focus-visible { background: #4020d4; color: #fff; }
.landing-back-to-top:focus-visible { outline: 3px solid rgba(255, 255, 255, .75); outline-offset: 3px; }
.landing-back-to-top svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 24px; }
@media (max-width: 575.98px) {
    .landing-hero { min-height: 780px; }
    .landing-hero .btn { font-size: .82rem; }
    .landing-title { font-size: 3rem; }
    .plan-featured { transform: none; }
    .landing-hero nav { gap: .75rem; padding-left: 1rem; padding-right: 1rem; }
    .landing-top-nav { flex-direction: column; }
    .landing-nav-actions { justify-content: center; width: 100%; }
    .landing-brand-logo { width: 132px; }
    .landing-hero-content { padding-bottom: 2.5rem; padding-top: 1rem; }
    .landing-hero nav .btn { align-items: center; display: inline-flex; min-height: 42px; padding-left: .7rem; padding-right: .7rem; white-space: nowrap; }
    .landing-title { font-size: clamp(2.55rem, 13vw, 3rem); }
    .landing-step { padding: 1rem; }
    .landing-hero-logo { max-width: 230px; }
    .landing-back-to-top { bottom: max(1rem, env(safe-area-inset-bottom)); height: 44px; right: max(1rem, env(safe-area-inset-right)); width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-back-to-top { transition: none; }
}

@media (max-width: 380px) {
    .landing-hero nav .btn[href="#planos"] { display: none; }
}