/* ==========================================================================
   modules/novedades.css - Modulo Novedades v1.
   Fase 1: movido TAL CUAL desde tqc.css (orden preservado => cascada identica).
   ========================================================================== */
/* Colores propios de Novedades sin token oficial: valor claro (el de siempre) y su par para
   el modo oscuro, sacado de los tokens del tema. Van también en body porque los temas de
   usuario redefinen colores ahí. Los colores de los ESTADOS del día (LB, DE, IN...) son
   datos y no cambian con el modo. */
:root, body {
  --nov-cabecera: var(--navy);      /* encabezado azul marino de calendarios y tablas (texto blanco) */
  --nov-domingo: #fde7ef;           /* fondo de domingo */
  --nov-domingo-texto: #9f1239;     /* número del domingo en el encabezado */
  --nov-domingo-linea: color-mix(in srgb, var(--nov-domingo-texto) 25%, var(--nov-domingo));
  --nov-festivo: #fdf6cf;           /* fondo de festivo */
  --nov-festivo-linea: color-mix(in srgb, var(--warning) 30%, var(--nov-festivo));
  --nov-tinta: #1f2937;             /* texto sobre colores claros de estado (igual en ambos modos) */
  --nov-tenue: #94a3b8;             /* texto muy apagado (días sin estado) */
  --nov-aviso-linea: #f0c36d;       /* borde del aviso "sin datos" */
  --nov-calor-min: #fde8e8;         /* mapa de calor de horas: pocas horas ... */
  --nov-calor-max: #8f1d1d;         /* ... muchas horas */
  --nov-lb: #2f8f4e;                /* vista previa del mes y puntos: laborado / vacaciones */
  --nov-aus: #6d4bd0;               /* vista previa del mes y puntos: ausentismos / licencias */
  --nov-aus-bg: color-mix(in srgb, var(--nov-aus) 11%, var(--card));
}
:root[data-scheme="oscuro"],
:root[data-scheme="oscuro"] body {
  --nov-cabecera: color-mix(in srgb, var(--primary) 35%, var(--card));
  --nov-domingo: color-mix(in srgb, var(--danger) 22%, var(--card));
  --nov-domingo-texto: color-mix(in srgb, var(--danger) 55%, var(--text));
  --nov-festivo: color-mix(in srgb, var(--warning) 22%, var(--card));
  --nov-tenue: var(--muted);
  --nov-aviso-linea: color-mix(in srgb, var(--warning) 35%, var(--card));
  --nov-calor-min: color-mix(in srgb, var(--danger) 14%, var(--card));
  --nov-calor-max: color-mix(in srgb, var(--danger) 80%, black);
  --nov-lb: var(--success);
  --nov-aus: #a98ff0;
}

.mb-3 { margin-bottom: 1rem; }

/* Tabla del reporte de novedades (FT-HUM-010) en pantalla: _informe_dias.html dentro de .nd-inf
   (vista Personal del dashboard y aprobación del jefe en Mi equipo). */
.nd-inf-head{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;margin:.2rem 0 .5rem;font-size:var(--text-sm);color:var(--text-2)}
.nd-inf-head strong{font-size:var(--text-lg);color:var(--text)}
.nd-inf-head .btn{margin-left:auto}
.nd-inf table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.nd-inf th{position:sticky;top:0;background:var(--nov-cabecera);color:#fff;font-weight:700;padding:.35rem .3rem;white-space:nowrap;z-index:2}
.nd-inf td{border-bottom:1px solid var(--row-line);padding:.25rem .3rem;text-align:center;white-space:nowrap}
.nd-inf td.text{white-space:normal;text-align:left}
.nd-inf td.hora{text-align:center;white-space:nowrap}
.nd-inf tr.domingo td{background:var(--nov-domingo)}
.nd-inf tr.festivo td{background:var(--nov-festivo)}
.nd-inf td.estado-lb{background:var(--sem-verde-bg);color:var(--success);font-weight:600}
.nd-inf td.estado-no-lb{font-weight:600}
.nd-inf tr.totales td{background:var(--surface-3);font-weight:600;border-top:2px solid var(--line-2)}

/* Llenar varios días a la vez en las tablas de semana (templates/novedades/_horario_rapido.html). */
.hr-rapido{display:flex;flex-direction:column;width:fit-content;max-width:100%;box-sizing:border-box;gap:.45rem;margin:0 0 .7rem;padding:.6rem .75rem;border:1px dashed var(--line-2);border-radius:var(--radius-md);background:var(--surface-2)}
.hr-rapido .hr-fila{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem}
.hr-rapido .hr-tit{font-size:var(--text-sm);color:var(--text)}
.hr-rapido .hr-dias{display:inline-flex;gap:.25rem}
.hr-rapido .hr-dia{position:relative;display:inline-flex}
.hr-rapido .hr-dia input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.hr-rapido .hr-dia span{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--line-2);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:700;color:var(--text-2);background:var(--card)}
.hr-rapido .hr-dia input:checked + span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.hr-rapido .hr-dia input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.hr-rapido .hr-campo{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--text-xs);font-weight:700;color:var(--text-2)}
.hr-rapido .hr-aplicar{margin-left:auto}

/* Tabla de días de un horario (plantilla, horario variable, Editar horas) y "Llenar varios días": el día
   en una línea y las horas compactas, para que la semana y Mañana/Tarde/Noche quepan en una fila. */
.hvf-dias th, .hvf-dias td:first-child { white-space:nowrap; }
/* La tabla y su marco toman el ancho de su contenido, no el de la pantalla. */
table.hvf-dias { width:auto; }
.panel-table-wrap:has(> table.hvf-dias) { width:fit-content; max-width:100%; }
/* Ventana de la plantilla de horario: toma el ancho de su contenido (la tabla de días), no el de las
   ventanas grandes; los campos de arriba se acomodan a ese ancho. */
.tqc-modal:has(form[data-horario-plantilla]) { width:fit-content; max-width:96vw; }
.hvf-dias td { vertical-align:middle; }
.hvf-dias input[name$=_ho] { width:3.6rem!important; }
.hvf-dias .hrango, .hr-rapido .hrango { display:flex; align-items:center; gap:2px; }
/* Con .hrango delante: el selector (tqc-hora-roll.js) mete su ".hrango .hroll{flex:1 1 0}" después de esta
   hoja y, a igual precisión, estiraría las horas hasta llenar la celda. */
.hvf-dias .hrango .hroll, .hr-rapido .hrango .hroll { width:5.2rem; flex:none; }
.hvf-dias .hroll input.hroll-btn, .hr-rapido .hroll input.hroll-btn { padding:.3rem .3rem!important; font-size:var(--text-sm)!important; text-align:center; }

/* Calendario de la rotación en Horarios (horario variable, asignar por persona y plantilla): qué días
   trabaja y cuáles descansa según el inicio del ciclo; clic en un día = empieza a trabajar ahí. Compacto:
   casillas de tamaño fijo y el texto ajustado al ancho del calendario. */
.rot-cal{width:fit-content;max-width:100%;margin:.4rem 0 .8rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2)}
.rot-cal-tit{max-width:16.2rem;font-size:var(--text-2xs);line-height:1.35;color:var(--text-2);margin-bottom:.35rem}
.rot-cal-dias{display:grid;grid-template-columns:repeat(7,2.1rem);gap:2px}
.rot-cal-dias b{font-size:var(--text-2xs);color:var(--muted);text-align:center}
.rot-cal-dias button{height:1.7rem;border:1px solid var(--line-2);border-radius:5px;background:var(--card);font-size:var(--text-2xs);font-weight:700;cursor:pointer;color:var(--text-2);padding:0}
.rot-cal-dias button.trabaja{background:var(--sem-verde-bg);border-color:var(--success);color:var(--success)}
.rot-cal-dias button.descansa{background:var(--surface-3);color:var(--muted)}
.rot-cal-dias button.antes{opacity:.45;border-style:dashed}
.rot-cal-dias button.inicio{outline:2px solid var(--primary);outline-offset:1px}
.rot-cal-dias button.normal{background:var(--soft-blue);border-color:transparent;color:var(--primary);font-weight:600}
/* Rotación: inicio y turnos (angostos) y al lado el calendario; todo del ancho que necesita. */
.rot-layout{display:grid;grid-template-columns:13.5rem auto;gap:.8rem 1.2rem;align-items:start;justify-content:start;margin:.3rem 0 .6rem}
.rot-layout .rot-cal{margin:0}
.rot-campos{display:flex;flex-direction:column;gap:.5rem}
.rot-campos small{font-size:var(--text-2xs);line-height:1.35}
.rot-sino{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:.1rem 0 .3rem;font-size:var(--text-sm)}
.rot-sino label{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;margin:0}
.rot-sino input{width:auto;margin:0}
#hv-cuantos label,#pl-cuantos label{display:block;font-size:var(--text-sm);font-weight:700;color:var(--text-2);margin:.2rem 0 .25rem}
@media (max-width:640px){.rot-layout{grid-template-columns:1fr}}