/* Rejilla de captura de horas por día.
   Solo lo propio de esta pantalla: los anchos de celda y los tres estados que hay que poder
   distinguir de un vistazo. Todo el color sale de tokens del tema (--ins-*), no de
   hexadecimales escritos a mano, para que siga el modo oscuro sin tocar nada. */

.tabla-horas {
    /* Con muchos días la tabla se pasa del ancho y la resuelve `table-responsive`.
       Sin esto, el navegador aprieta las columnas hasta volver ilegibles los inputs. */
    width: auto;
    min-width: 100%;
}

.tabla-horas th,
.tabla-horas td {
    white-space: nowrap;
    vertical-align: middle;
}

.tabla-horas th.col-empleado,
.tabla-horas td.col-empleado {
    /* El nombre es lo único que puede crecer; se queda pegado al borde al desplazar
       horizontalmente, que es lo que permite saber de quién es la fila que se está llenando. */
    position: sticky;
    left: 0;
    z-index: 2;
    white-space: normal;
    min-width: 190px;
    max-width: 260px;

    /* ⚠ El fondo va por `box-shadow` inset, NO por `background-color`: `personalizados.css`
       fuerza `.table td, .table th { background-color: transparent !important }` (ver la nota
       del semáforo más abajo). Una columna fija transparente deja ver las celdas que pasan por
       debajo al desplazar, y el nombre se lee encima de los números — que es exactamente cómo
       se reportó: «se ve enredado». El box-shadow no lo toca ese !important. */
    box-shadow: inset 0 0 0 9999px var(--ins-secondary-bg);
}

/* La esquina de la cabecera tapa a la vez la columna fija y la fila fija: necesita ir encima
   de las dos y con su propio fondo opaco. */
.tabla-horas thead th.col-empleado {
    box-shadow: inset 0 0 0 9999px var(--ins-tertiary-bg);
}

.tabla-horas thead th.col-empleado {
    z-index: 3;
}

/* El borde derecho marca dónde termina la columna fija; sin él, al desplazar, el nombre parece
   parte de la primera columna de días. */
.tabla-horas th.col-empleado,
.tabla-horas td.col-empleado {
    border-right: 2px solid var(--ins-border-color);
}

/* Las celdas de horas NO usan `form-control-sm`: la convención del proyecto es tamaño
   estándar. Lo que se acota es el ANCHO, que es lo que hace falta con 7+ columnas. */
.celda-horas {
    width: 74px;
    text-align: center;
    padding-left: .35rem;
    padding-right: .35rem;
}

.celda-jornada {
    width: 116px;
}

/* ⚠ ESPECIFICIDAD: `modo-oscuro.css` trae
   `html[data-bs-theme="dark"] .form-control { border-color: … }` — especificidad (0,2,1)—, que le
   gana a un `.estado .celda-horas` (0,2,0) SIN IMPORTAR el orden de las hojas. Medido el
   2026-09-29: los tres estados salían del mismo gris en modo oscuro y la pantalla parecía no
   tener estilos. Por eso los selectores de estado se escriben `td.<estado> input.celda-horas`
   (0,2,2): gana por especificidad, sin `!important` y sin duplicar la regla por tema. */

/* Un día que vino del reloj: no se digita, se muestra. */
td input.celda-horas[readonly] {
    background-color: var(--ins-tertiary-bg);
    cursor: not-allowed;
}

td.dia-reloj input.celda-horas {
    border-color: var(--ins-primary);
}

/* Se digitó algo que NO se aplicó porque el reloj ya cubría ese día. Tiene que verse:
   si pasa por una celda normal, parece guardado y no lo está. */
td.dia-ignorada input.celda-horas {
    border-color: var(--ins-warning);
    background-color: var(--ins-warning-bg-subtle);
}

/* Día dentro de una planilla aprobada o pagada: no se toca. */
td.dia-bloqueada input.celda-horas {
    border-color: var(--ins-border-color);
    background-color: var(--ins-secondary-bg);
    color: var(--ins-secondary-color);
}

.nota-celda {
    display: block;
    font-size: .68rem;
    line-height: 1.1;
    margin-top: 2px;
    color: var(--ins-secondary-color);
}

.leyenda-muestra {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 2px solid var(--ins-border-color);
    vertical-align: -2px;
}

.leyenda-reloj     { border-color: var(--ins-primary); }
.leyenda-ignorada  { border-color: var(--ins-warning); background-color: var(--ins-warning-bg-subtle); }
.leyenda-bloqueada { background-color: var(--ins-secondary-bg); }

.fila-total {
    font-weight: 600;
}

/* En el teléfono la columna fija se come la pantalla: ahí se suelta y se desplaza entera. */
@media (max-width: 767.98px) {
    .tabla-horas th.col-empleado,
    .tabla-horas td.col-empleado {
        position: static;
        min-width: 150px;
    }
}

/* ---- Columnas del desglose de planilla ---- */

.tabla-horas th.col-calc,
.tabla-horas td.col-calc {
    min-width: 104px;
}

/* Bruto y neto: son los dos números que se miran de verdad en una planilla. */
/* Bruto y neto: son los dos números que se miran de verdad. El fondo no es opción (ver la nota
   del semáforo), así que se destacan con peso y un borde lateral. */
.tabla-horas th.col-fuerte,
.tabla-horas td.col-fuerte {
    font-weight: 600;
    border-left: 2px solid var(--ins-border-color);
}

.tabla-horas th.col-obs,
.tabla-horas td.col-obs {
    min-width: 220px;
}

.celda-monto {
    width: 96px;
    text-align: right;
}

.celda-obs {
    min-width: 200px;
}

/* Mientras el servidor recalcula, los montos se atenúan: así no se lee como definitivo un
   número que todavía corresponde a lo que había antes de la última tecla. */
.tabla-horas td[data-calc].calculando {
    opacity: .45;
    transition: opacity .12s ease-out;
}

/* Los días son el foco de la digitación; el desglose se lee, no se llena. Un separador basta
   para que la vista no confunda las dos mitades de la tabla. */
.tabla-horas th.col-calc:first-of-type,
.tabla-horas td.col-calc:first-of-type {
    border-left: 2px solid var(--ins-border-color);
}

/* ⚠ EL FONDO DE UN `td` NO SE PUEDE PINTAR EN ESTE PROYECTO.
   `personalizados.css` trae `.table td, .table th { background-color: transparent !important }`,
   una regla global que gana siempre, sin importar la especificidad. Si hace falta pintar el
   estado de una celda, va en un elemento DENTRO de ella. Medido el 2026-09-29; por eso la
   columna fija del nombre usa `box-shadow` inset más arriba. */