/* ─────────────────────────────────────────────────────────────
   NAIRA · el día contado como una carretera
   Paleta sacada de la isla: la cal de las fachadas, la madera
   de tea de los balcones, el picón, la malvasía y la cochinilla.
   ───────────────────────────────────────────────────────────── */
:root{
  --cal:#FBF5E9;          /* la cal de las paredes */
  --cal-hueso:#F2E9D8;
  --tea:#3E2B1C;          /* madera de tea de los balcones */
  --tea-suave:#6B5238;
  --picon:#1B1512;        /* picón volcánico */
  --malvasia:#D99A2B;     /* el vino */
  --cochinilla:#A93B2B;   /* el tinte de la isla */
  --laurisilva:#2E5D4B;   /* el monteverde */
  --mar:#2C6E7F;
  --arena:#E8D9BE;
  --agua:#E3E9E6;       /* el mar del mapa de comarcas */
  --sombra:0 2px 0 rgba(62,43,28,.14);
  --disp:'Fraunces',Georgia,serif;
  --cuerpo:'Figtree',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  /* Las seis comarcas, del verde del norte al dorado del sur: la paleta de
     arriba bajada de tono, no colores nuevos. */
  --c-metropolitana:#7FA3A8;--c-acentejo:#7E9B86;--c-orotava:#93A579;
  --c-icoden-daute:#A8AC77;--c-guimar:#C6A878;--c-sur:#D9BE8E;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cal);
  color:var(--tea);
  font-family:var(--cuerpo);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px, rgba(62,43,28,.055) 1px, transparent 0);
  background-size:22px 22px;
}
.marco{max-width:760px;margin:0 auto;padding:0 18px 90px}

/* ── CABECERA: el Teide, que es lo primero que se ve al llegar ── */
header.cab{position:relative;padding:30px 0 0;text-align:center}
.silueta{display:block;width:100%;max-width:560px;margin:0 auto 22px}
.marca{position:relative;z-index:2}
.marca h1{
  font-family:var(--disp);
  font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 120;
  font-weight:800;font-size:clamp(52px,15vw,86px);
  letter-spacing:-.045em;line-height:.86;margin:0;color:var(--tea);
}
.marca h1 em{font-style:italic;color:var(--cochinilla);font-variation-settings:'WONK' 1}
.lema{
  font-family:var(--disp);
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 20;
  font-style:italic;font-weight:600;font-size:clamp(17px,4.4vw,21px);
  color:var(--cochinilla);margin:16px auto 0;max-width:22ch;line-height:1.28;
  letter-spacing:-.012em;
}
.barra{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center;margin:20px 0 4px}
/* El rótulo pequeño de máquina, que usan el contador de personas y el parte
   del tiempo. Estaba dentro del bloque de los chips del «cuándo», que se fue. */
.cuTit{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tea-suave);margin-right:2px}
/* El parte del tiempo, debajo del calendario. Ocupa el hueco que dejaron los
   tres chips, y **se queda vacío si AEMET no contesta**: `:empty` lo esconde
   entero, así que no hay ni un icono dibujado por si acaso. */
.tiempoCab{display:flex;gap:7px;align-items:baseline;justify-content:center;margin:8px 0 2px;
  font-family:var(--cuerpo);font-size:13px;color:var(--tea-suave)}
.tiempoCab:empty{display:none}
.tiempoCab .tcIc{font-size:17px;line-height:1}
.tiempoCab b{font-family:var(--mono);font-size:15px;color:var(--tea)}
.tiempoCab i{font-style:normal;font-family:var(--mono);font-size:12px;opacity:.75}
.tiempoCab .tcMu{font-size:12px}
.tiempoCab .tcLl{font-size:11.5px;color:var(--mar);font-weight:700}
/* El contador de los muñequitos, debajo de las tres cartas. Va discreto a
   propósito: es opcional, y quien pulsa una carta tiene que seguir yendo de un
   toque sin sentir que se deja algo sin rellenar. */
.contador{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  margin-bottom:4px;padding-bottom:14px;border-bottom:1px solid rgba(62,43,28,.14)}
.contador .cuTit{width:100%;text-align:center;margin:0 0 2px}
.cuenta2{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(62,43,28,.22);
  border-radius:999px;padding:4px 6px 4px 12px}
.cuenta2 b{font-family:var(--cuerpo);font-size:12.5px;font-weight:600;color:var(--tea-suave)}
.cuenta2 i{font-family:var(--mono);font-style:normal;font-size:14px;font-weight:700;
  color:var(--tea);min-width:16px;text-align:center}
.cuenta2 button{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:var(--arena);color:var(--tea);font-size:16px;line-height:1;font-family:var(--cuerpo)}
.cuenta2 button:hover{filter:brightness(.95)}
.cuenta2 button:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:2px}
button.okGente{flex:0 0 auto}
/* Los días de en medio y el último del rango: marcados, pero MÁS FLOJO que el
   primero. El primero es el que manda —es `S.fecha`, el único que lee el
   motor— y con los tres iguales no se sabía por dónde empieza la escapada. */
.calD.enRango{background:var(--arena);color:var(--tea);font-weight:700}
.idiomas{display:flex;gap:0;justify-content:center;margin:14px 0 2px;border:2px solid var(--tea);border-radius:999px;overflow:hidden;width:max-content;margin-left:auto;margin-right:auto}
button.idi{background:transparent;border:0;padding:8px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--tea-suave);cursor:pointer;transition:.12s}
button.idi:hover{background:var(--cal-hueso)}
button.idi[aria-pressed="true"]{background:var(--tea);color:var(--cal);font-weight:700}
button.idi:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:-3px}
.barra .et{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tea-suave)}
/* El rótulo que enmarca la fecha. Sin él, el calendario es un trasto bonito:
   nadie sabe para qué está ahí. Con él, es lo primero que te preguntan al
   entrar en una agencia. */
.calTit{margin:20px auto 9px;font:700 16.5px/1.35 var(--disp);color:var(--tea);max-width:24ch}
.calPista{margin:9px 0 0;font-family:var(--mono);font-size:10px;line-height:1.5;
  color:var(--tea-suave);text-align:center;letter-spacing:.02em}
body[data-luz="noche"] .calTit{color:var(--tea)}

/* ── EL CALENDARIO ──────────────────────────────────────────────────
   El botón: el día en grande, el mes y el día de la semana al lado. Si ese
   día hay fiesta, se marca — es lo primero que el turista tiene que ver. */
.btnCal{display:flex;align-items:center;gap:11px;background:var(--cal-hueso);
  border:1.5px solid var(--arena);border-radius:16px;padding:7px 13px 7px 10px;
  cursor:pointer;color:var(--tea);text-align:left;font-family:var(--cuerpo);
  box-shadow:var(--sombra);transition:border-color .12s,transform .12s}
.btnCal:hover{border-color:var(--tea);transform:translateY(-1px)}
.btnCal:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:2px}
.btnCal .cn{font:800 25px/1 var(--disp);color:var(--laurisilva);min-width:26px;text-align:center}
.btnCal .cx{display:flex;flex-direction:column;gap:1px;min-width:0}
.btnCal .cx b{font-size:14px;font-weight:700;line-height:1.15}
.btnCal .cx i{font-style:normal;font-size:11.5px;color:var(--tea-suave);
  font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24ch}
.btnCal .cf{color:var(--tea-suave);font-size:12px;margin-left:2px}
.btnCal[aria-expanded="true"] .cf{transform:rotate(180deg)}
.btnCal.conFiesta .cn{color:var(--cochinilla)}

.calendario{background:var(--cal-hueso);border:1.5px solid var(--arena);border-radius:18px;text-align:left;
  padding:12px 12px 10px;margin:10px 0 0;box-shadow:var(--sombra);
  animation:sube .22s cubic-bezier(.2,.7,.3,1) both}
.calCab{display:flex;align-items:center;justify-content:space-between;margin:0 0 9px}
.calCab b{font:700 15.5px var(--disp)}
.calNav{background:none;border:1.5px solid var(--arena);border-radius:9px;width:30px;height:30px;
  cursor:pointer;color:var(--tea);font-size:16px;line-height:1}
.calNav:hover:not([disabled]){border-color:var(--tea)}
.calNav[disabled]{opacity:.3;cursor:default}
.calRej{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.calDs{text-align:center;font:700 10px var(--mono);color:var(--tea-suave);
  text-transform:uppercase;letter-spacing:.05em;padding:0 0 4px}
.calD{position:relative;aspect-ratio:1;border:0;background:none;border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  color:var(--tea);font-family:var(--cuerpo);padding:0}
.calD .nd{font-size:14px;line-height:1}
.calD .fi{font-size:11.5px;line-height:1;margin-top:1px}
.calD:hover:not([disabled]){background:var(--arena)}
.calD[disabled]{opacity:.22;cursor:default}
.calD.hoy{box-shadow:inset 0 0 0 1.5px var(--arena)}
.calD.conFiesta .nd{font-weight:800;color:var(--cochinilla)}
.calD.sel{background:var(--laurisilva);color:#F6F1E4}
.calD.sel .nd,.calD.sel.conFiesta .nd{color:#F6F1E4;font-weight:800}
.calPie{margin:10px 0 0;padding:9px 0 0;border-top:1px dotted var(--arena)}
.calEv{display:flex;gap:9px;align-items:flex-start;padding:4px 0}
.calEv span{font-size:16px;line-height:1.3}
.calEv b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.calEv i{font-style:normal;font-size:11.5px;color:var(--tea-suave);font-family:var(--mono)}
.calNada{margin:0;font-size:12.5px;color:var(--tea-suave);font-family:var(--mono)}
/* EL PROGRAMA DEL DÍA. Un día grande de fiestas pone cincuenta actos de ocho
   pueblos, y de corrido eso es un muro. Delante van los PUEBLOS con su número
   —«Granadilla 3», «Arafo 2»— y se abre el que se pulse; dentro, los actos de
   ese pueblo van todos, en una caja que se desliza, porque recortar la lista
   dejaba fuera los fuegos de las doce, que es justo lo que se venía a mirar.
   El día que solo tiene actos se marca más flojo que el que tiene fiesta:
   hay programa, pero el día grande es otro. */
.calChips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px}
.calChip{font:600 12px/1 system-ui;background:var(--cal-hueso);border:1.2px solid var(--arena);
  border-radius:999px;color:var(--tea);padding:6px 10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.calChip b{font:700 11px var(--mono);color:var(--tea-suave)}
.calChip:hover{background:var(--arena)}
.calChip.ab{background:var(--laurisilva);border-color:var(--laurisilva);color:#F6F1E4}
.calChip.ab b{color:#F6F1E4;opacity:.85}
.calD.conActo .nd{font-weight:700}
/* El 🎉 del día que solo tiene programa: se ve, pero pierde contra el icono
   de la fiesta. Si empatan, treinta días de septiembre salen marcados igual
   y las fiestas de verdad se pierden entre los tambores. */
.calD .pt{font-size:7px;line-height:1;margin-top:3px;opacity:.5;filter:grayscale(.45)}
.calD.sel .pt{opacity:.95;filter:none}
/* «También hay más eventos en:» — un punto más grande que el rótulo de
   máquina de al lado, porque aquí se está invitando, no etiquetando. */
.calMas{margin:10px 0 6px;padding-top:8px;border-top:1px dotted var(--arena);
  font:600 13px/1.35 var(--disp);color:var(--tea)}
body[data-luz="noche"] .calMas{border-top-color:#3A3048}
.calActT{margin:9px 0 5px;padding-top:8px;border-top:1px dotted var(--arena);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tea-suave)}
.calActs{max-height:216px;overflow-y:auto;padding-right:4px}
.calMuni{margin:7px 0 3px;font:700 12px var(--disp);color:var(--tea)}
.calMuni:first-child{margin-top:0}
.calMuni i{font-style:normal;font-weight:400;font-size:11px;color:var(--tea-suave)}
/* LA CABECERA DEL SITIO. Va en negrita y se pulsa: lleva a la localidad en el
   mapa, no al portal exacto —«no hace falta que vaya al sitio exacto, pero sí
   a la localidad, y ya el turista allí la encuentra»—. Subrayada por debajo y
   con su flechita, para que se vea que es un enlace y no un rótulo más. */
.calSitio{margin:9px 0 3px;font:700 12px var(--disp);color:var(--tea)}
.calSitio:first-child{margin-top:0}
.calSitio a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--arena)}
.calSitio a:hover{border-bottom-color:var(--laurisilva);color:var(--laurisilva)}
.calSitio .pin{font-size:9px;color:var(--tea-suave)}
.calSitio .na{font-weight:400;color:var(--tea-suave);font-style:italic}
.calAc{display:flex;gap:8px;align-items:baseline;padding:2px 0}
.calAc .ah{font-family:var(--mono);font-size:11px;color:var(--cochinilla);
  min-width:38px;flex:0 0 auto}
.calAc b{display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.calAc i{font-style:normal;font-size:11px;color:var(--tea-suave);font-family:var(--mono)}
body[data-luz="noche"] .calActT{border-top-color:#3A3048}
body[data-luz="noche"] .calSitio a{border-bottom-color:#3A3048}
body[data-luz="noche"] .btnCal,body[data-luz="noche"] .calendario{background:#211A2C;border-color:#3A3048}
body[data-luz="noche"] .calD:hover:not([disabled]){background:#3A3048}
body[data-luz="noche"] .calD.hoy{box-shadow:inset 0 0 0 1.5px #4A4058}
body[data-luz="noche"] .calNav{border-color:#3A3048}
body[data-luz="noche"] .calPie{border-top-color:#3A3048}

/* ── LA CONVERSACIÓN ── */
.hilo{display:flex;flex-direction:column;gap:13px;padding:22px 0 6px}
.b{max-width:88%;padding:15px 18px;font-size:16.5px;white-space:pre-wrap;word-wrap:break-word;
   animation:sube .3s cubic-bezier(.2,.7,.3,1) both;line-height:1.62}
@keyframes sube{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.b.naira{
  background:#fff;align-self:flex-start;border:1.5px solid var(--arena);
  border-radius:20px 20px 20px 5px;box-shadow:var(--sombra);
}
.b.yo{
  background:var(--laurisilva);color:#F6F1E4;align-self:flex-end;
  border-radius:20px 20px 5px 20px;font-weight:500;
}
/* LA BURBUJA QUE SE ESTÁ ESCRIBIENDO. El texto llega por trozos, así que la
   burbuja crece sola: sin la barrita del final parece que se ha quedado
   colgada a mitad de frase. Y sin animación de entrada, que se repintaría
   veinte veces mientras llega el plan. */
.b.naira.viva{animation:none}
.b.naira.viva .relato>:last-child::after{
  content:'';display:inline-block;width:.5em;height:1.05em;margin-left:2px;
  vertical-align:-.18em;background:var(--laurisilva);opacity:.6;
  animation:latir 1s steps(2,end) infinite}
@keyframes latir{50%{opacity:0}}
.invitaUbi{display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--cuerpo);
  font-size:14px;color:var(--tea);line-height:1.4;text-align:center}
/* Debajo del mapa del paso 2 va como una opción más, pero no es un botón de
   la lista: se separa con un filete para que se lea como «o bien esto». */
.acciones > .invitaUbi{margin-top:6px;padding-top:14px;border-top:1px solid rgba(62,43,28,.14)}
button.btnUbi{background:var(--laurisilva);color:var(--cal);border:0;border-radius:999px;
  padding:9px 20px;font-family:var(--cuerpo);font-size:14px;font-weight:700;cursor:pointer}
button.btnUbi:hover{filter:brightness(1.12)}
button.btnUbi:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:2px}
b.diaEsc{display:inline-block;font-family:var(--disp);font-variation-settings:'SOFT' 45,'WONK' 1;
  font-weight:800;font-size:19px;color:var(--cochinilla);letter-spacing:-.02em;
  border-bottom:2.5px solid var(--malvasia);padding-bottom:3px;margin-bottom:2px}
.queTal{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  font-family:var(--cuerpo);font-size:13.5px;color:var(--tea-suave)}
.queTal button{background:var(--cal);border:1.5px solid var(--arena);border-radius:999px;
  width:38px;height:38px;font-size:19px;cursor:pointer;line-height:1;
  transition:transform .12s cubic-bezier(.2,.7,.3,1),border-color .12s}
.queTal button:hover{transform:scale(1.16);border-color:var(--malvasia)}
.queTal button:active{transform:scale(.94)}
.queTal button:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:2px}
.gracias{font-family:var(--cuerpo);font-size:13.5px;color:var(--laurisilva);font-weight:600}
.b.sis{
  background:transparent;border:1.5px dashed var(--arena);color:var(--tea-suave);
  font-family:var(--mono);font-size:12px;align-self:center;max-width:96%;
  text-align:center;border-radius:14px;
}
.b b{font-weight:700}
.b mark{background:none;padding:0;color:inherit}
/* EL RITMO DEL RELATO
   El plan llegaba de una tirada, todo del mismo tamaño, apoyado en
   white-space:pre-wrap. Aquí se le da aire: párrafos con separación de verdad,
   la primera frase un punto más grande —que es por donde se entra— y las
   listas con su sangría colgante, para que el «·» no se coma la línea. */
.b .relato{white-space:normal}
.b .relato p{margin:0 0 14px}
.b .relato p:last-child,.b .relato ul:last-child{margin-bottom:0}
.b .relato p.entrada{font-size:1.06em;line-height:1.5;color:var(--tea)}
.b .relato ul.pl{list-style:none;margin:0 0 14px;padding:0}
.b .relato ul.pl li{position:relative;padding:9px 0 9px 15px;margin:0;line-height:1.5}
.b .relato ul.pl li+li{border-top:1px dotted var(--arena)}
.b .relato ul.pl li::before{content:'';position:absolute;left:0;top:16px;
  width:5px;height:5px;border-radius:50%;background:var(--arena)}
body[data-luz="noche"] .b .relato ul.pl li+li{border-top-color:#3A3048}
body[data-luz="noche"] .b .relato ul.pl li::before{background:#4A4058}
.b mark.sitio{font-weight:800;color:var(--laurisilva);font-size:1.04em;
  box-shadow:inset 0 -.42em 0 rgba(46,93,75,.16)}
.b mark.local{font-weight:800;color:#7A5610;font-size:1.04em;
  box-shadow:inset 0 -.42em 0 rgba(217,154,43,.28)}
.b mark.fiesta{font-weight:800;color:var(--cochinilla);
  box-shadow:inset 0 -.42em 0 rgba(169,59,43,.14)}
.b mark.dato{font-family:var(--mono);font-size:.88em;font-weight:700;color:var(--tea);
  background:var(--cal-hueso);border-radius:5px;padding:1px 5px;white-space:nowrap}
.b mark.tel{font-family:var(--mono);font-size:.88em;font-weight:700;color:var(--tea);
  background:var(--cal-hueso);border-radius:5px;padding:1px 5px;white-space:nowrap;
  border-bottom:1.5px solid var(--malvasia)}
.b mark.ojo{font-weight:800;color:var(--cochinilla);letter-spacing:.01em}
body[data-luz="noche"] .b mark.local{color:var(--malvasia)}
body[data-luz="noche"] .b mark.sitio{color:#8FC7AC}
.sello{display:block;margin-top:11px;padding-top:9px;border-top:1.5px dotted var(--arena);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--tea-suave)}
.sello.mal{color:var(--cochinilla)}
.escribiendo{align-self:flex-start;background:#fff;border:1.5px solid var(--arena);
  border-radius:20px 20px 20px 5px;padding:15px 19px;display:flex;gap:5px;box-shadow:var(--sombra)}
.escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--malvasia);animation:pulso 1.1s infinite}
.escribiendo i:nth-child(2){animation-delay:.16s}
.escribiendo i:nth-child(3){animation-delay:.32s}
@keyframes pulso{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── BOTONES: pegatinas, no controles de formulario ── */
.barraEscribir{display:flex;gap:8px;align-items:center;padding:10px 0 4px}
.barraEscribir[hidden]{display:none}
#cajaTexto{flex:1;min-width:0;background:#fff;border:1.5px solid var(--tea);border-radius:999px;
  padding:12px 18px;font-family:var(--cuerpo);font-size:16px;color:var(--tea);
  box-shadow:2.5px 2.5px 0 var(--tea);outline:none}
#cajaTexto::placeholder{color:var(--tea-suave)}
#cajaTexto:focus{border-color:var(--cochinilla);box-shadow:2.5px 2.5px 0 var(--cochinilla)}
#btnEnviar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--tea);
  background:var(--laurisilva);color:var(--cal);font-size:17px;cursor:pointer;
  box-shadow:2.5px 2.5px 0 var(--tea);transition:transform .1s}
#btnEnviar:active{transform:translate(2.5px,2.5px);box-shadow:0 0 0 var(--tea)}
#btnEnviar:disabled{opacity:.45;cursor:default}
body[data-luz="noche"] #cajaTexto{background:#211A2C;color:var(--tea)}
/* el ➤ era texto oscuro sobre verde oscuro, igual que el botón de ubicación */
body[data-luz="noche"] #btnEnviar{background:#35705B;color:#EDE6DC;border-color:#5B4C6E;box-shadow:2.5px 2.5px 0 #5B4C6E}
.acciones{display:flex;flex-direction:column;gap:9px;padding:8px 0 0}
.acciones .lim{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--tea-suave);
  text-transform:uppercase;text-align:center;margin-bottom:2px}
button.opt{
  width:100%;background:#fff;color:var(--tea);border:1.5px solid var(--tea);
  border-radius:15px;padding:14px 17px;font-family:var(--cuerpo);font-size:16px;font-weight:600;
  cursor:pointer;text-align:left;box-shadow:3px 3px 0 var(--tea);
  transition:transform .11s cubic-bezier(.2,.7,.3,1),box-shadow .11s,background .11s;
}
button.opt:hover{transform:translate(-1.5px,-1.5px);box-shadow:5px 5px 0 var(--tea);background:var(--cal-hueso)}
button.opt:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--tea)}
button.opt:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:3px}
button.opt[disabled]{opacity:.5;cursor:wait;box-shadow:3px 3px 0 var(--arena);border-color:var(--arena)}

/* ── LA CUADRÍCULA DE MUNICIPIOS: se elige por la estampa, no por una lista ── */
.cuadricula{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:100%}
button.estampa{
  background:#fff;border:1.5px solid var(--tea);border-radius:13px;padding:0;overflow:hidden;
  cursor:pointer;text-align:left;box-shadow:2.5px 2.5px 0 var(--tea);display:flex;flex-direction:column;
  transition:transform .11s cubic-bezier(.2,.7,.3,1),box-shadow .11s;font-family:var(--cuerpo);
}
button.estampa:hover{transform:translate(-1.5px,-1.5px);box-shadow:4px 4px 0 var(--tea)}
button.estampa:active{transform:translate(2.5px,2.5px);box-shadow:0 0 0 var(--tea)}
button.estampa:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:3px}
button.estampa .lienzo{
  display:block;width:100%;aspect-ratio:5/3;
  background-color:var(--arena);border-bottom:1.5px solid var(--tea);
}
/* La estampa es un <img> y no un fondo para que el navegador pueda aplazarla:
   son 31 municipios y de fondo se las bajaba todas de golpe al abrir la
   cuadrícula. El encuadre (42%) sube el horizonte: centrado corta los cascos. */
button.estampa .lienzo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
/* ── EL MAPA DE COMARCAS ──
   Sustituye a las seis fotos de franja el 12 de septiembre: 5 KB de SVG contra
   127 de jpg, y encima dice DÓNDE están las cosas, que es lo que una foto de
   monteverde no hace. Los rótulos son HTML por encima del SVG, no <text>
   dentro, para que no encojan con el mapa. El porqué de lo demás está en
   datos/comarcas.js. */
.mapa{position:relative;aspect-ratio:1000/818;width:100%;overflow:hidden;
  border:1.5px solid var(--tea);border-radius:13px;background:var(--agua);
  box-shadow:2.5px 2.5px 0 var(--tea);touch-action:manipulation}
.lienzoMapa{display:block;width:100%;height:100%}
.comarca .relleno{fill:var(--f);transition:fill .12s ease-out}
/* La banda de toque: sin ella Acentejo es demasiado fina para un dedo. */
.comarca .toque{fill:transparent;stroke:transparent;stroke-width:44;
  stroke-linejoin:round;pointer-events:all;cursor:pointer}
.comarca[data-comarca="metropolitana"]{--f:var(--c-metropolitana)}
.comarca[data-comarca="acentejo"]{--f:var(--c-acentejo)}
.comarca[data-comarca="orotava"]{--f:var(--c-orotava)}
.comarca[data-comarca="icoden-daute"]{--f:var(--c-icoden-daute)}
.comarca[data-comarca="guimar"]{--f:var(--c-guimar)}
.comarca[data-comarca="sur"]{--f:var(--c-sur)}
.comarca:active .relleno{fill:var(--malvasia);transition:none}
.lindes{fill:none;stroke:var(--cal);stroke-width:1.5px;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;pointer-events:none}
.costa{fill:none;stroke:var(--tea-suave);stroke-width:1px;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.5;pointer-events:none}
.etq{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;min-height:32px;
  padding:.2em .55em;border-radius:9px;cursor:pointer;font-family:var(--cuerpo);
  font-size:12.5px;font-weight:700;color:var(--tea);background:#fff;
  border:1.5px solid var(--tea);box-shadow:1.5px 1.5px 0 var(--tea)}
.etqPunto{width:7px;height:7px;border-radius:50%;background:var(--f);flex:none}
.etq[data-comarca="metropolitana"]{--f:var(--c-metropolitana)}
.etq[data-comarca="acentejo"]{--f:var(--c-acentejo)}
.etq[data-comarca="orotava"]{--f:var(--c-orotava)}
.etq[data-comarca="icoden-daute"]{--f:var(--c-icoden-daute)}
.etq[data-comarca="guimar"]{--f:var(--c-guimar)}
.etq[data-comarca="sur"]{--f:var(--c-sur)}
.etq:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:2px}
.etqCorta{display:none}
/* Acentejo es una franja finísima: el rótulo se aparta y una guía lo ata. */
.etq[data-comarca="acentejo"]{transform:translate(-50%,-50%) translate(-24%,-118%)}
.etq[data-comarca="acentejo"]::after{content:"";position:absolute;left:62%;top:100%;
  width:1.5px;height:15px;background:var(--tea);transform:rotate(-18deg);transform-origin:top}
@media(max-width:470px){
  .etq{font-size:11px;min-height:28px;padding:.15em .4em;gap:.28em}
  .etqLarga{display:none}.etqCorta{display:inline}
}
.rotSueltos{margin:13px 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tea-suave)}
.carteles{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
/* El aviso de «eso está en el otro cartel» no es una alarma: es un dato que
   llega a tiempo. Raya del color del vino, que es lo que Naira ya usa. */
.b.naira.avisa{border-left:5px solid var(--malvasia)}
button.opt.salto{background:var(--laurisilva);color:#F6F1E4;border-color:var(--laurisilva)}
button.opt.salto:hover{background:#26503F}
.credito-fotos{font-size:10.5px;line-height:1.4;color:var(--tea-suave);margin:8px 2px 0;font-family:var(--mono)}
body[data-luz="noche"] .credito-fotos{color:#9C8CB0}
.titulo-cartas{
  font-family:var(--disp);font-size:17px;font-weight:800;color:var(--tea);
  text-align:center;margin:2px 0 10px;letter-spacing:.01em;
}
body[data-luz="noche"] .titulo-cartas{color:var(--tea)}
.cartas{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;width:100%}
button.carta{
  background:#fff;border:1.5px solid var(--tea);border-radius:13px;padding:0;overflow:hidden;
  cursor:pointer;box-shadow:2.5px 2.5px 0 var(--tea);display:flex;flex-direction:column;
  transition:transform .11s cubic-bezier(.2,.7,.3,1),box-shadow .11s;font-family:var(--cuerpo);
}
button.carta:hover{transform:translate(-1.5px,-1.5px);box-shadow:4px 4px 0 var(--tea)}
button.carta:active{transform:translate(2.5px,2.5px);box-shadow:0 0 0 var(--tea)}
button.carta:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:3px}
button.carta .lamina{display:block;width:100%;aspect-ratio:1/1;background-color:var(--arena);
  border-bottom:1.5px solid var(--tea)}
button.carta .lamina img{display:block;width:100%;height:100%;object-fit:cover}
button.carta .rotulo{
  display:block;padding:9px 8px 11px;text-align:center;font-family:var(--disp);
  font-size:14px;font-weight:700;line-height:1.15;color:var(--tea);letter-spacing:.01em;
}
.cartas.anchas{grid-template-columns:1fr}
button.carta.ancha .lamina{aspect-ratio:16/9;background-color:var(--cal)}
button.carta.ancha .lamina img{object-fit:contain}
/* Con un número impar de carteles y dos columnas, el último se queda solo en
   la fila: centrado se lee como algo querido y no como un hueco. Son tres o
   cinco —cinco los días que hay fiestas, que entonces sale «Tenderete»—, y el
   uno no entra: un cartel solo va entero, no a media caja. */
.cartas:not(.anchas) > .carta:last-child:nth-child(3),
.cartas:not(.anchas) > .carta:last-child:nth-child(5){grid-column:1 / -1;width:calc(50% - 5px);margin:0 auto}
body[data-luz="noche"] button.carta{background:#211A2C;border-color:#5B4C6E;box-shadow:3px 3px 0 #5B4C6E}
body[data-luz="noche"] button.carta .rotulo{color:var(--tea)}
@media(max-width:420px){.cartas{grid-template-columns:1fr 1fr;gap:9px}
  button.carta .rotulo{font-size:13px}}
button.estampa .lienzo.sin{display:grid;place-items:center;
  background:linear-gradient(140deg,var(--arena),var(--cal-hueso))}
button.estampa .lienzo.sin .ico{font-size:34px;opacity:.55}
button.estampa .pie{display:block;padding:10px 9px 12px;text-align:center}
button.estampa b{
  display:block;font-family:var(--disp);font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 30;
  font-weight:800;font-size:15px;line-height:1.1;color:var(--tea);letter-spacing:-.022em;
}
button.estampa .lema2{display:block;font-size:11px;color:var(--cochinilla);
  font-weight:600;margin-top:4px;line-height:1.25;font-style:italic;
  max-width:20ch;margin-left:auto;margin-right:auto}
button.estampa .cuenta{display:inline-block;font-family:var(--mono);font-size:9px;
  color:var(--tea-suave);margin-top:7px;letter-spacing:.05em;
  background:var(--cal-hueso);border-radius:999px;padding:2px 8px}
body[data-luz="noche"] button.estampa{background:#211A2C;border-color:#5B4C6E;box-shadow:3px 3px 0 #5B4C6E}
body[data-luz="noche"] button.estampa b{color:var(--tea)}
@media(max-width:420px){.cuadricula{grid-template-columns:1fr 1fr;gap:9px}
  button.estampa b{font-size:15px}
  button.estampa .lema2{font-size:11px}}

/* ── LA CARRETERA: el día, dibujado ── */
.ruta{position:relative;margin:16px 0 4px;padding-left:46px}
.ruta::before{
  content:'';position:absolute;left:17px;top:8px;width:4px;height:calc(100% - 16px);
  background:repeating-linear-gradient(to bottom,var(--tea) 0 13px,transparent 13px 24px);
  border-radius:4px;opacity:.42;transform-origin:top;transform:scaleY(0);
  transition:transform 1.1s cubic-bezier(.25,.8,.35,1);
}
.ruta[data-trazada="1"]::before{transform:scaleY(1)}
.parada{position:relative;margin-bottom:14px;opacity:0;transform:translateX(-14px)}
.parada[data-puesta="1"]{opacity:1;transform:none;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)}
.parada .hito{transform:scale(.4);transition:transform .38s cubic-bezier(.3,1.5,.5,1) .1s}
.parada[data-puesta="1"] .hito{transform:scale(1)}
.parada .hito{
  position:absolute;left:-46px;top:2px;width:38px;height:38px;border-radius:50%;
  background:var(--cal);border:2.5px solid var(--tea);display:grid;place-items:center;
  font-size:19px;box-shadow:var(--sombra);
}
.parada.comer .hito{background:var(--malvasia)}
.parada.bano .hito{background:var(--mar);color:#fff}
.parada.fiesta .hito{background:var(--cochinilla)}
.credito a{color:var(--cochinilla);font-weight:700}
.parada .franja{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tea-suave);margin-bottom:3px;
}
.parada h4{
  font-family:var(--disp);font-variation-settings:'SOFT' 30,'opsz' 40;
  font-weight:700;font-size:20px;line-height:1.16;margin:0 0 4px;letter-spacing:-.015em;
}
.parada p{margin:0;font-size:15px;color:var(--tea-suave);line-height:1.5}
.parada .chip{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  background:var(--arena);border-radius:999px;padding:3px 9px;margin:6px 6px 0 0;color:var(--tea);
}
.parada .chip.ojo{background:#F5D9D2;color:var(--cochinilla);font-weight:700}

/* ── EL PROGRAMA DEL DÍA, DENTRO DE LA FICHA DE LA FIESTA ──
   Se pulsa el chip y se despliega ahí mismo: el plan no se va de la pantalla.
   El chip es un botón de verdad —cursor y todo— para que se note que se toca;
   los demás chips son etiquetas y no lo parecen a propósito. */
.parada .chip.verActos{
  border:0;cursor:pointer;background:var(--verde-suave,#DCEBE0);
  color:var(--tea);font-weight:700;
}
.parada .chip.verActos.abierto{background:var(--tea);color:#fff}
.parada .actosPlan{
  margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--arena);
  background:rgba(0,0,0,.03);border-radius:0 8px 8px 0;
  max-height:280px;overflow-y:auto;
}
.parada .actoP{font-size:14px;line-height:1.45;padding:4px 0}
.parada .actoP + .actoP{border-top:1px dotted var(--arena)}
.parada .actoP b{font-family:var(--mono);font-size:12px;margin-right:6px;color:var(--cochinilla)}
.parada .actoP span{display:block;font-size:12px;color:var(--tea-suave);margin-top:1px}

/* ── FICHAS CON IMAGEN ── */
.mapas{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.mapas .grupo{margin-top:14px}
.mapas .grupo i{
  display:block;font-style:normal;font-family:var(--disp);
  font-variation-settings:'SOFT' 30,'WONK' 1;font-weight:600;font-size:15.5px;
  color:var(--tea);margin-bottom:7px;letter-spacing:-.01em;
}
a.mapa{
  display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--arena);
  border-radius:15px;padding:9px 13px 9px 9px;text-decoration:none;color:var(--tea);
  transition:transform .11s,border-color .11s;box-shadow:var(--sombra);
}
a.mapa:hover{transform:translateY(-2px);border-color:var(--tea)}
a.mapa:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:2px}
a.mapa.alerta{border-color:var(--malvasia);background:#FDF6E7}
a.mapa .txt{flex:1 1 auto;min-width:0}
a.mapa b{display:block;font-weight:700;font-size:15.5px;line-height:1.25}
a.mapa span.sub{display:block;color:var(--tea-suave);font-size:12.5px;margin-top:2px}
/* El cuadro pasó de 62 a 80 px. A 62, con el emoji en medio tapando el
   centro, la ortofoto estaba ahí y no se veía: Zeben la daba por perdida.
   Y no era un fallo, era que no se leía. */
a.mapa .foto{flex:0 0 auto;width:80px;height:80px;border-radius:12px;background-size:cover;
  background-position:center;background-color:var(--arena);position:relative;
  display:grid;place-items:center;border:1.5px solid var(--arena)}
/* Sin foto detrás, el icono es lo único que hay: grande y en medio. */
a.mapa .foto .ico{font-size:32px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
/* La sonda que comprueba si la ortofoto ha llegado: no se ve, solo avisa. */
a.mapa .foto .sonda{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0}
/* El telón es el dibujo del pueblo, no una foto del sitio: se apaga un poco
   para que se lea como fondo y el icono siga mandando. */
/* El telón es la estampa del pueblo desenfocada: se queda el color y el aire
   del sitio, y el nombre que llevan escrito dentro deja de leerse a medias
   («LA OROTA»). El icono va limpio encima, que es quien dice qué es. */
a.mapa .foto.telon{position:relative;overflow:hidden;background-color:var(--arena)}
a.mapa .foto.telon::before{content:'';position:absolute;inset:-6px;
  background-image:inherit;background-size:cover;background-position:center;
  filter:blur(3px) saturate(.9) brightness(.86)}
/* El icono va por delante del telón; el número se queda donde estaba, en su
   esquina. Poniéndole position:relative a los dos, el número dejaba de ser
   una chapa en la esquina y se metía en la rejilla, debajo del icono. */
a.mapa .foto.telon .ico{position:relative;z-index:1}
a.mapa .foto.telon .orden{z-index:1}
/* Pero con una foto DE VERDAD detrás, el icono deja de mandar: se va a la
   esquina, pequeño y sobre un disco oscuro para que se lea igual encima de
   la arena que del monteverde. La foto es la que tiene que contar el sitio.
   Con el telón del pueblo no: ese es un dibujo de fondo, no una foto del
   sitio, y ahí el icono sigue siendo quien dice qué es. */
a.mapa .foto.conFondo:not(.telon){place-items:end}
a.mapa .foto.conFondo:not(.telon) .ico{font-size:15px;width:27px;height:27px;
  display:grid;place-items:center;border-radius:50%;background:rgba(22,17,13,.6);
  filter:none;margin:0 -1px -1px 0}
a.mapa .foto .orden{position:absolute;top:-7px;left:-7px;width:24px;height:24px;border-radius:50%;
  background:var(--cochinilla);color:var(--cal);display:grid;place-items:center;
  font:800 13px/1 var(--cuerpo);border:2px solid var(--cal);box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* Los botones para ajustar una parada. Van FUERA del <a> del mapa: si se
   metieran dentro, pulsarlos abriría Google Maps además de cambiar la parada. */
.conAjuste{margin-bottom:7px}
.conAjuste a.mapa{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.ajustes{display:flex;gap:0;background:#fff;border:1.5px solid var(--arena);border-top:1px dashed var(--arena);
  border-radius:0 0 15px 15px;overflow:hidden;box-shadow:var(--sombra)}
.ajustes button{flex:1 1 0;border:0;background:transparent;color:var(--tea-suave);cursor:pointer;
  font:600 12.5px/1 var(--cuerpo);padding:11px 6px;transition:background .12s,color .12s;
  border-right:1px solid var(--arena)}
.ajustes button:last-child{border-right:0}
.ajustes button:hover{background:var(--cal-hueso);color:var(--tea)}
.ajustes button:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:-2px}
.ajustes button:disabled{opacity:.4;cursor:default}
body[data-luz="noche"] .ajustes{background:#211A2C;border-color:#3A3048}
body[data-luz="noche"] .ajustes button{color:#A79BB3;border-right-color:#3A3048}
body[data-luz="noche"] .ajustes button:hover{background:#3A3048;color:#EDE6DC}
body[data-luz="noche"] .conAjuste a.mapa{background:#211A2C}
a.mapa .ir{flex:0 0 auto;color:var(--tea-suave);font-size:17px;transition:transform .12s}
a.mapa:hover .ir{transform:translateX(3px);color:var(--cochinilla)}


.lienzo.sinMapa{display:grid;place-items:center;background:var(--arena);height:auto!important;padding:22px 18px}
.avisoMapa{text-align:center;max-width:34ch}
.avisoMapa b{display:block;font-family:var(--disp);font-weight:700;font-size:16px;color:var(--tea)}
.avisoMapa span{display:block;font-size:13px;color:var(--tea-suave);margin:5px 0 11px;line-height:1.4}
.avisoMapa a{display:inline-block;background:var(--tea);color:var(--cal-hueso);text-decoration:none;
  border-radius:999px;padding:9px 17px;font-family:var(--mono);font-size:12px;font-weight:700}


/* ── MAPA ── */

.leyenda{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-family:var(--mono);font-size:10.5px;color:var(--tea-suave)}
.leyenda .ley{display:flex;align-items:center;gap:5px}
.leyenda .ley i{width:10px;height:10px;border-radius:50%;display:inline-block;border:1.5px solid var(--cal)}
.leaflet-popup-content{font-family:var(--cuerpo);font-size:13.5px;line-height:1.4}
.leaflet-popup-content a{color:var(--cochinilla);font-weight:700;text-decoration:none}
.lienzo{height:250px;border-radius:16px;overflow:hidden;margin-top:9px;border:1.5px solid var(--tea);box-shadow:var(--sombra)}
.lienzo .leaflet-container{background:var(--arena)}
.capas{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;align-items:center}
button.capa{
  background:#fff;border:1.5px solid var(--arena);color:var(--tea-suave);border-radius:999px;
  padding:6px 13px;font-family:var(--mono);font-size:11px;cursor:pointer;transition:.11s;
}
button.capa:hover{border-color:var(--tea)}
button.capa[aria-pressed="true"]{background:var(--laurisilva);color:var(--cal);border-color:var(--laurisilva)}
button.capa.viejo{border-color:var(--arena);color:var(--malvasia)}
button.capa.viejo[aria-pressed="true"]{background:var(--malvasia);color:var(--picon);border-color:var(--malvasia)}
.capas.viaje{margin-top:6px}
.capas.viaje .et{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tea-suave);margin-right:2px}
.credito{font-family:var(--mono);font-size:9.5px;color:var(--tea-suave);opacity:.75;margin-top:6px}

/* ── PANEL DEL CABILDO: escondido tras un botón ── */
.tecnico{position:fixed;right:14px;bottom:14px;z-index:40}
button.abrirPanel{
  background:var(--tea);color:var(--cal);border:0;border-radius:999px;padding:11px 17px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;cursor:pointer;
  box-shadow:0 4px 14px rgba(62,43,28,.32);
}
button.abrirPanel:hover{background:var(--picon)}
button.abrirPanel:focus-visible{outline:2.5px solid var(--malvasia);outline-offset:2px}
.panel{
  position:fixed;inset:auto 0 0 0;max-height:76vh;background:var(--picon);color:#E7DFD2;
  border-radius:22px 22px 0 0;transform:translateY(102%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
  z-index:50;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(27,21,18,.4);
}
.panel[data-abierto="1"]{transform:none}
.panel-cab{padding:16px 20px 12px;border-bottom:1px solid #3A2E27;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.panel-cab h2{font-family:var(--disp);font-variation-settings:'SOFT' 30;font-weight:600;font-size:19px;margin:0;color:#FBF5E9}
.panel-cab p{margin:3px 0 0;font-size:13px;color:#A9998A;max-width:56ch}
.pestanas{display:flex;border-bottom:1px solid #3A2E27;overflow-x:auto}
button.pes{flex:0 0 auto;background:transparent;border:0;border-bottom:2.5px solid transparent;
  color:#A9998A;padding:12px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap}
button.pes[aria-selected="true"]{color:var(--malvasia);border-bottom-color:var(--malvasia)}
.hoja{display:none;padding:15px 20px 26px;overflow-y:auto;flex:1 1 auto}
.hoja[data-activa="1"]{display:block}
.vacio{color:#7D7066;font-style:italic;font-size:14px}
.paso{margin-bottom:13px;padding-left:12px;border-left:2.5px solid #3A2E27;font-family:var(--mono);font-size:12px;line-height:1.6}
.paso.ok{border-left-color:var(--laurisilva)}
.paso.avi{border-left-color:var(--malvasia)}
.paso.mal{border-left-color:var(--cochinilla)}
.paso b{display:block;color:#FBF5E9;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:10px;margin-bottom:3px}
.paso span{color:#B5A798}
.si{color:#7FB59B}.no{color:#E08C7C}.am{color:var(--malvasia)}
pre.json{font-family:var(--mono);font-size:11px;line-height:1.55;color:#B5A798;background:#120E0C;
  border:1px solid #3A2E27;border-radius:12px;padding:13px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;margin:0}
textarea.prompt{width:100%;min-height:340px;background:#120E0C;color:#C8BCAE;border:1px solid #3A2E27;
  border-radius:12px;padding:13px;font-family:var(--mono);font-size:11.5px;line-height:1.6;resize:vertical}
.fila-bot{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
button.accion{background:var(--malvasia);color:var(--picon);border:0;border-radius:11px;padding:10px 16px;
  font-family:var(--cuerpo);font-size:14px;font-weight:700;cursor:pointer}
button.accion.sec{background:transparent;color:#A9998A;border:1px solid #3A2E27}
.nota{font-size:13px;color:#A9998A;margin:0 0 12px;max-width:70ch}
/* La lista de programas que faltan: es la trastienda, no la web del turista. */
ul.pendientes{list-style:none;margin:0 0 14px;padding:0}
ul.pendientes li{border-left:2.5px solid var(--malvasia);padding:0 0 0 12px;margin-bottom:12px;
  font-family:var(--mono);font-size:12px;line-height:1.6;color:#C8BCAE}
ul.pendientes li b{color:#FBF5E9}
ul.pendientes .nota{margin:0}
.cerrar{background:transparent;border:0;color:#A9998A;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.cerrar:hover{color:#FBF5E9}
.pie{margin-top:34px;padding-top:18px;border-top:1.5px dotted var(--arena);color:var(--tea-suave);font-size:13px}
.pie code{font-family:var(--mono);color:var(--cochinilla);font-size:12px}

/* ── La cabecera cambia con la hora, como la isla ── */
body{transition:background-color .8s ease}
body[data-luz="amanecer"]{--cal:#FDF3E4;--arena:#F0DCC4;--cochinilla:#B8503A}
body[data-luz="dia"]{--cal:#FBF5E9;--arena:#E8D9BE}
body[data-luz="atardecer"]{--cal:#FBEDDF;--arena:#EBD3B8;--cochinilla:#A63A2A}
body[data-luz="noche"]{--cal:#171214;--cal-hueso:#211A2C;--tea:#EDE6DC;--tea-suave:#A79BB3;
  --arena:#3A3048;--sombra:0 2px 0 rgba(0,0,0,.35);--cochinilla:#E08472;--malvasia:#E8B65A;
  --agua:#101A1B;--c-metropolitana:#3C5A62;--c-acentejo:#40584A;--c-orotava:#4B5840;
  --c-icoden-daute:#5A5B3C;--c-guimar:#6E5B3B;--c-sur:#7C6743}
body[data-luz="noche"] .etq{background:#211A2C;border-color:#5B4C6E;box-shadow:1.5px 1.5px 0 #5B4C6E}
body[data-luz="noche"] .etq[data-comarca="acentejo"]::after{background:#5B4C6E}
body[data-luz="noche"] .b.naira{background:#211A2C;border-color:#3A3048}
body[data-luz="noche"] button.opt{background:#211A2C;border-color:#5B4C6E;box-shadow:3px 3px 0 #5B4C6E;color:var(--tea)}
body[data-luz="noche"] button.opt:hover{background:#2A2137;box-shadow:5px 5px 0 #5B4C6E}
body[data-luz="noche"] a.mapa{background:#211A2C;border-color:#3A3048;color:var(--tea)}
body[data-luz="noche"] .parada .hito{background:#211A2C;border-color:#5B4C6E}
body[data-luz="noche"] button.capa{background:#211A2C;border-color:#3A3048;color:var(--tea-suave)}
body[data-luz="noche"] .idiomas{border-color:#5B4C6E}
body[data-luz="noche"] button.idi[aria-pressed="true"]{background:#5B4C6E;color:#EDE6DC}
/* De noche estos dos botones quedaban ilegibles: el de ubicación pintaba texto
   oscuro sobre verde oscuro, y el de «Ver cómo se armó» oscuro sobre oscuro al
   pasar por encima. Se les fuerza el texto claro. */
body[data-luz="noche"] button.btnUbi{background:#35705B;color:#EDE6DC}
body[data-luz="noche"] button.abrirPanel:hover{background:#3A3048;color:#EDE6DC}
body[data-luz="noche"] button.capa[aria-pressed="true"]{background:var(--laurisilva);color:#EDE6DC;border-color:var(--laurisilva)}
#silueta *{transition:fill .8s ease,opacity .8s ease}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── EL RELOJ DE LA ÚLTIMA GUAGUA ──
   Va el primero del bloque del plan, delante del mapa: a quien va en guagua lo
   primero que le hace falta no es dónde está el sitio, es cuánto le queda para
   volver. Tres estados, y el color sube con la prisa. No parpadea ni pita: es
   un dato que se mira de reojo mientras se lee el plan, no una alarma. */
.relojG{
  display:block;background:#fff;border:1.5px solid var(--arena);border-left-width:5px;
  border-radius:15px;padding:10px 13px;box-shadow:var(--sombra);
  font-size:14.5px;line-height:1.45;color:var(--tea);
}
.relojG.ok{border-left-color:var(--laurisilva)}
.relojG.aviso{border-left-color:var(--malvasia);background:#FDF6E7}
.relojG.justo,.relojG.ya{border-left-color:var(--cochinilla);background:#FBEDE9;font-weight:600}

/* ── La barra de buscar el pueblo (paso 2) ──
   Va debajo del mapa y por encima del botón de la ubicación. Se separa con
   aire, no con un filete: el filete ya lo lleva la invitación de la ubicación
   y dos seguidos parten la pantalla en tres trozos. */
.buscaMuni{margin:14px 0 4px;position:relative}
.buscaMuni .bmInput{width:100%;box-sizing:border-box;padding:11px 14px;
  font:inherit;font-size:1rem;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linea);border-radius:12px}
.buscaMuni .bmInput:focus{outline:none;border-color:var(--mar);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mar) 22%,transparent)}
.bmLista{display:none}
.bmLista.abierta{display:block;margin-top:6px;border:1px solid var(--linea);
  border-radius:12px;overflow:hidden;background:var(--papel)}
.bmOpt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  width:100%;padding:10px 14px;font:inherit;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--linea);color:var(--tinta)}
.bmOpt:last-child{border-bottom:0}
.bmOpt:hover,.bmOpt:focus{background:color-mix(in srgb,var(--mar) 10%,transparent)}
.bmCo{font-size:.82rem;opacity:.65;white-space:nowrap}
.bmNada{margin:0;padding:10px 14px;font-size:.9rem;opacity:.7}
.bmEn{font-style:normal;opacity:.6}