/**
 * _Layout.css - Estilos Globales y de Impresión
 * Sistema de diseño unificado para el portal de Posgrado UNC.
 */

:root {
    --navy-900: #001f3f;
    --gold: #d4af37;
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Lexend', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Iconos de Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Utilidades de Diseño */
.scroll-mt-24 {
    scroll-margin-top: 6rem;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Personalización de Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #001f3f;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d4af37;
}

/* Ocultar scrollbar en contenedores de filtro */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Botonera de filtro (compartida por MaestriaCiencias y MaestriaEspecializacion) */
.filter-btn {
    padding: 0.45rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 0.5rem;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
}

.filter-btn.active {
    background: #0f2040;
    color: #c9a84c;
    box-shadow: 0 2px 8px rgba(10, 22, 40, 0.15);
}

.filter-btn:not(.active) {
    background: transparent;
    color: #1a3a6a;
}

.filter-btn:not(.active):hover {
    background: rgba(201, 168, 76, 0.08);
}

/* Cabecera y pie de página de Hoja de Ruta (ocultos por defecto en pantalla) */
.flowchart-header,
.flowchart-footer {
    display: none !important;
}

/* Estilos de Impresión (Optimizado A4 al 90%) */
@media print {

    .print\:hidden,
    .no-print,
    header,
    footer,
    nav,
    #tab-buttons,
    button {
        display: none !important;
    }

    body {
        margin: 0;
        padding: 0;
        background: white !important;
        color: black !important;
        zoom: 90%;
    }

    .section-container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .costo-section {
        display: block !important;
        background: white !important;
        border: none !important;
        padding: 0 !important;
    }

    .costo-section.hidden {
        display: none !important;
    }

    /* Forzar visibilidad de colores institucionales en impresión */
    .bg-gold\/5 {
        background-color: #fcf9f2 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .bg-navy-800 {
        background-color: #0f2040 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        color: white !important;
    }

    .bg-navy-900 {
        background-color: #0a1628 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        color: white !important;
    }

    .text-gold {
        color: #c9a84c !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .text-navy-900 {
        color: #0a1628 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Estilos de Impresión para la Guía de Inscripción */
    .step-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom: 2.5rem !important;
        border-bottom: 1.5px dashed #e5e5e5 !important;
        padding-bottom: 2rem !important;
    }

    #step-content-1,
    #step-content-2,
    #step-content-3 {
        page-break-after: always !important;
        break-after: page !important;
    }

    #step-content-6 {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* Ocultar la sección de flujo antiguo */
    #flowchart-print-section {
        display: none !important;
    }

    /* Ocultar elementos marcados para no mostrar en la Hoja de Ruta */
    body.print-flowchart-only .hide-in-flowchart {
        display: none !important;
    }

    /* Modo de impresión exclusivo de la Hoja de Ruta (A4) */
    body.print-flowchart-only {
        zoom: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    body.print-flowchart-only .page-wrapper {
        display: block !important;
        height: auto !important;
    }

    body.print-flowchart-only .page-wrapper>*:not(main) {
        display: none !important;
    }

    body.print-flowchart-only main {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.print-flowchart-only main>*:not(.dynamic-steps-section) {
        display: none !important;
    }

    body.print-flowchart-only .dynamic-steps-section {
        padding: 0.15cm !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Mostrar cabecera y pie de página de la Hoja de Ruta */
    body.print-flowchart-only .flowchart-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 2px solid #001f3f !important;
        padding-bottom: 0.1cm !important;
        margin-bottom: 0.15cm !important;
    }

    body.print-flowchart-only .flowchart-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 1px solid #ccc !important;
        padding-top: 0.1cm !important;
        margin-top: 0.15cm !important;
        font-size: 8pt !important;
    }

    /* Configuración de la grilla de pasos */
    body.print-flowchart-only #step-contents-wrapper {
        display: grid !important;
        /* AJUSTAR AQUÍ LA DISTRIBUCIÓN GENERAL DE PASOS EN LA PÁGINA (Ej: 'repeat(2, minmax(0, 1fr))' indica 2 columnas generales iguales) */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.1cm !important;
        align-items: stretch !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Forzar que todos los pasos ocupen las dos columnas */
    body.print-flowchart-only #step-content-1,
    body.print-flowchart-only #step-content-2,
    body.print-flowchart-only #step-content-3,
    body.print-flowchart-only #step-content-4,
    body.print-flowchart-only #step-content-5,
    body.print-flowchart-only #step-content-6 {
        grid-column: span 2 !important;
    }

    /* Tarjetas de pasos en formato compacto */
    body.print-flowchart-only #step-content-1,
    body.print-flowchart-only #step-content-2,
    body.print-flowchart-only #step-content-3,
    body.print-flowchart-only #step-content-4,
    body.print-flowchart-only #step-content-5,
    body.print-flowchart-only #step-content-6,
    body.print-flowchart-only .step-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        visibility: visible !important;
        opacity: 1 !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
        page-break-before: avoid !important;
        break-before: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
        align-self: stretch !important;
        animation: none !important;
        transform: none !important;
        transition: none !important;

        /* Estilos de tarjeta compacta */
        border: 1px solid #bbb !important;
        border-radius: 0.25cm !important;
        padding: 0.3cm !important;
        background: white !important;
        box-shadow: none !important;
    }

    body.print-flowchart-only .step-content>div {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.print-flowchart-only .step-content * {
        text-align: left !important;
        box-shadow: none !important;
    }

    body.print-flowchart-only .step-content h2 {
        font-size: 10pt !important;
        font-weight: 800 !important;
        color: #001f3f !important;
        margin-top: 0 !important;
        margin-bottom: 0.15cm !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        letter-spacing: -0.01em !important;
    }

    body.print-flowchart-only .step-content p {
        font-size: 8pt !important;
        line-height: 1.3 !important;
        color: #333 !important;
        margin-bottom: 0.2cm !important;
    }

    /* Ocultar iconos inline */
    body.print-flowchart-only .step-content .material-symbols-outlined {
        display: none !important;
    }

    /* Paso 1: Cuadrícula interna de 2 columnas */
    body.print-flowchart-only #step-content-1 {
        display: grid !important;
        /* AJUSTAR AQUÍ EL ANCHO DE LAS COLUMNAS INTERNAS DEL PASO 1 (Ej: 'repeat(2, minmax(0, 1fr))' es 50%/50%, o puedes usar '1fr 1.5fr') */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 0.4cm !important;
        row-gap: 0.1cm !important;
        align-content: start !important;
    }

    body.print-flowchart-only #step-content-1 h2 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.print-flowchart-only #step-content-1 #step1-subtitle {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin-bottom: 0.15cm !important;
    }

    /* Paso 1: Tarjetas de precios compactas en 2 columnas */
    body.print-flowchart-only #prices-container {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0.2cm !important;
        margin: 0.1cm 0 0.2cm 0 !important;
        width: 100% !important;
    }

    body.print-flowchart-only #prices-container>div {
        flex: 1 !important;
        background: #f8f9fa !important;
        border: 1px solid #ddd !important;
        padding: 0.15cm !important;
        border-radius: 0.15cm !important;
        text-align: center !important;
    }

    body.print-flowchart-only #prices-container p {
        margin: 0 !important;
        text-align: center !important;
    }

    body.print-flowchart-only #prices-container p:first-child {
        font-size: 7pt !important;
        font-weight: bold !important;
        color: #555 !important;
    }

    body.print-flowchart-only #prices-container p:last-child {
        font-size: 11pt !important;
        font-weight: 800 !important;
        color: #001f3f !important;
        letter-spacing: -0.02em !important;
    }

    /* Pasos con links de consulta */
    body.print-flowchart-only .flowchart-link-card {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    body.print-flowchart-only .flowchart-link-card p,
    body.print-flowchart-only .flowchart-link-card div {
        display: none !important;
    }

    body.print-flowchart-only .flowchart-link-card a {
        display: block !important;
        background: transparent !important;
        color: #001f3f !important;
        font-size: 8pt !important;
        font-weight: bold !important;
        padding: 0 !important;
        border-radius: 0 !important;
        text-decoration: underline !important;
        margin-top: 0.1cm !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }

    body.print-flowchart-only .flowchart-link-card a:not(#step2-link)[href]::after {
        content: " (" attr(href) ")" !important;
        font-size: 8pt !important;
        font-weight: bold !important;
        color: #001f3f !important;
        text-decoration: underline !important;
    }

    /* Paso 4 y Paso 5: Cuadrícula interna de 2 columnas */
    body.print-flowchart-only #step-content-4>div,
    body.print-flowchart-only #step-content-5>div {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 0.4cm !important;
        row-gap: 0.1cm !important;
        align-items: start !important;
        text-align: left !important;
        max-width: none !important;
        width: 100% !important;
    }

    body.print-flowchart-only #step-content-4 h2,
    body.print-flowchart-only #step-content-5 h2 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 11pt !important;
    }

    body.print-flowchart-only #step-content-4 p,
    body.print-flowchart-only #step-content-5 p {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 7.5pt !important;
        color: #555 !important;
        line-height: 1.2 !important;
    }

    body.print-flowchart-only #step-content-4 .flowchart-link-card,
    body.print-flowchart-only #step-content-5 .flowchart-link-card {
        grid-column: span 2 !important;
        grid-row: 2 !important;
        margin-top: 0.05cm !important;
        text-align: left !important;
    }

    body.print-flowchart-only #step-content-4 .flowchart-link-card a,
    body.print-flowchart-only #step-content-5 .flowchart-link-card a {
        margin: 0 !important;
        display: block !important;
        text-align: left !important;
    }

    /* Paso 6: Distribución interna */
    body.print-flowchart-only #step-content-6>div {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 0.4cm !important;
        row-gap: 0.1cm !important;
        align-items: start !important;
        text-align: left !important;
        max-width: none !important;
        width: 100% !important;
    }

    body.print-flowchart-only #step-content-6 h2 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 11pt !important;
    }

    body.print-flowchart-only #step-content-6 p {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 7.5pt !important;
        color: #555 !important;
        line-height: 1.2 !important;
    }

    body.print-flowchart-only #step-content-6 .grid {
        grid-column: span 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.05cm !important;
        margin-top: 0.1cm !important;
    }

    body.print-flowchart-only .flowchart-option-card {
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.15cm !important;
        text-align: left !important;
    }

    body.print-flowchart-only .flowchart-option-card h3 {
        font-size: 8pt !important;
        font-weight: bold !important;
        color: #001f3f !important;
        margin: 0 !important;
        display: inline !important;
    }

    body.print-flowchart-only .flowchart-option-card h3::after {
        content: ": " !important;
    }

    body.print-flowchart-only .flowchart-option-card p {
        display: none !important;
    }

    body.print-flowchart-only .flowchart-option-card a {
        display: inline !important;
        background: transparent !important;
        color: #001f3f !important;
        font-size: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        text-decoration: underline !important;
        margin: 0 !important;
    }

    body.print-flowchart-only .flowchart-option-card a[href]::after {
        content: attr(href) !important;
        font-size: 8pt !important;
        font-weight: bold !important;
        color: #001f3f !important;
        text-decoration: underline !important;
    }

    /* Estilos compactos para sedes de pago en Paso 1 */
    body.print-flowchart-only #step-content-1 .bg-white.rounded-3xl.border {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        border: none !important;
        padding: 0 !important;
        margin-top: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.print-flowchart-only #step-content-1 h4 {
        font-size: 7.5pt !important;
        margin-top: 0.1cm !important;
        margin-bottom: 0.05cm !important;
        text-align: left !important;
    }

    body.print-flowchart-only #locations-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.1cm 0.4cm !important;
    }

    body.print-flowchart-only #locations-container>div {
        border-bottom: 1px dashed #eee !important;
        padding-bottom: 0.05cm !important;
    }

    body.print-flowchart-only #locations-container p.text-navy-900 {
        font-size: 7pt !important;
        margin-bottom: 0 !important;
    }

    body.print-flowchart-only #locations-container p.text-neutral-400 {
        font-size: 6.5pt !important;
        margin-bottom: 0 !important;
    }

    /* Paso 2: Cuadrícula interna de 2 columnas */
    body.print-flowchart-only #step-content-2>div {
        display: grid !important;
        /* AJUSTAR AQUÍ EL ANCHO DE LAS COLUMNAS INTERNAS DEL PASO 2 (Ej: 'repeat(2, minmax(0, 1fr))' es 50%/50%, o puedes poner '40% 60%') */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 0.4cm !important;
        row-gap: 0.1cm !important;
        align-content: start !important;
    }

    body.print-flowchart-only #step-content-2 h2 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.print-flowchart-only #step-content-2 #step2-description {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin-bottom: 0.15cm !important;
    }

    body.print-flowchart-only #step-content-2 .flowchart-link-card {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    /* Estilos compactos para subpasos en Paso 2 */
    body.print-flowchart-only #step2-process-container {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.05cm !important;
        margin-top: 0 !important;
    }

    body.print-flowchart-only #step2-process-container>div {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.1cm !important;
        padding: 0.05cm 0.1cm !important;
        border: 1px dashed #ddd !important;
        border-radius: 0.1cm !important;
        background: #fafafa !important;
    }

    body.print-flowchart-only #step2-process-container span.text-gold {
        font-size: 8pt !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
    }

    body.print-flowchart-only #step2-process-container p.text-navy-900 {
        font-size: 7.5pt !important;
        font-weight: bold !important;
        margin-bottom: 0 !important;
    }

    body.print-flowchart-only #step2-process-container p.text-neutral-400 {
        font-size: 6.5pt !important;
        margin-bottom: 0 !important;
    }

    /* Paso 3: Cuadrícula interna de 2 columnas para el título y descripción */
    body.print-flowchart-only #step-content-3 > div {
        display: grid !important;
        /* AJUSTAR AQUÍ EL ANCHO DE LAS COLUMNAS INTERNAS DEL PASO 3 (Ej: 'repeat(2, minmax(0, 1fr))' es 50%/50%) */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 0.4cm !important;
        row-gap: 0.1cm !important;
        align-content: start !important;
    }
    body.print-flowchart-only #step-content-3 h2 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-bottom: 0 !important;
    }
    body.print-flowchart-only #step-content-3 #step3-description {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin-bottom: 0 !important;
    }
    body.print-flowchart-only #step-content-3 div.space-y-8 {
        grid-column: span 2 !important;
        grid-row: 2 !important;
        margin-top: 0.2cm !important;
    }

    /* Estilos compactos para requisitos consolidados en Paso 3 */
    body.print-flowchart-only #requisitos-lista-print {
        display: block !important;
        margin-top: 0.1cm !important;
    }

    body.print-flowchart-only #requisitos-lista-print>div {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.3cm !important;
    }

    body.print-flowchart-only #requisitos-lista-print>div>* {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.print-flowchart-only #requisitos-lista-print .border.border-neutral-200 {
        border: 1px solid #ccc !important;
        border-radius: 0.15cm !important;
        padding: 0.15cm !important;
        margin-bottom: 0 !important;
        background: #fcfcfc !important;
    }

    body.print-flowchart-only #requisitos-lista-print h4 {
        font-size: 7.5pt !important;
        font-weight: 800 !important;
        margin-top: 0 !important;
        margin-bottom: 0.05cm !important;
        border-bottom: 1px solid #ddd !important;
        padding-bottom: 0.02cm !important;
    }

    body.print-flowchart-only #requisitos-lista-print .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.05cm !important;
    }

    body.print-flowchart-only #requisitos-lista-print .flex.items-start {
        padding: 0 !important;
        border: none !important;
        gap: 0.08cm !important;
    }

    body.print-flowchart-only #requisitos-lista-print .w-5.h-5 {
        width: 10px !important;
        height: 10px !important;
        border: 1px solid #c9a84c !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.print-flowchart-only #requisitos-lista-print .w-5.h-5 span.material-symbols-outlined {
        display: inline-block !important;
        font-size: 5pt !important;
        color: #c9a84c !important;
    }

    body.print-flowchart-only #requisitos-lista-print span.text-xs {
        font-size: 6.5pt !important;
        line-height: 1.1 !important;
    }

    /* Ocultar/Mostrar columnas según el programa seleccionado para imprimir */
    body.print-flowchart-only #requisitos-lista-print.print-doctorado > div > div:nth-child(2),
    body.print-flowchart-only #requisitos-lista-print.print-doctorado > div > div:nth-child(3) {
        display: none !important;
    }
    body.print-flowchart-only #requisitos-lista-print.print-maestria-ciencias > div > div:nth-child(1),
    body.print-flowchart-only #requisitos-lista-print.print-maestria-ciencias > div > div:nth-child(3) {
        display: none !important;
    }
    body.print-flowchart-only #requisitos-lista-print.print-maestria-especializacion > div > div:nth-child(1),
    body.print-flowchart-only #requisitos-lista-print.print-maestria-especializacion > div > div:nth-child(2) {
        display: none !important;
    }

    /* Convertir el contenedor externo a 1 sola columna de ancho completo si se imprime por programa */
    body.print-flowchart-only #requisitos-lista-print.print-doctorado > div,
    body.print-flowchart-only #requisitos-lista-print.print-maestria-ciencias > div,
    body.print-flowchart-only #requisitos-lista-print.print-maestria-especializacion > div {
        grid-template-columns: 1fr !important;
    }

    /* Distribuir los requisitos internos en 2 columnas paralelas para ahorrar espacio vertical si es un solo programa */
    body.print-flowchart-only #requisitos-lista-print.print-doctorado .grid,
    body.print-flowchart-only #requisitos-lista-print.print-maestria-ciencias .grid,
    body.print-flowchart-only #requisitos-lista-print.print-maestria-especializacion .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.15cm 0.4cm !important;
    }
}