/*==================================================
    CALCULADORA GRATIFICACIÓN CAS
    Versión 2.0
==================================================*/

:root{

    --primary:#8B0000;
    --primary-dark:#660000;

    --secondary:#198754;

    --info:#0d6efd;

    --warning:#ffc107;

    --danger:#dc3545;

    --light:#f8fafc;

    --white:#ffffff;

    --border:#e5e7eb;

    --text:#1f2937;

    --text-light:#6b7280;

    --radius:14px;

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

    --transition:.25s ease;

    --container:1280px;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:

        "Segoe UI",

        Roboto,

        Arial,

        sans-serif;

    background:#eef2f7;

    color:var(--text);

    line-height:1.5;

}

img{

    max-width:100%;

}

a{

    text-decoration:none;

}

button,
input,
select{

    font-family:inherit;

}

button{

    cursor:pointer;

}


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

.container{

    max-width:var(--container);

    margin:auto;

    padding:35px 20px 60px;

}

section{

    margin-bottom:28px;

}

.card{

    background:var(--white);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow);

    margin-bottom:30px;

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:25px;

    gap:20px;

}

.card-header h2{

    font-size:1.5rem;

    color:var(--primary);

    margin-bottom:5px;

}

.card-header p{

    color:var(--text-light);

}

.card-header span{

    color:#888;

    font-size:.9rem;

}


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

.header{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    border-radius:20px;

    padding:35px;

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:30px;

    box-shadow:var(--shadow);

}

.header-icon{

    width:90px;

    height:90px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:3rem;

    flex-shrink:0;

}

.header-content{

    flex:1;

}

.header h1{

    font-size:2rem;

    margin-bottom:10px;

}

.header p{

    color:rgba(255,255,255,.9);

    font-size:1rem;

}


/*==================================================
ALERTAS
==================================================*/

.alerta{

    background:#fff7e6;

    border-left:6px solid var(--warning);

    border-radius:14px;

    padding:20px;

    display:flex;

    gap:18px;

    align-items:flex-start;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}

.alerta-icon{

    font-size:2rem;

    flex-shrink:0;

}

.alerta h3{

    margin-bottom:8px;

    color:#8a5a00;

}

.alerta p{

    color:#6f5a00;

}


/*==================================================
INFO
==================================================*/

.info-calculadora{

    background:#eef6ff;

    border-left:6px solid var(--info);

    border-radius:14px;

    padding:18px 24px;

    box-shadow:var(--shadow);

    margin-bottom:25px;

}



.info-calculadora h2{

    font-size:1.6rem;

    margin-bottom:12px;

}

.info-grid{

    display:grid;

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

    gap:12px;

    margin-top:15px;

}

.info-grid div{

    display:flex;

    align-items:center;

    gap:8px;

    background:white;

    border-radius:10px;

    padding:12px 14px;

    font-size:.82rem;

    color:var(--text);

    box-shadow:0 2px 6px rgba(0,0,0,.05);

    line-height:1.3;

}



/*==================================================
PANEL DEL FORMULARIO
==================================================*/

.formulario-panel{

    background:linear-gradient(
        180deg,
        #f8fafc 0%,
        #f2f5f8 100%
    );

    border:1px solid #dbe3ec;

    border-radius:14px;

    padding:22px;

    margin-top:20px;

}

.formulario-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:22px;

}

.formulario-header h3{

    margin:0;

    color:var(--primary);

    font-size:1.15rem;

    font-weight:700;

}

.formulario-header p{

    margin-top:4px;

    font-size:.88rem;

    color:#6b7280;

}

.formulario-step{

    background:#0d6efd !important;

    color:white  !important;

    padding:6px 12px  !important;

    border-radius:20px  !important;

    font-size:.75rem  !important;

    font-weight:600  !important;

}
/*==================================================
FORMULARIO
==================================================*/



.formulario{

    display:grid;

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

    gap:18px;

    margin-bottom:18px;

}


.campo{

    width:100%;

    display:flex;

    flex-direction:column;

}

.campo:nth-child(1){

    flex:.6;

}

.campo:nth-child(2){

    flex:.8;

}

.campo:nth-child(3){

    flex:1;

}

.campo:nth-child(4){

    flex:.8;

}

.campo label{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

    font-weight:600;

    color:var(--text);

    font-size:.95rem;

}


/*==================================================
INPUTS
==================================================*/

.campo input,
.campo select{

    width:100%;

    height:48px;

    padding:0 16px;

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

    border-radius:10px;

    background:#fff;

    font-size:15px;

    color:var(--text);

    transition:var(--transition);

}

.campo input::placeholder{

    color:#9ca3af;

}

.campo input:hover,
.campo select:hover{

    border-color:#b8c1cc;

}

.campo input:focus,
.campo select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(139,0,0,.12);

}


/*==================================================
ESTADOS
==================================================*/

.campo input.error,
.campo select.error{

    border-color:var(--danger);

    background:#fff7f7;

}

.campo input.ok,
.campo select.ok{

    border-color:var(--secondary);

    background:#f4fff8;

}


/*==================================================
TOOLTIPS
==================================================*/

.tooltip{

    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--info);

    color:white;

    font-size:11px;

    cursor:help;

    user-select:none;

}

.tooltiptext{

    position:absolute;

    left:50%;

    bottom:135%;

    transform:translateX(-50%);

    width:240px;

    background:#1f2937;

    color:white;

    padding:12px;

    border-radius:8px;

    font-size:.82rem;

    line-height:1.45;

    opacity:0;

    visibility:hidden;

    transition:.2s;

    box-shadow:0 10px 20px rgba(0,0,0,.25);

    z-index:100;

}

.tooltiptext::after{

    content:"";

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    border-width:7px;

    border-style:solid;

    border-color:#1f2937 transparent transparent transparent;

}

.tooltip:hover .tooltiptext{

    opacity:1;

    visibility:visible;

}


/*==================================================
BOTONES
==================================================*/

.acciones{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-top:18px;

    padding-top:18px;

    /*border-top:1px solid #dbe3ec;*/

}

.btn{

    min-width:170px;

    height:46px;

    border:none;

    border-radius:10px;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 6px 14px rgba(0,0,0,.10);

}

.btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(0,0,0,.15);

}

.btn:active{

    transform:scale(.98);

}

.calcular{

    background:var(--secondary);

    color:white;

}

.calcular:hover{

    background:#157347;

}

.limpiar{

    background:#ffc107;

    color:#333;

}

.limpiar:hover{

    background:#ffca2c;

}

.imprimir{

    background:var(--info);

    color:white;

}

.imprimir:hover{

    background:#0b5ed7;

}


/*==================================================
ANIMACIONES
==================================================*/

.card{

    animation:fadeIn .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
RESULTADO
==================================================*/

.resultado{

    background:var(--white);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow);

    margin-bottom:30px;

}


/*==================================================
RESUMEN RÁPIDO
==================================================*/

.resumen-rapido{

    display:grid;

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

    gap:18px;

    margin-bottom:25px;

}

.dato{

    background:#f8fafc;

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

    border-radius:12px;

    padding:18px;

    text-align:center;

}

.dato span{

    display:block;

    font-size:.82rem;

    color:var(--text-light);

    margin-bottom:8px;

}

.dato strong{

    display:block;

    font-size:1.3rem;

    color:var(--primary);

}


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

.resultado-grid{

    display:grid;

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

    gap:20px;

}


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

.resultado-card{

    background:white;

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

    border-radius:16px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:18px;

    transition:var(--transition);

    box-shadow:0 4px 12px rgba(0,0,0,.05);

}

.resultado-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 24px rgba(0,0,0,.10);

}


/*==================================================
ICONO
==================================================*/

.resultado-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.8rem;

    background:#eef4ff;

    flex-shrink:0;

}


/*==================================================
TEXTOS
==================================================*/

.resultado-card small{

    display:block;

    color:var(--text-light);

    margin-bottom:6px;

    font-size:.85rem;

}

.resultado-card h3{

    font-size:2rem;

    color:var(--text);

    font-weight:700;

    line-height:1.2;

}


/*==================================================
TARJETA PRINCIPAL
==================================================*/

.principal{

    background:#344a40;

    color:white;

    border:none;

}

.principal small{

    color:rgba(255,255,255,.85);

}

.principal h3{

    color:white;

}

.principal .resultado-icon{

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

}


/*==================================================
MENSAJE MONTO MÍNIMO
==================================================*/

.alerta-minima{

    margin-top:25px;

    background:#fff8e8;

    border-left:6px solid var(--warning);

    border-radius:14px;

    padding:20px;

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.alerta-minima strong{

    display:block;

    margin-bottom:8px;

    color:#7c5200;

}

.alerta-minima p{

    color:#6b5a00;

    line-height:1.5;

}


/*==================================================
ANIMACIÓN TARJETAS
==================================================*/

.resultado-card{

    animation:slideUp .35s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
PROYECCIÓN
==================================================*/

.proyeccion{

    background:var(--white);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow);

    margin-bottom:30px;

}


/*==================================================
BANNER SUPERIOR
==================================================*/

.info-banner{

    display:flex;

    align-items:flex-start;

    gap:18px;

    background:#eef7ff;

    border-left:5px solid var(--info);

    border-radius:12px;

    padding:18px;

    margin-bottom:25px;

}

.info-icon{

    font-size:2rem;

    flex-shrink:0;

}

.info-banner strong{

    display:block;

    margin-bottom:5px;

    color:var(--info);

}

.info-banner p{

    color:var(--text-light);

}


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

.tabla-responsive{

    overflow-x:auto;

    border-radius:12px;

}

.tabla-proyeccion{

    width:100%;

    min-width:850px;

    border-collapse:collapse;

    background:white;

}

.tabla-proyeccion thead{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

}

.tabla-proyeccion th{

    padding:15px;

    color:white;

    font-size:.9rem;

    font-weight:600;

    text-align:center;

}

.tabla-proyeccion td{

    padding:14px;

    text-align:center;

    border-bottom:1px solid #edf2f7;

    transition:.2s;

}

.tabla-proyeccion tbody tr{

    transition:.25s;

}

.tabla-proyeccion tbody tr:nth-child(even){

    background:#fafbfd;

}

.tabla-proyeccion tbody tr:hover{

    background:#eef6ff;

}


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

.badge{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:58px;

    padding:6px 12px;

    border-radius:20px;

    color:white;

    font-size:.82rem;

    font-weight:700;

}

.badge-10{

    background:#dc3545;

}

.badge-20{

    background:#fd7e14;

}

.badge-30{

    background:#ffc107;

    color:#222;

}

.badge-50{

    background:#0dcaf0;

}

.badge-100{

    background:#198754;

}


/*==================================================
LEYENDA
==================================================*/

.leyenda{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:25px;

}

.leyenda span{

    font-size:.85rem;

}


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

.resumen-proyeccion{

    background:white;

    border-radius:var(--radius);

    padding:30px;

    margin-bottom:30px;

    box-shadow:var(--shadow);

}

.resumen-total{

    display:grid;

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

    gap:20px;

}

.resumen-item{

    background:#f8fafc;

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

    border-radius:14px;

    padding:22px;

    text-align:center;

    transition:.25s;

}

.resumen-item:hover{

    transform:translateY(-3px);

}

.resumen-item.destacado{

    background:linear-gradient(
        135deg,
        #198754,
        #157347
    );

    color:white;

}

.resumen-item.destacado span,

.resumen-item.destacado strong{

    color:white;

}

.resumen-icon{

    font-size:2rem;

    margin-bottom:12px;

}

.resumen-item span{

    display:block;

    color:var(--text-light);

    margin-bottom:8px;

}

.resumen-item strong{

    display:block;

    font-size:1.8rem;

    color:var(--primary);

}


/*==================================================
OBSERVACIONES
==================================================*/

.observaciones{

    background:white;

    border-radius:var(--radius);

    padding:22px;

    box-shadow:var(--shadow);

    margin-bottom:30px;

}

.observaciones-grid{

    display:grid;

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

    gap:14px;

    margin-top:18px;

}

.observacion{

    background:#f8fafc;

    border:1px solid #edf2f7;

    border-radius:12px;

    padding:16px;

    min-height:155px;

    width:100%;

    overflow:hidden;

}

.observacion:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 24px rgba(0,0,0,.10);

}

.observacion > div:first-child{

    font-size:1.2rem;

    margin-bottom:10px;

}

.observacion strong{

    display:block;

    font-size:0.88rem;

    line-height:1.25;

    color:var(--primary);

    margin-bottom:8px;

    min-height:42px;

}

.observacion p{

    font-size:.78rem;

    line-height:1.45;

    color:var(--text-light);

}

.observaciones h2{

    font-size:1.45rem;

}

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

.footer{

    background:#20242c;

    color:white;

    border-radius:18px;

    padding:35px;

    display:flex;

    align-items:center;

    gap:25px;

}

.footer-logo{

    width:80px;

    height:80px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.5rem;

}

.footer h3{

    margin-bottom:10px;

}

.footer p{

    color:#d6d6d6;

    margin-bottom:6px;

}

.footer small{

    display:block;

    margin-top:10px;

    color:#9ca3af;

}

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

@media (max-width:1024px){

    .container{

        padding:25px 18px 50px;

    }

    .header{

        padding:28px;

    }

    .header h1{

        font-size:1.7rem;

    }

    .resultado-grid{

        grid-template-columns:1fr;

    }

    .resumen-total{

        grid-template-columns:1fr;

    }

}


/*==================================================
RESPONSIVE - TABLETS PEQUEÑAS
==================================================*/

@media (max-width:768px){

    .header{

        flex-direction:column;

        text-align:center;

    }

    .header-icon{

        width:70px;

        height:70px;

        font-size:2.2rem;

    }

    .card{

        padding:22px;

    }

    .card-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .formulario{

        grid-template-columns:1fr;

    }

    .resumen-rapido{

        grid-template-columns:1fr;

    }

    .info-grid{

        grid-template-columns:1fr;

    }

    .observaciones-grid{

        grid-template-columns:1fr;

    }

    .acciones{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .footer{

        flex-direction:column;

        text-align:center;

    }

}


/*==================================================
RESPONSIVE - MÓVILES
==================================================*/

@media (max-width:480px){

    body{

        font-size:15px;

    }

    .container{

        padding:15px;

    }

    .header{

        padding:20px;

        border-radius:16px;

    }

    .header h1{

        font-size:1.45rem;

    }

    .header p{

        font-size:.92rem;

    }

    .card{

        padding:18px;

    }

    .campo input,

    .campo select{

        height:46px;

        font-size:14px;

    }

    .resultado-card{

        flex-direction:column;

        text-align:center;

        padding:20px;

    }

    .resultado-icon{

        width:56px;

        height:56px;

        font-size:1.5rem;

    }

    .resultado-card h3{

        font-size:1.6rem;

    }

    .principal h3{

        font-size:1.9rem;

    }

    .tabla-proyeccion{

        min-width:650px;

    }

    .badge{

        min-width:48px;

        font-size:.72rem;

        padding:5px 10px;

    }

    .footer{

        padding:25px 18px;

    }

    .footer-logo{

        width:60px;

        height:60px;

        font-size:2rem;

    }

}


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

@media print{

    body{

        background:white;

    }

    .header{

        background:#8B0000 !important;

        color:white;

        box-shadow:none;

    }

    .acciones{

        display:none;

    }

    .tooltip{

        display:none;

    }

    .info-banner{

        page-break-inside:avoid;

    }

    .resultado,

    .proyeccion,

    .resumen-proyeccion{

        box-shadow:none;

        border:1px solid #ccc;

    }

    .footer{

        margin-top:40px;

        background:white;

        color:black;

        border-top:2px solid #999;

    }

}


/*==================================================
SCROLLBAR (Chrome / Edge)
==================================================*/

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#eceff3;

}

::-webkit-scrollbar-thumb{

    background:#b5bcc7;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8f98a5;

}


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

::selection{

    background:var(--primary);

    color:white;

}


/*==================================================
FOCUS ACCESIBLE
==================================================*/

button:focus,

input:focus,

select:focus{

    outline:none;

}


/*==================================================
TRANSICIONES
==================================================*/

button,

input,

select,

.card,

.resultado-card,

.resumen-item,

.observacion{

    transition:all .25s ease;

}

@media (max-width:1200px){

    .observaciones-grid{

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

    }

}

@media (max-width:768px){

    .observaciones-grid{

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

    }

}

@media (max-width:480px){

    .observaciones-grid{

        grid-template-columns:1fr;

    }

}