@charset "UTF-8";

/* ==========================================
 ESTILOS BASE Y CONTENEDORES DE LA APP
 ========================================== */
html, body { 
background-color: #FFFFFF !important;
 padding: 15px 0px; 
margin: 0;
 min-height: 100vh;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.container-fluid { 
background-color: #FFFFFF !important; 
padding: 0 15px; 
}

.card-usuario { 
background-color: #FFFFFF !important;
 border-radius: 8px; 
border: 1px solid #E9F0FE;
 box-shadow: 0 4px 12px rgba(76, 140, 246, 0.08) !important; 
max-width: 95%; 
margin: 0 auto 12px auto;
}

/* Animación de alerta de error */
@keyframes shake {
 0%, 100% { transform: translateX(0); }
 20%, 60% { transform: translateX(-5px); }
 40%, 80% { transform: translateX(5px); }
}
.shake-anim {
 animation: shake 0.4s ease-in-out;
}

/* Botón flotante de colapsar para la tarjeta superior */
.btn-colapsar-bloque {
 position: absolute;
 top: 8px;
 right: 10px;
 z-index: 10;
 padding: 1px 6px !important;
 font-size: 12px !important;
 line-height: 1.2;
 border-color: #CBD5E1 !important;
 color: #64748B !important;
 background-color: #F8FAFC !important;
}

.btn-colapsar-bloque:hover {
 background-color: #E2E8F0 !important;
 color: #1E293B !important;
}

/* Distribución del encabezado en tres columnas proporcionales */
.header-tres-bloques-layout {
 display: grid;
 grid-template-columns: 1fr 1.2fr 1.2fr;
 align-items: center;
 width: 100%;
 gap: 20px;
}

.bloque-usuario-izq { 
display: flex; 
justify-content: flex-start; 
padding-left: 10px; 
}

.bloque-celdas-medio, .bloque-celdas-der { 
display: flex; 
flex-direction: column; 
justify-content: center;
 gap: 6px; 
width: 100%; 
}

.fila-celdas { 
display: flex; 
align-items: center; 
width: 100%; 
gap: 12px; 
}

.celda-corta { 
flex: 1; 
font-weight: 500; 
color: #6c757d; 
font-size: 14px; 
text-align: left; 
white-space: nowrap; 
}

.celda-extensa { 
flex: 2; 
font-weight: 700; 
color: #212529; 
font-size: 15px; 
text-align: left; 
word-break: break-word; 
}

@media (max-width: 992px) {
 .header-tres-bloques-layout { 
display: flex; 
flex-direction: column; 
text-align: center; 
gap: 15px; 
}
 .bloque-usuario-izq { justify-content: center; padding-left: 0; width: 100%; }
 .celda-corta, .celda-extensa { text-align: center; }
}

/* ==========================================
 ESTILOS DE LA TABLA DE JORNADAS (SAAS LOOK)
 ========================================== */
.tabla-contenedor { 
background-color: #FFFFFF !important; 
padding: 15px; 
border-radius: 8px; 
border: 1px solid #E9F0FE; 
box-shadow: 0 4px 16px rgba(76, 140, 246, 0.08) !important; 
margin: 15px auto; 
max-width: 95%; 
display: flex; 
flex-direction: column; 
align-items: center; 
}

.table-responsive { 
width: 100%; 
max-height: 57vh; 
overflow-x: auto; 
overflow-y: auto; 
margin-bottom: 1rem; 
-webkit-overflow-scrolling: touch;
}

#tablaDatos { 
background-color: #FFFFFF !important; 
border-collapse: separate; 
border-spacing: 0; 
width: 100%; 
min-width: 650px; 
}

#tablaDatos th, #tablaDatos td { 
border-top: none !important;
 border-bottom: 1px solid #F1F5F9 !important; 
border-left: none !important;
 border-right: none !important;
}

#tablaCabecera th { 
position: sticky; 
top: 0; 
z-index: 20; 
text-align: center; 
background-color: #4C8CF6 !important; 
color: #FFFFFF !important; 
padding: 14px 8px; 
font-weight: 600;
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

#tablaCuerpo td { 
text-align: center; 
color: #334155; 
padding: 14px 8px; 
vertical-align: middle; 
font-size: 14px;
}

#tablaCuerpo tr:nth-child(odd) td { background-color: #FFFFFF !important; }
#tablaCuerpo tr:nth-child(even) td { background-color: #E9F0FE !important; }

.chk-celda { 
text-align: center; 
display: table-cell; 
vertical-align: middle; 
}

.chk-celda input { 
width: 22px; 
height: 22px; 
cursor: pointer; 
margin: 0 auto; 
display: block; 
}

.chk-celda input:checked {
 background-color: #4C8CF6 !important;
 border-color: #4C8CF6 !important;
}

.btn-link-foto { 
font-size: 13px; 
padding: 6px 12px; 
border-radius: 4px; 
background-color: #4C8CF6; 
color: #FFFFFF !important; 
text-decoration: none; 
font-weight: 500; 
display: inline-block;
}

.btn-link-foto:hover {
 background-color: #3b7be3;
}

.hora-input { 
max-width: 110px; 
margin: 0 auto; 
text-align: center; 
padding: 5px 6px; 
border: 1px solid #CBD5E1; 
border-radius: 4px; 
font-size: 14px;
}

.hora-input:focus {
 border-color: #4C8CF6 !important;
 box-shadow: 0 0 0 3px rgba(76, 140, 246, 0.15) !important;
}

.link-mapa-dinamico {
 color: #4C8CF6 !important;
 text-decoration: underline !important;
 font-weight: 500;
}

/* ==========================================
 ESTILOS DE SKELETON LOADER
 ========================================== */
.skeleton-container {
 width: 95%;
 margin: 15px auto;
 background: #FFFFFF;
 border: 1px solid #E9F0FE;
 border-radius: 8px;
 padding: 15px;
}

.skeleton-row {
 display: flex;
 padding: 12px 0;
 border-bottom: 1px solid #F1F5F9;
 gap: 15px;
}

.skeleton-cell {
 height: 20px;
 background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
 background-size: 200% 100%;
 animation: skeleton-pulse 1.5s infinite;
 border-radius: 4px;
 flex: 1;
}

.skeleton-cell.header-shimmer {
 height: 35px;
 background: linear-gradient(90deg, #4C8CF6 25%, #6fa2f8 50%, #4C8CF6 75%);
 background-size: 200% 100%;
}

@keyframes skeleton-pulse {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}

/* ==========================================
 ESTILOS DE LA PANTALLA DE LOGIN
 ========================================== */
.login-body-layout {
 position: relative;
 overflow: hidden;
 background-color: #E9F0FE !important;
 display: flex;
 align-items: center;
 justify-content: center;
}

.login-background-animado {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 pointer-events: none;
 overflow: hidden;
}

.img-flotante {
 position: absolute;
 width: 140px;
 height: auto;
 opacity: 0.12;
 user-select: none;
}

.img-f1 { top: 10%; left: 15%; animation: flotarMovimientoUno 28s infinite linear; }
.img-f2 { top: 65%; left: 75%; animation: flotarMovimientoDos 35s infinite linear; }
.img-f3 { top: 40%; left: 45%; animation: flotarMovimientoTres 42s infinite linear; }
.img-f4 { top: 80%; left: 10%; animation: flotarMovimientoUno 31s infinite linear reverse; }
.img-f5 { top: 20%; left: 80%; animation: flotarMovimientoDos 26s infinite linear reverse; }

@keyframes flotarMovimientoUno {
 0% { transform: translate(0, 0) rotate(0deg); }
 33% { transform: translate(120px, 80px) rotate(45deg); }
 66% { transform: translate(-60px, 180px) rotate(90deg); }
 100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes flotarMovimientoDos {
 0% { transform: translate(0, 0) rotate(360deg); }
 50% { transform: translate(-150px, -120px) rotate(180deg); }
 100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes flotarMovimientoTres {
 0% { transform: translate(0, 0) rotate(0deg); }
 25% { transform: translate(-80px, 90px) rotate(-30deg); }
 75% { transform: translate(140px, -70px) rotate(60deg); }
 100% { transform: translate(0, 0) rotate(0deg); }
}

.style-login-page {
 z-index: 10;
 background: transparent !important;
 display: flex !important;
 align-items: center;
 justify-content: center;
 width: 100%;
}

.modal-login-backdrop { 
background: transparent; 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: 1050; 
display: flex; 
align-items: center; 
justify-content: center; 
padding: 15px; 
}

.modal-popup-ancho { 
width: 100%; 
max-width: 540px; 
} 

.modal-popup-cuerpo { 
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; 
border-radius: 12px !important; 
padding: 40px 45px 20px 45px !important; 
border: 1px solid #E2E8F0 !important;
}

@media (max-width: 576px) {
 .modal-popup-cuerpo { 
padding: 25px 20px 20px 20px !important; 
 }
}

.login-logos-contenedor {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(3, 1fr); 
align-items: center;
 justify-items: center; 
padding: 6px 0;
}

.login-logo-item {
 height: auto;
 max-height: 50px; 
max-width: 85%; 
object-fit: contain; 
}

.login-linea-separadora {
 color: #CBD5E1 !important;
 border-top: 1px solid #CBD5E1 !important;
 opacity: 1 !important;
 margin: 12px 0 24px 0 !important; 
}

.login-form-centrado { 
width: 100%; 
margin: 0 auto; 
}

.login-fields-container {
 width: 100%;
}

.login-form-row { 
display: flex; 
align-items: center; 
width: 100%; 
margin-bottom: 16px !important; 
}

.login-label-fijo { 
width: 85px; 
font-size: 16px; 
font-weight: 700; 
color: #000000; 
margin-bottom: 0; 
padding-right: 10px; 
text-align: left; 
}

@media (max-width: 440px) {
 .login-form-row {
 flex-direction: column;
 align-items: flex-start;
 gap: 6px;
 }
 .login-label-fijo {
 width: 100%;
 }
}

.login-input-wrapper {
 flex-grow: 1;
 width: 100%;
}

.input-group-text-custom {
 background-color: #F8FAFC !important;
 border: 1px solid #CBD5E1 !important;
 color: #64748B;
}

.login-inputs { 
width: 100%; 
background-color: #FFFFFF !important; 
border: 1px solid #CBD5E1 !important; 
font-size: 16px; 
padding: 10px 14px; 
}

.login-inputs:focus {
 border-color: #4C8CF6 !important;
 box-shadow: 0 0 0 3px rgba(76, 140, 246, 0.15) !important;
 z-index: 5;
}

.btn-toggle-password {
 border: 1px solid #CBD5E1 !important;
 background-color: #FFFFFF !important;
 color: #64748B;
}
.btn-toggle-password:hover {
 color: #4C8CF6;
}

.login-olvido-wrapper {
 width: 100%;
 text-align: right;
 margin-top: 6px; 
margin-bottom: 16px; 
}

@media (max-width: 440px) {
 .login-olvido-wrapper {
 text-align: left; 
 }
}

.login-link-olvido {
 color: #718096;
 font-size: 14px;
 text-decoration: none;
 font-weight: 500;
 transition: color 0.2s ease;
}

.login-link-olvido:hover {
 color: #4C8CF6;
 text-decoration: underline;
}

.login-btn-container { 
display: flex; 
justify-content: flex-end; 
width: 100%; 
margin-bottom: 16px !important; 
}

@media (max-width: 440px) {
 .login-btn-container {
 justify-content: center; 
 }
 .btn-login-ingresar {
 width: 100%; 
 }
}

.btn-login-ingresar { 
background-color: #4C8CF6 !important; 
border-color: #4C8CF6 !important; 
color: #FFFFFF !important; 
padding: 10px 50px; 
font-size: 16px; 
border-radius: 6px; 
transition: all 0.2s ease-in-out;
}

.btn-login-ingresar:hover { 
background-color: #3b7be3 !important; 
border-color: #3b7be3 !important; 
}

.btn-login-ingresar:active { 
transform: scale(0.97); 
}

.animate-fade-in {
 animation: fadeIn 0.25s ease-out forwards;
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

.login-pseudo-footer {
 width: 100%;
 text-align: center;
 font-size: 12px;
 color: #718096;
 border-top: 1px solid #EDF2F7; 
padding-top: 14px;
 margin-top: 0px;
 line-height: 1.8; 
}

.login-footer-support {
 white-space: nowrap;
}

.login-footer-support a {
 color: #4C8CF6; 
 text-decoration: none;
 font-weight: 600;
 transition: color 0.2s ease-in-out;
}

.login-footer-support a:hover {
 color: #3b7be3;
 text-decoration: underline;
}

@media (max-width: 576px) {
 .login-pseudo-footer {
 flex-direction: column;
 gap: 6px;
 }
 .login-footer-divider {
 display: none; 
 }
}

#olvidoModal.modal-login-backdrop {
 background: rgba(0,0,0,0.4) !important;
}

.modal-container-custom {
 padding: 25px;
}
@media (max-width: 576px) {
 .modal-container-custom { padding: 15px 10px; }
}

.modal-emergente-content {
 box-shadow: 0 10px 30px rgba(76, 140, 246, 0.2) !important;
 border-radius: 12px !important;
}
.modal-hr-custom {
 color: #E9F0FE !important;
 opacity: 1;
}
.modal-btn-volver {
 background-color: #fff;
 border: 1px solid #CBD5E1;
 color: #64748B;
 margin-right: 10px;
}
.modal-btn-volver:hover {
 background-color: #F8FAFC;
}
.modal-btn-enviar {
 background-color: #4C8CF6 !important;
 color: #fff !important;
}
.modal-btn-enviar:hover {
 background-color: #3b7be3 !important;
}

.app-real-footer {
 width: 100%;
 max-width: 95%;
 margin: 30px auto 15px auto;
 border-top: 1px solid #E9F0FE;
 padding-top: 15px;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px; 
 font-size: 13px;
 color: #64748B;
}

.footer-divider {
 color: #CBD5E1;
 font-size: 16px;
 user-select: none;
}

.footer-link {
 color: #4C8CF6; 
 text-decoration: none;
 font-weight: bold;
 transition: color 0.2s ease-in-out;
}

.footer-link:hover {
 color: #3b7be3; 
 text-decoration: underline;
}

@media (max-width: 768px) {
 .app-real-footer {
 flex-direction: column;
 gap: 6px;
 text-align: center;
 }
 .footer-divider {
 display: none; 
 }
}

.swal2-toast-custom {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
 border-radius: 6px !important;
 box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.login-field-trap {
 display: none !important;
 visibility: hidden;
}