/**
 * Último Momento Component
 * Barra de noticias de último momento con ticker animado
 */

/* ==========================================================
   CONTENEDOR PRINCIPAL (Full-width con fondo naranja)
========================================================== */

.inf-ultimo-momento {
    width: 100vw; /* Full width de borde a borde */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: var(--color-brand-primary, #FF5920); /* Naranja del tema */
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Contenedor interno (respeta max-width del layout) */
.inf-ultimo-momento__inner {
    max-width: var(--max-width-container, 1320px); /* Respeta contenedor principal */
    margin: 0 auto;
    padding: var(--space-2, 8px) var(--container-padding-desktop, 20px); /* Vertical para centrado estable */
    display: flex;
    align-items: center;
    gap: 1rem; /* Espacio entre label, ticker e íconos */
    white-space: nowrap; /* Todo en un solo renglón */
    overflow: hidden; /* Prevenir overflow horizontal */
    min-height: 2.5em; /* Altura mínima para centrado vertical consistente */
}

/* ==========================================================
   LABEL "| ULTIMO MOMENTO |"
========================================================== */

/* El label usa clases existentes .informe-meta e .informe-meta--bold */
/* Solo sobrescribimos color y layout específico */
.inf-ultimo-momento__label {
    color: #fff !important; /* Texto blanco (sobrescribe color de .informe-meta) */
    font-weight: 700 !important; /* Weight 700 como especificado (sobrescribe si es necesario) */
    white-space: nowrap; /* No romper en varias líneas */
    flex-shrink: 0; /* No encoger */
    margin: 0; /* Sin márgenes */
    padding: 0; /* Sin padding */
}

/* ==========================================================
   TICKER (Área de scroll con noticias)
========================================================== */

.inf-ultimo-momento__ticker {
    flex: 1 1 auto; /* Ocupa el espacio disponible */
    min-width: 0; /* Permitir que flexbox respete el contenedor */
    overflow: hidden; /* Overflow hidden sin romper layout */
    position: relative;
    display: flex;
    align-items: center; /* Centrar marquee verticalmente */
    min-height: 1.5em; /* Altura mínima para centrado estable */
}

.inf-ultimo-momento__marquee {
    display: inline-block;
    white-space: nowrap;
    color: #fff; /* Texto blanco */
    margin: 0;
    padding: 0;
    vertical-align: middle; /* Ayudar al centrado vertical en el ticker */
    line-height: var(--lh-title-list, 1.17); /* Misma altura que el título */
}

/* Items individuales del ticker */
.inf-ultimo-momento__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-right: 1.5rem; /* Espacio entre items */
    white-space: nowrap;
    vertical-align: middle;
}

/* Título del item - mismo estilo que informe-destacado-main-title (family, weight, lh, spacing); size mucho más chico */
.inf-ultimo-momento__title {
    font-family: MajritTx, serif;
    font-size: var(--fs-title-md, 1.125rem); /* Mucho más chico que main/superdestacada */
    font-weight: var(--fw-title-featured, 700); /* = main, no 900 */
    line-height: var(--lh-hero, 1.07);
    letter-spacing: var(--ls-hero, -.0675rem);
    color: #fff; /* Texto blanco */
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.inf-ultimo-momento__title:hover {
    color: #ddd; /* Gris en hover (no blanco) */
    text-decoration: none;
}

/* Íconos de compartir (WhatsApp, Facebook, Twitter, etc.) */
.inf-ultimo-momento__item a[aria-label] {
    color: #fff; /* Íconos blancos */
    font-size: .875rem; /* 14px - tamaño razonable para íconos */
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inf-ultimo-momento__item a[aria-label]:hover {
    opacity: 1;
    text-decoration: none;
}

/* Separador entre items */
.inf-ultimo-momento__sep {
    color: #fff;
    opacity: 0.6;
    margin: 0 .5rem;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1024px) {
    .inf-ultimo-momento__inner {
        padding: var(--space-2, 8px) var(--container-padding-tablet, 16px);
        gap: .75rem; /* Menos espacio en tablet */
    }
}

@media (max-width: 768px) {
    .inf-ultimo-momento__inner {
        padding: var(--space-2, 8px) var(--container-padding-mobile, 12px);
        gap: .5rem; /* Menos espacio en mobile */
        min-height: 2.25em;
    }
    
    .inf-ultimo-momento__label {
        font-size: .625rem; /* 10px - un poco más chico en mobile */
    }
    
    .inf-ultimo-momento__title {
        font-size: var(--fs-title-sm, 1rem); /* Mucho más chico en mobile */
    }
    
    .inf-ultimo-momento__item a[aria-label] {
        font-size: .75rem; /* 12px - íconos más chicos en mobile */
    }
    
    /* Ocultar algunos íconos en mobile si es necesario para ahorrar espacio */
    .inf-ultimo-momento__item a[aria-label="Compartir"] {
        display: none; /* Ocultar ícono genérico de compartir en mobile */
    }
}