/* =====================================================================
   AveDex · segunda hoja de estilos (antes, el segundo <style> de
   index.html): Explorar, álbum, importar, cámara y clústeres del mapa.
   Se carga DESPUÉS de leaflet.css, como iba el <style>, para ganarle a
   Leaflet en los empates de la cascada. Ver también js/app.css.
   ===================================================================== */
/* ==== Explorar: tarjeta resumen + panel detalle (estilo park4night) ==== */
.explo-card{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:1200;width:min(94vw,560px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);display:flex;overflow:hidden;cursor:pointer;animation:exploCardUp var(--dur-2) var(--ease);}
@keyframes exploCardUp{from{transform:translate(-50%,130%);opacity:.4}to{transform:translate(-50%,0);opacity:1}}
.explo-card-foto{flex:0 0 104px;min-height:104px;background-size:cover;background-position:center;background-color:var(--panel2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-6);}
.explo-card-body{line-height:var(--lh);flex:1;padding:12px 14px;min-width:0;}
.explo-card-top{display:flex;align-items:flex-start;gap:8px;}
.explo-card-top h2{font-size:var(--fs-3);margin:0;font-weight:600;line-height:1.25;color:var(--text);font-family:var(--display);}
.explo-card-x{margin-left:auto;border:none;background:transparent;cursor:pointer;font-size:var(--fs-5);line-height:1;color:var(--muted);padding:0 2px;}
.explo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.explo-chip{font-size:var(--fs-1);font-weight:600;padding:2px 8px;border-radius:var(--r-full);letter-spacing:.02em;background:transparent;}
.explo-chip.cat{color:var(--teal);border:1px solid var(--teal);}
.explo-chip.sub{line-height:var(--lh);color:var(--gold);border:1px solid var(--gold);}
.explo-chip.pto{color:var(--muted);border:1px dashed var(--muted);}
.explo-card-desc{margin:7px 0 6px;font-size:var(--fs-2);color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.explo-card-mas{font-size:var(--fs-1);font-weight:600;color:var(--teal);}

.explo-panel{position:fixed;inset:0;z-index:1300;display:none;}
.explo-panel.open{display:block;}
.explo-backdrop{position:absolute;inset:0;background:rgba(6,11,9,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.explo-detalle-sheet{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;background:var(--panel);border-radius:var(--r-xl) var(--r-xl) 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;animation:exploSheetUp var(--dur-2) var(--ease);}
@keyframes exploSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.explo-handle{width:44px;height:5px;border-radius:99px;background:var(--line);margin:10px auto 0;flex:none;}
.explo-cerrar{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:var(--fs-5);line-height:1;cursor:pointer;}
.explo-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* ===== Ficha de punto (rediseño visual) ===== */
.ficha-hero{position:relative;height:225px;border-radius:var(--r-lg);overflow:hidden;margin:0 16px;background:linear-gradient(160deg,#3d6f84,#8fb3a8 55%,#c9d6c4);flex:none;cursor:pointer;}
.ficha-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;}
.ficha-hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,34,.05) 0%,rgba(10,25,34,.78) 100%);}
.ficha-hero-txt{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;z-index:2;}
.ficha-hero-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:99px;background:rgba(16,32,40,.55);border:1px solid rgba(255,255,255,.25);font-family:var(--mono);font-weight:600;font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:#fff;}
.ficha-hero-titulo{margin:9px 0 3px;font-family:var(--display);font-weight:600;font-size:var(--fs-6);line-height:1.06;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);}
.ficha-hero-lugar{font-family:var(--mono);font-size:var(--fs-1);opacity:.9;color:#fff;}
.ficha-hero-credito{position:absolute;left:16px;top:10px;right:52px;font-size:var(--fs-1);color:rgba(255,255,255,.85);z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.ficha-hero-credito a{color:#fff;text-decoration:underline;}
.ficha-cuerpo{padding:16px 16px 30px;}
.ficha-intro{margin:0 0 16px;color:var(--muted);font-size:var(--fs-2);line-height:1.55;}
.ficha-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 18px;}
.ficha-qcard{min-height:76px;padding:12px;border:1px solid var(--line);background:var(--panel2);border-radius:var(--r-lg);display:flex;gap:10px;align-items:flex-start;}
.ficha-qicon{width:32px;height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);font-size:var(--fs-3);}
.ficha-qmain{min-width:0;flex:1;}
.ficha-qlabel{color:var(--muted);font-family:var(--mono);font-weight:600;font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.08em;}
.ficha-qvalue{margin-top:3px;font-size:var(--fs-2);line-height:1.3;font-weight:600;color:var(--text);overflow-wrap:anywhere;}
.ficha-badge{display:inline-block;margin-top:5px;padding:3px 7px;border-radius:99px;background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal);font-family:var(--mono);font-weight:600;font-size:var(--fs-1);}
.ficha-seccion{margin-top:22px;}
.ficha-seccion-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
.ficha-seccion-titulo{line-height:var(--lh-tight);margin:0;font-family:var(--display);font-weight:600;font-size:var(--fs-5);color:var(--text);}
.ficha-seccion-sub{line-height:var(--lh);color:var(--muted);font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;}
.ficha-practico{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);}
.ficha-prow{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;border-bottom:1px solid var(--line);}
.ficha-prow:last-child{border-bottom:0;}
.ficha-picon{width:32px;height:32px;flex:0 0 32px;border-radius:var(--r-md);background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-3);}
.ficha-pmain{flex:1;min-width:0;}
.ficha-pname{color:var(--muted);font-family:var(--mono);font-weight:600;font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.08em;}
.ficha-ptext{margin-top:3px;font-size:var(--fs-2);line-height:1.45;color:var(--text);}
.ficha-status{padding:4px 8px;border-radius:99px;font-family:var(--mono);font-weight:600;font-size:var(--fs-1);background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal);white-space:nowrap;flex:0 0 auto;}
.ficha-status.warn{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);}
.ficha-consejo{margin-top:10px;padding:11px 13px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--panel2);color:var(--muted);font-size:var(--fs-1);line-height:1.5;}
.ficha-esp{display:flex;gap:12px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--sh-2);cursor:pointer;transition:transform var(--dur-0) var(--ease),box-shadow var(--dur-0) var(--ease);}
.ficha-esp:hover{transform:translateY(-1px);box-shadow:var(--sh-3);}
/* ==== UBICACIÓN DE CADA PUNTO (prefijo pto-, 25/09/2026) ====
   Aviso en la ficha cuando el pin no es un sitio exacto: zona amplia,
   aproximado a propósito (nocturnas, colonias, muladares) o hide privado. */
.pto-aviso{margin:0 0 16px;padding:12px 13px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--panel2);}
.pto-aviso-tit{font-family:var(--display);font-weight:600;font-size:var(--fs-3);line-height:1.25;color:var(--text);margin-bottom:4px;}
.pto-aviso p{margin:0;font-size:var(--fs-2);line-height:1.5;color:var(--muted);}
.pto-aviso p.pto-aviso-lema{margin-top:6px;color:var(--teal-on-panel);font-weight:600;}
.pto-aviso.pto-sensible{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));background:color-mix(in srgb,var(--teal) 7%,var(--panel2));}
.pto-aviso.pto-privada{border-color:color-mix(in srgb,var(--gold) 50%,var(--line));}
/* ==== AVES DE CADA SITIO (prefijo avs-, 25/09/2026) ====
   Lista de especies y actividad de la comunidad en la ficha de un punto de
   Explorar (ver AVES DE CADA SITIO en js/app.js). Rejilla de dos columnas y
   no filas de .ficha-esp: con 12 especies + sorpresas, las filas grandes
   alargaban la ficha más de un metro de scroll. */
.avs-lead{margin:-2px 0 12px;color:var(--muted);font-size:var(--fs-2);line-height:1.5;}
.avs-lead b{color:var(--text);font-weight:600;}
.avs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.avs-sp{appearance:none;-webkit-appearance:none;font:inherit;text-align:left;color:inherit;display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);cursor:pointer;touch-action:manipulation;transition:transform var(--dur-0) var(--ease);}
.avs-sp:active{transform:scale(.98);}
.avs-sp:focus-visible,.avs-com-fila:focus-visible,.avs-com-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.avs-sp-foto{width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-md);overflow:hidden;background:var(--panel2);display:flex;align-items:center;justify-content:center;}
.avs-sp-foto .ref{border-radius:var(--r-md);overflow:hidden;}
.avs-sp-foto .ref img{width:100%;height:100%;object-fit:cover;}
.avs-sp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.avs-sp-nombre{font-family:var(--display);font-weight:600;font-size:var(--fs-2);line-height:1.2;color:var(--text);overflow-wrap:anywhere;}
.avs-sp-meses{font-family:var(--mono);font-size:var(--fs-0);line-height:1.3;color:var(--muted);}
.avs-sp-meses.ahora{color:var(--ok);font-weight:600;}
.avs-sp-meses i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor;vertical-align:1px;}
.avs-sorpresas{margin-top:14px;padding:12px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:var(--r-lg);background:color-mix(in srgb,var(--gold) 8%,var(--panel));}
.avs-sorpresas-head{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:var(--fs-3);color:var(--text);}
.avs-estrella{color:var(--gold);}
.avs-sorpresas-txt{margin:3px 0 10px;color:var(--muted);font-size:var(--fs-1);line-height:1.45;}
.avs-sp.sorpresa{border-color:color-mix(in srgb,var(--gold) 40%,var(--line));}
.avs-fuente{margin:10px 0 0;color:var(--muted);font-size:var(--fs-0);line-height:1.5;}
.avs-com-resumen{margin:-2px 0 10px;color:var(--muted);font-size:var(--fs-2);}
.avs-com-resumen b{color:var(--text);font-weight:600;}
.avs-com-lista{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);}
.avs-com-fila{appearance:none;-webkit-appearance:none;font:inherit;text-align:left;color:inherit;width:100%;display:flex;align-items:center;gap:11px;padding:9px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;touch-action:manipulation;}
.avs-com-fila[hidden]{display:none;}
.avs-com-fila:last-child{border-bottom:0;}
.avs-com-fila .avs-sp-foto{width:40px;height:40px;flex-basis:40px;}
.avs-com-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.avs-com-nombre{font-size:var(--fs-2);font-weight:600;line-height:1.25;color:var(--text);}
.avs-com-meta{font-family:var(--mono);font-size:var(--fs-0);color:var(--muted);}
/* El color de cada rareza es el suyo (RAREZA_INFO), mezclado con --text
   para que el gris de "Común" o el dorado de "Legendario" se lean también
   sobre el panel blanco del tema claro. */
.avs-rareza{flex:0 0 auto;padding:3px 8px;border-radius:var(--r-full);font-family:var(--mono);font-weight:600;font-size:var(--fs-0);letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb,var(--avs-c) 72%,var(--text));background:color-mix(in srgb,var(--avs-c) 16%,transparent);}
.avs-com-btn{appearance:none;-webkit-appearance:none;font:inherit;margin-top:10px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel2);color:var(--text);font-size:var(--fs-2);font-weight:600;cursor:pointer;touch-action:manipulation;}
.avs-com-aviso{padding:13px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--panel2);}
.avs-com-aviso p{margin:0;color:var(--muted);font-size:var(--fs-2);line-height:1.5;}
.ficha-acciones{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px;}
.ficha-acciones .popbtn{margin:0;width:auto;height:46px;border-radius:var(--r-md);font-family:var(--mono);font-weight:600;font-size:var(--fs-2);background:var(--teal);color:var(--on-teal);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;box-sizing:border-box;}
.ficha-acciones .popbtn.sec{background:var(--panel);border:1px solid var(--line);color:var(--text);}
.ficha-acciones .pop-web{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-weight:600;font-size:var(--fs-2);text-decoration:none;box-sizing:border-box;}
.ficha-cuerpo .pd{font-family:var(--mono);}
.ficha-hero-add{position:absolute;bottom:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(16,32,40,.55);color:#fff;font-size:var(--fs-6);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.ficha-hero-add:active{transform:scale(.92);}
.ficha-hero-add.centro{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:56px;height:56px;font-size:var(--fs-7);border-width:2px;background:rgba(16,32,40,.62);}
.ficha-hero-add.centro:active{transform:translate(-50%,-50%) scale(.92);}
.galeria-overlay{position:fixed;inset:0;z-index:var(--z-visor);background:rgba(3,7,5,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;animation:ovBackdropIn var(--dur-1) var(--ease);}
.galeria-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 6px;flex:0 0 auto;}
.galeria-titulo{font-family:var(--display);font-weight:600;font-size:var(--fs-4);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;min-width:0;}
.galeria-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:var(--fs-6);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.galeria-viewport{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.galeria-viewport::-webkit-scrollbar{display:none;}
.galeria-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:6px 20px 4px;box-sizing:border-box;position:relative;}
.galeria-slide-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;}
.galeria-slide-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-lg);box-shadow:var(--sh-5);background:#000;}
.galeria-slide-credito{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);text-align:center;line-height:1.4;}
.galeria-slide-del{margin-top:2px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);padding:4px 10px;font-size:var(--fs-1);cursor:pointer;font-family:var(--mono);}
.galeria-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 16px 2px;flex:0 0 auto;}
.galeria-navbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:var(--fs-6);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.galeria-navbtn:disabled{opacity:.3;cursor:default;}
.galeria-counter{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);min-width:48px;text-align:center;}
.galeria-add{margin:12px 18px 20px;flex:0 0 auto;background:var(--teal);color:var(--on-teal);border:none;border-radius:var(--r-lg);padding:13px;font-family:var(--mono);font-weight:600;font-size:var(--fs-2);cursor:pointer;}
@media (max-width:560px){
  .ficha-hero{height:210px;}
  .ficha-hero-titulo{font-size:var(--fs-6);}
}
/* ===== Votación + comentarios de sitios (Explorar, park4night) ===== */
.explo-card-stats{display:flex;align-items:center;gap:14px;margin:7px 0 5px;font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);}
.explo-stat{display:inline-flex;align-items:center;gap:4px;}
.explo-stat svg{width:13px;height:13px;color:var(--muted);}
.explo-stat.star svg{color:var(--gold);}
.explo-stat.com svg{color:var(--teal);}
.explo-stat b{color:var(--text);font-weight:700;}
.explo-stat-dim{font-size:var(--fs-1);color:var(--muted);}
.sitio-opiniones{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
/* Tarjeta "Valoración de la comunidad" */
.sitio-rating{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;}
.sitio-rating-label{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.sitio-rating-row{display:flex;align-items:center;gap:12px;}
.sitio-rating-avg{font-family:var(--display);font-weight:700;font-size:var(--fs-7);line-height:1;color:var(--text);flex:0 0 auto;}
.sitio-rating-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sitio-rating-stars{display:flex;gap:2px;}
.sitio-rating-count{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);}
.sitio-rating-divider{height:1px;background:var(--line);margin:13px 0;}
.sitio-rating-my{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.sitio-rating-my-label{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);flex:0 0 auto;}
/* Estrella genérica: base (gris) + relleno dorado parcial */
.sstar{position:relative;display:inline-block;line-height:0;flex:0 0 auto;}
.sstar .sstar-base,.sitio-star .sstar-base{position:absolute;inset:0;color:var(--muted);display:block;}
.sstar .sstar-fill,.sitio-star .sstar-fill{position:absolute;top:0;left:0;bottom:0;width:0;overflow:hidden;color:#f0c419;display:block;}
.sstar .sstar-base svg,.sstar .sstar-fill svg,.sitio-star .sstar-base svg,.sitio-star .sstar-fill svg{width:100%;height:100%;display:block;}
.sitio-rating-stars .sstar{width:15px;height:15px;font-size:var(--fs-3);}
.sitio-star-rate{display:flex;align-items:center;gap:2px;flex:0 0 auto;}
.sitio-star{position:relative;width:22px;height:22px;font-size:var(--fs-6);padding:0;margin:0;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-0) var(--ease);}
.sitio-star:active{transform:scale(1.15);}
/* Cabecera comentarios */
.sitio-comments-head{display:flex;align-items:center;gap:8px;margin:20px 0 8px;}
.sitio-comments-title{line-height:var(--lh-tight);font-family:var(--display);font-weight:600;font-size:var(--fs-4);color:var(--text);}
.sitio-comments-count{font-family:var(--mono);font-size:var(--fs-1);color:var(--teal);background:color-mix(in srgb, var(--teal) 14%, transparent);border-radius:99px;padding:2px 9px;}
/* Comentario */
.sitio-comentario{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line);}
.sitio-comentario:first-child{border-top:none;}
.sitio-comentario-avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:var(--fs-3);color:#fff;overflow:hidden;background:var(--panel2);border:none;padding:0;}
.sitio-comentario-avatar.pub{background:linear-gradient(135deg,var(--teal),var(--teal-deep));cursor:pointer;}
.sitio-comentario-avatar.anon{background:var(--line);color:var(--muted);cursor:default;}
.sitio-comentario-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.sitio-comentario-avatar svg{width:16px;height:16px;}
.sitio-comentario-body{line-height:var(--lh);flex:1;min-width:0;}
.sitio-comentario-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.sitio-comentario-nombre{background:none;border:none;padding:0;font-weight:700;font-size:var(--fs-2);color:var(--text);text-align:left;cursor:pointer;font-family:inherit;}
.sitio-comentario-nombre.pub:hover{color:var(--teal);text-decoration:underline;}
.sitio-comentario-nombre.anon{cursor:default;color:var(--muted);font-weight:600;}
.sitio-comentario-level{font-family:var(--mono);font-size:var(--fs-1);color:var(--gold);background:color-mix(in srgb, var(--gold) 16%, transparent);border-radius:var(--r-sm);padding:1px 5px;white-space:normal;max-width:100%;}
.sitio-comentario-fecha{margin-left:auto;font-size:var(--fs-1);color:var(--muted);flex:0 0 auto;font-family:inherit;}
.sitio-comentario-fecha.pendiente{color:var(--teal);display:inline-flex;align-items:center;gap:4px;}
.sitio-comentario-fecha.pendiente .dot{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:sitioPulse 1s ease-in-out infinite;}
.sitio-comentario-fecha.fallido{color:#c0392b;}
.sitio-comentario-texto{font-size:var(--fs-2);line-height:1.45;margin-top:3px;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.sitio-comentario-actions{margin-top:5px;display:flex;gap:12px;}
.sitio-comentario-borrar{background:none;border:none;padding:0;font-size:var(--fs-1);color:var(--muted);cursor:pointer;font-family:inherit;}
.sitio-comentario-borrar:hover{color:#c0392b;}
.sitio-comentario-retry{background:none;border:none;padding:0;font-size:var(--fs-1);color:var(--teal);cursor:pointer;font-family:inherit;}
.sitio-comentario-retry:hover{text-decoration:underline;}
@keyframes sitioPulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.sitio-comentario.nueva{animation:sitioSlideIn var(--dur-2) var(--ease);}
@keyframes sitioSlideIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
/* Compositor */
.sitio-comentario-form{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);}
.sitio-comentario-form textarea{width:100%;min-height:56px;resize:vertical;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;font-family:inherit;font-size:var(--fs-2);color:var(--text);background:var(--panel2);box-sizing:border-box;}
.sitio-comentario-form textarea:focus{border-color:var(--teal);}
.sitio-comentario-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:10px;}
.sitio-comentario-char{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);}
.sitio-comentario-btn{background:var(--teal);color:var(--on-teal);border:none;border-radius:var(--r-md);padding:9px 16px;font-weight:700;font-size:var(--fs-2);cursor:pointer;font-family:inherit;flex:0 0 auto;}
.sitio-comentario-btn:hover{background:var(--teal-deep);}
.sitio-comentario-btn:active{transform:scale(.97);}
/* ===== Ficha de punto por pestañas (27/09/2026) =====
   Ver FICHA DE PUNTO POR PESTAÑAS en app.js. La hoja pasa a tener alto fijo:
   la cabecera (foto, que se pliega), las pestañas y los botones de abajo no
   se mueven, y cada pestaña baja por su cuenta dentro del carril. */
.explo-detalle-sheet.fp-hoja{height:92dvh;}
.explo-scroll.fp-modo{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.fp{flex:1;min-height:0;display:flex;flex-direction:column;}
.fp-cab{flex:none;display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);}
.fp-cab-in{min-height:0;overflow:hidden;}
.fp-cab-in .ficha-hero{margin-top:8px;}
.fp.compacto .fp-cab{grid-template-rows:0fr;opacity:0;}
.ficha-hero-add-txt{display:none;}
.fp-cab-in .ficha-hero-add.centro{top:10px;left:10px;right:auto;bottom:auto;transform:none;width:auto;height:44px;padding:0 14px 0 12px;gap:7px;border-width:1px;border-radius:var(--r-full);font-size:var(--fs-5);}
.fp-cab-in .ficha-hero-add.centro:active{transform:scale(.96);}
.fp-cab-in .ficha-hero-add.centro .ficha-hero-add-txt{display:inline;font-family:var(--mono);font-weight:600;font-size:var(--fs-1);}
.fp-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:4px 16px 0;}
.fp-op{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:0 2px;border:0;background:none;color:var(--text);font-family:var(--mono);font-size:var(--fs-1);cursor:pointer;}
.fp-op-estrella{display:inline-flex;color:#f0c419;font-size:var(--fs-3);}
.fp-op-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-op > svg{width:14px;height:14px;flex:none;color:var(--muted);}
.fp-pto{flex:none;}
.fp-mini{flex:none;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);}
.fp-mini-in{min-height:0;overflow:hidden;}
.fp-mini-cont{padding:8px 58px 2px 18px;}
.fp.compacto .fp-mini{grid-template-rows:1fr;opacity:1;}
.fp-mini-nombre{font-family:var(--display);font-weight:600;font-size:var(--fs-4);line-height:var(--lh-tight);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-mini-sub{font-family:var(--mono);font-size:var(--fs-0);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-tabs-wrap{flex:none;padding:8px 16px;}
.fp-tabs .sd-tab{min-height:44px;}
.fp-vista{flex:1;min-height:0;overflow:hidden;}
.fp-carril{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.fp-carril::-webkit-scrollbar{display:none;}
.fp-panel{flex:0 0 100%;min-width:0;height:100%;box-sizing:border-box;padding:4px 16px 28px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-align:start;scroll-snap-stop:always;-webkit-overflow-scrolling:touch;}
.fp-acciones{flex:none;margin:0;padding:10px 16px calc(12px + var(--sab));border-top:1px solid var(--line);background:var(--panel);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;}
/* Resumen */
.fp-desc{margin:0 0 14px;}
.fp-desc-txt{margin:0;font-size:13.5px;line-height:1.55;color:var(--text);}
.fp-desc-txt.corto{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.fp-leer{min-height:44px;padding:0;border:0;background:none;color:var(--teal);font-family:var(--mono);font-weight:600;font-size:var(--fs-1);cursor:pointer;}
.ficha-qcard.ancha{grid-column:span 2;}
.ficha-qsub{margin-top:3px;font-size:var(--fs-1);line-height:1.4;color:var(--muted);}
/* Cuándo ir */
.fp-mes{padding:14px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-lg);}
.fp-mes-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.fp-mes-btn{width:44px;height:44px;flex:none;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.fp-mes-btn svg{width:18px;height:18px;}
.fp-mes-btn:active{transform:scale(.94);}
.fp-mes-tit{min-width:0;display:flex;flex-direction:column;align-items:center;}
.fp-mes-eti{font-family:var(--mono);font-weight:600;font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.fp-mes-nombre{font-family:var(--display);font-weight:600;font-size:var(--fs-5);line-height:1.2;color:var(--text);}
.fp-mes-frase{margin:12px 0 0;text-align:center;font-size:var(--fs-3);line-height:1.4;color:var(--text);}
.fp-mes-frase b{font-weight:700;}
.fp-mes-frase .fp-mes-n{font-family:var(--display);font-size:var(--fs-5);color:var(--teal);}
.fp-mes-desglose{margin:4px 0 0;text-align:center;font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);}
.fp-graf{margin:14px 0 0;}
.fp-graf-barras{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:112px;}
.fp-barra{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;font-family:var(--mono);font-size:var(--fs-0);line-height:1;color:var(--muted);}
.fp-barra i{display:block;width:100%;max-width:20px;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--teal) 34%,var(--panel2));transition:height var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease);}
.fp-barra.cero i{background:var(--line);}
.fp-barra.on{color:var(--teal);font-weight:700;}
.fp-barra.on i{background:var(--teal);}
.fp-graf figcaption{margin-top:8px;text-align:center;font-size:var(--fs-1);color:var(--muted);}
.fp-mes-ver{margin-top:12px;width:100%;min-height:44px;border-radius:var(--r-md);border:1px solid var(--teal);background:transparent;color:var(--teal);font-family:var(--mono);font-weight:600;font-size:var(--fs-1);cursor:pointer;}
.fp-mes-ver:disabled{opacity:.4;cursor:default;}
.fp-mes-hueco:empty + .fp-plan{margin-top:4px;}
.fp-vacio{margin:4px 0 0;padding:13px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--panel2);color:var(--muted);font-size:var(--fs-2);line-height:1.5;}
/* Aves */
.fp-panel .avs-sitio > .ficha-seccion:first-child,
.fp-panel .avs-sitio:empty + .avs-com > .ficha-seccion{margin-top:4px;}
.avs-filtro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;margin:0 0 12px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);}
.avs-filtro button{min-height:44px;padding:0 6px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-family:var(--mono);font-weight:700;font-size:var(--fs-1);cursor:pointer;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);}
.avs-filtro button.on{background:var(--teal);color:var(--on-teal);}
.avs-sp[hidden],.avs-sorpresas[hidden]{display:none;}
.avs-filtro-vacio{margin:0;padding:13px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--panel2);color:var(--muted);font-size:var(--fs-2);line-height:1.5;}
/* Opiniones */
.fp-panel .sitio-opiniones{margin-top:0;border-top:0;padding-top:0;}
@media (min-width:720px){
  .explo-detalle-sheet.fp-hoja{height:86dvh;}
}
@media (min-width:720px){
  .explo-detalle-sheet{line-height:var(--lh);left:50%;transform:translateX(-50%);width:640px;border-radius:var(--r-xl);bottom:20px;max-height:86dvh;}
  @keyframes exploSheetUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
}
/* ===================================================================
   MI ÁLBUM: visor con zoom. La pantalla del álbum (portada, pestañas,
   rejillas) está al final del fichero: «MI ÁLBUM · rediseño 24/09/2026».
   =================================================================== */
/* Botón "volver" genérico */
.volver{display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--teal); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; padding:10px 2px 2px;}
.volver svg{width:14px; height:14px;}
/* Visor del álbum (zoom, información, edición y borrado) */
.visor{position:fixed; inset:0; z-index:var(--z-visor); background:rgba(9,15,13,.97); display:none; flex-direction:column; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); overscroll-behavior:contain;}
.visor.on{display:flex;}
.visor-top{flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:calc(var(--sat) + 14px) 14px 10px; z-index:3;}
.visor-x{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 80%,transparent); color:var(--text); font-size:var(--fs-4); cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.visor-tit{flex:1; min-width:0;}
.visor-tit .n{font-family:var(--display); font-weight:600; font-size:var(--fs-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.visor-tit .m{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:2px;}
.visor-pendiente{display:none; margin-top:6px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); border:1px dashed var(--line); border-radius:99px; padding:2px 8px;}
.visor-cont{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); flex:0 0 auto; background:color-mix(in srgb,var(--panel) 70%,transparent); border:1px solid var(--line); border-radius:99px; padding:5px 11px;}
.visor-vp{flex:1; position:relative; overflow:hidden; touch-action:none;}
.visor-track{display:flex; height:100%; will-change:transform;}
.visor-slide{flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.visor-slide img{max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; transform-origin:center center; transition:transform var(--dur-1) var(--ease);}
.visor-slide.zoom img{transition:none; cursor:grab;}
.visor-flecha{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 78%,transparent); color:var(--text); font-size:var(--fs-5); cursor:pointer; z-index:4; display:flex; align-items:center; justify-content:center;}
.visor-flecha.prev{left:10px;} .visor-flecha.next{right:10px;}
.visor-zoombadge{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); background:color-mix(in srgb,var(--panel) 80%,transparent); border:1px solid var(--line); border-radius:99px; padding:4px 10px; opacity:0; transition:opacity var(--dur-1); z-index:4;}
.visor-zoombadge.on{opacity:1;}
.visor-acciones{flex:0 0 auto; display:flex; gap:8px; padding:12px 14px calc(16px + var(--sab));}
.vacc{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; background:color-mix(in srgb,var(--panel) 82%,transparent); border:1px solid var(--line); border-radius:var(--r-lg); padding:11px 4px; color:var(--text); font-family:var(--mono); font-size:var(--fs-1); cursor:pointer; transition:var(--dur-1);}
.vacc svg{width:19px; height:19px;}
.vacc:active{transform:scale(.96);}
.vacc.info{line-height:var(--lh);border-color:color-mix(in srgb,var(--teal) 45%,var(--line)); color:var(--teal);}
.vacc.borrar{color:var(--err-text); border-color:color-mix(in srgb,var(--err-text) 32%,var(--line));}
/* Hoja de información (abajo) */
.hoja{position:absolute; left:0; right:0; bottom:0; z-index:10; max-height:82%; overflow-y:auto; background:color-mix(in srgb,var(--panel) 96%,transparent); border-top:1px solid var(--line); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:10px 16px calc(18px + var(--sab)); transform:translateY(101%); transition:transform var(--dur-2) var(--ease); box-shadow:var(--sh-4);}
.hoja.on{transform:translateY(0);}
.hoja-grip{width:38px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 14px; cursor:pointer;}
.hoja h3{line-height:var(--lh-tight);font-family:var(--display); font-weight:600; font-size:var(--fs-4); margin:0;}
.hoja .sci{font-family:var(--display); font-style:italic; font-size:var(--fs-2); color:var(--muted); margin:2px 0 12px;}
.dato{display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid var(--line);}
.dato:last-of-type{border-bottom:none;}
.dato .ic{width:32px; height:32px; border-radius:var(--r-md); flex:0 0 auto; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--teal);}
.dato .ic svg{width:15px; height:15px;}
.dato .k{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.dato .v{font-size:var(--fs-2); margin-top:2px;}
.dato .v.vacio{color:var(--muted); font-style:italic;}
.hoja-acciones{display:flex; gap:8px; margin-top:14px;}
.hbtn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--r-md); padding:11px; font-family:var(--display); font-weight:600; font-size:var(--fs-2); cursor:pointer; border:1px solid transparent;}
.hbtn svg{width:15px; height:15px;}
.hbtn.pri{background:var(--gold); color:var(--on-gold);}
.hbtn.sec{background:transparent; color:var(--teal); border-color:var(--teal);}
.campo{margin:10px 0;}
.campo label{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px;}
.campo input, .campo textarea{width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; color:var(--text); font-family:inherit; font-size:var(--fs-2);}
.campo input{color-scheme:dark;} html[data-bg^="claro"] .campo input{color-scheme:light;}
.campo textarea{resize:vertical; min-height:64px;}
.campo input:focus, .campo textarea:focus{border-color:var(--teal);}
/* Confirmación de borrado (dentro del visor) */
.confirm{position:absolute; inset:0; z-index:20; background:rgba(6,12,10,.72); display:none; align-items:center; justify-content:center; padding:26px;}
.confirm.on{display:flex;}
.confirm-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:20px; max-width:300px; text-align:center;}
.confirm-card h4{font-family:var(--display); font-weight:600; font-size:var(--fs-3); margin:0 0 7px;}
.confirm-card p{font-size:var(--fs-2); color:var(--muted); margin:0 0 16px; line-height:1.5;}
.confirm-row{display:flex; gap:8px;}
.confirm-row button{flex:1; border-radius:var(--r-md); padding:10px; font-family:var(--mono); font-size:var(--fs-2); cursor:pointer; border:1px solid var(--line); background:var(--panel2); color:var(--text);}
.confirm-row button.si{background:var(--err-bg); border-color:var(--err-border); color:var(--err-text);}
@media (hover:none){ .visor-flecha{display:none;} }
@media (prefers-reduced-motion: reduce){ .visor-slide img, .hoja{transition:none;} }

/* ==== IMPORTAR DE EBIRD / MERLIN ====
   Solo tokens existentes, sin colores/radios/sombras/duraciones a pelo. */
.imp-entry-btn{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; cursor:pointer; color:var(--text); font-family:inherit;}
.imp-entry-btn:hover{border-color:var(--teal);}
.imp-entry-txt b{display:block; font-family:var(--display); font-size:var(--fs-3); font-weight:650;}
.imp-entry-txt small{display:block; margin-top:2px; color:var(--muted); font-size:var(--fs-1);}
.imp-badge{flex:0 0 auto; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; color:var(--teal); border:1px solid var(--teal); border-radius:var(--r-full); padding:3px 9px;}

/* margin/padding negativos arriba y a los lados: la cabecera pegajosa tapa
   también el relleno de la hoja, que si no dejaba ver el contenido colarse por
   encima al hacer scroll. */
.imp-head{position:sticky; top:calc(-1 * var(--imp-pad-top,22px)); z-index:2; display:flex; align-items:center; gap:10px;
  margin:calc(-1 * var(--imp-pad-top,22px)) -20px 14px; padding:var(--imp-pad-top,22px) 20px 14px;
  background:var(--panel); border-bottom:1px solid var(--line);}
.imp-back{flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-full); background:var(--panel2); border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.imp-back:hover{border-color:var(--teal);}
.imp-back svg{width:16px; height:16px;}
.imp-head-txt b{display:block; font-family:var(--display); font-size:var(--fs-3); font-weight:650;}
.imp-head-txt small{display:block; color:var(--muted); font-size:var(--fs-1); margin-top:1px;}

.imp-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px;}
.imp-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; min-width:0;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 12px;}
/* 20/10/2026: se quitó el azulejo con el logotipo oficial de eBird/Merlin
   (marcas registradas, sin permiso de uso); la tarjeta ahora solo lleva el
   nombre en texto (b/small), igual que el resto de tarjetas de la app. */
.imp-card b{display:block; font-family:var(--display); font-size:var(--fs-2); font-weight:650; overflow-wrap:anywhere;}
.imp-card small{display:block; margin-top:3px; color:var(--muted); font-size:var(--fs-1); line-height:1.4;}

.imp-notice{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-bottom:16px; font-size:var(--fs-1); color:var(--muted); line-height:1.5;}
.imp-notice b{color:var(--text);}

.imp-timeline{margin-bottom:16px;}
.imp-step{display:flex; gap:12px; position:relative; padding-bottom:18px;}
.imp-step:last-child{padding-bottom:0;}
.imp-step:not(:last-child)::before{content:''; position:absolute; left:13px; top:28px; bottom:0; width:1px; background:var(--line);}
.imp-step-num{flex:0 0 auto; width:27px; height:27px; border-radius:var(--r-full); background:var(--teal); color:var(--on-gold,#0c1512); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; z-index:1;}
.imp-step-txt b{display:block; font-family:var(--display); font-size:var(--fs-2); font-weight:650;}
.imp-step-txt p{margin:3px 0 0; color:var(--muted); font-size:var(--fs-1); line-height:1.45;}
.imp-step-link{display:inline-flex; align-items:center; gap:5px; margin-top:8px; background:none; border:1px solid var(--teal); color:var(--teal); border-radius:var(--r-full); padding:6px 12px; font-family:var(--mono); font-size:var(--fs-0); cursor:pointer;}

.imp-details{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:2px 14px; margin-bottom:10px;}
.imp-details summary{padding:12px 0; font-family:var(--display); font-size:var(--fs-2); font-weight:600; cursor:pointer; list-style:none;}
.imp-details summary::-webkit-details-marker{display:none;}
.imp-details[open] summary{border-bottom:1px solid var(--line);}
.imp-details p{margin:0; padding:12px 0; color:var(--muted); font-size:var(--fs-1); line-height:1.55;}
.imp-details p b{color:var(--text);}

/* ==== Zona de subida (rediseño 2026-09-16) ====
   Antes: un recuadro con el botón "Elegir archivo" pegado a un lado, sin
   icono y sin sitio donde soltar nada. Ahora es una zona de verdad: icono,
   textos centrados, botón ancho y arrastrar-y-soltar. */
.imp-drop{display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1.5px dashed color-mix(in srgb,var(--teal) 42%,var(--line)); border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--teal) 5%,transparent);
  padding:26px 18px 22px; text-align:center; margin:6px 0 16px;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);}
.imp-drop.arrastrando{border-color:var(--teal); border-style:solid; background:color-mix(in srgb,var(--teal) 13%,transparent); transform:scale(1.012);}
.imp-drop-ic{width:56px; height:56px; border-radius:var(--r-full); display:grid; place-items:center; margin-bottom:11px;
  background:color-mix(in srgb,var(--teal) 13%,transparent); border:1px solid color-mix(in srgb,var(--teal) 34%,var(--line)); color:var(--teal);}
.imp-drop-ic svg{width:26px; height:26px;}
.imp-drop b{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-3);}
.imp-drop small{display:block; margin:4px 0 0; color:var(--muted); font-size:var(--fs-1); line-height:1.5;}
.imp-drop .io{width:100%; margin-top:15px;}
.imp-drop .io button{width:100%; min-height:50px; border:none; border-radius:var(--r-lg); cursor:pointer;
  background:var(--teal); color:var(--on-teal); font-family:var(--display); font-weight:600; font-size:var(--fs-3);
  display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:transform var(--dur-1) var(--ease);}
.imp-drop .io button:active{transform:scale(.98);}
.imp-drop .io button svg{width:18px; height:18px;}
.imp-drop-formatos{display:flex; gap:6px; justify-content:center; margin-top:12px; flex-wrap:wrap;}
.imp-drop-formatos span{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:var(--r-full); padding:3px 10px; background:var(--panel);}
.imp-file-chip{display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--teal); border-radius:var(--r-md); padding:10px 12px; margin:6px 0 16px;}
.imp-file-chip-txt{flex:1 1 auto; min-width:0;}
.imp-file-chip-name{font-size:var(--fs-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.imp-file-chip-meta{font-size:var(--fs-0); color:var(--muted); font-family:var(--mono);}
.imp-file-chip-meta b{color:var(--teal);}
.imp-file-chip-x{flex:0 0 auto; background:none; border:none; color:var(--muted); font-size:var(--fs-3); cursor:pointer; padding:4px;}

.imp-notice-strong{border-color:var(--teal); color:var(--text); font-weight:600;}
.imp-report-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px;}
.imp-report-stat{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; text-align:center;}
.imp-report-stat b{display:block; font-family:var(--mono); font-size:var(--fs-3); font-weight:700; color:var(--teal);}
.imp-report-stat small{display:block; color:var(--muted); font-size:var(--fs-0); margin-top:2px;}
.imp-confirm-list{max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); margin:6px 0 14px;}
.imp-confirm-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer;}
.imp-confirm-row:last-child{border-bottom:none;}
.imp-confirm-row input{flex:0 0 auto; width:18px; height:18px;}
.imp-confirm-row-txt{flex:1 1 auto; min-width:0;}
.imp-confirm-row-txt b{display:block; font-family:var(--display); font-size:var(--fs-2);}
.imp-confirm-row-txt small{display:block; color:var(--muted); font-size:var(--fs-0);}
.imp-confirm-actions{display:flex; gap:8px; margin-top:6px;}
.imp-confirm-actions button{flex:1 1 50%;}
.imp-cancelar{background:transparent; border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:var(--fs-2); padding:10px 12px; border-radius:var(--r-sm); cursor:pointer;}
.imp-cancelar:hover{border-color:var(--warn); color:var(--text);}
/* Mientras la importación bloquea la navegación, se avisa visualmente aunque
   [inert] ya impida la interacción (ver _impFijarEstado): el resto de la app
   se atenúa para que quede claro que no responde ahora mismo a propósito. */
body.imp-nav-bloqueada > *:not(#impOverlay):not(#impListaOverlay){filter:saturate(.4) brightness(.85);}

.imp-loading{display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 4px;}
.imp-loading-art{position:relative; width:88px; height:88px; display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.imp-loading-art svg{position:relative; z-index:1; animation:impAletea 1.6s var(--ease) infinite;}
.imp-loading-halo{position:absolute; inset:0; border-radius:var(--r-full); border:1.5px solid var(--teal); opacity:0; animation:impHalo 1.8s var(--ease) infinite;}
.imp-loading-halo.b{animation-delay:.6s;}
@keyframes impAletea{0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);}}
@keyframes impHalo{0%{transform:scale(.7); opacity:.55;} 100%{transform:scale(1.5); opacity:0;}}
.imp-loading-title{font-family:var(--display); font-size:var(--fs-3); font-weight:650; min-height:1.3em;}
.imp-loading-num{font-family:var(--mono); font-size:34px; font-weight:700; color:var(--gold); margin-top:10px;}
.imp-loading-num-lbl{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.imp-loading-track{width:100%; max-width:260px; height:5px; border-radius:var(--r-full); background:var(--panel2); overflow:hidden; margin:14px 0 18px;}
.imp-loading-fill{display:block; height:100%; width:0%; background:var(--teal); transition:width var(--dur-3) var(--ease);}
.imp-loading-steps{width:100%; max-width:300px; text-align:left;}
.imp-loading-step{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:var(--fs-1); color:var(--muted);}
.imp-loading-step .dot{flex:0 0 auto; width:18px; height:18px; border-radius:var(--r-full); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10px; transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);}
.imp-loading-step.activo{color:var(--text);}
.imp-loading-step.activo .dot{border-color:var(--teal); background:var(--teal); animation:impPulso 1s var(--ease) infinite;}
.imp-loading-step.hecho .dot{border-color:var(--teal); background:var(--teal); color:var(--panel);}
@keyframes impPulso{0%,100%{box-shadow:0 0 0 0 rgba(46,182,164,.4);} 50%{box-shadow:0 0 0 5px rgba(46,182,164,0);}}

.imp-cel-head{text-align:center; margin-bottom:6px;}
.imp-cel-eyebrow{font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; color:var(--gold); margin:0 0 6px;}
.imp-cel-num{font-family:var(--display); font-weight:800; font-size:52px; line-height:1; color:var(--gold); text-shadow:0 0 22px rgba(214,169,90,.45); margin:0;}
.imp-cel-num-lbl{font-family:var(--display); font-size:var(--fs-3); font-weight:600; color:var(--gold); margin:2px 0 12px;}
.imp-cel-sub{text-align:center; color:var(--muted); font-size:var(--fs-2); line-height:1.5; margin-bottom:16px;}
.imp-cel-sub b{color:var(--text);}
.imp-cel-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px;}
.imp-cel-stat{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 6px; text-align:center;}
.imp-cel-stat-num{font-family:var(--mono); font-size:var(--fs-4); font-weight:700; color:var(--teal);}
.imp-cel-stat-lbl{font-size:var(--fs-0); color:var(--muted); margin-top:2px;}
.imp-cel-card{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; margin-bottom:10px;}
.imp-cel-card-title{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 10px;}
.imp-cel-bar-track{height:8px; border-radius:var(--r-full); background:var(--panel); overflow:hidden;}
.imp-cel-bar-fill{display:block; height:100%; background:var(--teal); width:0%; transition:width var(--dur-3) var(--ease);}
.imp-cel-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:var(--fs-1); color:var(--muted);}
.imp-cel-pill{display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-full); padding:3px 10px; font-family:var(--mono); font-size:var(--fs-0); transition:transform var(--dur-2) var(--ease-pop);}
.imp-cel-pill.salto{transform:scale(1.12);}
.imp-cel-xp{font-family:var(--mono); color:var(--gold); font-weight:700;}
.imp-cel-find{position:relative; overflow:hidden; cursor:pointer; display:flex; gap:12px; align-items:center;}
.imp-cel-find-art{flex:0 0 auto; width:54px; height:54px; border-radius:var(--r-full); overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--panel); border:2px solid var(--line);}
.imp-cel-find-art img{width:100%; height:100%; object-fit:cover;}
.imp-cel-find-txt b{display:block; font-family:var(--display); font-size:var(--fs-2); font-weight:650;}
.imp-cel-find-txt i{display:block; font-size:var(--fs-0); color:var(--muted); font-style:italic;}
.imp-cel-find-sweep{position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%); transform:translateX(-120%); animation:impSweep 3.2s var(--ease) infinite;}
@keyframes impSweep{0%{transform:translateX(-120%);} 55%,100%{transform:translateX(120%);}}
.imp-cel-actions{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.imp-cel-link{background:none; border:none; color:var(--text); font-size:var(--fs-2); text-align:left; padding:10px 2px; cursor:pointer;}
.imp-cel-link b{color:var(--teal);}
.imp-cel-link.ambar b{color:var(--warn);}

.imp-list-overlay{z-index:var(--z-visor);}
.imp-list-head{margin-bottom:12px;}
.imp-list-chips{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 14px;}
.imp-list-chip{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-full); padding:5px 12px; font-size:var(--fs-0); font-family:var(--mono); cursor:pointer; color:var(--muted);}
.imp-list-chip.on{border-color:var(--teal); color:var(--teal);}
.imp-list-row{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line); padding:10px 0; cursor:pointer; color:var(--text); font-family:inherit; animation:impRowIn var(--dur-2) var(--ease) backwards;}
@keyframes impRowIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.imp-list-ic{flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line);}
.imp-list-txt{flex:1 1 auto; min-width:0;}
.imp-list-txt b{display:block; font-family:var(--display); font-size:var(--fs-2);}
.imp-list-txt small{display:block; color:var(--muted); font-size:var(--fs-0);}
.imp-list-meta{flex:0 0 auto; text-align:right; font-size:var(--fs-0); color:var(--muted); font-family:var(--mono);}
.imp-list-meta b{display:block; color:var(--gold);}
.imp-list-tag{display:inline-block; margin-top:2px; font-size:9px; font-family:var(--mono); color:var(--teal); border:1px solid var(--teal); border-radius:var(--r-full); padding:1px 6px;}
@media (prefers-reduced-motion: reduce){ .imp-loading-art svg, .imp-loading-halo, .imp-loading-step.activo .dot, .imp-cel-find-sweep, .imp-list-row{animation:none;} }

/* ==== CÁMARA INTEGRADA ==== ver PROMPT-camara-integrada.md. Prefijo cam-
   en todo (comprobado sin colisión con .visor/#cam* existentes). Basada en
   prototipo-camara.html, con temporizador/torch/zoom reales añadidos. */
.cam-visor-ov{position:fixed; inset:0; z-index:var(--z-visor); background:#07100d; display:flex; flex-direction:column; overscroll-behavior:contain;}
.cam-visor{position:relative; flex:1; overflow:hidden; background:#0b1512;}
#camVideo{width:100%; height:100%; object-fit:cover; display:none;}
#camVideo.on{display:block;}
.cam-rejilla{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity var(--dur-1) var(--ease);}
.cam-rejilla.on{opacity:1;}
.cam-rejilla span{position:absolute; background:rgba(255,255,255,.22);}
.cam-rejilla .v1{left:33.33%; top:0; bottom:0; width:1px;} .cam-rejilla .v2{left:66.66%; top:0; bottom:0; width:1px;}
.cam-rejilla .h1{top:33.33%; left:0; right:0; height:1px;} .cam-rejilla .h2{top:66.66%; left:0; right:0; height:1px;}
.cam-encuadre{position:absolute; inset:52px 26px; pointer-events:none;}
.cam-encuadre i{position:absolute; width:26px; height:26px; border:2px solid rgba(255,255,255,.5); border-radius:3px;}
.cam-encuadre i:nth-child(1){top:0; left:0; border-right:none; border-bottom:none;}
.cam-encuadre i:nth-child(2){top:0; right:0; border-left:none; border-bottom:none;}
.cam-encuadre i:nth-child(3){bottom:0; left:0; border-right:none; border-top:none;}
.cam-encuadre i:nth-child(4){bottom:0; right:0; border-left:none; border-top:none;}
.cam-foco{position:absolute; width:74px; height:74px; margin:-37px 0 0 -37px; border:1.5px solid var(--gold); border-radius:var(--r-md); pointer-events:none; opacity:0;}
.cam-foco.on{animation:camFocoAnim .9s var(--ease) 1;}
@keyframes camFocoAnim{0%{opacity:0; transform:scale(1.5);} 25%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1);}}
.cam-cuenta{position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:96px; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.5); background:rgba(6,12,10,.25); pointer-events:none;}
.cam-sup{position:absolute; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; gap:9px; padding:calc(12px + var(--sat)) 14px 12px; background:linear-gradient(to bottom, rgba(6,12,10,.72), transparent);}
.cam-ic-btn{width:44px; height:44px; border-radius:var(--r-full); border:1px solid rgba(255,255,255,.14); background:rgba(10,18,15,.5); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; transition:.16s; position:relative;}
.cam-ic-btn svg{width:18px; height:18px;}
.cam-ic-btn.on{background:color-mix(in srgb, var(--gold) 26%, rgba(10,18,15,.5)); border-color:var(--gold); color:var(--gold);}
.cam-ic-btn:active{transform:scale(.93);}
.cam-badge{position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; border-radius:var(--r-full); background:var(--gold); color:#2b1e07; font-family:var(--mono); font-size:9px; line-height:15px; text-align:center; padding:0 2px;}
.cam-sup .cam-sep{flex:1;}
/* ---- Rediseño 20/09/2026 ----
   Lo que se va y por qué: la tira de fotos y el panel "Tus fotos" (restos
   del flujo de varias fotos por registro: hoy solo se registra una), el
   botón "Usar esta foto" del visor (la revisión ya decide) y el consejo que
   rotaba cada 6 s. Lo que llega: una fila de ópticas que solo pinta las que
   el móvil tiene de verdad, y estado de espera en todo lo que tarda, para
   que ningún botón parezca muerto mientras trabaja.
   Los controles flotan sobre el visor con un velo, en vez de robarle 140 px
   a la imagen con una barra sólida. */
.cam-hint{position:absolute; top:calc(68px + var(--sat)); left:50%; transform:translateX(-50%); z-index:4; font-family:var(--mono); font-size:var(--fs-0); color:rgba(255,255,255,.78); background:rgba(10,18,15,.5); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-full); padding:6px 12px; max-width:250px; text-align:center; line-height:1.35; transition:opacity var(--dur-3) var(--ease);}
.cam-hint.fuera{opacity:0;}
/* Flash: píldora con su estado escrito. Antes era un icono que solo aparecía
   si el móvil exponía la linterna, así que lo normal era no verlo nunca. */
.cam-flash-btn{height:44px; padding:0 13px 0 10px; display:flex; align-items:center; gap:7px; border-radius:var(--r-full); border:1px solid rgba(255,255,255,.14); background:rgba(10,18,15,.5); backdrop-filter:blur(8px); color:#fff; cursor:pointer; flex:0 0 auto; transition:.16s;}
.cam-flash-btn svg{width:18px; height:18px;}
.cam-flash-btn b{font-family:var(--mono); font-size:var(--fs-0); font-weight:600; letter-spacing:.06em;}
.cam-flash-btn.on{background:color-mix(in srgb, var(--gold) 26%, rgba(10,18,15,.5)); border-color:var(--gold); color:var(--gold);}
.cam-flash-btn:active{transform:scale(.95);}
/* Ópticas: una por cada una que el móvil tenga de verdad. Si solo hay una
   cámara trasera sin zoom de hardware, la fila se queda en 1x y 2x, y ese 2x
   recorta TAMBIÉN la captura (ver recorte en capturarFrame). */
.cam-opticas{position:absolute; left:0; right:0; bottom:calc(140px + var(--sab)); z-index:5; display:flex; flex-direction:column; align-items:center; gap:7px;}
.cam-opticas:empty{display:none;}
.cam-opticas-fila{display:flex; gap:6px; background:rgba(10,18,15,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-full); padding:5px;}
.cam-optica{min-width:48px; height:38px; padding:0 12px; border-radius:var(--r-full); border:none; background:transparent; color:#fff; font-family:var(--mono); font-size:var(--fs-2); cursor:pointer; transition:.16s;}
.cam-optica.on{background:var(--teal); color:var(--on-teal); font-weight:600;}
.cam-optica:disabled{opacity:.55;}
.cam-optica-nombre{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.66); text-shadow:0 1px 6px rgba(0,0,0,.9);}
.cam-optica-nombre:empty{display:none;}
/* Barra inferior: flota sobre el visor. */
.cam-barra{position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 28px calc(24px + var(--sab)); background:linear-gradient(to top, rgba(6,12,10,.88), transparent);}
.cam-disparador{position:relative; width:82px; height:82px; border-radius:var(--r-full); border:none; background:none; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.cam-disparador .aro{position:absolute; inset:0; border-radius:var(--r-full); border:3px solid rgba(255,255,255,.9);}
.cam-disparador .centro{width:66px; height:66px; border-radius:var(--r-full); background:#fff; box-shadow:var(--sh-3); transition:transform .12s;}
.cam-disparador:active .centro{transform:scale(.88);}
.cam-disparador[aria-busy="true"] .centro{transform:scale(.72); background:rgba(255,255,255,.55);}
.cam-disparador[aria-busy="true"] .aro{border-color:rgba(255,255,255,.45); border-top-color:#fff; animation:camGira .8s linear infinite;}
.cam-lado{width:64px; display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--mono); font-size:var(--fs-1); color:#fff; background:none; border:none; cursor:pointer; text-shadow:0 1px 6px rgba(0,0,0,.9);}
.cam-lado .caja{width:52px; height:52px; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.18); background:rgba(10,18,15,.55); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:#fff;}
.cam-lado .caja svg{width:23px; height:23px;}
.cam-lado:active .caja{transform:scale(.94);}
.cam-lado[aria-busy="true"] .caja{color:rgba(255,255,255,.55);}
.cam-lado[aria-busy="true"] .caja svg{animation:camGira .8s linear infinite;}
.cam-lado:disabled{opacity:.75;}
@keyframes camGira{to{transform:rotate(360deg);}}
/* Aviso de que la foto se está preparando. Entre "Usar esta foto" y la
   pantalla de recorte hay una comprobación del archivo (y a veces una
   conversión) que con 12 Mpx tarda un par de segundos: sin esto, el usuario
   tocaba y no pasaba nada visible, que es exactamente la sensación de que el
   botón no funciona. */
/* ==== LENGUAJE COMÚN DE LOS CLÚSTERES DEL MAPA ====
   Los tres modos del mapa agrupan puntos, y los tres lo dicen igual: la
   ficha entra con un pop corto, el número va siempre en pastilla mono, y
   cuando el grupo es grande un halo respira detrás. Lo que cambia entre
   modos es la FORMA -- píldora con el nombre del sitio en Explorar, baraja
   de rarezas en En vivo, ficha de grupo en Mi diario -- no el idioma.
   Todo sobre var(--...): los 12 fondos x 8 acentos del tema redefinen
   --teal/--gold/--panel/--text y las fichas les siguen sin tocar nada.
   --cl-base guarda la traslación propia de cada forma (las fichas de
   Explorar se centran con translate(-50%,-50%), las otras dos con el
   iconAnchor de Leaflet), para que el keyframe pueda escalar sin perderla. */
.cl-grupo{position:relative; --cl-base:translate(0,0); --cl-radio:var(--r-full);
  animation:clEntra var(--dur-2) var(--ease) backwards;
  /* Escalonado: las fichas de una tanda no aparecen todas en el mismo
     fotograma, entran en cascada. Va DESPUÉS del atajo `animation`, que
     reinicia animation-delay a 0. */
  animation-delay:var(--cl-retraso,0ms);}
/* backwards, no both: al terminar la entrada el transform vuelve al
   declarado y el :active de cada forma sigue funcionando. */
@keyframes clEntra{
  0%{opacity:0; transform:var(--cl-base) scale(.68);}
  62%{opacity:1; transform:var(--cl-base) scale(1.06);}
  100%{opacity:1; transform:var(--cl-base) scale(1);}
}
/* Halo de densidad: solo en los grupos grandes (ver CL_DENSO). z-index:-1 lo
   deja por detrás del fondo de la propia ficha, así que únicamente se ve el
   aro que sobresale -- un elemento menos que dibujar por encima del mapa. */
.cl-grupo::before{content:''; position:absolute; inset:-5px; border-radius:var(--cl-radio);
  border:1.5px solid var(--cl-mc,var(--teal)); opacity:0; pointer-events:none; z-index:-1;}
.cl-denso::before{animation:clHalo 3.4s ease-out infinite;}
@keyframes clHalo{0%{transform:scale(.9); opacity:.5;} 70%{opacity:.06;} 100%{transform:scale(1.3); opacity:0;}}
/* Pastilla del número: mismo tipo, peso y forma en los tres modos. */
.cl-n{font-family:var(--mono); font-weight:700; font-size:var(--fs-2); line-height:1;
  color:var(--cl-mc,var(--teal)); background:color-mix(in srgb, var(--cl-mc,var(--teal)) 15%, transparent);
  border-radius:var(--r-full); padding:2px 7px;}
@supports not (background:color-mix(in srgb, red 50%, transparent)){ .cl-n{background:transparent;} }
/* Cuando a un grupo le entran o le salen puntos, la pastilla da un golpe
   corto: sin esto el número cambia solo y no se percibe. */
.cl-tic{animation:clTic var(--dur-2) var(--ease);}
@keyframes clTic{0%{transform:scale(1);} 45%{transform:scale(1.22);} 100%{transform:scale(1);}}
@media (hover:hover){
  .cl-grupo{transition:filter var(--dur-1) var(--ease);}
  .cl-grupo:hover{filter:brightness(1.12);}
}
@media (prefers-reduced-motion: reduce){
  .cl-grupo{animation:none;}
  .cl-denso::before{animation:none; opacity:.26;}
  .cl-tic{animation:none;}
}
html[data-motion="reducido"] .cl-grupo{animation:none;}
html[data-motion="reducido"] .cl-denso::before{animation:none; opacity:.26;}
html[data-motion="reducido"] .cl-tic{animation:none;}

/* ---- Fichas de grupo del mapa (Explorar) ----
   Una por comunidad, provincia o zona según el zoom. El borde y el número
   llevan el color de la capa que más manda dentro del grupo. El punto de
   delante repite ese color para que el grupo se lea de un vistazo incluso
   cuando el nombre queda recortado. */
.mc-chip{display:flex; align-items:center; gap:8px; transform:translate(-50%,-50%); white-space:nowrap;
  --cl-base:translate(-50%,-50%); --cl-radio:var(--r-full);
  background:color-mix(in srgb, var(--panel) 92%, transparent); border:1.5px solid var(--cl-mc,var(--teal));
  border-radius:var(--r-full); padding:6px 10px 6px 12px; box-shadow:var(--sh-2); cursor:pointer;
  font-family:var(--display); font-weight:600; color:var(--text);}
.mc-chip .mc-punto{width:7px; height:7px; border-radius:var(--r-full); background:var(--cl-mc,var(--teal));
  flex:0 0 auto; box-shadow:0 0 0 3px color-mix(in srgb, var(--cl-mc,var(--teal)) 22%, transparent);}
.mc-chip .mc-t{font-size:var(--fs-2); line-height:1.1; max-width:150px; overflow:hidden; text-overflow:ellipsis;}
.mc-chip .mc-n{font-size:var(--fs-2);}
/* Cuatro tamaños, uno por nivel de zoom: cuanto más lejos estás, más gorda
   es la ficha, porque hay menos y dicen más. La de país es la que se ve al
   abrir el mapa ("España · 652"). */
.mc-chip.mc-pais{padding:9px 13px 9px 15px; gap:9px;}
.mc-chip.mc-pais .mc-t{font-size:var(--fs-4);}
.mc-chip.mc-pais .mc-n{font-size:var(--fs-3);}
.mc-chip.mc-pais .mc-punto{width:9px; height:9px;}
.mc-chip.mc-provincia{padding:7px 11px 7px 13px;}
.mc-chip.mc-provincia .mc-t{font-size:var(--fs-3);}
.mc-chip.mc-provincia .mc-punto{width:8px; height:8px;}
.mc-chip.mc-zona{padding:5px 9px 5px 11px; gap:6px;}
.mc-chip.mc-zona .mc-t{font-size:var(--fs-2); max-width:130px;}
.mc-chip.mc-zona .mc-punto{width:6px; height:6px;}
.mc-chip:active{transform:translate(-50%,-50%) scale(.96);}
/* Gota de grupo (nivel de punto). A cada zoom, una sola forma: de cerca todo
   son gotas -- o un sitio con su icono (.poi-pin, .ruta-pin) o un grupo de
   sitios que a este zoom caerían uno encima de otro, con su número. Mismo
   tamaño, mismo borde blanco y misma silueta que los pines de siempre, para
   que el mapa se lea como UN sistema y no como dos. */
.mc-pin{width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  --cl-base:rotate(-45deg); --cl-radio:50% 50% 50% 0;
  background:var(--cl-mc,var(--teal)); border:2px solid #fff; box-shadow:var(--sh-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;}
.mc-pin .mc-n{transform:rotate(45deg); background:none; padding:0;
  font-family:var(--mono); font-weight:700; font-size:var(--fs-2); line-height:1; color:#fff;}
.mc-pin:active{transform:rotate(-45deg) scale(.94);}
.cam-preparando{position:fixed; inset:0; z-index:var(--z-aviso); display:flex; align-items:center; justify-content:center; background:rgba(6,12,10,.62); backdrop-filter:blur(3px);}
.cam-preparando-caja{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:16px 20px; color:var(--text); font-size:var(--fs-3); box-shadow:var(--sh-5);}
.cam-preparando-spin{width:20px; height:20px; border-radius:var(--r-full); border:2.5px solid color-mix(in srgb, var(--teal) 30%, transparent); border-top-color:var(--teal); animation:camGira .8s linear infinite; flex:0 0 auto;}
@media (prefers-reduced-motion: reduce){ .cam-preparando-spin{animation:none;} }
html[data-motion="reducido"] .cam-preparando-spin{animation:none;}
@media (prefers-reduced-motion: reduce){ .cam-disparador[aria-busy="true"] .aro, .cam-lado[aria-busy="true"] .caja svg{animation:none;} }
html[data-motion="reducido"] .cam-disparador[aria-busy="true"] .aro, html[data-motion="reducido"] .cam-lado[aria-busy="true"] .caja svg{animation:none;}
/* ==== Revisión de la foto recién hecha (rediseño 2026-09-16) ====
   Antes: la foto flotaba pequeña en medio de un vacío negro, la cabecera se
   metía debajo de la barra de estado y los tres botones se repartían en dos
   filas desiguales. Ahora la foto va a sangre con un degradado encima (como
   cualquier cámara moderna), la cabecera es una píldora legible sobre la
   imagen y las acciones son dos, grandes y con jerarquía clara. */
.cam-rev{position:absolute; inset:0; z-index:30; background:#07100d; display:none; flex-direction:column;}
.cam-rev.on{display:flex; animation:camRevIn var(--dur-2) var(--ease);}
@keyframes camRevIn{from{opacity:0; transform:scale(1.015);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .cam-rev.on{animation:none;} }
html[data-motion="reducido"] .cam-rev.on{animation:none;}
.cam-rev-img{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#07100d;}
.cam-rev-img img{width:100%; height:100%; object-fit:cover;}
/* Velos arriba y abajo: dan contraste al texto sin oscurecer el centro. */
.cam-rev-img::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(4,9,7,.72) 0, rgba(4,9,7,0) 30%, rgba(4,9,7,0) 46%, rgba(4,9,7,.88) 100%);}
.cam-rev-top{position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; gap:11px;
  padding:calc(12px + var(--sat)) 14px 12px; color:#fff;}
.cam-rev-top .cam-ic-btn{flex:0 0 auto;}
.cam-rev-badge{display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 9px; border-radius:var(--r-full);
  background:rgba(8,16,13,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); min-width:0;}
.cam-rev-badge-ic{flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--gold); color:#2b1e07;}
.cam-rev-badge-ic svg{width:13px; height:13px;}
/* display:block explícito: son <span> dentro de otro <span>, y sin esto el
   título y el subtítulo salían pegados en la misma línea. */
.cam-rev-badge>span:last-child{display:block; min-width:0;}
.cam-rev-t{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-2); line-height:1.2; color:#fff;}
.cam-rev-s{display:block; font-family:var(--mono); font-size:var(--fs-0); color:rgba(255,255,255,.62); margin-top:2px; line-height:1.3;}
.cam-rev-inf{position:absolute; left:0; right:0; bottom:0; z-index:2; flex:0 0 auto;
  padding:14px 16px calc(18px + var(--sab)); display:flex; gap:10px; align-items:stretch;}
.cam-rev-btn{border-radius:var(--r-lg); cursor:pointer; font-family:var(--display); font-weight:600; font-size:var(--fs-3);
  display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:54px; padding:14px 16px;
  transition:transform var(--dur-1) var(--ease);}
.cam-rev-btn:active{transform:scale(.97);}
.cam-rev-btn svg{width:18px; height:18px; flex:0 0 auto;}
/* "Repetir" es secundaria y ocupa lo justo; "Usar esta foto" manda. */
.cam-rev-btn.rep{flex:0 0 auto; background:rgba(12,22,18,.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2); color:#fff; padding:14px 20px;}
.cam-rev-btn.ok{flex:1 1 auto; background:var(--gold); border:none; color:#2b1e07; box-shadow:0 8px 24px rgba(0,0,0,.4);}
/* Aviso de una sola foto, discreto, encima de las acciones. */
.cam-rev-nota{position:absolute; left:0; right:0; bottom:calc(86px + var(--sab)); z-index:2;
  text-align:center; font-family:var(--mono); font-size:var(--fs-0); color:rgba(255,255,255,.55); pointer-events:none;}

/* ==== Capa "procesando" (2026-09-16) ====
   El visor se CONGELA mientras se genera el archivo: sin esto se podían
   encadenar disparos y la app se quedaba masticando fotos a la vez. */
.cam-procesando{position:absolute; inset:0; z-index:35; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:rgba(5,11,9,.72); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); color:#fff;}
.cam-procesando.on{display:flex;}
.cam-proc-aro{width:52px; height:52px; border-radius:var(--r-full); border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--gold); animation:camProcGira .85s linear infinite;}
@keyframes camProcGira{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .cam-proc-aro{animation:none; border-top-color:var(--gold); opacity:.8;} }
html[data-motion="reducido"] .cam-proc-aro{animation:none;}
.cam-proc-t{font-family:var(--display); font-weight:600; font-size:var(--fs-3);}
.cam-proc-s{font-family:var(--mono); font-size:var(--fs-1); color:rgba(255,255,255,.6); margin-top:-6px;}
/* Mientras procesa, nada del visor responde. */
.cam-visor-ov.procesando .cam-inf, .cam-visor-ov.procesando .cam-sup, .cam-visor-ov.procesando .cam-zooms{pointer-events:none; opacity:.45; transition:opacity var(--dur-1);}
.cam-visor-ov.procesando .cam-visor video{filter:brightness(.6) saturate(.7);}
.cam-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:40;}
.cam-flash.on{animation:camFlashAnim .32s var(--ease) 1;}
@keyframes camFlashAnim{0%{opacity:.85;} 100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .cam-foco.on, .cam-flash.on{animation:none;} }
html[data-motion="reducido"] .cam-foco.on, html[data-motion="reducido"] .cam-flash.on{animation:none;}

:where(html.sin-blur) .reg-hero-cap, :where(html.sin-blur) .reg-otra, :where(html.sin-blur) .home-cont, :where(html.sin-blur) .home-identity, :where(html.sin-blur) .gmap-controls, :where(html.sin-blur) .explo-sheet, :where(html.sin-blur) .mv-mod-seg, :where(html.sin-blur) .mv-chip, :where(html.sin-blur) .avi-ping-label, :where(html.sin-blur) .mv-viaje-etiqueta, :where(html.sin-blur) .ev-resumen, :where(html.sin-blur) .ev-cluster{background:var(--panel);}
:where(html.sin-blur) .bb-panel{background:rgba(6,11,9,.62);}
/* 2b. Paneles sin equivalente definido: su mismo color, opaco */
:where(html.sin-blur) .sd-hero-btn, :where(html.sin-blur) .sd-actionbar,
:where(html.sin-blur) .reg-shutter-chip, :where(html.sin-blur) .mapa-offline-aviso,
:where(html.sin-blur) .bottom-nav{background:var(--panel);}
:where(html.sin-blur) .pf3-barra.solida{background:var(--bg2);}

/* 3. Sobre fotos y sobre la cámara: el mismo tono, casi opaco */
:where(html.sin-blur) .vphoto-like{background:rgba(18,28,25,.92);}
:where(html.sin-blur) .hv-ficha, :where(html.sin-blur) .cam-ic-btn,
:where(html.sin-blur) .cam-hint, :where(html.sin-blur) .cam-flash-btn,
:where(html.sin-blur) .cam-opticas-fila, :where(html.sin-blur) .cam-lado .caja{background:rgba(10,18,15,.9);}
:where(html.sin-blur) .cam-rev-badge{background:rgba(8,16,13,.9);}
:where(html.sin-blur) .cam-rev-btn.rep{background:rgba(12,22,18,.92);}
:where(html.sin-blur) .ficha-hero-add{background:rgba(16,32,40,.9);}
:where(html.sin-blur) .pf3-cristal{background:rgba(10,16,14,.86);}
:where(html.sin-blur) .pf3-tesela-dest{background:rgba(0,0,0,.78);}

/* 5. Brillos y fondos de foto difuminados */
html.sin-blur .fm2-luz, html.sin-blur .album-btn::before,
html.sin-blur .home-card.primary::before, html.sin-blur .akin-smoke,
html.sin-blur .home-ambient-photo, html.sin-blur .pp-banner-photo,
html.sin-blur .fm2-carta-fondo, html.sin-blur .pf3-portada-img{display:none;}
:where(html.sin-blur) .pf3-portada{background:var(--panel);}

/* Animaciones que no se ven (24/09/2026): el vigilante de js/app.js pone
   data-anim-pausa en los elementos con una animación infinita mientras están
   fuera de la vista o tapados por una hoja. Siguen donde iban al volver. */
[data-anim-pausa], [data-anim-pausa]::before, [data-anim-pausa]::after{animation-play-state:paused !important;}

/* =====================================================================
   MI ÁLBUM · rediseño 24/09/2026 (prototipo avedex-album-prototipo.html)
   Pantalla completa que rueda entera (#sheetAlbum), cabecera fija,
   portada con la última foto, pestañas, buscador y rejillas a dos
   columnas con pie de foto. Las fotos llevan siempre su velo oscuro, así
   que el texto sobre ellas es blanco en los dos temas; el resto sale de
   los tokens. Las rejillas van en trozos de 12 con content-visibility
   (albumRejillaHTML): con cientos de fotos solo se pinta lo que está cerca.
   ===================================================================== */
.overlay.alb-pantalla{padding:0; display:block; background:var(--bg2); backdrop-filter:none; -webkit-backdrop-filter:none;}
.alb-hoja{height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:var(--bg2);
  animation:pantEntra var(--dur-2) var(--ease); padding-bottom:calc(28px + var(--sab));}
.alb-top{position:sticky; top:0; z-index:5; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:10px;
  padding:calc(var(--sat) + 10px) 14px 10px; background:var(--panel); border-bottom:1px solid var(--line);}
.alb-atras{width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--panel2); color:var(--text); cursor:pointer;}
.alb-atras svg{width:19px; height:19px;}
.alb-atras:active{transform:translateX(-2px);}
.alb-marca{text-align:center; line-height:1.1;}
.alb-marca small{display:block; color:var(--teal); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.16em; text-transform:uppercase;}
html[data-bg^="claro"] .alb-marca small{color:var(--teal-deep);}
.alb-marca strong{font-family:var(--display); font-size:var(--fs-5); font-weight:700;}

/* Portada y cabecera de especie: foto con velo, texto blanco encima. */
.alb-hero, .alb-sp-hero{position:relative; overflow:hidden; background:#15334e;}
.alb-hero{height:210px;}
.alb-sp-hero{height:228px;}
.alb-hero img, .alb-sp-hero img{width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block;}
.alb-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,38,61,.85),rgba(10,38,61,.15)),linear-gradient(0deg,rgba(11,38,62,.7),transparent 75%);}
.alb-sp-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,36,61,.9),transparent 70%);}
.alb-hero-txt, .alb-sp-hero-txt{position:absolute; z-index:1; left:20px; right:16px; bottom:20px; color:#fff;}
.alb-ceja{color:#c9e1fa; font-family:var(--mono); font-size:var(--fs-0); font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
.alb-hero h1{margin:7px 0 4px; font-family:var(--display); font-size:36px; font-weight:700; line-height:1;}
.alb-cifras{margin:0; color:#e3eff9; font-family:var(--mono); font-size:var(--fs-1); font-weight:600;}
.alb-lema{margin:14px 0 0; color:#e3eff9; font-family:var(--display); font-style:italic; font-size:var(--fs-3);}
.alb-sp-hero h2{margin:5px 0 1px; font-family:var(--display); font-size:28px; font-weight:700; line-height:1.1;}
.alb-sp-hero-txt p{margin:0; color:#d6e8f6; font-family:var(--display); font-style:italic; font-size:var(--fs-2);}
.alb-volver{position:absolute; z-index:2; top:14px; left:14px; display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:5px 12px 5px 8px;
  border:1px solid rgba(255,255,255,.47); border-radius:99px; background:rgba(11,44,72,.63); color:#fff; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; cursor:pointer;}
.alb-volver svg{width:15px; height:15px;}

.alb-cont{padding:16px 16px 0;}
.alb-pestanas{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:4px; border:1px solid var(--line); border-radius:14px; background:var(--panel2);}
.alb-pestanas button{min-height:38px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); font-weight:700; cursor:pointer; touch-action:manipulation;}
.alb-pestanas button.on{background:var(--panel); color:var(--teal); box-shadow:var(--sh-1);}
html[data-bg^="claro"] .alb-pestanas button.on{color:var(--teal-deep);}
.alb-buscador{position:relative; display:flex; align-items:center; margin:16px 0 4px;}
.alb-buscador > svg{position:absolute; left:12px; width:17px; height:17px; color:var(--muted); pointer-events:none;}
.alb-buscador input{width:100%; height:44px; padding:0 40px 0 39px; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--text); font-size:var(--fs-2); -webkit-appearance:none; appearance:none;}
.alb-buscador input::placeholder{color:var(--muted);}
.alb-buscador input:focus{border-color:var(--teal); outline:none;}
.alb-buscador input::-webkit-search-cancel-button{display:none;}
.alb-buscador-x{position:absolute; right:9px; width:26px; height:26px; border-radius:var(--r-full); border:none; background:var(--line); color:var(--text); font-size:var(--fs-3); line-height:1; display:none; align-items:center; justify-content:center; cursor:pointer;}
.alb-buscador.con-texto .alb-buscador-x{display:flex;}
.alb-sec-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:20px 1px 12px;}
.alb-sec-cab h3{margin:0; font-family:var(--display); font-size:var(--fs-6); font-weight:700; line-height:1.1;}
.alb-sec-cab span{color:var(--teal); font-family:var(--mono); font-size:var(--fs-0); font-weight:700; white-space:nowrap;}
html[data-bg^="claro"] .alb-sec-cab span{color:var(--teal-deep);}

.alb-rejilla{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
.alb-sp{min-width:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); color:var(--text); text-align:left; box-shadow:var(--sh-2); cursor:pointer;}
.alb-sp-portada{position:relative; display:block; aspect-ratio:1.04; overflow:hidden; background:var(--panel2);}
.alb-sp-portada img, .alb-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-2) var(--ease);}
.alb-sp:active img, .alb-foto:active img{transform:scale(1.04);}
@media (hover:hover){ .alb-sp:hover img, .alb-foto:hover img{transform:scale(1.04);} }
.alb-chapa{position:absolute; right:8px; bottom:8px; padding:5px 8px; border:1px solid rgba(255,255,255,.4); border-radius:99px; background:rgba(16,45,68,.8); color:#fff; font-family:var(--mono); font-size:var(--fs-0); font-weight:700;}
.alb-chapa-dom{right:auto; left:8px; background:color-mix(in srgb, var(--gold) 88%, #000); border-color:transparent; color:#1b1406;}
.alb-sp-txt{display:block; padding:10px 11px 11px;}
.alb-sp-txt b{display:-webkit-box; min-height:calc(1.2em * 2); overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-family:var(--display); font-size:var(--fs-2); font-weight:700; line-height:1.2;}
.alb-sp-txt small{display:block; overflow:hidden; margin-top:5px; color:var(--muted); font-family:var(--mono); font-size:var(--fs-0); white-space:nowrap; text-overflow:ellipsis;}
.alb-foto{position:relative; aspect-ratio:1; min-width:0; padding:0; border:0; border-radius:13px; overflow:hidden; background:var(--panel2); text-align:left; box-shadow:var(--sh-2); cursor:pointer;}
.alb-foto.destacada{grid-column:span 2; aspect-ratio:1.6;}
.alb-trozos{display:grid; grid-template-columns:minmax(0,1fr); gap:10px;}
/* El hueco que reserva un trozo todavía sin pintar es SOLO de alto
   (contain-intrinsic-block-size). Antes era contain-intrinsic-size:auto 1100px,
   que vale para ancho Y alto: con más de 12 fichas, el trozo de abajo (fuera de
   pantalla) medía 1100px de ancho, estiraba la columna y todo el álbum salía
   con fotos gigantes y desplazado a la derecha (28/09/2026). La columna
   minmax(0,1fr) impide además que ningún trozo la ensanche. */
.alb-trozo{min-width:0; content-visibility:auto; contain-intrinsic-block-size:auto 1100px;}
.alb-datos{display:flex; flex-wrap:wrap; gap:7px;}
.alb-datos span{padding:6px 10px; border:1px solid var(--line); border-radius:99px; background:var(--panel); color:var(--muted); font-family:var(--mono); font-size:var(--fs-0); font-weight:700;}
.alb-datos span.dom{color:var(--gold); border-color:color-mix(in srgb, var(--gold) 55%, var(--line));}
.alb-lugar{margin-bottom:24px;}
.alb-lugar-tit{display:flex; align-items:center; gap:8px; margin:0 1px 4px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--display); font-size:var(--fs-4); font-weight:700;}
.alb-lugar-tit svg{flex:0 0 auto; width:17px; height:17px; color:var(--teal);}
.alb-lugar-tit span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.alb-lugar-tit small{margin-left:auto; flex:0 0 auto; color:var(--muted); font-family:var(--mono); font-size:var(--fs-0); font-weight:600;}
.alb-lugar-det{display:block; margin:0 1px 10px 26px; color:var(--muted); font-family:var(--mono); font-size:var(--fs-0); line-height:1.5;}
.alb-lugar-tit + .alb-trozos{margin-top:10px;}
.alb-vacio{margin-top:18px; padding:40px 20px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; font-size:var(--fs-2); line-height:1.5;}
.alb-vacio svg{display:block; width:22px; height:22px; margin:0 auto 9px; color:var(--teal);}
.alb-vacio b{display:block; margin-bottom:4px; color:var(--text); font-family:var(--display); font-size:var(--fs-3);}

/* Visor del álbum con el aire del prototipo: barra de arriba y barra de
   acciones oscuras en los dos temas (una foto se mira sobre negro), las
   cuatro acciones como botones planos y la pista de zoom siempre a la vista. */
#visorAlbum{background:#08121b; color:#fff;}
/* 07/10/2026 (Jon, prototipo-visor-album.html: «Iconos limpios», tocar la
   foto esconde la interfaz y fondo con la propia foto difuminada). La foto
   ocupa toda la pantalla y las dos barras flotan encima con un degradado:
   al esconderlas (#visorAlbum.limpio) no se mueve nada, solo desaparecen. */
#visorAlbum .visor-vp{position:absolute; inset:0; z-index:1; flex:none;}
#visorAlbum .visor-top{position:absolute; top:0; left:0; right:0; padding:calc(var(--sat) + 11px) 13px 26px; background:linear-gradient(rgba(8,18,27,.9),rgba(8,18,27,0)); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
#visorAlbum .visor-fondo{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .35s var(--ease); pointer-events:none;}
#visorAlbum .visor-fondo.on{opacity:1;}
#visorAlbum .visor-velo{position:absolute; inset:0; background:rgba(8,18,27,.5); pointer-events:none;}
#visorAlbum.limpio .visor-top, #visorAlbum.limpio .visor-acciones, #visorAlbum.limpio .visor-zoombadge, #visorAlbum.limpio .visor-flecha{opacity:0; pointer-events:none;}
#visorAlbum.limpio .visor-top{transform:translateY(-10px);}
#visorAlbum.limpio .visor-acciones{transform:translateY(10px);}
#visorAlbum .visor-flecha, #visorAlbum .visor-zoombadge{transition:opacity var(--dur-2) var(--ease);}
#visorAlbum .visor-slide img{will-change:transform;}
#visorAlbum .visor-x{width:38px; height:38px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.09); color:#fff;}
#visorAlbum .visor-tit .n{font-size:var(--fs-4); font-weight:700; color:#fff;}
#visorAlbum .visor-tit .m{color:#aebfca;}
#visorAlbum .visor-cont{border-color:rgba(255,255,255,.21); background:transparent; color:#d4e3ed;}
#visorAlbum .visor-pendiente{color:#d4e3ed; border-color:rgba(255,255,255,.3);}
#visorAlbum .visor-flecha{width:36px; height:36px; border-color:rgba(255,255,255,.25); background:rgba(16,40,59,.76); color:#fff;}
#visorAlbum .visor-zoombadge{bottom:calc(var(--sab) + 92px); padding:6px 11px; border:0; background:rgba(8,26,41,.68); color:#d7e5ee; font-size:var(--fs-0); white-space:nowrap; pointer-events:none;}
#visorAlbum .visor-acciones{position:absolute; left:0; right:0; bottom:0; z-index:3; display:grid; grid-template-columns:repeat(4,minmax(0,110px)); justify-content:space-around; gap:2px; padding:30px 10px calc(10px + var(--sab)); border:0; background:linear-gradient(rgba(8,18,27,0),rgba(8,18,27,.9) 55%); transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
#visorAlbum .vacc{min-height:54px; justify-content:center; gap:4px; padding:6px 2px; border:0; border-radius:var(--r-md); background:transparent; color:#aebfca; font-weight:500;}
#visorAlbum .vacc svg{width:22px; height:22px; color:#fff;}
#visorAlbum .vacc.borrar svg{color:#f1aaaa;}
#visorAlbum .vacc.info{color:#aebfca;}
#visorAlbum .vacc.borrar{color:#f1aaaa;}
#visorAlbum .vacc:active{background:rgba(255,255,255,.08);}
@media (hover:hover){ #visorAlbum .vacc:hover{background:rgba(255,255,255,.08);} }
/* La hoja de información y el aviso de borrado van sobre panel del tema:
   vuelven al color de texto del tema (si no, heredarían el blanco del visor
   y en tema claro quedaba blanco sobre blanco). */
#visorAlbum .hoja, #visorAlbum .confirm-card{color:var(--text);}
/* "Sin notas" / "Sin asignar": .vacio es también la clase del componente de
   estado vacío (centrado y con 34px de relleno), que se colaba aquí. */
#visorAlbum .dato .v.vacio{display:block; padding:0; text-align:left;}
#visorAlbum:has(.hoja.on) .visor-zoombadge{visibility:hidden;}

/* En pantallas anchas (web en el PC) el contenido no se estira: columna de
   640px como el Perfil, con la portada a todo el ancho y su texto alineado. */
@media (min-width:700px){
  .alb-cont{max-width:640px; margin:0 auto;}
  .alb-hero-txt, .alb-sp-hero-txt{left:max(20px, calc(50% - 300px)); right:max(16px, calc(50% - 300px));}
  .alb-volver{left:max(14px, calc(50% - 306px));}
  .alb-hero{height:240px;} .alb-sp-hero{height:260px;}
}
html[data-motion="reducido"] .alb-hoja{animation:none;}
html[data-motion="reducido"] .alb-sp img, html[data-motion="reducido"] .alb-foto img{transition:none;}
@media (prefers-reduced-motion: reduce){ .alb-hoja{animation:none;} .alb-sp img, .alb-foto img{transition:none;} }

/* =====================================================================
   FICHA DE GRUPO de Mi diario (01/10/2026, Jon) -- clFichaHTML en app.js
   Sustituye al anillo de rareza (.fc-anillo), que se confundía con un pin
   suelto. Va aquí y no en app.css: leaflet.css pone z-index:200 a TODO svg
   dentro del mapa (.leaflet-map-pane svg), también a los de un divIcon, y
   sin la regla de abajo la estrella y la pokéball quedaban debajo del
   dibujo (bug real del prototipo, 01/10/2026).
   ===================================================================== */
.leaflet-map-pane .cl-grupo svg{z-index:auto;}
.cl-estrella{position:absolute; left:-4px; top:-4px; width:18px; height:18px; border-radius:50%; z-index:3;
  background:var(--panel); border:1.5px solid var(--gold); color:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1);}
.cl-estrella svg{width:11px; height:11px;}
.cl-ficha{position:relative; width:88px; height:44px; cursor:pointer; display:flex; align-items:center; gap:7px; padding:4px 8px 4px 4px;
  background:color-mix(in srgb, var(--panel) 94%, transparent); border:1px solid var(--line); border-left:3px solid var(--cl-mc);
  border-radius:var(--r-md); box-shadow:var(--sh-2);}
.cl-ficha-foto{flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-sm); overflow:hidden; background:var(--panel2); display:flex; align-items:center; justify-content:center;}
.cl-ficha-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.cl-ficha-foto svg{width:60%; height:60%;}
.cl-ficha-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1;}
.cl-ficha-txt b{font-family:var(--display); font-weight:700; font-size:var(--fs-4); color:var(--text); font-variant-numeric:tabular-nums;}
.cl-ficha-txt small{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:3px;}
.cl-ficha-cap{display:inline-flex; align-items:center; gap:2px; color:var(--gold); font-weight:700;}
.cl-ficha-cap svg{width:9px; height:9px;}
.cl-ficha-barra{display:flex; height:4px; border-radius:2px; overflow:hidden; gap:1px; margin-top:2px; background:var(--panel2);}
.cl-ficha-barra i{display:block; height:100%; min-width:3px;}
.cl-ficha .cl-estrella{left:-7px; top:-7px;}


/* =====================================================================
   MI DIARIO POR PUEBLOS (01/10/2026, Jon) -- prefijo pbl-
   Aquí y no en app.css: las reglas de los panes (.leaflet-pbl*-pane) y del
   contorno tienen que ganar a leaflet.css. Solo tokens del :root, ningún
   color a pelo (CLAUDE.md §5.2), así que el tema claro y los acentos
   funcionan solos. Sin backdrop-filter: no necesita línea en el bloque SIN
   DESENFOQUES. El JS está en «MI DIARIO POR PUEBLOS» de js/app.js.
   ===================================================================== */
/* ---- Selector de vista en la cabecera de la hoja: Puntos | Pueblos ----
   Va en la cabecera y no encima del mapa: la cabecera se ve siempre (también
   con la hoja plegada) y encima del mapa ya están modos, subtítulo y chips;
   una cuarta fila tapaba media pantalla en un móvil de 360 px. */
.pbl-vista{display:flex; gap:2px; padding:2px; margin-left:auto; border-radius:var(--r-full);
  background:var(--panel2); border:1px solid var(--line); flex:0 0 auto;}
.pbl-vista-btn{display:inline-flex; align-items:center; gap:5px; min-height:26px; padding:0 10px;
  border:0; border-radius:var(--r-full); background:none; color:var(--muted); cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-1); font-weight:600; letter-spacing:.01em;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); touch-action:manipulation;}
.pbl-vista-btn svg{width:14px; height:14px; flex:0 0 auto;}
.pbl-vista-btn[aria-pressed="true"]{background:var(--teal); color:var(--on-teal); box-shadow:var(--sh-1);}
.pbl-vista-btn:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:var(--focus-offset);}
/* Fuera de Mi diario se esconde (atributo hidden): display:flex le ganaría. */
.pbl-vista[hidden]{display:none;}
.explo-sheet-head .explo-sheet-title{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* La cabecera crece 10 px con el selector; el asa cede esos píxeles para que
   la hoja plegada (60 px, ver colapsoPx) siga enseñando la cabecera entera. */
.mv-sheet .explo-sheet-handle{padding:7px 16px 7px;}
.mv-sheet .explo-sheet-grip{margin-bottom:7px;}

/* La atribución del mapa (OpenStreetMap, IGN...) iba abajo del todo y por
   encima de la hoja (los controles de Leaflet tienen z-index 1000 y la hoja
   650): tapaba la cabecera de la hoja plegada y se comía los toques del
   selector Puntos | Pueblos (visto en la prueba del 01/10/2026). Con hoja
   (Mi diario y En vivo) sube justo por encima de los 60 px que asoman, y
   queda POR DEBAJO de la hoja (640 < 650): al desplegarla, la hoja la tapa en
   vez de quedar ella encima de la lista. En el tour (modo cine) no hay hoja y
   vuelve abajo. */
.map-screen.con-hoja .leaflet-bottom{bottom:60px; z-index:640;}
body.mapa-cine .map-screen.con-hoja .leaflet-bottom{bottom:0;}

/* ---- Panes propios (z-index dentro del mapa, no de la app) ----
   200 mosaicos · 380 pueblos · 420 velo · 440 contorno del pueblo abierto ·
   600 marcadores de Leaflet (pines, fichas de grupo, etiquetas). */
.leaflet-pblZonas-pane{z-index:380;}
.leaflet-pblVelo-pane{z-index:420; pointer-events:none;}
.leaflet-pblFoco-pane{z-index:440; pointer-events:none;}
.leaflet-pblVelo-pane svg, .leaflet-pblFoco-pane svg{pointer-events:none;}

/* El contorno del pueblo abierto se dibuja trazo a trazo (una vez, al
   abrirlo) y lleva un halo del acento: es el "momento" de la función. */
.pbl-foco{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 70%, transparent));
  stroke-dasharray:var(--pbl-len,0) var(--pbl-len,0); stroke-dashoffset:0;
  animation:pblTraza 1.1s var(--ease) both;}
@keyframes pblTraza{from{stroke-dashoffset:var(--pbl-len,0);} to{stroke-dashoffset:0;}}
.pbl-foco-relleno{animation:pblVeloIn var(--dur-3) var(--ease) both;}
@keyframes pblVeloIn{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){ .pbl-foco,.pbl-foco-relleno{animation:none;} }
html[data-motion="reducido"] .pbl-foco, html[data-motion="reducido"] .pbl-foco-relleno{animation:none;}

/* ---- Etiqueta de pueblo / provincia / comunidad sobre el mapa ----
   Nombre en la display + cifra en mono, como el resto de cifras del mapa.
   --pbl-c es el color del nivel (teal pueblo, cielo provincia, lila
   comunidad): lo pone el JS en cada etiqueta. */
/* --cl-base: la misma variable que usa clEntra (el "idioma" de los
   clústeres, ver .cl-grupo): así la etiqueta entra con la misma animación
   que un anillo y sin perder su centrado. */
.pbl-etq{position:absolute; --cl-base:translate(-50%,-50%); transform:var(--cl-base); display:inline-flex; align-items:center; gap:6px;
  padding:3px 4px 3px 9px; border-radius:var(--r-full); white-space:nowrap; cursor:pointer;
  --pbl-c:var(--teal);
  background:color-mix(in srgb, var(--panel) 90%, transparent); border:1px solid color-mix(in srgb, var(--pbl-c) 45%, var(--line));
  box-shadow:var(--sh-2); color:var(--text); font-family:var(--display); font-weight:600; font-size:var(--fs-2);
  line-height:1.1; animation:clEntra var(--dur-2) var(--ease) backwards; animation-delay:var(--pbl-retraso,0ms);
  transition:transform var(--dur-0) var(--ease);}
.pbl-etq:active{transform:var(--cl-base) scale(.95);}
.pbl-etq svg{width:12px; height:12px; flex:0 0 auto;}
.pbl-etq .pbl-casa{color:var(--teal);}
.pbl-etq .pbl-corona{color:var(--gold);}
.pbl-etq-n{font-family:var(--mono); font-weight:700; font-size:var(--fs-1); min-width:20px; text-align:center;
  padding:2px 6px; border-radius:var(--r-full); background:var(--pbl-c); color:var(--on-teal);}
/* Sin sitio para el nombre: solo la cifra, en un punto. */
.pbl-etq.mini{padding:0; gap:0; border:2px solid var(--panel); background:var(--pbl-c); box-shadow:var(--sh-1);}
.pbl-etq.mini .pbl-etq-n{padding:2px 5px; min-width:22px; background:none;}
/* Provincia y comunidad: más grande y con su recuento de pueblos. */
.pbl-etq.prov{flex-direction:column; align-items:flex-start; gap:2px; padding:6px 10px 6px 11px; border-radius:var(--r-md);
  border-color:color-mix(in srgb, var(--pbl-c) 60%, var(--line));}
.pbl-etq.prov .pbl-etq-fila{display:flex; align-items:center; gap:7px;}
.pbl-etq.prov small{font-family:var(--mono); font-weight:500; font-size:var(--fs-0); color:var(--muted); letter-spacing:.04em;}
@media (prefers-reduced-motion: reduce){ .pbl-etq{animation:none;} }

/* Leyenda de la escala de color, abajo a la izquierda, solo en Pueblos. */
.pbl-leyenda{position:absolute; left:10px; bottom:96px; z-index:640; display:flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:var(--r-full); background:color-mix(in srgb, var(--panel) 86%, transparent);
  border:1px solid var(--line); box-shadow:var(--sh-1); font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);
  pointer-events:none;}
.pbl-leyenda i{display:block; width:13px; height:10px; border-radius:3px; background:var(--teal); border:1px solid var(--teal);}
.pbl-leyenda b{margin-right:2px;}
.pbl-leyenda b{font-weight:600; color:var(--text);}

/* Popup de un pueblo "por estrenar" (sin registros tuyos). */
.pbl-pop{min-width:190px; max-width:230px; line-height:var(--lh);}
.pbl-pop-ceja{display:inline-block; font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border:1px dashed var(--line); border-radius:var(--r-full); padding:2px 8px; margin-bottom:6px;}
.pbl-pop-nombre{font-family:var(--display); font-weight:700; font-size:var(--fs-4); color:var(--text);}
.pbl-pop-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-bottom:8px;}
.pbl-pop-dato{font-family:var(--mono); font-size:var(--fs-1); color:var(--text); display:flex; gap:6px; align-items:baseline; margin-top:3px;}
.pbl-pop-dato b{font-family:var(--display); font-size:var(--fs-3); color:var(--teal-on-panel); min-width:28px;}
.pbl-pop-txt{font-size:var(--fs-1); color:var(--muted); margin:8px 0 0;}

/* ---- Hoja: lista de pueblos ---- */
.pbl-resumen{display:flex; gap:8px; margin:2px 0 12px;}
.pbl-resumen > div{flex:1 1 0; min-width:0; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px 10px; display:flex; flex-direction:column; gap:1px;}
.pbl-resumen b{font-family:var(--display); font-weight:700; font-size:var(--fs-5); line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums;}
.pbl-resumen span{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.pbl-herr{display:flex; gap:8px; align-items:center; margin:0 0 6px;}
.pbl-buscar{flex:1 1 auto; min-width:0; min-height:36px; padding:0 12px 0 32px; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--panel2) no-repeat 11px 50%/14px; color:var(--text);
  font-family:var(--mono); font-size:var(--fs-2);}
.pbl-buscar::placeholder{color:var(--muted);}
.pbl-buscar:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}
.pbl-buscar-wrap{position:relative; flex:1 1 auto; min-width:0; display:flex;}
.pbl-buscar-wrap svg{position:absolute; left:11px; top:50%; width:14px; height:14px; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
.pbl-orden{display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; margin:0 0 4px; padding:2px 0 6px;}
.pbl-orden::-webkit-scrollbar{display:none;}
.pbl-orden .mv-chip{box-shadow:none;}
.pbl-fila{display:flex; align-items:center; gap:11px; width:100%; padding:10px 2px; border:0; border-bottom:1px solid var(--line);
  background:none; text-align:left; cursor:pointer; color:inherit; font:inherit; transition:opacity var(--dur-0);}
.pbl-fila:last-child{border-bottom:none;}
.pbl-fila:active{opacity:.7;}
.pbl-fila:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:-2px; border-radius:var(--r-sm);}
.pbl-fila.mv-anim{animation:mvRowEnter var(--dur-1) var(--ease) backwards;}
.pbl-sil{flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-md); background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pbl-sil svg{width:38px; height:38px; overflow:visible;}
.pbl-sil path{fill:color-mix(in srgb, var(--teal) 26%, transparent); stroke:var(--teal); stroke-width:1.3; stroke-linejoin:round;}
.pbl-fila-cuerpo{flex:1 1 auto; min-width:0;}
.pbl-fila-nombre{display:flex; align-items:center; gap:6px; font-family:var(--display); font-weight:600; font-size:var(--fs-3);
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pbl-fila-nombre span{overflow:hidden; text-overflow:ellipsis;}
.pbl-fila-nombre svg{width:13px; height:13px; flex:0 0 auto; color:var(--teal);}
.pbl-fila-sub{display:block; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pbl-fila-sub + .pbl-fila-sub{margin-top:1px; font-size:var(--fs-0); letter-spacing:.02em;}
.pbl-fila-sub b{color:var(--text); font-weight:600;}
.pbl-fila-sub .cap{color:var(--gold); font-weight:700;}
.pbl-tag{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border-radius:var(--r-full);
  color:var(--teal-on-panel); background:color-mix(in srgb, var(--teal) 14%, transparent); border:1px solid color-mix(in srgb, var(--teal) 40%, transparent);}

/* Puesto en el pueblo: medalla para el podio, cifra neutra para el resto. */
.pbl-puesto{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:44px;}
.pbl-puesto-n{font-family:var(--mono); font-weight:700; font-size:var(--fs-2); color:var(--text); padding:2px 8px; border-radius:var(--r-full);
  background:var(--panel2); border:1px solid var(--line); font-variant-numeric:tabular-nums;}
.pbl-puesto small{font-family:var(--mono); font-size:var(--fs-0); color:var(--muted);}
.pbl-puesto-n.m1{background:var(--gold); border-color:var(--gold); color:var(--on-gold);}
.pbl-puesto-n.m2{background:color-mix(in srgb, var(--plata) 30%, var(--panel2)); border-color:var(--plata); color:var(--text);}
.pbl-puesto-n.m3{background:color-mix(in srgb, var(--met-bronce-1) 26%, var(--panel2)); border-color:var(--met-bronce-1); color:var(--text);}

/* ---- Hoja: ficha de un pueblo ---- */
.pbl-cab{display:flex; align-items:center; gap:10px; margin:0 0 12px;}
.pbl-cab .pbl-sil{width:48px; height:48px;}
.pbl-cab-txt{flex:1 1 auto; min-width:0;}
.pbl-cab-txt p{margin:0; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pbl-cab-txt p:first-child{font-size:var(--fs-2); color:var(--text);}
.pbl-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin:0 0 8px;}
.pbl-kpi{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:8px 6px 7px; text-align:center; min-width:0;}
.pbl-kpi b{display:block; font-family:var(--display); font-weight:700; font-size:var(--fs-5); line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums;}
.pbl-kpi span{display:flex; align-items:center; justify-content:center; gap:3px; margin-top:2px; font-family:var(--mono); font-size:var(--fs-0);
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
.pbl-kpi span svg{width:11px; height:11px; flex:0 0 auto;}
.pbl-kpi.cap b{color:var(--gold);}
.pbl-kpi-ico{display:flex; width:11px; height:11px; font-style:normal;}
.pbl-linea{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin:0 0 14px;}
.pbl-linea b{color:var(--text); font-weight:600;}

/* Tarjeta del ranking */
.pbl-rank{border:1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); border-radius:var(--r-lg); padding:12px 12px 10px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, var(--panel2)), var(--panel2) 55%); margin:0 0 14px;}
.pbl-rank-cab{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pbl-rank-tit{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0;}
.pbl-seg{display:flex; gap:2px; padding:2px; border-radius:var(--r-full); background:color-mix(in srgb, var(--panel) 70%, transparent); border:1px solid var(--line);}
.pbl-seg button{border:0; background:none; border-radius:var(--r-full); padding:4px 9px; min-height:26px; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-0); font-weight:600; letter-spacing:.03em; color:var(--muted);}
.pbl-seg button[aria-pressed="true"]{background:var(--panel); color:var(--text); box-shadow:var(--sh-1);}
.pbl-seg button:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:1px;}
.pbl-rank-yo{display:flex; align-items:center; gap:12px; margin:10px 0 8px;}
.pbl-rank-num{font-family:var(--display); font-weight:700; font-size:40px; line-height:.95; color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.pbl-rank-num small{font-size:var(--fs-5); margin-right:1px; opacity:.8;}
.pbl-rank-txt{min-width:0;}
.pbl-rank-txt p{margin:0; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.45;}
.pbl-rank-txt p:first-child{font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.pbl-rank-txt .empuje{color:var(--teal-on-panel); font-weight:600;}
.pbl-rank-filtros{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 6px;}
.pbl-rank-lista{display:flex; flex-direction:column; margin:4px 0 0;}
.pbl-rank-fila{display:flex; align-items:center; gap:9px; padding:6px 4px; border-radius:var(--r-sm); font-family:var(--mono); font-size:var(--fs-2);}
.pbl-rank-fila + .pbl-rank-fila{border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);}
.pbl-rank-pos{flex:0 0 auto; width:28px; text-align:right; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums;}
.pbl-rank-av{flex:0 0 auto; width:24px; height:24px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:var(--fs-1); color:var(--on-teal); background:var(--teal);}
.pbl-rank-alias{flex:1 1 auto; min-width:0; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pbl-rank-val{flex:0 0 auto; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums;}
.pbl-rank-av.yo{background:var(--gold); color:var(--on-gold);}
.pbl-rank-fila.p1 .pbl-rank-pos{color:var(--gold);}
.pbl-rank-fila.yo{background:color-mix(in srgb, var(--teal) 14%, transparent); border-top-color:transparent;}
.pbl-rank-fila.yo + .pbl-rank-fila{border-top-color:transparent;}
.pbl-rank-fila.yo .pbl-rank-alias{font-weight:700; color:var(--teal-on-panel);}
.pbl-rank-fila.yo.oculto{background:none; outline:1px dashed color-mix(in srgb, var(--teal) 60%, transparent); outline-offset:-1px;}
.pbl-rank-hueco{text-align:center; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.3em; padding:2px 0;}
.pbl-rank-pie{display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);}
.pbl-rank-pie p{flex:1 1 auto; margin:0; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.45;}
.pbl-rank-pie p b{color:var(--text); font-weight:600;}
/* Interruptor: mismo dibujo que .simple-switch de Ajustes. */
.pbl-switch{position:relative; flex:0 0 auto; width:44px; height:26px; border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--panel); cursor:pointer; padding:0; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);}
.pbl-switch::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--muted);
  transition:transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);}
.pbl-switch[aria-checked="true"]{background:var(--teal); border-color:var(--teal);}
.pbl-switch[aria-checked="true"]::after{transform:translateX(18px); background:var(--on-teal);}
.pbl-switch:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:2px;}

/* Especies del pueblo */
.pbl-esp{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line);}
.pbl-esp:last-child{border-bottom:none;}
.pbl-esp-foto{flex:0 0 auto; width:38px; height:38px; border-radius:50%; overflow:hidden; background:var(--panel2);
  box-shadow:0 0 0 2px var(--pbl-rz, var(--line)); display:flex; align-items:center; justify-content:center;}
.pbl-esp-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.pbl-esp-cuerpo{flex:1 1 auto; min-width:0;}
.pbl-esp-nombre{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-2); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pbl-esp-sub{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); margin-top:1px; display:flex; gap:6px; align-items:center; white-space:nowrap; overflow:hidden;}
.pbl-esp-sub i{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--pbl-rz, var(--muted));}
.pbl-esp-n{flex:0 0 auto; font-family:var(--mono); font-weight:700; font-size:var(--fs-2); color:var(--text); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:5px;}
.pbl-esp-n span{display:flex; width:14px; height:14px;}
.pbl-esp-n span svg{width:14px; height:14px;}
.pbl-esp-n em{font-style:normal; font-weight:400; color:var(--muted); font-size:var(--fs-1);}

/* Lo que la comunidad ha visto aquí y tú no */
.pbl-falta{margin:14px 0 4px; padding:12px; border-radius:var(--r-lg); border:1px dashed color-mix(in srgb, var(--teal) 50%, var(--line));
  background:color-mix(in srgb, var(--teal) 6%, transparent);}
.pbl-falta-tit{margin:0 0 2px; font-family:var(--display); font-weight:600; font-size:var(--fs-3); color:var(--text);}
.pbl-falta-txt{margin:0; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted); line-height:1.45;}
.pbl-falta .mv-viaje-tiras{margin-top:10px;}
.pbl-falta-btn{margin-top:10px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--teal); background:none; color:var(--teal-on-panel);
  border-radius:var(--r-full); padding:7px 13px; min-height:34px; font-family:var(--mono); font-size:var(--fs-1); font-weight:600; cursor:pointer;}
.pbl-falta-lista{margin-top:8px;}
.pbl-falta-cargando{margin:14px 0 4px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
/* Una especie que te falta es un botón (abre su ficha). */
.pbl-esp-btn{width:100%; border:0; border-bottom:1px solid var(--line); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;}
.pbl-esp-btn:last-child{border-bottom:none;}
.pbl-esp-btn:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:-2px; border-radius:var(--r-sm);}
.pbl-nueva{font-family:var(--mono); font-size:var(--fs-0); letter-spacing:.06em; text-transform:uppercase; color:var(--teal-on-panel);}
.pbl-pie-fuente{margin:16px 0 2px; font-family:var(--mono); font-size:var(--fs-0); color:var(--muted); line-height:1.5;}

/* =====================================================================
   ÁLBUM COMO PESTAÑA (07/10/2026, Jon, prototipo-album-en-barra.html)
   #ovAlbum sigue siendo el mismo .overlay, pero va ENTRE la cabecera de la
   app y la barra inferior: z-index 43, con la barra en 45 y la cabecera en
   44. Así cualquier hoja que se abra encima (ficha, visor, diálogos) sigue
   tapándolo todo, como antes. Sin su barra con flecha atrás (.alb-top): la
   portada sube hasta arriba y la cabecera de la app queda encima, con un
   degradado oscuro y la marca en blanco.
   ===================================================================== */
#ovAlbum.alb-tab{z-index:43;}
/* 07/10/2026, la misma tarde: sin portada, la cabecera de la app va sobre el
   fondo del álbum (ya no hace falta degradado ni marca en blanco) y el
   contenido empieza justo debajo de ella. */
.alb-tab .alb-hoja{padding-top:calc(var(--sat) + 60px); padding-bottom:calc(96px + var(--sab));}
body.alb-tab-on .head.topbar{position:fixed; top:0; left:0; right:0; z-index:44; width:100%; max-width:760px; margin:0 auto;
  background:linear-gradient(180deg, var(--bg2) 72%, color-mix(in srgb,var(--bg2) 0%,transparent)) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}

/* ---- Álbum · diseño elegido en prototipo-album-pestana.html (07/10/2026) ----
   Tres cifras arriba, pestañas con lupa, cada especie como cromo (3
   columnas, nombre encima y franja de rareza), Recientes como la galería
   del móvil (por meses, fotos juntas) y Por lugar con el mapa de tus sitios
   y una fila por lugar. Todo con tokens: lo que es color de rareza llega en
   --rz desde el JS (RAREZA_INFO). */
.alb-cifras3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:2px 0 14px;}
.alb-cifras3 > div{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 6px; text-align:center; box-shadow:var(--sh-1);}
.alb-cifras3 b{display:block; font-family:var(--display); font-weight:700; font-size:var(--fs-6); line-height:1; color:var(--text);}
.alb-cifras3 small{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.alb-org{display:flex; align-items:center; gap:8px;}
.alb-org .alb-pestanas{flex:1 1 auto; min-width:0;}
.alb-lupa{flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text); display:grid; place-items:center; cursor:pointer; touch-action:manipulation;}
.alb-lupa svg{width:18px; height:18px;}
.alb-lupa.on{background:var(--teal); border-color:var(--teal); color:var(--on-teal);}
.alb-lupa:focus-visible, .alb-cromo:focus-visible, .alb-lug:focus-visible, .alb-volver-chip:focus-visible, .alb-lug-ave:focus-visible{outline:var(--focus-w) solid var(--focus-color); outline-offset:2px;}
.alb-org + .alb-buscador{margin-top:12px;}
#albumResultados{margin-top:14px;}

/* Por especie: cromos */
.alb-rejilla.alb-rej-esp{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 6px;}
.alb-trozos.alb-rej-esp{gap:10px;}
.alb-cromo{position:relative; display:block; min-width:0; aspect-ratio:4/5; padding:0; border:0; border-radius:var(--r-lg); overflow:hidden; background:var(--panel2); box-shadow:var(--sh-2); cursor:pointer; text-align:left; touch-action:manipulation;}
.alb-cromo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-2) var(--ease);}
.alb-cromo:active img{transform:scale(1.04);}
.alb-cromo::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, var(--velo-pie), color-mix(in srgb,var(--velo-pie) 0%,transparent) 52%); pointer-events:none;}
.alb-cromo-nom{position:absolute; left:7px; right:7px; bottom:10px; z-index:2; color:var(--sobre-foto); font-family:var(--display); font-weight:600; font-size:13px; line-height:1.12; text-wrap:balance; overflow-wrap:anywhere;}
.alb-cromo-raya{position:absolute; left:0; right:0; bottom:0; z-index:3; height:5px; background:var(--rz);}
.alb-cuenta{position:absolute; top:6px; right:6px; z-index:2; display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 7px; border-radius:var(--r-full); background:var(--velo-pie); color:var(--sobre-foto); font-family:var(--mono); font-size:var(--fs-1); font-weight:700;}
.alb-cuenta svg{width:11px; height:11px;}

/* Selector de fotos (Aleteo y Foto del mes) por especie, con las tarjetas del Álbum (28/10/2026) */
#selZona{max-height:56vh; overflow-y:auto; overscroll-behavior:contain; padding:2px 2px 6px;}
#selZona .historia-picker{max-height:none; overflow:visible; padding-top:0;}
.historia-picker.sel-cromos{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 6px;}
#selZona .alb-volver-chip{margin:0 0 8px;}
.sel-esp-tit{display:flex; flex-direction:column; gap:2px; margin:0 0 10px; color:var(--muted); font-family:var(--mono); font-size:var(--fs-1);}
.sel-esp-tit b{color:var(--text); font-family:var(--display); font-size:20px; font-weight:700; line-height:1.1;}
.sel-cromo:disabled{opacity:.5; cursor:default;}
.sel-cromo.publicando:disabled{opacity:1; outline:3px solid var(--gold); outline-offset:-3px;}
.sel-cromo.publicando img{filter:brightness(.5);}
.sel-cromo.publicando::before{content:''; position:absolute; left:50%; top:46%; z-index:4; width:28px; height:28px; margin:-14px 0 0 -14px; border:3px solid color-mix(in srgb, var(--sobre-foto) 35%, transparent); border-top-color:var(--sobre-foto); border-radius:50%; animation:historiaPublicandoGiro .8s linear infinite;}
@media (prefers-reduced-motion:reduce){ .sel-cromo.publicando::before{animation:none;} }


/* Galería: Recientes y las fotos de una especie o un lugar, juntas y de
   borde a borde, como en el móvil */
.alb-trozos.alb-gal{gap:2px; margin:0 -16px;}
.alb-rejilla.alb-gal{grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;}
.alb-mini{border-radius:0; box-shadow:none;}
.alb-mes{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:18px 0 8px;}
.alb-mes:first-child{margin-top:4px;}
.alb-mes b{font-family:var(--display); font-weight:600; font-size:var(--fs-4);}
.alb-mes span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
@media (min-width:700px){ .alb-trozos.alb-gal{margin:0;} .alb-mini{border-radius:var(--r-sm);} }

/* Una especie o un lugar por dentro */
.alb-dentro{padding-top:6px;}
.alb-volver-chip{display:inline-flex; align-items:center; gap:4px; min-height:34px; padding:5px 12px 5px 8px; border:1px solid var(--line); border-radius:var(--r-full); background:var(--panel); color:var(--text); font-family:var(--mono); font-size:var(--fs-1); font-weight:700; cursor:pointer;}
.alb-volver-chip svg{width:15px; height:15px;}
.alb-dentro-tit{margin:12px 0 2px; font-family:var(--display); font-weight:700; font-size:var(--fs-6); line-height:1.1;}
.alb-dentro-sub{margin:0 0 14px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.alb-rz{color:var(--rz); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.alb-dom{color:var(--gold); font-weight:700;}
.alb-lug-aves{display:flex; gap:12px; overflow-x:auto; margin:0 -16px 14px; padding:2px 16px 4px; scrollbar-width:none;}
.alb-lug-aves::-webkit-scrollbar{display:none;}
.alb-lug-ave{flex:0 0 auto; width:66px; padding:0; border:0; background:none; color:var(--text); text-align:center; cursor:pointer;}
.alb-lug-ave img{display:block; width:56px; height:56px; margin:0 auto; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--rz);}
.alb-lug-ave span{display:block; margin-top:6px; font-family:var(--display); font-size:var(--fs-1); line-height:1.15;}

/* Por lugar: el mapa de tus sitios y una fila por lugar */
.alb-mapa{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); padding:12px 10px 8px; margin-bottom:10px; box-shadow:var(--sh-1);}
.alb-mapa-tit{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:0 4px 6px;}
.alb-mapa-tit b{font-family:var(--display); font-weight:600; font-size:var(--fs-4);}
.alb-mapa-tit span{font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.alb-mapa-svg{display:block; width:100%; height:auto; max-height:340px;}
.alb-pv{fill:var(--panel2); stroke:var(--line); stroke-width:.6;}
.alb-pv.con{fill:color-mix(in srgb,var(--teal) 22%,var(--panel2));}
.alb-pv.sel{fill:color-mix(in srgb,var(--teal) 45%,var(--panel2));}
.alb-mapa-vec{fill:none; stroke:var(--line); stroke-width:.5; opacity:.6;}
.alb-globo{cursor:pointer;}
.alb-globo circle{fill:var(--teal); stroke:var(--panel); stroke-width:2;}
.alb-globo.sel circle{fill:var(--gold);}
.alb-globo text{fill:var(--on-teal); font-family:var(--mono); font-size:11px; font-weight:700; text-anchor:middle; dominant-baseline:central; pointer-events:none;}
.alb-globo:focus-visible{outline:none;}
.alb-globo:focus-visible circle{stroke:var(--focus-color); stroke-width:3;}
.alb-prov-chip{display:inline-flex; align-items:center; gap:6px; margin:2px 0 4px; padding:6px 12px; border:0; border-radius:var(--r-full); background:var(--teal); color:var(--on-teal); font-family:var(--mono); font-size:var(--fs-1); font-weight:700; cursor:pointer;}
.alb-lug{display:flex; align-items:center; gap:12px; width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--text); text-align:left; cursor:pointer; touch-action:manipulation;}
.alb-lug:last-child{border-bottom:0;}
.alb-lug > img{flex:0 0 auto; width:64px; height:64px; border-radius:var(--r-md); object-fit:cover; background:var(--panel2);}
.alb-lug-txt{flex:1 1 auto; min-width:0;}
.alb-lug-txt b{display:block; font-family:var(--display); font-weight:600; font-size:var(--fs-4); line-height:1.15;}
.alb-lug-txt small{display:block; margin-top:2px; font-family:var(--mono); font-size:var(--fs-1); color:var(--muted);}
.alb-caras{display:flex; align-items:center; flex:0 0 auto;}
.alb-caras span{width:24px; height:24px; margin-left:-7px; border-radius:50%; overflow:hidden; border:2px solid var(--bg2); background:var(--panel2); display:grid; place-items:center; font-family:var(--mono); font-size:9px; font-weight:700; color:var(--text);}
.alb-caras span:first-child{margin-left:0;}
.alb-caras img{width:100%; height:100%; object-fit:cover; display:block;}
.alb-lug-ir{color:var(--muted); font-size:20px; margin-left:2px;}
@media (prefers-reduced-motion:reduce){ .alb-cromo img{transition:none;} }
html[data-motion="reducido"] .alb-cromo img{transition:none;}

/* =====================================================================
   ATLAS · BUSCAR POR ESPECIE (BETA, 26/10/2026)
   Adaptado de prototipo-buscador-espana/espana.css (04-26/10/2026). Todo
   prefijo atl- para no chocar con .hoja/.tarjeta/.aviso/.chip/.seg/.campo/
   .ficha/.boton-*, que ya existen en la app con otro significado. Usa los
   tokens de siempre (--teal, --gold, --panel, --line, --text, --muted,
   --display, --mono, --fs-N, --r-N, --sh-N, --dur-N, --ease) y --sitio-2/3/4
   (js/app.css).
   Clústeres: reutiliza .cl-grupo/.cl-denso/.cl-n de la app, sin copiarlas.
   ===================================================================== */
.atl-overlay{position:fixed;inset:0;z-index:var(--z-hoja);background:var(--bg2);display:flex;flex-direction:column;overflow:hidden}
.atl-pantalla{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;overflow:clip}
.atl-mapa{position:absolute;inset:0;background:var(--panel2)}
.atl-mapa .leaflet-container{background:var(--panel2);font-family:var(--sans,system-ui)}
.atl-mapa .leaflet-control-attribution{background:color-mix(in srgb,var(--panel) 80%,transparent)!important;color:var(--muted)!important;font-size:9px!important;line-height:1.4}
.atl-mapa .leaflet-control-attribution a{color:var(--teal)!important}
.atl-mapa .leaflet-bottom{bottom:var(--atl-pie,0px);z-index:640;transition:bottom var(--dur-2) var(--ease)}
/* Controles del mapa (ubicación, zoom, capas): debajo del buscador y por debajo de su lista de resultados, no encima. */
.atl-mapa .leaflet-top{top:88px;z-index:600}
.atl-tierra{fill:var(--panel2);fill-opacity:1;stroke:var(--line);stroke-opacity:1;stroke-width:1}
.atl-sin-teselas{background:var(--panel2)}

/* Cabecera: volver + BETA + cerrar */
.atl-cab{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(var(--sat,0px) + 10px) 14px 10px;background:var(--panel);box-shadow:var(--sh-1)}
.atl-cab-tit{display:flex;align-items:center;gap:8px;min-width:0}
.atl-cab-tit strong{font:600 var(--fs-4) var(--display);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atl-beta{flex:0 0 auto;font:700 9px var(--mono);letter-spacing:1px;color:var(--on-gold);background:var(--gold);border-radius:var(--r-full);padding:2px 7px}

/* Botón de entrada en Explorar (Mapa → Explorar) */
.atl-entrada{pointer-events:auto;display:flex;align-items:center;gap:8px;margin-top:4px;padding:10px 16px 10px 13px;border-radius:var(--r-full);border:1px solid color-mix(in srgb,var(--teal) 40%,var(--line));background:var(--panel);color:var(--text);font:600 var(--fs-3) var(--display);box-shadow:var(--sh-3);white-space:nowrap}
.atl-entrada svg{width:18px;height:18px;color:var(--teal)}
.atl-entrada .atl-beta{margin-left:2px}
.atl-entrada:active{transform:scale(.97)}

/* Controles del mapa (misma piel que .gmap-controls/.gmap-ctrl-btn) */
.atl-columna-controles{position:absolute;left:12px;top:14px;z-index:500;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.atl-boton-capas{width:40px;height:40px;border-radius:var(--r-lg);border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:var(--sh-3);display:grid;place-items:center;color:var(--text)}
.atl-boton-capas svg{width:19px;height:19px}
.atl-boton-capas[aria-expanded="true"]{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.atl-panel-capas{position:absolute;left:calc(100% + 8px);top:0;width:220px;padding:10px 10px 8px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-4);z-index:10}
.atl-panel-capas-tit{display:block;font:600 var(--fs-0) var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 2px 8px}
.atl-opciones-capas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.atl-opciones-capas button{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;padding:0;font:600 var(--fs-1) var(--display);color:var(--muted)}
.atl-opciones-capas button[aria-pressed="true"]{color:var(--text)}
.atl-miniatura{display:block;width:100%;aspect-ratio:1;border-radius:var(--r-md);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line)}
.atl-opciones-capas button[aria-pressed="true"] .atl-miniatura{border-color:var(--teal)}
.atl-mini-mapa{background:linear-gradient(160deg,var(--panel2) 0 38%,var(--line) 38%)}
.atl-mini-satelite{background:radial-gradient(circle at 70% 70%,var(--atl-mini-sat-1) 0 18%,transparent 19%),linear-gradient(160deg,var(--atl-mini-sat-2) 0 36%,var(--atl-mini-sat-3) 36% 60%,var(--atl-mini-sat-4) 60%)}
.atl-mini-relieve{background:repeating-radial-gradient(circle at 65% 60%,transparent 0 5px,var(--atl-mini-rel-tex) 5px 6px),linear-gradient(160deg,var(--atl-mini-rel-1) 0 34%,var(--atl-mini-rel-2) 34%)}
.atl-nota-capas{margin:8px 2px 0;font-size:9.5px;line-height:1.4;color:var(--muted)}
.atl-fondo-imagen .atl-tierra{display:none}
.atl-fondo-imagen .atl-punto-sitio{filter:drop-shadow(0 1px 2px var(--atl-sombra))}

/* Buscador: campo + lista de especies */
.atl-busqueda{position:absolute;top:14px;left:12px;right:12px;z-index:700;display:flex;flex-direction:column;gap:6px}
.atl-busqueda-fila{display:flex;align-items:center;gap:8px}
.atl-campo{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 13px;border-radius:var(--r-full);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-3)}
.atl-campo:focus-within{border-color:var(--teal)}
.atl-campo svg{width:18px;height:18px;color:var(--teal)}
.atl-campo input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;font-size:16px;color:var(--text)}
.atl-campo input::placeholder{color:var(--muted)}
.atl-campo input::-webkit-search-cancel-button{display:none}
.atl-campo .atl-limpiar{width:32px;height:32px;border:0;background:none;border-radius:50%;color:var(--muted);font-size:20px;line-height:1}
.atl-boton-icono{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;color:var(--text);flex:0 0 auto}
.atl-boton-icono svg{width:18px;height:18px}
.atl-busqueda .atl-boton-icono{width:46px;height:46px;box-shadow:var(--sh-3);position:relative}
.atl-insignia-filtros{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-full);background:var(--gold);color:var(--on-gold);font:700 9px/16px var(--mono);border:1.5px solid var(--panel)}
.atl-estado-busqueda{align-self:flex-start;margin-left:54px;max-width:calc(100% - 66px);font:var(--fs-1) var(--mono);color:var(--sobre-foto);text-shadow:0 1px 5px var(--atl-sombra);background:none;border:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atl-lista-especies{position:absolute;left:12px;right:12px;top:72px;z-index:699;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);max-height:min(440px,62vh);overflow-y:auto;overscroll-behavior:contain;padding:6px}
.atl-lista-especies[hidden]{display:none}
.atl-lista-especies .atl-pista{padding:8px 10px 4px;font:600 var(--fs-0) var(--mono);letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.atl-fila-especie{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;border:0;background:none;text-align:left;padding:10px;border-radius:var(--r-md)}
.atl-fila-especie:hover,.atl-fila-especie[aria-selected="true"]{background:var(--panel2)}
.atl-fila-especie strong{display:block;font:600 var(--fs-3) var(--display)}
.atl-fila-especie small{display:block;color:var(--muted);font-size:var(--fs-1)}
.atl-fila-especie em{font-style:italic}
.atl-fila-especie .atl-num{font:var(--fs-1) var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
.atl-fila-especie .atl-num.cero{opacity:.6}
.atl-chips-rapidos{display:flex;flex-wrap:wrap;gap:6px;padding:4px 6px 8px}
.atl-chip{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-full);padding:7px 12px;font:600 var(--fs-2) var(--display);color:var(--text)}
.atl-chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.atl-vacio-especies{padding:14px 10px;color:var(--muted);font-size:var(--fs-2)}

/* Sitios en el mapa: anillo hueco = 1 día, relleno --sitio-2/3/4 = más días */
.atl-punto-sitio{stroke:var(--panel);stroke-width:2;fill-opacity:1;filter:drop-shadow(0 1px 1.5px var(--atl-sombra))}
.atl-punto-sitio.t1{fill:var(--panel);stroke:var(--sitio-3);stroke-width:2.4}
.atl-punto-sitio.t2{fill:var(--sitio-2)}
.atl-punto-sitio.t3{fill:var(--sitio-3)}
.atl-punto-sitio.t4{fill:var(--sitio-4)}
.atl-punto-sitio.destacado{fill:var(--gold);stroke:var(--panel);stroke-width:2.5}
.atl-punto-sitio.t1.destacado{fill:var(--panel);stroke:var(--gold);stroke-width:3.2}
.atl-halo-destacado{fill:var(--gold);fill-opacity:.22;stroke:var(--gold);stroke-opacity:.45;stroke-width:1}
.atl-punto-sitio.seleccionado{stroke-width:3.5}
/* Grupos: idioma común .cl-grupo/.cl-denso/.cl-n de la app (ya definidas arriba). */
.atl-grupo-sitios{display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--panel) 94%,transparent);border:2.5px solid var(--cl-mc,var(--teal));box-shadow:var(--sh-2);cursor:pointer}
@media (hover:hover){.atl-grupo-sitios{transition:filter var(--dur-1) var(--ease)}.atl-grupo-sitios:hover{filter:brightness(1.06)}}
.atl-area-sin-punto{fill:var(--muted);fill-opacity:.07;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 6}
.atl-area-sin-punto.barco{fill:var(--teal);stroke:var(--teal)}
.atl-area-sin-punto.activa{fill-opacity:.16;stroke:var(--text);stroke-width:2.5;stroke-dasharray:none}
.atl-radio-cerca{fill:none;stroke:var(--teal);stroke-width:1.6;stroke-dasharray:6 8;stroke-opacity:.8}
.atl-contorno-pueblo{fill:var(--teal);fill-opacity:.06;stroke:var(--sitio-4);stroke-width:2;stroke-dasharray:5 5}
.atl-anillo-seleccion{fill:none;stroke:var(--text);stroke-width:2;stroke-opacity:.6}
.atl-etiqueta-mapa{background:none;border:0;pointer-events:none}
.atl-etiqueta-mapa span{position:absolute;left:0;bottom:13px;transform:translateX(-50%);white-space:nowrap;padding:3px 8px;border-radius:var(--r-full);background:var(--text);color:var(--panel);font:600 10.5px/1.3 var(--display);box-shadow:var(--sh-2);pointer-events:none}
/* Pines de Explorar reutilizados en el buscador (mismo --poi que la app) */
.atl-poi-pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--poi);box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;border:2px solid var(--panel)}
.atl-poi-pin span{transform:rotate(45deg);display:flex;color:var(--sobre-foto)}
.atl-poi-pin svg{width:15px;height:15px}
.atl-user-pin{pointer-events:none;position:relative;width:18px;height:18px;border-radius:50%;background:var(--teal);border:3px solid var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 35%,transparent),var(--sh-1)}

/* Círculo de 20 km: fuera se apaga el mapa */
.atl-mascara-busqueda{fill:var(--velo-menu);fill-opacity:1;stroke:none}
.atl-borde-busqueda{fill:none;stroke:var(--teal);stroke-width:2;stroke-opacity:.75;stroke-dasharray:7 7}
.atl-buscar-zona{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:600;border:1px solid color-mix(in srgb,var(--teal) 45%,var(--line));border-radius:var(--r-full);background:var(--panel);color:var(--teal);padding:8px 14px;font:600 var(--fs-2) var(--display);box-shadow:var(--sh-3);white-space:nowrap}

/* Leyenda, pegada encima de la hoja */
.atl-leyenda{position:absolute;left:12px;bottom:calc(100% + 8px);display:flex;align-items:center;gap:10px;padding:5px 10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);box-shadow:var(--sh-2);font:500 10px/1 var(--mono);color:var(--muted);white-space:nowrap;pointer-events:none}
.atl-leyenda span{display:inline-flex;align-items:center;gap:3px}
.atl-ley-punto{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--panel);box-shadow:0 0 0 .5px var(--line)}
.atl-ley-punto.t1{background:var(--panel);box-shadow:0 0 0 1.6px var(--sitio-3);border:0;width:8px;height:8px;margin-right:2px}
.atl-ley-punto.t2{background:var(--sitio-2)} .atl-ley-punto.t3{background:var(--sitio-3)} .atl-ley-punto.t4{background:var(--sitio-4)}
.atl-ley-punto.oro{background:var(--gold)}

/* Hoja inferior: --z-hoja de siempre, nunca un z-index propio (CLAUDE.md §5.3) */
.atl-hoja{position:absolute;left:0;right:0;bottom:0;z-index:5;height:var(--atl-alto-hoja,64%);display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-4);transform:translateY(calc(100% - var(--atl-pico,74px)));transition:transform var(--dur-2) var(--ease)}
.atl-hoja.abierta{transform:translateY(0)}
.atl-hoja-asa{flex:0 0 auto;padding:8px 14px 10px;touch-action:none}
.atl-hoja-agarre{display:block;width:40px;height:5px;margin:0 auto 8px;border:0;padding:0;border-radius:var(--r-full);background:var(--muted);opacity:.3}
.atl-hoja-cabeza{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.atl-hoja-titulo{min-width:0;flex:1 1 auto;background:none;border:0;padding:0;text-align:left;color:var(--text)}
.atl-hoja-titulo strong{display:block;font:600 var(--fs-4)/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atl-hoja-titulo small{display:block;font:var(--fs-1) var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.atl-hoja-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 14px 18px}
.atl-boton-principal{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--r-full);background:var(--teal);color:var(--on-teal);padding:10px 15px;font:600 var(--fs-2) var(--display);box-shadow:var(--sh-2);white-space:nowrap}
.atl-boton-principal svg{width:16px;height:16px}
.atl-boton-secundario{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);color:var(--text);padding:10px 15px;font:600 var(--fs-2) var(--display)}
.atl-boton-texto{border:0;background:none;padding:0;color:var(--teal);font:600 var(--fs-2) var(--display);text-decoration:underline;text-underline-offset:3px}

/* Tarjetas de sugerencia (El más cercano / Donde más se ha visto / Para empezar) */
.atl-tarjetas{display:grid;gap:8px;margin-top:4px}
.atl-tarjeta{display:flex;width:100%;gap:12px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-lg);padding:12px;box-shadow:var(--sh-1);color:var(--text)}
.atl-tarjeta:active{background:var(--panel2)}
.atl-tarjeta .atl-icono{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 14%,var(--panel));color:var(--teal);flex:0 0 auto}
.atl-tarjeta .atl-icono svg{width:18px;height:18px}
.atl-tarjeta .atl-icono.oro{background:color-mix(in srgb,var(--gold) 18%,var(--panel));color:var(--gold)}
.atl-tarjeta-cuerpo{min-width:0;flex:1 1 auto}
.atl-tarjeta-cuerpo strong{display:block;margin-top:2px;font:600 var(--fs-3)/1.25 var(--display)}
.atl-tarjeta-cuerpo .atl-txt{display:block;margin-top:2px;font-size:var(--fs-1);color:var(--muted);line-height:1.5}
.atl-tarjeta-arriba{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.atl-tarjeta-arriba .atl-ceja{color:var(--teal)}
.atl-tarjeta .atl-icono.oro + .atl-tarjeta-cuerpo .atl-ceja{color:var(--gold)}
.atl-tarjeta-arriba .atl-km{font:var(--fs-1) var(--mono);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.atl-ceja{display:block;font:600 var(--fs-0) var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--gold)}

/* ¿Cuándo? calendario de 12 meses */
.atl-seccion{margin:16px 0 2px;font:600 var(--fs-0) var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.atl-calendario{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:76px;margin:4px 0 6px}
.atl-calendario button,.atl-calendario span.atl-mes{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%;border:0;background:none;padding:0;font:9px var(--mono);color:var(--muted)}
.atl-calendario i{display:block;width:100%;min-height:3px;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--teal) 30%,var(--panel2))}
.atl-calendario .alto i{background:var(--teal)}
.atl-calendario [aria-pressed="true"]{color:var(--text);font-weight:700}
.atl-calendario [aria-pressed="true"] i{outline:2px solid var(--gold);outline-offset:1px}
.atl-texto-calendario{font-size:var(--fs-1);color:var(--muted);margin:0 0 12px}
.atl-texto-calendario b{color:var(--text)}

/* Lista de sitios, lista de pueblos */
.atl-lista-sitios{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.atl-fila-sitio{display:flex;width:100%;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:10px 12px;color:var(--text)}
.atl-fila-sitio:last-child{border-bottom:0}
.atl-fila-sitio:active{background:var(--panel2)}
.atl-fila-sitio .atl-nombre{flex:1 1 auto;min-width:0}
.atl-fila-sitio .atl-nombre strong{display:block;font:600 var(--fs-2) var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atl-fila-sitio .atl-nombre small{display:block;font:var(--fs-1) var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.atl-fila-sitio .atl-km{font:var(--fs-1) var(--mono);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.atl-punto-lista{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line)}
.atl-punto-lista.t1{background:var(--panel);box-shadow:0 0 0 2px var(--sitio-3)}
.atl-punto-lista.t2{background:var(--sitio-2)} .atl-punto-lista.t3{background:var(--sitio-3)} .atl-punto-lista.t4{background:var(--sitio-4)}
.atl-punto-area{width:16px;height:16px;border-radius:50%;flex:0 0 auto;border:1.5px dashed var(--muted);background:color-mix(in srgb,var(--muted) 10%,transparent)}
.atl-punto-area.barco{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,transparent)}
.atl-mas-sitios{width:100%;border:0;border-top:1px solid var(--line);background:none;padding:10px;font:600 var(--fs-2) var(--display);color:var(--teal)}
.atl-mas-texto{margin:0;padding:9px 12px;border-top:1px solid var(--line);font-size:var(--fs-1);color:var(--muted)}
.atl-fila-sin-punto{display:flex;width:100%;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r-lg);background:none;text-align:left;color:var(--text)}
.atl-fila-sin-punto .atl-nombre{flex:1 1 auto;min-width:0}
.atl-fila-sin-punto strong{display:block;font:600 var(--fs-2) var(--display)}
.atl-fila-sin-punto small{display:block;font-size:var(--fs-1);color:var(--muted);line-height:1.4}
.atl-fila-sin-punto>svg{width:16px;height:16px;color:var(--muted)}
.atl-icono-sin-punto{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);color:var(--muted);flex:0 0 auto}
.atl-icono-sin-punto svg{width:18px;height:18px}
.atl-etiqueta{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-full);padding:2px 8px;font:600 9.5px var(--mono);letter-spacing:.4px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.atl-etiqueta.oro{border-color:color-mix(in srgb,var(--gold) 60%,transparent);color:var(--gold)}

/* Avisos y pie de página */
.atl-aviso{border-radius:var(--r-lg);padding:12px;background:var(--panel2);font-size:var(--fs-2);color:var(--muted);line-height:1.55}
.atl-aviso.primera{margin-top:4px}
.atl-aviso strong{color:var(--text);font-family:var(--display)}
.atl-vacio-especies{margin:0}
.atl-pie-hoja{margin-top:18px;font-size:var(--fs-1);color:var(--muted);line-height:1.6}
.atl-pie-hoja details{margin-top:6px}
.atl-pie-hoja summary{cursor:pointer;color:var(--text)}
.atl-pie-hoja a{color:var(--teal)}
.atl-cargando{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--teal);animation:atlGira .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes atlGira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.atl-hoja,.atl-hoja-filtros,.atl-velo,.atl-aviso-flotante{transition:none}.atl-cargando{animation:none}}
html[data-motion="reducido"] .atl-hoja,html[data-motion="reducido"] .atl-hoja-filtros,
html[data-motion="reducido"] .atl-velo,html[data-motion="reducido"] .atl-aviso-flotante{transition:none}
html[data-motion="reducido"] .atl-cargando{animation:none}

/* Ficha de un sitio */
.atl-ficha h2{margin:4px 0 2px;font:600 var(--fs-5)/1.2 var(--display);text-wrap:balance}
.atl-ficha .atl-lugar{font:var(--fs-1) var(--mono);color:var(--muted)}
.atl-ficha .atl-cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.atl-ficha .atl-cifras div{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;background:var(--panel)}
.atl-ficha .atl-cifras b{display:block;font:600 var(--fs-5)/1.1 var(--display);font-variant-numeric:tabular-nums}
.atl-ficha .atl-cifras span{font:var(--fs-0) var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.atl-ficha p{font-size:var(--fs-2);color:var(--muted);margin:8px 0}
.atl-ficha p b{color:var(--text)}
.atl-ficha .atl-calendario{height:48px}
.atl-etiquetas{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.atl-nota-ficha{font-size:var(--fs-1);color:var(--muted)}
.atl-originales{margin:10px 0 4px;font-size:var(--fs-1);color:var(--muted)}
.atl-originales summary{cursor:pointer;padding:6px 0}
.atl-pruebas{display:grid;gap:2px;margin-top:6px}
.atl-pruebas a{font:var(--fs-1) var(--mono);color:var(--teal);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.atl-acciones-ficha{display:flex;gap:8px;margin-top:14px}
.atl-acciones-ficha a,.atl-acciones-ficha button{flex:1 1 0;text-align:center;justify-content:center;text-decoration:none}

/* Filtros: hoja modal encima de todo */
.atl-velo{position:absolute;inset:0;z-index:20;background:var(--velo-menu);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
.atl-velo.visible{opacity:1;pointer-events:auto}
.atl-hoja-filtros{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:86%;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-4);padding:10px 16px 20px;transform:translateY(105%);transition:transform var(--dur-2) var(--ease)}
.atl-hoja-filtros.abierta{transform:translateY(0)}
.atl-hoja-filtros h2{margin:2px 0 4px;font:600 var(--fs-5) var(--display)}
.atl-hoja-filtros h3{margin:16px 0 8px;font:600 var(--fs-0) var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.atl-hoja-filtros .atl-boton-principal{width:100%;justify-content:center;margin-top:18px;padding:13px}
.atl-rejilla-meses{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.atl-rejilla-meses button{height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);font:var(--fs-1) var(--mono);color:var(--muted)}
.atl-rejilla-meses button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-teal);font-weight:700}
.atl-seg{display:flex;background:var(--panel2);border-radius:var(--r-md);padding:3px;gap:2px}
.atl-seg button{flex:1 1 0;border:0;background:none;border-radius:var(--r-sm);padding:8px 4px;font:600 var(--fs-2) var(--display);color:var(--muted)}
.atl-seg button[aria-pressed="true"]{background:var(--panel);color:var(--text);box-shadow:var(--sh-1)}
.atl-nota-filtro{font-size:var(--fs-1);color:var(--muted);margin:6px 0 0}
.atl-fila-ubicacion{display:flex;gap:8px;margin:6px 0 10px}
.atl-campo-pueblo{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-full);padding:8px 12px;background:var(--panel2)}
.atl-campo-pueblo svg{width:16px;height:16px;color:var(--muted)}
.atl-campo-pueblo input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;font-size:var(--fs-3);color:var(--text)}
.atl-lista-pueblos{margin-top:6px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.atl-lista-pueblos[hidden]{display:none}
.atl-lista-pueblos button{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:8px;border:0;border-bottom:1px solid var(--line);background:none;padding:10px 12px;text-align:left;color:var(--text)}
.atl-lista-pueblos button:last-child{border-bottom:0}
.atl-lista-pueblos strong{font:600 var(--fs-2) var(--display)}
.atl-lista-pueblos small{font:var(--fs-1) var(--mono);color:var(--muted)}

/* Aviso flotante breve */
.atl-aviso-flotante{position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);z-index:1000;max-width:86%;padding:9px 14px;border-radius:var(--r-full);background:var(--text);color:var(--panel);font-size:var(--fs-2);box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:opacity var(--dur-2),transform var(--dur-2) var(--ease);text-align:center}
.atl-aviso-flotante.visible{opacity:1;transform:translate(-50%,0)}

/* Aviso de primer uso (BETA) */
.atl-aviso-beta{position:absolute;left:12px;right:12px;bottom:calc(var(--atl-pico,74px) + 12px);z-index:22;background:var(--panel);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.atl-aviso-beta p{margin:0;font-size:var(--fs-2);color:var(--text);line-height:1.5}
.atl-aviso-beta .atl-aviso-beta-acciones{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

@media (max-width:520px){ .atl-overlay{height:100%;} }

/* Modo campo táctil: sin cristal, como el resto de la app (CLAUDE.md §6.3) */
:where(html.sin-blur) .atl-hoja{background:var(--panel);}

/* Fondo de los mapas mientras no han cargado las teselas (28/10/2026): el gris
   claro por defecto de Leaflet deslumbraba en los temas oscuros. */
.leaflet-container{background:var(--panel2);}