/* ==========================================================================
   Portal institucional gestionfsh.org · Facultad de la Salud Humana · UNL
   ==========================================================================

   Hoja única del portal. No hay framework: es una sola página estática de
   estructura sencilla, y arrastrar Bootstrap entero (o cualquier CDN) para
   pintar una cabecera, tres tarjetas y un pie sería añadir una dependencia
   externa y ~200 KB para no usar casi nada. Todo lo que hay aquí consume los
   tokens de `design-tokens.css`, que son los mismos valores institucionales de
   Laboratorios y Vinculación; por eso el portal se ve como parte del mismo
   sistema sin compartir código con ellos.

   Índice:
     1. Base y accesibilidad
     2. Cabecera institucional
     3. Sección principal (hero)
     4. Tarjetas de sistemas
     5. Sección informativa
     6. Pie de página
     7. Ajustes responsive
   ========================================================================== */

/* ==========================================================================
   1. Base y accesibilidad
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Evita el desplazamiento horizontal en móvil pase lo que pase con el
       contenido: es un requisito explícito del portal. */
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--fsh-font);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--fsh-text);
    background-color: var(--fsh-content-bg);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, p { margin: 0; }

a { color: var(--fsh-blue-600); }

/* Foco visible y uniforme en TODO lo enfocable. Se dibuja con `outline` y no
   con `box-shadow` para que sobreviva al modo de alto contraste de Windows,
   donde las sombras se descartan. */
:where(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--unl-red);
    outline-offset: 3px;
    border-radius: var(--fsh-radius-sm);
}

/* Salto al contenido: primer elemento enfocable del documento. Fuera de
   pantalla hasta que recibe el foco, no oculto con `display:none` (eso lo
   sacaría del orden de tabulación y lo volvería inalcanzable). */
.skip-link {
    position: absolute;
    left: var(--fsh-space-4);
    top: calc(-1 * var(--fsh-space-6) - 40px);
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--unl-blue-dark);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--fsh-radius-sm);
    transition: top var(--fsh-transition);
}
.skip-link:focus { top: var(--fsh-space-3); }

.portal-shell { flex: 1 0 auto; }

.portal-container {
    width: 100%;
    max-width: var(--fsh-content-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ==========================================================================
   2. Cabecera institucional
   ==========================================================================
   Cabecera blanca con filete rojo–azul inferior: la misma gramática de marca
   que la barra superior de Laboratorios y Vinculación. El logotipo oficial se
   sirve tal cual, con su relación de aspecto intacta (`width`/`height` en el
   HTML y `height:auto` aquí). */

.portal-header {
    position: relative;
    background: var(--fsh-surface);
    border-bottom: 1px solid var(--fsh-border);
}
.portal-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--rule-brand);
}

.portal-header__inner {
    display: flex;
    align-items: center;
    gap: var(--fsh-space-4);
    min-height: var(--fsh-navbar-height);
    padding-block: var(--fsh-space-3);
}

.portal-header__logo {
    height: 46px;
    width: auto;
    flex: 0 0 auto;
}

/* Separador vertical entre el logotipo y el rótulo institucional. Decorativo:
   desaparece cuando el rótulo se apila bajo el logotipo en pantallas
   estrechas. */
.portal-header__divider {
    width: 1px;
    align-self: stretch;
    background: var(--fsh-border);
    flex: 0 0 auto;
}

.portal-header__titles { min-width: 0; }
.portal-header__institution {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--fsh-blue-700);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.25;
}
.portal-header__faculty {
    font-size: var(--font-size-sm);
    color: var(--fsh-text-muted);
    line-height: 1.35;
}

/* ==========================================================================
   3. Sección principal (hero)
   ==========================================================================
   Fotografía del campus de la UNL bajo un velo azul institucional. El velo no
   es decoración: es lo que garantiza el contraste del texto blanco sobre una
   imagen de luminosidad variable (mismo recurso y misma imagen que la pantalla
   de acceso de Laboratorios).

   La altura la fija el contenido, no la ventana: nada de `100vh`. En un
   escritorio de 1366×768 el borde superior de las tarjetas queda visible sin
   desplazar, que es lo que se pide. */

.portal-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--unl-blue-dark);
    background-image:
        linear-gradient(105deg,
            rgba(0, 42, 68, .96) 0%,
            rgba(0, 76, 123, .84) 56%,
            rgba(0, 42, 68, .52) 100%),
        url("../img/hero/campus-unl-sm.d7bc89b571f0.webp");
    background-size: cover;
    background-position: center;
    color: #fff;
}
/* La imagen grande solo se descarga en pantallas que la aprovechan. */
@media (min-width: 768px) {
    .portal-hero {
        background-image:
            linear-gradient(105deg,
                rgba(0, 42, 68, .96) 0%,
                rgba(0, 76, 123, .84) 56%,
                rgba(0, 42, 68, .52) 100%),
            url("../img/hero/campus-unl.67d82ff5ed76.webp");
    }
}
/* Filete rojo de apertura en el borde izquierdo, como en la portada de
   Laboratorios. */
.portal-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--unl-red);
}

.portal-hero__inner { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.portal-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .19em;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, .82);
}
.portal-hero__eyebrow::before {
    content: "";
    width: 34px;
    height: 4px;
    border-radius: 99px;
    background: var(--unl-red);
    flex: 0 0 auto;
}

.portal-hero__title {
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.12;
    letter-spacing: -.028em;
    margin: .85rem 0 .6rem;
    max-width: 22ch;
    /* Impide que una palabra larga desborde en 375 px. */
    overflow-wrap: break-word;
}

.portal-hero__text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, .9);
    max-width: 62ch;
}

/* ==========================================================================
   4. Tarjetas de sistemas
   ==========================================================================
   Rejilla fluida: `auto-fit` + `minmax` resuelve los tres puntos de ruptura
   pedidos sin escribir tres consultas de medios. Con 320 px de mínimo caben
   tres columnas a partir de ~1100 px, dos en tablet y una en móvil, y el
   comportamiento no depende de que el ancho coincida exactamente con un punto
   de ruptura concreto. */

.portal-section { padding-block: clamp(2rem, 4vw, 2.75rem); }

.portal-section__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--fsh-blue-700);
    letter-spacing: -.02em;
    line-height: 1.25;
}
.portal-section__lead {
    color: var(--fsh-text-muted);
    margin-top: .35rem;
    max-width: 70ch;
}

.portal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--fsh-space-4);
    margin-top: var(--fsh-space-5);
    /* La lista no necesita viñetas: son tarjetas. Se conserva `<ul>` porque es
       una lista de servicios y así el lector de pantalla anuncia cuántos hay. */
    list-style: none;
    padding: 0;
}

.portal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--fsh-surface);
    border: 1px solid var(--fsh-border);
    border-radius: var(--fsh-radius-lg);
    box-shadow: var(--fsh-shadow-sm);
    padding: var(--fsh-space-5);
    overflow: hidden;
    transition: box-shadow var(--fsh-transition), transform var(--fsh-transition);
}
/* Filete superior rojo–azul: el mismo distintivo de las tarjetas del sistema. */
.portal-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--rule-brand-card);
}

/* El realce al pasar el puntero es solo del contenedor; NO hace la tarjeta
   pulsable. El único destino accionable es el botón, de modo que puntero y
   teclado activan exactamente lo mismo y no hay dos zonas de clic ambiguas
   superpuestas. */
.portal-card--available:hover {
    box-shadow: var(--fsh-shadow);
    transform: translateY(-2px);
}
/* Cuando el foco está en el botón interior, la tarjeta acompaña el realce para
   que quien navega con teclado vea qué bloque está activo. */
.portal-card--available:focus-within {
    box-shadow: var(--fsh-shadow);
}

/* Tarjeta de servicio planificado: se distingue por posición, badge y estado
   del botón —no solo por color—. El fondo apenas cambia; el mensaje lo dan el
   texto «Próximamente» y el botón deshabilitado. */
.portal-card--planned { background: var(--fsh-surface-muted); }

.portal-card__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fsh-border);
    border-radius: var(--radius-control);
    background: var(--fsh-blue-050);
    color: var(--fsh-blue-600);
    margin-bottom: var(--fsh-space-4);
}
.portal-card__icon svg { width: 24px; height: 24px; }
.portal-card--planned .portal-card__icon {
    background: var(--fsh-neutral-bg);
    color: var(--fsh-text-muted);
}

.portal-card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fsh-blue-700);
    letter-spacing: -.015em;
    line-height: 1.25;
    margin-bottom: .5rem;
    overflow-wrap: break-word;
}

.portal-card__text {
    font-size: var(--font-size-sm);
    color: var(--fsh-text-muted);
    line-height: 1.65;
    /* Empuja el pie de la tarjeta al fondo: los botones quedan alineados
       aunque las descripciones tengan distinto número de líneas. */
    flex: 1 1 auto;
    margin-bottom: var(--fsh-space-5);
}

.portal-card__footer {
    display: flex;
    align-items: center;
    gap: var(--fsh-space-3);
    flex-wrap: wrap;
}

.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 99px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--fsh-neutral-bg);
    color: var(--fsh-text-muted);
    border: 1px solid var(--fsh-border-strong);
}
.portal-badge svg { width: 13px; height: 13px; }

/* Botones. Altura mínima de 44 px: objetivo táctil cómodo en móvil, que es
   donde más se va a usar esta página. */
.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .55rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fsh-transition), border-color var(--fsh-transition);
}
.portal-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.portal-btn--primary {
    background: var(--fsh-blue-600);
    border-color: var(--fsh-blue-600);
    color: #fff;
}
.portal-btn--primary:hover {
    background: var(--fsh-blue-700);
    border-color: var(--fsh-blue-700);
}
.portal-btn--primary:active { background: var(--fsh-blue-900); }

/* Botón deshabilitado de la tarjeta de Aulas. Es un `<button disabled>` real,
   no un enlace maquillado: el navegador lo saca del orden de tabulación y los
   lectores de pantalla anuncian «no disponible» por sí solos. No navega, no
   recarga y no existe ningún `href="#"`. */
.portal-btn[disabled] {
    background: var(--fsh-neutral-bg);
    border-color: var(--fsh-border-strong);
    color: var(--fsh-text-muted);
    cursor: not-allowed;
}

/* ==========================================================================
   5. Sección informativa
   ========================================================================== */

.portal-note {
    background: var(--fsh-surface);
    border: 1px solid var(--fsh-border);
    border-left: 4px solid var(--fsh-blue-600);
    border-radius: var(--fsh-radius);
    box-shadow: var(--fsh-shadow-sm);
    padding: var(--fsh-space-5);
    display: flex;
    gap: var(--fsh-space-4);
    align-items: flex-start;
}
.portal-note__icon {
    flex: 0 0 auto;
    color: var(--fsh-blue-600);
    margin-top: .15rem;
}
.portal-note__icon svg { width: 22px; height: 22px; display: block; }
.portal-note__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--fsh-blue-700);
    margin-bottom: .3rem;
}
.portal-note__text {
    font-size: var(--font-size-sm);
    color: var(--fsh-text-muted);
    line-height: 1.7;
    max-width: 78ch;
}
.portal-note__text + .portal-note__text { margin-top: .5rem; }

/* ==========================================================================
   6. Pie de página
   ========================================================================== */

.portal-footer {
    flex: 0 0 auto;
    position: relative;
    background: var(--unl-blue-darker);
    color: rgba(255, 255, 255, .82);
    font-size: var(--font-size-sm);
}
.portal-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--rule-brand);
}

.portal-footer__inner {
    padding-block: var(--fsh-space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--fsh-space-5);
    justify-content: space-between;
    align-items: flex-start;
}

/* El logotipo institucional no puede perder su color sobre el azul oscuro: se
   apoya sobre una placa blanca, sin recolorear ni deformar. */
.portal-footer__logo {
    height: 40px;
    width: auto;
    background: rgba(255, 255, 255, .96);
    border-radius: var(--fsh-radius-sm);
    padding: .4rem .6rem;
}
.portal-footer__institution {
    color: #fff;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--fsh-space-3);
}
.portal-footer__meta { line-height: 1.7; }
.portal-footer__meta a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.portal-footer__meta a:hover { color: var(--unl-blue-40); }
.portal-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-block: var(--fsh-space-4);
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .7);
}
/* Foco visible sobre fondo oscuro: el rojo institucional no contrastaría lo
   suficiente contra el azul profundo, así que aquí el anillo es blanco. */
.portal-footer a:focus-visible {
    outline-color: #fff;
}

/* ==========================================================================
   7. Ajustes responsive
   ==========================================================================
   Comprobado a 375, 768, 1366 y 1920 px. La rejilla de tarjetas ya es fluida
   (§4); lo que queda son ajustes de la cabecera y del hero en pantallas
   estrechas. */

@media (max-width: 575.98px) {
    /* La cabecera se apila: en 375 px el logotipo y el rótulo en una sola fila
       obligarían a reducir el texto por debajo de lo legible. */
    .portal-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fsh-space-2);
    }
    .portal-header__divider { display: none; }
    .portal-header__logo { height: 40px; }

    /* Hero más bajo: en móvil el usuario debe llegar a las tarjetas con un
       gesto, no con tres. */
    .portal-hero__inner { padding-block: 1.75rem; }
    .portal-hero__text { font-size: var(--font-size-base); }

    .portal-card { padding: var(--fsh-space-4); }
    .portal-note {
        flex-direction: column;
        gap: var(--fsh-space-3);
        padding: var(--fsh-space-4);
    }
    /* En una columna estrecha, el botón ocupa el ancho disponible. */
    .portal-card__footer .portal-btn { width: 100%; }
}

/* Impresión: el portal es una página de acceso, pero si alguien la imprime no
   tiene sentido gastar tinta en el velo azul del hero. */
@media print {
    .portal-hero {
        background: none !important;
        color: #000 !important;
        border: 1px solid #000;
    }
    .portal-hero__title, .portal-hero__text, .portal-hero__eyebrow { color: #000 !important; }
    .portal-footer { background: none !important; color: #000 !important; }
    .skip-link { display: none; }
}