/* Ruta-viva — mobile-first, alto contraste para leer al sol, botones grandes.
 *
 * Disposición: lista compacta de tarjetas para recorrer con el pulgar; acciones
 * en una sola fila; formularios como hoja inferior con "Guardar" siempre visible.
 *
 * Colores: todos viven aquí, tomados del sitio de SOCODA (socoda.com.co):
 * rojo del logo y botones #E90128, rojo oscuro de la barra superior #940002,
 * grafito del botón "Comprar ahora" #23292C y gris del buscador #F8F8F8.
 * Acciones en rojo; selecciones en grafito, para que no todo sea rojo.
 * Tema claro único a propósito: es lo que mejor se lee al sol.
 */
:root {
  --marca: #e90128;          /* rojo SOCODA: logo y acciones principales */
  --marca-texto: #ffffff;    /* texto sobre --marca (contraste 4,7:1) */
  --marca-oscuro: #940002;   /* barra superior del sitio */
  --marca-suave: #fdecef;    /* fondos suaves derivados del rojo */
  --grafito: #23292c;        /* botón "Comprar ahora" del sitio: selecciones */
  --grafito-texto: #ffffff;
  --acento: #23292c;         /* foco del teclado (visible también sobre rojo) */
  --fondo: #ffffff;
  --superficie: #f8f8f8;
  --texto: #1f1f1f;
  --suave: #4d4d4d;
  --linea: #dcdcdc;
  --linea-fuerte: #8c8c8c;
  --ok-fondo: #dcfce7;
  --ok-texto: #14532d;
  --aviso-fondo: #fff4cc;
  --aviso-texto: #5c3d00;
  --info-fondo: #eceeef;
  /* Pines del mapa: qué tiene que hacer el vendedor en cada ferretería */
  --pin-rojo: #e90128;       /* pendiente (rojo SOCODA) */
  --pin-amarillo: #f2b600;   /* pidió visita después */
  --pin-verde: #1f9d55;      /* cliente */
  --pin-gris: #8c8c8c;       /* visitada hace poco */
  --pin-yo: #1a73e8;         /* el vendedor (azul, como en Google Maps) */
  --radio: 14px;
  --radio-chico: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Nada puede ensanchar la página: en el celular eso desplaza todo de lado
 * y hace que los toques en la barra inferior caigan sobre otro elemento. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; touch-action: manipulation; }
body {
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* Encabezado: una sola línea */
.barra {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 4px solid var(--marca-oscuro);
  border-bottom: 1px solid var(--linea);
  background: var(--fondo);
  color: var(--texto);
}
.barra strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; color: var(--marca); }
.barra span { display: none; }
.estado-sync {
  min-height: 44px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
  cursor: pointer;
}
.estado-sync:empty { display: none; }
.estado-neutro { background: var(--superficie); color: var(--texto); }
.estado-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.estado-alerta { background: var(--aviso-fondo); color: var(--aviso-texto); }

main { max-width: 760px; margin: 0 auto; padding: 12px 16px; display: grid; gap: 12px; }
main > * { min-width: 0; }

.cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cabecera p { margin: 0; color: var(--suave); font-size: .95rem; }
.cuenta { font-weight: 700; color: var(--suave); white-space: nowrap; }
.grupo {
  margin-top: 6px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--suave);
}

/* Avisos de una línea */
.aviso-linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radio-chico);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  font-size: .9rem;
}
.aviso-linea .enlace { min-height: 44px; padding: 0 4px; color: var(--aviso-texto); }

/* Pestañas de zona: se deslizan de lado dentro de su propia franja */
.chips-zona {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 2px 16px 4px;
  scrollbar-width: none;
}
.chips-zona::-webkit-scrollbar { display: none; }
.chip-zona {
  flex: none;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--linea);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.chip-zona span { color: var(--suave); font-weight: 600; margin-left: 4px; }
.chip-zona.activo { background: var(--grafito); border-color: var(--grafito); color: var(--grafito-texto); }
.chip-zona.activo span { color: var(--grafito-texto); opacity: .85; }

/* Formularios */
.filtros { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filtros input[type="search"] { grid-column: 1 / -1; }
input, select, textarea {
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
}
/* Mínimo 16px en campos: con menos, el iPhone hace zoom al tocarlos. */
select { padding-right: 4px; font-size: max(16px, 1rem); }
textarea { min-height: 72px; resize: vertical; }
/* Selector de archivo como botón normal: el control nativo tiene un ancho fijo que desborda. */
.archivo { position: relative; overflow: hidden; }
.archivo input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.archivo:focus-within { outline: 3px solid var(--acento); outline-offset: 2px; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 12px;
  border: 2px solid var(--grafito);
  border-radius: var(--radio-chico);
  background: var(--fondo);
  color: var(--grafito);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-pri { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.btn-off { border-color: var(--linea); color: var(--suave); font-weight: 600; font-size: .85rem; cursor: default; }
.btn-ancho { width: 100%; }
.btn-ruta { width: 100%; gap: 8px; }
.btn-chico { min-height: 44px; padding: 6px 14px; font-size: .95rem; }
.acciones-fila { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.enlace {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--marca);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Tarjetas: compactas, todo el cuerpo abre la ficha */
.lista-tarjetas { display: grid; gap: 10px; }
.tarjeta {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  cursor: pointer;
}
.tarjeta:not([data-ficha]) { cursor: default; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tarjeta-cab > :first-child { min-width: 0; }
.tarjeta h3 { font-size: 1.05rem; }
.nombre {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.meta { margin: 0; color: var(--suave); font-size: .92rem; overflow-wrap: anywhere; }
.meta-dir { color: var(--texto); font-weight: 600; }
.aviso {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  font-size: .9rem;
  font-weight: 700;
}
.vacio { margin: 0; padding: 16px 0; color: var(--suave); }

/* Chips de estado */
.chip {
  flex: none;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--superficie);
  color: var(--texto);
}
.chip-nueva { background: var(--superficie); color: var(--texto); }
.chip-visitada { background: var(--info-fondo); color: var(--grafito); }
.chip-seguimiento { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chip-cliente { background: var(--ok-fondo); color: var(--ok-texto); }
.chip-descartada { background: var(--grafito); color: var(--grafito-texto); }
.aviso-descartada { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--grafito); color: var(--grafito-texto); }
.descartar { display: grid; gap: 8px; }
.descartar > summary { list-style: none; }
.descartar > summary::-webkit-details-marker { display: none; }

/* Ficha */
.ficha { display: grid; gap: 12px; }
.ficha dl { display: grid; gap: 8px; margin: 0; }
.ficha dl > div { padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.ficha dt { font-size: .85rem; color: var(--suave); }
.ficha dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Resumen */
.segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmento button {
  min-height: 48px;
  border: 2px solid var(--grafito);
  border-radius: var(--radio-chico);
  background: var(--fondo);
  color: var(--grafito);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.segmento button.activo { background: var(--grafito); border-color: var(--grafito); color: var(--grafito-texto); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--radio);
  background: var(--superficie);
}
.kpi strong { font-size: 1.8rem; line-height: 1; color: var(--marca); font-variant-numeric: tabular-nums; }
.kpi span { margin-top: 4px; color: var(--suave); font-size: .9rem; }
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 6px; border-bottom: 1px solid var(--linea); text-align: left; }
th { font-size: .85rem; color: var(--suave); }
th + th, td + td { text-align: right; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista li span { color: var(--suave); font-size: .92rem; }

/* Datos */
.bloque {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--linea);
  border-radius: var(--radio);
}
.ayuda { margin: 0; color: var(--suave); font-size: .92rem; }

/* Campos con etiqueta y opciones tipo botón (radio/checkbox ocultos) */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 700;
  min-width: 0;
}
.campo legend { margin-bottom: 8px; padding: 0; font-weight: 800; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opciones-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px;
  border: 2px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--fondo);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
}
.opciones-3 .op { min-height: 48px; font-size: .9rem; }
.op input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.op:has(input:checked) { background: var(--grafito); border-color: var(--grafito); color: var(--grafito-texto); }
.op:has(input:focus-visible) { outline: 3px solid var(--acento); }

/* Hoja inferior para formularios: "Guardar" siempre a la vista */
dialog.hoja {
  width: 100%;
  max-width: 640px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  color: var(--texto);
  background: var(--fondo);
}
dialog.hoja::backdrop { background: rgba(10, 16, 28, .55); }
.hoja-form { display: flex; flex-direction: column; max-height: 92dvh; }
.hoja-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--linea);
}
.hoja-cab > div { min-width: 0; }
.hoja-cab p { margin: 2px 0 0; color: var(--suave); font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.cerrar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.hoja-cuerpo { display: grid; gap: 16px; padding: 14px 16px; overflow-y: auto; }
.hoja-pie {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea);
  background: var(--fondo);
}

/* Navegación inferior */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--linea);
  background: var(--fondo);
}
.nav button {
  min-height: 60px;
  border: 0;
  border-top: 4px solid transparent;
  background: var(--fondo);
  color: var(--suave);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.nav button.activo { border-top-color: var(--marca); color: var(--marca); }

/* Aviso emergente */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 9;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: var(--texto);
  color: var(--fondo);
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.visible { opacity: 1; transform: none; }

/* Hoy: Lista | Mapa y Cerca de mí */
.controles-hoy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.distancia { color: var(--texto); }

/* Mapa */
.mapa {
  height: min(62dvh, 560px);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie);
  z-index: 0;
}
.mapa .leaflet-popup-content { margin: 12px; font: inherit; font-size: .95rem; }
.mapa .leaflet-popup-content p { margin: 4px 0; }
.popup { display: grid; gap: 4px; }
.popup .acciones-fila { margin-top: 6px; }
.popup .btn { min-height: 44px; padding: 6px 8px; font-size: .9rem; }
.mapa .leaflet-popup-content a.btn { color: var(--grafito); }
.mapa .leaflet-popup-content a.btn-pri, .mapa .leaflet-popup-content .btn-pri { color: var(--marca-texto); }
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: var(--suave);
}
.leyenda li { display: flex; align-items: center; gap: 6px; }
.punto { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fondo); box-shadow: 0 0 0 1px var(--linea-fuerte); }
.punto-rojo { background: var(--pin-rojo); }
.punto-amarillo { background: var(--pin-amarillo); }
.punto-verde { background: var(--pin-verde); }
.punto-gris { background: var(--pin-gris); }
.punto-yo { background: var(--pin-yo); }

/* Pantallas anchas */
@media (min-width: 720px) {
  .barra span { display: inline; margin-right: auto; opacity: .9; }
  .filtros { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .filtros input[type="search"] { grid-column: auto; }
  dialog.hoja { margin: auto; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}