/* Portal del empleado (migracion del Portal legacy IIPortal2025).
   Shell de nav horizontal estilo Inspinia, INDEPENDIENTE del layout vertical con sidenav: NO usa
   .wrapper/.content-page del tema (esos reservan un margen izquierdo para el menu lateral, que aqui
   no existe y desplazaba el contenido).

   Dos anchos "boxed" conmutables. OJO: en esta app el tema (Inspinia) NO compila los max-width de
   Bootstrap para `.container`/`.container-fluid` (ambos = 100%), y las paginas normales nunca llenan
   el viewport porque el sidenav se come ~250px. El portal no tiene sidenav, asi que un 100% llena
   TODA la pantalla (se siente excesivo). Por eso fijamos aqui el tope explicitamente:
   - boxed (por defecto, replica de la plantilla): ancho contenido centrado.
   - wide (`.portal--wide`): mucho mas ancho, como una pagina normal amplia, pero con margen (no a
     sangre) en pantallas grandes.
   La barra y el contenido comparten `.portal-container` para alternar juntos y quedar alineados.
   Los dos topes son ajustables (una sola cifra cada uno). */

.portal-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.portal-container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 1rem;
}

.portal-shell.portal--wide .portal-container {
    max-width: 1600px;
}

/* La barra ocupa todo el ancho de la ventana (fondo a sangre); su contenido interno queda acotado
   por `.portal-container`. Asi se reproduce la landing (barra a ancho completo, contenido boxed). */
.portal-navbar {
    width: 100%;
}

.portal-content {
    flex: 1 1 auto;
}

/* Noticias (fase 2): tarjetas del feed y contenido del detalle. */
.news-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.news-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.news-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* Icono como alternativa a la imagen destacada (legacy: div .icon-container de _noticiasList.cshtml
   cuando Imagen no es una URL https, sino el icono en si). Mutuamente excluyente con .news-card-img. */
.news-card-icon {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.portal-news-hero-icon {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

/* Noticia en modo Test (legacy Enum_Estado.Test / IsTest): borde y fondo azules, titulo en azul y
   badge "TEST" en la esquina, replicando Views/Home/_noticiasList.cshtml del legacy. */
@keyframes news-card-test-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.15);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(13, 110, 253, 0);
    }
}

@keyframes news-card-test-blink {
    50% {
        opacity: 0.55;
    }
}

.news-card-test {
    border: 2px solid #0d6efd !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
    position: relative;
    animation: news-card-test-pulse 3s ease-in-out infinite;
}

.news-card-test-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    animation: news-card-test-blink 2s linear infinite;
}

.news-card-test-title {
    color: #0056b3 !important;
}

/* Imagen destacada del detalle: alto fijo + recorte (object-fit) para que al ensanchar el portal
   (boxed -> wide) NO se estire ni deforme la imagen (antes: img-fluid + max-height rompia el ratio). */
.portal-news-hero {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

/* El contenido HTML (Quill) del detalle no debe desbordar el ancho del contenedor. */
.portal-news-content img {
    max-width: 100%;
    height: auto;
}