/* =========================================================
RESET
========================================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;

}

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    min-height:100vh;

    overflow-x:hidden;

    background:
    linear-gradient(
        180deg,
        #EEF2F7 0%,
        #E2E8F0 100%
    );

    color:#0F172A;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

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

::-webkit-scrollbar{

    width:10px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:#E2E8F0;

}

::-webkit-scrollbar-thumb{

    background:#94A3B8;
    border-radius:10px;

}

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

.header{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #0B3C91 0%,
        #0F4FB8 50%,
        #1D4ED8 100%
    );

    color:white;

    padding:34px;

    box-shadow:
    0 10px 30px rgba(15,23,42,.20);

}

.header::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
    rgba(255,255,255,.05);

    top:-220px;
    right:-120px;

}

.header::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
    rgba(255,255,255,.04);

    bottom:-160px;
    left:-100px;

}

.header-content{

    position:relative;

    z-index:2;

}

.header h1{

    font-size:34px;

    font-weight:900;

    letter-spacing:-1px;

    line-height:1.1;

    word-break:break-word;

}

.header p{

    margin-top:10px;

    font-size:15px;

    opacity:.92;

    font-weight:500;

    line-height:1.5;

}

/* =========================================================
LAYOUT
========================================================= */

.container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:28px;

}

/* =========================================================
MENU
========================================================= */

.menu{

    display:flex;

    gap:16px;

    margin-bottom:26px;

    flex-wrap:wrap;

}

/* =========================================================
BUTTONS
========================================================= */

.button{

    border:none;

    color:white;

    padding:16px 24px;

    border-radius:16px;

    font-size:14px;

    font-weight:800;

    cursor:pointer;

    transition:.22s;

    min-width:210px;

    min-height:52px;

    box-shadow:
    0 8px 22px rgba(15,23,42,.12);

    touch-action:manipulation;

}

.button:hover{

    transform:
    translateY(-3px);

}

.button:active{

    transform:
    scale(.98);

}

.button.blue{

    background:
    linear-gradient(
        135deg,
        #0B3C91,
        #1565C0
    );

}

.button.green{

    background:
    linear-gradient(
        135deg,
        #15803D,
        #16A34A
    );

}

.button.orange{

    background:
    linear-gradient(
        135deg,
        #C2410C,
        #EA580C
    );

}

/* =========================================================
CARD
========================================================= */

.card{

    position:relative;

    overflow:visible;

    background:white;

    border-radius:28px;

    border:1px solid #D9E2EC;

    padding:30px;

    margin-bottom:26px;

    box-shadow:
    0 12px 30px rgba(15,23,42,.06);

}

#consultaFolios{

    position:relative;

    z-index:999;

}

.card::before{

    content:"";

    pointer-events:none;

    position:absolute;

    width:240px;
    height:240px;

    background:
    rgba(59,130,246,.03);

    border-radius:50%;

    top:-120px;
    right:-100px;

}

.section-title{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:900;

    color:#0B3C91;

    margin-bottom:26px;

    padding-bottom:14px;

    border-bottom:2px solid #E2E8F0;

    line-height:1.3;

}

/* =========================================================
GRID
========================================================= */

.grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}

@media(min-width:960px){

    .grid{

        grid-template-columns:
        1fr 1fr;

    }

}

/* =========================================================
FORM
========================================================= */

.form-group{

    display:flex;

    flex-direction:column;

    width:100%;

    min-width:0;

}

label{

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.8px;

    color:#475569;

    margin-bottom:10px;

    line-height:1.4;

}

input,
select,
textarea{

    width:100%;

    border:1px solid #CBD5E1;

    border-radius:16px;

    padding:16px 18px;

    font-size:14px;

    background:white;

    transition:.20s;

    color:#0F172A;

    min-width:0;

}

/* =========================================================
APPEARANCE SOLO CAMPOS
========================================================= */

input[type="date"],
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea{

    appearance:none;

    -webkit-appearance:none;

}

input:hover,
select:hover,
textarea:hover{

    border-color:#94A3B8;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:#1565C0;

    box-shadow:
    0 0 0 5px rgba(21,101,192,.10);

}

textarea{

    min-height:140px;

    resize:vertical;

    line-height:1.6;

}

/* =========================================================
TIME GRID
========================================================= */

.time-grid{

    display:grid;

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

    gap:12px;

}

/* =========================================================
BADGES
========================================================= */

.badges{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.badge{

    border:1px solid #CBD5E1;

    background:
    linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F8FAFC 100%
    );

    border-radius:16px;

    padding:13px 16px;

    font-size:13px;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.2s;

    cursor:pointer;

    user-select:none;

    min-height:50px;

    pointer-events:auto;

}

.badge:hover{

    border-color:#1565C0;

    background:#EFF6FF;

}

.badge input{

    width:18px;
    height:18px;

    flex-shrink:0;

    appearance:auto !important;

    -webkit-appearance:checkbox !important;

    accent-color:#0B3C91;

    cursor:pointer;

    pointer-events:auto;

}

/* =========================================================
ACTION BAR
========================================================= */

.action-bar{

    margin-top:26px;

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

/* =========================================================
TABLES
========================================================= */

table{

    width:100%;

}

#tablaFolios table{

    min-width:900px;

}

th,
td{

    word-break:break-word;

}

/* =========================================================
PDF WRAPPER
========================================================= */

.pdf-wrapper{

    position:fixed;

    left:-99999px;

    top:0;

    width:816px;

    background:white;

}

/* =========================================================
PDF
========================================================= */

.pdf{

    width:816px;

    min-height:1056px;

    background:white;

    color:#111827;

    padding:34px 38px;

}

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

.pdf-header{

    border-bottom:2px solid #0B3C91;

    padding-bottom:18px;

    margin-bottom:22px;

}

.pdf-header-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

}

.pdf-company{

    display:flex;

    gap:16px;

    align-items:center;

}

.pdf-logo{

    width:82px;

    height:82px;

    object-fit:contain;

    border:1px solid #D1D5DB;

    padding:6px;

}

.pdf-company-text h1{

    font-size:26px;

    font-weight:900;

    color:#0B3C91;

    letter-spacing:-1px;

    line-height:1.1;

}

.pdf-company-text p{

    margin-top:4px;

    font-size:13px;

    color:#64748B;

}

.pdf-folio{

    text-align:right;

}

.pdf-folio strong{

    display:block;

    font-size:13px;

    color:#64748B;

    margin-bottom:6px;

    text-transform:uppercase;

}

.pdf-folio-number{

    font-size:30px;

    font-weight:900;

    color:#0B3C91;

}

/* =========================================================
PDF META
========================================================= */

.pdf-meta{

    margin-top:18px;

    display:grid;

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

    border:1px solid #CBD5E1;

}

.pdf-meta-item{

    border-right:1px solid #CBD5E1;

    padding:12px;

}

.pdf-meta-item:last-child{

    border-right:none;

}

.pdf-meta-item strong{

    display:block;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.6px;

    color:#64748B;

    margin-bottom:6px;

}

.pdf-meta-item span{

    font-size:15px;

    font-weight:700;

}

/* =========================================================
PDF SECTIONS
========================================================= */

.pdf-section{

    margin-top:20px;

    border:1px solid #CBD5E1;

}

.pdf-section-title{

    background:#F8FAFC;

    border-bottom:1px solid #CBD5E1;

    padding:12px 16px;

    font-size:14px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.7px;

    color:#0B3C91;

}

/* =========================================================
PDF TABLE
========================================================= */

.pdf-table{

    width:100%;

    border-collapse:collapse;

    min-width:unset;

}

.pdf-table td{

    border-bottom:1px solid #E2E8F0;

    border-right:1px solid #E2E8F0;

    padding:12px 14px;

    vertical-align:top;

}

.pdf-table tr:last-child td{

    border-bottom:none;

}

.pdf-table td:last-child{

    border-right:none;

}

.pdf-label{

    display:block;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.6px;

    color:#64748B;

    margin-bottom:5px;

    font-weight:700;

}

.pdf-value{

    font-size:15px;

    font-weight:700;

    color:#111827;

}

/* =========================================================
INCIDENCIAS PDF
========================================================= */

.pdf-incidencias{

    padding:18px;

    line-height:1.8;

    white-space:pre-line;

    font-size:14px;

}

/* =========================================================
OBS PDF
========================================================= */

.pdf-observaciones{

    padding:18px;

    min-height:100px;

    line-height:1.8;

    white-space:pre-line;

    font-size:14px;

}

/* =========================================================
FIRMAS
========================================================= */

.signatures{

    margin-top:70px;

    display:grid;

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

    gap:30px;

}

.signature-box{

    text-align:center;

}

.stamp-box{

    height:95px;

    border:2px solid #334155;

    margin-bottom:10px;

    background:
    repeating-linear-gradient(
        45deg,
        #FFFFFF,
        #FFFFFF 10px,
        #FAFAFA 10px,
        #FAFAFA 20px
    );

}

.signature-box span{

    font-size:13px;

    font-weight:800;

    color:#111827;

    text-transform:uppercase;

    letter-spacing:.5px;

}

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

.pdf-footer{

    margin-top:40px;

    border-top:1px solid #CBD5E1;

    padding-top:12px;

    display:flex;

    justify-content:space-between;

    font-size:11px;

    color:#64748B;

}

/* =========================================================
KPI GRID
========================================================= */

.kpi-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:10px;

}

/* =========================================================
KPI CARD
========================================================= */

.kpi-card{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F8FAFC 100%
    );

    border:1px solid #E2E8F0;

    border-radius:24px;

    padding:24px;

    min-height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-shadow:
    0 10px 24px rgba(15,23,42,.06);

    transition:.25s;

}

.kpi-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 36px rgba(15,23,42,.10);

}

/* =========================================================
KPI DECORATION
========================================================= */

.kpi-card::before{

    content:"";

    position:absolute;

    width:140px;
    height:140px;

    border-radius:50%;

    background:
    rgba(59,130,246,.06);

    top:-70px;
    right:-50px;

}

/* =========================================================
KPI LABEL
========================================================= */

.kpi-label{

    position:relative;

    z-index:2;

    font-size:12px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.8px;

    color:#64748B;

    margin-bottom:14px;

    line-height:1.4;

}

/* =========================================================
KPI VALUE
========================================================= */

.kpi-value{

    position:relative;

    z-index:2;

    font-size:42px;

    font-weight:900;

    line-height:1;

    color:#0F172A;

    letter-spacing:-2px;

}

/* =========================================================
KPI VALUE SMALL
========================================================= */

.kpi-value-small{

    position:relative;

    z-index:2;

    font-size:26px;

    font-weight:900;

    line-height:1.2;

    color:#0F172A;

}

/* =========================================================
KPI SUB
========================================================= */

.kpi-sub{

    position:relative;

    z-index:2;

    margin-top:10px;

    font-size:13px;

    font-weight:700;

    color:#64748B;

}

/* =========================================================
KPI COLORS
========================================================= */

.kpi-blue{

    background:
    linear-gradient(
        135deg,
        #DBEAFE 0%,
        #EFF6FF 100%
    );

}

.kpi-purple{

    background:
    linear-gradient(
        135deg,
        #F3E8FF 0%,
        #FAF5FF 100%
    );

}

.kpi-green{

    background:
    linear-gradient(
        135deg,
        #DCFCE7 0%,
        #F0FDF4 100%
    );

}

.kpi-yellow{

    background:
    linear-gradient(
        135deg,
        #FEF9C3 0%,
        #FEFCE8 100%
    );

}

.kpi-red{

    background:
    linear-gradient(
        135deg,
        #FEE2E2 0%,
        #FEF2F2 100%
    );

}

/* =========================================================
RESPONSIVE KPI
========================================================= */

@media(max-width:768px){

    .kpi-grid{

        grid-template-columns:1fr;

    }

    .kpi-card{

        min-height:130px;

        padding:22px;

    }

    .kpi-value{

        font-size:34px;

    }

    .kpi-value-small{

        font-size:22px;

    }

}

/* =========================================================
TABLE RESPONSIVE
========================================================= */

#tablaFolios{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:960px){

    .container{

        padding:20px;

    }

    .card{

        padding:24px;

        border-radius:24px;

    }

    .section-title{

        font-size:20px;

    }

}

/* =========================================================
SMARTPHONE
========================================================= */

@media(max-width:768px){

    .header{

        padding:24px 20px;

    }

    .header h1{

        font-size:26px;

        line-height:1.2;

    }

    .header p{

        font-size:13px;

    }

    .container{

        padding:16px;

    }

    .menu{

        flex-direction:column;

    }

    .button{

        width:100%;

        min-width:100%;

        font-size:15px;

        min-height:56px;

    }

    .card{

        padding:22px 18px;

        border-radius:22px;

    }

    .section-title{

        font-size:18px;

        margin-bottom:22px;

    }

    .grid{

        gap:18px;

    }

    input,
    select,
    textarea{

        font-size:16px;

        padding:18px;

    }

    .badge{

        width:100%;

        font-size:14px;

    }

    .action-bar{

        flex-direction:column;

    }

    .pdf-footer{

        flex-direction:column;

        gap:8px;

    }

}

/* =========================================================
SMARTPHONE PEQUEÑO
========================================================= */

@media(max-width:480px){

    .header{

        padding:20px 16px;

    }

    .header h1{

        font-size:22px;

    }

    .header p{

        font-size:12px;

    }

    .container{

        padding:12px;

    }

    .card{

        padding:18px 14px;

        border-radius:18px;

    }

    .section-title{

        font-size:16px;

    }

    .time-grid{

        grid-template-columns:1fr;

    }

    .badge{

        padding:14px;

    }

    input,
    select,
    textarea{

        border-radius:14px;

    }

}

/* =========================================================
KPI RESUMEN
========================================================= */

.kpi-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    align-items:start;

}

.kpi-grid .card{

    padding:20px;

    margin-bottom:0;

    border-radius:20px;

    min-height:auto;

    box-shadow:
    0 4px 14px rgba(15,23,42,.05);

}

.kpi-grid .card h2{

    font-size:15px;

    margin-bottom:10px;

    color:#334155;

    font-weight:800;

    line-height:1.3;

}

.kpi-grid .card h1{

    font-size:38px;

    line-height:1;

    font-weight:900;

    color:#0F172A;

}

/* =========================================================
TABLA FOLIOS
========================================================= */

.tabla-responsive{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

.tabla-folios{

    width:100%;

    min-width:950px;

    border-collapse:collapse;

    background:white;

}

/* =========================================================
RESPONSIVE KPI
========================================================= */

@media(max-width:768px){

    .kpi-grid{

        grid-template-columns:1fr;

    }

    .kpi-grid .card h1{

        font-size:30px;

    }

}

.kpi-grid .card{

    transition:.18s ease;

}

.kpi-grid .card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 24px rgba(15,23,42,.10);

}

/* =========================================================
GRID GRÁFICAS
========================================================= */

.graficas-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

    margin-top:30px;

}


.grafica-card::before{

    display:none;

}

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

.chart-container{

    position:relative;

    width:100%;

    height:420px;

}

.chart-container.small{

    height:420px;

}

#graficaRendimiento,
#graficaCentros{

    width:100% !important;

    height:100% !important;

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .graficas-grid{

        grid-template-columns:1fr;

    }

}

#graficasKPI{

    width:100%;

    display:grid;

    visibility:visible;

    opacity:1;

}

.grafica-card{

    background:white;

    border-radius:28px;

    border:1px solid #D9E2EC;

    padding:30px;

    box-shadow:
    0 12px 30px rgba(15,23,42,.06);

}

/* =========================================================
TOOLBAR TABLA
========================================================= */

.tabla-toolbar{

    margin-bottom:18px;

}

/* =========================================================
BUSCADOR TABLA
========================================================= */

.buscador-tabla{

    width:100%;

    max-width:420px;

    background:white;

    border:1px solid #CBD5E1;

    border-radius:16px;

    padding:14px 18px;

    font-size:14px;

    transition:.2s;

}

.buscador-tabla:focus{

    outline:none;

    border-color:#1565C0;

    box-shadow:
    0 0 0 5px rgba(21,101,192,.10);

}

/* =========================================================
TABLA MODERNA
========================================================= */

.tabla-folios{

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

    border-radius:20px;

}

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

.tabla-folios thead th{

    position:sticky;

    top:0;

    z-index:5;

    background:#0B3C91;

    color:white;

    padding:16px;

    font-size:13px;

    font-weight:800;

    text-align:left;

    cursor:pointer;

    transition:.2s;

    user-select:none;

}

.tabla-folios thead th:hover{

    background:#1565C0;

}

/* =========================================================
BODY TABLA
========================================================= */

.tabla-folios tbody td{

    padding:16px;

    background:white;

    border-bottom:1px solid #E2E8F0;

    font-size:14px;

}

/* =========================================================
HOVER FILAS
========================================================= */

.fila-tabla{

    transition:.18s ease;

}

.fila-tabla:hover td{

    background:#F8FAFC;

}

/* =========================================================
SCROLL TABLA
========================================================= */

.tabla-responsive{

    overflow-x:auto;

    border-radius:22px;

}