/* Estilo plano y sobrio, sin degradados -- pensado para verse como un
   sistema empresarial más (consistente con los demás sistemas internos),
   no como una app de consumo. Kiosco: texto y botones grandes, alto
   contraste, transiciones cortas y discretas. Logo de Chada Farms
   (img/logo-isotype*.png) agregado 2026-09-05 en login y header. */
:root {
  --verde: #2e7d32;
  --verde-oscuro: #1b5e20;
  --rojo: #b71c1c;
  --gris-borde: #c9d0c9;
  --gris-fondo: #f0f2f0;
  --texto: #212121;
  --texto-tenue: #5a625a;
  --blanco: #fff;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* El atributo [hidden] DEBE ganar siempre, sin importar qué otra regla le
   ponga display a ese mismo elemento (p.ej. .boton-enlace{display:block} o
   .nav-inferior{display:flex}) -- si no, un elemento con hidden=true puesto
   desde JS se puede seguir viendo, porque una regla de autor con la misma
   especificidad le gana a la regla [hidden] del navegador. Real bug
   encontrado 2026-09-05 al probar "¿No eres tú?" y el menú inferior. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--gris-fondo);
  color: var(--texto);
}

h1, h2 {
  color: var(--texto);
  margin: 0 0 6px;
  font-weight: 600;
}

/* ---------- Tarjetas genéricas ---------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  padding: 28px;
}

/* Rediseño login "fondo de marca" 2026-09-07 (Pablo pidió "dame 3 ideas
   visuales" para el login; esta era la recomendada del canvas: tarjeta
   blanca flotando sobre fondo verde de marca, con el logo completo que
   ya tenía el tagline y no se usaba en ningún lado). Fondo a pantalla
   completa + un par de círculos blancos muy sutiles de textura (los
   .fondo-textura de abajo), sin degradados llamativos. */
.pagina-login {
  min-height: 100vh;
  /* 100dvh (alto de viewport "dinámico") además de 100vh: en el navegador
     real del celular la barra de direcciones resta espacio visible que
     100vh no descuenta, así que la tarjeta quedaba centrada contra un
     alto más grande del que realmente se ve, y se veía descentrada --
     mismo ajuste que ya se le había hecho a .pagina-checador (rediseño
     móvil 2026-09-06). */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  background: var(--verde-oscuro);
}

.fondo-textura {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}
.fondo-textura--1 {
  width: 360px;
  height: 360px;
  top: -110px;
  left: -120px;
  opacity: 0.09;
}
.fondo-textura--2 {
  width: 300px;
  height: 300px;
  bottom: -100px;
  right: -90px;
  opacity: 0.08;
}
.fondo-textura--3 {
  width: 200px;
  height: 200px;
  bottom: 60px;
  left: -60px;
  opacity: 0.06;
}

.tarjeta--login {
  width: 100%;
  max-width: 380px;
  position: relative;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(10, 20, 10, 0.35);
}

.tarjeta__encabezado {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.tarjeta__encabezado h1 {
  font-size: 20px;
}

.logo-login {
  display: block;
  height: 64px;
  width: auto;
}

.titulo-login {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--texto);
}

.subtitulo {
  margin: 2px 0 0;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

/* ---------- Formularios ---------- */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-tenue);
}

.campo input[type='text'],
.campo input[type='password'],
.campo select {
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  font-weight: normal;
  color: var(--texto);
  background: var(--blanco);
  transition: border-color 0.1s ease;
}

.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18);
}

/* Icono dentro del campo (Usuario/Contraseña en el login) -- el input se
   recorre con padding-left para no quedar debajo del icono. */
.campo__input-wrap {
  position: relative;
}

.campo__icono {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  opacity: 0.55;
  pointer-events: none;
}

.campo--con-icono input {
  padding-left: 36px;
}

.campo--checkbox {
  flex-direction: row;
  align-items: center;
  font-weight: normal;
  color: var(--texto);
  gap: 8px;
}
.campo--checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--verde);
}

/* ---------- Botones ---------- */
.boton {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.boton--principal {
  background: var(--verde);
  color: #fff;
}
.boton--principal:hover:not(:disabled) {
  background: var(--verde-oscuro);
}
.boton--principal:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.boton--secundario {
  background: transparent;
  color: var(--verde-oscuro);
  border-color: var(--verde);
}
.boton--secundario:hover {
  background: rgba(255, 255, 255, 0.12);
}

.boton--grande {
  padding: 9px;
  font-size: 16px;
  width: 100%;
}

/* Solo en el login: esquinas redondeadas a juego con la tarjeta y los
   campos, más una sombra sutil bajo el botón verde. Escopado a
   .tarjeta--login para no afectar los botones de checador.html / mi
   reporte. */
.tarjeta--login .boton--principal {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(27, 94, 32, 0.15);
}

.boton-enlace {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--texto-tenue);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.boton-enlace:hover {
  color: var(--texto);
}

/* ---------- Mensajes ---------- */
.mensaje {
  min-height: 14px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}
.mensaje--error {
  color: var(--rojo);
}
.mensaje--ok {
  color: var(--verde-oscuro);
}

/* ---------- Pantalla de checador ---------- */
.pagina-checador {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Deja espacio abajo para que el menú inferior fijo (.nav-inferior) no
     tape el final del contenido -- ver esa clase más abajo. Rediseño
     móvil 2026-09-06: todo el layout de checador.html se comprimió para
     que quepa sin scroll en un celular en vertical (Pablo: "ocupo que me
     lo acomodes distinto para que quepa en una pantalla de celular en
     modo vertical"); esta página ya NO usa el breakpoint @media(480px)
     de abajo para eso -- los tamaños base ya son los compactos. */
  padding-bottom: 40px;
}

.encabezado {
  background: var(--verde-oscuro);
  color: #fff;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 3px solid var(--verde);
  flex-shrink: 0;
}

.encabezado__marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-header {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}

.encabezado__marca strong {
  font-size: 14px;
  font-weight: 600;
}

.encabezado__info {
  display: block;
  opacity: 0.85;
  font-size: 11px;
}

.encabezado__derecha {
  display: flex;
  align-items: center;
  gap: 16px;
}

.encabezado .boton--secundario {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  padding: 5px 12px;
  font-size: 12px;
}

.tarjeta--checador {
  margin: 5px auto;
  width: 100%;
  max-width: 420px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  flex: 1;
}

.input-codigo {
  font-size: 18px;
  padding: 6px;
  text-align: center;
  border: 1px solid var(--gris-borde);
  border-radius: 4px;
  letter-spacing: 2px;
  background: var(--blanco);
  transition: border-color 0.1s ease;
}
.input-codigo:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.18);
}
/* Bloqueado tras el autocompletado del login individual -- solo se
   desbloquea con "¿No eres tú?" (ver js/checador.js). Visualmente distinto
   de un input normal para que no parezca simplemente "no reacciona". */
.input-codigo[readonly] {
  background: var(--gris-fondo);
  color: var(--texto-tenue);
  cursor: not-allowed;
}

/* ---------- Tarjeta de empleado (avatar + estado + nombre) -------------
   Rediseño móvil 2026-09-06: pasa de columna centrada (foto grande arriba,
   texto abajo) a fila (foto chica a la izquierda, texto a la derecha) --
   la versión en columna con avatar de 72px era una de las secciones más
   altas de la pantalla; en fila cabe en la altura de un renglón. */
.tarjeta-empleado {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-top: 1px solid var(--gris-borde);
  border-bottom: 1px solid var(--gris-borde);
}

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar--vacio {
  background: #b7bfb7;
}

.avatar__iniciales {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}

.avatar__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tarjeta-empleado__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.empleado-estado {
  min-height: 14px;
  margin: 0;
  font-size: 11px;
  text-align: left;
  color: var(--texto-tenue);
}
.empleado-estado--ok {
  color: var(--verde-oscuro);
  font-weight: 600;
}
.empleado-estado--error {
  color: var(--rojo);
  font-weight: 600;
}

.empleado-nombre {
  min-height: 16px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Tarjeta de ubicación (mapa, agregado 2026-09-05) ------------
   Rediseño móvil 2026-09-06: mapa más bajo (110px, antes 180px) para que
   quepa en la pantalla, y leyenda de "centros de trabajo válidos para ti"
   (.leyenda-geocercas / .lista-geocercas) agregada a petición de Pablo --
   ver actualizarUbicacionMapa() en checador.js. */
.tarjeta-ubicacion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* flex:1 -- Pablo reportó "en vista celular hay mucho espacio libre
     abajo" en celulares más altos que los probados en el rediseño
     2026-09-06 (375-844px de alto): .tarjeta--checador ya crece con
     flex:1 para llenar la pantalla, pero ninguno de sus hijos absorbía
     ese espacio sobrante, así que quedaba en blanco debajo del botón
     Grabar. Al darle flex:1 a esta tarjeta (y a .mapa-ubicacion abajo)
     ese espacio se destina específicamente a agrandar el mapa, sin
     tocar el tamaño del resto de los elementos. min-height:0 evita que
     un hijo flex fuerce el alto mínimo del contenedor por su contenido
     (gotcha típico de flexbox anidado). */
  flex: 1;
  min-height: 0;
}

.ubicacion-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-tenue);
}

.badge-ubicacion {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--texto-tenue);
}
.badge-ubicacion--ok {
  background: rgba(46, 125, 50, 0.14);
  color: var(--verde-oscuro);
}
.badge-ubicacion--error {
  background: rgba(183, 28, 28, 0.1);
  color: var(--rojo);
}
.badge-ubicacion--info {
  background: var(--gris-fondo);
  color: var(--texto-tenue);
}

.mapa-ubicacion {
  width: 100%;
  /* Antes: height fija de 88px (rediseño móvil 2026-09-06, para caber sin
     scroll en celulares de 375-844px de alto). Ahora crece con el espacio
     libre que sobra en .tarjeta-ubicacion (ver comentario ahí) -- 88px
     queda como piso (celulares bajitos, sin espacio de sobra, se ven
     igual que antes). Sin techo: el propio viewport ya limita qué tan
     grande puede crecer (no hay forma de que esto se vuelva absurdo en
     un celular real), y ponerle un max-height solo mueve el espacio
     libre de "debajo del botón Grabar" a "entre el mapa y el siguiente
     elemento" en vez de eliminarlo -- se probó con Playwright (ver
     verificar.js de esa sesión) y sin techo es lo único que de verdad
     no deja espacio muerto en ningún punto de la pantalla. */
  flex: 1 1 88px;
  min-height: 88px;
  border-radius: 6px;
  border: 1px solid var(--gris-borde);
  background: var(--gris-fondo);
}

.leyenda-geocercas__titulo {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-tenue);
}

/* Lista de nombres de geocercas asignadas. Puede haber muchas -- en vez de
   forzar la pantalla completa a hacer scroll por una lista larga, esta
   lista en particular tiene su propio scroll interno (max-height +
   overflow-y), así el resto de la pantalla se mantiene sin scroll. */
.lista-geocercas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 40px;
  overflow-y: auto;
}
.lista-geocercas li {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-tenue);
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---------- Tipo de movimiento (segmentado) ----------------------------- */
.opciones-tipo {
  display: flex;
  gap: 0;
  border: 1px solid var(--gris-borde);
  border-radius: 4px;
  overflow: hidden;
}

.opcion-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-tenue);
  padding: 5px 12px;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.opcion-radio:first-child {
  border-right: 1px solid var(--gris-borde);
}

.opcion-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* :has() cubre navegadores modernos; opcion-radio--activa (puesta por
   checador.js) es el respaldo para el navegador del kiosco si es más viejo. */
.opcion-radio:has(input:checked),
.opcion-radio--activa {
  background: var(--verde);
  color: #fff;
}

/* ---------- Tarjeta de hora grande (agregado 2026-09-05: Pablo pidió que la
   fecha/hora se vean grandes, "es importante que vean bien a que hora van a
   checar") --------------------------------------------------------------- */
.tarjeta-hora {
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gris-borde);
}

.fecha-grande {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-tenue);
  text-transform: capitalize;
}

.hora-grande {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--verde-oscuro);
  line-height: 1.1;
}

.ultima-checada {
  margin: 3px 0 0;
  min-height: 14px;
  font-size: 11px;
  color: var(--texto-tenue);
}

/* ---------- Menú inferior (Checar / Mi reporte) ------------------------- */
.nav-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--blanco);
  border-top: 1px solid var(--gris-borde);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.nav-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 4px 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-tenue);
  text-decoration: none;
}

.nav-inferior__icono {
  font-size: 15px;
  line-height: 1;
}

.nav-inferior__item--activo {
  color: var(--verde-oscuro);
  box-shadow: inset 0 2px 0 var(--verde);
}

/* ---------- Mi reporte: chips de filtro --------------------------------- */
.tarjeta--reporte {
  margin: 20px auto;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chips-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--gris-borde);
  background: var(--blanco);
  color: var(--texto-tenue);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.chip:hover {
  border-color: var(--verde);
}
.chip--activo {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}

.resumen-reporte {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--gris-fondo);
  border-radius: 6px;
  padding: 12px 16px;
}
.resumen-reporte__etiqueta {
  font-size: 13px;
  color: var(--texto-tenue);
  font-weight: 600;
}
.resumen-reporte__total {
  font-size: 20px;
  font-weight: 700;
  color: var(--verde-oscuro);
}

.lista-reporte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dia-grupo {
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  overflow: hidden;
}

.dia-grupo__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gris-fondo);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
}
.dia-grupo__fecha {
  text-transform: capitalize;
}
.dia-grupo__total {
  color: var(--verde-oscuro);
}

.registro-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--gris-borde);
  gap: 10px;
  flex-wrap: wrap;
}

.registro-item__izquierda {
  display: flex;
  align-items: center;
  gap: 10px;
}

.registro-item__tipo {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.registro-item__tipo--entrada {
  background: rgba(46, 125, 50, 0.14);
  color: var(--verde-oscuro);
}
.registro-item__tipo--salida {
  background: rgba(183, 28, 28, 0.1);
  color: var(--rojo);
}

.registro-item__hora {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.registro-item__derecha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-fortia {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.badge-fortia--ok {
  background: rgba(46, 125, 50, 0.14);
  color: var(--verde-oscuro);
}
.badge-fortia--pendiente {
  background: rgba(183, 28, 28, 0.1);
  color: var(--rojo);
}

.boton-reenviar {
  border: 1px solid var(--verde);
  background: var(--blanco);
  color: var(--verde-oscuro);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.boton-reenviar:hover:not(:disabled) {
  background: var(--verde);
  color: #fff;
}
.boton-reenviar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  /* .tarjeta--checador queda fuera a propósito: desde el rediseño móvil de
     2026-09-06 sus tamaños ya son compactos por default (ver reglas de esa
     clase más arriba), así que este breakpoint ya solo aplica a otras
     tarjetas (login) que siguen usando el tamaño "de escritorio" por
     default. */
  .tarjeta:not(.tarjeta--checador) {
    padding: 20px 16px;
  }
}