@charset "UTF-8";
/* =====================================================================
   CALLEJEA — hoja de estilo única.

   ORDEN DE JUAN: esto NO puede parecer una aplicación hecha por una IA.
   Las seis reglas de abajo son la diferencia entre una guía de viaje y una
   plantilla de las que se ven en todas partes. NO SE DESHACEN sin hablarlo.

   1. SERIFA PARA LEER, PALO SECO PARA MANEJAR. El contenido de guía va en
      serifa; los datos, botones y navegación en palo seco. CERO fuentes
      descargadas: tiene que funcionar sin cobertura y sin CDN.
   2. EL COLOR SIGNIFICA ALGO. Verde = comprobado. Ámbar = orientativo.
      Rojo = aviso. La marca es tierra almagre — NO un azul corporativo — y
      el botón principal es TINTA, no de color.
   3. HILOS Y AIRE, NO CAJAS. Filetes de 1px y espacio en blanco. Nada de
      tarjetas blancas redondeadas con sombra difusa: ese es el tic número
      uno de las plantillas genéricas.
   4. JERARQUÍA DE VERDAD. Titulares grandes en serifa; cifras con cuerpo
      grande y `tabular-nums`; texto de apoyo claramente menor.
   5. NI PAPEL BLANCO NI TINTA NEGRA. Papel cálido y tinta parda. El blanco
      puro delata plantilla y cansa la vista al sol.
   6. NINGÚN EMOJI COMO ICONO, ningún degradado, ningún "✨".

   Y dos que son de legibilidad, no de estética:
   - MODO SOL ≠ MODO OSCURO. El de calle sube el contraste y agranda todo.
   - TODO EN `rem`: si alguien agranda la letra en su móvil, la página tiene
     que seguir funcionando (probado al 200 %).

   ORDEN DEL ARCHIVO: 1 variables · 2 base · 3 estructura · 4 tipografía ·
   5 datos y sellos · 6 avisos · 7 formularios · 8 listas y tablas ·
   9 el plan · 10 la calle · 11 mapa · 12 muestrario · 13 modos · 14 imprimir
   ===================================================================== */

/* ---------- 1. Variables ---------- */
:root {
    --papel:        #f7f3ec;
    --papel-hueco:  #efe9df;
    --tinta:        #241d16;
    --tinta-suave:  #5c5147;
    --filete:       #d6cbb9;
    --almagre:      #9c3d20;   /* la marca */
    --verificado:   #2e6b3e;
    --orientativo:  #96660f;
    --aviso:        #a32a1c;

    --serifa: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
    --palo:   "Helvetica Neue", Helvetica, Arial, sans-serif;

    --medida: 38rem;           /* ancho cómodo de lectura */
    --ancho:  62rem;           /* ancho de la página */
    --aire:   1.6rem;
    --toque:  3rem;            /* 48px: objetivo táctil mínimo */
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--serifa);
    font-size: 1.0625rem;
    line-height: 1.65;
}

:focus-visible {
    outline: 2px solid var(--almagre);
    outline-offset: 2px;
}

/* Guardas contra el desbordamiento lateral. Sin esto, con la letra al 200 %
   —o con una palabra larga— la página se sale de la pantalla y hay que
   deslizar en horizontal, que es el peor defecto en un móvil. Lección de
   Plaza: a un hijo de un `flex` hay que darle `min-width: 0` o no encoge. */
.principal, .cabecera, .pie, .migas { overflow-wrap: anywhere; }
.chequeo li, .parada, .cifras, .aspecto-grupo { flex-wrap: wrap; }
.chequeo li > *, .parada > *, .cifra-bloque { min-width: 0; }
/* Lo mismo vale para las rejillas, y ahí muerde más fuerte: una celda de
   rejilla tampoco encoge por debajo de su contenido salvo que se le diga.
   Medido a 320 px con la letra al 200 %: el campo de fecha, que trae un
   ancho propio grande, sacaba la página 40 px por la derecha. */
.pareja > *, .terna > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinta);
    color: var(--papel);
    padding: .6rem 1rem;
    font-family: var(--palo);
}
.saltar:focus { left: 0; z-index: 10; }

/* ---------- 3. Estructura ---------- */
.cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.4rem var(--aire) 1rem;
    border-bottom: 1px solid var(--filete);
    max-width: var(--ancho);
    margin: 0 auto;
}

.marca {
    font-family: var(--serifa);
    font-size: 1.35rem;
    font-variant-caps: small-caps;
    letter-spacing: .08em;
    text-decoration: none;
    color: var(--tinta);
    border-bottom: 2px solid var(--almagre);
    padding-bottom: .1rem;
}

.cabecera-nav { font-family: var(--palo); font-size: .85rem; }
.cabecera-nav a { color: var(--tinta-suave); }
.quien { color: var(--tinta-suave); margin-right: .6rem; }

.migas {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: .8rem var(--aire) 0;
    font-family: var(--palo);
    font-size: .85rem;
    color: var(--tinta-suave);
}
.migas a { color: var(--tinta-suave); }
.migas-sep { opacity: .5; }

.principal {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 2.2rem var(--aire) 3rem;
}
.principal > * { max-width: var(--medida); }
.principal > .ancho { max-width: none; }

.pie {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 1.6rem var(--aire) 3rem;
    border-top: 1px solid var(--filete);
    font-family: var(--palo);
    font-size: .82rem;
    color: var(--tinta-suave);
}
.pie p { margin: 0 0 .3rem; }
.pie-legal { margin-top: 1rem; }
.pie-legal a { color: var(--tinta-suave); }

/* ---------- 4. Tipografía ---------- */
h1 {
    font-family: var(--serifa);
    font-size: clamp(2rem, 6vw, 2.9rem);
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 .6rem;
    letter-spacing: -.01em;
}

h2 {
    font-family: var(--serifa);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 2.4rem 0 .8rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--filete);
}

h3 {
    font-family: var(--palo);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--tinta-suave);
    font-weight: 700;
    margin: 1.8rem 0 .5rem;
}

p { margin: 0 0 1.05rem; }

.entradilla { font-size: 1.2rem; line-height: 1.55; }
.apoyo { font-family: var(--palo); font-size: .9rem; color: var(--tinta-suave); }
.apoyo-mini { font-family: var(--palo); font-size: .78rem; color: var(--tinta-suave); }

a { color: var(--almagre); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

blockquote {
    margin: 1.2rem 0;
    padding: .2rem 0 .2rem 1rem;
    border-left: 3px solid var(--filete);
    font-style: italic;
    color: var(--tinta-suave);
}

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--papel-hueco);
    padding: .1rem .3rem;
}

/* ---------- 5. Datos y sellos: el color significa algo ---------- */
.dato { display: block; margin: 0 0 .5rem; }

.dato-etiqueta {
    font-family: var(--palo);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-suave);
}

.dato-valor {
    font-family: var(--palo);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}

/* ⚠ ESTE SELLO NO PUEDE LLEVAR `white-space: nowrap`, y lo llevaba desde el
   D02. Los sellos cortos («verificado») caben en cualquier sitio, pero el que
   se usa de verdad es «comprobado el 14 de agosto de 2026»: con la letra al
   200 % mide 441 px y, sin poder partirse, sacaba la página 117 px por la
   derecha en un móvil de 375. Medido el 14-08 en la ficha, y pasaba igual en
   el plan y en el muestrario. Que parta en dos líneas no molesta a nadie;
   deslizar la página en horizontal, sí. */
.sello {
    font-family: var(--palo);
    font-size: .72rem;
    letter-spacing: .04em;
    padding: .1rem .4rem;
    border: 1px solid currentColor;
    overflow-wrap: anywhere;
    display: inline-block;
}
.sello-verificado  { color: var(--verificado); }
.sello-orientativo { color: var(--orientativo); }
.sello-pendiente,
.sello-caducado    { color: var(--tinta-suave); }
/* Lo que decimos nosotros no es verde ni ámbar: no es un dato de terceros
   comprobado ni uno que envejece. Es nuestro, y va con la marca de la casa. */
.sello-nuestro     { color: var(--almagre); }

/* Cifras grandes: kilómetros, pisos, esfuerzo */
.cifras {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 1.4rem 0 1.8rem;
    padding: 1rem 0;
    border-top: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
}
.cifra-bloque { display: flex; flex-direction: column; }
.cifra {
    font-family: var(--palo);
    font-variant-numeric: tabular-nums;
    font-size: 2.4rem;
    line-height: 1;
}
.cifra-unidad { font-size: .95rem; margin-left: .18rem; color: var(--tinta-suave); }
.cifra-pie {
    font-family: var(--palo);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-suave);
    margin-top: .3rem;
}

/* ---------- 6. Avisos: filete lateral, sin caja redondeada ---------- */
.aviso {
    font-family: var(--palo);
    font-size: .95rem;
    border-left: 3px solid var(--filete);
    padding: .55rem 0 .55rem .9rem;
    margin: 0 0 1.2rem;
    color: var(--tinta-suave);
}
/* Un aviso puede llevar dentro una lista (lo que falta del formulario).
   Se le quita el hueco al último hijo o el filete lateral queda colgando. */
.aviso > :last-child { margin-bottom: 0; }

.aviso-nota  { border-left-color: var(--filete); }
.aviso-bueno { border-left-color: var(--verificado); color: var(--verificado); }
.aviso-ojo   { border-left-color: var(--orientativo); color: var(--orientativo); }
.aviso-malo  { border-left-color: var(--aviso); color: var(--aviso); }

/* ---------- 7. Formularios ---------- */
form { margin: 1.4rem 0; }

label {
    display: block;
    font-family: var(--palo);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-suave);
    margin: 0 0 .3rem;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="search"], select, textarea {
    width: 100%;
    font-family: var(--palo);
    font-size: 1rem;
    padding: .65rem .7rem;
    color: var(--tinta);
    background: transparent;
    border: 1px solid var(--filete);
    border-radius: 2px;
    margin: 0 0 1.1rem;
    min-height: var(--toque);
}

input[type="radio"], input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--almagre);
    margin: 0 .4rem 0 0;
    vertical-align: -.15rem;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
    display: inline;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    color: var(--tinta);
    margin-right: 1.1rem;
}

button, .boton {
    display: inline-block;
    font-family: var(--palo);
    font-size: .95rem;
    letter-spacing: .02em;
    padding: .7rem 1.4rem;
    min-height: var(--toque);
    color: var(--papel);
    background: var(--tinta);      /* el principal es TINTA, no azul */
    border: 1px solid var(--tinta);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
}
button:hover, .boton:hover { background: var(--almagre); border-color: var(--almagre); }

.boton-secundario { background: transparent; color: var(--tinta); }
.boton-secundario:hover { background: var(--papel-hueco); color: var(--tinta); }
.boton-pequeno { padding: .45rem .9rem; min-height: 2.4rem; font-size: .85rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend {
    font-family: var(--palo);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-suave);
    padding: 0;
    margin-bottom: .4rem;
}

/* Lo opcional va plegado: las tres respuestas primero, lo demás si apetece.
   `details` es de HTML y funciona sin una línea de JavaScript. */
details {
    margin: 1.6rem 0;
    border-top: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
    padding: .2rem 0;
}
summary {
    font-family: var(--palo);
    font-size: .9rem;
    letter-spacing: .02em;
    padding: .8rem 0;
    min-height: var(--toque);
    cursor: pointer;
}
details[open] summary { border-bottom: 1px solid var(--filete); }
details > *:not(summary) { margin-top: 1rem; }

/* Los «lo de siempre»: una opción por línea, con su explicación al lado. */
.opciones { margin: 0 0 1.2rem; }
.opciones p { margin: 0 0 .55rem; }
.opciones .apoyo-mini { display: block; padding-left: 1.6rem; }

.aspecto { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--filete); }
.aspecto-grupo { margin-bottom: .7rem; }
.aspecto-ayuda { margin: .6rem 0 0; }

/* ---------- 8. Listas y tablas ---------- */
.chequeo { list-style: none; padding: 0; margin: 1.2rem 0; font-family: var(--palo); font-size: .95rem; }
.chequeo li {
    display: flex;
    justify-content: space-between;
    gap: .6rem 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--filete);
}
.chequeo .estado { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chequeo .si  { color: var(--verificado); }
.chequeo .no  { color: var(--aviso); }
.chequeo .hum { color: var(--orientativo); }

table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-family: var(--palo); font-size: .95rem; }
caption { text-align: left; font-family: var(--palo); font-size: .82rem; text-transform: uppercase;
          letter-spacing: .08em; color: var(--tinta-suave); padding-bottom: .5rem; }
th { text-align: left; font-weight: 700; font-size: .78rem; text-transform: uppercase;
     letter-spacing: .06em; color: var(--tinta-suave); padding: .4rem .6rem .4rem 0;
     border-bottom: 1px solid var(--filete); }
td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--filete); vertical-align: top; }
td.numero { font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }

/* ---------- 9. El plan del día ---------- */
.plan { list-style: none; padding: 0; margin: 1.4rem 0; }

.parada {
    display: flex;
    gap: 1rem;
    padding: .7rem 0;
    align-items: baseline;
}
.parada-hora {
    font-family: var(--palo);
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
    color: var(--tinta-suave);
    min-width: 3.4rem;
}
.parada-cuerpo { display: block; }
.parada-nombre { font-family: var(--serifa); font-size: 1.15rem; font-weight: 400; }
.parada-detalle { display: block; font-family: var(--palo); font-size: .85rem; color: var(--tinta-suave); }

.parada-hecha .parada-nombre { text-decoration: line-through; color: var(--tinta-suave); }
.parada-saltada .parada-nombre { color: var(--tinta-suave); font-style: italic; }
.parada-ahora {
    border-left: 3px solid var(--almagre);
    margin-left: -1rem;
    padding-left: calc(1rem - 3px);
}

/* La comida y las citas del viajero: paradas, pero de otra clase */
.parada-comida .parada-nombre,
.parada-cita .parada-nombre { font-style: italic; }

/* Una parada que todavía no se ha comprado. NO va difuminada: aquí no hay
   nombre porque el servidor no lo ha mandado. Se ve la forma del día —la
   hora y el rato que se está— y nada más. */
.parada-oculta .parada-nombre {
    font-family: var(--palo);
    font-size: .95rem;
    color: var(--tinta-suave);
    letter-spacing: .06em;
    border-bottom: 1px dashed var(--filete);
}

/* La cuesta fuerte, colgando de su parada */
.cuesta { list-style: none; padding: .2rem 0 .6rem 4.4rem; }
.cuesta .aviso { margin-bottom: .4rem; }
.cuesta p:last-child { margin-bottom: 0; }

/* El cierre del día: el titular manda, y la imagen se ve a tamaño real
   dentro de su ancho. */
.cierre-titular { font-size: 1.35rem; line-height: 1.4; }
.cierre-imagen { margin: 1.2rem 0; border: 1px solid var(--filete); }
.cierre-imagen img { width: 100%; height: auto; display: block; }

/* «Guarda esto»: el código con el que se vuelve a entrar desde otro móvil.
   Grande y con espacios entre cifras, porque se copia a mano en un papel. */
.guardar { margin: 2rem 0; padding-top: 1.2rem; border-top: 1px solid var(--filete); }
.guardar h2 { border-bottom: 0; margin-top: 0; font-size: 1.2rem; }
.codigo-plan {
    display: inline-block;
    font-family: var(--palo);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    letter-spacing: .12em;
    padding: .2rem .5rem;
    border: 1px solid var(--filete);
    overflow-wrap: anywhere;
}
body.sol .codigo-plan { font-size: 1.9rem; }

/* El candado: hilos arriba y abajo, sin caja ni cartel */
.candado {
    margin: 2.4rem 0;
    padding: 1.4rem 0;
    border-top: 2px solid var(--tinta);
    border-bottom: 1px solid var(--filete);
}
.candado h2 { margin-top: 0; border-bottom: 0; }

/* El traslado entre paradas: un hilo, no una caja */
.tramo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .15rem 0 .15rem 4.4rem;
    font-family: var(--palo);
    font-size: .82rem;
    color: var(--tinta-suave);
}
.tramo-linea {
    width: 1px;
    height: 1.5rem;
    background: var(--filete);
    display: inline-block;
}

/* ---------- 9 bis. La ficha de un sitio: la pantalla de LEER ----------
   Aquí manda la lectura, no la interfaz. Medida corta, interlínea holgada,
   serifa, y una letra capital en el primer párrafo: es tipografía de libro,
   de las que ninguna plantilla trae puesta. */
.ficha > h1 {
    margin-bottom: .2rem;
}

.ficha-niveles {
    font-family: var(--palo);
    font-size: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    align-items: baseline;
    padding: .6rem 0 .9rem;
    border-bottom: 1px solid var(--filete);
    margin-bottom: 1.6rem;
}
.ficha-niveles-rotulo {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    color: var(--tinta-suave);
}
/* Son el mando principal de esta pantalla y se pulsan con el pulgar: tienen
   que medir lo que mide un botón, aunque parezcan enlaces. Medido: sin esto
   se quedaban en 22 px, menos de la mitad del objetivo táctil de la casa. */
.ficha-niveles a,
.ficha-niveles [aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
}
.ficha-niveles a { color: var(--tinta-suave); }
.ficha-niveles [aria-current] {
    color: var(--tinta);
    border-bottom: 2px solid var(--almagre);
}

.ficha-cuerpo {
    font-size: 1.12rem;
    line-height: 1.75;
    max-width: var(--medida);
}

/* La capital. Solo en pantallas con sitio y solo en el primer párrafo: en un
   móvil estrecho o con la letra muy grande estorba más que adorna. */
@media (min-width: 34rem) {
    .ficha-cuerpo > p:first-of-type::first-letter {
        float: left;
        font-size: 3.1em;
        line-height: .82;
        padding: .06em .09em 0 0;
        color: var(--almagre);
    }
}

.ficha-voz { margin: 1.8rem 0; }
.ficha-voz h2 { border-bottom: 0; margin-bottom: .6rem; font-size: 1.1rem; }

/* Lo práctico: una banda entre filetes, como las cifras del plan */
.ficha-practico {
    border-top: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
    padding: 1rem 0 .6rem;
    margin: 1rem 0 1.8rem;
}
/* Cuando un dato no está comprobado no se pinta el valor: se pinta el hueco,
   y se ve que es un hueco. */
.dato-hueco {
    font-family: var(--palo);
    font-size: .92rem;
    font-style: italic;
    color: var(--tinta-suave);
}

.ficha-juego-pregunta { font-size: 1.1rem; }
.ficha-juego summary { font-family: var(--palo); font-size: .9rem; }

.ficha-fuentes {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.6rem;
    font-family: var(--palo);
    font-size: .88rem;
}
.ficha-fuentes > li {
    padding: .7rem 0;
    border-bottom: 1px solid var(--filete);
}
.ficha-fuentes blockquote {
    font-family: var(--serifa);
    font-size: .95rem;
    margin: .5rem 0 0;
}

.ficha-imagenes figure { margin: 1.2rem 0; }
.ficha-imagenes img { width: 100%; height: auto; display: block; }
.ficha-imagenes figcaption { margin-top: .3rem; }

/* ---------- 10. La calle (ruta activa) ---------- */

/* Hueco para la barra de botones, que en la calle va pegada abajo del todo.
   Va en rem a propósito, y da para el caso peor: con la letra al 200 % los
   tres botones se apilan y la barra mide unos 12 rem (3 × el objetivo táctil,
   más los huecos y el aire). Medido: con 10 rem, al 200 % los últimos 79 px
   del contenido quedaban DEBAJO de la barra y no había forma de leerlos. */
body.calle .principal { padding-bottom: 13rem; }

.calle-siguiente {
    border-top: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
    padding: 1.2rem 0;
    margin: 1.2rem 0;
}
.calle-siguiente .parada-nombre { font-size: 1.6rem; }

/* ⚠ AQUÍ HUBO UN FALLO REAL, y solo se vio midiendo: esta barra estaba con
   `position: sticky; bottom: 0`, y sticky-abajo NO sirve para esto. Sujeta un
   elemento mientras su sitio natural queda por DEBAJO de la pantalla; en
   cuanto lo pasas, se suelta y se va con el scroll. Medido el 14-08 a 375 px:
   al bajar a media página los tres botones estaban 193 px por encima del
   borde. En la calle eso son los mandos desaparecidos justo cuando llegas a
   un sitio. Va FIJA, que es lo que decía la cabecera de esta sección desde el
   D02: «botones grandes pegados abajo». */
.acciones-calle {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .8rem 0;
    background: var(--papel);
    border-top: 1px solid var(--filete);
}
/* Fija solo en la calle: en el muestrario se mira en su sitio, no flotando. */
body.calle .acciones-calle {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: .8rem var(--aire);
}
.acciones-calle button, .acciones-calle .boton { flex: 1; text-align: center; }
/* Cada botón va en su propio formulario (así funcionan sin JavaScript), y un
   formulario es un bloque: sin esto los tres se apilarían en vertical. */
.acciones-calle form { flex: 1 1 8rem; margin: 0; min-width: 0; }
.acciones-calle form button { width: 100%; }

/* En la calle NO hay botones pequeños. `.boton-pequeno` mide 2,4 rem, que
   está por debajo del objetivo táctil que declara este mismo archivo, y el
   de deshacer una parada mal marcada va metido en una fila estrecha, con el
   móvil en una mano. Se le devuelve el tamaño solo aquí: en el panel y en los
   mandos de aspecto el botón pequeño se queda como está. */
body.calle .parada button { min-height: var(--toque); }

/* El espejo que recalcula el día en el propio móvil. Va después de la parada
   siguiente y antes de los botones: primero qué toca, luego si sigue
   cuadrando, luego qué se hace. */
.reajuste { margin: 1.6rem 0; padding-top: 1.2rem; border-top: 1px solid var(--filete); }
.reajuste h2 { border-bottom: 0; margin-top: 0; font-size: 1.2rem; }
.reajuste .lista-falta { margin-bottom: .8rem; }

/* La distancia hasta el siguiente sitio. Cifra grande, porque se mira
   andando y de reojo. */
.gps { margin: 1.6rem 0; padding-top: 1.2rem; border-top: 1px solid var(--filete); }
.gps-linea {
    font-family: var(--palo);
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    margin: .8rem 0 .4rem;
    min-height: 1.6em;
}
body.sol .gps-linea { font-size: 1.9rem; }

/* ---------- 11. Mapa ---------- */
.mapa {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--papel-hueco);
    border: 1px solid var(--filete);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--palo);
    font-size: .85rem;
    color: var(--tinta-suave);
    margin: 1.2rem 0;
}
@media (min-width: 48rem) { .mapa { aspect-ratio: 16 / 9; } }

/* ---------- 11 bis. El panel (zona interna) ---------- */
.panel-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: .8rem var(--aire) 0;
    font-family: var(--palo);
    font-size: .9rem;
}
.panel-nav a { color: var(--tinta-suave); text-decoration: none; padding: .2rem 0; }
.panel-nav a:hover { color: var(--almagre); }
.panel-nav a[aria-current="page"] {
    color: var(--tinta);
    border-bottom: 2px solid var(--almagre);
}

.panel-ciudad {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: .6rem var(--aire) 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.panel-ciudad label { margin: 0; }
.panel-ciudad select { width: auto; margin: 0; }

/* Dos y tres columnas cuando hay sitio (panel y formulario del viaje) */
.pareja, .terna { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) {
    .pareja { grid-template-columns: 1fr 1fr; }
    .terna  { grid-template-columns: 1fr 1fr 1fr; }
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: flex-end;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--filete);
}
.filtros label { margin: 0 0 .2rem; }
.filtros input, .filtros select { margin: 0; width: auto; min-width: 8rem; }

.linea-botones {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
}
.linea-botones label { margin: 0 0 .2rem; }
.linea-botones select { margin: 0; width: auto; }

form.en_linea { display: inline; margin: 0; }

/* Candidatos cosechados: una ficha por línea, sin caja */
.candidato {
    padding: .9rem 0;
    border-bottom: 1px solid var(--filete);
}
.candidato-cabeza { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.candidato-etiquetas { margin: .3rem 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.etiqueta {
    font-family: var(--palo);
    font-size: .72rem;
    border: 1px solid var(--filete);
    padding: .05rem .35rem;
    white-space: nowrap;
}
.candidato-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .4rem; }
.candidato-acciones form { margin: 0; }
.motivo-corto { width: auto; min-width: 12rem; margin: 0 .4rem 0 0; min-height: 2.4rem; padding: .3rem .5rem; }

.lista-falta {
    font-family: var(--palo);
    font-size: .9rem;
    color: var(--tinta-suave);
    margin: 0 0 1.2rem;
    padding-left: 1.2rem;
}

/* ---------- 12. Muestrario ---------- */
.muestra {
    border-top: 1px solid var(--filete);
    padding-top: 1.2rem;
    margin-top: 2rem;
}
.muestra-etiqueta {
    font-family: var(--palo);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--almagre);
    margin-bottom: .6rem;
    display: block;
}

/* ---------- 13. Modos ---------- */

/* MODO SOL: para la calle. No es un modo oscuro. */
body.sol {
    --papel: #ffffff;
    --papel-hueco: #f0f0f0;
    --tinta: #000000;
    --tinta-suave: #303030;
    --filete: #6a6a6a;
    --almagre: #8a2c12;
    --verificado: #1c5b2b;
    --orientativo: #7a5000;
    --aviso: #8f1a0e;
    font-size: 1.2rem;
}
body.sol .cifra { font-size: 3.2rem; }
body.sol .dato-valor, body.sol .parada-hora { font-size: 1.15rem; }
body.sol .apoyo { font-size: 1rem; }

/* Oscuro del sistema (salvo que se haya pedido claro a mano) */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --papel:       #14110e;
        --papel-hueco: #1d1915;
        --tinta:       #ede6da;
        --tinta-suave: #a89b8a;
        --filete:      #3b342b;
        --almagre:     #d0714c;
        --verificado:  #79b98a;
        --orientativo: #d3a03f;
        --aviso:       #e08575;
    }
    :root:not([data-tema="claro"]) body.sol {
        --papel: #000000;
        --papel-hueco: #141414;
        --tinta: #ffffff;
        --tinta-suave: #dcdcdc;
        --filete: #8a8a8a;
        --almagre: #f0a184;
        --verificado: #9fdcae;
        --orientativo: #f0c060;
        --aviso: #ffab9c;
    }
}

/* Oscuro pedido a mano, aunque el aparato esté en claro */
:root[data-tema="oscuro"] {
    --papel:       #14110e;
    --papel-hueco: #1d1915;
    --tinta:       #ede6da;
    --tinta-suave: #a89b8a;
    --filete:      #3b342b;
    --almagre:     #d0714c;
    --verificado:  #79b98a;
    --orientativo: #d3a03f;
    --aviso:       #e08575;
}
:root[data-tema="oscuro"] body.sol {
    --papel: #000000;
    --papel-hueco: #141414;
    --tinta: #ffffff;
    --tinta-suave: #dcdcdc;
    --filete: #8a8a8a;
    --almagre: #f0a184;
    --verificado: #9fdcae;
    --orientativo: #f0c060;
    --aviso: #ffab9c;
}

/* ---------- 13 bis. La página de venta (D23) ----------
   Sin tarjetas, sin sombras y sin degradados: el mismo lenguaje de hilos que
   el resto. Lo único que se permite un poco de peso es el bloque de la ruta
   gratuita, porque es lo primero que tiene que ver quien llega de fuera. */
.venta-demo {
    margin: 1.8rem 0 2.4rem;
    padding: 1.2rem 0;
    border-top: 2px solid var(--almagre);
    border-bottom: 1px solid var(--filete);
}
.venta-demo h2 { margin-top: 0; border-bottom: 0; }

.venta-video {
    display: block;
    width: 100%;
    max-width: 40rem;
    height: auto;
    border: 1px solid var(--filete);
}

.venta-preguntas { margin: 1rem 0 2rem; }
.venta-preguntas dt {
    font-family: var(--palo);
    font-weight: 600;
    margin-top: 1.1rem;
}
.venta-preguntas dd {
    margin: .3rem 0 0;
    padding-left: 0;
    color: var(--tinta-suave);
}

/* ---------- 14. Imprimir: el plan en papel (para el móvil muerto) ---------- */
@media print {
    .cabecera-nav, .saltar, .pie-legal, .aspecto, .acciones-calle, .mapa { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    a { text-decoration: none; color: #000; }
    .principal, .principal > * { max-width: none; padding: 0; }
    .parada { break-inside: avoid; }
}