/* =============================================================================
   FEF (FanFEF) tenant theme — Portal
   -----------------------------------------------------------------------------
   Lo carga App.razor desde Tenant.Current.Stylesheet (Tenants/Fef.cs → "css/tenants/fef.css").
   Scoped a `body.tenant-fef`.

   Los valores NO son una interpretación: salen del ST de FEF
   (fef/Portal/wwwroot/css: base/_paleta-cromatica.sass, base/_reset.sass, shared/_footer.sass,
   shared/_header-site.sass, pages/Legales/_legales.sass, pages/Faqs/_faqs.sass, pages/_index.sass).

   Marca de FEF: amarillo #F8C303 con TEXTO AZUL #00205C (en el ST, `button { color: $secondary !important }`).
   Los botones primarios de MT traen texto blanco: sobre amarillo no se lee (contraste 1,7:1), así que acá se
   pisa el texto a azul (contraste azul/amarillo 11,8:1). La paleta --ff-* y los fondos de Identity salen de
   Features.Marca (Commons / Operator); acá queda lo que no es paleta.

   OJO: el ST es un sitio OSCURO (fondo #00153D, textos blancos). Los componentes de MT (listado, ficha,
   carrito, checkout, cuenta) asumen fondo claro; esas pantallas quedan sobre fondo claro con la marca de FEF
   (amarillo/azul). Lo que se porta tal cual en oscuro: header, footer, legales, FAQs (banner) y la home.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
/* Layout, header, barra lateral, home y calendario del ST, portados tal cual (sass en css/tenants/fef-st/). */
@import url('fef-st.css');

@font-face {
    font-family: ManilaSans;
    src: url('/fonts/fef/ManilaSans-Bold.woff2') format('woff2'), url('/fonts/fef/ManilaSans-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

body.tenant-fef {
    /* base/_paleta-cromatica.sass del ST, verbatim */
    --fef-primary: #F8C303;
    --fef-primary-lighten: #FDD94A;
    --fef-primary-darken: #CF9502;
    --fef-secondary: #00205C;
    --fef-secondary-lighten: #002E85;
    --fef-secondary-darken: #00153D;
    --fef-neutral: #333333;
    --fef-neutral-lighten: #8F8F8F;
    --fef-neutral-darken: #121212;
    --fef-white-lighten: #FAFAFA;
    --fef-info: #03A9F4;

    --tenant-color-primary: #F8C303;
    --tenant-color-secondary: #00205C;

    /* Alto real del header fijo (HeaderSitePublic en una fila). Ajustar midiendo en el navegador si cambia el logo. */
    --fef-header-h: 75px;

    font-family: 'Titillium Web', system-ui, -apple-system, sans-serif;
}

@media (max-width: 1400px) { body.tenant-fef { --fef-header-h: 57px; } }

/* Títulos con ManilaSans, como el ST (sin pisar el color: muchos van sobre fondos oscuros). */
body.tenant-fef h1 {
    font-family: ManilaSans, 'Titillium Web', sans-serif;
}

/* ---------------------------------------------------------------- pantalla de carga
   Logos.Loading = logo-blanco.png (Fan FEF en blanco) sobre el azul del ST (.loadingPage: $secondary). */
body.tenant-fef .loadingPage {
    background-color: var(--fef-secondary) !important;
    background-image: none !important;
}

body.tenant-fef .loadingPage #loading {
    width: 200px;
    max-width: 60vw;
}

/* Header de la compra (Ticketera): mismo azul, logo acotado. */
body.tenant-fef .headerTicketera {
    background-color: var(--fef-secondary);
    border-bottom: 1px solid var(--fef-secondary-lighten);
}

body.tenant-fef .headerTicketera img {
    height: 48px;
    width: auto;
    max-width: none;
}

/* ---------------------------------------------------------------- botones
   Amarillo con texto azul (ST: button { color: $secondary !important }). */
body.tenant-fef .btn-primary,
body.tenant-fef .btn.btn-primary,
body.tenant-fef .mud-button-filled-primary,
body.tenant-fef .btn-fef {
    background-color: var(--fef-primary);
    border-color: var(--fef-primary);
    outline-color: var(--fef-primary);
    color: var(--fef-secondary) !important;
    font-weight: 700;
}

body.tenant-fef .btn-primary:hover,
body.tenant-fef .btn.btn-primary:hover,
body.tenant-fef .mud-button-filled-primary:hover,
body.tenant-fef .btn-fef:hover {
    background-color: var(--fef-primary-darken);
    border-color: var(--fef-primary-darken);
    outline-color: var(--fef-primary-darken);
    color: var(--fef-secondary) !important;
}

body.tenant-fef .btn-outline-primary,
body.tenant-fef .mud-button-outlined-primary {
    color: var(--fef-secondary);
    border-color: var(--fef-primary-darken);
    background-color: transparent;
}

body.tenant-fef .btn-outline-primary:hover {
    background-color: var(--fef-primary);
    color: var(--fef-secondary);
}

/* ---------------------------------------------------------------- legales y FAQs
   pages/Legales/_legales.sass y pages/Faqs/_faqs.sass: foto superior (legales/top.png), caja azul $secondary,
   títulos en ManilaSans y amarillo. La estructura de MT (.top + .cont-1170 > .box) se pinta con el look del ST. */
body.tenant-fef .pagelayout .legales,
body.tenant-fef .pagelayout .faqs {
    background-color: var(--fef-secondary-darken);
    color: #fff;
}

body.tenant-fef .pagelayout .legales .top,
body.tenant-fef .pagelayout .faqs .top {
    background-color: var(--fef-secondary-darken);
    background-image: url('/images/tenant/fef/legales-top.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

body.tenant-fef .pagelayout .legales .top { padding: 56px 16px 72px; }

body.tenant-fef .pagelayout .legales .top h1,
body.tenant-fef .pagelayout .faqs .top h1 {
    color: #fff;
    font-family: ManilaSans, 'Titillium Web', sans-serif;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
}

@media (max-width: 840px) {
    body.tenant-fef .pagelayout .legales .top h1 { font-size: 26px; }
}

body.tenant-fef .pagelayout .faqs .top .breadcrumb-item,
body.tenant-fef .pagelayout .faqs .top .breadcrumb-item a { color: #fff !important; }

body.tenant-fef .pagelayout .legales .cont-1170 .box {
    background-color: var(--fef-secondary);
    padding: 56px;
}

@media (max-width: 840px) {
    body.tenant-fef .pagelayout .legales .cont-1170 .box { padding: 36px 8px; }
}

body.tenant-fef .pagelayout .legales .cont-1170 .box h2 {
    color: var(--fef-primary);
    font-family: ManilaSans, 'Titillium Web', sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}

body.tenant-fef .pagelayout .legales .cont-1170 .box h3,
body.tenant-fef .pagelayout .legales .cont-1170 .box h4 {
    color: #fff;
    font-family: ManilaSans, 'Titillium Web', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    margin: 48px 0 8px;
    text-transform: uppercase;
}

body.tenant-fef .pagelayout .legales .cont-1170 .box p,
body.tenant-fef .pagelayout .legales .cont-1170 .box li {
    color: #fff;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
}

@media (max-width: 840px) {
    body.tenant-fef .pagelayout .legales .cont-1170 .box p,
    body.tenant-fef .pagelayout .legales .cont-1170 .box li { font-size: 16px; }
}

body.tenant-fef .pagelayout .legales .cont-1170 .box a { color: var(--fef-info); }

body.tenant-fef .pagelayout .legales .cont-1170 .box ul {
    list-style: disc;
    padding-left: 24px;
    margin-bottom: 12px;
}

body.tenant-fef .pagelayout .legales .cont-1170 .box .divisor {
    width: 100%;
    height: 1px;
    margin: 32px auto 12px;
    background-color: var(--fef-secondary-lighten);
}

/* FAQs (CMS): paneles del ST ($secondary-lighten, encabezado ManilaSans) */
body.tenant-fef .pagelayout .faqs .cont-1170 .box-faqs {
    background-color: var(--fef-secondary);
    padding: 32px;
}

body.tenant-fef .pagelayout .faqs .mud-expansion-panels .mud-expand-panel {
    background-color: var(--fef-secondary-lighten);
    color: #fff;
}

body.tenant-fef .pagelayout .faqs .mud-expansion-panels .mud-expand-panel-header {
    color: #fff;
    font-family: ManilaSans, 'Titillium Web', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

body.tenant-fef .pagelayout .faqs .mud-expansion-panels .mud-collapse-container,
body.tenant-fef .pagelayout .faqs .mud-expansion-panels p { color: #fff; }

body.tenant-fef .pagelayout .faqs .faqs-seccion {
    color: var(--fef-primary);
    font-family: ManilaSans, 'Titillium Web', sans-serif;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------- footer
   shared/_footer.sass del ST, scopeado a .FooterFef (main.css tiene reglas globales sobre `footer .top/.bottom/...`). */
body.tenant-fef footer.FooterFef {
    background-color: var(--fef-neutral);
    width: 100%;
    padding: 0 48px;
    display: block;
}

body.tenant-fef footer.FooterFef .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: solid 1px var(--fef-neutral-darken);
}

body.tenant-fef footer.FooterFef .sponsors {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 36px 0 28px;
}

/* FEF-80: logos con lienzos distintos; se igualan por alto. */
body.tenant-fef footer.FooterFef .sponsors img {
    height: 64px;
    width: auto;
    margin-right: 30px;
}

body.tenant-fef footer.FooterFef .bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 24px;
}

body.tenant-fef footer.FooterFef .redes {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

body.tenant-fef footer.FooterFef .redes a {
    color: #fff;
    display: inline-block;
    margin-right: 24px;
    font-size: 24px;
    line-height: 1;
}

body.tenant-fef footer.FooterFef .tyc a {
    color: var(--fef-white-lighten);
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}

body.tenant-fef footer.FooterFef .tyc a:hover { color: var(--fef-neutral-lighten); }

body.tenant-fef footer.FooterFef .tyc span {
    color: var(--fef-primary);
    margin: 0 5px;
}

body.tenant-fef footer.FooterFef .legales {
    padding: 16px 0 40px;
    display: block;
}

body.tenant-fef footer.FooterFef .legales p {
    color: var(--fef-white-lighten);
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}

body.tenant-fef footer.FooterFef .legales p span { font-weight: 400; }

@media (max-width: 920px) {
    body.tenant-fef footer.FooterFef .sponsors img { margin-bottom: 10px; }
}

@media (max-width: 640px) {
    body.tenant-fef footer.FooterFef .sponsors { justify-content: center; }
    body.tenant-fef footer.FooterFef .sponsors img { height: 48px; margin-right: 16px; }
    body.tenant-fef footer.FooterFef .bottom { flex-direction: column; align-items: center; }
    body.tenant-fef footer.FooterFef .redes { margin-bottom: 24px; }
    body.tenant-fef footer.FooterFef .tyc { text-align: center; }
    body.tenant-fef footer.FooterFef .tyc a { display: block; }
    body.tenant-fef footer.FooterFef .tyc span { display: none; }
    body.tenant-fef footer.FooterFef .legales { text-align: center; padding: 12px 0 20px; }
}

/* ---------------------------------------------------------------- footer en la columna derecha
   En el ST el footer va DENTRO de .SiteMainPage (a la derecha de la barra lateral); en MT SiteLayout lo dibuja
   después de <main>. Con la barra lateral, se alinea con la misma regla de ancho/margen de .SiteMainPage. */
body.tenant-fef main:has(> .SiteMainPage) + footer.FooterFef {
    width: calc(100% - 320px);
    margin-left: 320px;
}

@media (max-width: 1400px) {
    body.tenant-fef main:has(> .SiteMainPage) + footer.FooterFef {
        width: calc(100% - 270px);
        margin-left: 270px;
    }
}

@media (max-width: 1240px) {
    body.tenant-fef main:has(> .SiteMainPage) + footer.FooterFef {
        width: 100%;
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------- resets contra el .navMenu / main de MT
   main.css de MT tiene su propio .navMenu (cajón de EntradasBA) y `main`; el ST define los suyos arriba. Lo que el
   ST no define y MT sí, se anula acá para que quede el del ST. */
body.tenant-fef .navMenu {
    padding-top: 0;
    z-index: 99998;
}

body.tenant-fef .navMenu .menu li.is-mobile { display: block; }

/* ---------------------------------------------------------------- reset del ST (base/_reset.sass) donde MT lo pisa
   MT trae su main.css global (fondo blanco y Nunito con !important, botones primarios con el secundario, listas con
   viñetas). El ST es un sitio azul oscuro: se restablece lo que el ST define, sólo bajo body.tenant-fef. */
body.tenant-fef {
    background-color: var(--fef-secondary-darken) !important;
    font-family: 'Titillium Web', sans-serif !important;
}

body.tenant-fef ul { list-style: none; }
body.tenant-fef .navMenu ul,
body.tenant-fef .navMenu .menu { margin: 0; padding-left: 0; }

body.tenant-fef .mud-button-filled-primary {
    background-color: var(--fef-primary) !important;
    color: var(--fef-secondary) !important;
    box-shadow: none !important;
}

body.tenant-fef .mud-button-filled-primary:hover {
    background-color: var(--fef-primary-darken) !important;
}

body.tenant-fef .mud-button-filled-primary .mud-button-label { color: var(--fef-secondary); }

body.tenant-fef .mud-button-root:disabled,
body.tenant-fef .mud-button-filled:disabled {
    background-color: var(--fef-neutral-lighten) !important;
    color: #272727 !important;
}

/* La home de MT (main.css: `.pagelayout .home`) pinta fondo claro y relleno propios; la del ST es transparente sobre el azul. */
body.tenant-fef .pagelayout .home {
    background: transparent;
    padding-bottom: 0;
    min-height: 0;
}

/* Reset de texto del ST (`*{margin:0;padding:0}`, Titillium en todo) sólo dentro de lo portado tal cual: la home, el calendario, el
   header y la barra lateral. :where() no suma especificidad, así que las reglas portadas del ST siguen mandando. */
body.tenant-fef :where(.home, .calendario-de-partidos, .navMenu, .headerSite) :where(p, h1, h2, h3, h4, h5, h6, ul, li, span, a, small, div):where(:not([class*="mud-"])) {
    margin: 0;
    padding: 0;
    font-family: inherit;
}

body.tenant-fef .navMenu {
    border: 0;
    border-right: solid 1px var(--fef-secondary-lighten);
}

body.tenant-fef .mud-button-filled-primary { font-weight: 500 !important; }
body.tenant-fef .navMenu .user button { height: 48px; }
/* El ST separa Ingresar de Regístrate 32px (su MudBlazor traía otra escala de espaciado que `mt-2`). */
body.tenant-fef .navMenu .user-anonimo .mud-button.mt-2 { margin-top: 32px !important; }

body.tenant-fef .navMenu .menu li .mud-nav-link,
body.tenant-fef .navMenu .menu li .btn-group { font-family: inherit; }

/* ---------------------------------------------------------------- sitio azul oscuro (todas las pantallas)
   El ST es azul oscuro de punta a punta. Las pantallas de MT que el ST no tiene tal cual (compra, mensajes, cuenta) se montan
   sobre el mismo fondo azul y con texto blanco; lo que sigue siendo una tarjeta clara de MT lleva su propio texto oscuro. */
body.tenant-fef main .TicketeraMainPage,
body.tenant-fef .ticketeralayout,
body.tenant-fef .pagelayout,
body.tenant-fef .fullPagelayout {
    background-color: var(--fef-secondary-darken);
    color: #fff;
}

body.tenant-fef .ticketera-mensajes h1,
body.tenant-fef .ticketera-mensajes p,
body.tenant-fef .ticketera-mensajes .mud-icon-root { color: #fff; }

body.tenant-fef .ticketera-mensajes .mud-icon-root { color: var(--fef-primary); }
body.tenant-fef .ticketera-mensajes { background-color: var(--fef-secondary-darken); }
body.tenant-fef .ticketera-mensajes .btn-outline-primary { color: var(--fef-primary); border-color: var(--fef-primary); }
body.tenant-fef .navMenu .menu li .mud-nav-link *,
body.tenant-fef .navMenu .menu li .btn-group * { font-family: inherit; }
body.tenant-fef .navMenu .mud-nav-link-text { font-family: 'Titillium Web', sans-serif !important; }