/* Móvil, pleno sol: alto contraste y botones grandes */
:root { --azul: #1f4e78; --azul2: #2e75b6; --naranja: #f4a261; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, sans-serif;
       font-size: 18px; line-height: 1.45; background: #f2f5f9; color: #111; }
main { max-width: 720px; margin: 0 auto; padding: 12px 14px 40px; }
.cabecera { display: flex; justify-content: space-between; align-items: center;
            background: var(--azul); color: #fff; padding: 12px 16px; position: sticky; top: 0; z-index: 1000; }
.cabecera a { color: #fff; text-decoration: none; font-weight: 600; }
h1 { font-size: 1.45rem; margin: 12px 0 6px; color: var(--azul); }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
.sub { margin-top: 0; color: #444; }
.tarjeta { background: #fff; border-radius: 10px; padding: 14px 16px; margin: 12px 0;
           box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.tarjeta ol, .tarjeta ul { padding-inline-start: 1.3em; margin: 0; }
.tarjeta li { margin-bottom: 6px; }
.aviso { border-inline-start: 6px solid var(--naranja); }
.boton { display: inline-block; background: var(--azul); color: #fff; text-decoration: none;
         border: 0; border-radius: 10px; padding: 12px 18px; font-size: 1rem; font-weight: 600;
         cursor: pointer; text-align: center; font-family: inherit; }
.boton:disabled { background: #9e9e9e; cursor: default; }
.boton.grande { display: block; width: 100%; padding: 18px; font-size: 1.2rem; margin: 10px 0; }
.boton.secundario { background: var(--azul2); }
.boton.opcion { display: block; width: 100%; padding: 20px; font-size: 1.25rem; margin: 0; }
.boton.opcion small { display: block; font-weight: 400; font-size: .9rem; opacity: .9; }
.boton.naranja { background: #e76f51; }
.rejilla { display: grid; gap: 10px; margin-top: 14px; }
.fila-botones { display: flex; gap: 8px; margin-top: 10px; }
.fila-botones .boton { flex: 1; }
.fila-botones .boton.doble { flex: 2; }
.doc { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #eee; }
.doc input { width: 26px; height: 26px; flex: none; margin: 2px 0 0; }
.resumen { background: #e3ecf5; border-radius: 8px; padding: 8px 12px; font-weight: 600; color: var(--azul); }
#mapa { height: 50vh; min-height: 280px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.15);
        direction: ltr; }                       /* Leaflet siempre LTR, también en árabe */
#num-paso { margin: 0; color: #555; }
#titulo-paso { font-size: 1.3rem; color: var(--azul); }
#texto-paso { font-size: 1.1rem; font-weight: 600; margin: 4px 0; }
#pie { margin-top: 16px; }
.centro { text-align: center; }
.pequeno { font-size: .9rem; color: #555; }
.oculto { display: none !important; }
/* Legibilidad sobre la ortofoto */
.leaflet-tooltip { font-weight: 700; font-size: 14px; }
.leaflet-control-layers { font-size: 15px; }