/* Contenedor principal del Grid - 10 Columnas */
.calendar-grid {
    display: grid;
    /* 7 días (fr) + 3 columnas de control fijas para que no bailen */
    grid-template-columns: repeat(7, 1fr) 55px 55px 65px; 
    gap: 6px;
    background: #fff;
    padding: 5px;
}

/* Estilo base de cada celda */
.cal-day {
    aspect-ratio: 1 / 1;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.85rem;
    position: relative;
    transition: all 0.2s;
    background: white;
}

/* Headers (L, M, X, J, V, S, D, TEO, REAL, BAL) */
.cal-day.header {
    aspect-ratio: auto;
    height: 35px;
    background: #f1f5f9;
    font-weight: 800;
    color: #475569;
    justify-content: center;
    align-items: center;
    border: none;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* Columnas de Totales Semanales (Derecha) */
.cal-total-col {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #1e40af;
    font-weight: bold;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 4px;
}

/* Estilos específicos para las columnas de totales */
.cal-total-col.teo { color: #64748b; background: #f1f5f9; } /* Gris */
.cal-total-col.real { color: #1e293b; background: #fff; font-weight: 800; } /* Oscuro */
.cal-total-col.bal { border-left: 3px solid currentColor; } /* Color dinámico */

/* Colores de Balance */
.text-success { color: #10b981 !important; } /* Verde (0) */
.text-danger { color: #ef4444 !important; }  /* Rojo (>0) */
.text-warning { color: #f59e0b !important; } /* Naranja/Ámbar (<0) */

/* Horas dentro del día */
.cal-hours {
    font-weight: 700;
    color: #2563eb;
    font-size: 0.8rem;
    text-align: right;
}

/* Estados Especiales */
.cal-day.has-extras::after {
    content: "●";
    color: #f59e0b;
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.65rem;
}

.cal-day.dia-fuera-rango {
    background-color: #fafafa;
    color: #cbd5e1;
    border-style: dashed;
}

.cal-day.dia-futuro {
    background-color: #f1f5f9;
    opacity: 0.4;
}

/* Hover interactivo */
.cal-day:not(.empty):not(.header):not(.dia-futuro):hover {
    border-color: #2563eb;
    background-color: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
    cursor: pointer;
    z-index: 10;
}

/* Celdas vacías */
.cal-day.empty {
    border: none;
    background: transparent;
}

/* Contenedor de Resumen Inferior (Anual/Periodo) */
.resumen-container-v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
}

.resumen-card {
    padding: 15px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.resumen-card.annual { border-top: 4px solid #2563eb; }
.resumen-card.period { border-top: 4px solid #64748b; }

.resumen-card .label {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.resumen-card .vals {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Estilos específicos para el calendario del trabajador */
.calendar-day-cell.worker-vacaciones { background-color: #0ea5e9 !important; color: white; border-radius: 50%; }
.calendar-day-cell.worker-baja { background-color: #ef4444 !important; color: white; border-radius: 50%; }
.calendar-day-cell.worker-asuntos_prop { background-color: #8b5cf6 !important; color: white; border-radius: 50%; }
.calendar-day-cell.worker-intensiva { background-color: #f59e0b !important; color: white; }
.calendar-day-cell.worker-recuperable { border: 2px dashed #64748b; }

/* Mantener los de empresa de fondo más claritos */
.calendar-day-cell.nacional { opacity: 0.8; }


/* Ajuste para 11 columnas en el Monitor de Jornada */
#calendar-grid-monitor {
    display: grid;
    /* 7 días + TEO, REAL, BAL, ACUM = 11 columnas */
    grid-template-columns: repeat(7, 1fr) repeat(4, 1.1fr); 
    gap: 1px;
    background-color: #e2e8f0; /* Color de las líneas divisorias */
    border: 1px solid #e2e8f0;
    width: 100%;
}

/* Ajuste de las celdas para que quepa el contenido */
#calendar-grid-monitor .cal-day, 
#calendar-grid-monitor .cal-total-col {
    padding: 8px 4px;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    font-size: 0.75rem; /* Fuente un poco más pequeña */
}

/* Cabeceras más compactas */
#calendar-grid-monitor .cal-day.header {
    background-color: #f8fafc;
    height: 35px;
    min-height: 35px;
    font-weight: 800;
    color: #64748b;
}

/* Estilo específico para las columnas de totales para diferenciarlas */
#calendar-grid-monitor .cal-total-col {
    background-color: #f1f5f9; /* Fondo sutilmente gris */
    font-weight: 700;
}

/* Colores de balance (asegurando el naranja de ACUM) */
.text-success { color: #10b981 !important; } 
.text-danger  { color: #ef4444 !important; }  
.text-warning { color: #f59e0b !important; } 

/* Ajuste para móviles: Si la pantalla es muy pequeña, bajamos más la fuente */
@media (max-width: 768px) {
    #calendar-grid-monitor .cal-day, 
    #calendar-grid-monitor .cal-total-col {
        font-size: 0.65rem;
        padding: 4px 2px;
    }
    
    .cal-hours {
        font-size: 0.6rem;
    }
}