/* Gestion de Turnos IPS v2.2.0 */
:root {
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --borde: #e5e7eb;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f6f7fb;
}

.navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
}

.navbar .nav-link.active {
    background-color: rgba(255, 255, 255, .18);
    border-radius: .375rem;
}

.card {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    margin-bottom: 1.5rem;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, .4);
}

.table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, .05);
}

.alert {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.stat-card {
    border-radius: .5rem;
    padding: 1.25rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.stat-card h2 { margin: 0; font-weight: 700; }
.stat-card small { opacity: .85; }

footer {
    background-color: #fff;
}

/* ---------------------------------------------------- malla de turnos --- */
/* Celdas compactas a proposito: la malla y la bitacora tienen que caber
   juntas en pantalla, si no toca hacer scroll para cruzar las dos. */
.tabla-malla {
    font-size: .66rem;
    border-collapse: separate;
    border-spacing: 0;
    line-height: 1.15;
}

.tabla-malla th,
.tabla-malla td {
    border: 1px solid var(--borde);
    padding: 0 2px;
    text-align: center;
    white-space: nowrap;
}

.tabla-malla thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #eef1f8;
    font-size: .62rem;
    line-height: 1.05;
}

.tabla-malla .col-fija {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    text-align: left;
    min-width: 168px;
    max-width: 168px;
    white-space: normal;
    font-size: .68rem;
    line-height: 1.15;
}

.tabla-malla thead .col-fija { z-index: 4; background: #eef1f8; }

.tabla-malla .col-total {
    background: #eaf1fb;
    font-weight: 700;
    color: #1f4e79;
}

.tabla-malla .dia-festivo { background: #fff3cd; }
.tabla-malla .dia-finde { background: #f3f4f6; }

/* La celda es un <select>: se le quita la apariencia de control para que la
   malla siga leyendose como una tabla y no como un formulario. */
.tabla-malla select.turno {
    width: 100%;
    /* Cabe el codigo mas largo, "PISO 506 (8:30AM A 6PM)", sin cortarse. */
    min-width: 132px;
    border: 1px solid transparent;
    background: transparent;
    font-size: .62rem;
    text-align: center;
    padding: 1px 0;
    border-radius: .2rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    color: inherit;
}

.tabla-malla select.turno:hover:not([disabled]) {
    border-color: #ced4da;
    background: rgba(255, 255, 255, .55);
}

.tabla-malla select.turno:focus {
    border-color: var(--primary-color);
    background: #fff;
    outline: none;
}

.tabla-malla select.turno[disabled] {
    cursor: default;
    opacity: 1;              /* sin el gris de deshabilitado: solo no se edita */
}

/* El desplegable si necesita ancho legible; la celda no. */
.tabla-malla select.turno option { font-size: .8rem; text-align: left; }

/* ------------- salto del consolidado a la malla (dia + consultorio) ----- */
/* La columna del dia se atenua el resto para que el ojo caiga en ella. */
.tabla-malla .dia-buscado {
    background-color: #fff8e1;
    box-shadow: inset 1px 0 0 #f0ad4e, inset -1px 0 0 #f0ad4e;
}

.tabla-malla thead .dia-buscado {
    background-color: #ffe8a3;
    color: #7a5200;
    font-weight: 700;
}

/* La celda de quien cubre ese consultorio: es la respuesta a la pregunta. */
.tabla-malla .celda-buscada {
    background-color: #ffe08a !important;
    outline: 2px solid #e0a800;
    outline-offset: -2px;
    font-weight: 700;
}

/* La franja horaria del consolidado es un enlace, pero se lee como texto. */
.cons-franja a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.cons-franja:hover {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    cursor: pointer;
}

.cons-franja:hover a { color: var(--primary-color); font-weight: 600; }

/* --------------------------- malla vs reloj en las tablas --------------- */
/* Confundir lo proyectado con lo que marco el reloj es el error mas facil de
   cometer leyendo el dashboard. Cada bloque lleva su color de fondo en todas
   las filas y una linea gruesa donde empieza, para que se lean como dos
   tablas distintas puestas lado a lado. */
.grupo-malla { background-color: #eef3fb; }
.grupo-reloj { background-color: #eef7f0; }

thead .grupo-malla { background-color: #dce6f5; color: #1f4e79; }
thead .grupo-reloj { background-color: #dcefe2; color: #22603a; }

.grupo-inicio { border-left: 3px solid #adb5bd !important; }

/* El hover de Bootstrap tapa el color del grupo; se vuelve a pintar. */
.table-hover tbody tr:hover .grupo-malla { background-color: #e2eaf7; }
.table-hover tbody tr:hover .grupo-reloj { background-color: #e2f0e8; }

tfoot .grupo-malla { background-color: #dce6f5; }
tfoot .grupo-reloj { background-color: #dcefe2; }

/* La bitacora va debajo de la malla, asi que tambien va compacta. */
.tabla-bitacora {
    font-size: .7rem;
}

.tabla-bitacora th,
.tabla-bitacora td {
    padding: .15rem .4rem;
}

.celda-actualizada {
    animation: destello 2.4s ease-out;
}

@keyframes destello {
    0% { background-color: #fff3cd; }
    100% { background-color: transparent; }
}

/* Dos auxiliares en el mismo consultorio a la misma hora. Parpadea porque
   es un error de asignacion que hay que resolver, no un estado normal. */
.turno-solape {
    animation: alerta-solape 1.1s ease-in-out infinite;
    outline: 2px solid #dc3545;
    outline-offset: -2px;
}

.turno-solape select.turno { font-weight: 700; color: #842029; }

@keyframes alerta-solape {
    0%, 100% { background-color: #f8d7da; }
    50%      { background-color: #dc3545; }
}

/* Respeta a quien pidio menos animacion en el sistema: sigue en rojo fijo. */
@media (prefers-reduced-motion: reduce) {
    .turno-solape { animation: none; background-color: #f5c2c7; }
}

.turno-festivo { background: #fff3cd; }
.turno-sin { background: #f1f3f5; color: #868e96; }
.turno-novedad { background: #fce4e4; }
.turno-activo { background: #e2efda; }

/* ------------------------------------------------------------ agendas --- */
.bloque-agenda {
    border-left: 3px solid var(--primary-color);
    padding: .35rem .6rem;
    margin-bottom: .35rem;
    background: #fff;
    border-radius: .25rem;
    font-size: .82rem;
}

.bloque-agenda .profesional { font-weight: 600; }
.bloque-agenda .meta { color: #6c757d; font-size: .75rem; }

.dia-agenda {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    padding: .6rem;
    height: 100%;
}

.dia-agenda h6 {
    border-bottom: 1px solid var(--borde);
    padding-bottom: .3rem;
    margin-bottom: .5rem;
    font-size: .82rem;
}

.tabla-compacta { font-size: .84rem; }

@media (max-width: 768px) {
    .tabla-malla .col-fija { min-width: 130px; max-width: 130px; }
}

/* ------------------------------------------------- consolidado de turnos -- */
/* Mismos colores que el Excel (definidos en CLAUDE.md). */
.tabla-consolidado {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.tabla-consolidado th,
.tabla-consolidado td {
    border: 1px solid #b4c6e7;
    padding: 3px 6px;
    text-align: center;
    white-space: nowrap;
}

.tabla-consolidado thead th {
    background: #1f4e79;
    color: #fff;
    font-weight: 600;
    font-size: .74rem;
    position: sticky;
    top: 0;
    z-index: 2;
}

.tabla-consolidado thead tr:nth-child(2) th { top: 26px; }

.cons-sabado { background: #fce4d6; }
.cons-domingo { background: #bfbfbf; }
.cons-festivo { background: #f8cbcb; color: #c00000; font-weight: 700; }
.cons-sabado-activo { background: #c6e0b4; }
.cons-sin { background: #f2f2f2; color: #808080; }
.cons-manana { background: #fff2cc; font-weight: 600; }
.cons-tarde { background: #e2efda; font-weight: 600; }

/* Celdas del consolidado que cambiaron frente a la version anterior. */
.cons-cambio {
    outline: 2px solid #e8590c;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 99px rgba(255, 140, 0, .22);
    font-weight: 700;
    position: relative;
}

.cons-cambio::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border: 5px solid transparent;
    border-top-color: #e8590c;
    border-right-color: #e8590c;
}

.cons-dia-novedad {
    box-shadow: inset 4px 0 0 #d6336c;
    font-weight: 700;
}

/* Indicadores de cobertura de la pantalla de Agendas. */
.chip-sabado,
.chip-pendiente {
    font-size: .72rem;
    padding: .3rem .45rem;
    transition: transform .1s;
}

.chip-sabado:hover,
.chip-pendiente:hover { transform: translateY(-1px); }

.chip-con { background: #198754; color: #fff; }
.chip-sin { background: #e9ecef; color: #6c757d; }
.chip-pendiente { background: #f8cbcb; color: #a02020; border: 1px solid #e5a0a0; }
.chip-pendiente:hover { background: #f5b5b5; color: #7a1010; }

/* Turno asignado donde el consultorio no tiene agenda ese dia. */
.chip-ocioso { background: #ffe8a3; color: #8a6100; border: 1px solid #e6c766; }
.chip-ocioso:hover { background: #ffdd80; color: #6b4b00; }

.cons-ocioso {
    background: #fff3cd !important;
    color: #8a6100 !important;
    box-shadow: inset 0 0 0 2px #e6c766;
    font-style: italic;
}