/* Blanquita v305 - FIX popup thumb + hero nitida + iconos dibujos */
:root{
  --green-bg:#f0fdf4;
  --green-border:#bbf7d0;
  --green-on:#86efac;
  --green-on-border:#4ade80;
}
html,body{height:100%; margin:0}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size:15px}
#map{height:100vh; width:100%; z-index:1}
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:380px;
  background:#fff; z-index:1000; display:flex; flex-direction:column;
  box-shadow:2px 0 12px rgba(0,0,0,.15); transition: transform .25s ease;
}
.sidebar.collapsed{ transform: translateX(-100%); }
 .sidebar-toggle{
  position:fixed; left:12px; top:12px; width:46px; height:46px;
  background:#fff; border:none; border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.25); cursor:pointer; font-size:24px;
  z-index:1200; display:flex; align-items:center; justify-content:center;
  transition: all .25s ease;
}
.sidebar.collapsed + .sidebar-toggle{ left:12px; background:#fff; color:#111; display:flex !important; }
.sidebar:not(.collapsed) + .sidebar-toggle{ display:none !important; }
/* Controles del mapa apilados bajo el boton de menu (arriba-izquierda) */
.leaflet-top.leaflet-left{ top:68px; left:2px; }
.leaflet-control-locate{ display:flex !important; align-items:center; justify-content:center; font-size:18px; color:#374151; }
.leaflet-control-locate:hover{ color:#111; background:#f4f4f4; }
.leaflet-control-locate .mdi{ line-height:1; }
@media (max-width: 768px){
  .sidebar{ width:92vw !important; max-width:92vw !important; }
  
}
.search-box{padding:.8rem; border-bottom:1px solid #eee; background:#fafafa}
.search-box input{ background:#fff !important; border:1px solid #dbdbdb; }
.chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem }
.chip{ border:1px solid #dbdbdb; border-radius:999px; padding:.2rem .7rem; font-size:.85rem; background:#fff; cursor:pointer }
.chip.active{background:#10b981; color:#fff; border-color:#10b981}
#lista{overflow:auto; flex:1; padding:.5rem}
.item-punto{padding:.6rem; border-bottom:1px solid #f0f0f0; cursor:pointer}
.item-punto:hover{background:#f9fafb}
.item-punto .thumb-mini{width:62px; height:62px; object-fit:cover; border-radius:8px}
.service-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.6rem;
  margin:.8rem 0;
}
@media (max-width: 768px){
  .service-grid{ grid-template-columns:repeat(3,1fr); }
}
.service-icon{
  width:100%;
  min-height:64px;
  height:auto;
  padding:.5rem .3rem;
  border-radius:16px;
  background:#f0fdf4;
  border:2px solid #bbf7d0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  word-break:break-word;
  cursor:pointer;
  position:relative;
  user-select:none;
  transition: all .15s ease;
}
.service-icon img{
  width:30px; height:30px; object-fit:contain; pointer-events:none;
}
.service-icon.on{
  background:#86efac;
  border-color:#4ade80;
}
.service-tooltip{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#111827; color:#fff; padding:.35rem .6rem; border-radius:6px;
  font-size:.75rem; white-space:nowrap; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .15s; z-index:10;
}
.service-tooltip.show{ opacity:1; visibility:visible; }
.ficha-edit-container{ max-width:820px; width:100%; margin:0 auto; padding:1rem; box-sizing:border-box; }
@media (max-width: 768px){
  .ficha-edit-container{ max-width:100% !important; width:100% !important; padding:.5rem !important; }
  .container.ficha-edit-container{ max-width:100% !important; }
}
.modal{ z-index:3000 !important; }
.modal-background{ background:rgba(0,0,0,.55) }
.modal-card{ max-width:720px; width:92% }
.ficha-hero{
  position:relative; height:340px; overflow:hidden; background:#111;
  display:flex; align-items:center; justify-content:center;
}
.ficha-hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(20px) brightness(.6); transform:scale(1.15);
}
.ficha-hero img.main{
  position:relative; z-index:1; max-height:100%; max-width:100%;
  width:auto; height:auto; object-fit:contain; cursor:zoom-in;
  filter:none !important;
  box-shadow:0 2px 20px rgba(0,0,0,.4);
}
.ficha-hero .nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(0,0,0,.45); color:#fff; border:none; width:38px; height:38px;
  border-radius:50%; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center;
}
.ficha-hero .prev{ left:10px } .ficha-hero .next{ right:10px }
.ficha-contador{
  position:absolute; bottom:10px; right:10px; z-index:2;
  background:rgba(0,0,0,.55); color:#fff; padding:.15rem .5rem; border-radius:999px; font-size:.8rem
}
.ficha-dots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:5px;
}
.ficha-dots span{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45);
}
.ficha-dots span.active{ background:#fff; width:18px; border-radius:999px; }
#lightboxModal{ z-index:4000 !important; }
#lightboxModal .modal-content{
  width:100vw; height:100vh; max-height:100vh; margin:0; display:flex; align-items:center; justify-content:center; background:#000;
  position:relative;
}
#lightboxModal img{ max-width:94vw; max-height:92vh; object-fit:contain; }
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15);
  border:none; color:#fff; width:48px; height:48px; border-radius:50%; font-size:28px; cursor:pointer; z-index:5;
}
.lightbox-prev{ left:18px } .lightbox-next{ right:18px }
.lightbox-cont{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.5); padding:.2rem .7rem; border-radius:999px
}
.lightbox-close{
  position:absolute; top:14px; right:18px; background:rgba(0,0,0,.5); color:#fff;
  border:none; width:40px; height:40px; border-radius:50%; font-size:22px; cursor:pointer; z-index:6
}
.leaflet-popup-content{ margin:10px 12px !important; min-width:200px }
.leaflet-popup-content img.thumb-popup{
  width:100%; height:140px; object-fit:cover; border-radius:8px; display:block; margin-bottom:6px;
  background:#eee;
}
.drop-zone{
  border:2px dashed #bbf7d0; border-radius:12px; padding:1.2rem; text-align:center; background:#f0fdf4; cursor:pointer
}
.drop-zone.dragover{ background:#dcfce7; border-color:#4ade80 }

/* FIX punto 1: check visible en ficha.php */
.service-icon.on::after{
  content:'✓';
  position:absolute;
  top:-6px; right:-6px;
  background:#10b981;
  color:#fff;
  width:18px; height:18px;
  border-radius:50%;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  z-index:3;
}
#lista .service-icon, #fichaModal .service-icon{ pointer-events:auto; }


.service-icon-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
  width:70px;
}
.service-label{
  font-size:11px;
  line-height:12px;
  text-align:center;
  color:#111827; font-weight:700;
  font-weight:700;
  max-width:72px;
  white-space:normal;
  overflow:visible;
  word-break:break-word;
}
.service-icon-wrap .service-icon{
  width:64px; height:64px;
}

.sidebar-header{
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.1rem; border-bottom:1px solid #eee; background:#fff;
}
.sidebar-header .sidebar-toggle-inner{
  width:40px; height:40px; min-width:40px;
  background:#111827; color:#fff; border:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;
}
.sidebar-header .sidebar-title{
  flex:1; text-align:center; font-family:'Pacifico', cursive; font-size:1.9rem; font-weight:400; letter-spacing:.5px; color:#111827;
}

#previewGrid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important; }
#previewGrid > div{ width:100% !important; }

/* Fix fotos grid en movil */
@media (max-width: 768px){ #previewGrid{ grid-template-columns:repeat(2,1fr) !important; } }

/* Aumento leve iconos mapa señalados (pin azul y custom) */
.leaflet-marker-icon{ transition: transform .15s ease; }


/* Titulo ver ficha - letra legible y bonita */
.ficha-titulo-bonito{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-weight:800 !important;
  font-size:1.45rem !important;
  line-height:1.25 !important;
  letter-spacing:-0.3px !important;
  color:#111827 !important;
  white-space:normal !important;
}
@media (max-width: 768px){
  .ficha-titulo-bonito{ font-size:1.25rem !important; }
}

/* Descripcion y fechas con gusto */
.ficha-desc-block{
  margin-top:1rem;
  padding:0.9rem 1rem;
  background:#f9fafb;
  border:1px solid #f0f0f0;
  border-radius:12px;
}
.ficha-desc-text{
  white-space:pre-wrap;
  font-size:0.98rem;
  line-height:1.55;
  color:#1f2937;
}
.ficha-fechas-block{
  margin-top:0.9rem;
  display:flex;
  align-items:center;
  gap:0.45rem;
  flex-wrap:wrap;
  padding:0.55rem 0.8rem;
  background:#fff;
  border:1px dashed #d1d5db;
  border-radius:999px;
  width:fit-content;
  max-width:100%;
}
.ficha-fechas-text{
  font-size:0.85rem;
  color:#4b5563;
  font-weight:500;
}
.ficha-fechas-text .fecha-chip{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:999px;
  padding:0.15rem 0.6rem;
  margin:0.15rem;
  font-size:0.82rem;
  color:#065f46;
  font-weight:600;
}

/* ===== Valoracion y caracteristicas (seccion nueva) ===== */
.ficha-caract-block{
  margin-top:.9rem;
  padding-top:.9rem;
  border-top:1px solid #f0f0f0;
}
.ficha-valoracion{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-bottom:.6rem;
}
.ficha-valoracion:empty{ display:none; }
.fc-stars{ display:inline-flex; gap:.08rem; font-size:1.25rem; line-height:1; }
.fc-stars .mdi{ color:#d1d5db; }
.fc-stars .mdi.on{ color:#f5b301; }
.fc-fav{ color:#ef4444; font-size:1.25rem; line-height:1; }
.fc-badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:#ecfdf5;
  color:#065f46;
  border:1px solid #a7f3d0;
  border-radius:999px;
  padding:.15rem .6rem;
  font-size:.8rem;
  font-weight:600;
}
.ficha-caract-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:.4rem .9rem;
}
.fc-item{
  display:flex;
  align-items:baseline;
  gap:.35rem;
  font-size:.86rem;
  color:#374151;
}
.fc-item .mdi{ color:#6b7280; font-size:1rem; }
.fc-lab{ color:#6b7280; }
.fc-val{ font-weight:600; color:#111827; }
a.fc-val{ color:#2563eb; text-decoration:underline; }


/* ===== Letra mas grande en el mapa (todos los dispositivos) ===== */
/* Globos, etiquetas y textos del mapa mas legibles al conducir. */
.leaflet-container{ font-size:16px; }
.leaflet-popup-content{ font-size:1rem; line-height:1.4; }
.leaflet-tooltip{ font-size:1rem; padding:6px 9px; }
.leaflet-tooltip.service-tooltip{ font-size:1rem; }
.leaflet-bar a, .leaflet-control a{ font-size:20px; line-height:30px; }
.leaflet-control-locate{ font-size:22px !important; }
.leaflet-control-zoom a{ font-size:22px; }
.leaflet-control-attribution{ font-size:12px; }
.leaflet-div-icon, .map-label, .leaflet-marker-icon .mdi{ font-size:20px; }
/* Pantallas grandes: un poco mas aun */
@media (min-width:900px){
  .leaflet-container{ font-size:17px; }
  .leaflet-popup-content{ font-size:1.05rem; }
  .leaflet-tooltip{ font-size:1.05rem; }
}