/* descubre.php — lista de lugares | mapa (la rejilla .cuerpo y el divisor de css/index.css) y, abajo, los botones del lugar
   activo. En escritorio la página cabe en la pantalla (la lista se desplaza dentro de su panel); en móvil, lista arriba, mapa
   debajo y los botones fijos abajo, solo con su icono. */

/* overflow-x: clip — un píxel de más por redondeos sacaba una barra horizontal en el móvil (clip, no hidden: la barra de
   botones sigue fija abajo) */
body.pagina-descubre { display: flex; flex-direction: column; min-height: 100svh; overflow-x: clip; }

.descubre-cuerpo { flex: 1 1 auto; min-height: 0; }

.descubre-panel {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  padding: 1rem 1.25rem; border-right: 1px solid var(--border);
  font-family: var(--font-sans); color: var(--warm-dark);
}
/* El fondo de la portada (--fondo-pagina, includes/plantilla/fondos.php) detrás del panel, bajo un velo crema que deja
   leer la lista; el mapa lo tapa a la derecha. El fondo no se desplaza con la lista. */
.descubre-cuerpo { --velo-fondo: color-mix(in srgb, var(--cream, #f6f1e7) 76%, transparent); }
.descubre-panel { background: linear-gradient(var(--velo-fondo), var(--velo-fondo)), var(--fondo-pagina, none) center / cover no-repeat; }
.descubre-titulo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.descubre-titulo-fila .btn-ayuda-seccion { margin-top: 0.25rem; }
.descubre-titulo { margin: 0 0 0.2rem; font-family: var(--title-font, inherit); font-size: 1.45rem; font-weight: 500; }
.descubre-subtitulo { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--fog); }
.descubre-subtitulo:empty { display: none; }
.descubre-mensaje { margin: 0.5rem 0; font-size: 0.9rem; }
.descubre-tope { margin: 0 0 0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px; font-size: 0.8rem; background: color-mix(in srgb, var(--acento) 12%, transparent); }
.descubre-tope[hidden] { display: none; }
.descubre-tope button { margin-left: 0.3rem; padding: 0.15rem 0.6rem; border: 0; border-radius: 999px; background: var(--acento); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.descubre-mensaje[hidden] { display: none; }

.descubre-todos {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; font-weight: 600;
}
.descubre-todos[hidden] { display: none; }
.descubre-todos label { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.descubre-ayuda { font-weight: 400; font-size: 0.75rem; color: var(--fog); }

.descubre-lista { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.descubre-fila {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 0.86rem;
}
.descubre-fila:hover { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.descubre-fila.activa { background: color-mix(in srgb, var(--acento) 16%, transparent); }
.descubre-fila input { flex: none; margin: 0; cursor: pointer; }
.descubre-fila-color { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.descubre-fila-nombre {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0.3rem 0; font: inherit; color: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.descubre-fila.activa .descubre-fila-nombre { font-weight: 600; }
.descubre-fila small { flex: none; color: var(--fog); white-space: nowrap; }
.descubre-consejo { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--fog); }
.descubre-consejo[hidden] { display: none; }

.descubre-mapa { min-height: 0; }
.descubre-mapa .mapa-isla { min-height: 0; }

/* ---- Botones del lugar activo ---- */
.descubre-acciones {
  display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap;
  padding: 0.5rem 1.25rem; border-top: 1px solid var(--border); background: var(--card-bg);
  font-family: var(--font-sans); color: var(--warm-dark);
}
.descubre-activo { display: flex; align-items: center; gap: 0.45rem; margin: 0; min-width: 0; flex: 0 1 18rem; font-size: 0.88rem; font-weight: 600; }
.descubre-activo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.descubre-activo-punto { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border); }
.descubre-botones { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; flex: 1 1 auto; }
.descubre-botones-separador { flex: 0 0 0.6rem; }
.descubre-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--cream, #fff); color: inherit;
  font: inherit; font-size: 0.82rem; cursor: pointer; white-space: nowrap;
}
.descubre-btn:hover:not(:disabled), .descubre-btn:focus-visible { border-color: var(--acento); }
.descubre-btn:disabled { opacity: 0.45; cursor: default; }
.descubre-btn[hidden] { display: none; }   /* si no, el display de arriba lo enseñaba igual (la ventana de «sin rutas») */
.descubre-btn-principal { font-weight: 600; border-color: color-mix(in srgb, var(--acento) 55%, var(--border)); }

/* ---- Rutas y fotos del lugar activo (en el mismo panel) ---- */
.descubre-miga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--fog); }
.descubre-miga strong { color: var(--warm-dark); }
.descubre-miga-volver { border: 0; background: none; padding: 0; font: inherit; color: var(--acento); text-decoration: underline; cursor: pointer; }
.descubre-relacionados-titulo { margin: 0 0 0.5rem; font-size: 0.85rem; }
.descubre-aviso-limite { margin: 0 0 0.5rem; font-size: 0.8rem; color: #7a2f20; }
.descubre-aviso-limite[hidden] { display: none; }
.descubre-rutas { list-style: none; margin: 0; padding: 0; }
.descubre-ruta { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.45rem 0.4rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.descubre-ruta input { flex: none; margin: 0.2rem 0 0; cursor: pointer; }
.descubre-ruta .descubre-fila-color { margin-top: 0.3rem; }
.descubre-ruta-texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.86rem; }
.descubre-ruta-texto a { color: inherit; font-weight: 600; text-decoration: none; }
.descubre-ruta-texto a:hover, .descubre-ruta-texto a:focus-visible { text-decoration: underline; }
.descubre-ruta-texto small { color: var(--fog); }
/* recorre.php: la lista de rutas es la misma, con el nombre que se pulsa para elegirla (como los lugares de descubre.php). */
.descubre-ruta.activa { background: color-mix(in srgb, var(--acento) 16%, transparent); }
.descubre-ruta:hover { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.descubre-ruta.activa:hover { background: color-mix(in srgb, var(--acento) 16%, transparent); }
.descubre-ruta-texto .descubre-fila-nombre { padding: 0; font-weight: 600; white-space: normal; }
.descubre-ruta-texto .descubre-fila-nombre:hover, .descubre-ruta-texto .descubre-fila-nombre:focus-visible { text-decoration: underline; }
.descubre-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.4rem; }
.descubre-foto-mini { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--border); cursor: pointer; aspect-ratio: 1; }
.descubre-foto-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.descubre-foto-mini.activa, .descubre-foto-mini:focus-visible { border-color: var(--acento); }
.descubre-btn-cuenta { min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: var(--acento); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }
.descubre-btn-cuenta:empty, .descubre-btn-cuenta[hidden] { display: none; }
.descubre-nada-botones { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; margin-top: 0.8rem; }
/* .descubre-wiki.descubre-foto: más fuerte que .descubre-wiki img (la foto pequeña y a la derecha de la ventana de Wikipedia) */
.descubre-wiki.descubre-foto img { display: block; float: none; width: 100%; height: auto; max-height: 68vh; object-fit: contain; margin: 0; border-radius: 8px; background: #111; }

/* ---- forja.php: la Forja (js/manantial.js) ocupa el panel; en index.php iba superpuesta a otra vista ---- */
.forja-panel { position: relative; }
.forja-panel .manantial-vista { position: static; inset: auto; z-index: auto; flex: 1; min-height: 0; }
.forja-panel .manantial-cuerpo { overflow: visible; }
.forja-panel .buscar-poi-modal { position: absolute; inset: 0; z-index: 40; }
/* brujulea.php: el radio va en su fila (en index.php iba colocado junto al título «Búsqueda», que aquí no hay, y tapaba el «?») */
.brujulea-panel .ruta-radio-fila { position: static; display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }
.brujulea-panel .ruta-radio-fila .ruta-filtro-radio { position: static; }
.forja-isla { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; font-size: 0.85rem; font-weight: 600; }
.forja-isla select { font: inherit; font-weight: 400; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg, #fff); color: inherit; }

/* ---- miradas.php: los filtros (plegables) y la lista de fotos con su miniatura ---- */
.miradas-filtros { margin: 0 0 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--card-bg, #fff) 88%, transparent); }
.miradas-filtros > summary { padding: 0.5rem 0.75rem; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.miradas-filtros-cuenta { display: inline-block; min-width: 1.2rem; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--acento); color: #fff; font-size: 0.72rem; text-align: center; }
.miradas-filtros-cuenta[hidden] { display: none; }
.miradas-filtros-cuerpo { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0.75rem 0.75rem; }
.miradas-campo { --ruta-label-w: 60px; }
.miradas-filtro { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; }
.miradas-filtro > span:first-child, .miradas-filtro > label { min-width: 60px; }
.miradas-filtro input[type="search"], .miradas-filtro input[type="date"] {
  flex: 1 1 8rem; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg, #fff); color: inherit; font: inherit; font-weight: 400;
}
.miradas-mis { font-weight: 400; }
.miradas-mis[hidden] { display: none; }
.miradas-autor { position: relative; }
.miradas-sugerencias { position: absolute; top: 100%; left: 68px; right: 0; z-index: 30; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg, #fff); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); overflow: hidden; }
.miradas-sugerencias[hidden] { display: none; }
.miradas-sugerencias button { padding: 0.45rem 0.7rem; border: 0; background: none; font: inherit; font-weight: 400; text-align: left; cursor: pointer; }
.miradas-sugerencias button:hover, .miradas-sugerencias button:focus-visible { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.miradas-filtros-botones { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; }
.miradas-lista { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.miradas-fila { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0.4rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.miradas-fila:hover { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.miradas-fila.activa { background: color-mix(in srgb, var(--acento) 16%, transparent); }
.miradas-fila > input { flex: none; margin: 0.35rem 0 0; cursor: pointer; }
.miradas-fila > .descubre-fila-color { margin-top: 0.45rem; }
.miradas-mini { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--border); cursor: zoom-in; }
.miradas-fila.activa .miradas-mini { border-color: var(--acento); }
.miradas-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miradas-mini-sin { display: flex; align-items: center; justify-content: center; padding: 0.2rem; font-size: 0.62rem; text-align: center; color: var(--fog); cursor: default; }
.miradas-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.86rem; color: inherit; text-align: left; cursor: pointer; }
.miradas-fila-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miradas-fila.activa .miradas-fila-texto strong { text-decoration: underline; }
.miradas-fila-descripcion { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.82rem; }
.miradas-fila-texto small { color: var(--fog); }
.miradas-estado { font-weight: 600; }
.miradas-estado-pendiente { color: #8a6d1a; }
.miradas-estado-rechazada, .miradas-estado-anulada { color: #a6432f; }
.miradas-motivo { color: #a6432f !important; }

/* ---- descubre.php sin búsqueda («Rincones» de la portada): la isla, un buscador y los tipos de lugar por grupos ---- */
.descubre-eleccion h3 { margin: 0.9rem 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog); }
.descubre-eleccion-buscar { display: flex; gap: 0.4rem; }
.descubre-eleccion-buscar input { flex: 1; min-width: 0; padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg, #fff); color: inherit; font: inherit; }
.descubre-eleccion-tipos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.descubre-eleccion .descubre-btn { width: auto; height: auto; padding: 0.4rem 0.75rem; }   /* también en el móvil, con su nombre */
.descubre-eleccion .descubre-btn .descubre-btn-texto { position: static; }

/* ---- explora.php: el mapa a pantalla completa; arriba a la izquierda, la barra (isla, «Ir a…», radio) y las rutas del punto ---- */
.explora-cuerpo { grid-template-columns: 1fr; }
.explora-izquierda {
  position: absolute; top: 0.6rem; left: 3.2rem; z-index: 1000; width: min(22rem, calc(100% - 4rem));
  display: flex; flex-direction: column; gap: 0.5rem; max-height: calc(100% - 5.5rem); pointer-events: none;
  font-family: var(--font-sans); color: var(--warm-dark);
}
.explora-izquierda > * { pointer-events: auto; }
.explora-barra {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.4rem 0.5rem;
  border-radius: 12px; background: color-mix(in srgb, var(--card-bg, #fff) 94%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.explora-barra select, .explora-ir {
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg, #fff); color: inherit; cursor: pointer;
}
.explora-ir { font-weight: 600; }
.explora-rutas {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-radius: 12px; background: color-mix(in srgb, var(--card-bg, #fff) 94%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.explora-rutas[hidden] { display: none; }
.explora-rutas-cabeza { display: flex; align-items: center; }
.explora-rutas-titulo { flex: 1; padding: 0.5rem 0.75rem; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: inherit; text-align: left; cursor: pointer; }
.explora-rutas-cerrar {
  flex: none; width: 2.25rem; height: 2.25rem; margin-right: 0.2rem; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 1.35rem; line-height: 1; color: inherit; cursor: pointer;
}
.explora-rutas-cerrar:hover, .explora-rutas-cerrar:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
.explora-rutas.plegado .explora-rutas-cuerpo { display: none; }
.explora-rutas-cuerpo { overflow-y: auto; padding: 0 0.6rem 0.5rem; }
.explora-rutas-cuerpo .descubre-mensaje { font-size: 0.85rem; }
.explora-rutas-cuerpo .descubre-rutas { margin: 0; }
/* «Ir a…»: el buscador de lugares en un recuadro a la izquierda del mapa (no lo tapa entero). */
.pagina-explora .buscar-poi-modal { inset: 0.6rem auto 0.6rem 0.6rem; width: min(26rem, calc(100% - 1.2rem)); z-index: 1200; }

/* ---- «Mi mochila» (js/mochila.js) ---- */
.mochila-aviso { position: fixed; left: 50%; bottom: 6rem; transform: translateX(-50%); z-index: 2100; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--warm-dark, #2b2620); color: #fff; font-size: 0.85rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.mochila-aviso[hidden] { display: none; }
.mochila-aviso button { border: 0; border-radius: 999px; padding: 0.2rem 0.7rem; background: var(--acento); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
/* El menú de una etiqueta pulsada en el mapa (js/botones-mapa.js, MenuEtiqueta). */
.etiqueta-menu { position: fixed; z-index: 2000; display: flex; flex-direction: column; min-width: 13rem; max-width: 18rem; padding: 0.35rem;
  background: var(--card-bg, #fff); color: var(--warm-dark); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.22);
  font-family: var(--font-sans); font-size: 0.85rem; }
.etiqueta-menu[hidden] { display: none; }
.etiqueta-menu-cabecera { display: flex; align-items: flex-start; gap: 0.3rem; }
.etiqueta-menu-nombre { flex: 1; margin: 0.2rem 0.5rem 0.35rem; font-weight: 700; line-height: 1.25; }
.etiqueta-menu .etiqueta-menu-cerrar { flex: none; width: 1.8rem; height: 1.8rem; padding: 0; text-align: center; font-size: 1.2rem; line-height: 1; border-radius: 50%; }
.etiqueta-menu button, .etiqueta-menu a { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 0.45rem 0.6rem; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.etiqueta-menu button:hover:not(:disabled), .etiqueta-menu a:hover, .etiqueta-menu button:focus-visible, .etiqueta-menu a:focus-visible { background: color-mix(in srgb, var(--acento) 14%, transparent); }
.etiqueta-menu button:disabled { color: var(--fog); cursor: default; }
.mochila-dialogo { width: min(620px, calc(100vw - 32px)); }
.mochila-dialogo h2 .btn-ayuda-seccion { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 0.4rem; text-decoration: none; font-family: var(--body-font); }
.mochila-ofrecido { margin: 0 0 0.8rem; }
.mochila-lista { margin: 0 0 0.4rem; padding-left: 1.4rem; }
.mochila-lista li { padding: 0.35rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.mochila-lista li > * { vertical-align: middle; }
.mochila-nombre { display: inline-flex; flex-direction: column; min-width: 0; width: calc(100% - 11rem); }
.mochila-nombre small { color: var(--fog); }
.mochila-enlaces { display: inline-flex; gap: 0.3rem; }
.mochila-enlaces a { text-decoration: none; font-size: 1.05rem; }
.mochila-orden { display: inline-flex; gap: 0.15rem; float: right; }
.mochila-orden button { width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg, #fff); color: inherit; cursor: pointer; }
.mochila-orden button:disabled { opacity: 0.35; cursor: default; }
.mochila-nota { margin: 0.3rem 0 0.8rem; font-size: 0.8rem; color: var(--fog); }
.mochila-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mochila-acciones .btn-limpiar-filtros { margin-left: auto; }

/* ---- Ventana de Wikipedia (la del «?» de la isla en portada.php) ---- */
.descubre-wiki { width: min(560px, calc(100vw - 32px)); max-height: 86vh; padding: 20px 22px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg, #fff); color: var(--warm-dark); }
.descubre-wiki::backdrop { background: rgba(0, 0, 0, .45); }
.descubre-wiki h2 { margin: 0 0 10px; font-family: var(--title-font); font-size: 1.4rem; }
.descubre-wiki img { float: right; width: 150px; height: auto; margin: 0 0 8px 12px; border-radius: 8px; }
.descubre-wiki #dialogoWikiTexto { font-size: .93rem; line-height: 1.55; }
.descubre-wiki-pie { clear: both; margin: 12px 0 0; font-size: .78rem; color: var(--fog); }
.descubre-wiki-pie[hidden] { display: none; }
/* Ventana con el botón Cerrar siempre a la vista (.ventana-fija: la ficha de una especie, la nota de Historia): solo se
   desplaza su contenido (.ventana-fija-cuerpo) */
.descubre-wiki.ventana-fija[open] { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
/* la ficha de Saber más: «Ampliar» la pone a toda la pantalla; en el ordenador, además, se estira desde la esquina */
.saber-nota.ventana-grande { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
.saber-nota.ventana-grande .ventana-fija-cuerpo { padding-left: max(22px, calc((100vw - 820px) / 2)); padding-right: max(22px, calc((100vw - 820px) / 2)); }
/* La ficha tiene dos bloques (js/saber-mas.js): .saber-col-texto (el título y lo que se lee: la leyenda, el texto) y
   .saber-col-lado (la imagen, «¿Qué hay de cierto?», los datos, «Para saber más», las fuentes). En una columna van
   seguidos, como si no estuvieran, salvo la imagen, que sube debajo del título */
.saber-col-texto, .saber-col-lado { display: contents; }
.saber-nota .ventana-fija-cuerpo:has(.saber-foto:not([hidden])) { display: flex; flex-direction: column; }
.saber-nota .ventana-fija-cuerpo:has(.saber-foto:not([hidden])) .saber-foto { order: 1; }
.saber-nota .ventana-fija-cuerpo:has(.saber-foto:not([hidden])) :is(.saber-nota-texto, .saber-nota-aparte, .descubre-wiki-pie) { order: 2; }
/* y a toda pantalla en una pantalla grande y apaisada (la pizarra de clase, el ordenador), uno junto al otro: a la
   izquierda el título destacado y la leyenda; a la derecha la imagen y lo demás. Cada lado se desplaza por su cuenta y el
   título se queda arriba. Solo si hay imagen (sin ella, la derecha quedaría casi vacía: sigue en una columna centrada) */
@media (min-width: 1000px) and (orientation: landscape) {
  .saber-nota.ventana-grande .ventana-fija-cuerpo:has(.saber-foto:not([hidden])) {
    display: grid; grid-template-columns: 1fr minmax(320px, 42%); grid-template-rows: minmax(0, 1fr); column-gap: 48px;
    overflow: hidden; padding-left: max(32px, calc((100vw - 1560px) / 2)); padding-right: max(32px, calc((100vw - 1560px) / 2));
  }
  .saber-nota.ventana-grande .ventana-fija-cuerpo:has(.saber-foto:not([hidden])) > .saber-col-lado {
    display: block; grid-column: 2; grid-row: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 8px 0;
  }
  .saber-nota.ventana-grande .ventana-fija-cuerpo:has(.saber-foto:not([hidden])) > .saber-col-texto {
    display: flex; flex-direction: column; grid-column: 1; grid-row: 1; min-height: 0; padding-top: 8px;
  }
  .saber-nota.ventana-grande .saber-col-texto h2 {
    flex: none; margin: 0 0 6px; font-size: 2.4rem; line-height: 1.15; font-weight: 700;
    color: color-mix(in srgb, var(--acento, #8a5a1e) 85%, #1f2421);
  }
  .saber-nota.ventana-grande .saber-col-texto .saber-nota-lugar { flex: none; margin: 0 0 14px; font-size: 1rem; }
  .saber-nota.ventana-grande .ventana-fija-cuerpo:has(.saber-foto:not([hidden])) .saber-nota-texto {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 14px; font-size: 1.08rem;
  }
  .saber-nota.ventana-grande .saber-col-lado .saber-foto img { max-height: 56vh; object-fit: contain; background: none; }
  .saber-nota.ventana-grande .saber-col-lado .saber-nota-aparte { font-size: 1rem; line-height: 1.55; }
  .saber-nota.ventana-grande .saber-col-lado .saber-patrimonio-seccion:first-child { margin-top: 6px; }
}
.saber-nota-aparte { font-size: .93rem; line-height: 1.55; }
.saber-nota-aparte p { margin: 0 0 .6em; }
@media (pointer: fine) {
  .saber-nota.ventana-fija:not(.ventana-grande) { resize: both; min-width: 340px; min-height: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
}
.ventana-fija-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -22px; padding: 0 22px; }
.descubre-wiki.ventana-fija > .dialogo-sin-resultados-cerrar { flex: none; margin-top: 12px; }
/* o abajo una fila: a la izquierda otro botón (Wikipedia, en la ficha de una especie) y a la derecha Cerrar */
.ventana-fija-pie {
  flex: none; display: flex; align-items: center; gap: 10px; margin: 12px -22px 0; padding: 10px 22px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.ventana-fija-pie .dialogo-sin-resultados-cerrar { margin: 0 0 0 auto; }
.ventana-fija-boton {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card-bg, #fff); color: inherit; font-family: inherit; font-size: .85rem; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.ventana-fija-boton[hidden] { display: none; }
.ventana-fija-boton:hover, .ventana-fija-boton:focus-visible { border-color: #c2185b; color: #c2185b; }
/* «Saber más» › Historia (js/saber-mas.js): la nota de un colaborador; la portada es vertical (9:16) */
.descubre-wiki.saber-nota .saber-nota-portada { width: 120px; }
/* El patrimonio (BIC, Wikidata, Wikipedia): la foto grande con su autor, los datos y las secciones */
.saber-foto { margin: 0 0 12px; }
.saber-foto[hidden] { display: none; }
.descubre-wiki .saber-foto img { float: none; display: block; width: 100%; max-height: 46vh; object-fit: cover; margin: 0; border-radius: 10px; background: #eee; }
.saber-foto figcaption { margin-top: 4px; font-size: .74rem; color: var(--fog); }
.saber-patrimonio-entradilla { font-size: 1rem; font-style: italic; font-weight: 600; }
/* una leyenda contada como relato: para leerla de un tirón (o en voz alta, o en la pizarra de clase), letra grande y
   con aire, y la primera letra destacada como en los libros de cuentos */
.saber-relato { margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--acento, #B8934A) 7%, var(--card-bg, #fff)); }
.saber-relato p { font-family: var(--title-font, Georgia, serif); font-size: 1.12rem; line-height: 1.75; margin: 0 0 0.9em; }
.saber-relato p:last-child { margin-bottom: 0; }
.saber-relato p:first-child::first-letter { float: left; font-size: 3.1em; line-height: 0.85; padding: 4px 8px 0 0; font-weight: 700; color: var(--acento, #8a5a1e); }
.saber-patrimonio-datos { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 12px; font-size: .86rem; }
.saber-patrimonio-datos dt { color: var(--fog); }
.saber-patrimonio-datos dd { margin: 0; }
/* los encabezados de la ficha («La leyenda», «¿Qué hay de cierto?», «Para saber más»…): en negrita, del color de la isla
   y con una raya debajo (en gris claro y mayúsculas pequeñas se perdían entre el texto) */
.saber-patrimonio-seccion {
  margin: 18px 0 8px; padding-bottom: 4px; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
  color: color-mix(in srgb, var(--acento, #8a5a1e) 80%, #1f2421);
  border-bottom: 2px solid color-mix(in srgb, var(--acento, #8a5a1e) 30%, transparent);
}
/* Geología: qué roca hay en el punto pulsado (el mapa geológico del IGME), encima de la lista */
.saber-roca { margin: 6px 4px 8px; padding: 8px 10px; border-radius: 8px; font-size: .86rem; line-height: 1.4;
  background: color-mix(in srgb, var(--acento, #B8934A) 12%, transparent); }
.saber-roca small { display: block; margin-top: 2px; font-size: .72rem; color: var(--fog); }
.saber-roca-edad { color: var(--fog); }
/* «Para aprender más» (Geología: EduVolcán), encima de la lista */
.saber-aprender { margin: 4px 6px 6px; font-size: .84rem; }
.saber-aprender small { color: var(--fog); }
.saber-decreto-titulo { margin: 10px 0 4px; font-size: .9rem; }
.saber-decreto-resto summary { margin: 4px 0 8px; color: #c2185b; font-weight: 600; cursor: pointer; }
/* El vídeo: la portada con ▶ y, al pulsarla, el reproductor de Instagram en su sitio */
.saber-video { margin: 4px auto 14px; max-width: 340px; }
.saber-video[hidden] { display: none; }
.saber-video-portada {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 62vh; margin: 0 auto; padding: 0;
  border: 0; border-radius: 14px; overflow: hidden; background: #1b1b1b; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.saber-video-portada[hidden] { display: none; }
.descubre-wiki .saber-video-portada img { float: none; display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.saber-video-play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: rgba(194, 24, 91, .92); color: #fff; font-size: 28px; line-height: 68px; text-align: center; padding-left: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35); transition: transform .15s;
}
.saber-video-portada:hover .saber-video-play, .saber-video-portada:focus-visible .saber-video-play { transform: scale(1.08); }
.saber-video-texto {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px; color: #fff; font-weight: 600; font-size: .95rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}
.saber-video-marco { display: block; width: 100%; border: 0; border-radius: 10px; background: #fff; }
.saber-video-aviso { margin-top: 6px; font-size: .74rem; line-height: 1.4; color: var(--fog); text-align: center; }
.saber-nota-lugar { margin: -4px 0 10px; font-size: .85rem; color: var(--fog); }
.saber-nota-texto { font-size: .93rem; line-height: 1.55; }
.saber-nota-texto p { margin: 0 0 .6em; }
.saber-nota-fuente { font-size: .8rem; color: var(--fog); }
.saber-nota-video { clear: both; margin: 12px 0 0; }
.saber-nota-video[hidden] { display: none; }
.saber-nota-video a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #c2185b; color: #fff; font-weight: 600; text-decoration: none; }
.saber-nota-video a:hover, .saber-nota-video a:focus-visible { background: #a0134b; }
@media (max-width: 480px) { .descubre-wiki.saber-nota .saber-nota-portada { width: 90px; } }

/* ---- flora.php y fauna.php (js/especies.js): como Explora, con el buscador en la barra y la ficha de cada especie ---- */
.pagina-especies .explora-izquierda { width: min(25rem, calc(100% - 4rem)); }
.especies-barra .especies-buscar {
  flex: 1 1 100%; min-width: 0; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card-bg, #fff); color: inherit; font: inherit; font-size: 0.85rem;
}
.especies-barra select { max-width: 11rem; }
.especies-casilla { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; cursor: pointer; }
.especie-fila { align-items: center; }
.especie-fila.activa { background: color-mix(in srgb, #c2185b 10%, transparent); border-radius: 8px; }
.especie-miniatura {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 8px; object-fit: cover; background: color-mix(in srgb, var(--border) 50%, transparent);
}
.especie-sin-foto { display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.especie-fila .descubre-ruta-texto { flex: 1; }
.especie-cientifico { font-style: italic; }
/* «📋 Ficha» en cada fila: un botón con su nombre, que se vea (era un ⓘ pequeño que en una pizarra digital no se
   encontraba) */
.especie-btn-ficha {
  flex: none; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.2rem; padding: 0.3rem 0.75rem;
  border: 1px solid color-mix(in srgb, #c2185b 45%, var(--border)); border-radius: 999px; background: var(--card-bg, #fff);
  color: #a3154d; font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
}
.especie-btn-ficha:hover, .especie-btn-ficha:focus-visible { border-color: #c2185b; background: color-mix(in srgb, #c2185b 8%, var(--card-bg, #fff)); }
@media (max-width: 380px) { .especie-btn-ficha { padding: 0.3rem 0.55rem; } }
.especies-volver-busqueda, .especies-mas {
  display: block; margin: 0.4rem auto; padding: 0.3rem 0.9rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card-bg, #fff); color: inherit; font: inherit; font-size: 0.82rem; cursor: pointer;
}
.especies-volver-busqueda { margin: 0.2rem 0 0.4rem; }
.especies-volver-busqueda[hidden], .especies-mas[hidden] { display: none; }
/* La ficha (.ventana-fija: el botón Cerrar siempre a la vista) */
.especie-foto { margin: 0 0 12px; }
.descubre-wiki .especie-foto img { float: none; display: block; width: 100%; max-height: 52vh; object-fit: contain; margin: 0; background: #000; }
.especie-foto figcaption { margin-top: 4px; font-size: .74rem; color: var(--fog); }
.especie-ficha-cientifico { margin: -6px 0 8px; font-size: .95rem; }
.especie-ficha-dato { margin: 0 0 6px; font-size: .86rem; color: var(--fog); }
.especie-ficha-protegida { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, #c2185b 12%, transparent); font-size: .88rem; }
/* lo que se sabe de ella (js/especies-comun.js): la descripción de la Wikipedia si la tiene y nuestros datos;
   los encabezados, como en las fichas de Saber más: en negrita, de color y con raya debajo */
.especie-ficha-entradilla { margin: 10px 0 4px; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.especie-ficha-resumen { margin: 0 0 4px; font-size: .95rem; line-height: 1.6; }
.especie-ficha-autoria { margin: 14px 0 0; font-size: .72rem; color: var(--fog); }
/* los árboles singulares de la especie, cada uno con «Ver en el mapa» */
.especie-ficha-arboles { margin: 0; padding: 0; list-style: none; }
.especie-ficha-arboles li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: .92rem; }
.especie-ficha-arboles li:last-child { border-bottom: none; }
.especie-ficha-autoria + .especie-ficha-autoria { margin-top: 4px; }
/* conservación y protección (EIDOS): la categoría de la UICN con su código en los colores oficiales de la Lista Roja */
.especie-ficha-conservacion { margin: 0; padding-left: 1.1em; font-size: .92rem; line-height: 1.55; }
.especie-ficha-conservacion li { margin: 0 0 4px; }
.especie-ficha-invasora { list-style: none; margin-left: -1.1em !important; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, #e65100 12%, transparent); font-weight: 600; }
.uicn { display: inline-block; min-width: 2.1em; padding: 0 5px; border-radius: 4px; font-size: .78rem; font-weight: 700; text-align: center; color: #fff; background: #6b6b6b; }
.uicn-EX, .uicn-EW, .uicn-RE { background: #000; }
.uicn-CR { background: #d81e05; }
.uicn-EN { background: #e8590c; }
.uicn-VU { background: #f2c200; color: #222; }
.uicn-NT { background: #a8c41b; color: #222; }
.uicn-LC { background: #4caf50; }
.uicn-DD, .uicn-NE { background: #8a8a8a; }
.especie-ficha h3 {
  margin: 18px 0 8px; padding-bottom: 4px; font-size: 1.02rem; font-weight: 700;
  color: color-mix(in srgb, var(--acento, #8a5a1e) 80%, #1f2421);
  border-bottom: 2px solid color-mix(in srgb, var(--acento, #8a5a1e) 30%, transparent);
}
.especie-ficha-islas { width: 100%; border-collapse: collapse; font-size: .85rem; }
.especie-ficha-islas th, .especie-ficha-islas td { padding: 3px 6px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.especie-ficha-islas th:first-child, .especie-ficha-islas td:first-child { text-align: left; }

@media (min-width: 861px) {
  /* La foto en grande: unas dos veces la ventana normal, hasta casi toda la pantalla (la foto entera, sin recortar). */
  .descubre-wiki.descubre-foto { width: min(1120px, 94vw); max-height: 94vh; }
  .descubre-wiki.descubre-foto img { max-height: calc(94vh - 9rem); }
  /* En el ordenador, toda la letra un 25 % mayor (los tamaños van en rem: la lista pasa de unos 14 px a 17 px). */
  html:has(> body.pagina-descubre) { font-size: 125%; }
  /* La página cabe en la pantalla: la lista y el mapa se reparten lo que dejan la cabecera, los botones y el pie. */
  body.pagina-descubre { height: 100svh; }
  .descubre-cuerpo { grid-template-rows: minmax(0, 1fr); }

  /* La franja bajo el mapa, en cuatro paneles (js/botones-mapa.js, prepararFranja): lo elegido, los botones de la página,
     las características (su fila pasa aquí) y la ayuda. Cada panel se desplaza de lado si no le cabe lo que tiene; entre cada
     dos, un divisor de color que se arrastra para repartir el ancho (el reparto lo pone el script con flex-grow). */
  .descubre-acciones.franja-con-paneles { flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; }
  /* Sin barra de desplazamiento (se mueve con la rueda del ratón, js/botones-mapa.js, o con el dedo). El ancho lo pone el
     script en píxeles, con el padding dentro. */
  .franja-panel {
    box-sizing: border-box; display: flex; align-items: center; min-width: 40px; overflow-x: auto; overflow-y: hidden;
    padding: 0.35rem 0.6rem; scrollbar-width: none;
  }
  .franja-panel::-webkit-scrollbar { display: none; }
  .franja-panel > * { flex: none; }
  /* 1) Lo elegido: en varias líneas si el panel es estrecho (hasta tres; el resto, con «…»). */
  .franja-panel-nombre .descubre-activo { flex: 1 1 auto; min-width: 0; align-items: flex-start; }
  .franja-panel-nombre .descubre-activo span:last-child {
    white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.25;
  }
  .franja-panel-nombre .descubre-activo-punto { margin-top: 0.2rem; }
  /* 2) y 4) Los botones: el icono y, debajo, su nombre. */
  .franja-panel-botones .descubre-botones { flex-wrap: nowrap; gap: 0.3rem; }
  .franja-panel .descubre-btn {
    position: relative; flex-direction: column; justify-content: center; gap: 0.12rem; min-width: 3.4rem;
    padding: 0.3rem 0.45rem; border-radius: 10px; font-size: 0.68rem; line-height: 1.1;
  }
  .franja-panel .descubre-btn > span[aria-hidden="true"] { font-size: 1.15rem; line-height: 1.1; }
  .franja-panel .descubre-btn-cuenta { position: absolute; top: -2px; right: -2px; min-width: 1rem; padding: 0 0.2rem; font-size: 0.6rem; line-height: 1rem; }
  .franja-panel .descubre-botones-separador { flex: 0 0 0.4rem; }
  /* 3) Las características, con su nombre completo debajo (en dos líneas si no cabe en una). */
  .franja-panel-caracteristicas > .capas-categorias { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 0.25rem; padding: 0; min-width: 0; }
  /* El nombre: una línea, o dos si tiene más de una palabra (el corte lo pone js/botones-mapa.js con un <br>). */
  .franja-panel-caracteristicas .categoria-btn { width: auto; min-width: 3.4rem; padding: 0 0.15rem; }
  .franja-panel-caracteristicas .categoria-nombre { display: block; font-size: 0.62rem; white-space: nowrap; }
  /* Su «?» (la ayuda de los botones del mapa) no va en la franja: está en la ayuda de la página. */
  .franja-panel-caracteristicas > .capas-categorias > .btn-ayuda-seccion { display: none; }
  .franja-panel-caracteristicas .categoria-icono { width: 34px; height: 34px; }
  .franja-panel-caracteristicas .categoria-icono svg { width: 17px; height: 17px; }
  /* 4) La ayuda de la página: como un botón más (no el círculo pequeño del título). */
  .franja-panel-ayuda { justify-content: center; }
  .franja-panel-ayuda .franja-ayuda.btn-ayuda-seccion {
    width: auto; height: auto; border-radius: 10px; background: var(--cream, #fff); color: inherit; border: 1px solid var(--border); font-weight: 700;
  }
  .franja-panel-ayuda .franja-ayuda.btn-ayuda-seccion:hover, .franja-panel-ayuda .franja-ayuda.btn-ayuda-seccion:focus-visible { border-color: var(--acento); background: var(--cream, #fff); color: inherit; }
  /* Los divisores: una barra del color de acento con su asa, que se ve bien sobre el fondo de la franja. */
  .franja-divisor {
    flex: 0 0 8px; position: relative; cursor: col-resize; touch-action: none;
    background: color-mix(in srgb, var(--acento) 75%, #000 0%); opacity: 0.85;
  }
  .franja-divisor::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 1.4rem; transform: translate(-50%, -50%);
    border-left: 2px dotted #fff; opacity: 0.9;
  }
  .franja-divisor:hover, .franja-divisor:focus-visible, .franja-divisor.arrastrando { opacity: 1; background: var(--acento); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 35%, transparent); }
  /* Los menús de las características se abren fijos sobre su botón (el panel se desplaza: js/botones-mapa.js, colocarMenu). */
}

@media (max-width: 860px) {
  /* Los paneles de la franja (los del ordenador) no cuentan para el diseño: todo queda como siempre en el móvil. */
  .franja-panel { display: contents; }
  .franja-divisor, .franja-panel-ayuda { display: none; }
  .descubre-cuerpo { --velo-fondo: color-mix(in srgb, var(--cream, #f6f1e7) 84%, transparent); }   /* más velo: a pleno sol */
  .descubre-panel { border-right: none; border-bottom: 1px solid var(--border); max-height: 42svh; padding: 0.8rem 1rem; }
  .descubre-mapa .mapa-isla { height: 50svh; flex: none; }
  /* Bajo el mapa, todos los botones de características (los del ordenador) y su «?», solo con su icono (el nombre queda como
     título); si no caben en una línea, en dos. */
  .descubre-mapa { min-width: 0; }
  .descubre-mapa .capas-categorias { min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem; padding: 0.5rem 0.5rem; }
  .descubre-mapa .capas-categorias .categoria-nombre { display: none; }
  .descubre-mapa .capas-categorias .categoria-btn { width: auto; }
  /* Los botones (Volver, Rincón, Rutas…) entre la lista y el mapa: el cuerpo deja de ser una caja (display: contents) y sus
     partes y la barra se ordenan dentro del body (columna flex): cabecera, lista, botones, mapa y pie. */
  .descubre-cuerpo { display: contents; }
  .descubre-panel { order: 1; }
  .descubre-acciones { order: 2; padding: 0.4rem 0.6rem; gap: 0.35rem; }
  .descubre-mapa { order: 3; }
  body.pagina-descubre > .pie { order: 4; }
  .descubre-activo { flex: 1 1 100%; font-size: 0.82rem; }
  /* Los botones, solo con su icono; si no caben en una línea (con la 🎒 son 10), en dos. */
  .descubre-botones { gap: 0.35rem; justify-content: center; flex-wrap: wrap; min-width: 0; padding: 4px 0; }
  .descubre-botones > * { flex: none; }
  /* Explora en el móvil: más mapa (no hay lista encima) y los recuadros de arriba, más estrechos. */
  .pagina-explora .descubre-mapa .mapa-isla { height: 68svh; }
  .explora-izquierda { left: 0.5rem; width: calc(100% - 1rem); max-height: 55%; }
  /* Historia, Geología, Flora y Fauna: la barra de filtros ocupa varias líneas y a la lista solo le cabía una fila (el resto,
     escondido: había que deslizar dentro de ella sin saberlo). Más alto (crece solo con lo que tiene: una lista corta no
     tapa más mapa); el panel se pliega pulsando su título para ver el mapa. */
  .pagina-especies .explora-izquierda { max-height: 85%; }
  .descubre-botones-separador { display: none; }
  /* Solo el icono: el texto queda para lectores de pantalla (y como título del botón). */
  .descubre-btn { padding: 0; width: 2.25rem; height: 2.25rem; justify-content: center; font-size: 1.05rem; }   /* los 9 caben en 360 px */
  .descubre-btn-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* el número, pequeño en la esquina del icono */
  .descubre-btn { position: relative; }
  .descubre-btn-cuenta { position: absolute; top: -4px; right: -4px; min-width: 1rem; padding: 0 0.2rem; font-size: 0.62rem; line-height: 1rem; }
}

/* Los tipos de los resultados por nombre (js/descubre.js, mostrarNombres): «Todos (14) · Molino (9) · Lugar rural (5)» */
.descubre-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.descubre-tipo { font: inherit; font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border, #d8d2c4);
                 background: var(--card-bg, #fff); color: inherit; cursor: pointer; }
.descubre-tipo.activo { background: var(--acento, #b8501f); border-color: var(--acento, #b8501f); color: #fff; }

/* «¿Qué planta es?» (js/identificar-planta.js, botón Identificar de Flora): las fotos con qué se ve en cada una y las
   candidatas de Pl@ntNet; letra grande y oscura, como el resto de fichas */
.identificar-planta h2 { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--acento, #b8501f); }
.identificar-ayuda { font-size: 1.05rem; line-height: 1.5; color: var(--warm-dark, #2b2620); }
.identificar-boton-foto { display: inline-flex; align-items: center; justify-content: center; margin: .4rem 0 .8rem; padding: .8rem 1.4rem;
                          border-radius: 999px; background: var(--acento, #b8501f); color: #fff; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.identificar-boton-foto[hidden] { display: none; }
.identificar-boton-foto:focus-within { outline: 3px solid color-mix(in srgb, var(--acento, #b8501f) 45%, transparent); outline-offset: 2px; }
.identificar-fotos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 .8rem; padding: 0; list-style: none; }
.identificar-foto { position: relative; display: flex; flex-direction: column; gap: 4px; width: 118px; }
.identificar-foto img { width: 118px; height: 118px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border, #d8d2c4); }
.identificar-foto select { font: inherit; font-size: 1rem; padding: 4px; border-radius: 8px; border: 1px solid var(--border, #d8d2c4); background: var(--card-bg, #fff); color: inherit; }
.identificar-foto button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%;
                           background: rgba(0, 0, 0, .65); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.identificar-mensaje { font-size: 1.1rem; font-weight: 600; color: var(--warm-dark, #2b2620); }
.identificar-resultados { margin: 0; padding: 0; list-style: none; }
.identificar-fila { cursor: pointer; font-size: 1.05rem; }
.identificar-fila.sin-ficha { cursor: default; opacity: .85; }
.identificar-puntos { display: inline-block; margin-right: .4rem; padding: 1px 8px; border-radius: 999px; font-weight: 700;
                      background: color-mix(in srgb, var(--acento, #b8501f) 15%, transparent); color: var(--warm-dark, #2b2620); }
.identificar-fuente { margin-top: .8rem; font-size: .9rem; color: var(--warm-dark, #2b2620); }
.identificar-enviar:disabled { opacity: .5; cursor: default; }