/* Distribución de Dotación General y Edición de Matriz (paneles laterales y vistas amplias).
   Se carga al final: ajusta la capa visual sin tocar los colores del catálogo. */

:root {
  --if-fondo: #e8edf3;
  --if-cabecera: #0e1a29;
  --if-cabecera-borde: #22324a;
  --if-tarjeta: #f8fafc;
  --if-tarjeta-2: #ffffff;
  --if-borde: #d3dce7;
  --if-borde-grilla: #dde4ed;
  --if-campo: #ffffff;
  --if-borde-campo: #c3cedb;
  --if-boton: #ffffff;
  --if-hover: #e9eff6;
  --if-texto: #172a42;
  --if-texto-suave: #55667b;
  --if-texto-tenue: #8594a7;
  --if-encabezado: #e3e9f1;
  --if-grupo: #d9e2ec;
  --if-fila: #f8fafc;
  --if-hoy-cabecera: #d6e3ef;
  --if-hoy-columna: #edf3f9;
  --if-vacio: #ffffff;
  --if-acento: #c8233a;
  --if-acento-hover: #ab1c31;
  --if-acento-suave: rgba(200, 35, 58, 0.08);
  --if-rango-fondo: rgba(200, 35, 58, 0.16);
  --if-texto-acento: #ffffff;
  --if-velo: rgba(16, 32, 56, 0.38);
  --if-segmento: #1d3b5e;
  --if-aviso: #9a6b00;
  --if-aviso-borde: #d7a432;
  --if-aviso-fondo: #fff6df;
  --if-grave: #a3182c;
  --if-grave-borde: #d9485c;
  --if-grave-fondo: #fdecee;
  --if-exito: #1f7a4d;
  --if-exito-fondo: #e3f4ea;
  --if-popover: #ffffff;
  --if-sombra: 0 12px 32px rgba(16, 32, 56, 0.16);
  --if-panel-lateral: #f3f6fa;
  --if-pie: #dfe6ee;
}

html[data-tema="oscuro"] {
  --if-fondo: #0b1420;
  --if-cabecera: #0d1826;
  --if-cabecera-borde: #1e2c3e;
  --if-tarjeta: #101b2a;
  --if-tarjeta-2: #0f1a28;
  --if-borde: #1f2e41;
  --if-borde-grilla: #1b2939;
  --if-campo: #0c1622;
  --if-borde-campo: #2a3b50;
  --if-boton: #0f1a28;
  --if-hover: #172538;
  --if-texto: #e6edf5;
  --if-texto-suave: #9aabbf;
  --if-texto-tenue: #6f8196;
  --if-encabezado: #132133;
  --if-grupo: #172739;
  --if-fila: #0f1a28;
  --if-hoy-cabecera: #192a40;
  --if-hoy-columna: #142337;
  --if-vacio: #0c1622;
  --if-acento: #d7263d;
  --if-acento-hover: #b91f34;
  --if-acento-suave: rgba(215, 38, 61, 0.1);
  --if-rango-fondo: var(--if-acento-suave);
  --if-velo: rgba(0, 0, 0, 0.6);
  --if-segmento: #1e3d62;
  --if-aviso: #f2c14e;
  --if-aviso-borde: #c9982b;
  --if-aviso-fondo: rgba(242, 193, 78, 0.08);
  --if-grave: #ff9aa6;
  --if-grave-borde: #d7263d;
  --if-grave-fondo: rgba(215, 38, 61, 0.14);
  --if-exito: #7fdcaa;
  --if-exito-fondo: rgba(46, 204, 113, 0.12);
  --if-popover: #121f30;
  --if-sombra: 0 14px 36px rgba(0, 0, 0, 0.45);
  --if-panel-lateral: #0e1826;
  --if-pie: #0d1826;
  /* Componentes heredados (panel Ajustar turno, tablas, formularios). */
  --color-fondo: #0b1420;
  --color-panel: #101b2a;
  --color-borde: #22324a;
  --superficie: #101b2a;
  --superficie-alta: #172538;
  --superficie-celda: #0f1a28;
  --encabezado-tabla: #132133;
  --grupo-fondo: #172739;
  --hoy-fondo: #142337;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                   */
/* ---------------------------------------------------------------------- */

html, body { background: var(--if-fondo); color: var(--if-texto); }
body { display: flex; flex-direction: column; min-height: 100dvh; font-size: 13px; }
.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="date"], input[type="number"], select, textarea {
  background: var(--if-campo); border: 1px solid var(--if-borde-campo); border-radius: 4px;
  color: var(--if-texto); min-height: 36px; font-size: 13px; padding: 7px 12px;
}
select[multiple] { padding: 4px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--if-acento) 55%, transparent); outline-offset: 0; border-color: var(--if-acento); }
input::placeholder { color: var(--if-texto-tenue); }
label { color: var(--if-texto-suave); }

.btn { border-radius: 4px; min-height: 36px; font-size: 13px; }
.btn-primario { background: var(--if-acento); color: #fff; border-color: var(--if-acento); }
.btn-primario:hover { background: var(--if-acento-hover); }
.btn-secundario { background: var(--if-boton); color: var(--if-texto); border-color: var(--if-borde-campo); }
.btn-secundario:hover { background: var(--if-hover); border-color: var(--if-texto-tenue); }

.btn-herramienta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px;
  background: var(--if-boton); color: var(--if-texto); border: 1px solid var(--if-borde-campo); border-radius: 4px;
  font: 600 13px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-herramienta:hover { background: var(--if-hover); border-color: var(--if-texto-tenue); }
.btn-herramienta.activa, .btn-herramienta[aria-pressed="true"] {
  border-color: var(--if-acento); box-shadow: inset 0 0 0 1px var(--if-acento); background: var(--if-acento-suave);
}
.btn-herramienta:disabled { opacity: .5; cursor: not-allowed; }
.btn-herramienta .ico-chevron { width: 14px; height: 14px; margin-left: 6px; }
.btn-herramienta.ocupado { opacity: .7; cursor: progress; }

.btn-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  background: transparent; color: inherit; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
}
.btn-icono .ico { width: 18px; height: 18px; }
.btn-icono:hover { background: var(--if-hover); }
.btn-borde { background: var(--if-boton); border-color: var(--if-borde-campo); color: var(--if-texto); }
.btn-borde:hover { border-color: var(--if-texto-tenue); }

.texto-ayuda { color: var(--if-texto-suave); font-size: 12px; line-height: 1.6; margin: 6px 0 12px; }
.mensaje-vacio { color: var(--if-texto-suave); }

/* ---------------------------------------------------------------------- */
/* Cabecera global                                                        */
/* ---------------------------------------------------------------------- */

.cabecera {
  flex: none; min-height: 66px; padding: 8px 32px; gap: 20px; border-top: 0;
  background: var(--if-cabecera); border-bottom: 1px solid var(--if-cabecera-borde);
}
.cabecera-marca { gap: 22px; }
.marca-logo { width: 160px; height: 41px; }
.cabecera-titulo { padding-left: 22px; border-left: 1px solid #2c3d52; }
.cabecera-titulo h1 { font-size: 19px; font-weight: 600; letter-spacing: -.2px; color: #fff; }
.cabecera-estado { gap: 14px; flex-wrap: nowrap; color: #c9d5e2; }
.cabecera .badge#badge-modo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
  background: #0f2a20; border: 1px solid #1f5c40; color: #86e0ae; }
.cabecera .badge#badge-modo.badge-conectado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; }
.cabecera .badge.badge-archivo { font-size: 13px; color: #c9d5e2; max-width: 260px; }
.cabecera-usuario { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.cabecera-usuario .ico { width: 18px; height: 18px; color: #c9d5e2; }
.usuario-actual { color: #c9d5e2; font-size: 13px; max-width: 220px; }
.cabecera-separador { width: 1px; height: 20px; background: #2c3d52; }
.cabecera .btn-icono { color: #c9d5e2; }
.cabecera .btn-icono:hover { background: #172538; color: #fff; }
.btn-cabecera { background: #132132; color: #e8eef5; border: 1px solid #2f4157; padding: 0 18px; font-weight: 600; }
.btn-cabecera:hover { background: #1b2c42; }
.cabecera .selector-organizacion { background: #132132; color: #e8eef5; border-color: #2f4157; }
.cabecera .indicador-carga { color: #a9b8c9; }
html[data-tema="oscuro"] .ico-tema-claro, html:not([data-tema="oscuro"]) .ico-tema-oscuro { display: none; }

/* ---------------------------------------------------------------------- */
/* Estructura: columna principal + panel lateral                          */
/* ---------------------------------------------------------------------- */

.area-trabajo { flex: 1; min-height: 0; display: flex; }
.columna-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tabs { flex: none; padding: 0 20px; gap: 6px 14px; align-items: center; flex-wrap: wrap; background: var(--if-cabecera); border-bottom: 1px solid var(--if-cabecera-borde); }
.tabs-pestanas { display: flex; gap: 6px; align-self: stretch; }
.tabs .tab { padding: 12px 12px 10px; font-size: 14px; font-weight: 500; color: #a9b8c9; border-bottom: 3px solid transparent; }
.tabs .tab:hover { color: #fff; }
.tabs .tab.activa { color: #fff; font-weight: 600; border-bottom-color: var(--if-acento); }
html:not([data-tema="oscuro"]) .tabs { background: #13233a; }
/* Herramientas en la fila de pestañas: la franja es oscura en los dos temas. */
.acciones-pestanas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; padding: 7px 0; }
.acciones-pestanas .btn-herramienta { min-height: 34px; padding: 0 12px; gap: 7px; background: #132132; border-color: #2f4157; color: #e8eef5; }
.acciones-pestanas .btn-herramienta:hover { background: #1b2c42; border-color: #465b73; }
.acciones-pestanas .btn-herramienta.activa, .acciones-pestanas .btn-herramienta[aria-expanded="true"] { border-color: var(--if-acento); background: #241a26; }
.acciones-pestanas .btn-herramienta .ico { width: 17px; height: 17px; }

main { flex: 1; min-height: 0; max-width: none; padding: 16px 20px 10px; display: flex; flex-direction: column; }
.vista-matriz { flex: 1; min-height: 0; display: flex; flex-direction: column; }


/* ---------------------------------------------------------------------- */
/* Modo de la pestaña (junto a las pestañas)                              */
/* ---------------------------------------------------------------------- */

.etiqueta-modo { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 11px; border-radius: 4px; background: #172538; border: 1px solid #2c3d52; color: #a9b8c9; font-size: 12.5px; }
.etiqueta-modo .ico { width: 14px; height: 14px; }
.etiqueta-modo strong { color: #e8eef5; }
.aviso-rol { border-left: 0; }

/* ---------------------------------------------------------------------- */
/* Filtros y período                                                      */
/* ---------------------------------------------------------------------- */

.panel-filtros, .barra-periodo, .barra-seleccion {
  flex: none; background: var(--if-tarjeta); border: 1px solid var(--if-borde); border-top: 0; box-shadow: none; margin: 0;
}
.panel-filtros { display: flex; align-items: flex-end; gap: 16px; padding: 14px 20px; flex-wrap: wrap; border-top: 1px solid var(--if-borde); border-radius: 8px 8px 0 0; }
.panel-filtros .campo-filtro { gap: 6px; }
.panel-filtros .campo-filtro > label { font-size: 12px; font-weight: 500; color: var(--if-texto-suave); }
.panel-filtros .campo-buscador { order: 0; flex: 0 1 300px; min-width: 200px; max-width: none; }
.panel-filtros .campo-faena, .panel-filtros .campo-turno, .panel-filtros .campo-trabajo { width: 136px; }
.panel-filtros #filtro-equipo { width: 100%; min-width: 0; max-width: none; }
/* Monitores anchos: campos más holgados, siempre en una fila. */
@media (min-width: 1600px) {
  .panel-filtros .campo-buscador { flex-basis: 372px; }
  .panel-filtros .campo-faena, .panel-filtros .campo-turno, .panel-filtros .campo-trabajo { width: 200px; }
}
.btn-mas-filtros { min-height: 36px; }
.btn-mas-filtros.con-filtros { border-color: var(--if-acento); color: var(--if-texto); }

.campo-con-icono { position: relative; display: block; }
.campo-con-icono .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--if-texto-suave); pointer-events: none; width: 17px; height: 17px; }
.campo-con-icono input { width: 100%; padding-left: 40px; }
.campo-icono-derecha .ico { left: auto; right: 12px; }
.campo-icono-derecha input { padding-left: 14px; padding-right: 40px; }

.barra-periodo { display: flex; align-items: center; gap: 12px; padding: 11px 20px; flex-wrap: wrap; border-top: 1px solid var(--if-borde); }
body[data-vista="edicion"] .barra-periodo { padding: 10px 14px; }
.grupo-periodo { display: inline-flex; align-items: center; gap: 12px; }
.periodo-selector { position: relative; display: inline-block; }
.btn-periodo { background: transparent; border: 0; color: var(--if-texto); font: 600 18px/1.2 "Segoe UI", sans-serif; padding: 6px 10px; min-width: 176px; border-radius: 4px; cursor: pointer; letter-spacing: -.2px; }
.btn-periodo:hover { background: var(--if-hover); }
body[data-vista="edicion"] .btn-periodo { font-size: 16px; min-width: 150px; }
.fecha-oculta { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
#btn-fecha-hoy { padding: 0 22px; }
.segmentado { display: inline-flex; border: 1px solid var(--if-borde-campo); border-radius: 4px; overflow: hidden; background: var(--if-boton); }
.segmentado button { min-height: 34px; padding: 0 30px; border: 0; background: transparent; color: var(--if-texto-suave); font: 600 13px "Segoe UI", sans-serif; cursor: pointer; }
.segmentado button + button { border-left: 1px solid var(--if-borde-campo); }
.segmentado button[aria-pressed="true"] { background: var(--if-segmento); color: #fff; }
.segmentado button:hover:not([aria-pressed="true"]) { background: var(--if-hover); color: var(--if-texto); }
.segmentado-ancho { display: flex; width: 100%; }
.segmentado-ancho button { flex: 1; padding: 0 10px; }

/* Calendario de rango: la banda une los días y los círculos marcan los extremos. */
.calendario-panel {
  box-sizing: border-box; width: min(400px, calc(100vw - 24px)); max-width: none;
  max-height: calc(100dvh - 24px); margin: auto; padding: 16px; overflow: auto;
  background: var(--if-popover); color: var(--if-texto); border: 1px solid var(--if-borde);
  border-radius: 8px; box-shadow: var(--if-sombra);
}
.calendario-panel::backdrop { background: var(--if-velo); }
.calendario-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.calendario-cabecera h2 { margin: 0; font-size: 17px; color: var(--if-texto); }
.calendario-navegacion { display: grid; grid-template-columns: 36px minmax(0, 1fr) 88px 36px; gap: 6px; align-items: center; }
.calendario-navegacion select { width: 100%; min-width: 0; padding-inline: 6px; }
.calendario-navegacion [data-mover] { touch-action: none; font-size: 24px; }
.calendario-semana, .calendario-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario-semana { margin-top: 12px; text-align: center; color: var(--if-texto-suave); font-size: 12px; line-height: 28px; }
.calendario-dias { touch-action: none; user-select: none; }
.calendario-dia {
  position: relative; isolation: isolate; height: 40px; min-width: 0; padding: 0; border: 0;
  border-radius: 0; background: transparent; color: var(--if-texto); font: inherit; cursor: pointer;
}
.calendario-dia span { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin: auto; border-radius: 50%; }
.calendario-dia.fuera-mes { color: var(--if-texto-tenue); }
.calendario-dia:disabled { cursor: default; opacity: .5; }
.calendario-dia.en-rango { background: var(--if-rango-fondo); }
.calendario-dia.extremo-inicio::before, .calendario-dia.extremo-fin::before {
  content: ""; position: absolute; inset-block: 0; width: 50%; background: var(--if-rango-fondo);
}
.calendario-dia.extremo-inicio::before { right: 0; }
.calendario-dia.extremo-fin::before { left: 0; }
.calendario-dia.extremo-inicio span, .calendario-dia.extremo-fin span, .calendario-dia.extremo-unico span {
  background: var(--if-acento); color: var(--if-texto-acento); font-weight: 600;
}
.calendario-dia:hover:not(:disabled) span { outline: 1px solid var(--if-acento); }
.calendario-dia:focus-visible { outline: 2px solid var(--if-acento); outline-offset: -2px; z-index: 2; }
.calendario-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.calendario-campos label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calendario-campos input { box-sizing: border-box; width: 100%; min-width: 0; padding-inline: 6px; }
.calendario-resumen { min-height: 36px; margin: 12px 0; font-size: 13px; color: var(--if-texto-suave); }
.calendario-resumen.con-error { color: var(--if-grave); }
.calendario-pie { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--if-borde); padding-top: 12px; }
.calendario-pie [data-aplicar] { background: var(--if-acento); color: var(--if-texto-acento); border-color: var(--if-acento); }
.calendario-pie [data-aplicar]:hover:not(:disabled) { background: var(--if-acento-hover); }
.calendario-pie [data-aplicar]:disabled { opacity: .5; cursor: default; }
.btn-ajustar { padding: 0 22px; font-weight: 600; }
.barra-espacio { flex: 1; }
.resumen-personas { display: inline-flex; align-items: center; gap: 10px; color: var(--if-texto-suave); font-size: 13px; margin-right: 12px; white-space: nowrap; }
.resumen-personas .ico { width: 18px; height: 18px; }
#grilla-resumen { font-size: 13px; color: var(--if-texto-suave); }
body.vista-ampliada .ico-ampliar, body:not(.vista-ampliada) .ico-reducir { display: none; }

/* Avisos compactos */
#panel-alertas, #alertas-contenedor { display: inline-flex; align-items: center; gap: 8px; }
.btn-aviso { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--if-aviso-borde); background: var(--if-aviso-fondo); color: var(--if-aviso); font: 600 13px "Segoe UI", sans-serif; white-space: nowrap; }
.btn-aviso .ico { width: 17px; height: 17px; }
.btn-aviso-grave { border-color: var(--if-grave-borde); background: var(--if-grave-fondo); color: var(--if-grave); }
.alertas-sin-novedades { color: var(--if-texto-tenue); font-size: 12px; padding: 0 4px; }
.alertas-sin-novedades > span { color: var(--if-exito); margin-right: 4px; }
.alertas-cargando { color: var(--if-texto-tenue); font-size: 12px; }

/* Menús */
.menu { position: relative; }
.menu-popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 260px; max-width: calc(100vw - 16px); padding: 6px;
  background: var(--if-popover); border: 1px solid var(--if-borde-campo); border-radius: 8px; box-shadow: var(--if-sombra);
}
.menu-derecha { left: auto; right: 0; min-width: 320px; }
.menu-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--if-texto); cursor: pointer; font-family: inherit; }
.menu-item:hover, .menu-item:focus-visible { background: var(--if-hover); outline: none; }
.menu-item:disabled { opacity: .6; cursor: progress; }
.menu-item-titulo { display: block; font-size: 13px; font-weight: 600; }
.menu-item-ayuda { display: block; font-size: 12px; color: var(--if-texto-suave); margin-top: 3px; }
.popover-filtros { width: 280px; padding: 14px; display: grid; gap: 12px; }
.popover-filtros select { width: 100%; }
.popover-acciones { border-top: 1px solid var(--if-borde); padding-top: 12px; }
.campo-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--if-texto); cursor: pointer; }
.popover-alertas { width: min(460px, 90vw); max-height: min(60vh, 520px); overflow: auto; padding: 14px 16px; }
.popover-alertas:focus { outline: none; }
.alertas-bloque + .alertas-bloque { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--if-borde); }
.alertas-subtitulo-vencen { color: var(--if-aviso); }
.alertas-subtitulo-vueltos { color: var(--if-exito); }
.alertas-subtitulo-grave { color: var(--if-grave); }
.alerta-item { border-color: var(--if-borde); font-size: 12px; }
.popover-alertas .mensaje-vacio { padding: 4px 0; }

/* Selección múltiple */
.barra-seleccion { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--if-borde); background: var(--if-acento-suave); }
.barra-seleccion .campo-filtro label { font-size: 11px; }
.barra-seleccion .campo-motivo { flex: 1 1 220px; }
.barra-seleccion .campo-motivo input { width: 100%; }
.seleccion-contador-grupo { display: flex; align-items: center; gap: 2px; margin: 0 8px 8px 0; }
.seleccion-contador { margin: 0; font-weight: 600; font-size: 14px; color: var(--if-texto); }
.btn-salir-seleccion { margin-left: auto; }
.seleccion-advertencias { flex-basis: 100%; }
.seleccion-advertencias:empty { display: none; }

/* ---------------------------------------------------------------------- */
/* Matriz                                                                 */
/* ---------------------------------------------------------------------- */

.panel-grilla { flex: 1; min-height: 0; display: flex; flex-direction: column; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; overflow: visible; }
.grilla-contenedor {
  flex: 1; min-height: 260px; max-height: none; overflow: auto; background: var(--if-fila);
  border: 1px solid var(--if-borde); border-top: 1px solid var(--if-borde); border-radius: 0 0 8px 8px;
  scrollbar-color: var(--if-borde-campo) transparent;
}
.grilla-contenedor:focus-visible { outline: 2px solid var(--if-acento); outline-offset: -2px; }
.tabla-grilla { font-size: 12px; }
.tabla-grilla th, .tabla-grilla td { border-right: 0; border-bottom: 1px solid var(--if-borde-grilla); }
.celda-persona-header, .celda-persona-info { min-width: 246px; max-width: 290px; padding: 6px 20px; background: var(--if-fila); box-shadow: 1px 0 0 var(--if-borde-grilla); }
.celda-persona-header { height: 58px; background: var(--if-encabezado); font-size: 15px; font-weight: 600; color: var(--if-texto); }
.celda-fecha-header { min-width: 78px; height: 58px; padding: 4px 2px; background: var(--if-encabezado); color: var(--if-texto-suave); border-right: 1px solid var(--if-borde-grilla) !important; }
.celda-fecha-header.fin-semana { background: var(--if-encabezado); }
.celda-fecha-header .dia-semana { font-size: 11px; font-weight: 500; letter-spacing: .3px; color: var(--if-texto-suave); }
.numero-dia { width: 26px; height: 26px; margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--if-texto); }
.celda-fecha-header.columna-hoy { background: var(--if-hoy-cabecera); color: var(--if-texto); }
.celda-fecha-header.columna-hoy .dia-semana { color: var(--if-texto); font-weight: 600; }
.columna-hoy .numero-dia { background: var(--if-acento); color: #fff; border-radius: 50%; font-weight: 600; }

.fila-grupo-faena td { height: 30px; padding: 0; background: var(--if-grupo); border-bottom: 1px solid var(--if-borde-grilla); }
.grupo-etiqueta {
  position: sticky; left: 0; display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 20px;
  background: transparent; border: 0; color: var(--if-texto); font: 600 13px "Segoe UI", sans-serif; cursor: pointer;
}
.grupo-etiqueta .ico { width: 14px; height: 14px; transition: transform .15s ease; }
.grupo-etiqueta[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.grupo-etiqueta:focus-visible { outline: 2px solid var(--if-acento); outline-offset: -2px; }
.grupo-contador { color: var(--if-texto-suave); font-weight: 400; margin-left: 6px; }

.celda-persona-info .nombre-persona { font-size: 13px; font-weight: 600; color: var(--if-texto); overflow: hidden; text-overflow: ellipsis; }
.celda-persona-info .detalle-persona { font-size: 11px; margin-top: 2px; color: var(--if-texto-suave); }
.nombre-editable { color: var(--if-texto); }

.celda-dia { min-width: 78px; height: 43px; padding: 4px 3px; background: var(--if-fila); }
.celda-dia.columna-hoy { background: var(--if-hoy-columna); }
.celda-dia.dia-vacio { background: var(--if-fila) !important; }
.celda-dia.dia-vacio.columna-hoy { background: var(--if-hoy-columna) !important; }
.marca-codigo { min-height: 31px; border-radius: 3px; box-shadow: none; font: 600 11.5px "Segoe UI", sans-serif; letter-spacing: -.1px; }
.dia-vacio .marca-codigo { background: var(--if-vacio); box-shadow: inset 0 0 0 1px var(--if-borde-campo); color: var(--if-texto-tenue); }
.celda-seleccionada .marca-codigo { outline: 2px solid var(--seleccion); outline-offset: 1px; }

.grilla-pie { flex: none; background: transparent; border: 0; padding: 10px 2px 0; gap: 10px 24px; }
.leyenda-resumen { gap: 26px; font-size: 12px; color: var(--if-texto-suave); }
.leyenda-resumen > span { gap: 8px; }
.muestra { width: 12px; height: 12px; border-radius: 2px; }
.muestra-vacia { background: var(--if-vacio); border: 1px solid var(--if-borde-campo); }
.catalogo-detalle > summary { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--if-texto-suave); font-weight: 500; }
.catalogo-detalle > summary:hover { color: var(--if-texto); }
.catalogo-detalle > summary .ico { width: 14px; height: 14px; }
.catalogo-detalle[open] { width: 100%; background: var(--if-tarjeta); border: 1px solid var(--if-borde); border-radius: 8px; padding: 10px 14px; }

/* ---------------------------------------------------------------------- */
/* Panel lateral                                                          */
/* ---------------------------------------------------------------------- */

.panel-lateral {
  flex: none; width: clamp(360px, 27vw, 432px); min-height: 0; display: flex; flex-direction: column;
  background: var(--if-panel-lateral); border-left: 1px solid var(--if-borde); color: var(--if-texto);
}
.panel-lateral-cabecera { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 16px 10px 20px; }
.panel-lateral-cabecera h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
.panel-lateral-cabecera h2:focus { outline: none; }
.panel-lateral-cabecera h2:focus-visible { outline: 2px solid var(--if-acento); outline-offset: 3px; }
.panel-lateral-cabecera p { margin: 5px 0 0; font-size: 14px; color: var(--if-texto-suave); }
.panel-lateral-cabecera .btn-icono .ico { width: 20px; height: 20px; }
.panel-lateral-contenido { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pestanas { flex: none; display: flex; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--if-borde); }
.pestanas button { padding: 12px 8px 10px; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--if-texto-suave); font: 500 14px "Segoe UI", sans-serif; cursor: pointer; }
.pestanas button:first-child { padding-left: 8px; }
.pestanas button[aria-selected="true"] { color: var(--if-texto); font-weight: 600; border-bottom-color: var(--if-acento); }
.pestanas button:hover { color: var(--if-texto); }
.panel-lateral-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 20px; }
.panel-lateral .campo-filtro { gap: 6px; margin-bottom: 12px; }
.panel-lateral .campo-filtro > label, .panel-lateral .panel-comando > label { font-size: 12px; font-weight: 500; color: var(--if-texto-suave); }
.panel-lateral input:not([type="checkbox"]), .panel-lateral select { width: 100%; min-width: 0; }
.movimientos-filtros { margin-bottom: 14px; }
.movimientos-filtros .campo-con-icono input { min-height: 42px; }
.mov-filtros-panel { margin: -4px 0 14px; padding: 12px 14px; border: 1px solid var(--if-borde); border-radius: 8px; background: var(--if-tarjeta-2); }
.mov-filtros-panel .campo-check { margin-top: 6px; font-size: 12px; }
/* Movimientos: resumen y botones de vincular o desvincular sobre el registro. */
.mov-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 14px; }
.mov-cabecera p { margin: 0; }
.mov-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.mov-aviso-iniciales { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 10px 14px; font-size: 13px; color: var(--if-texto-suave); border-bottom: 1px solid var(--if-borde); }
.rejilla-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

.chip-movimiento { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip-movimiento.vinculacion { background: rgba(47, 174, 107, .16); color: #1f8a53; }
.chip-movimiento.desvinculacion { background: var(--if-grave-fondo); color: var(--if-grave); }
html[data-tema="oscuro"] .chip-movimiento.vinculacion { color: #7fdcaa; }

.hist-excel-nota { margin: 0; padding: 10px 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--if-borde); }

.panel-movimiento { max-width: 760px; border: 1px solid var(--if-borde); border-radius: 6px; padding: 14px; margin: 0; background: var(--if-tarjeta); }
.panel-movimiento h3 { margin: 0 0 12px; font-size: 15px; }
.bloque-alta { border: 1px dashed var(--if-borde-campo); border-radius: 6px; padding: 10px 12px 0; margin: 4px 0 12px; }
.panel-comando { background: transparent; border-left: 0; }
.panel-comando .fila-comando { display: flex; gap: 8px; margin-top: 6px; }
.preview-comando { border: 1px solid var(--if-borde-campo); background: var(--if-tarjeta); border-radius: 6px; }
.preview-comando h3 { color: var(--if-texto); }
.preview-detalle { font-size: 12px; }
.preview-acciones { flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Vistas amplias                                                         */
/* ---------------------------------------------------------------------- */

.vista-amplia { flex: 1; min-height: 0; overflow: auto; background: var(--if-tarjeta); border: 1px solid var(--if-borde); border-radius: 8px; }
.vista-amplia-cabecera { display: flex; align-items: flex-start; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--if-borde); position: sticky; top: 0; z-index: 5; background: var(--if-tarjeta); }
.vista-amplia-cabecera h2 { margin: 0; font-size: 19px; font-weight: 600; }
.vista-amplia-cabecera h2:focus { outline: none; }
.vista-amplia-cabecera p { margin: 4px 0 0; font-size: 13px; color: var(--if-texto-suave); max-width: 900px; line-height: 1.5; }
.btn-volver { flex: none; }
.vista-amplia-cuerpo { padding: 18px 20px 24px; display: grid; gap: 16px; align-content: start; }
.tarjeta { background: var(--if-tarjeta-2); border: 1px solid var(--if-borde); border-radius: 8px; padding: 16px; min-width: 0; }
.tarjeta h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.tarjeta.tabla-contenedor { padding: 0; overflow: auto; }
.rejilla-reportes { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.rejilla-reportes .fila-filtros { margin-bottom: 12px; }
.rejilla-admin { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.formulario-apilado { display: grid; gap: 4px; }
.formulario-apilado .campo-filtro { margin-bottom: 10px; }
.formulario-apilado input:not([type="checkbox"]), .formulario-apilado select { width: 100%; }
.acciones-miembro { white-space: nowrap; }
#personas-pestana-movimientos .movimientos-filtros { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; }
#personas-pestana-movimientos .movimientos-filtros .campo-buscador { flex: 0 1 360px; min-width: 240px; }
#btn-mov-mas-filtros { min-height: 42px; }
.mov-filtros-panel .rejilla-dos { grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 0 12px; }
.vista-amplia-cuerpo .fila-filtros .campo-buscador { min-width: 260px; }

.tabla-datos th { background: var(--if-encabezado); color: var(--if-texto-suave); border-color: var(--if-borde); }
.tabla-datos td { border-color: var(--if-borde); padding-block: 10px; }
.tabla-datos tbody tr:hover { background: var(--if-hover); }

/* Gestión de personas y clasificación de cargos. */
.personas-filtros { flex-wrap: wrap; gap: 12px 20px; }
.personas-filtros .campo-buscador { flex: 1; max-width: 420px; }
.personas-filtros input[type="search"] { width: 100%; }
.personas-ayuda { margin: 0; color: var(--if-texto-suave); font-size: 13px; line-height: 1.6; }
.personas-lista { display: grid; gap: 16px; min-width: 0; }
.personas-grupo { min-width: 0; border: 1px solid var(--if-borde); border-radius: 8px; overflow: hidden; background: var(--if-tarjeta-2); }
.personas-grupo h3 { margin: 0; padding: 12px 16px; font-size: 14px; background: var(--if-grupo); overflow-wrap: anywhere; }
.tabla-personas { min-width: 1080px; }
.tabla-personas th, .tabla-personas td { text-align: left; vertical-align: top; white-space: normal; }
.tabla-personas .persona-datos { min-width: 240px; max-width: 320px; }
.persona-abrir { padding: 0; border: 0; background: transparent; color: var(--if-texto); font: inherit; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.persona-abrir:hover { color: var(--if-acento); text-decoration: underline; }
.persona-abrir:focus-visible { outline: 2px solid var(--if-acento); outline-offset: 3px; }
.tabla-personas tr[data-persona-rut] { cursor: pointer; }
.dato-persona-suave { color: var(--if-texto-suave); font-size: 12px; }
.persona-datos > .dato-persona-suave { display: block; margin-top: 4px; }
/* Pendientes de la ficha como etiquetas en una línea. */
.persona-pendientes { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.persona-pendientes li { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; line-height: 1.5; color: var(--if-aviso); background: var(--if-aviso-fondo); }
/* Resumen («37 personas», «1 proyecto») y su (i) al final de la fila de filtros, a la altura de los campos. */
.personas-filtros .resumen-fila { margin: 0 0 10px auto; align-self: flex-end; }
.personas-filtros .resumen-fila + .ayuda-i { align-self: flex-end; margin-bottom: 10px; }
/* Migas: «Personas › Nombre» o «Contratos › Código · Nombre». */
.migas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.migas h3 { margin: 0; }
.migas-enlace { padding: 0; border: 0; background: transparent; color: var(--if-acento); font: 600 14px "Segoe UI", sans-serif; cursor: pointer; }
.migas-enlace:hover { text-decoration: underline; }
.migas-enlace:focus-visible { outline: 2px solid var(--if-acento); outline-offset: 3px; border-radius: 2px; }
.migas-separador { color: var(--if-texto-suave); }

/* Gestión de contratos. */
/* Sin overflow: hidden: el menú «Más» y la ayuda (i) se abren por fuera del grupo. */
.contratos-grupo { min-width: 0; border: 1px solid var(--if-borde); border-radius: 8px; background: var(--if-tarjeta-2); }
.contratos-grupo h3 { margin: 0; padding: 12px 16px; font-size: 14px; background: var(--if-grupo); border-radius: 7px 7px 0 0; overflow-wrap: anywhere; }
.contratos-items, .contratos-codigos { list-style: none; margin: 0; padding: 0; }
.contratos-items li + li, .contratos-codigos li + li { border-top: 1px solid var(--if-borde); }
.contrato-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; padding: 12px 16px; border: 0; background: transparent;
  color: var(--if-texto); font: inherit; text-align: left; cursor: pointer; }
.contrato-item:hover { background: var(--if-hover); }
.contrato-item:focus-visible { outline: 2px solid var(--if-acento); outline-offset: -2px; }
.contrato-item-titulo { overflow-wrap: anywhere; }
.contrato-estado { align-self: start; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--if-borde); color: var(--if-texto-suave); }
.contrato-estado.estado-vigente { color: var(--if-exito); background: var(--if-exito-fondo); border-color: transparent; }
.contrato-estado.estado-proximo { color: var(--if-aviso); background: var(--if-aviso-fondo); border-color: var(--if-aviso-borde); }
.contrato-pendiente { color: var(--if-aviso); font-weight: 600; }
.contratos-codigos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 13px; }
.contratos-codigos li > span { min-width: 0; overflow-wrap: anywhere; }
.contratos-codigos li > .contrato-acciones-codigo { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
details.contratos-grupo > summary { cursor: pointer; padding: 10px 16px; font-weight: 600; }
/* Fichas por equipo: dos por fila en escritorio, una en celular. */
.fichas-equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin: 10px 0 12px; }
.ficha-equipo { background: var(--if-tarjeta); border: 1px solid var(--if-borde); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.ficha-equipo-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ficha-equipo-nombre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ficha-equipo-nombre input { width: 7ch; font-weight: 600; }
.ficha-equipo-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ficha-equipo-req { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; }
.ficha-equipo-req input { width: 6ch; }
.ficha-equipo-agregar { margin-top: 10px; }
.ficha-equipo-agregar select { min-width: 0; flex: 1 1 180px; }
.integrantes { list-style: none; margin: 0; padding: 0; }
.integrante { padding: 8px 0; border-top: 1px solid var(--if-borde); }
.integrante:first-child { border-top: 0; }
.integrante-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.integrante-nombre { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.integrante-vigencia, .integrantes-otros { margin-top: 4px; font-size: 12px; }
.integrante-vigencia summary, .integrantes-otros summary { cursor: pointer; color: var(--if-texto-suave); }
.contrato-relevo h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.etiqueta-borrador { font-size: 11px; font-weight: 600; border: 1px solid var(--if-borde); border-radius: 5px; padding: 2px 8px; color: var(--if-texto-suave); }
.relevo-tramos { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.relevo-tramo { border-radius: 5px; padding: 8px 10px; font-size: 12px; border: 1px solid var(--if-borde); }
.relevo-tramo b { display: block; font-weight: 600; margin-top: 3px; }
.relevo-descanso { color: var(--if-texto-suave); }
.relevo-hueco, .relevo-superposicion { border-color: #c8862a; background: rgba(200, 134, 42, .12); }
.contrato-ficha-titulo { margin: 4px 0 16px; font-size: 18px; outline: none; overflow-wrap: anywhere; }
.contrato-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1680px; min-width: 0; align-items: start; }
/* En monitores anchos: Datos y Requerimientos lado a lado; el resto (equipos, relevo, personas) ocupa todo el ancho. */
@media (min-width: 1360px) {
  .contrato-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contrato-ficha > * { grid-column: 1 / -1; }
  .contrato-ficha > .contrato-mitad { grid-column: auto; align-self: stretch; }
}
.contrato-ficha-titulo:focus, .contrato-ficha-titulo:focus-visible { outline: none; }
.contrato-bloque { min-width: 0; min-inline-size: 0; margin: 0; padding: 16px; border: 1px solid var(--if-borde); border-radius: 8px; background: var(--if-tarjeta-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.contrato-bloque legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.contrato-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.contrato-campos .contrato-campo-ancho { grid-column: span 2; }
.contrato-campos input { width: 100%; }
.contrato-campos input[type="color"] { height: 38px; padding: 2px; }
.contrato-duracion { margin: 0; font-weight: 600; color: var(--if-texto); }
.contrato-duracion.sin-fechas { font-weight: 400; color: var(--if-texto-suave); }
.tabla-contrato { min-width: 520px; }
.contrato-bloque > .tabla-contenedor { position: relative; max-width: 100%; overflow-x: auto; }
.tabla-contrato th, .tabla-contrato td { text-align: left; vertical-align: middle; white-space: normal; }
.tabla-contrato input, .tabla-contrato select { width: 100%; min-width: 0; }
.tabla-requerimientos input { max-width: 110px; }
.contrato-preview { padding: 12px 16px; border: 1px solid var(--if-borde); border-left: 4px solid var(--if-acento); border-radius: 8px; background: var(--if-tarjeta-2); }
.contrato-preview h3 { margin: 0 0 8px; font-size: 14px; }
.contrato-preview ul, #contrato-errores ul { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 13px; }
#contrato-errores:empty { display: none; }
.contrato-bloque .fila-filtros { flex-wrap: wrap; min-width: 0; }
.contrato-bloque .fila-filtros .campo-filtro { flex: 1 1 260px; min-width: 0; max-width: 480px; }
#contrato-nueva-persona { width: 100%; min-width: 0; max-width: 100%; }
.contrato-cobertura h4 { margin: 0; font-size: 14px; }
.contrato-cobertura ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.contrato-faltantes { color: var(--if-grave); }
.contrato-config { color: var(--if-aviso); }
.alerta-abrir { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.alerta-abrir:hover { color: var(--if-acento); text-decoration: underline; }
.alerta-abrir:focus-visible { outline: 2px solid var(--if-acento); outline-offset: 2px; }
.alerta-alcance { margin: 0 0 8px; color: var(--if-aviso); font-size: 12px; line-height: 1.5; }
.contrato-planificacion h4, .contrato-preview h4 { margin: 8px 0 4px; font-size: 13px; }
.contrato-asig-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.contrato-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.contrato-acciones-izq { justify-content: flex-start; }
/* Guardar a la vista mientras se recorre una ficha larga. */
.contrato-acciones-pie { position: sticky; bottom: 0; z-index: 4; margin: 0 -20px -24px; padding: 12px 20px; background: var(--if-tarjeta);
  border-top: 1px solid var(--if-borde); box-shadow: 0 -8px 16px rgba(0, 0, 0, .18); }
/* Encabezado de la ficha: migas, estado y «Más acciones» en una fila. */
.contrato-encabezado { align-items: center; margin: 0 0 16px; }
.contrato-encabezado .contrato-ficha-titulo { margin: 0; }
.contrato-ficha-mas { margin-left: auto; }
.vista-amplia-cabecera .cabecera-accion { margin-left: auto; align-self: center; }
/* Ficha fuera del período visible: un aviso con el botón para llevar la matriz a ese mes. */
.contrato-fuera-periodo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; background: var(--if-aviso-fondo); border-color: var(--if-aviso-borde); }
.contrato-fuera-periodo p { margin: 0; }

@media (max-width: 680px) {
  #vista-personas .vista-amplia-cuerpo { padding: 16px 12px; }
  #vista-personas .personas-filtros .campo-buscador { min-width: 0; max-width: none; flex-basis: 100%; }
  .tabla-personas { display: block; min-width: 0; }
  .tabla-personas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-personas tbody { display: block; }
  .tabla-personas tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; gap: 12px; border-bottom: 1px solid var(--if-borde); }
  .tabla-personas tr:last-child { border-bottom: 0; }
  .tabla-personas td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .tabla-personas .persona-datos { grid-column: 1 / -1; min-width: 0; max-width: none; }
  .tabla-personas td::before { content: attr(data-etiqueta); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--if-texto-suave); }
  .tabla-personas .persona-datos::before { display: none; }
  #vista-contratos .vista-amplia-cuerpo { padding: 16px 12px; }
  .contrato-acciones-pie { margin: 0 -12px -16px; padding-inline: 12px; }
  #vista-contratos .personas-filtros .campo-buscador { min-width: 0; max-width: none; flex-basis: 100%; }
  .contrato-campos { grid-template-columns: minmax(0, 1fr); }
  .contrato-campos .contrato-campo-ancho { grid-column: auto; }
  .contrato-bloque { padding: 12px; }
  .contratos-codigos li { flex-wrap: wrap; }
  .contrato-acciones .btn { flex: 1 1 auto; }
}

/* Vista ampliada de la matriz: solo filtros, período y calendario. */
.vista-ampliada .cabecera, .vista-ampliada .tabs { display: none !important; }

/* Alturas: en escritorio la matriz ocupa el alto disponible y desplaza por dentro. */
@media (min-width: 901px) and (min-height: 600px) {
  body { height: 100dvh; overflow: hidden; }
}

/* ---------------------------------------------------------------------- */
/* Pantallas medianas y pequeñas                                          */
/* ---------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .cabecera { padding-inline: 20px; }
  .cabecera .badge.badge-archivo { display: none; }
  body.con-panel .usuario-actual { display: none; }
  body.con-panel .panel-filtros .campo-faena, body.con-panel .panel-filtros .campo-turno, body.con-panel .panel-filtros .campo-trabajo { width: 136px; }
  body.con-panel .segmentado button { padding: 0 16px; }
  body.con-panel .resumen-personas { margin-right: 0; }
}

@media (max-width: 1100px) {
  .usuario-actual { display: none; }
  .celda-fecha-header, .celda-dia { min-width: 70px; }
  .rejilla-admin { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body { height: auto; overflow: visible; }
  .cabecera { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .cabecera-marca { gap: 14px; }
  .marca-logo { width: 120px; height: auto; }
  .cabecera-titulo { padding-left: 14px; }
  .cabecera-titulo h1 { font-size: 15px; }
  .cabecera-estado { gap: 8px; margin-left: auto; }
  .cabecera-usuario, .cabecera-separador { display: none; }
  .cabecera .badge#badge-modo { padding: 4px 10px; font-size: 12px; }
  .tabs { padding-inline: 10px; }
  .tabs-pestanas { overflow-x: auto; }
  .acciones-pestanas { justify-content: flex-start; width: 100%; margin-left: 0; padding: 0 0 8px; }
  .acciones-pestanas .btn-herramienta { flex: none; }
  main { padding: 12px 10px; }
  .panel-filtros { padding: 12px; gap: 10px; }
  .panel-filtros .campo-buscador { flex: 1 1 100%; }
  .panel-filtros .campo-faena, .panel-filtros .campo-turno, .panel-filtros .campo-trabajo { width: auto; flex: 1 1 120px; }
  .barra-periodo, body[data-vista="edicion"] .barra-periodo { padding: 10px 12px; gap: 8px; }
  .btn-periodo, body[data-vista="edicion"] .btn-periodo { font-size: 15px; min-width: 0; }
  .segmentado button { padding: 0 14px; }
  .barra-espacio { display: none; }
  .resumen-personas { margin-right: auto; }
  .grilla-contenedor { flex: none; height: 62dvh; min-height: 320px; }
  .celda-persona-header, .celda-persona-info { min-width: 168px; max-width: 168px; padding-inline: 12px; }
  .celda-persona-header { font-size: 13px; }
  .celda-fecha-header, .celda-dia { min-width: 64px; }
  .leyenda-resumen { gap: 12px; }
  .panel-lateral { position: fixed; inset: 0; z-index: 60; width: 100%; border-left: 0; box-shadow: var(--if-sombra); }
  body.con-panel { overflow: hidden; }
  .vista-amplia { overflow: visible; }
  .vista-amplia-cabecera { flex-direction: column; gap: 10px; position: static; }
  .rejilla-reportes { grid-template-columns: 1fr; }
  #personas-pestana-movimientos .movimientos-filtros .campo-buscador { flex: 1 1 100%; }
  .mov-filtros-panel .rejilla-dos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .cabecera-titulo { display: none; }
  .rejilla-dos { grid-template-columns: 1fr; }
  .popover-filtros { width: min(280px, 90vw); }
}
.vista-ampliada .panel-lateral .panel-comando { display: block; }
main, .vista-matriz, .panel-grilla, .vista-amplia { min-width: 0; }
main { margin: 0; width: auto; }
#btn-tema { min-width: 0; }
.barra-seleccion .campo-filtro:not(.campo-motivo) { width: 260px; }
.barra-seleccion .campo-filtro:not(.campo-motivo) select { width: 100%; }
@media (max-width: 900px) { .barra-seleccion .campo-filtro:not(.campo-motivo) { width: 100%; } }
main { overflow: auto; }
h2[tabindex="-1"]:focus, h2[tabindex="-1"]:focus-visible { outline: none; }
@media (max-width: 900px) {
  main { overflow: visible; }
}
/* Pantallas bajas (notebook con el navegador a 590 px): se desplaza la página, así que lo fijo se fija a la ventana. */
@media (min-width: 901px) and (max-height: 599px) {
  main, .vista-amplia { overflow: visible; }
}
@media (min-width: 901px) and (max-width: 1400px) {
  body.con-panel .panel-filtros { gap: 10px; }
  body.con-panel .panel-filtros .campo-buscador { flex: 1 1 180px; min-width: 160px; }
  body.con-panel .panel-filtros .campo-faena, body.con-panel .panel-filtros .campo-turno, body.con-panel .panel-filtros .campo-trabajo { width: 120px; }
}

/* Modo de combinación de filtros (Más filtros). */
.popover-filtros .segmentado button { min-height: 30px; font-size: 12.5px; }

/* Ficha de la persona en Gestión de personas: cuatro secciones. */
.ficha-persona { display: grid; gap: 1rem; }
.ficha-persona > h3 { margin: 0; }
.ficha-seccion { border: 1px solid var(--color-borde); border-radius: 8px; padding: .75rem 1rem; background: var(--superficie); }
.ficha-seccion h4 { margin: 0 0 .5rem; }
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem 1rem; margin: 0 0 .5rem; }
.ficha-datos dt { font-size: .8rem; color: var(--color-texto-suave); }
.ficha-datos dd { margin: 0; overflow-wrap: anywhere; }
.ficha-lista { margin: 0 0 .5rem; padding-left: 1.1rem; }
.ficha-lista li { overflow-wrap: anywhere; }
.ficha-lista li.vigente { font-weight: 600; }
.ficha-lista li.anulado { text-decoration: line-through; color: var(--color-texto-suave); }

/* Faenas del contrato como etiquetas. */
.chips-faena { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 2rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--color-borde); max-width: 100%; overflow-wrap: anywhere; }
.chip-quitar { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .1rem; }
.etiqueta-campo { font-size: .8rem; color: var(--color-texto-suave); }
.contrato-sugerencias { display: grid; gap: .35rem; margin-top: .75rem; }
.contrato-sug-personas { list-style: none; margin: .25rem 0; padding-left: .5rem; }
.tabla-contrato select[data-asig-campo="Funcion"] { min-width: 8.5rem; }

/* Campo de texto que aparece al elegir "+ Agregar nuevo…" en una lista. */
.campo-nuevo { margin-top: .35rem; }

/* Ayuda (i): la explicación de cada bloque se abre en un globo en vez de un párrafo fijo. */
.ayuda-i { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; font-weight: 400; }
.ayuda-i-boton { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--if-borde-campo); background: var(--if-boton);
  color: var(--if-texto-suave); font: italic 700 11px/1 Georgia, "Times New Roman", serif; cursor: pointer; }
.ayuda-i-boton:hover, .ayuda-i-boton[aria-expanded="true"] { border-color: var(--if-acento); color: var(--if-acento); }
.ayuda-i-boton:focus-visible { outline: 2px solid var(--if-acento); outline-offset: 2px; }
.ayuda-i-globo { display: none; position: absolute; z-index: 30; top: 24px; left: -10px; width: max-content; max-width: min(360px, 78vw); padding: 10px 12px;
  border-radius: 8px; background: var(--if-popover); border: 1px solid var(--if-borde); box-shadow: var(--if-sombra);
  color: var(--if-texto); font: 400 12.5px/1.5 "Segoe UI", sans-serif; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; }
.ayuda-i-boton[aria-expanded="true"] + .ayuda-i-globo { display: block; }
.ayuda-i.ayuda-izq .ayuda-i-globo { left: auto; right: -10px; }

/* Menú «Más» de acciones poco usadas. */
.menu-mas { position: relative; display: inline-block; }
.menu-mas > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas > summary::after { content: "▾"; margin-left: 6px; font-size: 10px; }
.menu-mas-opciones { position: absolute; z-index: 30; right: 0; top: calc(100% + 4px); display: grid; gap: 4px; min-width: 190px; padding: 6px;
  background: var(--if-popover); border: 1px solid var(--if-borde); border-radius: 8px; box-shadow: var(--if-sombra); }
.menu-mas-opciones .btn { width: 100%; justify-content: flex-start; text-align: left; }
.contrato-acciones-izq .menu-mas-opciones { left: 0; right: auto; }

/* Gestión de contratos: título con ayuda, filtros y una fila por contrato. */
.titulo-con-ayuda { display: flex; align-items: center; gap: 2px; }
.tarjeta .titulo-con-ayuda { margin: 0 0 12px; }
.tarjeta .titulo-con-ayuda h3 { margin: 0; }
.segmentado-compacto button { padding: 0 14px; }
#contratos-lista-panel .personas-filtros { align-items: flex-end; }
#contratos-resumen { align-self: center; margin: 0; }
.contrato-fila { display: grid; grid-template-columns: minmax(220px, 2.4fr) minmax(110px, 1.1fr) minmax(170px, 1.2fr) 80px minmax(150px, 1.2fr) 96px;
  gap: 12px; align-items: center; }
.contrato-fila.contrato-item { padding: 10px 16px; }
.contrato-fila .dato-persona-suave { overflow-wrap: anywhere; }
/* La tabla sí recorta: sus filas no abren menús y el fondo al pasar el mouse respeta las esquinas. */
.contratos-tabla { overflow: hidden; }
.contrato-fila .contrato-item-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contrato-fila .contrato-estado { justify-self: start; align-self: center; }
.contrato-fila-cab { padding: 8px 16px; background: var(--if-encabezado); color: var(--if-texto-suave); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; }
.contrato-col-etiqueta { display: none; }
@media (max-width: 1000px) {
  .contrato-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .contrato-fila-cab { display: none; }
  .contrato-fila > .contrato-col-cliente, .contrato-fila > .contrato-col-vigencia, .contrato-fila > .contrato-col-personas, .contrato-fila > .contrato-col-dotacion { grid-column: 1; font-size: 12px; }
  .contrato-fila > .contrato-estado { grid-column: 2; grid-row: 1; }
  .contrato-col-etiqueta { display: inline; }
}

/* Ficha: cabeceras de bloque con acciones, ayudas junto a casillas y etiquetas. */
.bloque-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bloque-cabecera h4, .bloque-cabecera h5 { margin: 0; display: inline-flex; align-items: center; }
.bloque-acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.campo-check-ayuda { display: flex; align-items: center; gap: 2px; }
.ajuste-check-ayuda { display: flex; align-items: center; gap: 2px; }
.ajuste-check-ayuda .ajuste-check { margin-top: 16px; }
.ajuste-check-ayuda .ayuda-i { margin-top: 16px; }
/* Catálogo de códigos bajo la matriz: grupos Estados · Contratos · Proyectos · Sin información. */
.panel-leyenda .leyenda-grupo { min-width: 0; }
.leyenda-grupo h4 { display: flex; align-items: center; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--if-texto-suave); }
.leyenda-chips { display: grid; gap: 2px; }
/* Teléfono: el botón «Filtros» despliega los filtros que no son el buscador. */
.btn-filtros-movil { display: none; }
@media (max-width: 640px) {
  .btn-filtros-movil { display: inline-flex; min-height: 36px; flex: none; }
  .panel-filtros { flex-wrap: wrap; }
  .panel-filtros .campo-buscador { flex: 1 1 0; min-width: 0; }
  .panel-filtros .campo-buscador > label { display: none; }
  .panel-filtros:not(.filtros-abiertos) > :not(.campo-buscador):not(.btn-filtros-movil) { display: none; }
}
.etiqueta-con-ayuda { display: inline-flex; align-items: center; }
.contrato-bloque legend { display: inline-flex; align-items: center; }

/* Fichas por equipo: cobertura en la cabecera y filas compactas. */
.ficha-equipo-cabecera { flex-wrap: wrap; }
.ficha-equipo-cuenta { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ficha-equipo-cuenta + .btn { margin-left: 0; }
.cuenta-chip { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--if-hover); color: var(--if-texto-suave); white-space: nowrap; }
.cuenta-chip.cuenta-ok { background: var(--if-exito-fondo); color: var(--if-exito); }
.cuenta-chip.cuenta-falta { background: var(--if-aviso-fondo); color: var(--if-aviso); }
.integrante-motivo { align-self: flex-start; margin-top: 3px; padding: 1px 7px; border-radius: 4px; background: var(--if-hover); color: var(--if-texto-suave); font-size: 11px; font-weight: 600; }
.btn-quitar-asig { min-width: 30px; justify-content: center; }
.integrante-vigencia summary { width: max-content; }
.contrato-sin-equipo { margin-top: 2px; padding: 12px 16px; border: 1px dashed var(--if-borde-campo); border-radius: 8px; background: var(--if-tarjeta); }
.contrato-sin-equipo h5 { margin: 0; color: var(--if-texto); font-size: 14px; }
.contrato-sin-equipo .integrantes { margin-top: 6px; }
.contrato-equipos .fichas-equipo { margin: 0; }

/* Selector de varias opciones (Faena, Contrato o proyecto, Personas): se ve como un select. */
.panel-filtros .campo-filtro > .etiqueta-filtro { font-size: 12px; font-weight: 500; color: var(--if-texto-suave); }
.selector-multiple { position: relative; width: 100%; }
.selector-multiple-boton { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px 7px 12px;
  background: var(--if-campo); border: 1px solid var(--if-borde-campo); border-radius: 4px; color: var(--if-texto); font: 13px "Segoe UI", sans-serif; text-align: left; cursor: pointer; }
.selector-multiple-boton::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .7; }
.selector-multiple-boton[aria-expanded="true"], .selector-multiple-boton:focus-visible { outline: 2px solid color-mix(in srgb, var(--if-acento) 55%, transparent); border-color: var(--if-acento); }
.selector-multiple-boton.con-eleccion { border-color: var(--if-acento); }
.selector-multiple-resumen { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-multiple-panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: max(100%, 300px); max-width: 92vw; padding: 8px;
  background: var(--if-popover); border: 1px solid var(--if-borde); border-radius: 8px; box-shadow: var(--if-sombra); display: grid; gap: 6px; }
.selector-multiple-buscar { width: 100%; }
.selector-multiple-opciones { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.selector-multiple-opciones .campo-check { padding: 5px 6px; border-radius: 4px; align-items: flex-start; }
.selector-multiple-opciones .campo-check:hover { background: var(--if-hover); }
.selector-multiple-opciones .campo-check input { margin-top: 2px; flex: none; }
.selector-multiple-grupo { margin: 6px 6px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--if-texto-suave); }
.selector-multiple-grupo:first-child { margin-top: 0; }
.selector-multiple-vacio { margin: 6px; color: var(--if-texto-suave); font-size: 12px; }
.selector-multiple-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--if-borde); font-size: 12px; color: var(--if-texto-suave); }