/* ==========================================================================
   Mi Micro — estilos
   Pensados para personas mayores: letra grande, alto contraste, botones grandes.
   Criterio usado: WCAG 2.2 nivel AA (contraste, tamaño de toque, foco visible).
   ========================================================================== */

:root {
  --letra: 22px;            /* tamaño base; se cambia desde Ajustes (20 a 30 px) */
  --fondo: #ffffff;
  --texto: #111111;
  --azul: #0b3d91;          /* contraste con blanco: 10,4 a 1 */
  --verde: #0a5c2b;         /* 8,2 a 1 */
  --rojo: #a80019;          /* 7,9 a 1 */
  --whatsapp: #075e54;      /* 7,7 a 1 */
  --gris: #f1f3f6;
  --borde: #4a4a4a;
  --foco: #ff8c00;
}

* { box-sizing: border-box; }

/* Lo que está oculto, queda oculto de verdad (también para botones) */
[hidden] { display: none !important; }

html { font-size: var(--letra); }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
}

/* Cada pantalla ocupa todo y muestra una sola tarea */
.pantalla {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0.8rem 0.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.pantalla[hidden] { display: none; }

h1 { font-size: 1.5rem; margin: 0.2rem 0; line-height: 1.2; }
h2 { font-size: 1.2rem; margin: 0.4rem 0 0.2rem; line-height: 1.25; }
p  { margin: 0.3rem 0; }

.titulo-app { font-size: 2rem; text-align: center; color: var(--azul); margin-top: 0.6rem; }
.saludo { text-align: center; font-size: 1.2rem; margin: 0; }

/* ---------- Botones ---------- */
.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 64px;               /* más que los 56 px pedidos */
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: var(--azul);
  border: 3px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  touch-action: manipulation;      /* evita el retraso del doble toque */
}
.boton.grande { min-height: 88px; font-size: 1.3rem; }
.boton.chico  { background: #ffffff; color: var(--azul); border-color: var(--azul); }
.boton.azul   { background: var(--azul); }
.boton.verde  { background: var(--verde); }
.boton.rojo   { background: var(--rojo); }
.boton.whatsapp { background: var(--whatsapp); }
.boton.volver {
  width: auto; align-self: flex-start;
  background: #ffffff; color: var(--texto); border-color: var(--borde);
  min-height: 60px; padding: 0.4rem 1.1rem;
}
.boton:active { filter: brightness(0.85); }
.boton[disabled] { opacity: 0.6; }
.boton .icono { font-size: 1.5em; line-height: 1; }

/* Los títulos reciben el foco solo para que el lector de pantalla los anuncie: sin marco */
h1:focus, h2:focus { outline: none; }

/* Foco bien visible para quien usa teclado o lector de pantalla */
:focus-visible { outline: 4px solid var(--foco); outline-offset: 3px; }

/* ---------- Formularios ---------- */
form { display: flex; flex-direction: column; gap: 0.6rem; }
label { font-weight: 700; }
input[type="search"], input[type="text"], input[type="tel"] {
  width: 100%;
  min-height: 64px;
  padding: 0.5rem 0.8rem;
  font: inherit;
  color: var(--texto);
  background: #ffffff;
  border: 3px solid var(--borde);
  border-radius: 12px;
}
input::placeholder { color: #595959; }   /* 7 a 1 sobre blanco */

/* ---------- Listas de opciones ---------- */
.lista { display: flex; flex-direction: column; gap: 0.6rem; }
.opcion {
  display: block; width: 100%;
  min-height: 72px;
  padding: 0.7rem 0.9rem;
  font: inherit; text-align: left;
  color: var(--texto);
  background: var(--gris);
  border: 3px solid var(--azul);
  border-radius: 14px;
  cursor: pointer;
}
.opcion strong { display: block; font-size: 1.1rem; }
.opcion span { display: block; }

/* Número de la micro, como en el letrero */
.linea {
  display: inline-block;
  min-width: 2.6em;
  padding: 0.05em 0.45em;
  margin: 0.1em 0.15em 0.1em 0;
  font-weight: 800;
  text-align: center;
  color: #ffffff;
  background: var(--azul);
  border-radius: 8px;
}
.linea.metro { background: var(--verde); }

/* ---------- Ruta ---------- */
.resumen {
  padding: 0.8rem;
  font-size: 1.15rem;
  background: #e8f0fe;
  border: 3px solid var(--azul);
  border-radius: 14px;
}
.resumen strong { font-size: 1.4rem; }

.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; counter-reset: paso; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0.8rem 0.8rem 0.8rem 3.6rem;
  background: var(--gris);
  border: 2px solid var(--borde);
  border-radius: 14px;
}
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0.7rem; top: 0.8rem;
  width: 2.2rem; height: 2.2rem; line-height: 2.2rem;
  text-align: center; font-weight: 800; color: #fff;
  background: var(--azul); border-radius: 50%;
}
.pasos li.bajar { border-color: var(--rojo); border-width: 3px; }
.pasos li.bajar::before { background: var(--rojo); }
.pasos .principal { font-weight: 700; font-size: 1.1rem; }

.caja { padding: 0.8rem; background: var(--gris); border: 2px solid var(--borde); border-radius: 14px; }
.caja.destacada { font-size: 1.2rem; background: #fff7e0; border: 3px solid #7a4b00; }
.caja.alerta { background: #fdecea; border: 3px solid var(--rojo); }
.nota { font-size: 0.9rem; color: #333333; }
.fila { display: flex; gap: 0.6rem; }

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; z-index: 2000;
  padding: 0.9rem 1rem;
  font-weight: 700; text-align: center;
  color: #ffffff; background: #111111;
  border: 3px solid #ffffff; border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* ---------- Mapa ---------- */
.pantalla-mapa { max-width: none; padding: 0; gap: 0; height: 100vh; height: 100dvh; }
.barra-mapa { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; }
.barra-mapa h1 { font-size: 1.15rem; }
#mapa { flex: 1; min-height: 12rem; border-top: 2px solid var(--borde); border-bottom: 2px solid var(--borde); }
.pie-mapa { padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pie-mapa p { margin: 0; font-weight: 700; }

/* Botones + y − del mapa más grandes (mínimo 56 px) */
.leaflet-touch .leaflet-bar a, .leaflet-bar a {
  width: 56px; height: 56px; line-height: 56px; font-size: 30px; color: #111;
}
.leaflet-container { font: inherit; font-size: 0.8rem; }
.leaflet-popup-content { font-size: 1rem; margin: 0.7rem; }
.marca {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 24px;
  background: #ffffff; border: 3px solid var(--azul); border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.marca.yo { border-color: var(--rojo); }
.marca.fin { border-color: var(--verde); }

/* Quien pide menos movimiento en su celular no ve animaciones */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}