/*
 * classicspark-estructura.css - 4.0.83
 *
 * La estructura de las páginas privadas: el menú superior, el botón de enviar de los compositores, las pantallas de acceso del tema anterior, el armazón (cabecera y pie), la piel común de los modales y la caja de la página.
 *
 * Hasta la 4.0.82 esto eran 6 hojas con el número de la entrega que las creó. Aquí van juntas,
 * en el mismo orden en que se cargaban, con una marca donde empieza cada una. El orden importa:
 * una regla de más abajo gana a otra igual de más arriba.
 *
 * Venía de: classicspark-navigation.css, classicspark-composer.css, classicspark-auth.css, classicspark-shell.css, classicspark-modal.css, classicspark-310.css
 */

/* ==== antes classicspark-navigation.css ==== */
.public-home-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #8b001e !important;
    border: 1px solid rgba(139, 0, 30, 0.3);
    border-radius: 999px;
    background: rgba(185, 5, 43, 0.05);
    font-weight: 700;
    white-space: nowrap;
}

.navbar-nav .public-home-link {
    margin-right: 8px;
    padding: 8px 14px !important;
}

.navbar-always .public-home-link,
.navbar-bottom .public-home-link {
    min-height: 38px;
    padding: 8px 14px;
}

.public-home-link:hover,
.public-home-link:focus {
    color: #fff !important;
    border-color: #b9052b;
    background: #b9052b;
    text-decoration: none;
}

.public-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: #8b001e;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.public-back-link:hover,
.public-back-link:focus {
    color: #b9052b;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .nav-public-home {
        margin-bottom: 8px;
    }

    .navbar-nav .public-home-link {
        width: max-content;
    }
}

@media (max-width: 575px) {
    .navbar-always .public-home-link span {
        display: none;
    }

    .navbar-always .public-home-link {
        width: 38px;
        padding-inline: 0;
    }
}

/* ==== antes classicspark-composer.css ==== */
button[data-composer-submit]{transition:opacity .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease}
button[data-composer-submit]:disabled{opacity:.42!important;cursor:not-allowed!important;box-shadow:none!important;filter:saturate(.45);transform:none!important}
button[data-composer-submit]:disabled:hover{box-shadow:none!important;transform:none!important}

/* ==== antes classicspark-auth.css ==== */
:root {
    --auth-wine: #9f0024;
    --auth-wine-dark: #78001b;
    --auth-ink: #211a1d;
    --auth-muted: #6d6468;
    --auth-paper: #fbf8f5;
    --auth-line: rgba(76, 45, 56, 0.15);
}

.auth-page.login-supercontainer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(1160px, calc(100% - 40px));
    height: 640px !important;
    min-height: 640px;
    margin: 36px auto 64px;
    padding: 0;
    align-items: stretch;
    gap: 24px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-page .login-fondo,
.auth-page .login-reg {
    max-width: none;
    margin: 0;
}

.auth-page .login-fondo {
    position: relative;
    height: 100% !important;
    min-height: 0;
    padding: clamp(40px, 4vw, 52px);
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(145deg, #f3e8e3 0%, #fffaf7 72%);
    border: 1px solid var(--auth-line);
}

.auth-page .login-fondo::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: rgba(185, 5, 43, 0.08);
}

.auth-page .login-fondo h2 {
    position: relative;
    z-index: 1;
    max-width: 420px;
    color: var(--auth-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.65rem, 3.7vw, 3.7rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.auth-page .login-fondo p {
    position: relative;
    z-index: 1;
    max-width: 540px;
    color: var(--auth-muted);
    line-height: 1.45;
}

.auth-page .login-fondo img {
    position: absolute;
    width: min(64%, 340px);
    max-height: 220px;
    right: 7%;
    bottom: 38px;
    object-fit: contain;
}

.auth-page .login-reg {
    min-width: 0;
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 0;
    padding: clamp(42px, 4vw, 54px);
    border: 1px solid var(--auth-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(48, 31, 38, 0.07);
}

.auth-page .login-reg > div,
.auth-page .login-formulario--is {
    width: 100%;
}

.auth-page .login-reg > div { max-width: 430px; margin: 0 auto; }

.auth-page .public-back-link { display: none; }

.auth-page .auth-kicker {
    margin-bottom: 10px;
    color: var(--auth-wine);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-page .auth-title {
    margin-bottom: 10px;
    color: var(--auth-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.35rem;
    font-weight: 500;
    line-height: 1.08;
}

.auth-page .auth-copy {
    margin-bottom: 28px;
    color: var(--auth-muted);
}

.auth-page label {
    margin-bottom: 7px;
    color: var(--auth-ink);
    font-size: 0.86rem;
    font-weight: 700;
}

.auth-page .form-control {
    min-height: 50px;
    padding: 11px 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: #fff;
}

.auth-page .form-control:focus {
    border-color: var(--auth-wine);
    box-shadow: 0 0 0 3px rgba(159, 0, 36, 0.1);
}

.auth-page .btn-primary {
    min-height: 50px !important;
    border: 0;
    border-radius: 999px;
    background: var(--auth-wine);
    box-shadow: 0 12px 28px rgba(159, 0, 36, 0.2);
}

.auth-page .btn-primary:hover,
.auth-page .btn-primary:focus {
    background: var(--auth-wine-dark);
}

.auth-page .toggle-password {
    top: 17px;
    right: 14px;
}

.auth-password-toggle {
    position: absolute;
    right: 8px;
    bottom: 7px;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--auth-muted);
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.auth-password-toggle:focus-visible {
    outline: 3px solid var(--auth-wine);
    outline-offset: 1px;
}

.auth-page .login-otros a {
    color: var(--auth-wine);
    font-weight: 700;
}

.auth-page .line-effects {
    color: var(--auth-muted);
}

.auth-register .login-reg {
    flex-basis: auto;
    align-items: center;
}

.auth-register.login-supercontainer { height: 700px !important; min-height: 700px; }
.auth-register .login-fondo { min-height: 0; }

body.auth-shell { min-height: 100vh; display: flex; flex-direction: column; }
body.auth-shell .auth-page { flex: 0 0 auto; }
body.auth-shell .footer-simple { margin-top: auto; }

.auth-register .login-opts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.auth-register .login-opts .login-opt,
.auth-register .login-opts .login-opt:nth-child(even),
.auth-register .login-opts .login-opt:nth-child(odd) {
    width: auto;
    margin: 0;
}

.auth-register .login-opt .login-box {
    box-sizing: border-box;
    width: 100%;
    height: 108px;
    margin: 0;
    padding: 28px 14px 18px;
    border-radius: 16px;
}

.auth-register #btnRegForeign {
    display: block;
    width: 100%;
    margin: 10px 0 0 !important;
}

.auth-register .login-espectador {
    box-sizing: border-box;
    width: 100%;
    min-height: 62px;
    height: auto;
    margin: 0 !important;
    padding: 14px 16px;
    color: var(--auth-wine);
    border-color: rgba(159, 0, 36, 0.55);
    border-radius: 14px;
    background: #fff;
}

.auth-register .login-espectador svg path { fill: var(--auth-wine) !important; }

.auth-register .login-espectador:hover,
.auth-register .login-box:hover {
    transform: translateY(-2px);
    scale: 1 !important;
    border-color: var(--auth-wine);
    box-shadow: 0 10px 24px rgba(78, 34, 47, 0.09);
}

.registration-onboarding.home-container {
    max-width: 1120px;
    margin-inline: auto;
    background: transparent;
}

.registration-onboarding .musicos-cerca {
    border: 1px solid var(--auth-line);
    box-shadow: 0 16px 42px rgba(53, 31, 39, 0.07);
}

.registration-onboarding .regCircle {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.registration-onboarding .form-control,
.registration-onboarding .select2-container .select2-selection {
    min-height: 44px;
    border-radius: 10px;
}

.nav-containerLogged .nav-legacy-primary,
.nav-containerLogged .nav-public-home {
    display: none;
}

.nav-containerLogged .nav-compact-menu > .nav-link {
    min-width: 92px;
}

.nav-containerLogged .nav-compact-menu .dropdown-menu {
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--auth-line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(42, 24, 31, 0.12);
}

.nav-containerLogged .nav-compact-menu .dropdown-item {
    padding: 9px 12px;
    border-radius: 8px;
}

@media (max-width: 991px) {
    .auth-page.login-supercontainer {
        display: flex;
        width: min(100% - 28px, 680px);
        height: auto !important;
        min-height: auto;
        margin: 24px auto 48px;
        padding: 0;
        flex-direction: column;
    }

    .auth-page .login-fondo {
        height: 300px !important;
        min-height: 280px;
        padding: 36px;
        border: 1px solid var(--auth-line);
    }

    .auth-page .login-fondo img {
        width: 42%;
        opacity: 0.7;
    }

    .auth-page .login-reg {
        flex-basis: auto;
        width: 100%;
        height: auto;
        padding: 38px;
    }

    .nav-containerLogged .nav-legacy-primary,
    .nav-containerLogged .nav-public-home {
        display: list-item;
    }

    .nav-containerLogged .nav-compact-menu {
        display: none;
    }
}

@media (max-width: 575px) {
    .auth-page.login-supercontainer {
        width: min(100% - 20px, 520px);
        margin-top: 14px;
        border-radius: 20px;
    }

    .auth-page .login-fondo {
        height: 170px !important;
        min-height: 170px;
        padding: 24px;
    }

    .auth-page .login-fondo h2 {
        display: block !important;
        max-width: 300px;
        font-size: 2.15rem;
    }

    .auth-page .login-fondo p,
    .auth-page .login-fondo img {
        display: none !important;
    }

    .auth-page .login-reg { padding: 30px 22px 34px; }
    .auth-page .auth-title { font-size: 2rem; }
    .auth-page .auth-copy { margin-bottom: 22px; }

    .auth-register .login-opts {
        grid-template-columns: 1fr;
    }
}

/* ==== antes classicspark-shell.css ==== */
:root {
    --shell-wine: #a3002a;
    --shell-ink: #292430;
    --shell-muted: #706b73;
    --shell-line: #ebe7e9;
}

.nav-container,
.nav-containerLogged { width: 100%; flex: 0 0 auto; margin-inline: 0; border-bottom: 1px solid var(--shell-line); background: rgba(251,248,245,.94); }
.nav-container .navbar,
.nav-containerLogged .navbar { box-sizing: border-box; width: min(1140px, calc(100% - 40px)); max-width: 1140px; min-height: 78px; margin: 0 auto; padding: 8px 16px; background: transparent !important; box-shadow: none; }
.nav-container .navbar { margin: 0 auto; }
.nav-container .shell-brand,
.nav-containerLogged .shell-brand { display: inline-flex; flex: 0 0 auto; align-items: center; margin: 0; padding: 0; }
.nav-container .shell-brand img,
.nav-containerLogged .shell-brand img { display: block; width: 190px; height: auto; }
.nav-container .navbar-always { display: flex; align-items: center; gap: 28px; margin: 0 0 0 auto; padding: 0; }
.nav-container .navbar-always > li { display: inline-flex; align-items: center; }
.nav-container .shell-nav-link { color: var(--shell-ink); font-size: .92rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.nav-container .shell-nav-link:hover { color: var(--shell-wine); }
.nav-container .shell-primary-action { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; background: #b9052b; color: #fff; box-shadow: 0 10px 25px rgba(185,5,43,.2); font-size: .92rem; font-weight: 760; text-decoration: none; white-space: nowrap; }
.nav-container .shell-primary-action:hover { background: #8b001e; color: #fff; }

.language-picker { position: relative; color: var(--shell-ink); }
.language-picker summary {
    display: inline-flex; min-height: 38px; align-items: center; gap: 7px;
    padding: 7px 11px; border: 1px solid var(--shell-line); border-radius: 999px;
    background: #fff; font-weight: 600; cursor: pointer; list-style: none;
}
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker summary::after { content: "\25BE"; font-size: 10px; color: var(--shell-muted); }
.language-picker[open] summary { border-color: rgba(163,0,42,.35); box-shadow: 0 0 0 3px rgba(163,0,42,.08); }
.language-picker-menu {
    position: absolute; z-index: 1050; top: calc(100% + 8px); right: 0; min-width: 156px;
    padding: 7px; border: 1px solid var(--shell-line); border-radius: 12px; background: #fff;
    box-shadow: 0 16px 38px rgba(35,24,29,.14);
}
.language-picker-menu button {
    display: flex; width: 100%; justify-content: space-between; padding: 9px 10px;
    color: var(--shell-ink); border: 0; border-radius: 8px; background: transparent;
    text-align: left; cursor: pointer;
}
.language-picker-menu button:hover,
.language-picker-menu button:focus { background: #f7f3f4; }
.language-picker-menu button[aria-current="true"] { color: var(--shell-wine); font-weight: 700; }

.nav-containerLogged { box-shadow: 0 8px 30px rgba(35,24,29,.04); }
.nav-containerLogged .navbar-brand { flex: 0 0 auto; margin-right: 34px; }
.nav-containerLogged .navbar-collapse { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 24px; padding: 0 !important; border: 0; border-radius: 0; background: transparent; }
.nav-containerLogged .navbar-nav { align-items: center; gap: 24px; margin: 0 !important; padding: 0; border: 0; border-radius: 0; background: transparent; }
.nav-containerLogged .navbar-collapse > hr { display: none; }
.nav-containerLogged .nav-primary-space { order: 1; }
.nav-containerLogged .nav-discover-link { order: 2; }
.nav-containerLogged .nav-app-launcher { order: 3; }
.nav-containerLogged .nav-primary-space .nav-link,
.nav-containerLogged .nav-discover-link .nav-link,
.nav-containerLogged .nav-app-launcher > .nav-link {
    display: flex; min-height: 42px; align-items: center; gap: 7px; padding: 9px 2px;
    border-radius: 0; color: var(--shell-ink); font-size: 14px; font-weight: 650; white-space: nowrap;
}
.nav-containerLogged .navbar-nav .nav-item,
.nav-containerLogged .navbar-nav .nav-link { margin: 0 !important; }
.nav-containerLogged .nav-primary-space .nav-link:hover,
.nav-containerLogged .nav-discover-link .nav-link:hover,
.nav-containerLogged .nav-app-launcher > .nav-link:hover { background: transparent; color: var(--shell-wine); }
.nav-containerLogged .nav-primary-space .nav-link { background: transparent; color: var(--shell-wine); }
.nav-containerLogged .nav-primary-space .nav-link svg path { fill: currentColor !important; }
.nav-containerLogged .nav-primary-space svg { width: 18px; height: 18px; }
.nav-containerLogged .nav-app-launcher .dropdown-menu {
    width: min(560px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--shell-line);
    border-radius: 16px; box-shadow: 0 20px 50px rgba(35,24,29,.16);
}
.app-launcher-title { padding: 4px 8px 9px; color: var(--shell-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.app-launcher-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.app-launcher-grid .dropdown-item { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; white-space: normal; }
.app-launcher-grid .dropdown-item i { width: 18px; color: var(--shell-wine); text-align: center; }
.app-launcher-grid .dropdown-item:hover { background: #f7f3f4; }

.nav-containerLogged .navbar-bottomLogged { flex: 0 0 auto; width: auto !important; margin: 0 !important; }
.nav-containerLogged .navbar-bottomLogged ul { display: flex; width: auto !important; align-items: center; gap: 24px; margin: 0 !important; padding: 0; border: 0; border-radius: 0; background: transparent; }
.nav-containerLogged .navbar-bottomLogged li { width: auto !important; min-width: 0 !important; margin: 0 !important; }
.nav-containerLogged .navbar-bottomLogged ul > li,
.nav-containerLogged .navbar-bottomLogged ul > li:last-child,
.nav-containerLogged .navbar-bottomLogged ul > li > * { margin-right: 0 !important; }
.nav-containerLogged .navbar-bottomLogged a:not(.button-live) {
    display: inline-flex; width: auto !important; height: 38px; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 0;
    border-radius: 0; color: var(--shell-ink); white-space: nowrap;
}
.nav-containerLogged .navbar-bottomLogged a:hover { background: transparent; color: var(--shell-wine); text-decoration: none; }
.nav-containerLogged .navbar-bottomLogged .button-live { min-height: 38px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--shell-ink); box-shadow: none; font-size: 14px; font-weight: 650; }
.nav-containerLogged .navbar-bottomLogged .button-live:hover { background: transparent; color: var(--shell-wine); }
.header-action-label { display: none; font-size: 13px; font-weight: 600; }
.nav-containerLogged .navbar-bottomLogged .badge { position: absolute; margin: -15px 0 0 -8px; }

.notification-menu .dropdown-toggle::after { display: none; }
.nav-containerLogged .notification-dropdown {
    width: min(390px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--shell-line);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(35,24,29,.16);
}
.notification-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 17px 12px; border-bottom: 1px solid var(--shell-line); }
.notification-dropdown-head strong { color: var(--shell-ink); font-size: 16px; }
.notification-dropdown-head span { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--shell-wine); color: #fff; font-size: 12px; text-align: center; }
.notification-dropdown-list { max-height: 360px; overflow-y: auto; padding: 7px; }
.notification-summary,
.notification-preview { display: flex !important; width: 100% !important; align-items: center; gap: 10px; padding: 10px !important; border-radius: 10px !important; color: var(--shell-ink) !important; white-space: normal !important; }
.notification-summary { background: #faf5f6; }
.notification-summary i { width: 24px; color: var(--shell-wine); text-align: center; }
.notification-preview img { flex: 0 0 38px; width: 38px; height: 38px; object-fit: cover; }
.notification-preview span { min-width: 0; color: var(--shell-muted); font-size: 13px; line-height: 1.3; }
.notification-preview.is-unread { background: #fff4f6; }
.notification-preview.is-unread::after { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--shell-wine); }
.notification-empty { margin: 0; padding: 24px 14px; color: var(--shell-muted); text-align: center; }
.notification-view-all { display: block !important; width: 100% !important; padding: 13px !important; border-top: 1px solid var(--shell-line); border-radius: 0 !important; color: var(--shell-wine) !important; font-weight: 700; text-align: center; }

footer.footer-legacy { display: none !important; }
footer.footer-simple { padding: 34px 0; border-top: 1px solid var(--shell-line); background: #fbf8f5; color: var(--shell-muted); }
.footer-simple-inner { display: flex; min-height: 0; align-items: center; justify-content: space-between; gap: 28px; width: min(1160px,calc(100% - 40px)); margin: 0 auto; }
.footer-simple-identity { display: flex; align-items: center; gap: 16px; }
.footer-simple-brand { display: inline-flex; color: var(--shell-wine); }
.footer-simple-brand img { display: block; width: 150px; height: auto; }
.footer-simple-copy { font-size: 13px; }
.footer-simple-links { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 0; padding: 0; list-style: none; }
.footer-simple-links a { color: var(--shell-muted); font-size: 13px; }
.footer-simple-links a:hover { color: var(--shell-wine); text-decoration: none; }

footer.footer { position: relative; padding-top: 44px; background: #251f23; color: rgba(255,255,255,.76); }
footer.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,var(--shell-wine),#d84b69 55%,transparent); }
footer.footer > .row { display: grid; grid-template-columns: 1.35fr .72fr .9fr .9fr; gap: 42px; max-width: 1120px; margin: 0 auto !important; padding: 0 0 36px; }
footer.footer > .row > div { width: auto !important; max-width: none !important; padding: 0 !important; }
footer.footer > .row h4 { margin-bottom: 15px; color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
footer.footer > .row ul li { margin-bottom: 9px; }
footer.footer > .row a { color: rgba(255,255,255,.78); }
footer.footer > .row a:hover { color: #fff; }
footer.footer .footer-logo svg { width: 154px; height: auto; margin-bottom: 14px; }
footer.footer .coming-soon-txt { max-width: 290px; margin: 0 0 18px; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.5; }
footer.footer .footer-logo > a { display: inline-block; margin: 0 7px 8px 0; }
footer.footer .footer-logo > a img { height: 34px; width: auto; }
footer.footer .footer-redes ul { display: flex; gap: 10px; }
footer.footer .footer-redes ul li { margin: 0; }
footer.footer .footer-redes svg { width: 28px; height: 28px; opacity: .86; transition: opacity .2s ease, transform .2s ease; }
footer.footer .footer-redes a:hover svg { opacity: 1; transform: translateY(-2px); }
footer.footer .container-footerLaw { border-top: 1px solid rgba(255,255,255,.12); background: transparent; }
footer.footer .footer-law { max-width: 1120px; margin: 0 auto; padding: 18px 0; }
footer.footer .footer-law ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
footer.footer .footer-law ul li { margin: 0; }
footer.footer .footer-creditos { margin-left: auto !important; }

.notifications-page { width: min(960px, calc(100% - 36px)); margin: 38px auto 70px; }
.notifications-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.notifications-kicker { margin: 0 0 5px; color: var(--shell-wine) !important; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.notifications-page-head h1 { margin: 0 0 7px; color: var(--shell-ink); font-family: Georgia,"Times New Roman",serif; font-size: clamp(34px,5vw,52px); }
.notifications-page-head p { margin: 0; color: var(--shell-muted); }
.notifications-clear,
.request-primary,
.request-secondary { padding: 9px 13px; border-radius: 999px; font-weight: 700; cursor: pointer; }
.notifications-clear,
.request-secondary { border: 1px solid var(--shell-line); background: #fff; color: var(--shell-ink); }
.request-primary { border: 1px solid var(--shell-wine); background: var(--shell-wine); color: #fff; }
.notifications-tabs { display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; }
.notifications-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--shell-line); border-radius: 999px; background: #fff; color: var(--shell-ink); font-weight: 700; white-space: nowrap; }
.notifications-tabs a:hover { border-color: rgba(163,0,42,.35); text-decoration: none; }
.notifications-tabs span { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: #f5e9ec; color: var(--shell-wine); font-size: 12px; text-align: center; }
.notification-section { margin-top: 28px; scroll-margin-top: 90px; }
.notification-section h2 { margin-bottom: 11px; color: var(--shell-ink); font-size: 18px; }
.notification-panel { overflow: hidden; border: 1px solid var(--shell-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(35,24,29,.05); }
.notification-row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--shell-line); background: #fff; color: var(--shell-muted); text-align: left; cursor: pointer; }
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover { background: #faf7f8; }
.notification-row.is-unread { background: #fff8f9; }
.notification-row img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; }
.notification-row span { flex: 1; min-width: 0; }
.notification-row i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--shell-wine); }
.request-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-bottom: 1px solid var(--shell-line); }
.request-row:last-child { border-bottom: 0; }
.request-row > a { display: flex; min-width: 0; align-items: center; gap: 12px; color: var(--shell-ink); }
.request-row img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; }
.request-row small { display: block; margin-top: 3px; color: var(--shell-muted); }
.request-row > div { display: flex; gap: 7px; }
.notification-page-empty { margin: 0; padding: 28px 18px; color: var(--shell-muted); text-align: center; }
.cs27-spectator-manage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0 0 16px; }
.cs27-spectator-manage a { display: flex; min-height: 54px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--shell-line); border-radius: 14px; background: #fff; color: var(--shell-ink); font-weight: 700; }
.cs27-spectator-manage a i { color: var(--shell-wine); }

@media (max-width: 1199px) {
    footer.footer > .row,
    footer.footer .footer-law { width: min(100% - 40px, 1120px); }
}
@media (max-width: 991px) {
    .nav-containerLogged .navbar { width: 100%; padding-inline: 18px; }
    .nav-containerLogged .navbar-collapse { padding: 14px 0 8px !important; border: 0; border-top: 1px solid var(--shell-line); border-radius: 0; background: #fff; }
    .nav-containerLogged .navbar-collapse { gap: 0; }
    .nav-containerLogged .navbar-nav { align-items: stretch; gap: 4px; margin: 0 !important; border: 0; border-radius: 14px; background: transparent; }
    .nav-containerLogged .navbar-collapse > hr { display: block; width: 100%; height: 1px; margin: 12px 0; background: var(--shell-line); }
    .nav-containerLogged .nav-primary-space { order: 0; }
    .nav-containerLogged .nav-discover-link,
    .nav-containerLogged .nav-app-launcher { display: none; }
    .nav-containerLogged .navbar-bottomLogged { margin: 12px 0 0; }
    .nav-containerLogged .navbar-bottomLogged ul { justify-content: flex-start; flex-wrap: wrap; border: 0; border-radius: 14px; background: transparent; }
    .nav-containerLogged .navbar-bottomLogged a:not(.button-live) { width: auto !important; padding: 0 12px; border-radius: 10px; }
    .header-action-label { display: inline; }
    .nav-containerLogged .notification-dropdown { position: static !important; width: 100%; transform: none !important; }
    footer.footer > .row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
}
@media (max-width: 575px) {
	.cs27-spectator-manage { grid-template-columns: 1fr; }
    .nav-container .navbar { width: 100%; min-height: 64px; padding-inline: 14px; }
    .nav-container .navbar-always { gap: 10px; }
    .nav-container .navbar-always > li:first-child { display: none; }
    .language-picker-current { display: none; }
    .app-launcher-grid { grid-template-columns: 1fr; }
    footer.footer { padding-top: 38px; }
    footer.footer > .row { grid-template-columns: 1fr; gap: 26px; width: calc(100% - 44px); }
    footer.footer .footer-law { width: calc(100% - 44px); }
    footer.footer .footer-creditos { width: 100%; margin-left: 0 !important; }
    .footer-simple-inner { min-height: 0; align-items: flex-start; padding: 24px 0; flex-direction: column; }
    .footer-simple-identity { align-items: flex-start; flex-direction: column; gap: 5px; }
    .footer-simple-links { justify-content: flex-start; flex-wrap: wrap; gap: 10px 16px; }
    .notifications-page { margin-top: 24px; }
    .notifications-page-head { align-items: flex-start; flex-direction: column; }
    .request-row { align-items: flex-start; flex-direction: column; }
    .request-row > div { width: 100%; }
    .request-row button { flex: 1; }
}

/* ==== antes classicspark-modal.css ==== */
/* Sprint 2.8.43.115 — La piel comun de los modales.
 *
 * Habia tres maneras de vestir un modal en el proyecto: la moderna (`cs-chat-modal`,
 * `cs2724-professional-modal`), la antigua de `.modal-classicspark` —botones de radio 24 a ancho
 * completo y un `padding:16px` en el `.modal-content` que se suma al del cuerpo— y una tercera
 * hecha a medida para el boton de enlace, con cabecera propia y degradado.
 *
 * Esta es una sola, con los numeros que ya estaban en produccion en el chat. Se aplica poniendo
 * `cs-modal` en el `.modal`, y el marcado de dentro es el estandar de Bootstrap:
 * `modal-header` / `modal-body` / `modal-footer`.
 *
 * Las tres primeras reglas existen para deshacer lo que hereda de `.modal-classicspark`
 * (`main.css` 3989-4004). Sin ellas, el `padding` se suma dos veces y los botones del pie se
 * apilan a ancho completo.
 */

.cs-modal .modal-dialog{width:min(94vw,540px);max-width:540px}
.cs-modal .modal-content{overflow:hidden;padding:0!important;border:0!important;border-radius:18px!important;background:#fff;box-shadow:0 24px 60px rgba(35,24,29,.22)}
.cs-modal .modal-footer .btn{width:auto;margin-bottom:0}

.cs-modal .modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin:0!important;padding:20px 22px!important;border-bottom:1px solid #efe6e9}
.cs-modal .modal-header>div{min-width:0}
.cs-modal .modal-header span{display:block;color:#c90035;font-family:gilroy-semibold,Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em}
.cs-modal .modal-header h2{margin:4px 0 0;color:#2f2c41;font-family:gilroy-semibold,Arial,sans-serif;font-size:22px;line-height:1.2}
.cs-modal .modal-header .close{margin:0;padding:7px;border:0;background:none;color:#696370;font-size:16px;opacity:1}
.cs-modal .modal-header .close:hover{color:#c90035}

.cs-modal .modal-body{margin:0!important;padding:20px 22px!important}
.cs-modal .modal-body>label,.cs-modal .modal-body label{display:block;margin-bottom:7px;color:#302d40;font-family:gilroy-semibold,Arial,sans-serif;font-size:13px}
.cs-modal .modal-body label span{color:#c90035}
.cs-modal__intro{margin:0 0 18px;color:#5f5968;font-size:13px}
.cs-modal__field{margin-bottom:16px}
.cs-modal__field:last-child{margin-bottom:0}
.cs-modal .form-control{border:1px solid #ddd3d6;border-radius:11px;font-size:13px;box-shadow:none!important}
.cs-modal input.form-control{height:44px}
.cs-modal textarea.form-control{min-height:150px;padding:11px 13px;line-height:1.5;resize:vertical}
.cs-modal .form-control:focus{border-color:#c90035;box-shadow:0 0 0 3px rgba(201,0,53,.1)!important;outline:0}
.cs-modal__count{display:block;margin-top:7px;color:#8a8390;font-size:11px;text-align:right}

/* El icono dentro del campo del enlace. */
.cs-modal__input{position:relative}
.cs-modal__input>i{position:absolute;z-index:2;top:15px;left:14px;color:#c90035;font-size:13px}
.cs-modal__input .form-control{padding-left:37px}

/* La vista previa del boton de enlace: lo unico propio que se conserva, porque dice algo. */
.cs-modal__preview{margin-top:18px;padding:14px;border:1px solid #eadde1;border-radius:14px;background:#fff9fb}
.cs-modal__preview>span{display:block;margin-bottom:9px;color:#77707c;font-family:gilroy-semibold,Arial,sans-serif;font-size:11px}
.cs-modal__preview>a{display:flex;width:100%;min-height:44px;align-items:center;justify-content:center;gap:9px;border-radius:11px;background:#c90035;color:#fff!important;font-family:gilroy-semibold,Arial,sans-serif;font-size:13px;text-decoration:none}

.cs-modal .modal-footer{display:flex;margin:0!important;padding:14px 22px 20px!important;gap:9px;justify-content:flex-end;border-top:1px solid #efe6e9}
.cs-modal .modal-footer button,.cs-modal .modal-footer .btn{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:7px;padding:0 16px;border-radius:10px;font-family:gilroy-semibold,Arial,sans-serif;font-size:12px;cursor:pointer}
.cs-modal__cancel{border:1px solid #efe6e9;background:#fff;color:#625960}
.cs-modal__cancel:hover{background:#fbf5f6;color:#625960}
.cs-modal__save{border:0;background:#c90035;color:#fff}
.cs-modal__save:hover{background:#a80430;color:#fff}

@media(max-width:575px){
	.cs-modal .modal-header{padding:17px 18px!important}
	.cs-modal .modal-header h2{font-size:19px}
	.cs-modal .modal-body{padding:17px 18px!important}
	.cs-modal .modal-footer{padding:13px 18px 18px!important}
}

/* Sprint 2.8.43.116 — el contador de los compositores.
   Vive aqui, con el `cs-modal__count` del que es hermano, para que los dos digan lo mismo
   estando uno dentro de un modal y el otro debajo de una tarjeta del muro. */
.cs-charcount{display:block;margin-top:6px;color:#8a8390;font-size:11px;text-align:right}
.cs-charcount.is-near-limit{color:#c90035}
#shareContainer .cs-charcount{padding-right:2px}
.cs2766-comment-composer{position:relative}
.cs2766-comment-composer .cs-charcount{width:100%;margin-top:4px}

/* ==== antes classicspark-310.css ==== */
/* La caja de la página, en un solo sitio. 2.8.43.310.
 *
 * ============================================================================================
 * QUÉ HABÍA, MEDIDO EN CHROMIUM
 * ============================================================================================
 * Lo notó Eudes: «el ancho de Mi espacio parece ligeramente más ancho que los otros, veo algo como
 * 1398 px, pero en Mis eventos 1358 px […] al navegar entre ellas veo como un flash en el ancho».
 *
 * No eran ideas suyas, y sus dos números son exactos. Con la ventana en 1440 px, la MISMA ficha
 * profesional —la portada del perfil que él usaba de referencia— medía:
 *
 *     1398 px   en «Cerca de mí»
 *     1358 px   en «Mi espacio», «Mis eventos», «Amigos», avisos, fotos, vídeos, anuncios…
 *     1314 px   en «Multimedia»
 *
 * Tres anchos para el mismo componente. Y las cajas de página, veintiséis en total, estaban
 * repartidas en tres familias —1360, 1400 y 1440— más `.cs2724-page-shell`, que usaba
 * `calc(100% - 44px)` sin `min()` y no caía en ninguna.
 *
 * ============================================================================================
 * LA REGLA
 * ============================================================================================
 * **Un solo ancho, escrito una sola vez.** La referencia la eligió Eudes: la de «Mi espacio».
 *
 * A partir de aquí, ninguna hoja vuelve a escribir un ancho de página literal: todas leen estas dos
 * variables. Cambiar la caja de la web entera es cambiar este número, y la prueba lo comprueba
 * midiendo de verdad, en Chromium, con las 78 hojas del `header` servidas por HTTP.
 *
 * NO ENTRA AQUÍ, y es deliberado:
 *
 *   - Las ventanas modales (`.cs-ui-media-modal`, `.cs278-media-modal`): no son páginas, y una foto
 *     a pantalla casi completa es lo que se quiere de un visor.
 *   - La SALA DE CLASE (`classicspark-lesson-room.css`): es una llamada de vídeo, no un documento.
 *     Estrechar el escenario 80 px es una decisión de producto, no de consistencia.
 *   - El sitio PÚBLICO (`classicspark-discovery.css`): otra cáscara, otra caja.
 */

/* ============================================================================================
 * 2.8.43.316 - LAS DOS VARIABLES SE MUDARON, Y ESTA ES LA RAZON
 * ============================================================================================
 * Aqui estaba:
 *
 *     :root { --cs-ancho: 1400px; --cs-ancho-aire: 40px; }
 *
 * Y estaba MAL SITIO. Esta hoja la carga solo `site/main/header.php`, o sea la cascara privada. Las
 * once vistas de `app/Views/public/` -home, «Descubrir», los legales, seguridad infantil- no la
 * cargan, pero SI cargan `classicspark-private-layout.css`, y con la sesion iniciada le ponen al
 * `<body>` la clase `cs-private-shell`. Alli las reglas pedian una variable que no existia, CSS las
 * dejo en `unset` -`width:auto`, `max-width:none`- y la cabecera y el pie se fueron de borde a borde.
 *
 * Ahora viven en `classicspark-unified.css`, que es la unica hoja que cargan las once publicas Y el
 * header privado.
 *
 * ESTE FICHERO SE QUEDA porque aqui esta escrito POR QUE la caja mide lo que mide, y porque el
 * numero se cambia leyendo esto. Mudar la explicacion a un fichero de tokens la habria enterrado.
 * ============================================================================================ */