/* Pensado para personas mayores: letra clara, mucho contraste, zonas de toque grandes */
:root {
  --fondo: #f4efe7;
  --tarjeta: #ffffff;
  --texto: #1d1a16;
  --suave: #5f574c;
  --acento: #7a1f2b;
  --acento-claro: #f5e6e8;
  --acento-texto: #ffffff;
  --borde: #ddd3c5;
  --hoy: #fff3c4;
  --resultado: #e9f4ec;
  --resultado-texto: #17532d;
  --sombra: 0 1px 2px rgba(60, 40, 20, .06), 0 4px 14px rgba(60, 40, 20, .07);
  --letra: 17px;          /* tamaño de letra: lo cambia el usuario con A− / A+ */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #16130f; --tarjeta: #231f19; --texto: #f4efe7; --suave: #c5bbac;
    --acento: #e48a95; --acento-claro: #3a2528; --acento-texto: #1a0f10; --borde: #3f372d;
    --hoy: #3d3514; --resultado: #1c3324; --resultado-texto: #a6e3b8; --sombra: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #16130f; --tarjeta: #231f19; --texto: #f4efe7; --suave: #c5bbac;
  --acento: #e48a95; --acento-claro: #3a2528; --acento-texto: #1a0f10; --borde: #3f372d;
  --hoy: #3d3514; --resultado: #1c3324; --resultado-texto: #a6e3b8; --sombra: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: var(--letra); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; line-height: 1.45;
}
main { max-width: 720px; margin: 0 auto; padding: 2px 14px 40px; }
a { color: var(--acento); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cabecera fija ---------- */
.fijo {
  position: sticky; top: 0; z-index: 1000;
  background: var(--fondo); border-bottom: 1px solid var(--borde);
  box-shadow: 0 6px 14px -10px rgba(60, 40, 20, .35);
}
.fijo-dentro { max-width: 720px; margin: 0 auto; padding: 10px 14px 10px; padding-top: max(10px, env(safe-area-inset-top)); }
.titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fijo h1 { font-size: 1.45rem; line-height: 1.15; margin: 0; color: var(--acento); letter-spacing: -.01em; }
.hoy { margin: 0; color: var(--suave); font-size: .9rem; }
.hoy::first-letter { text-transform: uppercase; }
.lugar-actual {
  margin-left: 8px; border: 0; background: var(--acento-claro); color: var(--acento); border-radius: 999px;
  padding: 1px 10px; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.lugar-actual { display: inline-flex; align-items: center; gap: 4px; }
.lugar-actual[hidden] { display: none; }
.lugar-actual::before {
  content: ""; width: .8em; height: .8em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7Zm0 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7Zm0 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.panel-titulo { font-size: 1.1rem !important; font-weight: 800; color: var(--texto) !important; margin: 0 !important; }
.botonera { display: flex; flex-wrap: wrap; gap: 6px; }
.botonera button {
  border: 1px solid var(--borde); background: var(--fondo); border-radius: 999px; padding: 6px 12px;
  min-height: 40px; cursor: pointer; color: var(--texto);
}
.botonera button[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.fila-lugar { display: flex; gap: 8px; }
.fila-lugar input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--borde); background: var(--tarjeta); }
.estado-lugar { margin: 0; font-size: .9rem; color: var(--acento) !important; }
.estado-lugar:empty { display: none; }
.boton.secundario { background: transparent; border: 1px solid var(--borde); }

.barra { display: flex; align-items: center; gap: 8px; }
.microfono {
  flex: none; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--acento); color: var(--acento-texto); display: grid; place-items: center;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--acento) 35%, transparent);
}
.microfono.escuchando { animation: latido 1.1s ease-in-out infinite; }
.microfono[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 50%, transparent); } 50% { box-shadow: 0 0 0 12px transparent; } }
#pregunta {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--borde); background: var(--tarjeta);
}
.redondo {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--acento-claro); color: var(--acento); display: grid; place-items: center; font-weight: 800;
}
.ayuda { font-size: 1.15rem; }
.ayuda[aria-expanded="true"], .redondo[aria-pressed="true"], #boton-ubicacion[aria-expanded="true"] { background: var(--acento); color: var(--acento-texto); }
.redondo.buscando { animation: latido 1.1s ease-in-out infinite; }
.redondo.bloqueada { background: #fbe9d0; color: #8a4b00; position: relative; }
.redondo.bloqueada::after { content: ""; position: absolute; width: 26px; height: 3px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }

/* Última pregunta y respuesta, compacta */
.dialogo {
  display: block; width: 100%; text-align: left; margin-top: 8px; padding: 8px 12px; cursor: pointer;
  border: 0; border-radius: 12px; background: var(--resultado); color: var(--resultado-texto);
}
.dialogo[hidden] { display: none; }
.d-pregunta { display: block; font-size: .8rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-pregunta:empty { display: none; }
.d-respuesta {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-weight: 650; line-height: 1.35;
}
.dialogo[aria-expanded="true"] .d-respuesta { -webkit-line-clamp: unset; display: block; max-height: 40vh; overflow-y: auto; }
.dialogo.escuchando { background: var(--acento-claro); color: var(--texto); }
/* Comprimida (al mirar otra tarjeta): una sola línea */
.dialogo.mini { padding: 5px 12px; }
.dialogo.mini .d-pregunta { display: none; }
.dialogo.mini .d-respuesta { -webkit-line-clamp: 1; font-weight: 600; font-size: .9rem; }
.dialogo.escuchando .d-respuesta { font-size: 1.15rem; font-weight: 500; -webkit-line-clamp: 3; }

.panel-ayuda {
  margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto;
}
.panel-ayuda[hidden] { display: none; }
/* Que los botones de dos líneas no se encojan dentro del panel */
.panel-ayuda > *, .anteriores > * { flex-shrink: 0; }
.ejemplo, .anteriores button { height: auto; white-space: normal; line-height: 1.35; }
.panel-ayuda p { margin: 4px 0 0; color: var(--suave); font-size: .9rem; }
.ejemplo, .anteriores button {
  border: 1px solid var(--borde); background: var(--fondo); border-radius: 12px; text-align: left;
  padding: 8px 12px; cursor: pointer; min-height: 44px; color: var(--texto); width: 100%;
}
.ejemplo::before { content: "«"; color: var(--acento); }
.ejemplo::after { content: "»"; color: var(--acento); }
.anteriores { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.letra { display: flex; align-items: center; gap: 10px; color: var(--suave); }
.letra span { flex: 1; }

/* ---------- Tarjetas desplegables ---------- */
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px;
  margin: 12px 0; box-shadow: var(--sombra); overflow: hidden;
}
.tarjeta > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; -webkit-tap-highlight-color: transparent; user-select: none;
}
.tarjeta > summary::-webkit-details-marker { display: none; }
.tarjeta[open] > summary { border-bottom: 1px solid var(--borde); }
.t-icono {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--acento-claro); color: var(--acento); margin-top: 2px;
}
.t-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* 1) Qué es */
.t-etiqueta { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
/* 2) De qué trata */
.t-tema { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.t-tema:empty { display: none; }
.t-detalle { color: var(--suave); font-size: .88rem; line-height: 1.3; }
.t-detalle:empty { display: none; }
/* 3) El resultado */
.t-resultado {
  align-self: flex-start; margin-top: 3px; padding: 5px 10px; border-radius: 9px;
  background: var(--resultado); color: var(--resultado-texto); font-weight: 700; line-height: 1.35;
}
.t-resultado:empty, .t-resultado[hidden] { display: none; }
#h-resultado { white-space: pre-line; }
.t-flecha {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--acento-claro);
  display: grid; place-items: center; transition: transform .2s; margin-top: 4px;
}
.t-flecha::before {
  content: ""; width: 9px; height: 9px; border-right: 3px solid var(--acento); border-bottom: 3px solid var(--acento);
  transform: translateY(-2px) rotate(45deg);
}
.tarjeta[open] > summary .t-flecha { transform: rotate(180deg); }
.t-cuerpo { padding: 14px; }
.tarjeta.cambiada { animation: cambio 1.4s ease-out; }
@keyframes cambio { 0% { box-shadow: 0 0 0 4px var(--acento); } 100% { box-shadow: var(--sombra); } }
@media (prefers-reduced-motion: reduce) {
  .t-flecha { transition: none; }
  .tarjeta.cambiada, .microfono.escuchando, .redondo.buscando { animation: none; }
}

/* ---------- Botones ---------- */
.boton {
  min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--acento-claro); color: var(--acento); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.boton svg { color: var(--acento); }

/* ---------- Horario de iglesia ---------- */
select {
  width: 100%; min-height: 50px; padding: 8px 12px; border-radius: 12px;
  border: 2px solid var(--borde); background: var(--tarjeta);
}
#ficha { margin-top: 10px; }
.semana { width: 100%; border-collapse: collapse; }
.semana th, .semana td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.semana tr:last-child th, .semana tr:last-child td { border-bottom: 0; }
.semana th { width: 6.6em; font-weight: 600; }
.semana tr.es-hoy { background: var(--hoy); }
.hora { display: inline-block; margin: 1px 12px 1px 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.hora small { font-weight: 400; color: var(--suave); }
.hora.pasada { opacity: .4; font-weight: 400; }
.sin-datos { color: var(--suave); font-style: italic; }
.nota { color: var(--suave); font-size: .88rem; }
.interruptor { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--suave); cursor: pointer; font-size: .92rem; }
.interruptor input { width: 24px; height: 24px; flex: none; accent-color: var(--acento); }

/* ---------- Mapas ---------- */
.mapa { height: 240px; border-radius: 12px; margin-top: 12px; border: 1px solid var(--borde); background: var(--fondo); }
.mapa[hidden] { display: none; }
.mapa { height: 300px; margin-top: 8px; }
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.marca-num.chica { display: inline-grid; width: 20px; height: 20px; font-size: 11px; border-width: 1px; box-shadow: none; }
.marca-yo.chica { display: inline-block; width: 12px; height: 12px; border-width: 2px; }
.marca-num.iglesia { background: #1f6b3a; }
.foto { margin: 0; }
.foto img { display: block; width: 100%; height: auto; max-height: 55vh; object-fit: cover; border-radius: 12px; background: var(--fondo); }
.foto figcaption { margin-top: 6px; color: var(--suave); font-size: .8rem; }
.marca-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--acento); color: #fff; border: 2px solid #fff;
  display: grid; place-items: center; font: 700 14px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.marca-yo { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(26,115,232,.35); }

/* ---------- Dónde hay misa ---------- */
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rejilla label { display: flex; flex-direction: column; gap: 4px; color: var(--suave); font-size: .88rem; }
.rejilla .ancho { grid-column: 1 / -1; }
.rejilla [hidden] { display: none; }
.rejilla[hidden] { display: none; }
.nueva-busqueda, .ver-mapa { width: 100%; justify-content: center; margin-bottom: 4px; }
.ver-mapa { margin-top: 8px; }
.ver-mapa[aria-expanded="true"] { background: var(--acento); color: var(--acento-texto); }
.ver-mapa[aria-expanded="true"] svg { color: var(--acento-texto); }
.nueva-busqueda[aria-expanded="true"] { background: var(--acento); color: var(--acento-texto); }
.nueva-busqueda[aria-expanded="true"] svg { color: var(--acento-texto); }
#form-hora:not([hidden]) { margin: 10px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.resultados { padding-left: 0; list-style: none; margin: 12px 0 0; counter-reset: n; }
.resultados li { border-bottom: 1px solid var(--borde); }
.resultados li:last-child { border-bottom: 0; }
.resultados .mostrar-mas { padding: 12px 0 2px; }
.resultados .mostrar-mas .boton { width: 100%; display: flex; }
.resultados button {
  width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; text-align: left;
  background: none; border: 0; padding: 10px 2px; cursor: pointer; min-height: 48px; color: var(--texto);
}
.resultados .h { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--acento); grid-row: span 2; min-width: 3.4em; }
.resultados .h b {
  display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; margin-right: 4px;
  background: var(--acento); color: var(--acento-texto); font-size: .75rem;
}
.resultados .det { color: var(--suave); font-size: .85rem; }
.avisos { margin: 0 0 12px; padding-left: 1.1em; }
.avisos li { margin: .35em 0; }

/* El mapa no debe tapar la cabecera fija al hacer scroll */
.mapa { position: relative; isolation: isolate; z-index: 0; }
.leaflet-container { font: inherit; }
.aviso-mapa {
  position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; text-align: center; padding: 16px;
  background: rgba(0, 0, 0, .45); color: #fff; font-weight: 700; font-size: 1.05rem;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.aviso-mapa.visible { opacity: 1; }
#t-foto[open] #f-detalle { display: none; }

/* Primera vez: pedir ubicación */
.bienvenida-ubicacion { border: 2px solid var(--acento); }
.bienvenida-ubicacion p:not(.panel-titulo) { color: var(--texto) !important; font-size: 1rem !important; }
.boton.grande { min-height: 56px; font-size: 1.1rem; background: var(--acento); color: var(--acento-texto); width: 100%; }
.bienvenida-ubicacion .boton { width: 100%; }
.enlace { background: none; border: 0; color: var(--suave); text-decoration: underline; padding: 8px; cursor: pointer; align-self: center; }

/* Miniatura de la foto en cada resultado */
.resultados li.con-foto { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.resultados .foto-mini {
  display: block; min-height: 0; flex: none;
  width: 64px; height: 64px; padding: 0; border: 2px solid var(--borde); border-radius: 10px; overflow: hidden;
  background: var(--fondo); cursor: pointer;
}
.resultados .foto-mini[aria-expanded="true"] { border-color: var(--acento); }
.resultados .foto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-grande { grid-column: 1 / -1; margin: 4px 0 12px; }

/* "Dónde hay misa" sin abrir todavía: el texto de ayuda no parece un resultado */
.t-resultado.reposo { background: transparent; color: var(--suave); font-weight: 400; padding: 0; }

/* Texto de la casilla de preguntar: que se lea bien */
#pregunta::placeholder { color: var(--suave); opacity: 1; }

/* Tarjetas cerradas más compactas: que quepan todas en la pantalla */
.tarjeta { margin: 8px 0; }
.tarjeta > summary { padding: 10px 12px; gap: 10px; align-items: center; }
.tarjeta[open] > summary { align-items: flex-start; }
.t-icono { width: 34px; height: 34px; border-radius: 10px; margin-top: 0; }
.t-icono svg { width: 20px; height: 20px; }
.t-textos { gap: 1px; }
.t-tema { font-size: 1.05rem; }
.t-resultado { margin-top: 3px; padding: 3px 9px; font-size: .95rem; }
.t-flecha { width: 32px; height: 32px; margin-top: 0; }
.t-flecha::before { width: 8px; height: 8px; }

.ver-semana { width: 100%; margin-top: 8px; }
.semana tr[hidden] { display: none; }

.nota-dia { display: block; font-weight: 400; font-size: .75rem; color: var(--acento); }
.fuente { margin-top: 14px; }

/* Respuesta en esquema: título y una línea por dato */
.d-respuesta.esquema { display: flex; flex-direction: column; gap: 2px; -webkit-line-clamp: unset; }
.e-titulo { font-weight: 800; }
.e-linea { font-weight: 500; color: var(--texto); line-height: 1.3; }
.e-hora { display: inline-block; min-width: 3.1em; margin-right: .45em; color: var(--acento); font-variant-numeric: tabular-nums; }
.e-aviso { color: var(--acento); font-weight: 700; }
/* Cerrada: título y 2 líneas (+ "Toque para ver…"); comprimida: solo el título; abierta: todo */
.e-linea.con-hora { display: grid; grid-template-columns: auto 1fr; column-gap: .5em; align-items: baseline; }
.e-linea.con-hora .e-hora { min-width: 2.9em; margin-right: 0; }
.e-mas { display: none; font-size: .8rem; color: var(--suave); font-weight: 600; }
.dialogo:not([aria-expanded="true"]) .d-respuesta.esquema .e-linea:nth-child(n+4) { display: none; }
.dialogo:not([aria-expanded="true"]):not(.mini) .e-mas { display: block; }
.dialogo.mini .d-respuesta.esquema .e-linea { display: none; }
.dialogo[aria-expanded="true"] .d-respuesta.esquema { display: flex; max-height: 45vh; overflow-y: auto; }

/* Barra: micrófono, callar, ubicación y ayuda arriba; la casilla de escribir debajo, a todo lo ancho */
.barra { flex-wrap: wrap; row-gap: 8px; }
.barra .hueco { flex: 1; }
.barra #pregunta { flex: 1 1 100%; order: 10; height: 46px; }
/* Botón de voz: siempre en tono claro (distinto del micrófono); tachado bien visible; anillo mientras lee */
.redondo.voz { background: var(--acento-claro); color: var(--acento); border: 2px solid transparent; }
.voz .voz-no { display: none; }
.voz[aria-pressed="false"] .voz-si { display: none; }
.voz[aria-pressed="false"] .voz-no { display: block; }
.voz[aria-pressed="false"] { color: var(--suave); background: var(--fondo); border-color: var(--borde); }
.voz.leyendo { border-color: var(--acento); animation: anillo 1.1s ease-in-out infinite; }
@keyframes anillo { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 35%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .voz.leyendo { animation: none; } }

/* Cerrar la respuesta abierta */
.dialogo-caja { position: relative; }
.cerrar-dialogo {
  position: absolute; top: 16px; right: 8px; z-index: 2;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--acento); font-weight: 700; font-size: .85rem;
  border-radius: 999px; padding: 4px 12px; min-height: 34px; cursor: pointer;
}
.cerrar-dialogo[hidden] { display: none; }
.dialogo[aria-expanded="true"] .d-pregunta { padding-right: 100px; line-height: 34px; margin-bottom: 4px; }

/* ---------- Modo sencillo: pregunta → opciones → la iglesia elegida ---------- */
.sencillo[hidden] { display: none; }
/* Arriba solo se ve lo que va diciendo mientras escucha; la respuesta sale abajo, en grande */
.modo-sencillo .dialogo:not(.escuchando), .modo-sencillo .cerrar-dialogo { display: none; }
.sencillo { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.s-pregunta { margin: 0; color: var(--suave); font-size: .95rem; }
.s-caja { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra); }
.s-caja p { margin: 0; }
.s-titulo { font-weight: 800; font-size: 1.15rem; color: var(--resultado-texto); line-height: 1.3; }
.s-linea { margin-top: 4px !important; font-size: 1.05rem; }
.s-ayuda, .s-bienvenida p:not(.s-titulo) { color: var(--suave); margin-top: 4px !important; }
.s-bienvenida .s-titulo { color: var(--acento); }
.s-bienvenida .anteriores { margin-top: 10px; }
.s-opciones { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.s-opcion {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  text-align: left; padding: 12px; min-height: 64px; cursor: pointer;
  border: 2px solid var(--borde); border-radius: 14px; background: var(--fondo);
}
.s-opcion:active { border-color: var(--acento); }
.s-hora { font-weight: 800; font-size: 1.2rem; color: var(--acento); font-variant-numeric: tabular-nums; min-width: 3em; }
.s-textos { display: flex; flex-direction: column; min-width: 0; }
.s-nombre { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.s-det { color: var(--suave); font-size: .88rem; margin-top: 2px; }
.s-mini { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--borde); }
.s-mas { width: 100%; margin-top: 10px; }
.s-nombre-grande { margin: 0 0 4px; font-size: 1.4rem; line-height: 1.2; color: var(--acento); }
.s-dir { color: var(--suave); font-size: .95rem; }
.s-dia { margin-top: 12px !important; font-weight: 800; font-size: 1.1rem; }
.s-horas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.s-chip {
  font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; padding: 6px 14px; border-radius: 12px;
  background: var(--resultado); color: var(--resultado-texto); border: 2px solid transparent;
}
.s-chip small { font-size: .75rem; font-weight: 600; }
.s-chip.elegida { background: var(--acento); color: var(--acento-texto); }
.s-chip.pasada { opacity: .45; text-decoration: line-through; }
.s-sin { color: var(--suave); font-size: 1rem; padding: 6px 0; }
.s-nota { margin-top: 10px !important; color: var(--suave); font-size: .9rem; }
.s-llegar { width: 100%; margin-top: 14px; text-decoration: none; }
.s-mapa { margin-top: 0; height: 260px; }
.s-foto img { max-height: 45vh; }
.s-otras { width: 100%; min-height: 52px; }
.s-volver { gap: 10px; }
.s-volver svg { color: var(--acento-texto); }
.sencillo-interruptor { margin: 0 0 6px; color: var(--texto); font-size: 1rem; }
.s-bienvenida .letra { margin-top: 14px; }
.s-quitar { display: block; margin: 8px auto 0; font-size: .9rem; }

/* «Buscar»: la tarjeta grande que agrupa las de buscar a mano */
.grupo > summary .t-tema { font-size: 1.3rem; color: var(--acento); }
.grupo > summary .t-icono { background: var(--acento); color: var(--acento-texto); }
.grupo-cuerpo { padding: 4px 10px 10px; background: var(--fondo); }
.grupo-cuerpo .tarjeta { box-shadow: none; }
.modo-sencillo #t-buscar { margin-top: 18px; }

/* ---------- Cabecera: título a la izquierda; «?» y ubicación, uno encima de otro, a la derecha ---------- */
.titulo-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px; margin-bottom: 8px; }
.titulo-textos { min-width: 0; }
.titulo-textos .hoy { margin-top: 4px; }
.titulo-botones { display: flex; flex-direction: column; gap: 6px; flex: none; }
.titulo-botones .redondo { width: 40px; height: 40px; }
/* Tarjeta «Pregunta» */
.t-pregunta { margin: 0; padding: 10px 12px; overflow: visible; }
.p-fila { display: flex; align-items: center; gap: 10px; }
.p-abrir {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left;
  background: none; border: 0; padding: 4px 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.p-tema { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.p-abrir[aria-expanded="true"] .t-flecha { transform: rotate(180deg); }
.p-escribir { margin-top: 10px; }
.p-escribir[hidden] { display: none; }
.p-escribir #pregunta { width: 100%; height: 48px; }
.t-pregunta .dialogo-caja .dialogo { margin-top: 10px; }

/* ---------- Cabecera: «?» y ⚙ juntos; la ubicación debajo ---------- */
.titulo-botones { display: grid; grid-template-columns: auto auto; gap: 6px; }
.titulo-botones #boton-ubicacion { grid-column: 1 / -1; justify-self: center; }
#boton-config[aria-expanded="true"] { background: var(--acento); color: var(--acento-texto); }

/* ---------- Colores a elegir (⚙). Granate es el de siempre ---------- */
.paletas { display: flex; flex-wrap: wrap; gap: 6px; }
.paletas button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; cursor: pointer;
  border: 2px solid var(--borde); border-radius: 999px; background: var(--fondo); color: var(--texto); font-weight: 600;
}
.paletas button[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-claro); color: var(--acento); }
.muestra { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
[data-paleta="granate"] > .muestra { background: #7a1f2b; }
[data-paleta="azul"] > .muestra { background: #1f4e8c; }
[data-paleta="verde"] > .muestra { background: #2f6b3a; }
[data-paleta="morado"] > .muestra { background: #5b3a8c; }
[data-paleta="contraste"] > .muestra { background: linear-gradient(135deg, #000 50%, #ffe600 50%); }

:root[data-paleta="azul"] { --fondo: #eef2f7; --acento: #1f4e8c; --acento-claro: #e1e9f5; --borde: #cdd7e4; }
:root[data-paleta="verde"] { --fondo: #eff3ec; --acento: #2f6b3a; --acento-claro: #e0eee1; --borde: #cfdbcb; --resultado: #fdf1d2; --resultado-texto: #6a4800; }
:root[data-paleta="morado"] { --fondo: #f3f0f6; --acento: #5b3a8c; --acento-claro: #ebe3f5; --borde: #d8cfe4; }
:root[data-paleta="contraste"] {
  --fondo: #ffffff; --tarjeta: #ffffff; --texto: #000000; --suave: #1a1a1a; --acento: #000000; --acento-claro: #ffe600;
  --acento-texto: #ffffff; --borde: #000000; --resultado: #ffe600; --resultado-texto: #000000; --hoy: #ffe600; --sombra: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-paleta="azul"] { --acento: #8db6f2; --acento-claro: #1d2a3b; --acento-texto: #0b1424; --fondo: #11151b; --tarjeta: #1b212a; --borde: #33404f; }
  :root:not([data-theme="light"])[data-paleta="verde"] { --acento: #8fd39f; --acento-claro: #1c2e20; --acento-texto: #0b1a0f; --fondo: #11160f; --tarjeta: #1b2319; --borde: #354432; --resultado: #3a3115; --resultado-texto: #f3d98b; }
  :root:not([data-theme="light"])[data-paleta="morado"] { --acento: #c6a9f2; --acento-claro: #2c2338; --acento-texto: #160f21; --fondo: #15121a; --tarjeta: #211c28; --borde: #3d3449; }
  :root:not([data-theme="light"])[data-paleta="contraste"] { --fondo: #000; --tarjeta: #000; --texto: #fff; --suave: #f0f0f0; --acento: #ffe600; --acento-claro: #333; --acento-texto: #000; --borde: #fff; --resultado: #ffe600; --resultado-texto: #000; --hoy: #554d00; }
}
:root[data-theme="dark"][data-paleta="azul"] { --acento: #8db6f2; --acento-claro: #1d2a3b; --acento-texto: #0b1424; --fondo: #11151b; --tarjeta: #1b212a; --borde: #33404f; }
:root[data-theme="dark"][data-paleta="verde"] { --acento: #8fd39f; --acento-claro: #1c2e20; --acento-texto: #0b1a0f; --fondo: #11160f; --tarjeta: #1b2319; --borde: #354432; --resultado: #3a3115; --resultado-texto: #f3d98b; }
:root[data-theme="dark"][data-paleta="morado"] { --acento: #c6a9f2; --acento-claro: #2c2338; --acento-texto: #160f21; --fondo: #15121a; --tarjeta: #211c28; --borde: #3d3449; }
:root[data-theme="dark"][data-paleta="contraste"] { --fondo: #000; --tarjeta: #000; --texto: #fff; --suave: #f0f0f0; --acento: #ffe600; --acento-claro: #333; --acento-texto: #000; --borde: #fff; --resultado: #ffe600; --resultado-texto: #000; --hoy: #554d00; }
/* Los tres botones de arriba, más pequeños, para que el título quepa en una línea */
.titulo-botones { gap: 4px; }
.titulo-botones .redondo { width: 34px; height: 34px; font-size: 1rem; }
.titulo-botones .redondo svg { width: 18px; height: 18px; }
.fijo h1 { white-space: nowrap; }
.fijo h1 { font-size: min(1.45rem, 6.8vw); }
/* Cabecera de los paneles con su botón «✕ Cerrar» */
.panel-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cerrar-panel {
  flex: none; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--acento); font-weight: 700; font-size: .85rem;
  border-radius: 999px; padding: 4px 12px; min-height: 34px; cursor: pointer;
}
/* Arriba a la derecha quedan ⚙ y, debajo, la ubicación */
.titulo-botones { grid-template-columns: auto; }
.titulo-botones #boton-ubicacion { grid-column: auto; }
.icono-q { font-weight: 900; font-size: 1.2rem; line-height: 1; }
#t-ejemplos .t-cuerpo .nota { margin: 8px 0 0; }
#t-ejemplos .t-cuerpo .nota:first-child { margin-top: 0; }
/* Tarjeta de ejemplos: cerrada, una línea delgada */
#t-ejemplos[hidden] { display: none; }
#t-ejemplos > summary { padding: 6px 10px; align-items: center; gap: 8px; }
#t-ejemplos .t-icono { width: 26px; height: 26px; border-radius: 8px; }
#t-ejemplos .icono-q { font-size: .95rem; }
#t-ejemplos .t-tema { font-size: .95rem; font-weight: 700; }
#t-ejemplos .t-flecha { width: 26px; height: 26px; }
.sencillo:empty { display: none; }
.modo-sencillo #t-buscar { margin-top: 8px; }
.modo-sencillo .sencillo:not(:empty) + #t-buscar, .modo-sencillo .sencillo:not(:empty) ~ #t-buscar { margin-top: 18px; }

/* Tarjeta del micro: a la izquierda micro y altavoz; a la derecha «Seleccione una pregunta» */
.p-abrir {
  background: var(--acento-claro); color: var(--acento); border-radius: 14px; padding: 8px 10px; min-height: 48px; gap: 8px;
}
.p-abrir[aria-expanded="true"] { background: var(--acento); color: var(--acento-texto); }
.p-abrir .p-tema { flex: 1; font-size: .98rem; color: inherit; }
.p-q {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tarjeta); color: var(--acento); font-weight: 900; font-size: .95rem;
}
.p-abrir .t-flecha { width: 26px; height: 26px; background: transparent; color: inherit; }
.p-escribir { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.p-escribir[hidden] { display: none; }
.p-escribir .nota { margin: 6px 0 0; }
.p-abrir .t-flecha { margin-top: 0; }
.p-abrir .t-flecha::before { border-color: currentColor; }
.t-pregunta .p-fila { gap: 8px; }
.p-abrir { padding: 6px 8px; gap: 6px; }
.p-abrir .p-tema { font-size: .92rem; line-height: 1.2; }
.p-escribir #pregunta { flex: none; height: 48px; }
/* Línea que separa las dos formas de preguntar: hablando (micro) o eligiendo una pregunta */
.p-separador { flex: none; width: 2px; align-self: stretch; margin: 2px 2px; background: var(--borde); border-radius: 2px; }
.t-pregunta { padding: 10px; }
.t-pregunta .p-fila { gap: 6px; }
.t-pregunta .p-fila #callar { width: 40px; height: 40px; }
.p-separador { margin: 4px 1px; }
.p-abrir { padding: 6px 6px 6px 8px; gap: 6px; }
.p-abrir .t-flecha { width: 22px; }
/* Ubicación y configuración: debajo de la tarjeta del micro, sin límite de alto */
main > .panel-ayuda { max-height: none; overflow: visible; margin-top: 10px; box-shadow: var(--sombra); }
/* Micro y altavoz en su recuadro, como «Seleccione una pregunta» */
.p-hablar { flex: none; display: flex; align-items: center; gap: 6px; background: var(--acento-claro); border-radius: 14px; padding: 4px 6px; min-height: 48px; }
.t-pregunta .microfono { width: 48px; height: 48px; }
.t-pregunta .microfono { width: 44px; height: 44px; }
.t-pregunta .p-hablar { padding: 4px 5px; gap: 5px; }
.t-pregunta .p-hablar .voz[aria-pressed="true"] { background: var(--tarjeta); }
.t-pregunta .p-hablar #callar { width: 36px; height: 36px; }
.t-pregunta .p-fila { gap: 5px; }
.p-separador { margin: 6px 0; }
/* Los dos recuadros (micro y «Seleccione una pregunta») igual de altos */
.t-pregunta .p-fila { align-items: stretch; }
.t-pregunta .p-hablar, .t-pregunta .p-abrir { min-height: 52px; }
/* Dirección, distancia y tiempo: cada cosa en su línea */
.linea { display: block; }