/* Paleta tomada directamente del logo (degradado azul -> turquesa -> verde) */
:root{
  --azul:#0072C4;
  --azul2:#2f93dd;
  --turquesa:#0CA8AA;
  --verde:#06DE85;
  --fondo:#f5f8fa;
  --card:#ffffff;
  --text:#1b2430;
  --text2:#5c6b7c;
  --border:#e1e7ee;
  --rojo:#c0392b;
}
*{box-sizing:border-box}
html,body{background:var(--fondo)}
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  color:var(--text);
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
a{color:var(--azul)}

/* ---------- Header ---------- */
.site-header{
  background:var(--card);
  border-bottom:1px solid var(--border);
  color:var(--text);
  padding:10px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  box-shadow:0 1px 3px rgba(20,40,60,.05);
}
.site-header .marca{display:flex;align-items:center;gap:12px}
.site-header .logo{width:42px;height:42px;flex:0 0 auto;display:block}
.site-header h1{
  font-size:1.15rem;margin:0;font-weight:800;
  background:linear-gradient(90deg,var(--azul),var(--turquesa),var(--verde));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.site-header p{margin:2px 0 0;font-size:.83rem;color:var(--text2)}
.site-header .stats{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;font-size:.78rem;color:var(--text2)}
.site-header .stats b{display:block;font-size:1.45rem;line-height:1.15;color:var(--azul);font-weight:700}

/* ---------- Layout ---------- */
.dashboard{
  position:relative;
  display:block;
  height:min(76vh, 700px);
  min-height:360px;
}
.listado{
  background:var(--fondo);
  border-top:1px solid var(--border);
  padding:18px 22px 40px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.listado-cabecera{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
.listado-cabecera h2{
  font-size:1rem;margin:0;color:var(--azul);font-weight:700;
}
.listado-cabecera .buscar{max-width:320px;margin:0}
#lista-puntos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;
}
#pie-actualizado{font-size:.75rem;margin-top:16px;color:var(--text2)}

.pista-mapa{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  margin:0;z-index:500;pointer-events:none;
  background:rgba(255,255,255,.92);border:1px solid var(--border);
  color:var(--text2);font-size:.8rem;padding:7px 14px;border-radius:20px;
  backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(20,40,60,.1);
}

.buscar{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  margin-bottom:12px;
  font-size:.9rem;
  font-family:inherit;
  background:var(--card);
  color:var(--text);
}
.buscar::placeholder{color:var(--text2);opacity:.75}
.buscar:focus{outline:none;border-color:var(--turquesa);box-shadow:0 0 0 3px rgba(12,168,170,.14)}

.punto-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:11px;
  padding:13px;
  margin-bottom:10px;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .1s;
  box-shadow:0 1px 2px rgba(20,40,60,.04);
}
.punto-card:hover{border-color:var(--azul2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,40,60,.08)}
.punto-card.activo{border-color:var(--turquesa);box-shadow:0 0 0 2px rgba(12,168,170,.2)}
.punto-card h3{margin:0 0 5px;font-size:.97rem;color:var(--azul);font-weight:600}
.punto-card .meta{font-size:.79rem;color:var(--text2)}
.punto-card .badges{margin-top:8px;display:flex;gap:6px;font-size:.71rem;flex-wrap:wrap}
.badge{
  background:rgba(12,168,170,.1);
  color:var(--turquesa);
  border:1px solid rgba(12,168,170,.28);
  padding:2px 8px;border-radius:20px;font-weight:600;
}

#map{width:100%;height:100%;min-height:320px;background:#dfe9ee}

@media (max-width:860px){
  .dashboard{height:62vh;min-height:300px}
  #map{height:100%}
  .listado{padding:16px 14px 34px}
  .listado-cabecera .buscar{max-width:none;width:100%}
  #lista-puntos{grid-template-columns:1fr}
  .pista-mapa{font-size:.74rem;padding:6px 12px;bottom:10px}
}

/* ---------- Leaflet en claro (nativo de OSM, sin filtros) ---------- */
.leaflet-container{background:#dfe9ee}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--card);color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(20,40,60,.18);
}
.leaflet-popup-content{font-size:.85rem;margin:11px 14px}
.leaflet-popup-content strong{color:var(--azul)}
.leaflet-popup-close-button{color:var(--text2)!important}
.leaflet-bar a{
  background:var(--card);color:var(--text);border-bottom-color:var(--border);
}
.leaflet-bar a:hover{background:#eef3f6;color:var(--azul)}
.leaflet-control-attribution{
  background:rgba(255,255,255,.85)!important;color:var(--text2)!important;
}
.leaflet-control-attribution a{color:var(--text2)!important}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,30,40,.5);
  display:none;align-items:center;justify-content:center;z-index:2000;padding:16px;
  backdrop-filter:blur(2px);
}
.modal-overlay.abierto{display:flex}
.modal-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:15px;
  max-width:720px;width:100%;max-height:88vh;overflow-y:auto;
  padding:26px;position:relative;
  box-shadow:0 18px 50px rgba(20,30,40,.25);
}
.modal-box .cerrar{
  position:absolute;top:14px;right:16px;background:none;border:none;
  font-size:1.5rem;cursor:pointer;color:var(--text2);line-height:1;
}
.modal-box .cerrar:hover{color:var(--azul)}
.modal-box h2{margin:0 30px 3px 0;font-size:1.3rem;color:var(--azul)}
.modal-box .meta{color:var(--text2);font-size:.88rem;margin-bottom:16px}
.modal-box section{margin-top:20px}
.modal-box section h4{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--turquesa);margin:0 0 8px;font-weight:700;
}
.modal-box p{margin:0;line-height:1.55;color:var(--text)}

.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;align-items:start}
.galeria img{
  width:100%;height:auto;display:block;max-height:210px;
  object-fit:contain;border-radius:9px;cursor:pointer;
  background:#eef3f6;
  border:1px solid var(--border);transition:border-color .15s;
}
.galeria img:hover{border-color:var(--azul2)}
.videos video{width:100%;border-radius:9px;margin-bottom:10px;border:1px solid var(--border);background:#000}
.facturas a{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  margin-bottom:7px;text-decoration:none;color:var(--text);font-size:.88rem;
  background:#f9fbfc;transition:border-color .15s;
}
.facturas a:hover{border-color:var(--azul2);color:var(--azul)}

#pie-actualizado{color:var(--text2)}
.vacio{color:var(--text2);font-size:.88rem}
.error{color:var(--rojo);font-size:.88rem}

.listado::-webkit-scrollbar,.modal-box::-webkit-scrollbar{width:9px}
.listado::-webkit-scrollbar-track,.modal-box::-webkit-scrollbar-track{background:var(--fondo)}
.listado::-webkit-scrollbar-thumb,.modal-box::-webkit-scrollbar-thumb{
  background:#c7d2db;border-radius:5px;
}
.listado::-webkit-scrollbar-thumb:hover,.modal-box::-webkit-scrollbar-thumb:hover{background:#a9b8c4}

/* ---------- Boton de cuentas ---------- */
.btn-cuentas{
  background:rgba(0,114,196,.08);
  color:var(--azul);
  border:1px solid rgba(0,114,196,.3);
  padding:8px 16px;border-radius:8px;
  font-family:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;align-self:center;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.btn-cuentas:hover{background:rgba(0,114,196,.15);border-color:var(--azul)}

/* ---------- Cuentas ---------- */
.cuentas-resumen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:18px 0 24px;
}
.cuenta-tarjeta{
  background:#f9fbfc;border:1px solid var(--border);
  border-radius:10px;padding:14px;text-align:center;
}
.cuenta-tarjeta .cifra{
  display:block;font-size:1.35rem;font-weight:700;color:var(--azul);
  line-height:1.2;margin-bottom:4px;
}
.cuenta-tarjeta.saldo .cifra{color:var(--verde)}
.cuenta-tarjeta .rotulo{font-size:.75rem;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}

.tabla-compras{width:100%;border-collapse:collapse;font-size:.88rem}
.tabla-compras th{
  text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text2);padding:8px 10px;border-bottom:1px solid var(--border);font-weight:600;
}
.tabla-compras td{padding:9px 10px;border-bottom:1px solid #eef2f5}
.tabla-compras td.valor{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla-compras tr:last-child td{border-bottom:none}
.tabla-compras tfoot td{
  border-top:1px solid var(--border);font-weight:700;color:var(--azul);padding-top:12px;
}
.marca-directo{
  font-size:.68rem;color:var(--turquesa);border:1px solid rgba(12,168,170,.3);
  background:rgba(12,168,170,.08);border-radius:20px;padding:1px 7px;margin-left:6px;
  white-space:nowrap;
}
.nota-privacidad{
  font-size:.78rem;color:var(--text2);margin-top:18px;
  padding:11px 13px;background:#f9fbfc;border-radius:8px;border:1px solid var(--border);
}

/* ---------- Visor de imagenes (lightbox) ---------- */
.visor{
  position:fixed;inset:0;background:rgba(10,15,20,.94);
  display:none;align-items:center;justify-content:center;z-index:4000;
}
.visor.abierto{display:flex}
.visor-lienzo{
  max-width:94vw;max-height:88vh;
  display:flex;align-items:center;justify-content:center;
}
.visor-lienzo img{
  max-width:94vw;max-height:88vh;
  object-fit:contain;border-radius:6px;
  box-shadow:0 10px 50px rgba(0,0,0,.5);
}
.visor-lienzo iframe{
  width:min(92vw,900px);height:88vh;border:none;border-radius:6px;background:#fff;
}
.visor-lienzo video{
  max-width:94vw;max-height:86vh;width:auto;height:auto;
  border-radius:10px;background:#000;display:block;
}
.visor-cerrar{
  position:absolute;top:14px;right:18px;z-index:2;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:1.6rem;line-height:1;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
}
.visor-cerrar:hover{background:rgba(255,255,255,.24)}
.visor-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:2rem;line-height:1;
  width:50px;height:64px;border-radius:8px;cursor:pointer;
}
.visor-nav:hover{background:rgba(255,255,255,.24)}
.visor-prev{left:14px}
.visor-next{right:14px}
.visor-nav[hidden]{display:none}
.visor-pie{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#eef2f6;font-size:.82rem;
  background:rgba(20,30,40,.75);padding:6px 14px;border-radius:20px;
  border:1px solid rgba(255,255,255,.15);max-width:90vw;text-align:center;
}
.galeria img,.facturas a{cursor:zoom-in}

@media (max-width:640px){
  .visor-nav{width:40px;height:52px;font-size:1.5rem}
  .visor-prev{left:6px}
  .visor-next{right:6px}
}

/* ---------- Cuadricula unificada (fotos + videos) ---------- */
.galeria .celda{
  position:relative;display:block;width:100%;padding:0;
  background:#eef3f6;border:1px solid var(--border);border-radius:9px;
  overflow:hidden;cursor:pointer;transition:border-color .15s,transform .1s;
  line-height:0;
}
.galeria .celda:hover{border-color:var(--azul2)}
.galeria .celda:active{transform:scale(.98)}
.galeria .celda img{
  width:100%;height:auto;display:block;max-height:210px;object-fit:contain;
  border:none;border-radius:0;background:#eef3f6;
}
.galeria .celda-sin-poster{display:block;width:100%;height:120px;background:#eef3f6}

.galeria .celda .play{
  position:absolute;inset:0;margin:auto;
  width:38px;height:38px;border-radius:50%;
  background:rgba(20,30,40,.55);border:1.5px solid rgba(255,255,255,.85);
  pointer-events:none;
}
.galeria .celda .play::after{
  content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;
}
.galeria .celda.es-video::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(0,0,0,.4),transparent);pointer-events:none;
}

/* ---------- Marcadores con foto ---------- */
.pin-foto{background:none;border:none}
.pin-foto .aro{
  position:relative;
  display:block;width:var(--d);height:var(--d);border-radius:50%;
  overflow:hidden;background:#dfe9ee;
  border:2px solid #fff;
  box-shadow:0 0 0 2px var(--turquesa), 0 3px 10px rgba(20,40,60,.35);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.pin-foto .aro img{width:100%;height:100%;object-fit:cover;display:block}
.pin-foto .aro .sin-foto{
  display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--azul),var(--turquesa),var(--verde));
}
.pin-foto:hover .aro{
  transform:scale(1.12);
  box-shadow:0 0 0 2px var(--turquesa), 0 0 0 5px rgba(12,168,170,.28), 0 5px 16px rgba(20,40,60,.4);
  z-index:1000;
}

/* Anillo que late en el marcador, para que se note que se puede tocar */
.pin-foto .aro::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--turquesa);opacity:0;
  animation:latido 2.8s ease-out infinite;
  pointer-events:none;
}
@keyframes latido{
  0%   {transform:scale(1);   opacity:.6}
  70%  {transform:scale(1.55);opacity:0}
  100% {transform:scale(1.55);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .pin-foto .aro::after{animation:none}
}

/* ---------- Galeria de todas las facturas ---------- */
.galeria-facturas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;margin-top:16px;align-items:start;
}
.factura-celda{
  display:block;width:100%;padding:0;text-align:left;
  background:#f9fbfc;border:1px solid var(--border);border-radius:10px;
  overflow:hidden;cursor:pointer;transition:border-color .15s,transform .1s;
}
.factura-celda:hover{border-color:var(--azul2)}
.factura-celda:active{transform:scale(.985)}
.factura-celda img{
  width:100%;height:auto;max-height:230px;object-fit:contain;display:block;
  background:#fff;
}
.factura-celda .icono-pdf{
  display:flex;align-items:center;justify-content:center;
  height:120px;background:#eef3f6;color:var(--azul);
  font-weight:800;letter-spacing:.08em;font-size:1.1rem;
}
.factura-celda .factura-pie{
  display:block;padding:8px 10px;line-height:1.3;
  border-top:1px solid var(--border);
}
.factura-celda .factura-valor{
  display:block;font-size:.92rem;font-weight:700;color:var(--azul);
  word-break:break-word;
}
.factura-celda .factura-dia{
  display:block;font-size:.72rem;color:var(--text2);margin-top:2px;
}

.facturas-total{
  display:flex;flex-direction:column;gap:2px;
  background:rgba(6,222,133,.08);border:1px solid rgba(6,222,133,.35);
  border-radius:10px;padding:14px 16px;margin-top:16px;
}
.facturas-total .cifra{font-size:1.55rem;font-weight:800;color:#0aa860;line-height:1.1}
.facturas-total .rotulo{font-size:.78rem;color:var(--text2)}

@media (max-width:860px){
  .galeria-facturas{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
}

.botones-cabecera{
  display:flex;flex-direction:column;gap:8px;align-items:stretch;
}
.botones-cabecera .btn-cuentas{width:100%;align-self:stretch}

@media (max-width:860px){
  .site-header .stats{gap:10px 14px;align-items:flex-start;flex-wrap:nowrap}
  .site-header .stats > div{min-width:0}
  .botones-cabecera{flex:0 0 auto;margin-left:auto}
  .botones-cabecera .btn-cuentas{padding:8px 10px;font-size:.78rem}
}

/* Enlace al Excel original, dentro del panel de Cuentas */
.btn-excel{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  padding:9px 15px;border-radius:9px;text-decoration:none;font-weight:700;font-size:.86rem;
  color:var(--text);background:rgba(29,111,66,.08);border:1px solid rgba(29,111,66,.4);
  transition:background .15s,border-color .15s;
}
.btn-excel:hover{background:rgba(29,111,66,.16);border-color:#1D6F42}
.btn-excel svg{flex:0 0 auto}