[hidden] { display: none !important; }
:root {
  --fondo: #f4f6f5; --tarjeta: #fff; --texto: #17201f; --suave: #5b6a68; --linea: #d9e0de;
  --marca: #0b5c56; --marca-2: #0e7a72; --ok: #1b7f3b; --mal: #b3261e; --ojo: #a35b00; --azul: #1f5fbf;
  --r: 14px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-size: 17px; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
#barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--marca); color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
#barra h1 { flex: 1; margin: 0; font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icono { background: none; border: 0; color: inherit; font-size: 30px; line-height: 1; padding: 0 6px; }
.sync:empty { display: none; }
.sync { font-size: 13px; background: #ffffff26; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
main { max-width: 760px; margin: 0 auto; padding: 14px; }
nav#pestanas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
nav#pestanas button { background: none; border: 0; padding: 8px 0 10px; font-size: 13px; color: var(--suave); display: flex; flex-direction: column; align-items: center; gap: 2px; }
nav#pestanas button span { font-size: 22px; }
nav#pestanas button.activa { color: var(--marca); font-weight: 600; }
.tarjeta { background: var(--tarjeta); border-radius: var(--r); padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px #0000000f; border: 1px solid #e7ecea; }
h2 { font-size: 20px; margin: 4px 0 12px; } h3 { font-size: 17px; margin: 0 0 8px; }
.suave { color: var(--suave); font-size: 14px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border-radius: 12px; border: 0;
  font-size: 18px; font-weight: 600; background: var(--marca); color: #fff; padding: 10px 14px; margin: 8px 0; }
.btn:active { filter: brightness(.92); } .btn[disabled] { opacity: .5; }
.btn.claro { background: #e6f1ef; color: var(--marca); } .btn.ok { background: var(--ok); } .btn.mal { background: var(--mal); }
.btn.ojo { background: #fff3e0; color: var(--ojo); } .btn.chico { min-height: 42px; font-size: 15px; margin: 4px 0; }
.fila { display: flex; gap: 8px; } .fila > * { flex: 1; }
label { display: block; font-size: 14px; color: var(--suave); margin: 10px 0 4px; }
input, textarea, select { width: 100%; font-size: 17px; padding: 12px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; color: var(--texto); }
input:focus, textarea:focus { outline: 2px solid var(--marca-2); border-color: transparent; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.cifras b { display: block; font-size: 28px; } .cifras div { background: #f0f5f4; border-radius: 12px; padding: 10px 4px; font-size: 13px; color: var(--suave); }
.etiqueta { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 3px 9px; margin: 0 4px 4px 0; background: #eef2f1; color: var(--suave); }
.etiqueta.confirmada, .etiqueta.revisada { background: #e3f4e8; color: var(--ok); }
.etiqueta.propuesta { background: #e5eefb; color: var(--azul); }
.etiqueta.aproximada, .etiqueta.extraida, .etiqueta.sin_ubicacion { background: #fff3e0; color: var(--ojo); }
.etiqueta.en_duda, .etiqueta.fallido { background: #fdeaea; color: var(--mal); } .etiqueta.visitado { background: #e3f4e8; color: var(--ok); }
.parada { display: flex; gap: 12px; align-items: flex-start; }
.num { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.parada.visitado .num { background: var(--ok); } .parada.fallido .num { background: var(--mal); }
.parada .cuerpo { flex: 1; min-width: 0; } .parada .cuerpo b { display: block; font-size: 17px; }
.parada .mover { display: flex; flex-direction: column; gap: 4px; } .parada .mover button { width: 44px; height: 38px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; font-size: 18px; }
.alerta { border-left: 5px solid var(--ojo); background: #fff8ec; padding: 10px 12px; border-radius: 10px; margin: 8px 0; font-size: 15px; }
.alerta.mal { border-color: var(--mal); background: #fdeeee; } .alerta.ok { border-color: var(--ok); background: #eef8f1; }
.cand { border: 2px solid var(--linea); border-radius: 12px; padding: 10px; margin: 8px 0; } .cand.elegido { border-color: var(--marca-2); background: #eef7f6; }
.motivos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .motivos button { min-height: 52px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; font-size: 15px; }
.motivos button.elegido { border: 2px solid var(--mal); background: #fdeeee; }
#aviso { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; background: #17201f; color: #fff;
  padding: 12px 18px; border-radius: 12px; max-width: 90vw; font-size: 15px; box-shadow: 0 4px 14px #0004; }
#mapa-contenedor { position: fixed; z-index: 4; left: 0; right: 0; top: var(--alto-barra, 56px); bottom: calc(64px + env(safe-area-inset-bottom)); }
#mapa { position: absolute; inset: 0; }
#mapa-panel { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; }
#mapa-panel:empty { display: none; }
.mira { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -34px 0 0 -17px; z-index: 3; pointer-events: none; font-size: 34px; line-height: 34px; text-align: center; }
.vacio { text-align: center; color: var(--suave); padding: 30px 10px; }
.pila > * + * { margin-top: 6px; }
/* Aviso de versión nueva (lo enciende la app Android). */
#actualizar { position: fixed; z-index: 30; left: 10px; right: 10px; top: calc(var(--alto-barra, 56px) + 8px); display: flex; gap: 10px; align-items: center;
  background: #fff4d6; color: #4a3500; border: 1px solid #e3b740; border-radius: 12px; padding: 10px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
#actualizar[hidden] { display: none; }
#actualizar span { flex: 1; font-size: 15px; }
#actualizar button { background: #0b5c56; color: #fff; border: 0; border-radius: 9px; padding: 9px 12px; font-size: 15px; font-weight: 600; }