/* ==========================================================
   KRONOS.CSS
   Estilos comunes para todos los módulos Kronos
   ========================================================== */
/* ==========================================================
   ANIMACIONES
   ========================================================== */
.kronos-fade{
    animation:kronosFade .25s ease-in-out;
}
@keyframes kronosFade{
    from{
        opacity:0;
        transform:translateY(6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ==========================================================
   TARJETAS (Cards)
   ========================================================== */
.card-kronos{
    border:0;
    border-radius:15px;
    box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
}
.card-kronos .card-body{
    padding:22px;
}
/* ==========================================================
   CABECERA DEL MÓDULO
   ========================================================== */
.kronos-cabecera{
    border-radius:15px;
    background:#ffffff;
}
.kronos-cabecera .card-body{
    padding:22px 26px;
}
.kronos-titulo{
    color:#A12A2A;
    font-size:2rem;
    font-weight:700;
    line-height:1;
}
.kronos-modulo{
    color:#023568;
    font-size:1.20rem;
    font-weight:600;
    margin-top:6px;
}
.kronos-empleado{
    color:#6c757d;
    font-size:.95rem;
    margin-top:5px;
}
/* ==========================================================
   LOGO
   ========================================================== */

.kronos-logo{
    line-height:1;
}

.kronos-logo-link{
    color:#A12A2A;
    font-size:2rem;
    font-weight:700;
    text-decoration:none;
    transition:opacity .2s ease;
}

.kronos-logo-link:hover{
    color:#A12A2A;
    text-decoration:none;
    opacity:.82;
}


/* ==========================================================
   NAVEGACIÓN PRINCIPAL
   ========================================================== */

.kronos-navegacion{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:38px;

    margin-top:22px;
    padding-top:16px;

    border-top:1px solid #eeeeee;
}


/* ==========================================================
   OPCIONES DE NAVEGACIÓN
   ========================================================== */

.kronos-nav-item{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 6px 11px;

    color:#A12A2A;

    font-size:1.10rem;
    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    transition:
        color .2s ease,
        transform .2s ease;
}


/* ==========================================================
   LÍNEA INFERIOR
   ========================================================== */

.kronos-nav-item::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:3px;

    border-radius:3px;

    background:#8F2323;

    transform:scaleX(0);

    transition:transform .2s ease;
}


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

a.kronos-nav-item:hover{
    color:#8F2323;
    text-decoration:none;
}

a.kronos-nav-item:hover::after{
    transform:scaleX(1);
}


/* ==========================================================
   OPCIÓN ACTIVA
   ========================================================== */

.kronos-nav-item.kronos-nav-activo{
    color:#8F2323;
    font-weight:700;
}

.kronos-nav-item.kronos-nav-activo::after{
    transform:scaleX(1);
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width:768px){

    .kronos-logo-link{
        font-size:1.8rem;
    }

    .kronos-navegacion{
        gap:22px;

        margin-top:18px;
        padding-top:14px;

        overflow-x:auto;
        justify-content:center;

        /*
         * Evitamos que las opciones se peguen
         * a los extremos de la pantalla.
         */
        padding-left:10px;
        padding-right:10px;
    }

    .kronos-nav-item{
        font-size:1rem;
        padding:7px 4px 9px;
    }

}
/* ==========================================================
   RELOJ
   ========================================================== */
.kronos-reloj{
    display:block;
    font-size:2.2rem;
    font-weight:bold;
    color:#A12A2A;
    letter-spacing:2px;
}
@media (max-width:768px){
    .kronos-reloj{
        font-size:1.8rem;
    }
}
/* ==========================================================
   TÍTULOS DE LAS CARDS
   ========================================================== */
.kronos-card-title{
    color:#A12A2A;
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:18px;
}
/* ==========================================================
   BOTÓN PRINCIPAL
   ========================================================== */
.kronos-primary{
    transform:scale(1.02);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}
/* ==========================================================
   UTILIDADES
   ========================================================== */
.kronos-hidden{
    display:none !important;
}
.kronos-text-right{
    text-align:right;
}
.kronos-text-center{
    text-align:center;
}
.kronos-pointer{
    cursor:pointer;
}
.kronos-btn{
    min-width:170px;
}