/* Tragaleguas — "chapa y pintura".
   Esmalte de parche motero y señalizacion de carretera. Fondo de papel en
   vez de blanco (con sol de frente se lee mejor y no parece un panel de
   control), amarillo de señal para las notas, rojo esmalte SOLO para las
   distinciones: si apareciera en mas sitios dejaria de significar nada.

   Se usa de pie, con guantes y con prisa: nada que se toque baja de 52 px
   ni ningun texto de 16. */

:root{
  --papel:#F2ECDF;
  --carta:#FFFFFF;
  --carta-pie:#FBF7EE;
  --borde:#E2DACA;
  --borde-suave:#EFE7D6;

  --asfalto:#1A1B1F;
  --senal:#E9A712;
  --senal-honda:#B07F08;
  --sobre-senal:#1A1B1F;
  --esmalte:#B8352E;
  --pino:#2F5D50;
  --cuero:#8A4A12;

  --texto:#221F1A;
  --tenue:#6B6355;
  --apagado:#8A8171;

  --toque:50px;
  --radio:13px;
  --margen:16px;
}

:root[data-tema="oscuro"]{
  --papel:#15161A;
  --carta:#1F2126;
  --carta-pie:#1A1C21;
  --borde:#343842;
  --borde-suave:#2A2D35;

  --asfalto:#0E0F12;
  --senal:#F0B21B;
  --senal-honda:#8E6606;
  --sobre-senal:#15161A;
  --esmalte:#D8564E;
  --pino:#5E9A86;
  --cuero:#C98A4A;

  --texto:#F1EDE3;
  --tenue:#A79F91;
  --apagado:#8C8477;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:Inter, system-ui, sans-serif;
  font-size:16px;
  line-height:1.5;
  padding-bottom:calc(var(--toque) + 30px + env(safe-area-inset-bottom));
}

h1,h2,h3,.cifra,.boton,.pestana{
  font-family:Oswald,"Arial Narrow",sans-serif;
  font-weight:600;
  letter-spacing:.01em;
}

.ico{flex:none; vertical-align:middle}

/* Los iconos del HTML usan .icono. Sin un tamaño explicito un SVG con
   viewBox se estira hasta llenar lo que lo contiene, y se come el boton. */
.icono{width:22px; height:22px; flex:none; fill:currentColor}
.radios button .icono{width:21px; height:21px}
.pestana .icono{width:23px; height:23px}
.fab .icono{width:28px; height:28px}
.cabecera .icono{width:20px; height:20px}

/* ---------- cabecera ---------- */
.cabecera{
  padding:14px var(--margen) 0;
  position:sticky; top:0; z-index:40;
  background:var(--asfalto); color:#F4EFE4;
}
/* La marca va centrada: es lo unico de la cabecera y asi se lee como una
   chapa, no como la etiqueta de una barra de herramientas. */
.cabecera-fila{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:11px; min-height:52px;
}
.logo-circulo{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:#262A31; border:2px solid var(--senal);
  display:flex; align-items:center; justify-content:center;
}
.marca{font-size:25px; text-transform:uppercase; margin:0; font-weight:700; letter-spacing:.02em}
/* La ayuda en esmalte rojo: comparte el peso visual de las distinciones
   ("esto importa") sin competir con el amarillo de las notas. */
.boton--redondo{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:42px; min-height:42px; padding:0; border-radius:50%;
  font-size:19px; font-weight:600;
  background:var(--esmalte); color:#FFF; border-color:var(--esmalte);
}
.marca b{color:var(--senal); font-weight:700}
.franja{
  height:7px; margin-top:13px;
  background:repeating-linear-gradient(90deg, var(--senal) 0 26px, transparent 26px 48px);
}
.cabecera .boton{
  background:none; border:1.5px solid #4A4D55; color:#C9C2B4;
}
/* Va DESPUES de la regla de arriba a proposito: ambas tienen la misma
   especificidad, asi que gana la ultima. Puesta antes, la ayuda salia gris. */
.cabecera .boton--redondo{
  background:var(--esmalte); color:#FFF; border-color:var(--esmalte);
}

/* ---------- botones ---------- */
.boton{
  min-height:var(--toque);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 18px; border:1.5px solid var(--borde); border-radius:12px;
  font-size:16px; text-transform:uppercase; cursor:pointer;
  background:var(--carta); color:var(--texto);
}
.boton--principal{
  background:var(--senal); color:var(--sobre-senal); border-color:var(--senal);
  font-weight:600; box-shadow:0 2px 0 var(--senal-honda);
}
.boton--ancho{width:100%}
.boton--dato{text-transform:none; font-family:Inter,sans-serif; font-size:16px}
.boton--doble{flex-direction:column; gap:2px; height:auto; padding-top:12px; padding-bottom:12px}
.boton--doble b{font:inherit}
.boton--doble small{
  font-family:Inter,sans-serif; font-size:13.5px; font-weight:400;
  text-transform:none; letter-spacing:0; opacity:.84;
}
.boton:focus-visible{outline:3px solid var(--cuero); outline-offset:2px}
.boton[disabled]{opacity:.5; cursor:default; box-shadow:none}

.row2{display:flex; gap:8px}
.row2 > *{flex:1; min-width:0}
.row3{display:flex; gap:8px}
.row3 > *{flex:1; min-width:0}

/* ---------- controles ---------- */
.campo{display:block; margin-bottom:14px}
.campo > span{display:block; font-size:14px; color:var(--tenue); margin-bottom:6px}
.campo input, .campo select, select, input[type=date], input[type=number], input[type=search]{
  width:100%; min-height:var(--toque);
  background:var(--carta); border:1.5px solid var(--borde); border-radius:11px;
  color:var(--texto); padding:0 13px; font-size:16px; font-family:inherit;
  -webkit-appearance:none; appearance:none;
}
select{
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:38px;
}
.campo input:focus-visible, select:focus-visible,
input[type=date]:focus-visible, input[type=number]:focus-visible,
input[type=search]:focus-visible{outline:3px solid var(--senal); outline-offset:1px}

.radios{display:flex; gap:7px; margin-top:10px}
.radios button{
  flex:1; min-height:44px; border-radius:23px;
  background:var(--carta); color:var(--tenue);
  border:1.5px solid var(--borde); font-size:15px; cursor:pointer;
  font-family:Inter,sans-serif;
}
.radios button .ico{width:22px; height:22px}
.radios button[aria-pressed="true"]{
  background:var(--asfalto); border-color:var(--asfalto); color:#F4EFE4; font-weight:600;
}

.filtros{display:flex; gap:7px; margin-top:10px; overflow-x:auto; padding-bottom:2px}
.filtros button{
  flex:none; min-height:44px; padding:0 14px; border-radius:23px;
  background:var(--carta); border:1.5px solid var(--borde); color:var(--tenue);
  font-family:Inter,sans-serif; font-size:15px; cursor:pointer; white-space:nowrap;
}
.filtros button[aria-pressed="true"]{
  background:var(--asfalto); border-color:var(--asfalto); color:#F4EFE4; font-weight:600;
}

.cocinas{display:flex; flex-wrap:wrap; gap:8px}
.cocinas button{
  min-height:44px; padding:0 13px; border-radius:23px;
  background:var(--carta); border:1.5px solid var(--borde); color:var(--texto);
  font-family:Inter,sans-serif; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
}
.cocinas button[aria-pressed="true"]{
  background:var(--senal); border-color:var(--senal); color:var(--sobre-senal); font-weight:600;
}

/* ---------- tarjeta de sitio ---------- */
.lista{display:flex; flex-direction:column; gap:12px; padding:14px var(--margen)}

.sitio{
  display:block; width:100%; text-align:left; padding:0; cursor:pointer;
  background:var(--carta); border:1px solid var(--borde);
  border-radius:var(--radio); overflow:hidden; color:inherit; font:inherit;
  box-shadow:0 1px 2px rgba(60,48,20,.06);
}
.sitio--sinprobar{border-left:4px solid var(--cuero)}
.sitio-cuerpo{display:flex; gap:12px; padding:12px}
.sitio-foto{
  width:84px; height:84px; border-radius:10px; flex:none;
  object-fit:cover; background:var(--borde-suave);
}
/* Sin foto, un hueco con el icono de su cocina: la lista se ve pareja y
   el sitio vacio invita a poner la primera. Un hueco gris no invita a nada. */
.sitio-foto--vacia{
  display:flex; align-items:center; justify-content:center;
  color:var(--apagado); background:var(--papel);
  border:1px dashed var(--borde);
}
.sitio-foto--vacia .ico{opacity:.75}
.sitio-texto{flex:1; min-width:0}
.sitio h3{margin:0; font-size:19px; line-height:1.15; font-weight:600}
.sitio .donde{font-size:13.5px; color:var(--tenue); margin-top:2px}
.sitio-marcas{display:flex; align-items:center; gap:7px; margin-top:9px; flex-wrap:wrap}
.sitio-pie{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; background:var(--carta-pie); border-top:1px solid var(--borde-suave);
  font-size:13px; color:var(--tenue);
}
.sitio-pie .lejos{
  margin-left:auto; font-family:Oswald,sans-serif; font-size:17px; color:var(--cuero);
}

/* escudo de nota, con silueta de señal */
.escudo{position:relative; width:46px; height:50px; flex:none}
.escudo svg{display:block}
.escudo span{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding-bottom:4px;
}
.escudo b{font-family:Oswald,sans-serif; font-weight:700; font-size:20px; color:#1A1B1F; line-height:1}
.escudo i{font-style:normal; font-size:8.5px; color:#6B5306; letter-spacing:.08em; text-transform:uppercase}
.escudo--vacio{
  width:44px; height:44px; border-radius:50%; border:1.5px dashed var(--borde);
  display:flex; align-items:center; justify-content:center;
  color:var(--apagado); font-size:20px; font-family:Oswald,sans-serif;
}

/* chips de dato dentro de la tarjeta */
.chip-dato{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  color:var(--texto); background:var(--papel);
  border:1px solid var(--borde); border-radius:6px; padding:4px 7px;
}
.chip-precio{font-family:Oswald,sans-serif; font-size:13px}

/* etiquetas de carretera */
.etiq{
  display:inline-flex; align-items:center; gap:6px; font-size:13px;
  border-radius:16px; padding:6px 11px;
  color:var(--texto); background:var(--papel); border:1px solid var(--borde);
}
.etiq--bien{color:#32584A; background:#E6EDE6; border-color:#C9D8C9}
.etiq--ojo{color:#6B4330; background:#F6EADF; border-color:#E3D0BC}
.etiq--neutro{color:var(--tenue)}
:root[data-tema="oscuro"] .etiq--bien{color:#8FC4B1; background:#1C2B26; border-color:#2E4A40}
:root[data-tema="oscuro"] .etiq--ojo{color:#D9A982; background:#2C241C; border-color:#48382A}

/* distinciones ganadas */
.dist{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:5px; padding:4px 8px;
  font-family:Oswald,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
}
.dist--obligatoria{background:var(--esmalte); color:#FFF}
.dist--desvio{background:var(--asfalto); color:var(--senal)}
.dist--estrenar{background:none; color:var(--cuero); border:1.5px dashed var(--borde)}

/* parches de grupo */
.parche{
  display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:5px; color:#FFF;
  font-family:Oswald,sans-serif; font-size:11px; flex:none;
}
.parche--ancho{
  width:auto; gap:7px; border-radius:7px; padding:6px 11px;
  font-family:Inter,sans-serif; font-size:13px;
}
.parche--ancho b{font-family:Oswald,sans-serif; font-size:12px}

/* ---------- mapa ---------- */
#mapa{height:62vh; border-radius:var(--radio); border:1px solid var(--borde); margin:0 var(--margen)}

/* ---------- estados ---------- */
.aviso{
  margin:var(--margen); padding:15px 16px; border-radius:var(--radio);
  background:var(--carta); border:1px solid var(--borde); color:var(--tenue); font-size:15px;
}
.aviso--accion{border-left:4px solid var(--cuero); color:var(--texto)}
.vacio{text-align:center; padding:40px 24px; color:var(--tenue)}
.vacio h2{font-size:21px; color:var(--texto); margin:0 0 8px}
.pista{font-size:14px; color:var(--tenue); margin:8px 0 0}
.rotulo{
  font-size:13px; color:var(--apagado); text-transform:uppercase;
  letter-spacing:.12em; margin:22px 0 10px; font-family:Oswald,sans-serif;
}

/* ---------- barra inferior ---------- */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--carta); border-top:1px solid var(--borde);
  padding-bottom:env(safe-area-inset-bottom);
}
.pestana{
  position:relative; min-height:var(--toque);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:0; color:var(--apagado); font-size:10.5px; cursor:pointer;
  text-transform:uppercase; letter-spacing:.09em; padding:7px 2px;
}
.pestana[aria-current="page"]{color:var(--cuero)}
.pestana .ico{width:23px; height:23px}
.punto{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--esmalte); margin-left:6px; vertical-align:middle;
}
.pestana .punto{position:absolute; top:6px; right:calc(50% - 22px); margin:0}

/* ---------- botón flotante ---------- */
.fab{
  position:fixed; right:16px; z-index:55;
  bottom:calc(var(--toque) + 24px + env(safe-area-inset-bottom));
  width:62px; height:62px; border-radius:50%;
  background:var(--senal); color:var(--sobre-senal); border:0;
  box-shadow:0 5px 16px rgba(26,27,31,.3), 0 2px 0 var(--senal-honda);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.fab .ico{width:30px; height:30px}
.fab:focus-visible{outline:3px solid var(--cuero); outline-offset:3px}

/* ---------- entrada ---------- */
.portada{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:32px var(--margen); gap:20px;
}
.portada h1{font-size:40px; text-transform:uppercase; margin:0; line-height:1; font-weight:700}
.portada p{color:var(--tenue); max-width:34ch; margin:0; font-size:17px}

/* ---------- hojas ---------- */
.hoja-fondo{position:fixed; inset:0; z-index:70; background:rgba(14,15,18,.62); display:flex; align-items:flex-end}
.hoja{
  background:var(--papel); width:100%; max-height:94svh;
  border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  border-top:4px solid var(--senal);
}
.hoja--centrada{border-radius:16px; margin:auto var(--margen); max-width:460px}
.hoja-cabecera{
  display:flex; align-items:center; gap:12px; padding:14px var(--margen);
  border-bottom:1px solid var(--borde);
}
.hoja-cabecera h2{margin:0; font-size:21px; text-transform:uppercase; flex:1}
.hoja-cuerpo{padding:var(--margen); overflow-y:auto; flex:1}
.hoja-pie{
  padding:var(--margen); border-top:1px solid var(--borde);
  padding-bottom:calc(var(--margen) + env(safe-area-inset-bottom));
}
.mas{margin:4px 0 14px}
.mas summary{
  min-height:var(--toque); display:flex; align-items:center;
  color:var(--cuero); font-family:Oswald,sans-serif; font-size:16px;
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
}
.mas[open] summary{margin-bottom:8px}

/* ---------- ficha ---------- */
.ficha-foto{
  height:196px; margin:calc(var(--margen) * -1) calc(var(--margen) * -1) 0;
  background:var(--borde-suave); position:relative; overflow:hidden;
}
.ficha-foto img{width:100%; height:100%; object-fit:cover; display:block}
.galeria{display:flex; gap:10px; overflow-x:auto; margin:0 calc(var(--margen) * -1); padding:0 var(--margen) 4px}
.galeria img{height:170px; border-radius:10px; border:1px solid var(--borde); flex:none; object-fit:cover}

.ficha-cifras{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:13px 0}
.cifra-caja{background:var(--carta); border:1px solid var(--borde); border-radius:11px; padding:11px}
.cifra-caja b{display:block; font-family:Oswald,sans-serif; font-size:21px; line-height:1}
.cifra-caja span{font-size:11px; color:var(--apagado); text-transform:uppercase; letter-spacing:.07em}

.que-pedir{
  background:#FFF8E7; border:1px solid #EBD9A8; border-radius:12px;
  padding:13px 14px; display:flex; gap:11px; align-items:flex-start; margin:13px 0;
}
:root[data-tema="oscuro"] .que-pedir{background:#2A2414; border-color:#4A3F1C}
.que-pedir .rotulo{margin:0; color:var(--senal-honda)}
:root[data-tema="oscuro"] .que-pedir .rotulo{color:var(--senal)}
.que-pedir p{margin:2px 0 0; font-size:16px; line-height:1.35}

.resena{
  background:var(--carta); border:1px solid var(--borde);
  border-radius:var(--radio); padding:13px 14px; margin-bottom:10px;
}
.resena header{display:flex; align-items:center; gap:10px}
.fila-invitacion{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--borde-suave);
}
.fila-invitacion code{font-size:13px; letter-spacing:.06em; flex:1; min-width:0; overflow-wrap:anywhere}
.fila-invitacion span{font-size:12px; color:var(--apagado); flex:none}

/* el aviso de reserva, en la ficha */
.reserva{
  display:flex; align-items:center; gap:9px; margin:12px 0;
  padding:10px 13px; border-radius:10px; font-size:14.5px; line-height:1.35;
}
.reserva .ico{flex:none}
.reserva--avisa{background:rgba(233,167,18,.16); border:1px solid var(--senal); color:var(--texto)}
.reserva--bien{background:var(--carta); border:1px solid var(--borde); color:var(--tenue)}

/* ---------- ordenar el repositorio ---------- */
/* En su propia linea y no entre los botones de filtro: filtrar dice que
   sitios veo y ordenar dice en que orden, que son dos preguntas distintas
   y mezclarlas fue justo el lio que quitamos. */
.orden{display:flex; align-items:center; gap:8px; margin-top:10px}
.orden label{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--apagado); flex:none;
}
.orden select{flex:1; min-width:0}

/* ---------- chincheta del mapa ---------- */
.chincheta{background:none; border:0}
.chincheta svg{display:block}

/* ---------- la cara de cada motero ---------- */
/* Redonda y del mismo tamaño lleve foto o dibujo, para que una fila no
   baile segun quien haya subido foto y quien no. */
.cara{
  flex:none; border-radius:50%; object-fit:cover; display:block;
  border:2px solid var(--borde); background:var(--asfalto);
}
.cara--dibujo{
  display:flex; align-items:center; justify-content:center;
  color:var(--senal); border-color:var(--asfalto);
}
.cara--dibujo .ico{width:auto; height:auto}
.resena header b{font-family:Oswald,sans-serif; font-size:16.5px; font-weight:600}
.resena header small{display:block; font-size:12px; color:var(--apagado)}
.resena .nota{margin-left:auto; font-family:Oswald,sans-serif; font-size:19px; color:var(--cuero)}
.resena .plato{
  margin:10px 0 0; font-size:15.5px; padding:8px 12px;
  background:rgba(233,167,18,.12); border-left:3px solid var(--senal); border-radius:0 6px 6px 0;
}
.resena .notas{margin:10px 0 0; font-size:14.5px; line-height:1.5}
.resena .etiquetas{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.resena .pie{display:flex; gap:14px; margin-top:10px; font-size:13.5px; color:var(--tenue); flex-wrap:wrap; align-items:center}
.resena .pie button{
  background:none; border:0; color:var(--tenue); font-size:14px;
  text-decoration:underline; cursor:pointer; padding:6px 0; min-height:40px;
}

/* ---------- planificador ---------- */
.parada{
  display:flex; align-items:center; gap:10px;
  background:var(--carta); border:1px solid var(--borde);
  border-left:4px solid var(--senal); border-radius:var(--radio);
  padding:10px 12px; margin-bottom:8px;
}
.parada .orden{font-family:Oswald,sans-serif; font-size:19px; color:var(--senal); width:24px; flex:none; text-align:center}
.parada .texto{flex:1; min-width:0}
.parada .texto b{display:block; font-size:17px; line-height:1.25}
.parada .texto small{display:block; color:var(--tenue); font-size:13px}
.parada .quitar{
  background:none; border:0; color:var(--apagado); font-size:26px;
  line-height:1; cursor:pointer; min-width:44px; min-height:44px;
}
.resumen{display:flex; gap:9px; flex-wrap:wrap; margin:16px 0}
.resumen div{
  flex:1; min-width:104px; background:var(--carta);
  border:1px solid var(--borde); border-top:3px solid var(--cuero);
  border-radius:11px; padding:12px;
}
.resumen b{display:block; font-family:Oswald,sans-serif; font-size:23px; line-height:1.1}
.resumen span{font-size:11.5px; color:var(--apagado); text-transform:uppercase; letter-spacing:.07em}
.tramo{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--borde); font-size:15px;
}
.tramo:last-child{border-bottom:0}
.tramo span{color:var(--tenue)}

/* el tiempo, con la lluvia como dato que manda */
.clima{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-bottom:1px solid var(--borde-suave);
}
.clima:last-child{border-bottom:0}
.clima .ico{width:24px; height:24px; color:var(--apagado)}
.clima--sol .ico{color:#D99A0B}
.clima--agua .ico{color:#2F5D73}
.clima--aviso .ico{color:var(--esmalte)}
.clima .donde{flex:1; min-width:0}
.clima .donde b{display:block; font-size:14.5px; font-weight:400; font-family:Inter,sans-serif}
.clima .donde small{font-size:12px; color:var(--apagado)}
.clima .grados{font-family:Oswald,sans-serif; font-size:17px}
.clima .lluvia{font-size:12.5px; color:var(--tenue); width:66px; text-align:right}
.clima--mojado{background:rgba(184,53,46,.08)}
.clima--mojado .lluvia{font-family:Oswald,sans-serif; font-size:16px; color:var(--esmalte)}
.clima--frio .grados{color:var(--esmalte)}

.porelcamino{
  display:flex; align-items:center; gap:12px;
  background:var(--carta); border:1px solid var(--borde);
  border-left:4px solid var(--cuero); border-radius:var(--radio);
  padding:10px 12px; margin-bottom:8px;
}
.porelcamino .texto{flex:1; min-width:0}
.porelcamino .texto b{display:block; font-size:16.5px; line-height:1.3}
.porelcamino .texto small{color:var(--tenue); font-size:13px}
.porelcamino .boton{min-height:44px; padding:0 14px; font-size:14px; flex:none}

.queTal{
  background:rgba(233,167,18,.12); border:1px solid var(--senal);
  border-radius:var(--radio); padding:14px 16px; margin:-4px 0 16px;
}
.queTal b{font-family:Oswald,sans-serif; font-size:17px; text-transform:uppercase}
.queTal p{margin:2px 0 0; font-size:14px; color:var(--tenue)}

/* ---------- ranking ---------- */
.tabla-rank{margin-bottom:26px}
.tabla-rank h2{font-size:13px; color:var(--apagado); text-transform:uppercase; letter-spacing:.12em; margin:0 0 4px; font-family:Oswald,sans-serif}
.tabla-rank p.pie{font-size:13px; color:var(--apagado); margin:0 0 10px}
.fila-rank{
  display:flex; align-items:center; gap:12px;
  background:var(--carta); border:1px solid var(--borde); border-radius:10px;
  padding:12px 14px; margin-bottom:6px;
}
.fila-rank.oro{border-left:4px solid var(--senal)}
.fila-rank.oro .puesto{color:var(--senal)}
.fila-rank .quien{flex:1; min-width:0}
.fila-rank .quien b{display:block; font-size:17px}
.fila-rank .quien small{color:var(--tenue); font-size:13px}
.fila-rank .puesto{
  font-family:Oswald,sans-serif; font-size:15px; color:var(--apagado);
  width:22px; text-align:center; flex:none;
}
.fila-rank .cifra{text-align:right; flex:none; min-width:58px}
.fila-rank .cifra b{display:block; font-family:Oswald,sans-serif; font-size:21px; color:var(--cuero); line-height:1}
.fila-rank .cifra span{font-size:10.5px; color:var(--apagado); text-transform:uppercase; letter-spacing:.06em}

.fila-rank.yo{background:rgba(233,167,18,.1)}

/* Los hitos como el cuentakilometros de una moto. Las marcas van a
   distancias iguales aunque los numeros no lo sean: a escala real, los
   cinco primeros hitos se amontonarian contra el borde. */
/* las chapas */
.chapas{
  background:var(--carta); border:1px solid var(--borde);
  border-radius:var(--radio); padding:14px; margin-bottom:26px;
}
.chapas-cabeza{display:flex; align-items:center; gap:12px}
.chapas-cara{position:relative; flex:none; line-height:0}
.chapas-cara .cara{border-width:3px; border-color:var(--senal)}
.chapas-cara i{position:absolute; right:-8px; bottom:-6px; line-height:0}
.chapas-cabeza .chapa-svg{flex:none}
.chapas-quien{flex:1; min-width:0}
.chapas-quien small{
  display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--apagado);
}
.chapas-quien b{display:block; font-family:Oswald,sans-serif; font-size:21px; line-height:1.15}
.chapas-quien span{display:block; font-size:12.5px; color:var(--apagado); line-height:1.3}
.chapas-total{flex:none; text-align:center; min-width:52px}
.chapas-total b{display:block; font-family:Oswald,sans-serif; font-size:26px; line-height:1; color:var(--cuero)}
.chapas-total span{font-size:10px; color:var(--apagado); text-transform:uppercase; letter-spacing:.06em}

.chapas-via{margin-top:14px}
.via-eti{
  display:flex; justify-content:space-between; font-family:Oswald,sans-serif;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--apagado);
  margin-bottom:5px;
}
.via{height:9px; border-radius:5px; background:var(--borde); overflow:hidden}
.via i{
  display:block; height:100%; border-radius:5px; min-width:3px;
  background:linear-gradient(90deg, var(--senal-honda), var(--senal));
}
.via-pie{margin:8px 0 0; font-size:12.5px; color:var(--apagado)}
.via-pie b{color:var(--tinta)}

.chapas-rejilla{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--borde);
}
.chapa-celda{
  text-align:center; padding:8px 4px; border-radius:10px;
  border:1px solid transparent;
}
.chapa-celda b{
  display:block; font-family:Oswald,sans-serif; font-size:13px; line-height:1.2;
  margin-top:4px; color:var(--apagado);
}
.chapa-celda small{display:block; font-size:10.5px; color:var(--apagado)}
.chapa-celda.tengo b{color:var(--tinta)}
.chapa-celda.toca{border-color:var(--cuero); border-style:dashed; background:var(--papel)}
.chapa-celda.toca b{color:var(--cuero)}

.recap{width:100%; max-width:520px; margin:auto; padding:30px 24px; display:flex; flex-direction:column; gap:22px; min-height:70svh}
.recap-barras{display:flex; gap:6px}
.recap-barras i{flex:1; height:4px; background:rgba(255,255,255,.25); border-radius:2px}
.recap-barras i.vista{background:var(--senal)}
.recap-centro{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; color:#F4EFE4}
.recap-centro b{font-family:Oswald,sans-serif; font-size:64px; line-height:1; color:var(--senal)}
.recap-centro span{font-size:19px; max-width:22ch}
.recap-pies{display:flex; gap:8px}
.recap-pies .boton{flex:1}

/* ---------- fotos ---------- */
.tira-fotos{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.tira-fotos figure{position:relative; margin:0}
.tira-fotos img{width:92px; height:92px; object-fit:cover; border-radius:8px; border:1px solid var(--borde); display:block}
.tira-fotos button{
  position:absolute; top:-8px; right:-8px; width:30px; height:30px; border-radius:50%;
  background:var(--esmalte); color:#fff; border:2px solid var(--papel);
  font-size:17px; line-height:1; cursor:pointer;
}

/* ---------- barra de puntuación ---------- */
.campo .valor{float:right; font-family:Oswald,sans-serif; font-size:19px; color:var(--cuero)}
.barra-nota{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer; margin:0}
.barra-nota::-webkit-slider-runnable-track{height:10px; border-radius:5px; background:linear-gradient(90deg,var(--borde),var(--senal))}
.barra-nota::-moz-range-track{height:10px; border-radius:5px; background:linear-gradient(90deg,var(--borde),var(--senal))}
.barra-nota::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:34px; height:34px; border-radius:50%;
  margin-top:-12px; background:var(--senal); border:3px solid var(--papel);
  box-shadow:0 2px 8px rgba(26,27,31,.35);
}
.barra-nota::-moz-range-thumb{
  width:34px; height:34px; border-radius:50%; background:var(--senal);
  border:3px solid var(--papel); box-shadow:0 2px 8px rgba(26,27,31,.35);
}
.barra-nota:focus-visible{outline:3px solid var(--cuero); outline-offset:4px; border-radius:8px}
.extremos{display:flex; justify-content:space-between; font-size:13px; color:var(--apagado); margin-top:-4px}
.barra-nota.sin-tocar::-webkit-slider-thumb{background:var(--borde)}
.barra-nota.sin-tocar::-moz-range-thumb{background:var(--borde)}

#a_mapa{background:var(--carta)}
#a_mapa:empty::after{
  content:'Cargando el mapa...'; display:flex; align-items:center; justify-content:center;
  height:100%; color:var(--tenue); font-size:15px;
}

.texto-largo h3{font-family:Oswald,sans-serif; font-size:17px; text-transform:uppercase; letter-spacing:.04em; color:var(--cuero); margin:22px 0 8px}
.texto-largo h3:first-child{margin-top:0}
.texto-largo p{margin:0 0 12px; font-size:15.5px; line-height:1.55; max-width:62ch}
.texto-largo b{color:var(--texto)}

.apuntado{color:var(--cuero); font-size:13px; vertical-align:middle}
.oculto{display:none !important}

@media (prefers-reduced-motion:no-preference){
  .sitio{transition:border-color .15s ease}
}

/* ---------- tu moto, en la pestaña Yo ---------- */
.moto-ficha{display:flex; align-items:center; gap:14px; margin-bottom:4px}
.moto-cara .cara{border-width:3px; border-color:var(--senal)}
.moto-acciones{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.moto-acciones .pista{flex-basis:100%; margin:0}
.moto-acciones .boton{flex:0 1 auto; padding:9px 14px; font-size:13px}
.boton--llano{border:0; background:none; color:var(--apagado); padding:6px 4px; text-decoration:underline}

/* ---------- el líder del ranking ---------- */
.lider{
  display:flex; align-items:center; gap:14px; margin-bottom:10px;
  background:var(--asfalto); color:#F4EFE4;
  border-radius:var(--radio); padding:14px 16px;
}
.lider.yo{box-shadow:inset 0 0 0 2px var(--senal)}
.lider .cara{border-color:rgba(244,239,228,.35)}
.lider-escudo{position:relative; width:52px; height:56px; flex:none}
.lider-escudo svg{display:block}
.lider-escudo b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:Oswald,sans-serif; font-size:21px; color:#1A1B1F; padding-bottom:3px;
}
.lider-quien{flex:1; min-width:0}
.lider-quien b{display:block; font-family:Oswald,sans-serif; font-size:21px; font-weight:600}
.lider-quien small{color:#B9B1A3; font-size:13px}

.hito{display:inline-flex; align-items:center; gap:6px}

/* ---------- tarjeta de ruta guardada ---------- */
.ruta{
  background:var(--carta); border:1px solid var(--borde);
  border-radius:var(--radio); padding:14px 16px; margin-bottom:14px;
}
.ruta header{display:flex; align-items:flex-start; gap:10px; margin-bottom:12px}
.ruta header b{font-family:Oswald,sans-serif; font-size:19px; font-weight:600; display:block}
.ruta header small{color:var(--apagado); font-size:13px}

/* el hilo de paradas: se lee el viaje de un vistazo */
.hilo{list-style:none; margin:0; padding:0 0 0 18px; position:relative}
.hilo::before{
  content:''; position:absolute; left:4px; top:9px; bottom:9px;
  width:2px; background:repeating-linear-gradient(180deg, var(--senal) 0 6px, transparent 6px 11px);
}
.hilo li{position:relative; padding:4px 0; font-size:14.5px; color:var(--tenue)}
.hilo li::before{
  content:''; position:absolute; left:-18px; top:11px;
  width:10px; height:10px; border-radius:50%;
  background:var(--carta); border:2px solid var(--senal);
}
.hilo li.salida, .hilo li.destino{color:var(--texto); font-weight:500}
.hilo li.salida::before{background:var(--senal)}
.hilo li.destino::before{background:var(--cuero); border-color:var(--cuero)}

.ruta-cifras{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.ruta-cifras span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--tenue);
  background:var(--papel); border:1px solid var(--borde);
  border-radius:7px; padding:5px 9px;
}
.ruta-cifras b{font-family:Oswald,sans-serif; font-size:15px; color:var(--texto)}
.ruta-cifras .ico{width:15px; height:15px; color:var(--apagado)}
.ruta-cifras .destacada{border-color:var(--senal); background:rgba(233,167,18,.12)}
.ruta-cifras .destacada b{color:var(--cuero)}