/* =====================================================================
   Sistema de diseño Grupo Brima-Proseg — Naranja / Gris / Blanco
   Un solo archivo para TODO el sistema. No mezclar otros colores fuera
   de aqui salvo las 2 excepciones documentadas abajo.

   Layout: navbar superior (sin sidebar) + franja de KPIs opcional por
   pagina + tarjetas con acento naranja. Iconos: Bootstrap Icons (se
   cargan en layout_top.php), nunca emojis -- se ven inconsistentes
   entre sistemas operativos.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bp-radio: 0.55rem;
  --bp-sombra: 0 1px 2px rgba(36,36,36,0.04);

  /* Naranja: color de accion (botones primarios, marca, estados "activo/enviado") */
  --bp-naranja:        #E8891F;
  --bp-naranja-oscuro:  #B85E12;
  --bp-naranja-suave:   #FBE9D3;

  /* Gris: estructura (navbar, texto, bordes, fondos neutros) */
  --bp-gris-900:  #242424; /* texto principal */
  --bp-gris-700:  #57575B; /* texto secundario fuerte */
  --bp-gris-500:  #84848A; /* texto muted / labels */
  --bp-gris-300:  #E7E7EA; /* bordes */
  --bp-gris-200:  #F0F0F2; /* iconos neutros, pills */
  --bp-gris-100:  #F7F7F8; /* fondo de pagina, zebra */

  /* Blanco: fondo de tarjetas/navbar */
  --bp-blanco: #FFFFFF;

  /* Excepcion 1: rojo SOLO para errores/validacion (estandar de UX,
     no es color de marca). */
  --bp-error: #B23A2E;
}

* { box-sizing: border-box; }

/* max-width evita que la pagina se ensanche si algo (un popover
   posicionado por JS con position:fixed, un modal, etc.) calcula un
   "left" mas alla del viewport en movil -- sin esto, esos elementos
   pueden dejar toda la pantalla con scroll horizontal aunque nunca se
   vean, que es justo lo que le pasaba a Pepe en captura.php. */
html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  background-color: var(--bp-gris-100);
  color: var(--bp-gris-900);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Tarjetas ---------- */
.card-brima {
  background-color: var(--bp-blanco);
  border: 1px solid var(--bp-gris-300);
  border-radius: var(--bp-radio);
  box-shadow: var(--bp-sombra);
  padding: 1.25rem;
}
@media (min-width: 768px) {
  .card-brima { padding: 1.5rem; }
}

.card-accento {
  background-color: var(--bp-blanco);
  border: 1px solid var(--bp-gris-300);
  border-left: 3px solid var(--bp-naranja);
  border-radius: var(--bp-radio);
  box-shadow: var(--bp-sombra);
  padding: 1.25rem 1.4rem;
}
.card-accento .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.card-accento h3 {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-accento h3 i { color: var(--bp-naranja); }

/* =====================================================================
   Navbar superior (layout_top.php) -- sin sidebar
   ===================================================================== */
.navbar-top {
  background: var(--bp-blanco);
  border-bottom: 1px solid var(--bp-gris-300);
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.navbar-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.navbar-top .brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--bp-gris-900);
  text-decoration: none;
}
.navbar-top .brand .shield {
  width: 32px; height: 32px;
  border-radius: 0.45rem;
  background: var(--bp-naranja);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.navbar-top .brand .orange { color: var(--bp-naranja); }

/* Boton hamburguesa: solo visible en movil (ver media query abajo) */
.navbar-toggler-brima {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--bp-gris-100);
  border: 1px solid var(--bp-gris-300);
  border-radius: 0.45rem;
  color: var(--bp-gris-700);
  font-size: 1.15rem;
}
.navbar-toggler-brima:hover { background: var(--bp-gris-200); }

/* Contenedor colapsable: nav + cuenta. En escritorio siempre visible en
   linea; en movil, en vez de empujar el contenido de abajo, se
   despliega FLOTANDO encima (position:absolute) con una animacion
   corta de aparecer/desaparecer -- se queda en el DOM siempre (para
   poder animarlo con opacity/transform) y se oculta con
   opacity/visibility, no con display:none. */
.navbar-top-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1030;
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: var(--bp-blanco);
  border: 1px solid var(--bp-gris-300);
  border-top: none;
  border-radius: 0 0 0.65rem 0.65rem;
  box-shadow: 0 12px 28px rgba(36, 36, 36, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.navbar-top-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.navbar-top-menu nav { display: flex; flex-direction: column; gap: 0.2rem; }
.navbar-top nav a {
  color: var(--bp-gris-700);
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.navbar-top nav a i { font-size: 0.95rem; }
.navbar-top nav a.active { color: var(--bp-naranja-oscuro); background: var(--bp-naranja-suave); }
.navbar-top nav a:not(.active):hover { background: var(--bp-gris-200); }

.navbar-top .cuenta { justify-content: space-between; }

@media (min-width: 768px) {
  .navbar-top-row { width: auto; }
  .navbar-toggler-brima { display: none; }
  .navbar-top-menu {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    width: auto;
    margin-left: 1.5rem;
    /* en escritorio el menu vuelve a ser parte normal del renglon, no
       un dropdown flotante -- se resetea todo lo que le pusimos para
       la version movil. */
    position: static;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .navbar-top-menu nav { flex-direction: row; gap: 0.2rem; }
}

/* ---------- Franja de KPIs (opcional, la usa cada pagina si aplica) ---------- */
.kpi-strip {
  background: var(--bp-blanco);
  border-bottom: 1px solid var(--bp-gris-300);
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.kpi-strip .titulo {
  padding-right: 1.25rem;
  border-right: 1px solid var(--bp-gris-300);
  margin-right: 0.25rem;
}
.kpi-strip .titulo h2 { font-size: 1.05rem; margin: 0; }
.kpi-strip .titulo p { margin: 0; color: var(--bp-gris-500); font-size: 0.78rem; }

.kpi-grid { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.kpi-mini { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.kpi-mini .icon {
  width: 36px; height: 36px;
  border-radius: 0.55rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.kpi-mini .icon.n { background: var(--bp-naranja-suave); color: var(--bp-naranja-oscuro); }
.kpi-mini .icon.g { background: var(--bp-gris-200); color: var(--bp-gris-700); }
.kpi-mini .icon.r { background: #F5D9D6; color: var(--bp-error, #B23A2E); }
.kpi-mini .lbl {
  font-size: 0.68rem; color: var(--bp-gris-500); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-mini .num { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }

/* ---------- Móvil: KPIs en columna/cuadrícula pareja (navbar se resuelve arriba con el boton hamburguesa) ---------- */
@media (max-width: 767.98px) {
  .navbar-top { padding: 0.75rem 1rem; }

  .kpi-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
  }
  .kpi-strip .titulo {
    border-right: none;
    border-bottom: 1px solid var(--bp-gris-300);
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 0.75rem;
  }
  .kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 0.75rem;
  }
  /* En movil, si una etiqueta no cabe (ej. "Personal pendiente"), que
     baje a una segunda linea en vez de cortarse con "..." -- Pepe
     encontro un caso en revision.php donde el texto se perdia. */
  .kpi-mini .lbl { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
}

/* ---------- Graficas del dashboard -- cada una en su propia card ---------- */
.titulo-seccion {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.titulo-seccion i { color: var(--bp-naranja); }
.grafica-caja { min-width: 0; }
.grafica-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bp-gris-700);
  margin-bottom: 0.5rem;
}
.grafica-caja canvas { max-height: 260px; }
.nota-sin-filtro {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--bp-gris-500, #8A8A8A);
}

/* Cards de "Diagnostico" y "Analisis detallado" -- ninguno se genera
   solo, Pepe le pica a su boton (ver ajax_diagnostico_dashboard.php y
   ajax_analisis_detallado_dashboard.php). */
.nota-caja {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--bp-gris-700);
}
.analisis-detallado-resultado,
.diagnostico-resultado {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--bp-gris-300);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bp-gris-900);
  white-space: pre-line;
}

/* Veredicto del diagnostico -- mismos colores que ya usa el resto de la
   app para "bien"/"mal" (ver COLOR_VERDE/COLOR_NARANJA/COLOR_ROJO en
   dashboard.php), "en riesgo" en medio con naranja. */
.badge-diagnostico {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.badge-diagnostico--sano      { background-color: var(--bp-verde, #3C8A5B); }
.badge-diagnostico--en_riesgo { background-color: var(--bp-naranja); }
.badge-diagnostico--critico   { background-color: var(--bp-error, #B23A2E); }
.diagnostico-sugerencias {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}
.diagnostico-sugerencias li { margin-bottom: 0.25rem; }

/* Filtros de las graficas -- se auto-envian al cambiar cualquier
   select (ver onchange="this.form.submit()" en dashboard.php), no
   hace falta un boton "Aplicar" aparte. */
.filtros-grafica {
  background-color: var(--bp-blanco);
  border: 1px solid var(--bp-gris-300);
  border-radius: var(--bp-radio);
  padding: 0.85rem 1rem;
}
.filtros-grafica-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.6fr 1fr 1fr auto;
  gap: 0.85rem;
  align-items: end;
}
.filtros-grafica-grid label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bp-gris-700);
  margin-bottom: 0.25rem;
}
.filtros-grafica-grid select,
.filtros-grafica-grid input[type="date"] {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  border: 1px solid var(--bp-gris-300);
  border-radius: 0.4rem;
  background-color: var(--bp-blanco);
  color: var(--bp-gris-800, #333);
}
.filtros-grafica-limpiar { display: flex; }
.btn-limpiar-filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--bp-gris-700);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.2rem;
}
.btn-limpiar-filtro:hover { color: var(--bp-error); }
@media (max-width: 1199.98px) {
  .filtros-grafica-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
  .filtros-grafica-grid { grid-template-columns: 1fr; }
}

/* Boton "Filtros" que despliega el filtro en movil -- en escritorio no
   se ve (el filtro ya esta abierto siempre), en movil arranca cerrado
   salvo que ya haya un filtro puesto (ver dashboard.php, clase
   "abierto" de entrada si $hayFiltrosActivos). */
.btn-filtros-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bp-gris-800, #333);
}
.btn-filtros-toggle i.bi-funnel { color: var(--bp-naranja); margin-right: 0.35rem; }
.btn-filtros-toggle i.bi-chevron-down { transition: transform 0.15s ease; color: var(--bp-gris-500); }
.filtros-grafica.abierto .btn-filtros-toggle i.bi-chevron-down { transform: rotate(180deg); }
.punto-filtro-activo {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bp-naranja);
  margin-left: 0.35rem;
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  .btn-filtros-toggle { display: flex; }
  /* Flota ENCIMA del contenido de abajo (las graficas), no lo empuja --
     por eso .filtros-grafica es el ancla (position: relative) y el
     grid se vuelve position: absolute cuando esta abierto. */
  .filtros-grafica { position: relative; }
  .filtros-grafica-grid {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--bp-blanco);
    border: 1px solid var(--bp-gris-300);
    border-radius: var(--bp-radio);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
  }
  .filtros-grafica.abierto .filtros-grafica-grid { display: grid; }
  /* El bloque completo (boton + panel) queda por encima del fondo
     oscuro -- .filtros-grafica ya tiene su propio fondo blanco (ver
     arriba), asi que nomas con el z-index correcto alcanza, no hace
     falta pintarle nada de fondo aparte al boton. */
  .filtros-grafica.abierto { position: relative; z-index: 21; }
  /* Fondo semitransparente atras de TODO -- es un <div> real y
     SEPARADO (#filtros-backdrop en dashboard.php), no un
     pseudo-elemento metido dentro de .filtros-grafica: si viviera
     adentro, su color se mete en la misma capa de pintado que el
     fondo blanco del panel y se ve como que el panel se puso gris. */
  .filtros-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 20;
  }
  .filtros-backdrop.visible { display: block; }
}
.grafica-resumen-ia i { color: var(--bp-naranja); margin-right: 0.15rem; }

/* ---------- Pills / badges de estado ---------- */
.pill {
  background: var(--bp-gris-200);
  color: var(--bp-gris-700);
  border-radius: 1rem;
  padding: 0.22rem 0.7rem;
  font-size: 0.73rem;
  font-weight: 600;
  display: inline-block;
}
.pill-n { background: var(--bp-naranja-suave); color: var(--bp-naranja-oscuro); }

.app-content { padding: 1.25rem; }
@media (min-width: 768px) { .app-content { padding: 1.5rem; } }

/* ---------- Botones ---------- */
.btn-brima {
  background-color: var(--bp-naranja);
  border-color: var(--bp-naranja);
  color: #fff;
}
.btn-brima:hover,
.btn-brima:focus {
  background-color: var(--bp-naranja-oscuro);
  border-color: var(--bp-naranja-oscuro);
  color: #fff;
}

.btn-outline-brima {
  border-color: var(--bp-naranja);
  color: var(--bp-naranja);
  background-color: transparent;
}
.btn-outline-brima:hover,
.btn-outline-brima:focus {
  background-color: var(--bp-naranja);
  border-color: var(--bp-naranja);
  color: #fff;
}

.btn-ver {
  background: var(--bp-naranja);
  color: #fff;
  border: none;
  border-radius: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}
.btn-ver:hover { background: var(--bp-naranja-oscuro); color: #fff; }
.btn-ver:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ver:disabled:hover { background: var(--bp-naranja); }
.btn-ver-sm { padding: 0.3rem 0.6rem; font-size: 0.72rem; }

.table thead th {
  background-color: var(--bp-gris-100);
  color: var(--bp-gris-900);
  border-bottom: 2px solid var(--bp-naranja);
}

/* ---------- Utilidades de marca ---------- */
.bg-brima-primario { background-color: var(--bp-naranja); color: #fff; }
.text-brima-primario { color: var(--bp-naranja); }
.bg-brima-gris { background-color: var(--bp-gris-500); color: #fff; }

/* ---------- Estados de captura (borrador = gris, enviada = naranja) ---------- */
.badge-estado-borrador { background-color: var(--bp-gris-500); color: #fff; }
.badge-estado-enviada  { background-color: var(--bp-naranja);  color: #fff; }

/* ---------- Nómina: insignia de "Estatus de periodo" por empleado y
   celdas de conteo de incidencias con el color del catálogo
   (Pepe, 2026-09-25). ---------- */
/* ALTA es el caso normal / la mayoria de las filas -- no lleva insignia
   (Pepe, 2026-09-25: "se ve encimado" / "mucho espacio desperdiciado"),
   nomas texto discreto. Las insignias de color se reservan para lo que
   de verdad hay que voltear a ver: alta nueva, baja, cambio. */
.texto-estatus-nomina-alta {
  font-size: 0.72rem;
  color: var(--bp-gris-500);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-nomina {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}
.badge-nomina-alta-nueva { background-color: var(--bp-naranja); }
.badge-nomina-baja       { background-color: var(--bp-error, #B23A2E); }
.badge-nomina-cambio     { background-color: var(--bp-naranja-oscuro); }
.celda-estatus-nomina { max-width: 11rem; }
.detalle-estatus-nomina {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--bp-gris-500);
}
.celda-incidencia-nomina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.25rem;
  border-radius: 0.35rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
}

/* ---------- Nómina: barra de filtros (Pepe, 2026-09-25) ---------- */
.filtros-nomina-card { margin-bottom: 1rem; }
.filtros-nomina-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.filtro-item { display: flex; flex-direction: column; gap: 0.3rem; min-width: 9rem; }
.filtro-item-texto { flex: 1 1 14rem; }
.filtro-item label {
  font-size: 0.68rem;
  color: var(--bp-gris-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.filtro-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.15rem; }
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--bp-gris-700);
  white-space: nowrap;
}
.filtro-item-limpiar { justify-content: flex-end; }

/* Fila de empleado en BAJA: ya NO se pinta el fondo -- Pepe pidio
   quitar los colores de fondo (2026-09-23) y dejar blanco. La
   insignia roja "BAJA" junto al nombre se queda como unico indicador.
   (Nota: esto reemplaza la regla anterior que pintaba la fila de rojo
   siguiendo la hoja NOMENCLATURA -- si hace falta volver a eso nomas
   se recupera este bloque.) */
.fila-baja { background-color: var(--bp-blanco); }

/* ---------- Alertas (success/warning/info de Bootstrap traen verde/
   amarillo/azul -- fuera de paleta. Las reemplazamos por naranja/gris.
   alert-danger SI se deja tal cual: es la excepcion 1, rojo solo para
   errores). ---------- */
.alert-brima-exito {
  background-color: var(--bp-naranja-suave);
  border-color: var(--bp-naranja);
  color: var(--bp-naranja-oscuro);
}
.alert-brima-aviso,
.alert-brima-info {
  background-color: var(--bp-gris-100);
  border-color: var(--bp-gris-300);
  color: var(--bp-gris-700);
}

/* ---------- Cuadricula de captura ---------- */
/* No dependemos solo del CDN de Bootstrap para el scroll horizontal --
   esta es la pantalla mas importante de la app (la lista tipo Excel). */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-captura select { min-width: 4.5rem; font-size: 0.85rem; }
.tabla-captura .celda-estatus { min-width: 8rem; width: 100%; }
/* La columna de Estatus ya no necesita ancho extra reservado para el
   texto de "Desde .. Cambio a .. (pendiente de validar)" -- ese detalle
   ahora vive en un icono con popover (ver .btn-info-estatus mas abajo),
   encimado en la esquina del select para no ocupar espacio propio, asi
   que la columna se queda compacta y la fila no crece de alto sin
   importar que tan largo sea el motivo. */
.tabla-captura .col-estatus { width: 8rem; max-width: 8rem; white-space: normal; }
.wrap-select-estatus { position: relative; display: inline-block; width: 100%; }
.btn-info-estatus {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 2px solid var(--bp-blanco);
  border-radius: 50%;
  background: var(--bp-gris-500);
  color: var(--bp-blanco);
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.3);
}
.btn-info-estatus:hover,
.btn-info-estatus--activo { background: var(--bp-naranja-oscuro); }
/* Variante para avisar que algo necesita atencion (ej. se rechazo una
   BAJA/cambio que este capturista habia solicitado) -- mismo icono,
   pero en rojo y con un pequeno pulso para que no pase desapercibido
   entre los demas iconos grises. */
.btn-info-estatus--rechazado {
  background: var(--bp-error);
  animation: pulso-rechazo 1.8s ease-in-out infinite;
}
.btn-info-estatus--rechazado:hover,
.btn-info-estatus--rechazado.btn-info-estatus--activo { background: var(--bp-error); }
@keyframes pulso-rechazo {
  0%, 100% { box-shadow: 0 1px 3px rgba(20, 20, 20, 0.3), 0 0 0 0 rgba(178, 58, 46, 0.55); }
  50% { box-shadow: 0 1px 3px rgba(20, 20, 20, 0.3), 0 0 0 0.3rem rgba(178, 58, 46, 0); }
}
.popover-info-estatus {
  position: fixed;
  z-index: 1000;
  max-width: 260px;
  background-color: var(--bp-blanco);
  border: 1px solid var(--bp-gris-300);
  border-radius: 0.6rem;
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.16);
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--bp-gris-700);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.14s;
}
.popover-info-estatus--abierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Sin borde visible en reposo -- se ve mas limpio y menos "de formulario".
   Se deja un borde transparente (no display:none) para que el indicador
   de guardado (naranja/verde/rojo) de abajo si tenga donde pintarse. */
.tabla-captura .celda-incidencia,
.tabla-captura .celda-estatus {
  border: 1px solid transparent;
  background-color: transparent;
}
.tabla-captura .celda-incidencia:hover,
.tabla-captura .celda-estatus:hover { background-color: var(--bp-gris-100); }
.tabla-captura .celda-incidencia:focus,
.tabla-captura .celda-estatus:focus {
  background-color: var(--bp-blanco);
  border-color: var(--bp-gris-300);
  box-shadow: none;
}
.tabla-captura th, .tabla-captura td { white-space: nowrap; }
.tabla-captura .celda-observacion { min-width: 9rem; white-space: normal; }
.resumen-badge { font-size: 0.75rem; }
.badge-naranja { background-color: var(--bp-naranja); color: var(--bp-blanco); }

/* Buscar/filtrar/ordenar la lista de captura -- todo se resuelve en el
   navegador (esconder/reordenar filas), sin volver a pedir nada al
   servidor. El botoncito vive alineado con los iconos de subir (misma
   fila), y al abrirlo el panel de controles aparece FLOTANDO encima de
   la tabla -- no empuja nada hacia abajo. */
.caja-filtros-captura {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}
.btn-toggle-filtros {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--bp-gris-300);
  background-color: var(--bp-blanco);
  color: var(--bp-gris-700);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-toggle-filtros:hover { background-color: var(--bp-gris-100); }
.btn-toggle-filtros .icono-toggle-filtros { transition: transform 0.18s ease; font-size: 0.7rem; }
.btn-toggle-filtros--abierto {
  background-color: var(--bp-naranja-suave);
  border-color: var(--bp-naranja);
  color: var(--bp-naranja-oscuro);
}
.btn-toggle-filtros--abierto .icono-toggle-filtros { transform: rotate(180deg); }

.controles-filtro-captura {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: min(90vw, 420px);
  background-color: var(--bp-blanco);
  border: 1px solid var(--bp-gris-300);
  border-radius: 0.7rem;
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.16);
  padding: 0.75rem;
  /* Animacion de aparecer: opacity+transform (no display), asi se
     puede transicionar suave -- visibility en 0 se retrasa para que no
     se pueda interactuar con ella mientras esta invisible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.16s;
}
.controles-filtro-captura--abierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.filtro-buscar-caja {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}
.filtro-buscar-caja i {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bp-gris-500);
  font-size: 0.85rem;
  pointer-events: none;
}
.filtro-buscar-caja input {
  padding-left: 1.9rem;
}
.controles-filtro-captura select {
  flex: 1 1 auto;
  width: auto;
}
.controles-filtro-captura #contador-filtro-resultado {
  flex-basis: 100%;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .controles-filtro-captura { right: auto; left: 0; max-width: min(92vw, 340px); }
}

/* Fila que junta el boton de descargar (izquierda) y los iconos de
   subir por dia (derecha, alineados con la tabla) -- todo FUERA de la
   tarjeta blanca de la tabla, en una sola linea, sin espacio suelto
   entre uno y otro. */
.fila-acciones-dia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.btn-descargar-dia {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background-color: var(--bp-naranja-suave);
  color: var(--bp-naranja-oscuro);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-descargar-dia:hover { background-color: var(--bp-naranja); color: var(--bp-blanco); }

/* Fila de iconos "Subir estado de fuerza" -- FUERA de la tabla, pero
   alineada arriba de cada columna de dia (la posicion real de cada
   icono la calcula el JS con base en el ancho de su columna). */
.fila-iconos-subir {
  position: relative;
  height: 28px;
  flex: 1 1 auto;
  overflow: hidden;
}
.icono-subir-dia {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.btn-subir-dia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background-color: var(--bp-naranja-suave);
  color: var(--bp-naranja-oscuro);
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-subir-dia:hover { background-color: var(--bp-naranja); color: var(--bp-blanco); }
.btn-subir-dia--listo {
  background-color: #DCEEE2;
  color: #3C8A5B;
}
.btn-subir-dia--listo:hover { background-color: #3C8A5B; color: var(--bp-blanco); }
.btn-subir-dia.subiendo {
  opacity: 0.6;
  pointer-events: none;
}
/* Dia fuera de la ventana permitida para subir (todavia no llega, o ya
   paso el plazo) -- gris, sin click. */
.btn-subir-dia--bloqueado {
  background-color: var(--bp-gris-200, #EDEDED);
  color: var(--bp-gris-500, #9A9A9A);
  border: 1px solid var(--bp-gris-300, #DDD);
  cursor: not-allowed;
}
.link-ver-dia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  color: var(--bp-naranja-oscuro);
  text-decoration: none;
  font-size: 0.85rem;
}
.link-ver-dia:hover { color: var(--bp-naranja); }

/* Iconito de estado de la lectura de IA (robot), junto al "ver" de cada
   dia -- verde = leido bien, naranja = calidad insuficiente (hay que
   volver a subir), rojo = rechazado o error, gris = analizando. */
.badge-ia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.8rem;
  cursor: default;
}
a.badge-ia { cursor: pointer; }
.badge-ia--procesando { color: var(--bp-gris-500); }
.badge-ia--ok { color: #3C8A5B; }
.badge-ia--ok:hover { color: #2c6a44; }
.badge-ia--advertencia { color: #C6641E; }
.badge-ia--advertencia:hover { color: #a24f17; }
.badge-ia--rechazado { color: var(--bp-error, #B23A2E); }
.badge-ia--rechazado:hover { color: #8f2e24; }
.girando { display: inline-block; animation: girar 1s linear infinite; }
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Contador "Capturados" (ej. 7/7): badge + total centrados en una sola
   linea, con una animacion corta cada vez que cambia para que se note
   sin tener que fijarse mucho. */
.contador-capturados {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.contador-capturados .contador-fila {
  font-size: 0.8rem;
  min-width: 1.6rem;
  padding: 0.35em 0.5em;
}
.contador-capturados .contador-total {
  color: var(--bp-gris-500);
  font-size: 0.85rem;
}
.contador-fila.contador-pulso {
  animation: contador-pulso 0.4s ease-out;
}
@keyframes contador-pulso {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Empleado en BAJA: la fila ya no admite incidencias ni observaciones --
   se ven en gris y con cursor bloqueado para que sea obvio de un vistazo
   que ese campo ya no se puede tocar. */
.tabla-captura .celda-incidencia:disabled,
.tabla-captura .celda-observacion:disabled,
.tabla-captura .celda-estatus:disabled {
  background-color: var(--bp-gris-100);
  color: var(--bp-gris-500);
  border-color: var(--bp-gris-200);
  opacity: 1;
  cursor: not-allowed;
}

/* Columnas fijas (No. Nomina / Empleado): en celular, al recorrer la
   tabla hacia los dias, estas dos columnas se quedan pegadas a la
   izquierda para no perder de vista a que empleado le estas
   capturando la incidencia. */
.tabla-captura .col-fijo {
  position: sticky;
  background-color: var(--bp-blanco);
}
.tabla-captura thead .col-fijo {
  z-index: 3;
  background-color: var(--bp-gris-100);
}
.tabla-captura tbody .col-fijo { z-index: 2; }
.tabla-captura .fila-baja .col-fijo { background-color: var(--bp-blanco); }
.tabla-captura .col-fijo-1 {
  left: 0;
  width: 5.5rem;
  min-width: 5.5rem;
  white-space: normal;
}
.tabla-captura .col-fijo-1 .resumen-badge {
  display: block;
  width: fit-content;
  margin-top: 0.2rem;
}
.tabla-captura .col-fijo-2 {
  left: 5.5rem;
  width: 9rem;
  min-width: 9rem;
  white-space: normal;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.12);
}

/* Indicador de autoguardado por celda: naranja mientras se manda,
   verde si quedo bien, rojo (excepcion 1: solo errores) si fallo. */
.celda-incidencia.celda-guardando,
.celda-observacion.celda-guardando,
.celda-estatus.celda-guardando {
  border-color: var(--bp-naranja) !important;
  box-shadow: 0 0 0 2px var(--bp-naranja-suave);
}
.celda-incidencia.celda-ok,
.celda-observacion.celda-ok,
.celda-estatus.celda-ok {
  border-color: #3C8A5B !important;
  box-shadow: 0 0 0 2px #DCF1E3;
}
.celda-incidencia.celda-error,
.celda-observacion.celda-error,
.celda-estatus.celda-error {
  border-color: var(--bp-error) !important;
  box-shadow: 0 0 0 2px #FCEAE8;
}

/* ---------- Login ---------- */
.login-card {
  max-width: 380px;
  width: 100%;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(43, 43, 43, 0.15);
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--bp-gris-100);
}

/* ---------- Modal "Motivo de BAJA" (captura.php) ---------- */
.modal-motivo-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(36, 36, 36, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1050;
  animation: modal-motivo-fondo 0.2s ease-out;
}
.modal-motivo-caja {
  background-color: var(--bp-blanco);
  border-radius: 1rem;
  padding: 1.75rem 1.75rem 1.5rem;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 1.5rem 3rem rgba(43, 43, 43, 0.3);
  border-top: 4px solid var(--bp-error);
  animation: modal-motivo-entrada 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-motivo-icono {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bp-error), #8f2c22);
  color: var(--bp-blanco);
  font-size: 1.4rem;
  box-shadow: 0 0.4rem 1rem rgba(178, 58, 46, 0.35);
}
/* Variante naranja -- para modales de accion "neutral" (ej. cambio de
   servicio) en vez del rojo de BAJA, que es una accion mas delicada. */
.modal-motivo-caja--naranja { border-top-color: var(--bp-naranja); }
.modal-motivo-icono--naranja {
  background: linear-gradient(135deg, var(--bp-naranja), var(--bp-naranja-oscuro));
  box-shadow: 0 0.4rem 1rem rgba(232, 137, 31, 0.35);
}
.modal-motivo-titulo {
  font-weight: 700;
  color: var(--bp-gris-900);
  margin-bottom: 0.35rem;
}
.modal-motivo-texto {
  margin: 0 auto 1.1rem;
  max-width: 32rem;
}
.modal-motivo-select {
  text-align: left;
  margin-bottom: 1.25rem;
  border: 1px solid var(--bp-gris-300);
  border-radius: 0.6rem;
  padding: 0.55rem 0.75rem;
}
.modal-motivo-select:focus {
  border-color: var(--bp-naranja);
  box-shadow: 0 0 0 2px var(--bp-naranja-suave);
}
.modal-motivo-botones {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}
.modal-motivo-botones .btn-outline-brima,
.modal-motivo-botones .btn-brima {
  flex: 1;
  justify-content: center;
}
@keyframes modal-motivo-fondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-motivo-entrada {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 420px) {
  .modal-motivo-botones { flex-direction: column-reverse; }
}

/* ---------- Pantalla de revision de IA (revision_ia_estado_fuerza.php) ---------- */
.tabla-revision-ia th, .tabla-revision-ia td { white-space: normal; vertical-align: top; }
.badge-match, .badge-veredicto {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
}
.match-exacto { background-color: #DCEEE2; color: #3C8A5B; }
.match-aproximado { background-color: #FCEFDD; color: #C6641E; }
.match-sinmatch { background-color: #FCEAE8; color: var(--bp-error, #B23A2E); }
.veredicto-ok { background-color: #DCEEE2; color: #3C8A5B; }
.veredicto-mal { background-color: #FCEAE8; color: var(--bp-error, #B23A2E); }
.veredicto-referencia { background-color: var(--bp-gris-200); color: var(--bp-gris-700); }
.veredicto-neutro { background-color: var(--bp-gris-200); color: var(--bp-gris-700); }
.celda-firma { min-width: 7rem; }
.miniatura-firma {
  display: block;
  max-width: 6rem;
  max-height: 3rem;
  border: 1px solid var(--bp-gris-300);
  border-radius: 4px;
  background: #fff;
  object-fit: contain;
}

/* ---------- Captura en celular y tablet: tarjetas en vez de tabla ---------- */
/* En pantallas grandes (laptop/monitor) la cuadricula de captura es una
   tabla normal que se recorre de lado (con las columnas de No. Nomina/
   Empleado fijas -- ver .col-fijo arriba). En celular Y tablet cada
   empleado se convierte en su propia tarjeta: el No. Nomina + Empleado
   quedan como encabezado arriba (su propio renglon, no se mueve) y
   ABAJO va una mini tabla horizontal con el resto de los datos (NSS,
   RFC, CURP, Puesto, Estatus, cada dia...) que se recorre de lado si
   no cabe. Para lograr esto sin duplicar HTML, un poco de JS (ver
   captura.php, actualizarEstructuraTarjetas()) MUEVE esas celdas (los
   mismos <td> de siempre, con sus mismos <select>/<input>) adentro de
   un <td> envoltorio al final del renglon -- no se crea ningun campo
   nuevo, nomas se reacomoda donde vive cada uno. En escritorio esa
   misma funcion los regresa a su lugar original. */
@media (max-width: 1199.98px) {
  .tabla-captura { overflow-x: visible; }
  .tabla-captura table,
  .tabla-captura tbody {
    display: block;
    width: 100%;
  }
  .tabla-captura thead { display: none; }
  .tabla-captura table { border: none; }
  .tabla-captura tbody tr {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0.85rem 0.9rem 0.75rem;
    border: none;
    border-top: 3px solid var(--bp-naranja);
    border-radius: 0.6rem;
    background-color: var(--bp-blanco);
    box-shadow: var(--bp-sombra);
  }
  /* En la tarjeta ya no se pinta de rojo/rosa toda la fila de BAJA --
     con la insignia "BAJA" junto al nombre es suficiente, se ve mas
     limpio. */
  .tabla-captura tbody tr.fila-baja { background-color: var(--bp-blanco); }
  /* No. Nomina (+ insignia BAJA/CAMBIO si aplica) y Empleado: quedan
     como encabezado de la tarjeta, uno al lado del otro. */
  .tabla-captura .col-fijo {
    display: inline-block;
    position: static;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto;
    vertical-align: middle;
  }
  .tabla-captura .col-fijo-1 {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--bp-gris-900);
  }
  .tabla-captura .col-fijo-1 .resumen-badge { margin: 0; }
  .tabla-captura .col-fijo-2 {
    font-weight: 700;
    color: var(--bp-gris-900);
    margin-left: 0.5rem;
  }
  /* Envoltorio que el JS agrega al final del renglon: adentro va la
     mini tabla horizontal con el resto de los datos. */
  .tabla-captura td.celda-envoltura-datos {
    display: block;
    width: 100%;
    padding: 0 !important;
    margin-top: 0.65rem;
    border: none !important;
  }
  .tabla-captura .fila-datos-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--bp-gris-300);
    padding-top: 0.6rem;
  }
  .tabla-captura .fila-datos-scroll td {
    display: block;
    flex: 0 0 auto;
    border: none !important;
    padding: 0 0.55rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .tabla-captura .fila-datos-scroll td:first-child { padding-left: 0 !important; }
  /* El resto (NSS, RFC, CURP, Puesto, Estatus, cada dia, Observaciones,
     Capturados) -- cada quien con su ancho fijo, como columnas de
     tabla, dentro de la tira que se recorre de lado. */
  .tabla-captura td[data-label="NSS"],
  .tabla-captura td[data-label="RFC"],
  .tabla-captura td[data-label="CURP"] {
    width: 128px;
    min-width: 128px;
  }
  .tabla-captura td[data-label="Puesto"] { width: 140px; min-width: 140px; }
  .tabla-captura td.col-estatus { width: 120px; min-width: 120px; max-width: none; }
  .tabla-captura td.celda-dia-captura {
    width: 90px;
    min-width: 90px;
    text-align: center;
  }
  .tabla-captura td[data-label="Observaciones"] { width: 200px; min-width: 200px; }
  .tabla-captura td[data-label="Capturados"] { width: 110px; min-width: 110px; }
  /* Etiqueta (NSS, RFC, dia, etc.) arriba del valor, tomada del
     data-label que le puso captura.php a cada celda -- se ve como
     encabezado de columna de la mini tabla. */
  .tabla-captura td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bp-gris-500);
    margin-bottom: 0.3rem;
    white-space: nowrap;
  }
  .tabla-captura select,
  .tabla-captura .celda-observacion { width: 100%; min-width: 0; }
}

/* ---------- Iconos de "subir estado de fuerza" en celular y tablet ---------- */
/* En pantallas grandes esos iconos se alinean por pixel arriba de cada
   columna de dia (JS, ver captura.php). En celular y tablet ya no hay
   columnas con las que alinear -- la tabla se volvio tarjetas -- asi
   que aqui se acomodan solos en un renglon que hace wrap, cada uno con
   su fecha arriba (etiqueta-dia-movil, oculta en escritorio real). */
.etiqueta-dia-movil { display: none; }
@media (max-width: 1199.98px) {
  /* Algunos dias traen icono de "ya subido" + ojo para verlo + insignia
     de la IA, todos apilados -- esa columna queda mas alta que las
     demas. Con mas separacion abajo no se encima con la tarjeta de la
     primera persona, aunque el dia mas alto le toque. */
  .fila-acciones-dia { align-items: flex-start; margin-bottom: 1.15rem !important; }
  .fila-iconos-subir {
    position: static;
    height: auto;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 0.3rem;
    flex-basis: 100%;
  }
  .icono-subir-dia {
    position: static;
    width: auto;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Sin esto, hereda el "justify-content: center" de escritorio --
       un dia con icono+ojo+insignia-IA apilados queda mas alto que
       los demas, y centrar ese contenido empuja la FECHA hacia abajo
       en los dias cortos (o hacia arriba en el dia alto), asi que las
       fechas ya no quedaban en la misma linea. Con flex-start todas
       arrancan pegadas arriba, alineadas siempre. */
    justify-content: flex-start;
    gap: 0.15rem;
  }
  .etiqueta-dia-movil {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--bp-gris-500);
    text-align: center;
  }
}

/* =====================================================================
   VALIDACIONES PENDIENTES (public/validaciones.php)
   La pantalla ahora sigue el mismo patron visual que el dashboard
   (kpi-strip arriba + tarjetas .card-accento abajo dentro de
   .app-content), en vez de su propio contenedor/encabezado -- Pepe pidio
   continuidad con el diseño de Inicio (2026-09-24).
   ===================================================================== */
.tabs-validaciones {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--bp-gris-300);
  margin-bottom: 1.25rem;
}
.tab-validaciones {
  border: none;
  background: transparent;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bp-gris-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tab-validaciones:hover { color: var(--bp-gris-900); }
.tab-validaciones--activa {
  color: var(--bp-naranja-oscuro);
  border-bottom-color: var(--bp-naranja-oscuro);
}
.badge-conteo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--bp-naranja);
  color: var(--bp-blanco);
  font-size: 0.68rem;
  font-weight: 700;
}

.aviso-vacio { padding: 1.5rem 0; text-align: center; }

/* --- Tabla densa (mismo criterio que .tabla-captura) en vez de tarjetas
   apiladas: Pepe pidio "aprovechar mas el pescado" (2026-09-24). Ahora
   vive dentro de .card-accento (ver mas arriba), que ya trae su propio
   fondo/borde/sombra -- ya no necesita una envoltura propia. --- */
.tabla-validaciones { margin-bottom: 0; width: 100%; }
.tabla-validaciones th, .tabla-validaciones td { vertical-align: middle; }
.tabla-validaciones td { font-size: 0.85rem; }
.fila-validacion .btn { margin-left: 0.25rem; }
.fila-validacion .btn:first-child { margin-left: 0; }

/* --- Tabla de nomina.php: un site = una tarjeta con su propia tabla
   completa (Pepe, 2026-09-25: "que cada site sea una tabla distinta...
   se ve algo encimado"), separadas por espacio en vez de todo pegado en
   una sola tabla gigante. --- */
.tablas-nomina-lista { display: flex; flex-direction: column; gap: 1.15rem; }
.tabla-site-nomina-wrap {
  border: 1px solid var(--bp-gris-300);
  border-radius: var(--bp-radio);
  box-shadow: var(--bp-sombra);
  overflow: hidden;
}
.tabla-site-nomina-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bp-naranja-suave);
  color: var(--bp-naranja-oscuro);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--bp-gris-300);
}
/* La tabla de cada site debe llenar TODO el ancho de la tarjeta (Pepe,
   2026-09-25: "debe de ocupar todo el ancho la tabla") pero SIN volver
   a desalinearse entre un site y otro (Pepe, mismo dia, antes: "se
   desalinea las columnas"). La combinacion que logra las dos cosas a
   la vez es table-layout:fixed + width:100% en la <table> + anchos en
   PORCENTAJE (no en rem ni en px) en cada <col> -- con eso el navegador
   reparte el ancho de forma puramente matematica segun esos
   porcentajes, nunca segun el contenido de cada tabla, y como todas
   las tablas viven en tarjetas del mismo ancho quedan exactamente
   alineadas (probado con Playwright en varios anchos de pantalla,
   0px de diferencia). Los porcentajes de cada <col> se calculan en PHP
   (public/nomina.php) y van inline, no aqui. */
.tabla-nomina { margin-bottom: 0; }
.tabla-nomina th, .tabla-nomina td { vertical-align: middle; }
.tabla-nomina td { font-size: 0.85rem; }
.tabla-nomina td, .tabla-nomina th { overflow-wrap: break-word; white-space: normal; }
.tabla-nomina thead th { white-space: nowrap; }

/* --- Tarjeta "Sites sin movimiento reportado" de revision.php -- mismo
   .card-accento de siempre, nomas con el filo en ambar en vez de
   naranja de marca, para que se note que es una alerta/pendiente y no
   una seccion mas. --- */
.card-accento--alerta { border-left-color: #C9962B; }
.card-accento--alerta h3 i { color: #C9962B; }

/* Botones de Acciones en degradado de naranja (Pepe, 2026-09-24): en vez
   de verde/gris/rojo sueltos, los botones de una misma fila van de mas
   claro a mas fuerte -- el ultimo (Rechazar, la accion mas definitiva)
   siempre se queda con el tono mas oscuro. Llevan icono + texto, como el
   resto de los botones de la app (.btn-ver, "Nueva captura", etc.) --
   antes eran solo texto y se sentian "pelones" comparados con esos. */
.btn-accion-nv1, .btn-accion-nv2, .btn-accion-nv3 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}
.btn-accion-nv1 {
  background: var(--bp-naranja-suave);
  border: 1px solid var(--bp-naranja-suave);
  color: var(--bp-naranja-oscuro);
}
.btn-accion-nv1:hover { background: #f5d9ae; border-color: #f5d9ae; color: var(--bp-naranja-oscuro); }
.btn-accion-nv2 {
  background: var(--bp-naranja);
  border: 1px solid var(--bp-naranja);
  color: var(--bp-blanco);
}
.btn-accion-nv2:hover { background: var(--bp-naranja-oscuro); border-color: var(--bp-naranja-oscuro); color: var(--bp-blanco); }
.btn-accion-nv3 {
  background: var(--bp-naranja-oscuro);
  border: 1px solid var(--bp-naranja-oscuro);
  color: var(--bp-blanco);
}
.btn-accion-nv3:hover { background: #9c4e0f; border-color: #9c4e0f; color: var(--bp-blanco); }

/* Popover flotante para el motivo de rechazo -- mismo mecanismo que el
   popover de info de captura.php (position:fixed + JS calcula left/top
   con getBoundingClientRect, para no recortarse en una tabla con
   scroll horizontal propio). */
.popover-rechazo {
  position: fixed;
  z-index: 1000;
  width: 280px;
  background-color: var(--bp-blanco);
  border: 1px solid var(--bp-gris-300);
  border-radius: 0.6rem;
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.16);
  padding: 0.7rem 0.8rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.14s;
}
.popover-rechazo--abierto {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.popover-rechazo-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bp-gris-700);
  margin-bottom: 0.4rem;
}
.popover-rechazo-botones {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Variante ancha del modal de motivo -- el formulario de "Dar de alta"
   trae 8 campos y no cabe en los 420px angostos de los modales de un
   solo select. */
.modal-motivo-caja--ancha { max-width: 640px; text-align: left; }
.modal-motivo-caja--ancha .modal-motivo-icono { margin: 0 auto 0.75rem; }
.modal-motivo-caja--ancha .modal-motivo-titulo,
.modal-motivo-caja--ancha .modal-motivo-texto { text-align: center; }
.grid-form-alta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.grid-form-alta label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bp-gris-700);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* --- Filtros + "Cargar más" en Pendientes de personal --- */
.barra-filtros-validaciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.chips-tipo-validacion {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.chip-tipo {
  border: 1px solid var(--bp-gris-300);
  background: var(--bp-blanco);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bp-gris-700);
  cursor: pointer;
}
.chip-tipo:hover { border-color: var(--bp-naranja); }
.chip-tipo--activo {
  background: var(--bp-naranja);
  border-color: var(--bp-naranja);
  color: var(--bp-blanco);
}
#filtro-buscar-personal {
  max-width: 260px;
  margin-left: auto;
}
/* Filtros de ubicacion (servicio / estado / site) -- independientes
   entre si, cada uno se puede usar solo (Pepe: "o solo seleccionar
   servicio y todo lo del servicio, o solo por estado"). */
.barra-filtros-ubicacion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.barra-filtros-ubicacion select {
  max-width: 200px;
}
.caja-cargar-mas {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}