/* ══════════════════════════════════════════════════════════════════════════════
   CumbresAR · estilos del listado y la ficha de cumbres
   Usa los tokens del proyecto destino. Si no existen, los de abajo sirven de red.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{
  --cumbre-color:#416930;          /* Bareyo: verde de marca (triángulo del mapa y acentos) */
  --cumbre-color-osc:#223819;      /* etiquetas sobre base clara */
  --cumbre-color-claro:#ADD19E;    /* etiquetas sobre base oscura o satélite */
  /* tokens del kit → tokens de Bareyo (styles-v3.css) */
  --sup:var(--surface); --sup-2:var(--surface-muted); --sup-3:var(--surface-muted);
  --linea:var(--border); --txt:var(--text); --txt-2:var(--text-muted);
  --f-tit:'Signika',system-ui,sans-serif; --f-cuerpo:'DM Sans',system-ui,sans-serif;
  --r-sm:10px; --r-md:14px;
}

/* barra de herramientas: buscador + orden */
.cumbres-toolbar{display:flex;gap:6px;margin-bottom:8px}
.cumbres-toolbar input,.cumbres-toolbar select{flex:1;min-width:0;border:1px solid var(--linea,#E1DBDA);background:var(--sup,#fff);
  color:var(--txt,#1A1A1A);border-radius:var(--r-sm,8px);padding:8px 10px;font:500 12.5px/1.3 var(--f-cuerpo,system-ui)}
.cumbres-toolbar select{flex:0 1 46%}

/* tarjeta de cumbre del listado */
.pico-card{width:100%;text-align:left;background:var(--sup,#fff);border:1px solid var(--linea,#E1DBDA);border-radius:var(--r-md,12px);
  padding:9px 11px;color:var(--txt,#1A1A1A);display:flex;align-items:center;gap:10px;margin-bottom:7px;
  transition:border-color var(--mov-micro,.12s),transform var(--mov-micro,.12s)}
.pico-card:hover{border-color:var(--cumbre-color);transform:translateX(2px)}
.pico-thumb{flex:0 0 auto;width:62px;height:48px;border-radius:var(--r-sm,8px);object-fit:cover;background:var(--sup-3,#EFEFEF)}
.pico-fallback{flex:0 0 auto;width:62px;height:48px;border-radius:var(--r-sm,8px);
  background:linear-gradient(135deg,#E2F2EE,#57AC9B);display:flex;align-items:center;justify-content:center;color:#fff}
.pico-fallback svg{width:26px;height:26px}
.pico-card .inf{flex:1;min-width:0}
.pico-card .inf b{display:block;font:700 13.5px/1.25 var(--f-cuerpo,system-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pico-card .inf span{display:block;font:500 11.5px/1.4 var(--f-cuerpo,system-ui);color:var(--txt-2,#5F5F5F)}
.pico-card .alt{flex:0 0 auto;text-align:right}
.pico-card .alt b{display:block;font:800 15.5px/1.1 var(--f-tit,system-ui);font-variant-numeric:tabular-nums}
.pico-card .alt span{font:500 10.5px/1.3 var(--f-cuerpo,system-ui);color:var(--txt-2,#5F5F5F)}

/* tiles de la ficha (altitud · distancia · rumbo · prominencia) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px;margin:10px 0}
.tile{background:var(--sup,#fff);border:1px solid var(--linea,#E1DBDA);border-radius:var(--r-sm,8px);padding:9px 10px}
.tile b{display:block;font:800 17px/1.1 var(--f-tit,system-ui);font-variant-numeric:tabular-nums}
.tile span{display:block;font:500 10.5px/1.3 var(--f-cuerpo,system-ui);color:var(--txt-2,#5F5F5F);margin-top:2px}

/* foto y atribución de Wikimedia (obligatoria: es la licencia) */
.foto-pico{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md,12px);margin:8px 0 3px}
.attr-foto{font:500 9.5px/1.3 var(--f-cuerpo,system-ui);color:var(--txt-2,#5F5F5F);margin:0 0 6px}
.meteo-cumbre-linea{font:500 12px/1.5 var(--f-cuerpo,system-ui);background:var(--sup-2,#F7F5F1);
  border:1px solid var(--linea,#E1DBDA);border-radius:var(--r-sm,8px);padding:7px 10px;margin:8px 0}

/* botón ⛰ del stack del mapa: spinner mientras descarga celdas */
#btn-picos.on{background:var(--cumbre-color);color:#fff;border-color:var(--cumbre-color)}
#btn-picos.cargando{position:relative;opacity:.75}
#btn-picos.cargando::after{content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid transparent;border-top-color:var(--cumbre-color);animation:ct-giro .8s linear infinite}
@keyframes ct-giro{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#btn-picos.cargando::after{animation:none}}