/*
 * Sistema de diseño compartido de la web pública institucional.
 *
 * Este archivo contiene solamente estructura y componentes reutilizables.
 * Cada página puede definir colores y fondos contextuales mediante variables,
 * pero no debe duplicar tamaños, espaciados, radios ni comportamientos.
 */

:root {
    --brand-primary: #013A63;
    --brand-background: #FAFCFC;
    --brand-life: #73E5E2;
    --brand-soft-mint: #D9FFFC;
    --brand-blue: #0B8AD8;
    --brand-mint: #AAF2EE;
    --brand-deep-blue: #075B8E;
    --brand-light-blue: #AEE0FF;
    --brand-secondary: #2E5E7C;
    --brand-balance: #B8C6CC;
    --brand-muted: #8094A0;
    --brand-steel: #6D96AF;
    --brand-ink: #001C2B;
    --brand-gray: #56636B;
    --brand-accent-soft: #F98787;
    --brand-accent-warm: #FFA466;
    --brand-accent-strong: #F16363;
    --brand-accent-orange: #FF8D40;

    --afa-font-display: "Oswald", "Arial Narrow", sans-serif;
    --afa-font-heading: "Raleway", "Segoe UI", Arial, sans-serif;
    --afa-font-reading: "Zilla Slab", Georgia, serif;

    --afa-container-max: 1180px;
    --afa-container-gutter: clamp(1rem, 3vw, 2.25rem);
    --afa-section-space: clamp(4.5rem, 9vw, 7.5rem);

    --afa-space-1: 0.25rem;
    --afa-space-2: 0.5rem;
    --afa-space-3: 0.75rem;
    --afa-space-4: 1rem;
    --afa-space-5: 1.5rem;
    --afa-space-6: 2rem;
    --afa-space-7: 3rem;
    --afa-space-8: 4.5rem;
    --afa-space-9: 7rem;

    --afa-radius-sm: 14px;
    --afa-radius-md: 22px;
    --afa-radius-lg: 32px;
    --afa-radius-pill: 999px;

    --afa-shadow-soft: 0 16px 44px rgba(0, 28, 43, 0.09);
    --afa-shadow-strong: 0 26px 70px rgba(0, 28, 43, 0.17);

    --afa-surface: rgba(255, 255, 255, 0.94);
    --afa-surface-soft: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(217, 255, 252, 0.34));
    --afa-border-soft: rgba(1, 58, 99, 0.1);
    --afa-text: #001C2B;
    --afa-text-soft: #2E5E7C;
    --afa-focus: #73E5E2;
}

/*
 * Contenedor y secciones
 */
.afa-container {
    box-sizing: border-box;
    width: calc(100% - (2 * var(--afa-container-gutter)));
    max-width: var(--afa-container-max);
    margin-inline: auto;
    position: relative;
}

.afa-section {
    box-sizing: border-box;
    padding-block: var(--afa-section-space);
}

.afa-section--compact {
    --afa-section-space: clamp(3.5rem, 7vw, 5.5rem);
}

.afa-section--soft {
    background: var(--afa-section-background, var(--brand-background));
}

.afa-section--dark {
    background: var(--afa-section-background, var(--brand-ink));
    color: var(--brand-background);
}

/*
 * Rejillas de contenido
 */
.afa-layout-grid {
    display: grid;
    min-width: 0;
    gap: var(--afa-grid-gap, clamp(1.125rem, 2vw, 1.75rem));
    align-items: var(--afa-grid-align, stretch);
}

.afa-layout-grid--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(18.75rem, 0.85fr);
}

.afa-layout-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Tarjetas
 */
.afa-card {
    box-sizing: border-box;
    min-width: 0;
    padding: var(--afa-card-padding, clamp(1.5rem, 2.4vw, 2.125rem));
    border: 1px solid var(--afa-card-border, var(--afa-border-soft));
    border-radius: var(--afa-card-radius, var(--afa-radius-lg));
    background: var(--afa-card-background, var(--afa-surface));
    color: var(--afa-card-color, var(--afa-text));
    box-shadow: var(--afa-card-shadow, var(--afa-shadow-soft));
}

.afa-card--soft {
    --afa-card-background: var(--afa-surface-soft);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.afa-card > p {
    max-width: 68ch;
    margin-bottom: 0.75rem !important;
    line-height: 1.5 !important;
}

.afa-card--interactive {
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.afa-card--interactive:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand-life) 58%, transparent);
    box-shadow: var(--afa-shadow-strong);
}

.afa-card--interactive:focus-visible {
    outline: 3px solid var(--afa-focus);
    outline-offset: 4px;
}

/*
 * Acciones y botones
 */
.afa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--afa-action-gap, 0.75rem);
    align-items: center;
}

.afa-button {
    box-sizing: border-box;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.8rem 1.45rem;
    border: 1px solid var(--afa-button-border, rgba(1, 58, 99, 0.12));
    border-radius: var(--afa-radius-pill);
    background: var(--afa-button-background, var(--brand-primary));
    color: var(--afa-button-color, #ffffff);
    box-shadow: var(--afa-button-shadow, 0 16px 34px rgba(1, 58, 99, 0.18));
    font-family: var(--afa-font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.afa-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(1, 58, 99, 0.2);
}

.afa-button:focus-visible {
    outline: 3px solid var(--afa-focus);
    outline-offset: 3px;
}

.afa-button--primary {
    --afa-button-background: linear-gradient(135deg, var(--brand-primary), var(--brand-deep-blue));
}

.afa-button--secondary {
    --afa-button-background: #ffffff;
    --afa-button-color: var(--brand-primary);
    --afa-button-border: rgba(1, 58, 99, 0.16);
    --afa-button-shadow: inset 0 0 0 1px rgba(1, 58, 99, 0.06), 0 14px 28px rgba(1, 58, 99, 0.1);
}

.afa-button--accent {
    --afa-button-background: linear-gradient(135deg, var(--brand-accent-soft), var(--brand-accent-warm) 52%, var(--brand-accent-orange));
    --afa-button-color: var(--brand-ink);
    --afa-button-border: rgba(241, 99, 99, 0.28);
    --afa-button-shadow: 0 12px 26px rgba(241, 99, 99, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

/*
 * Modal documental reutilizable
 */
body.afa-document-modal-open {
    overflow: hidden;
}

.afa-document-modal[hidden] {
    display: none !important;
}

.afa-document-modal {
    position: fixed;
    z-index: 1000000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0.75rem;
    background: rgba(0, 28, 43, 0.82);
}

.afa-document-modal__dialog {
    display: flex;
    width: min(100%, 70rem);
    height: min(90dvh, 52rem);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(250, 252, 252, 0.25);
    border-radius: var(--afa-radius-md);
    background: var(--brand-background);
    box-shadow: 0 28px 90px rgba(0, 28, 43, 0.5);
}

.afa-document-modal__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    background: var(--brand-primary);
    color: var(--brand-background);
}

.afa-document-modal__heading {
    min-width: 0;
}

.afa-document-modal__heading h2 {
    margin: 0 !important;
    color: var(--brand-background) !important;
    background: none !important;
    font-family: var(--afa-font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    -webkit-text-fill-color: var(--brand-background) !important;
}

.afa-document-modal__heading p {
    margin: 0.15rem 0 0 !important;
    color: var(--brand-light-blue) !important;
    font-family: var(--afa-font-heading) !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

.afa-document-modal__controls {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.afa-document-modal__external,
.afa-document-modal__close {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-family: var(--afa-font-heading);
    font-weight: 800;
}

.afa-document-modal__external {
    padding: 0.55rem 0.8rem;
    background: var(--brand-background);
    color: var(--brand-primary);
    font-size: 0.76rem;
    text-decoration: none;
}

.afa-document-modal__external:hover {
    background: var(--brand-soft-mint);
}

.afa-document-modal__close {
    width: 2.5rem;
    padding: 0;
    border: 1px solid rgba(250, 252, 252, 0.42);
    background: transparent;
    color: var(--brand-background);
    font-size: 1.35rem;
    cursor: pointer;
}

.afa-document-modal__close:hover {
    background: rgba(250, 252, 252, 0.14);
}

.afa-document-modal__external:focus-visible,
.afa-document-modal__close:focus-visible {
    outline: 3px solid var(--afa-focus);
    outline-offset: 2px;
}

.afa-document-modal__body {
    flex: 1;
    min-height: 0;
    background: var(--brand-balance);
}

.afa-document-modal iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--brand-background);
}

.afa-sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .afa-layout-grid--split {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    :root {
        --afa-container-gutter: 1rem;
    }

    .afa-actions > .afa-button {
        width: 100%;
    }

    .afa-document-modal__external {
        width: 2.5rem;
        padding: 0;
        font-size: 0;
    }

    .afa-document-modal__external::before {
        content: "↗";
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .afa-card--interactive,
    .afa-button {
        transition: none;
    }
}

@media (forced-colors: active) {
    .afa-card,
    .afa-button {
        border-color: CanvasText;
    }
}

@media print {
    .afa-document-modal {
        display: none !important;
    }

    .afa-card {
        box-shadow: none;
    }
}