/* estilos.css — App del técnico (ASA)
   Pensada para una mano, con guantes, en pasillos oscuros: botones grandes,
   contraste alto y nada de menús escondidos. */

:root {
  /* Paleta de marca ASA, la misma del panel administrativo:
     azul #32539C, azul claro #BAC9E1, verde #609C63.
     Los nombres de variable se conservan para no reescribir la hoja. */
  --azul: #32539C;
  --azul-osc: #24407C;
  --azul-claro: #BAC9E1;
  --azul-pastel: #EAF0F8;

  --verde: #4A7D4D;          /* verde ASA oscurecido: contrasta sobre blanco */
  --verde-claro: #EDF5EE;
  --verde-borde: #609C63;
  --cian: var(--azul);
  --rojo: #b91c1c;
  --rojo-claro: #fee2e2;
  --ambar: #b45309;
  --ambar-claro: #fef3c7;
  --gris-900: #0f172a;
  --gris-600: #475569;
  --gris-400: #94a3b8;
  --gris-200: #e2e8f0;
  --gris-100: #f1f5f9;
  --gris-50: #f8fafc;
  --blanco: #fff;
  --radio: 14px;
  --sombra: 0 1px 3px rgba(15, 23, 42, .12), 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  /* Fondo blanco pedido por ASA. Las tarjetas y los puntos, que antes se
     separaban del fondo gris por su color blanco, ahora se separan por el
     borde (--gris-200): ver .tarjeta y .punto mas abajo. */
  background: var(--blanco);
  color: var(--gris-900);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: contain;
}

#app { padding-bottom: env(safe-area-inset-bottom); }

/* ── Encabezado ──────────────────────────────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--azul-osc);
  color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--sombra);
}
.barra h1 { font-size: 17px; margin: 0; font-weight: 600; flex: 1; }
.barra small { display: block; font-weight: 400; opacity: .85; font-size: 13px; }
.barra button {
  background: rgba(255,255,255,.18);
  border: 0; color: #fff;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 19px;
  display: grid; place-items: center;
}
.barra button:active { background: rgba(255,255,255,.3); }

.contenido { padding: 16px; max-width: 720px; margin: 0 auto; }

/* ── Estado de conexión ──────────────────────────────────────────────── */
.aviso-offline {
  background: var(--ambar-claro);
  color: var(--ambar);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.aviso-offline.sincronizando { background: #dbeafe; color: #1d4ed8; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 0; border-radius: var(--radio);
  background: var(--verde); color: #fff;
  font-size: 17px; font-weight: 600;
  cursor: pointer;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; }
.btn.secundario { background: var(--blanco); color: var(--gris-900); border: 1.5px solid var(--gris-200); }
.btn.peligro { background: var(--rojo); }
.btn.grande { min-height: 88px; font-size: 20px; }
.btn + .btn { margin-top: 10px; }

/* ── Tarjetas ────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: var(--sombra);
  margin-bottom: 12px;
}
.tarjeta h2 { margin: 0 0 4px; font-size: 16px; }
.tarjeta p { margin: 0; color: var(--gris-600); font-size: 14px; }

/* ── Avance del día: los dos recuadros ───────────────────────────────── */
.avance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.avance > div {
  border-radius: var(--radio);
  padding: 16px;
  text-align: center;
  border: 2px solid transparent;
}
.avance .hechos { background: var(--verde-claro); border-color: var(--verde-borde); }
.avance .faltan { background: var(--gris-50); border-color: var(--gris-200); }
.avance .numero { font-size: 34px; font-weight: 700; line-height: 1.1; }
.avance .hechos .numero { color: var(--verde); }
.avance .faltan .numero { color: var(--gris-600); }
.avance .rotulo { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gris-600); }

.progreso { height: 8px; background: var(--gris-200); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.progreso > span { display: block; height: 100%; background: var(--verde); border-radius: 99px; transition: width .3s; }

/* ── Lista de puntos ─────────────────────────────────────────────────── */
.grupo-area {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gris-600);
  margin: 20px 0 8px; padding: 0 4px;
}
.punto {
  display: flex; align-items: center; gap: 12px;
  background: var(--blanco);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 8px;
  border-left: 4px solid var(--gris-200);
  box-shadow: var(--sombra);
  cursor: pointer;
}
.punto:active { background: var(--gris-50); }
.punto.hecho { border-left-color: var(--verde); background: var(--verde-claro); }
.punto.vencido { border-left-color: var(--rojo); }
.punto .icono { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
.punto .texto { flex: 1; min-width: 0; }
.punto .codigo { font-weight: 700; font-size: 15px; }
.punto .detalle {
  font-size: 13px; color: var(--gris-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.punto .marca { font-size: 20px; flex-shrink: 0; }

/* ── Etiquetas de estado ─────────────────────────────────────────────── */
.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px; font-weight: 600;
  background: var(--gris-100); color: var(--gris-600);
}
.etiqueta.verde { background: var(--verde-claro); color: var(--verde); }
.etiqueta.roja  { background: var(--rojo-claro); color: var(--rojo); }
.etiqueta.ambar { background: var(--ambar-claro); color: var(--ambar); }

/* ── Formulario del checklist ────────────────────────────────────────── */
.campo { margin-bottom: 20px; }
.campo > label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 15px; }
.campo .obligatorio { color: var(--rojo); }

input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], textarea, select {
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--gris-200);
  border-radius: 12px;
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  font-family: inherit;
  background: var(--blanco);
  color: var(--gris-900);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--verde); border-color: var(--verde); }

/* Botonera de opciones: toda la fila es tocable */
.opciones { display: grid; gap: 8px; }
.opciones.dos { grid-template-columns: 1fr 1fr; }
.opcion {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px;
  border: 1.5px solid var(--gris-200);
  border-radius: 12px;
  background: var(--blanco);
  font-size: 16px; font-weight: 500;
  text-align: center;
  cursor: pointer;
}
.opcion.activa { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.opcion.activa.no { background: var(--rojo); border-color: var(--rojo); }

/* Lista de varias opciones. Se ve distinta a propósito de la de una sola: el
   check delante avisa que se pueden marcar todas las que hagan falta, sin tener
   que leer la ayudita de abajo. */
.opciones.multi .opcion { justify-content: flex-start; gap: 10px; text-align: left; padding-left: 14px; }
.opciones.multi .opcion::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2px solid var(--gris-400);
  border-radius: 6px;
  background: var(--blanco);
}
.opciones.multi .opcion.activa::before {
  content: "✓";
  display: flex; align-items: center; justify-content: center;
  border-color: #fff; color: var(--verde); background: #fff;
  font-weight: 800; font-size: 15px;
}

/* ── Escáner ─────────────────────────────────────────────────────────── */
.escaner { position: fixed; inset: 0; background: #000; z-index: 50; }
.escaner video { width: 100%; height: 100%; object-fit: cover; }
.escaner .mira {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 250px; height: 250px;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 20px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.55);
}
.escaner .pie {
  position: absolute; left: 0; right: 0;
  bottom: calc(28px + env(safe-area-inset-bottom));
  padding: 0 20px;
  text-align: center; color: #fff;
}
.escaner .pie p { margin: 0 0 14px; font-size: 15px; text-shadow: 0 1px 4px rgba(0,0,0,.8); }

/* ── Plano ───────────────────────────────────────────────────────────── */
.plano { position: relative; border-radius: 12px; overflow: hidden; background: var(--gris-200); }
.plano img { width: 100%; display: block; }
.plano .pin {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  display: grid; place-items: center;
  font-size: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.plano .pin.destacado { animation: latido 1.2s infinite; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
@keyframes latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ── Avisos ──────────────────────────────────────────────────────────── */
.mensaje {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--gris-900); color: #fff;
  padding: 14px 18px; border-radius: 12px;
  font-size: 15px; text-align: center;
  z-index: 100;
  opacity: 0; transform: translateY(16px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.mensaje.visible { opacity: 1; transform: translateY(0); }
.mensaje.error { background: var(--rojo); }
.mensaje.exito { background: var(--verde); }

.vacio { text-align: center; padding: 48px 20px; color: var(--gris-400); }
.vacio .emoji { font-size: 48px; display: block; margin-bottom: 12px; }

.cargando { text-align: center; padding: 40px; color: var(--gris-400); }

/* Barra fija de acción al pie del formulario */
.pie-fijo {
  position: sticky; bottom: 0;
  background: linear-gradient(transparent, var(--blanco) 18px);
  padding: 18px 0 calc(12px + env(safe-area-inset-bottom));
  margin-top: 8px;
}

/* Sobre fondo blanco, una tarjeta blanca sin borde no se ve. Se le marca el
   contorno en vez de pintarle un fondo distinto, que es lo que rompia el
   "todo blanco" que pidio ASA. */
.tarjeta, .punto { border: 1px solid var(--gris-200); }

/* El modo oscuro del telefono invertia toda la app. ASA quiere fondo blanco
   siempre, asi que aqui solo se fuerza claro. Se conserva el bloque para que
   quede escrito que fue una decision y no un olvido. */
@media (prefers-color-scheme: dark) {
  html, body { background: #fff; color: var(--gris-900); }
}

/* Selector de plano en la pantalla del mapa */
.sel-plano{
  width:100%;margin-top:10px;padding:11px 12px;font-size:16px;
  border:1px solid var(--gris-200);border-radius:var(--radio);
  background:var(--blanco);color:var(--gris-900);
}

/* ── Conteo de plagas ──────────────────────────────────────────────────
   Una fila por plaga, con los botones grandes y separados: se usa con
   guantes y con una sola mano. El +/- es tactil a proposito; el teclado
   numerico obliga a mirar la pantalla y a quitarse el guante. */
.plagas { display: flex; flex-direction: column; gap: 8px; }
.plaga {
  display: grid;
  grid-template-columns: 30px 1fr 48px 42px 48px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: var(--blanco);
}
.plaga.con-algo { border-color: var(--ambar); background: var(--ambar-claro); }
.plaga .pl-ic  { font-size: 20px; text-align: center; }
.plaga .pl-nom { font-size: 14.5px; line-height: 1.25; min-width: 0; }
.plaga .pl-cant {
  text-align: center; font-weight: 700; font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.plaga .pl-btn {
  min-height: 44px; border: 1px solid var(--gris-200);
  background: var(--gris-50); color: var(--gris-900);
  border-radius: 10px; font-size: 22px; line-height: 1; font-weight: 600;
}
.plaga .pl-btn:active { background: var(--verde); border-color: var(--verde); color: #fff; }

.obligatorio { color: var(--rojo); font-weight: 700; }

/* ── Mapa de la planta (mapa.js) ───────────────────────────────────────
   El visor ocupa toda la pantalla que queda bajo la barra: un plano de hotel
   en media pantalla no se lee, y el técnico lo está mirando de pie en un
   pasillo, no sentado. */
.contenido-mapa { padding: 0; max-width: none; display: flex; flex-direction: column;
                  height: calc(100vh - 66px); }

.mapa-barra {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--gris-200); background: var(--blanco);
}
.mapa-nombre { font-weight: 600; flex: 1; min-width: 0;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-barra .sel-plano { flex: 1; margin: 0; }
.mapa-botones { display: flex; gap: 6px; }
.mapa-btn {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--gris-200); background: var(--gris-50);
  font-size: 18px; color: var(--gris-900); display: grid; place-items: center;
}
.mapa-btn:active { background: var(--azul); border-color: var(--azul); color: #fff; }
.mapa-btn.activo { background: var(--azul); border-color: var(--azul); color: #fff; }

.mapa-estado { padding: 8px 12px; font-size: 13px; min-height: 34px; background: var(--gris-50); }
.mapa-estado .pista { color: var(--gris-600); }
.mapa-estado .pista.ok { color: var(--verde); font-weight: 600; }
.mapa-estado .pista.aviso { color: var(--ambar); }

.mapa-visor {
  position: relative; flex: 1; overflow: hidden;
  background: var(--gris-100); touch-action: none; cursor: grab;
}
.mapa-lienzo { position: absolute; inset: 0; }
.mapa-capa { position: absolute; transform-origin: 0 0; will-change: transform; }
.mapa-medio { display: block; width: 100%; height: 100%; }

/* El punto azul del técnico. El halo NO es decoración: es la precisión real
   del GPS a la escala del plano, así que un halo grande significa
   "el teléfono no sabe bien dónde estás" — que bajo techo es lo normal. */
.mapa-yo { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.mapa-yo-halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--halo, 4%); height: var(--halo, 4%); min-width: 42px; min-height: 42px;
  border-radius: 50%; background: rgba(50, 83, 156, .18); border: 1px solid rgba(50, 83, 156, .45);
}
.mapa-yo-punto {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #32539C; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Chequeo del vehículo (chequeo.js) ─────────────────────────────────
   Todo a toques: los objetivos son grandes porque se usa de pie, con una
   mano y a veces con guantes. */

.combustible { display: flex; align-items: center; gap: 14px; justify-content: center; }
.comb-btn {
  width: 62px; height: 56px; border-radius: 14px;
  border: 1px solid var(--gris-200); background: var(--gris-50);
  font-size: 22px; color: var(--gris-900);
}
.comb-btn:active { background: var(--verde); border-color: var(--verde); color: #fff; }
.comb-valor { font-size: 34px; font-weight: 700; min-width: 76px; text-align: center; }
.comb-barra { height: 12px; border-radius: 99px; background: var(--gris-200); margin-top: 12px; overflow: hidden; }
.comb-barra > span { display: block; height: 100%; background: var(--verde); transition: width .2s; }

.chk-lista { display: flex; flex-direction: column; gap: 8px; }
.chk-item, .falla-item {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 12px 12px; min-height: 54px;
  border: 1.5px solid var(--gris-200); border-radius: var(--radio); background: var(--blanco);
}
.chk-ic  { font-size: 19px; text-align: center; }
.chk-txt { font-size: 15px; line-height: 1.25; }
.chk-estado { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--verde); }

.chk-item.bien { border-color: var(--verde-borde); background: var(--verde-claro); }
.chk-item.mal  { border-color: var(--rojo); background: var(--rojo-claro); }
.chk-item.mal  .chk-estado { color: var(--rojo); }
.chk-item.na   { border-color: var(--gris-400); background: var(--gris-50); }
.chk-item.na   .chk-estado { color: var(--gris-600); }

.falla-item.activa { border-color: var(--ambar); background: var(--ambar-claro); }

/* Las fotos: el recuadro se llena con la miniatura al tomarla, así se ve de un
   golpe cuáles faltan sin contar nada. */
.fotos-angulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.foto-angulo {
  position: relative; height: 92px; border-radius: var(--radio);
  border: 1.5px dashed var(--gris-400); background: var(--gris-50) center/cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.foto-angulo.lista { border-style: solid; border-color: var(--verde); }
.foto-angulo { height: 118px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.foto-angulo .fa-botones { display: flex; gap: 4px; margin-top: 2px; }
.foto-angulo .fa-btn {
  font-size: 11px; font-weight: 600; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--gris-400); background: rgba(255,255,255,.92); color: var(--gris-900);
}
.foto-angulo .fa-txt {
  font-size: 12px; font-weight: 600; color: var(--gris-900);
  background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 6px;
}
.foto-angulo .fa-marca {
  font-size: 20px; color: var(--verde); font-weight: 700;
  background: rgba(255,255,255,.85); border-radius: 50%; width: 28px; height: 28px;
  display: grid; place-items: center;
}

/* Aviso de configuración: el punto se puede registrar igual, así que el aviso
   informa, no bloquea. En ámbar y no en rojo a propósito. */
.aviso-config { background: var(--ambar-claro); border-color: var(--ambar); }
.aviso-config p { margin-top: 6px; font-size: 14px; color: var(--gris-600); }

/* Fotos de la inspección: tomarlas con la cámara o escogerlas de las que ya
   están en el teléfono. Las dos entradas se ven igual de disponibles — la
   galería no es un plan B — y cada miniatura se puede quitar, que es lo que hace
   falta cuando se escoge la foto equivocada del carrete. */
.foto-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.foto-acciones .btn { min-height: 50px; font-size: 15px; gap: 6px; }
@media (max-width: 360px) { .foto-acciones { grid-template-columns: 1fr; } }

.vista-fotos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.foto-mini { position: relative; margin: 0; }
.foto-mini img {
  width: 82px; height: 82px; object-fit: cover;
  border-radius: 10px; border: 1.5px solid var(--gris-200); display: block;
}
.foto-quitar {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--blanco); background: var(--rojo); color: #fff;
  font-size: 17px; line-height: 1; font-weight: 700;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}

/* Resumen sobre los resultados de la búsqueda: cuántos puntos y en cuántas
   áreas. Antes del agrupado, cuarenta cebaderos en fila no decían nada. */
.resumen-busqueda {
  margin: 4px 0 12px;
  font-size: 13.5px;
  color: var(--gris-600);
}

/* ── Solicitudes del hotel ───────────────────────────────────────────────*/
.punto.solicitud { border-left-color: var(--ambar); }
.punto.solicitud.sin-recibir { border-left-color: var(--rojo); background: #fff7f7; }
.etiqueta { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 20px; background: var(--ambar-claro); color: var(--ambar); vertical-align: 2px; }
.etiqueta.roja { background: var(--rojo-claro); color: var(--rojo); }
.hilo { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.msg { align-self: flex-start; max-width: 88%; background: var(--gris-100); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.msg .txt { white-space: pre-wrap; }
.msg.mio { align-self: flex-end; background: var(--azul-pastel); }
.msg .autor { font-size: 11.5px; font-weight: 700; color: var(--gris-600); margin-bottom: 2px; }
.msg .hora { font-size: 11px; color: var(--gris-400); text-align: right; margin-top: 2px; }
.caja-texto { width: 100%; box-sizing: border-box; border: 1.5px solid var(--gris-200); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; margin-bottom: 8px; }

/* ── Lista del día: pestañas, tipos y filtro rápido ─────────────────────
   Pestañas grandes (se tocan con guantes) y chips de tipo en una sola fila
   que se desliza de lado: con 8 tipos no caben, y partirlos en varias
   filas empujaba la lista fuera de la pantalla. */
.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pestanas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--gris-100); border-radius: var(--radio);
  padding: 5px; margin: 16px 0 10px;
}
.pestana {
  min-height: 48px; border: 0; border-radius: 10px;
  background: transparent; color: var(--gris-600);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pestana .cuenta {
  min-width: 26px; padding: 1px 8px; border-radius: 99px;
  background: var(--gris-200); color: var(--gris-900); font-size: 13px;
}
.pestana.activa { background: var(--blanco); color: var(--gris-900); box-shadow: var(--sombra); }
.pestana.activa .cuenta { background: var(--rojo); color: #fff; }
.pestana.hecho.activa { color: var(--verde); }
.pestana.hecho.activa .cuenta { background: var(--verde); color: #fff; }

.chips-tipo {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  margin: 0 -16px 4px; padding-left: 16px; padding-right: 16px;
  scrollbar-width: none;
}
.chips-tipo::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--gris-200); border-radius: 99px;
  background: var(--blanco); color: var(--gris-900);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.chip b { font-weight: 700; color: var(--gris-600); }
.chip.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip.activo b { color: #fff; }
.chip.vacio { opacity: .55; }

.filtro-rapido { margin-bottom: 6px; }
.filtro-rapido input { min-height: 48px; }

.grupo-area.sub { margin-top: 14px; color: var(--gris-600); font-weight: 600; }
.punto .detalle .quien {
  white-space: normal; margin-top: 2px; font-size: 13px; color: var(--gris-900);
}
.punto.hecho .detalle .quien { color: var(--verde); font-weight: 600; }
.punto .detalle .quien.alerta { color: var(--rojo); font-weight: 600; }
.punto.hecho .marca { color: var(--verde); font-weight: 700; }
.punto:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
/* La regla general de borde (.tarjeta, .punto) pisaba la franja de color de
   la izquierda: se repone aquí para que hecho/le toca se distinga de lejos. */
.punto { border-left-width: 5px; }
.punto.hecho { border-left-color: var(--verde-borde); }
.punto.vencido { border-left-color: var(--rojo); }

/* Cronograma (extras.js) */
.semana-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.semana-nav .btn { width: auto; min-height: 44px; padding: 0 18px; margin: 0; }

/* No se pudo hacer: amarillo, sigue pendiente (no es un hecho) */
.punto.nopudo { border-left-color: #eab308; background: #fefce8; }
.punto.nopudo .quien.alerta { color: #a16207; font-weight: 700; }

/* Ubicación activa (rastreo.js): siempre visible para que el técnico sepa */
.gps-pastilla {
  position: fixed; left: 10px; bottom: 10px; z-index: 50;
  background: rgba(15, 23, 42, .78); color: #fff; font-size: 11.5px;
  padding: 4px 10px; border-radius: 999px; pointer-events: none;
}
.gps-pastilla[data-estado="fuera"] { background: rgba(100, 116, 139, .75); }
.gps-pastilla[data-estado="permiso"] { background: #b91c1c; }