/* Nómina FIRMA Ingeniería — sistema visual
   Mobile-first · sin dependencias externas · tipografía Inter (OFL) servida localmente */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* Marca */
  --azul-50: #eef0fd;
  --azul-100: #dfe3fc;
  --azul-200: #c3cbf8;
  --azul-600: #4457e0;   /* principal · contraste 5.7:1 sobre blanco */
  --azul-700: #3645c2;
  --azul-800: #2b378f;

  /* Neutros */
  --tinta: #1c2033;
  --tinta-2: #4b5168;
  --tinta-3: #6b7188;
  --fondo: #f5f6fb;
  --fondo-2: #eef0f7;
  --superficie: #ffffff;
  --borde: #e5e7f0;
  --borde-fuerte: #d3d7e4;

  /* Tonos de apoyo (fondo / trazo) */
  --verde-bg: #e7f7ee;    --verde: #16874a;
  --ambar-bg: #fff3df;    --ambar: #b25e04;
  --rosa-bg: #fdecef;     --rosa: #c8243f;
  --turquesa-bg: #e1f5f6; --turquesa: #0b7f89;
  --violeta-bg: #f1ecfe;  --violeta: #6a3fd1;

  --radio-s: 8px;
  --radio: 12px;
  --radio-l: 16px;
  --radio-xl: 22px;
  --sombra-s: 0 1px 2px rgba(28, 32, 51, .05);
  --sombra: 0 1px 2px rgba(28, 32, 51, .04), 0 6px 20px rgba(28, 32, 51, .05);
  --sombra-l: 0 12px 40px rgba(28, 32, 51, .14);
  --toque: 44px;
  --ancho-lateral: 268px;
  --fuente: "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; color: var(--tinta); letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 .75rem; }
a { color: var(--azul-600); text-underline-offset: 2px; }
a:hover { color: var(--azul-700); }
small { color: var(--tinta-3); }
.suave { display: block; color: var(--tinta-3); font-size: .875rem; }
.num, .tabular { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--azul-200); outline-offset: 2px; border-radius: 6px; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icono { width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================================
   Estructura: menú lateral + contenido
   ========================================================================== */

.menu-toggle { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

.marca { display: inline-flex; align-items: center; gap: .7rem; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); }
.marca__logo {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, #5a6cf0, var(--azul-700));
  color: #fff; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(68, 87, 224, .35);
}
.marca__texto { display: flex; flex-direction: column; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.15; }
.marca__texto small { font-weight: 500; font-size: .75rem; letter-spacing: 0; color: var(--tinta-3); }
.marca--compacta { gap: .5rem; font-weight: 800; letter-spacing: -.02em; }
.marca--compacta .marca__logo { width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; }

.boton-icono {
  display: inline-grid; place-items: center; width: var(--toque); height: var(--toque);
  border: 0; border-radius: var(--radio); background: transparent; color: var(--tinta-2);
  cursor: pointer;
}
.boton-icono:hover { background: var(--fondo-2); color: var(--tinta); }
.boton-icono .icono { width: 22px; height: 22px; }

.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--azul-100); color: var(--azul-700);
  font-weight: 700;
}
.avatar--pequeno { width: 32px; height: 32px; font-size: .85rem; }

/* Barra superior (solo móvil) */
.barra-movil {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  height: 60px; padding: 0 .5rem 0 .25rem;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

/* Menú lateral */
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: min(var(--ancho-lateral), 86vw);
  display: flex; flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  transform: translateX(-100%);
  transition: transform .22s ease;
}
.menu-toggle:checked ~ .lateral { transform: translateX(0); box-shadow: var(--sombra-l); }

.lateral__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem .75rem 1.1rem 1.25rem;
}
.lateral__nav { flex: 1; overflow-y: auto; padding: .25rem .75rem 1rem; }
.lateral__grupo {
  margin: 1rem .75rem .35rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.lateral__nav .lateral__grupo:first-child { margin-top: .25rem; }
.lateral__enlace {
  display: flex; align-items: center; gap: .75rem;
  min-height: 40px; padding: 0 .75rem; margin-bottom: 1px;
  border-radius: var(--radio);
  color: var(--tinta-2); font-weight: 500; text-decoration: none;
  transition: background .15s, color .15s;
}
.lateral__enlace .icono { color: var(--tinta-3); transition: color .15s; }
.lateral__enlace:hover { background: var(--fondo); color: var(--tinta); }
.lateral__enlace.es-activo { background: var(--azul-50); color: var(--azul-700); font-weight: 650; }
.lateral__enlace.es-activo .icono { color: var(--azul-600); }

.lateral__usuario {
  display: flex; align-items: center; gap: .65rem;
  margin: .75rem; padding: .7rem .5rem .7rem .7rem;
  border: 1px solid var(--borde); border-radius: var(--radio-l);
  background: var(--fondo);
}
.lateral__usuario-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.lateral__usuario-texto strong { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__usuario-texto small { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__usuario form { margin: 0; }

.velo {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(20, 24, 40, .38);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.menu-toggle:checked ~ .velo { opacity: 1; pointer-events: auto; }

/* Contenido */
.contenedor { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

@media (min-width: 1024px) {
  .barra-movil, .lateral__cerrar, .velo { display: none; }
  .lateral { transform: none; width: var(--ancho-lateral); box-shadow: none !important; }
  .con-menu .principal { margin-left: var(--ancho-lateral); }
  .contenedor { padding: 2rem 2.5rem 4rem; }
}

/* ============================================================================
   Componentes
   ========================================================================== */

/* Encabezado de página */
.encabezado {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.encabezado h1 { margin: 0; }
.antetitulo { margin: 0 0 .3rem; color: var(--azul-600); font-weight: 650; font-size: .875rem; }
.encabezado__subtitulo { margin: .35rem 0 0; color: var(--tinta-3); }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }

/* Tarjetas */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.tarjeta__titulo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.tarjeta__titulo h2 { margin: 0; }

.nota {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .85rem; color: var(--azul-800);
  background: var(--azul-50); border: 1px solid var(--azul-100);
  padding: .7rem .9rem; border-radius: var(--radio);
}

/* Mensajes */
.aviso {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .8rem 1rem; margin-bottom: 1rem;
  border-radius: var(--radio); border: 1px solid transparent;
  font-weight: 500;
}
.aviso__icono { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.aviso--ok    { background: var(--verde-bg); color: #0f5c33; border-color: #bfe8cf; }
.aviso--error { background: var(--rosa-bg);  color: #8e1a2e; border-color: #f6c5ce; }
.aviso--aviso { background: var(--ambar-bg); color: #7a4103; border-color: #f6d9a8; }

/* Chips de ícono */
.chip-icono {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 8%, transparent);
}
.chip-icono .icono { width: 22px; height: 22px; }
.chip-icono--azul     { background: var(--azul-50);     color: var(--azul-600); }
.chip-icono--verde    { background: var(--verde-bg);    color: var(--verde); }
.chip-icono--ambar    { background: var(--ambar-bg);    color: var(--ambar); }
.chip-icono--rosa     { background: var(--rosa-bg);     color: var(--rosa); }
.chip-icono--turquesa { background: var(--turquesa-bg); color: var(--turquesa); }
.chip-icono--violeta  { background: var(--violeta-bg);  color: var(--violeta); }

/* Accesos rápidos */
.rejilla-accesos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; margin-bottom: 1.25rem; }
.acceso {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.1rem 1.1rem 1.25rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-l); box-shadow: var(--sombra-s);
  color: var(--tinta); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.acceso:hover { color: var(--tinta); border-color: var(--azul-200); box-shadow: var(--sombra); transform: translateY(-1px); }
.acceso__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.acceso__texto strong { font-weight: 650; }
.acceso__texto span { color: var(--tinta-3); font-size: .85rem; }
.acceso__flecha { width: 18px; height: 18px; color: var(--tinta-3); transition: transform .15s, color .15s; }
.acceso:hover .acceso__flecha { color: var(--azul-600); transform: translateX(3px); }

/* Formularios */
label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; font-size: .85rem; color: var(--tinta-2); }

input, select, textarea {
  font: inherit; font-size: .95rem; color: var(--tinta); width: 100%;
  min-height: var(--toque); padding: .55rem .85rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #9aa0b4; }
input:hover, select:hover, textarea:hover { border-color: #b9bed0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul-600); box-shadow: 0 0 0 4px var(--azul-100); }
textarea { min-height: 5.5rem; resize: vertical; }
select {
  appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7188' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 18px;
}

.formulario { display: flex; flex-direction: column; gap: 1rem; }
.fila { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--toque); padding: 0 1.35rem;
  font: inherit; font-weight: 650; font-size: .95rem; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--azul-600);
  border: 1px solid var(--azul-600); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(68, 87, 224, .25);
  cursor: pointer; transition: background .15s, box-shadow .15s, transform .05s;
}
.boton:hover { color: #fff; background: var(--azul-700); border-color: var(--azul-700); box-shadow: 0 4px 14px rgba(68, 87, 224, .32); }
.boton:active { transform: translateY(1px); }
.boton .icono { width: 18px; height: 18px; }
.boton--secundario { color: var(--tinta); background: var(--superficie); border-color: var(--borde-fuerte); box-shadow: var(--sombra-s); }
.boton--secundario:hover { color: var(--tinta); background: var(--fondo); border-color: #b9bed0; box-shadow: var(--sombra-s); }
.boton--peligro { background: var(--rosa); border-color: var(--rosa); box-shadow: 0 2px 8px rgba(200, 36, 63, .22); }
.boton--peligro:hover { background: #a91d34; border-color: #a91d34; box-shadow: 0 4px 14px rgba(200, 36, 63, .28); }
.boton--pequeno { min-height: 36px; padding: 0 1rem; font-size: .85rem; }
.boton--bloque { width: 100%; }

.acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.acciones .boton { flex: 1 1 auto; }

.filtro { display: flex; gap: .5rem; align-items: center; }
.filtro input { width: auto; }

.enlace { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--toque); font-weight: 600; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* Etiquetas de estado */
.etiqueta {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .25rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.etiqueta--sin_registro { background: var(--fondo-2);  color: #555b72; }
.etiqueta--en_curso     { background: var(--azul-50);   color: var(--azul-700); }
.etiqueta--completo     { background: var(--verde-bg);  color: var(--verde); }
.etiqueta--con_novedad  { background: var(--ambar-bg);  color: var(--ambar); white-space: normal; }

/* Tablas */
.tabla-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla th, .tabla td { padding: .7rem .9rem; text-align: left; white-space: nowrap; }
.tabla th {
  background: #f8f9fc; color: var(--tinta-3);
  font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--borde);
}
.tabla td { border-bottom: 1px solid var(--borde); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #fafbfe; }
.tabla .num { text-align: right; }

/* Etiquetas genéricas */
.etiqueta--ok      { background: var(--verde-bg); color: var(--verde); }
.etiqueta--gris    { background: var(--fondo-2);  color: #555b72; }
.etiqueta--aviso   { background: var(--ambar-bg); color: var(--ambar); }
.etiqueta--peligro { background: var(--rosa-bg);  color: var(--rosa); }
.etiqueta--azul    { background: var(--azul-50);  color: var(--azul-700); }
.chip-icono--gris  { background: var(--fondo-2);  color: var(--tinta-3); }
.etiqueta--violeta { background: var(--violeta-bg); color: var(--violeta); }
.avatar--apagado   { background: var(--fondo-2); color: var(--tinta-3); }
.suave-inline      { color: var(--tinta-3); font-weight: 500; font-size: .85em; }
.registro__etiquetas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.registro__error { margin-top: .85rem; }
.registro__error .aviso { margin-bottom: 0; }
.registro__editar + .registro__editar { margin-top: .35rem; }
.tarjeta--angosta { max-width: 560px; }
.tarjeta--aviso { background: #fffaf0; border-color: #f6d9a8; }
.nota--aviso { color: #7a4103; background: var(--ambar-bg); border-color: #f6d9a8; margin-top: .6rem; }
.paginador { display: flex; gap: .5rem; }
.lista-compacta { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .9rem; }

/* Jornada */
.semana { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.semana__dia {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .6rem .3rem; border-radius: var(--radio);
  background: var(--azul-50); color: var(--azul-800); border: 1px solid var(--azul-100);
}
.semana__dia span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.semana__dia strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.semana__dia--libre { background: var(--fondo); color: var(--tinta-3); border-color: var(--borde); }
.semana__dia--festivo:not(.semana__dia--libre) { background: var(--ambar-bg); color: var(--ambar); border-color: #f6d9a8; }
@media (min-width: 640px) { .semana { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.resumen-reglas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0 0 1rem; }
.resumen-reglas div { padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.resumen-reglas dt { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 650; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.resumen-reglas dt .icono { width: 16px; height: 16px; }
.resumen-reglas dd { margin: .2rem 0 0; font-weight: 600; }
@media (min-width: 640px) { .resumen-reglas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rejilla-dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .5rem; }
@media (min-width: 640px) { .rejilla-dias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Festivos */
.lista-festivos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.festivo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .9rem;
  padding: .6rem .75rem; border: 1px solid var(--borde); border-radius: var(--radio);
}
.festivo__fecha {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radio); background: var(--ambar-bg); color: var(--ambar); line-height: 1;
}
.festivo__fecha strong { font-size: 1.15rem; }
.festivo__fecha small { color: inherit; font-weight: 600; text-transform: uppercase; font-size: .66rem; margin-top: .15rem; }
.festivo__datos { display: flex; flex-direction: column; min-width: 0; }
.festivo__eliminar { grid-column: 1 / -1; }
.festivo__eliminar summary { cursor: pointer; color: var(--rosa); font-size: .85rem; font-weight: 600; list-style: none; }
.festivo__eliminar summary::-webkit-details-marker { display: none; }
.festivo__eliminar form { margin-top: .5rem; }
@media (min-width: 640px) {
  .festivo { grid-template-columns: auto minmax(0, 1fr) auto; }
  .festivo__eliminar { grid-column: auto; text-align: right; }
  .festivo__eliminar[open] { grid-column: 1 / -1; text-align: left; }
}

/* Formularios en línea (un campo + botón) */
.formulario-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.formulario-linea > label { flex: 1 1 160px; }
.formulario-linea > .crece { flex: 3 1 220px; }
.formulario-linea > .boton { flex: 0 0 auto; }

/* Listas de registros (obras, empleados) */
.lista-registros { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.lista-registros > .tarjeta { margin: 0; }
.registro__cabecera { display: flex; align-items: center; gap: .85rem; }
.registro__titulo { flex: 1; min-width: 0; }
.registro__titulo h3 { margin: 0; font-size: 1rem; }
.registro--inactivo { background: #fbfbfd; }
.registro--inactivo h3 { color: var(--tinta-2); }
.registro__editar { margin-top: .85rem; border-top: 1px solid var(--borde); padding-top: .6rem; }
.registro__editar summary {
  display: inline-flex; align-items: center; min-height: 36px; cursor: pointer;
  color: var(--azul-600); font-weight: 600; font-size: .9rem; list-style: none;
}
.registro__editar summary::-webkit-details-marker { display: none; }
.registro__editar summary::after { content: "▾"; margin-left: .35rem; font-size: .8rem; }
.registro__editar[open] summary::after { content: "▴"; }
.registro__editar form { margin: .5rem 0 .25rem; }

.vacio {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2.5rem 1rem; text-align: center; color: var(--tinta-3);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-l); background: var(--superficie);
}
.vacio .icono { width: 32px; height: 32px; }
.vacio p { margin: 0; }

/* Filtros de listados */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: 1rem 1.1rem; }
.filtros > label { flex: 1 1 150px; }
.filtros > .crece { flex: 3 1 240px; }
.filtros__acciones { display: flex; align-items: center; gap: .75rem; }
.resultado-conteo { margin: 0 0 .6rem .2rem; color: var(--tinta-3); font-size: .85rem; }

/* Lista de personas */
.lista-personas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.persona {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem .85rem;
  padding: .8rem 1rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-s);
  color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.persona:hover { color: var(--tinta); border-color: var(--azul-200); box-shadow: var(--sombra); }
.persona .avatar { grid-row: span 2; font-size: .85rem; }
.persona__datos { display: flex; flex-direction: column; min-width: 0; }
.persona__datos strong { font-weight: 650; overflow-wrap: anywhere; }
.persona__datos span { color: var(--tinta-3); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona__obra { grid-column: 2; display: flex; align-items: center; gap: .35rem; min-width: 0; color: var(--tinta-2); font-size: .85rem; }
.persona__obra .icono { width: 16px; height: 16px; color: var(--tinta-3); }
.persona__obra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona .etiqueta { grid-column: 3; grid-row: 1; justify-self: end; }
.persona__flecha { display: none; width: 18px; height: 18px; color: var(--tinta-3); }
.persona--inactiva { background: #fbfbfd; }
.persona--inactiva .avatar { background: var(--fondo-2); color: var(--tinta-3); }
@media (min-width: 900px) {
  .persona { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.2fr) auto auto; }
  .persona .avatar { grid-row: auto; }
  .persona__obra { grid-column: auto; }
  .persona .etiqueta { grid-column: auto; grid-row: auto; }
  .persona__flecha { display: block; }
}

/* Formularios amplios por secciones */
.requerido { color: var(--rosa); }
.formulario-amplio { gap: 0; }
.seccion-formulario { border: 0; margin: 0; padding: 1.1rem 0; border-bottom: 1px solid var(--borde); min-width: 0; }
.seccion-formulario:first-of-type { padding-top: .25rem; }
.seccion-formulario legend {
  display: flex; align-items: center; gap: .6rem; float: left; width: 100%;
  margin-bottom: .85rem; font-weight: 700; font-size: .95rem; color: var(--tinta);
}
.seccion-formulario legend + * { clear: both; }
.seccion-formulario--destacada { background: var(--azul-50); border: 1px solid var(--azul-100); border-radius: var(--radio); padding: 1rem; margin-bottom: .5rem; }
.rejilla-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem 1rem; }
.rejilla-campos small { font-weight: 400; }
@media (min-width: 640px) { .rejilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acciones--pie { padding-top: 1.1rem; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* Ficha del empleado */
.migas { margin: 0 0 .75rem; font-size: .9rem; }
.migas a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; font-weight: 600; }
.migas .icono { width: 16px; height: 16px; }
.perfil { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem 1rem; }
.perfil h1 { font-size: 1.35rem; margin: 0; }
.perfil__datos p { margin: .15rem 0 0; }
.perfil > .etiqueta { grid-column: 1 / -1; justify-self: start; }
.avatar--grande { width: 60px; height: 60px; font-size: 1.25rem; }
.perfil__resumen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: .25rem 0 0; }
.perfil__resumen div { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: .55rem .75rem; min-width: 0; }
.perfil__resumen dt { font-size: .72rem; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.perfil__resumen dd { margin: .1rem 0 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil__resumen .perfil__horario { grid-column: 1 / -1; }
.perfil__resumen .perfil__horario dd { white-space: normal; }
@media (min-width: 640px) {
  .perfil { grid-template-columns: auto minmax(0, 1fr) auto; }
  .perfil > .etiqueta { grid-column: auto; justify-self: end; }
  .perfil__resumen { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); }
  .perfil__resumen .perfil__horario { grid-column: auto; }
}
.ficha-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.ficha-columnas > .tarjeta, .ficha-lateral > .tarjeta { margin: 0; }
.ficha-lateral { display: grid; gap: 1rem; }
@media (min-width: 1200px) { .ficha-columnas { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }

.linea-tiempo { list-style: none; margin: 1.1rem 0 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--borde); }
.linea-tiempo li { position: relative; padding: 0 0 .9rem .35rem; display: flex; flex-direction: column; }
.linea-tiempo li::before {
  content: ""; position: absolute; left: -1.53rem; top: .3rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde-fuerte);
}
.linea-tiempo li.es-vigente::before { background: var(--azul-600); border-color: var(--azul-600); box-shadow: 0 0 0 4px var(--azul-100); }
.linea-tiempo li span { color: var(--tinta-3); font-size: .85rem; }

.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.historial > li { padding-bottom: .85rem; border-bottom: 1px solid var(--borde); }
.historial > li:last-child { border-bottom: 0; padding-bottom: 0; }
.historial__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.historial p { margin: .35rem 0 0; }
.historial__cambios { margin: .45rem 0 0; padding-left: 1rem; font-size: .85rem; color: var(--tinta-2); }
.historial__cambios li { overflow-wrap: anywhere; }
.historial__cambios del { color: var(--rosa); text-decoration: line-through; }
.historial__cambios ins { color: var(--verde); text-decoration: none; font-weight: 600; }

/* ============================================================================
   Pantalla "Registro del día"
   ========================================================================== */

.lista-empleados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.lista-empleados > *, .rejilla-accesos > * { min-width: 0; }
.lista-empleados .tarjeta { margin: 0; }
.empleado { container-type: inline-size; }
.empleado__cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .8rem; margin-bottom: 1rem; }
.empleado__identidad { flex: 1 1 150px; min-width: 0; }
.empleado__cabecera .etiqueta { margin-left: auto; }
.empleado__nombre { display: block; font-weight: 650; }

.turno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: end; }
.turno input { min-width: 0; }
.turno .boton { grid-column: 1 / -1; }

/* Horario, trabajadas, ordinarias y extra. El horario en 12 h (M2) es largo: va en su propia fila
   hasta que la tarjeta tiene ancho para las cuatro celdas. */
.horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.horas div { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: .55rem .75rem; min-width: 0; }
.horas__horario, .horas__extra { grid-column: 1 / -1; }
.horas .horas__horario dd { white-space: normal; }
.sin-corte { white-space: nowrap; }
.horas dt { font-size: .72rem; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.horas dd { margin: .1rem 0 0; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.horas .es-destacado { background: var(--azul-50); border-color: var(--azul-100); }
.horas .es-destacado dd { color: var(--azul-700); }

.pie-tarjeta { display: flex; justify-content: flex-end; margin-top: .5rem; }

.filtro-dia { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filtro-dia select { width: auto; min-width: 180px; }
.navegador-dia { display: flex; align-items: center; gap: .25rem; }
.navegador-dia input { width: auto; }
.navegador-dia .boton-icono { font-size: 1.5rem; text-decoration: none; }
.boton-icono--inactivo { opacity: .3; cursor: default; }
.boton-icono--inactivo:hover { background: transparent; }

.resumen-dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.resumen-dia__item {
  display: flex; align-items: baseline; gap: .5rem; padding: .7rem .9rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  border-left: 4px solid var(--borde-fuerte);
}
.resumen-dia__item strong { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.resumen-dia__item span { color: var(--tinta-3); font-size: .85rem; }
.resumen-dia__item--azul { border-left-color: var(--azul-600); }
.resumen-dia__item--verde { border-left-color: var(--verde); }
.resumen-dia__item--ambar { border-left-color: var(--ambar); }
@media (min-width: 640px) { .resumen-dia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.buscador-dia { display: block; margin-bottom: .85rem; }
.aviso-linea { display: flex; gap: .45rem; align-items: center; margin: -.25rem 0 .75rem; font-size: .85rem; color: var(--ambar); }
.aviso-linea .icono { width: 16px; height: 16px; }
.desglose-extra { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; color: var(--tinta-2); }
.desglose-extra .etiqueta::before { display: none; }
.pista { margin: .5rem 0 0; color: var(--tinta-3); font-size: .82rem; }
.vacio--oculto, [hidden] { display: none !important; }
.desglose-extra--suelto { margin: -.25rem 0 1rem .25rem; }
.tarjeta--peligro { border-color: #f6c5ce; }
.tarjeta--peligro h2 { color: var(--rosa); }

/* Novedades */
.lista-novedades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.lista-novedades > .tarjeta { margin: 0; padding: 1rem 1.1rem; }
.novedad__cabecera { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.novedad__cuerpo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.novedad__cuerpo > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.novedad__periodo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin-left: auto; }
.novedad__periodo span { color: var(--tinta-3); font-size: .85rem; }
.novedad__observacion { margin: .6rem 0 0; padding: .5rem .7rem; background: var(--fondo); border-radius: var(--radio-s); font-size: .88rem; color: var(--tinta-2); overflow-wrap: anywhere; }
.novedad__pie { margin: .5rem 0 0; font-size: .75rem; color: var(--tinta-3); }
@media (min-width: 1100px) { .lista-novedades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.formulario-novedad { max-width: 760px; }
.opciones-tipo { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { flex-direction: row; align-items: center; gap: .5rem; cursor: pointer; font-weight: 500; color: var(--tinta);
  padding: 0 .9rem; min-height: var(--toque); border: 1px solid var(--borde-fuerte); border-radius: 999px; background: var(--superficie); }
.opcion input { width: auto; min-height: 0; accent-color: var(--azul-600); }
.opcion:has(input:checked) { border-color: var(--azul-600); background: var(--azul-50); color: var(--azul-800); }

/* M4a · Horario de cada día */
.rejilla-horarios { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.horario-dia {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr) 4.5rem;
  align-items: center; gap: .5rem;
  padding: .45rem .6rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio);
}
.horario-dia__nombre { font-weight: 600; }
.horario-dia label { margin: 0; }
.horario-dia input { min-width: 0; }
.horario-dia__total { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--tinta-3); text-align: right; font-size: .85rem; }
.horario-dia__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 560px) {
  /* Una hora por fila: en 2 columnas el campo corta el texto «07:00 a. m.» */
  .horario-dia { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .horario-dia__nombre { grid-column: 1 / -1; }
  .horario-dia label { display: contents; }
  .horario-dia__etiqueta { position: static; width: auto; height: auto; clip-path: none;
    font-size: .8rem; font-weight: 600; color: var(--tinta-3); align-self: center; }
  .horario-dia__total { grid-column: 1 / -1; text-align: left; }
}

/* M1 · Registro masivo */
.atajos-masivo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .85rem; }
.atajos-masivo .enlace { background: none; border: 0; padding: 0 .25rem; font: inherit; font-weight: 600; color: var(--azul-600); cursor: pointer; }
.marca-masivo {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--toque); height: var(--toque); margin: -.35rem -.35rem -.35rem -.6rem; cursor: pointer;
}
.marca-masivo input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--azul-600); cursor: pointer; }
.empleado:has(.marca-masivo input:checked) { border-color: var(--azul-200); box-shadow: 0 0 0 3px var(--azul-50), var(--sombra); }
.lista-empleados--con-barra { margin-bottom: 10rem; }

.barra-masiva {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem .75rem;
  margin: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -8px 30px rgba(28, 32, 51, .12);
}
.barra-masiva__conteo { margin: 0; font-weight: 650; min-width: 0; }
.barra-masiva__hora { display: flex; flex-direction: row; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.barra-masiva__hora input { width: auto; }
.barra-masiva__botones { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.barra-masiva__botones .boton { padding: 0 .75rem; }
@media (min-width: 720px) {
  .barra-masiva { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: 1.5rem; padding-right: 1.5rem; }
  .barra-masiva__botones { grid-column: auto; display: flex; }
}
@media (min-width: 1024px) {
  .con-menu .barra-masiva { left: var(--ancho-lateral); padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* La distribución interna depende del ancho de la tarjeta, no de la pantalla */
@container (min-width: 440px) {
  .horas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .horas__extra { grid-column: auto; }
}
@container (min-width: 700px) {
  .horas { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); }
  .horas__horario { grid-column: auto; }
}

/* ============================================================================
   Acceso (login) y páginas de error
   ========================================================================== */

.pagina-acceso { min-height: 100vh; display: grid; }
.pagina-acceso .contenedor { max-width: none; padding: 0; }
.acceso-layout { display: grid; min-height: 100vh; }

.acceso-presentacion {
  position: relative; overflow: hidden;
  padding: 1.75rem 1.25rem 2rem;
  background:
    radial-gradient(1200px 500px at -10% -20%, #dfe3fc 0%, transparent 60%),
    radial-gradient(700px 400px at 110% 110%, #efe8fe 0%, transparent 60%),
    linear-gradient(180deg, #f7f8fe 0%, #f1f3fb 100%);
}
.acceso-presentacion h1 { font-size: clamp(1.7rem, 5vw, 2.9rem); line-height: 1.08; letter-spacing: -.035em; margin: 2rem 0 .75rem; max-width: 16ch; }
.acceso-presentacion .lema { font-size: 1.05rem; color: var(--tinta-2); max-width: 38ch; }
.acceso-beneficios { display: none; list-style: none; padding: 0; margin: 2.25rem 0 0; gap: 1.25rem 1.5rem; }
.acceso-beneficios li { display: flex; gap: .85rem; align-items: flex-start; }
.acceso-beneficios strong { display: block; font-weight: 650; }
.acceso-beneficios span { color: var(--tinta-3); font-size: .875rem; }

.acceso-formulario { display: flex; align-items: flex-start; justify-content: center; padding: 1.25rem 1rem 3rem; }
.tarjeta-acceso {
  width: 100%; max-width: 420px; margin: -1.25rem 0 0;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radio-xl); box-shadow: var(--sombra-l); border-color: transparent;
}
.tarjeta-acceso h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem; }
.tarjeta-acceso .formulario { margin-top: 1.25rem; }
.tarjeta-acceso .boton { margin-top: .25rem; }
.tarjeta-acceso__pie { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 0; color: var(--tinta-3); font-size: .8rem; }
.tarjeta-acceso__pie .icono { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .acceso-layout { grid-template-columns: 1.15fr 1fr; }
  .acceso-presentacion { display: flex; flex-direction: column; padding: 2.5rem 3.5rem; }
  .acceso-presentacion h1 { margin-top: auto; }
  .acceso-beneficios { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: auto; }
  .acceso-formulario { align-items: center; padding: 2rem; background: var(--superficie); }
  .tarjeta-acceso { margin: 0; box-shadow: none; padding: 1rem; }
}

.error { max-width: 520px; margin: 3rem auto; text-align: center; padding: 2.25rem 1.5rem; }
.error .chip-icono { margin: 0 auto 1.25rem; width: 56px; height: 56px; }
.error .chip-icono .icono { width: 28px; height: 28px; }
.error__codigo { margin: 0 0 .35rem; color: var(--tinta-3); font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.error__mensaje { color: var(--tinta-2); font-size: 1.02rem; }
.error .acciones { justify-content: center; margin-top: 1.25rem; }
.error .acciones .boton { flex: 0 1 auto; }

/* ============================================================================
   Pantallas medianas y grandes
   ========================================================================== */

@media (min-width: 640px) {
  body { font-size: 15.5px; }
  h1 { font-size: 1.85rem; }
  .fila { grid-template-columns: 1fr 1fr; }
  .acciones .boton { flex: 0 0 auto; }
  .rejilla-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .turno .boton { grid-column: auto; }
  .tarjeta { padding: 1.5rem; }
}

@media (min-width: 1280px) {
  .rejilla-accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
  .lista-empleados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Pendientes (T24) */
.lista-pendientes { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.lista-pendientes > li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem .85rem;
  padding: .75rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie);
}
.pendiente__datos { display: flex; flex-direction: column; min-width: 0; }
.pendiente__datos strong { font-weight: 650; overflow-wrap: anywhere; }
.pendiente__datos span { font-size: .82rem; }
.pendiente__acciones { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
@media (min-width: 760px) {
  .lista-pendientes > li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pendiente__acciones { grid-column: auto; justify-content: flex-end; }
}

/* Auditoría (T26) */
.historial--auditoria > li { padding-bottom: .9rem; }
.historial--auditoria .historial__cabecera { flex-wrap: wrap; gap: .35rem .6rem; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 .5rem; }