/* ══════════════════════════════════════════════════
   Custom styles — loaded automatically by slug

   Assets:  /tenants/{slug}/images/...
   Classes: Use row cssClass from the homepage builder
   ══════════════════════════════════════════════════ */

/* ── Inter (self-hosted, solo para MDZ) ──
   El footer de mdzol.com usa Inter en sus textos y legales. Lo declaramos
   acá (scoped al tenant: este CSS solo se carga en mdz.editor80.com) para no
   sumar la fuente al resto del fleet. Pesos exactos del sitio: 300/400/500/600. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/tenants/mdz/fonts/inter/inter-300.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/tenants/mdz/fonts/inter/inter-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/tenants/mdz/fonts/inter/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/tenants/mdz/fonts/inter/inter-600.woff2") format("woff2");
}

/* Acento del buscador (/buscar): término buscado, checkboxes y botón
   Buscar. Rojo institucional MDZ (#E30613, sampleado del
   sitio actual). El default del fleet, sin esta variable, es negro. */
:root {
  --buscador-accent: #e30613;
}

/* Slider de temas "AHORA": scroll horizontal sin barra visible (igual que el sitio). */
.mdz-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mdz-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Container de MDZ — usado por el header/footer/AHORA: centra y limita el ancho a
   1024px → 1298px (idéntico al sitio). */
.mdz-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .mdz-container {
    max-width: 1024px;
  }
}
@media (min-width: 1298px) {
  .mdz-container {
    max-width: 1298px;
  }
}

/* ══════════════════════════════════════════════════
   NOTA: el diseño de PORTADA (section-header, separadores #CDCDCD, tipografía de
   cards, tamaños por columna, spacing, overlay, filas con color) y el ancho 1298
   ahora son GLOBALES para todo el fleet — viven en src/app/globals.css. Acá ya no
   se personaliza la portada; MDZ la hereda como cualquier otro diario.
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   Módulos especiales de portada (TKT-00368). Mantener idéntico en mdz y mdz-test.
   ══════════════════════════════════════════════════ */

/* Alto de la barra sticky del header: en SiteHeader sólo la barra del logo es sticky.
   Medido en mdz-test el 2026-09-14: 64px por debajo de 1024px y 84px desde 1024px. Lo
   usa la Noticia Bomba para llenar el alto visible de la pantalla: si cambia el header,
   volver a medir `header.site-header`. */
:root {
  --e80-header-sticky-h: 64px;
}
@media (min-width: 1024px) {
  :root {
    --e80-header-sticky-h: 84px;
  }
}

/* Alertas (módulo alerta-ultima-hora) con la estética de Dos al Cubo: píldora blanca
   con texto negro; en celular la píldora arriba y el título abajo, ✕ arriba a la
   derecha. */
.modulo--alerta-ultima-hora .alerta-ultima-hora {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 1.125rem 1.5rem;
}
.modulo--alerta-ultima-hora .alerta-ultima-hora-wrap .alerta-ultima-hora {
  padding-right: 3rem;
}
.modulo--alerta-ultima-hora .alerta-ultima-hora__etiqueta {
  /* !important: el componente pinta la píldora con el color de fondo, en inline. */
  color: #000 !important;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  border-radius: 2px;
}
.modulo--alerta-ultima-hora .alerta-ultima-hora__titulo {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.15;
}
.modulo--alerta-ultima-hora .alerta-ultima-hora__cerrar {
  top: 0.75rem;
  right: 0.75rem;
  transform: none;
}
@media (min-width: 768px) {
  .modulo--alerta-ultima-hora .alerta-ultima-hora {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem 1rem 1rem;
  }
  .modulo--alerta-ultima-hora .alerta-ultima-hora-wrap .alerta-ultima-hora {
    padding-right: 3rem;
  }
  .modulo--alerta-ultima-hora .alerta-ultima-hora__cerrar {
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
  }
}
@media (min-width: 1024px) {
  .modulo--alerta-ultima-hora .alerta-ultima-hora__etiqueta {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
  }
  .modulo--alerta-ultima-hora .alerta-ultima-hora__titulo {
    font-size: 1.125rem;
  }
}

/* Barra "AHORA" = módulo nube-tags en formato barra: los colores de mdzol.com
   (rojo de marca y banda #F5F5F5), no el primary genérico de la plataforma. */
.modulo--nube-tags {
  --primary: #E30613;
  --muted: #F5F5F5;
}

/* ══════════════════════════════════════════════════
   MDZ Radio (TKT-00455): /mdzradio, /mdzradio-programas y /mdzradio-player.
   Réplica de `body.radio-mdz` de mdzol.com: la página entera en #222425 con
   texto blanco (el header negro y el footer #343434 ya salen así). La marca
   `.mdz-radio-page` la pone MdzRadioHeader. Mantener idéntico en mdz y mdz-test.
   ══════════════════════════════════════════════════ */
body:has(.mdz-radio-page),
.bg-white:has(.mdz-radio-page) {
  background-color: #222425;
  color: #fff;
}
/* /mdzradio es la portada propia de la sección: mdzol.com muestra solo la
   portada, sin el archivo "Más de MDZ Radio" que el sitio pone debajo. */
body:has(.mdz-radio-page) .seccion-listado {
  display: none;
}
/* La Noticia Bomba de /mdzradio va dentro del contenedor (1158 px, el ancho útil
   de `.container` en mdzol.com) y con la foto en 16:9, no a todo el ancho y alto
   de la pantalla como en la home. */
body:has(.mdz-radio-page) .bomba {
  /* Relacionadas sobre el fondo de la página, como `body.radio-mdz .news-list` */
  --bomba-fondo: #222425;
  width: 100%;
  max-width: 1158px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  body:has(.mdz-radio-page) .bomba--sobre-imagen .bomba__foto {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Portada en celular: la barra de cotizaciones queda pegada al header, como en
   mdzol.com (TKT-00365). El contenedor de la home suma 24 px arriba que el sitio
   actual no tiene. Solo cuando la primera fila es la barra de cotizaciones. */
@media (max-width: 767px) {
  .home-page-container:has(> main > .portada-row:first-child .modulo--slider-monedas) {
    padding-top: 0;
  }
}

/* Portada en celular, alineada con mdzol.com (TKT-00365): la barra de cotizaciones
   mide 34 px y, cuando la fila siguiente es una alerta, queda pegada a la barra y a
   todo el ancho de la pantalla (sin los 32 px de separación ni los 16 px laterales
   de una fila común). El !important es porque space-y-6 y min-h-9 le ganan por
   especificidad. El margen negativo va en el módulo, no en la fila: en la fila
   desbordaba 16 px. */
@media (max-width: 767px) {
  .portada-row:has(.modulo--slider-monedas) .slider-monedas {
    height: 2rem !important;
    min-height: 0 !important;
    padding-block: 0 !important;
  }
  .portada-row:has(.modulo--slider-monedas):has(+ .portada-row .modulo--alerta-ultima-hora) {
    margin-block-end: 0 !important;
  }
  .portada-row:has(.modulo--slider-monedas) + .portada-row .modulo--alerta-ultima-hora {
    margin-inline: -1rem;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .portada-row:has(.modulo--slider-monedas) + .portada-row .modulo--alerta-ultima-hora {
    margin-inline: -1.5rem;
  }
}

/* Tarjeta horizontal de portada como en mdzol.com (TKT-00327): la foto ocupa el 36%
   de la columna y el texto el 64% (grid 36fr/64fr del sitio). El aspecto 16:9 sale de
   la posición; acá solo va el ancho. */
@media (min-width: 640px) {
  .portada-row .news-article--horizontal > .news-article__media,
  .portada-row .news-article--horizontal-derecha > .news-article__media {
    width: 36%;
  }
}

/* Últimas noticias como en mdzol.com (TKT-00327). Separadores, padding lateral y el
   primer título más grande están en el CSS del sitio (CMS); acá va el resto: hora en
   Inter 12 px, título en 15 px (16 px en escritorio), 14 px de aire debajo de cada
   nota y 12 px hasta la línea, sin fondo al pasar el mouse. */
.modulo--ultimas-noticias .ultimas-noticias-item {
  padding-top: 0;
  padding-bottom: 0.875rem;
  margin-bottom: 0.75rem;
}
.modulo--ultimas-noticias .ultimas-noticias-item:hover {
  background-color: transparent;
}
.modulo--ultimas-noticias .ultimas-noticias-item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
.modulo--ultimas-noticias .ultimas-noticias-hora {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}
.modulo--ultimas-noticias .ultimas-noticias-titulo {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .modulo--ultimas-noticias .ultimas-noticias-titulo {
    font-size: 1rem;
  }
}

/* Filas de tres columnas 25-50-25 (Notas manuales y Deportes) en celular: primero la
   columna central, después la izquierda y al final la derecha, como en mdzol.com
   (TKT-00493). En escritorio no cambia: el grid solo se apila por debajo de 768 px.
   Solo toca las filas con ese reparto exacto; las demás siguen en su orden. */
@media (max-width: 767px) {
  .portada-row.row-layout-25-50-25 > .portada-row-inner > .home-row-grid > :nth-child(2) {
    order: -1;
  }
}

/* Títulos de portada en celular con la jerarquía de mdzol.com (TKT-00501). La regla
   global de globals.css aplana en celular TODOS los títulos a 20px; MDZ recupera los
   tamaños de Dos al Cubo, que eran los mismos en cualquier ancho (medidos del sitio real,
   ver `git show 18f36437^:apps/public-site/public/tenants/mdz/styles.css`):
   simple 20 · destacado 24 · apertura 34 · texto sobre foto 30 (`news-article--bomb`).
   `.portada-row` delante para ganarle en especificidad a la global, que también va con
   !important. En escritorio no cambia nada. Mantener idéntico en mdz y mdz-test. */
@media (max-width: 767px) {
  .portada-row .news-article__title[data-tamano="lg"] {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .portada-row .news-article__title[data-tamano="xl"] {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
  .portada-row .news-article--overlay .news-article__title[data-tamano] {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
}