/* =========================================================
   BANCO DE DOCUMENTOS NORMATIVOS
   STYLE.CSS
   PARTE 1/5
========================================================= */

:root {

    --primary: #d32f2f;
    --secondary: #2e7d32;
    --support: #1565c0;

    --bg: #f4f7fb;

    --card: #ffffff;

    --text: #243447;

    --text-light: #6b7280;

    --border: #e5e7eb;

    --shadow:
        0 8px 24px rgba(0, 0, 0, .08);

    --shadow-hover:
        0 18px 40px rgba(0, 0, 0, .12);

    --radius: 20px;

}


/* ========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:

        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

}


/* =========================================================
   FONDO
========================================================= */

.background {

    position: fixed;

    inset: 0;

    z-index: -10;

    background:

        linear-gradient(135deg,
            #eef3f8,
            #dde8f5);

}


/* =========================================================
   CONTENEDOR
========================================================= */

.container-fluid {

    width: min(1600px, 95%);

    margin: auto;

    padding:

        25px 0 40px;

}


/* =========================================================
   HEADER
========================================================= */

.header-card {

    background: white;

    border-radius: 24px;

    padding: 25px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    box-shadow: var(--shadow);

    margin-bottom: 25px;

}


.header-logo {

    width: 180px;

    display: flex;

    justify-content: center;

    align-items: center;

}


.header-logo img {

    width: 100%;

    height: auto;

}


.header-title {

    flex: 1;

    text-align: center;

}


.header-title span {

    color: var(--text-light);

    font-size: .95rem;

    display: block;

    margin-bottom: 8px;

}


.header-title h1 {

    font-size: 2.2rem;

    font-weight: 800;

    color: #1f2937;

    margin-bottom: 10px;

}


.header-title p {

    color: var(--text-light);

}


/* =========================================================
   STATUS BAR
========================================================= */

.status-bar {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 25px;

}


.status-item {

    background: white;

    border-radius: 18px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow: var(--shadow);

}


.status-item i {

    font-size: 1.5rem;

    color: #1565c0;

}


.status-item span {

    display: block;

    color: var(--text-light);

    font-size: .85rem;

}


.status-item strong {

    color: #1f2937;

}


.status-green {

    color: #2e7d32 !important;

}

/* =========================================================
   DASHBOARD STATS
========================================================= */

.dashboard-stats {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

    margin-bottom: 30px;

}


.stat-card {

    background: white;

    border-radius: 24px;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 20px;

    box-shadow: var(--shadow);

    transition: .3s;

}


.stat-card:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-hover);

}


.stat-icon {

    width: 70px;

    height: 70px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 2rem;

}


.stat-icon.blue {

    background:
        linear-gradient(135deg,
            #1976d2,
            #1565c0);

}


.stat-icon.green {

    background:
        linear-gradient(135deg,
            #43a047,
            #2e7d32);

}


.stat-card h4 {

    color: var(--text-light);

    font-size: .95rem;

    margin-bottom: 6px;

}


.stat-card h2 {

    font-size: 2rem;

    font-weight: 800;

    margin-bottom: 4px;

}


.stat-card p {

    color: var(--text-light);

    font-size: .9rem;

}


/* =========================================================
   MAPA DE PROCESOS
========================================================= */

.map-section {

    background: white;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow);

    margin-bottom: 35px;

}


.map-header {

    width: 100%;

    border: none;

    background: white;

    cursor: pointer;

    padding: 22px 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.map-header:hover {

    background: #f8fafc;

}


.map-header div {

    display: flex;

    align-items: center;

    gap: 12px;

}


.map-header span {

    font-weight: 600;

}


.map-header i {

    font-size: 1.1rem;

}


.map-actions {

    color: #1565c0;

}


.map-content {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .5s ease;

}


.map-content.active {

    max-height: 1500px;

}


.map-wrapper {

    padding: 25px;

    border-top:
        1px solid var(--border);

}


.map-image {

    width: 70%;

    border-radius: 16px;
	max-width:700px;
	 margin:auto;


    display: block;

    cursor: pointer;

    transition: .3s;

}


.map-image:hover {

    transform: scale(1.01);

}


.map-footer {

    margin-top: 15px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: var(--text-light);

}


.btn-map-expand {

    border: none;

    width: 45px;

    height: 45px;

    border-radius: 12px;

    background: #1565c0;

    color: white;

    cursor: pointer;

    transition: .3s;

}


.btn-map-expand:hover {

    transform: scale(1.05);

}


/* =========================================================
   MODAL MAPA
========================================================= */

.map-modal {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, .75);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

}


.map-modal.active {

    display: flex;

}


.map-modal-content {

    width: min(1400px, 95%);

    position: relative;

}


.map-modal-content img {

    width: 100%;

    border-radius: 20px;

    background: white;

}


.close-map {

    position: absolute;

    top: -15px;

    right: -15px;

    width: 50px;

    height: 50px;

    border: none;

    border-radius: 50%;

    background: white;

    cursor: pointer;

    box-shadow: var(--shadow);

}


.close-map i {

    font-size: 1.2rem;

}

/* =========================================================
   SECCIONES DE PROCESOS
========================================================= */

.process-section {

    margin-bottom: 35px;

}


.section-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

    padding: 18px 24px;

    border-radius: 18px;

    color: white;

    font-weight: 700;

    font-size: 1rem;

    box-shadow: var(--shadow);

}


.section-title i {

    font-size: 1.3rem;

}


.strategic-title {

    background:
        linear-gradient(135deg,
            #d32f2f,
            #b71c1c);

}


.mission-title {

    background:
        linear-gradient(135deg,
            #43a047,
            #2e7d32);

}


.support-title {

    background:
        linear-gradient(135deg,
            #1976d2,
            #1565c0);

}


/* =========================================================
   GRIDS
========================================================= */

.cards-grid {

    display: grid;

    gap: 20px;

}


.strategic-grid {

    grid-template-columns:
        repeat(3, 1fr);

}


.mission-grid {

    grid-template-columns:
        repeat(2, 1fr);

}


.support-grid {

    grid-template-columns:
        repeat(3, 1fr);

}


/* =========================================================
   TARJETAS
========================================================= */

.process-card {

    position: relative;

    background: white;

    border-radius: 22px;

    padding: 22px;

    text-decoration: none;

    color: inherit;

    box-shadow: var(--shadow);

    transition: .35s;

    overflow: hidden;

}


.process-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-hover);

}


/* =========================================================
   BADGE DOCUMENTOS
========================================================= */

.badge-docs {

    position: absolute;

    top: 15px;

    right: 15px;

    min-width: 38px;

    height: 38px;

    padding: 0 10px;

    border-radius: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: 700;

    font-size: .85rem;

}


.strategic .badge-docs {

    background: #d32f2f;

}


.mission .badge-docs {

    background: #43a047;

}


.support .badge-docs {

    background: #1976d2;

}


/* =========================================================
   CABECERA DE TARJETA
========================================================= */

.card-top {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 20px;

}


.card-icon {

    width: 70px;

    height: 70px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    flex-shrink: 0;

}


.card-icon i {

    font-size: 1.8rem;

}


.strategic-icon {

    background:
        linear-gradient(135deg,
            #d32f2f,
            #b71c1c);

}


.mission-icon {

    background:
        linear-gradient(135deg,
            #43a047,
            #2e7d32);

}


.support-icon {

    background:
        linear-gradient(135deg,
            #1976d2,
            #1565c0);

}


/* =========================================================
   INFORMACIÓN
========================================================= */

.card-info {

    flex: 1;

}


.card-info h3 {

    font-size: 1.5rem;

    font-weight: 800;

    color: #111827;

    margin-bottom: 8px;

}


.card-info p {

    color: #4b5563;

    line-height: 1.5;

    font-size: .95rem;

}


/* =========================================================
   PIE DE TARJETA
========================================================= */

.card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid var(--border);

    padding-top: 15px;

}


.card-footer span {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #6b7280;

    font-size: .88rem;

}


.card-footer i {

    font-size: 1rem;

}


.card-footer .bi-arrow-right {

    color: #94a3b8;

    transition: .3s;

}


.process-card:hover .bi-arrow-right {

    transform:
        translateX(4px);

}

/* =========================================================
   ÚLTIMA ACTUALIZACIÓN
========================================================= */

.last-update {

    background: white;

    border-radius: 18px;

    padding: 18px 24px;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow: var(--shadow);

    margin-bottom: 30px;

}


.last-update i {

    color: #1565c0;

    font-size: 1.2rem;

}


.last-update span {

    color: var(--text-light);

}


.last-update strong {

    color: #111827;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background: white;

    border-radius: 24px;

    padding: 30px;

    display: grid;

    grid-template-columns:
        1fr 2fr 1fr;

    gap: 25px;

    align-items: center;

    box-shadow: var(--shadow);

}


.footer-column {

    display: flex;

    align-items: center;

    gap: 15px;

}


.footer-column.center {

    justify-content: center;

    text-align: center;

}


.footer-column.right {

    flex-direction: column;

    align-items: flex-end;

    text-align: right;

    gap: 4px;

}


.footer-column p {

    color: var(--text-light);

}


.footer-column strong {

    color: #111827;

}


.footer-icon {

    width: 60px;

    height: 60px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(135deg,
            #1565c0,
            #0d47a1);

    color: white;

}


.footer-icon i {

    font-size: 1.8rem;

}


/* =========================================================
   LOADER
========================================================= */

#page-loader {

    position: fixed;

    inset: 0;

    background:

        rgba(255, 255, 255, .90);

    backdrop-filter: blur(8px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    transition: .5s;

}


.loader-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}


.loader-content span {

    color: #475569;

    font-weight: 600;

}


.loader-circle {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    border:

        6px solid #e2e8f0;

    border-top:

        6px solid #1565c0;

}


/* =========================================================
   EFECTOS PREMIUM
========================================================= */

.header-card,
.status-item,
.stat-card,
.process-card,
.last-update,
.footer {

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.status-item:hover,
.stat-card:hover,
.last-update:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-hover);

}


/* =========================================================
   BORDE SUPERIOR
========================================================= */

.process-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

}


.process-card.strategic::before {

    background: #d32f2f;

}


.process-card.mission::before {

    background: #43a047;

}


.process-card.support::before {

    background: #1565c0;

}


/* =========================================================
   EFECTO BRILLO
========================================================= */

.process-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -150%;

    width: 60%;

    height: 100%;

    transform: skewX(-25deg);

    background:

        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .7),
            transparent);

    transition: .9s;

}


.process-card:hover::after {

    left: 170%;

}


/* =========================================================
   ICONOS
========================================================= */

.card-icon {

    box-shadow:

        0 10px 20px rgba(0, 0, 0, .12);

}


.stat-icon {

    box-shadow:

        0 10px 20px rgba(0, 0, 0, .12);

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 10px;

}


::-webkit-scrollbar-track {

    background: #eef2f7;

}


::-webkit-scrollbar-thumb {

    background: #b8c4d3;

    border-radius: 20px;

}


::-webkit-scrollbar-thumb:hover {

    background: #8ca0b8;

}

/* =========================================================
   RESPONSIVE - TABLETS
========================================================= */

@media (max-width:1200px) {

    .container-fluid {

        width: 96%;

    }

    .strategic-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   RESPONSIVE - 992px
========================================================= */

@media (max-width:992px) {

    .header-card {

        flex-direction: column;

        text-align: center;

    }

    .header-logo {

        width: 150px;

    }

    .dashboard-stats {

        grid-template-columns:
            1fr;

    }

    .status-bar {

        grid-template-columns:
            1fr;
    }

    .mission-grid {

        grid-template-columns:
            1fr;

    }

    .support-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .footer {

        grid-template-columns:
            1fr;

        text-align: center;
    }

    .footer-column {

        justify-content: center;

    }

    .footer-column.right {

        align-items: center;

        text-align: center;

    }

}


/* =========================================================
   RESPONSIVE - 768px
========================================================= */

@media (max-width:768px) {

    .strategic-grid {

        grid-template-columns:
            1fr;

    }

    .support-grid {

        grid-template-columns:
            1fr;

    }

    .header-title h1 {

        font-size: 1.6rem;

    }

    .header-title p {

        font-size: .90rem;

    }

    .map-header {

        flex-direction: column;

        gap: 12px;

        align-items: flex-start;

    }

    .map-actions {

        width: 100%;

        justify-content: space-between;

    }

    .card-top {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .card-footer {

        flex-direction: column;

        gap: 10px;

        align-items: center;

    }

}


/* =========================================================
   RESPONSIVE - 480px
========================================================= */

@media (max-width:480px) {

    .container-fluid {

        width: 94%;

        padding-top: 15px;

    }

    .header-card {

        padding: 20px;

    }

    .header-title h1 {

        font-size: 1.35rem;

        line-height: 1.3;

    }

    .status-item {

        padding: 15px;

    }

    .stat-card {

        padding: 18px;

    }

    .stat-icon {

        width: 60px;

        height: 60px;

        font-size: 1.6rem;

    }

    .card-icon {

        width: 60px;

        height: 60px;

    }

    .card-icon i {

        font-size: 1.5rem;

    }

    .badge-docs {

        min-width: 34px;

        height: 34px;

        font-size: .80rem;

    }

    .footer {

        padding: 20px;

    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

.process-card:focus {

    outline: none;

    box-shadow:

        0 0 0 4px rgba(21, 101, 192, .20);

}

button:focus {

    outline: none;

}


/* =========================================================
   SELECCIÓN DE TEXTO
========================================================= */

::selection {

    background: #1565c0;

    color: white;

}


/* =========================================================
   MODO OSCURO (PREPARADO)
========================================================= */

body.dark {

    background: #0f172a;

}

body.dark .header-card,
body.dark .status-item,
body.dark .stat-card,
body.dark .process-card,
body.dark .footer,
body.dark .last-update,
body.dark .map-section {

    background: #1e293b;

    color: #f1f5f9;

}

body.dark .card-info p,
body.dark .footer p,
body.dark .status-item span,
body.dark .stat-card p {

    color: #cbd5e1;

}


/* =========================================================
   IMPRESIÓN
========================================================= */

@media print {

    .map-header,
    .btn-map-expand,
    #page-loader {

        display: none !important;

    }

    body {

        background: white;

    }

}


/* =========================================================
   FIN DEL ARCHIVO
========================================================= */