/* ============================================================
   MENÚ DE FOTOS — desplegable de la barra. Va con menufotos.js
============================================================ */
.menu-fotos{position:relative}

.mf-boton{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--linea); color:var(--gris);
  padding:6px 12px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13px; white-space:nowrap;
}
.mf-boton:hover{border-color:var(--azul); color:var(--azul)}
.mf-boton[aria-expanded="true"]{
  border-color:var(--azul); color:var(--azul); background:var(--resalte);
}
.mf-ico{font-size:14px; line-height:1}
.mf-flecha{font-size:10px; opacity:.7}
@media (max-width:700px){ .mf-txt{display:none} }

/* ---------- Panel ---------- */
.mf-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:800;
  width:min(620px, calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:0 16px 44px rgba(0,0,0,.18);
  overflow:hidden;
  animation:mfEntra .14s ease;
}
@keyframes mfEntra{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.mf-cols{display:grid; grid-template-columns:minmax(150px,190px) minmax(0,1fr)}
@media (max-width:560px){ .mf-cols{grid-template-columns:1fr} }

/* Columna de categorías */
.mf-cats{
  border-right:1px solid var(--linea); background:var(--suave);
  max-height:340px; overflow-y:auto; padding:6px;
}
@media (max-width:560px){ .mf-cats{border-right:none; border-bottom:1px solid var(--linea); max-height:150px} }
.mf-cat{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; background:none; border:none;
  padding:8px 10px; border-radius:6px; cursor:pointer; font:inherit;
}
.mf-cat:hover, .mf-cat.activa{background:var(--resalte)}
.mf-cat.activa{box-shadow:inset 2px 0 0 var(--rojo)}
.mf-cat-nom{font-size:12.5px; font-weight:600; color:var(--tinta); line-height:1.25}
.mf-cat-n{
  font-size:10.5px; font-weight:700; color:var(--gris);
  background:var(--linea); border-radius:999px; padding:1px 6px; flex-shrink:0;
}

/* Columna de excursiones */
.mf-excs{max-height:340px; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:4px}
.mf-exc{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; padding:6px; border-radius:8px; cursor:pointer; font:inherit;
}
.mf-exc:hover{background:var(--resalte)}
.mf-exc img, .mf-sinfoto{
  width:56px; height:42px; border-radius:6px; object-fit:cover;
  flex-shrink:0; background:#000; border:1px solid var(--linea);
}
.mf-sinfoto{display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px}
.mf-exc-info{display:flex; flex-direction:column; gap:1px; min-width:0}
.mf-exc-nom{font-size:12.5px; font-weight:600; line-height:1.25; color:var(--tinta)}
.mf-exc-n{font-size:11px; color:var(--gris)}

.mf-vacio{padding:14px; font-size:13px; color:var(--gris)}

html[data-tema="oscuro"] .mf-boton[aria-expanded="true"]{background:#252A38}
html[data-tema="oscuro"] .mf-cats{background:#191C24}
html[data-tema="oscuro"] .mf-cat:hover,
html[data-tema="oscuro"] .mf-cat.activa,
html[data-tema="oscuro"] .mf-exc:hover{background:#252A38}
html[data-tema="oscuro"] .mf-cat-n{background:#2D3240}