@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════════
   BOSQUES COMUNALES – Municipalidad de Esquel
   Dirección de Modernización del Estado

   La base viene del sistema de diseño de Espacios Verdes, para que los dos
   portales municipales se sientan de la misma familia. La paleta se corre a
   un verde más frío (pino) para que se note a simple vista en cuál de los dos
   está parado el usuario. Quedan algunas reglas heredadas que este portal no
   usa: son inofensivas y se pueden podar más adelante.
   ════════════════════════════════════════════════════════════ */

:root {
  --bg-base:      #08201a;
  --bg-card:      #0d2b23;
  --bg-sidebar:   #061812;
  --accent:       #10b981;
  --accent-dark:  #059669;
  --accent-glow:  rgba(16,185,129,.18);
  --amber:        #f59e0b;
  --blue:         #3b82f6;
  --red:          #ef4444;
  --purple:       #8b5cf6;
  --text:         #dff5ec;
  --text-muted:   #6a9e8c;
  --border:       rgba(16,185,129,.16);
  --glass:        rgba(13,43,35,.7);
  --sidebar-w:    260px;
  --radius:       12px;
  --shadow:       0 4px 24px rgba(0,0,0,.4);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg-base); color:var(--text); min-height:100vh; overflow-x:hidden; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--accent-dark); border-radius:3px; }

/* ── LAYOUT ── */
.layout { display:flex; min-height:100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width:var(--sidebar-w); height:100vh; background:var(--bg-sidebar);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:fixed; top:0; left:0; z-index:100; transition:transform .3s ease;
}
.sidebar-logo { padding:1.5rem 1.25rem 1rem; border-bottom:1px solid var(--border); }
.sidebar-logo .brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.sidebar-logo .logo-icon { width:40px; height:40px; background:var(--accent); border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.sidebar-logo .brand-text h2 { font-size:.95rem; font-weight:700; color:var(--text); line-height:1.2; }
.sidebar-logo .brand-text span { font-size:.7rem; color:var(--text-muted); font-weight:400; }

.sidebar-user { padding:.75rem 1.25rem; border-bottom:1px solid var(--border); }
.sidebar-user .user-info { display:flex; align-items:center; gap:.6rem; }
.sidebar-user .avatar { width:34px; height:34px; background:var(--accent-glow); border:1.5px solid var(--accent);
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.sidebar-user .user-details span:first-child { display:block; font-size:.8rem; font-weight:600; color:var(--text); }
.sidebar-user .user-details .rol-badge { font-size:.65rem; font-weight:600; padding:.15rem .45rem;
  border-radius:4px; text-transform:uppercase; letter-spacing:.05em; }
.rol-badge.admin     { background:rgba(245,158,11,.2); color:var(--amber); }
.rol-badge.tecnico   { background:rgba(16,185,129,.2); color:var(--accent); }
.rol-badge.inspector { background:rgba(168,85,247,.2); color:#c084fc; }
.rol-badge.externo   { background:rgba(59,130,246,.2); color:var(--blue); }

.sidebar-nav { flex:1; min-height:0; padding:1rem 0; overflow-y:auto; }
.nav-section-title { font-size:.65rem; font-weight:700; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.1em; padding:.5rem 1.25rem .25rem; }
.sidebar-nav a { display:flex; align-items:center; gap:.75rem; padding:.65rem 1.25rem;
  color:var(--text-muted); text-decoration:none; font-size:.875rem; font-weight:500;
  transition:all .2s ease; border-left:3px solid transparent; }
.sidebar-nav a:hover { color:var(--text); background:var(--accent-glow); border-left-color:var(--accent-dark); }
.sidebar-nav a.active { color:var(--accent); background:var(--accent-glow); border-left-color:var(--accent); font-weight:600; }
.sidebar-nav a .nav-icon { width:18px; text-align:center; font-size:1rem; flex-shrink:0; }

.sidebar-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); }
.sidebar-footer a, .sidebar-footer .nav-link-button { display:flex; align-items:center; gap:.6rem; color:var(--red); text-decoration:none;
  font-size:.85rem; font-weight:500; padding:.5rem .75rem; border-radius:8px; transition:background .2s; }
.sidebar-footer a:hover, .sidebar-footer .nav-link-button:hover { background:rgba(239,68,68,.1); }
.sidebar-footer .nav-link-button { width:100%; border:0; background:transparent; font:inherit; cursor:pointer; text-align:left; }

/* ── MAIN CONTENT ── */
.main-content { margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.topbar { padding:1rem 1.75rem; background:var(--glass); border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50; }
.topbar h1 { font-size:1.15rem; font-weight:700; color:var(--text); }
.topbar .topbar-actions { display:flex; align-items:center; gap:.75rem; }
.page-body { padding:1.75rem; flex:1; }

/* ── CARDS ── */
.card { background:var(--glass); border:1px solid var(--border); border-radius:var(--radius);
  backdrop-filter:blur(8px); padding:1.5rem; box-shadow:var(--shadow); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.card-title { font-size:1rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:.5rem; }

/* ── STAT CARDS ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--glass); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem; display:flex; align-items:center; gap:1rem; transition:transform .2s,box-shadow .2s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.5); }
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:1.4rem; flex-shrink:0; }
.stat-info .stat-value { font-size:1.75rem; font-weight:800; line-height:1; }
.stat-info .stat-label { font-size:.75rem; color:var(--text-muted); margin-top:.2rem; font-weight:500; }

/* ── TABLES ── */
.table-wrapper { overflow-x:auto; }

/* Barra de scroll horizontal más gruesa y visible, específica de las tablas
   (el resto de la app sigue con la scrollbar fina de siempre). */
.table-wrapper::-webkit-scrollbar { height:10px; }
.table-wrapper::-webkit-scrollbar-track { background:rgba(0,0,0,.25); border-radius:5px; }
.table-wrapper::-webkit-scrollbar-thumb { background:var(--accent); border-radius:5px; }

/* Contenedor + flechas para desplazar la tabla en pantallas chicas/tablet,
   por si el gesto de scroll horizontal no es obvio (trackpad, mouse). */
.tabla-scroll-outer { position:relative; }
.tabla-scroll-btn {
  /* top fijo cerca del encabezado, NO top:50% — con tablas largas sin paginar
     el contenedor puede medir decenas de miles de píxeles de alto, y 50% de
     eso dejaba el botón kilómetros fuera de pantalla. */
  position:absolute; top:52px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(10,31,15,.92); border:1px solid var(--border); color:var(--text);
  display:none; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.5); z-index:5; font-size:1rem;
  transition:background .2s, border-color .2s;
}
.tabla-scroll-btn:hover { background:var(--accent-glow); border-color:var(--accent); }
.tabla-scroll-btn.izq { left:.4rem; }
.tabla-scroll-btn.der { right:.4rem; }

table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead th { padding:.75rem 1rem; text-align:left; color:var(--text-muted); font-weight:600;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--border); background:rgba(0,0,0,.2); }
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
tbody tr:hover { background:var(--accent-glow); }
tbody td { padding:.75rem 1rem; color:var(--text); vertical-align:middle; }

/* ── BADGES / STATUS ── */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .65rem;
  border-radius:999px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.badge-pendiente   { background:rgba(245,158,11,.15); color:var(--amber);   border:1px solid rgba(245,158,11,.3); }
.badge-en-proceso  { background:rgba(59,130,246,.15);  color:var(--blue);    border:1px solid rgba(59,130,246,.3); }
.badge-verificado  { background:rgba(139,92,246,.15);  color:var(--purple);  border:1px solid rgba(139,92,246,.3); }
.badge-resuelto    { background:rgba(34,197,94,.15);   color:var(--accent);  border:1px solid rgba(34,197,94,.3); }
.badge-rechazado   { background:rgba(239,68,68,.15);   color:var(--red);     border:1px solid rgba(239,68,68,.3); }
.badge-programado  { background:rgba(59,130,246,.15);  color:var(--blue); }
.badge-completado  { background:rgba(34,197,94,.15);   color:var(--accent); }
.badge-cancelado   { background:rgba(239,68,68,.15);   color:var(--red); }
.badge-reprogramado{ background:rgba(139,92,246,.15);  color:var(--purple); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1.1rem;
  border-radius:8px; font-size:.875rem; font-weight:600; cursor:pointer;
  border:none; text-decoration:none; transition:all .2s ease; font-family:inherit; }
.btn-primary { background:var(--accent); color:#0a1f0f; }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-1px); }
.btn-secondary { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-secondary:hover { color:var(--text); border-color:var(--accent-dark); }
.btn-danger { background:rgba(239,68,68,.15); color:var(--red); border:1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.25); }
.btn-sm { padding:.35rem .75rem; font-size:.8rem; }
.btn-icon { padding:.5rem; border-radius:8px; }

/* ── FORMS ── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.form-control { background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:8px;
  padding:.65rem .9rem; color:var(--text); font-family:inherit; font-size:.9rem; transition:border-color .2s; width:100%; }
.form-control:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-control option { background:var(--bg-card); color:var(--text); }
textarea.form-control { resize:vertical; min-height:90px; }
.form-full { grid-column:1/-1; }

/* ── ALERTS ── */
.alert { padding:.85rem 1.1rem; border-radius:8px; font-size:.875rem; display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.alert-success { background:rgba(34,197,94,.12);  color:#86efac; border:1px solid rgba(34,197,94,.3); }
.alert-error   { background:rgba(239,68,68,.12);  color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.alert-info    { background:rgba(59,130,246,.12);  color:#93c5fd; border:1px solid rgba(59,130,246,.3); }

/* ── FILTER BAR ── */
.filter-bar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; margin-bottom:1.25rem; padding:1rem 1.25rem;
  background:rgba(0,0,0,.2); border-radius:var(--radius); border:1px solid var(--border); }
.filter-bar .form-group { min-width:160px; flex:1; }
.filter-bar label { font-size:.72rem; }

/* ── HISTORIAL TIMELINE ── */
.timeline { list-style:none; position:relative; padding-left:1.5rem; }
.timeline::before { content:''; position:absolute; left:.45rem; top:0; bottom:0; width:2px; background:var(--border); }
.timeline-item { position:relative; padding-bottom:1.25rem; }
.timeline-item::before { content:''; position:absolute; left:-1.15rem; top:.35rem; width:10px; height:10px;
  border-radius:50%; background:var(--accent); border:2px solid var(--bg-card); }
.timeline-item .tl-date { font-size:.72rem; color:var(--text-muted); margin-bottom:.2rem; }
.timeline-item .tl-body { font-size:.85rem; }
.timeline-item .tl-estado { font-weight:600; }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state .empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.4; }
.empty-state p { font-size:.9rem; margin-bottom:1rem; }

/* ── PAGINATION ── */
.pagination { display:flex; gap:.4rem; justify-content:flex-end; margin-top:1rem; flex-wrap:wrap; }
.pagination a, .pagination span { padding:.4rem .7rem; border-radius:6px; font-size:.8rem; font-weight:600;
  text-decoration:none; border:1px solid var(--border); color:var(--text-muted); transition:all .15s; }
.pagination a:hover { border-color:var(--accent); color:var(--accent); }
.pagination .current { background:var(--accent); color:#0a1f0f; border-color:var(--accent); }

/* ── CALENDAR overrides ── */
#calendar-container { background:transparent; }
.fc { --fc-border-color:var(--border); --fc-page-bg-color:transparent;
  --fc-today-bg-color:var(--accent-glow); --fc-event-border-color:transparent; }
.fc .fc-toolbar-title { color:var(--text); font-size:1rem; font-weight:700; }
.fc .fc-button { background:transparent; border:1px solid var(--border); color:var(--text-muted);
  font-size:.8rem; font-family:inherit; }
.fc .fc-button:hover { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }
.fc .fc-button-active { background:var(--accent-glow)!important; border-color:var(--accent)!important; color:var(--accent)!important; }
.fc-daygrid-day-number,.fc-col-header-cell-cushion { color:var(--text-muted); text-decoration:none; }
.fc-daygrid-event { border-radius:4px; font-size:.75rem; padding:.1rem .3rem; }

/* ── SELECTOR SÍ/NO (árbol propio, portal ciudadano) ── */
.radio-toggle { display:flex; flex-wrap:wrap; gap:.6rem; }
.radio-toggle-opt {
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  flex:1; min-width:200px; padding:.65rem .9rem;
  background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:8px;
  font-size:.88rem; color:var(--text); transition:border-color .15s, background .15s;
}
.radio-toggle-opt:has(input:checked) { border-color:var(--accent); background:var(--accent-glow); }
.radio-toggle-opt input[type=radio] { accent-color:var(--accent); width:16px; height:16px; flex-shrink:0; }

/* ── FOTOS DEL PORTAL CIUDADANO (múltiples) ── */
.foto-preview-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.6rem;
}
.foto-preview-grid:empty { margin-top:0; }
.foto-preview-grid img {
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px;
  border:1px solid var(--border);
}

/* Tablet / laptop chico: liberar espacio ocultando la columna menos usada
   de la tabla de reclamos (queda igual accesible en el detalle del reclamo). */
@media(max-width:1200px) {
  /* Por clase y no por :nth-child(2): la tabla ahora puede tener una columna
     de selección adelante, y el índice fijo escondía la columna equivocada. */
  #tabla-reclamos th.col-id-ant, #tabla-reclamos td.col-id-ant { display:none; }
}

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
  .menu-toggle { display:flex!important; }
  /* Botones e inputs con área táctil cómoda para celular */
  .btn { min-height:44px; }
  .form-control { min-height:44px; }
  textarea.form-control { min-height:90px; }
  .page-body { padding:1rem; }
}

/* Pantallas muy chicas (celulares angostos) */
@media(max-width:400px) {
  .login-card { padding:1.5rem 1.25rem; }
  .card { padding:1.1rem; }
}
.menu-toggle { display:none; background:transparent; border:none; color:var(--text); font-size:1.3rem; cursor:pointer; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99; }
.sidebar-overlay.open { display:block; }

/* ── LOGIN ── */
.login-bg { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 20% 50%,rgba(34,197,94,.12) 0%,transparent 60%),var(--bg-base); }
.login-card { width:100%; max-width:420px; background:var(--glass); border:1px solid var(--border);
  border-radius:20px; padding:2.5rem; backdrop-filter:blur(16px); box-shadow:0 24px 64px rgba(0,0,0,.5); }
.login-card .login-logo { text-align:center; margin-bottom:2rem; }
.login-card .login-logo .icon { width:64px; height:64px; background:var(--accent); border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1rem; }
.login-card .login-logo h1 { font-size:1.35rem; font-weight:800; }
.login-card .login-logo p  { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; }
.login-card .form-group { margin-bottom:1rem; }
.login-card .btn-primary { width:100%; justify-content:center; padding:.75rem; font-size:.95rem; margin-top:.5rem; }
.login-creds { margin-top:1.5rem; padding:1rem; background:rgba(0,0,0,.25); border-radius:8px;
  border:1px solid var(--border); font-size:.75rem; color:var(--text-muted); }
.login-creds strong { color:var(--text); }
.login-creds table { width:100%; }
.login-creds td { padding:.15rem .5rem; }

/* ── ANIMATIONS ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.animate-in { animation:fadeInUp .4s ease forwards; }
.animate-in:nth-child(2) { animation-delay:.05s; }
.animate-in:nth-child(3) { animation-delay:.1s; }
.animate-in:nth-child(4) { animation-delay:.15s; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow)} 50%{box-shadow:0 0 0 8px transparent} }
.pulse { animation:pulse-glow 2s infinite; }

/* ── MAPA DE CALOR PAGE ── */
body.mapa-page { overflow:hidden; }
body.mapa-page .main-content { height:100vh; overflow:hidden; }
body.mapa-page .topbar { flex-shrink:0; }

.mapa-body {
  flex:1; display:flex; overflow:hidden;
  height:calc(100vh - 61px); /* 61px = topbar */
}
.mapa-body.fullmap {
  height:100vh; position:fixed; inset:0; z-index:2000;
}

/* Panel lateral del mapa */
.mapa-panel {
  width:280px; flex-shrink:0; background:var(--bg-sidebar);
  border-right:1px solid var(--border); overflow-y:auto;
  padding:.75rem; display:flex; flex-direction:column; gap:.5rem;
  transition:transform .3s ease, width .3s ease;
}
.mapa-panel.hidden {
  width:0; padding:0; overflow:hidden;
  transform:translateX(-100%);
}

.mpanel-section {
  background:var(--glass); border:1px solid var(--border);
  border-radius:10px; padding:.75rem; flex-shrink:0;
}
.mpanel-title {
  font-size:.72rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:.6rem; display:flex; align-items:center; gap:.35rem;
}

/* Stats mini-grid */
.mstats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
}
.mstat {
  background:rgba(0,0,0,.2); border:1px solid var(--border);
  border-radius:8px; padding:.6rem .5rem; text-align:center;
}
.mstat-val { font-size:1.4rem; font-weight:800; line-height:1.1; }
.mstat-lbl { font-size:.62rem; color:var(--text-muted); margin-top:.15rem; font-weight:500; }

/* Form control pequeño */
.form-control-sm { font-size:.8rem; padding:.45rem .7rem; }

/* Layer toggles */
.layer-toggle { display:flex; flex-direction:column; gap:.4rem; }
.ltoggle {
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  font-size:.82rem; color:var(--text-muted); padding:.3rem .4rem;
  border-radius:6px; transition:background .15s;
}
.ltoggle:hover { background:var(--accent-glow); color:var(--text); }
.ltoggle input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; }

/* Leyenda */
.legend-list { list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.legend-list li { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text-muted); }
.leg-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Wrap del mapa */
.mapa-wrap {
  flex:1; position:relative; overflow:hidden;
}
#mapa-calor {
  width:100%; height:100%;
}

/* FAB buttons sobre el mapa */
.mapa-fab-group {
  position:absolute; bottom:1.5rem; right:1rem; z-index:900;
  display:flex; flex-direction:column; gap:.5rem;
}
.mapa-fab {
  width:42px; height:42px; border-radius:12px;
  background:rgba(10,31,15,.92); border:1px solid var(--border);
  color:var(--text); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:border-color .2s, background .2s, transform .15s;
}
.mapa-fab:hover { border-color:var(--accent); background:var(--accent-glow); transform:scale(1.08); }

/* Loading badge */
.mapa-loading {
  position:absolute; top:1rem; left:50%; transform:translateX(-50%);
  z-index:800; background:rgba(10,31,15,.92); border:1px solid var(--border);
  border-radius:20px; padding:.4rem 1rem; font-size:.8rem; color:var(--text-muted);
  display:none; align-items:center; gap:.5rem; backdrop-filter:blur(8px);
}
@keyframes spin { to { transform:rotate(360deg); } }
.spin {
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}

/* Leaflet popup dark */
.leaflet-popup-content-wrapper {
  background:var(--bg-card) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:12px !important;
  box-shadow:0 8px 32px rgba(0,0,0,.6) !important;
}
.leaflet-popup-tip-container .leaflet-popup-tip { background:var(--bg-card) !important; }
.leaflet-popup-close-button { color:var(--text-muted) !important; font-size:16px !important; }

/* Cluster styles */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background:rgba(34,197,94,.18) !important;
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background:rgba(34,197,94,.5) !important; color:var(--text) !important; font-weight:700;
}


/* ── GALERÍA DE IMÁGENES ── */
.galeria-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem;
}
.galeria-item {
  position:relative; border-radius:10px; overflow:hidden;
  border:2px solid var(--border); aspect-ratio:1; cursor:pointer;
  transition:border-color .2s, transform .2s;
}
.galeria-item:hover { border-color:var(--accent); transform:scale(1.02); }
.galeria-item img { width:100%; height:100%; object-fit:cover; display:block; }
.galeria-item .img-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  opacity:0; transition:opacity .2s;
}
.galeria-item:hover .img-overlay { opacity:1; }
.galeria-item .img-overlay button {
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:8px; padding:.4rem .6rem; cursor:pointer;
  font-size:.85rem; transition:background .15s;
}
.galeria-item .img-overlay button:hover { background:rgba(255,255,255,.25); }

/* Drop Zone */
.dropzone {
  border:2px dashed var(--border); border-radius:12px; padding:2rem 1rem;
  text-align:center; cursor:pointer; transition:border-color .2s, background .2s;
  color:var(--text-muted);
}
.dropzone:hover, .dropzone.dragover {
  border-color:var(--accent); background:var(--accent-glow); color:var(--text);
}
.dropzone .dz-icon { font-size:2.2rem; margin-bottom:.5rem; }
.dropzone p { font-size:.85rem; }
.dropzone small { font-size:.72rem; opacity:.7; }

/* Progreso de carga */
.upload-progress { margin-top:.75rem; display:none; }
.upload-progress .prog-bar-bg { background:rgba(0,0,0,.3); border-radius:999px; height:6px; overflow:hidden; }
.upload-progress .prog-bar { background:var(--accent); height:6px; border-radius:999px;
  width:0%; transition:width .3s ease; }

/* Barra indeterminada (ej. envío de un comunicado: no hay % real de bytes, solo "está en curso") */
@keyframes prog-indeterminado { 0%{transform:translateX(-100%)} 100%{transform:translateX(250%)} }
.prog-bar-indeterminate { width:35%!important; transition:none; animation:prog-indeterminado 1.1s ease-in-out infinite; }

/* ── LIGHTBOX ── */
.lightbox-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.lightbox-backdrop.open { opacity:1; pointer-events:all; }
.lightbox-inner { position:relative; max-width:90vw; max-height:88vh; }
.lightbox-inner img { max-width:90vw; max-height:85vh; border-radius:10px; object-fit:contain; display:block; }
.lightbox-close {
  position:absolute; top:-1rem; right:-1rem; background:rgba(255,255,255,.12);
  border:none; color:#fff; border-radius:50%; width:36px; height:36px;
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); border:none; color:#fff; width:40px; height:40px;
  border-radius:50%; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.lightbox-nav:hover { background:rgba(255,255,255,.25); }
.lightbox-nav.prev { left:-3rem; }
.lightbox-nav.next { right:-3rem; }
.lightbox-caption {
  position:absolute; bottom:-2.2rem; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.6); font-size:.8rem;
}

/* ── MAPA ── */
.map-container {
  position:relative;
  border:1px solid var(--border);
  border-radius:12px;
  /* SIN overflow:hidden – bloquea los tiles de Leaflet */
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.map-container.normal { height:400px; }
.map-container.fullscreen {
  position:fixed; inset:0; z-index:1500;
  border-radius:0; height:100vh!important; border:none;
}
/* El div del mapa necesita height explícito */
#mapa {
  width:100%; height:400px;
  border-radius:11px;     /* coincide con .map-container */
  z-index:1;
}
.map-container.fullscreen #mapa { height:100vh; border-radius:0; }

.map-toolbar {
  position:absolute; top:.75rem; right:.75rem; z-index:900;
  display:flex; flex-direction:column; gap:.4rem;
}
.map-toolbar button {
  background:rgba(10,31,15,.92); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:.45rem .6rem; font-size:.85rem; cursor:pointer;
  backdrop-filter:blur(8px); display:flex; align-items:center; gap:.35rem;
  transition:border-color .2s, background .2s; white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.map-toolbar button:hover { border-color:var(--accent); background:var(--accent-glow); }
.map-toolbar button.active { border-color:var(--accent); color:var(--accent); }

.map-geo-info {
  background:rgba(10,31,15,.9); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:8px;
  padding:.5rem .75rem; font-size:.78rem; color:var(--text-muted);
  margin-top:.75rem;
}
.map-geo-info strong { color:var(--text); }
.map-save-btn { display:none; margin-top:.5rem; }

/* Leaflet overrides – minimal, sin filters que bloqueen tiles */
.leaflet-container { font-family:'Inter',sans-serif; }
.leaflet-popup-content-wrapper {
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow);
}
.leaflet-popup-tip { background:var(--bg-card); }
.leaflet-control-zoom a {
  background:rgba(10,31,15,.92)!important; color:var(--text)!important;
  border-color:var(--border)!important;
}
.leaflet-control-zoom a:hover { background:var(--accent-glow)!important; }
.leaflet-control-attribution {
  background:rgba(10,31,15,.75)!important; color:var(--text-muted)!important; font-size:.65rem;
}
.leaflet-control-attribution a { color:var(--accent)!important; }


/* ============================================================
   V2 – Autocomplete de calles, observaciones, tabla ordenable,
   recorridos
   ============================================================ */

/* Autocomplete de calles */
.ac-wrap { position:relative; }
.ac-list {
  display:none; position:absolute; z-index:50; left:0; right:0; top:100%;
  background:var(--bg-card); border:1px solid var(--border); border-radius:0 0 10px 10px;
  max-height:240px; overflow-y:auto; box-shadow:var(--shadow);
}
.ac-item { padding:.5rem .85rem; cursor:pointer; font-size:.85rem; }
.ac-item:hover, .ac-item.active { background:var(--accent-glow); color:var(--accent); }
input.ac-invalid { border-color:#ef4444 !important; }

/* Tabla ordenable */
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable .sort-ind { opacity:.4; font-size:.7rem; margin-left:.25rem; }
th.sortable.sorted .sort-ind { opacity:1; color:var(--accent); }

/* Observaciones (hilo con fecha) */
.obs-list { display:flex; flex-direction:column; gap:.6rem; }
.obs-item {
  background:rgba(0,0,0,.2); border:1px solid var(--border);
  border-radius:8px; padding:.6rem .8rem; font-size:.85rem;
}
.obs-meta { font-size:.72rem; color:var(--text-muted); margin-bottom:.25rem; display:flex; justify-content:space-between; gap:.5rem; }
.obs-texto { white-space:pre-wrap; }

/* Recorridos */
.dia-chip {
  display:inline-block; padding:.15rem .55rem; border-radius:99px;
  font-size:.7rem; font-weight:600; border:1px solid var(--border);
}

/* Mapa fijo mientras se scrollea la lista de zonas (panel derecho) */
.recorrido-mapa-sticky {
  position:sticky;
  top:77px; /* debajo del topbar (sticky, ~61px) + un respiro */
  align-self:start;
}

/* Lista de zonas con scroll propio, para no arrastrar la altura de toda la página */
.lista-zonas-scroll {
  max-height:600px;
  overflow-y:auto;
}

/* Grupo por día: encabezado clickeable para contraer/expandir */
.dia-group { border-bottom:1px solid var(--border); }
.dia-group:last-child { border-bottom:none; }
.dia-header {
  display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem;
  background:rgba(0,0,0,.25); cursor:pointer; user-select:none;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  transition:background .15s;
}
.dia-header:hover { background:rgba(0,0,0,.4); }
.dia-count { color:var(--text-muted); font-weight:500; text-transform:none; letter-spacing:normal; }

.zona-row { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border-bottom:1px solid var(--border); font-size:.83rem; }
.zona-row:last-child { border-bottom:none; }
.zona-color { width:14px; height:14px; border-radius:4px; flex:none; }
.zona-row.completada { opacity:.75; }
.zona-row.completada .zona-nombre { text-decoration:line-through; }

/* Inputs que solo admiten mayusculas (apellido / nombre) */
input.input-mayusculas { text-transform:uppercase; }
input.input-mayusculas::placeholder { text-transform:none; opacity:.55; }

/* Etiquetas de nombre sobre el mapa de recorridos */
.leaflet-tooltip.recorrido-label {
  background:rgba(10,31,15,.85); color:#fff;
  border:1px solid var(--border); border-radius:6px;
  font-weight:700; font-size:.72rem; padding:.12rem .45rem;
  box-shadow:0 1px 5px rgba(0,0,0,.5); white-space:nowrap;
}
.leaflet-tooltip.recorrido-sublabel {
  background:rgba(0,0,0,.55); color:#d1fae5;
  border:none; border-radius:5px;
  font-weight:600; font-size:.64rem; padding:0 .35rem; white-space:nowrap;
}
.leaflet-tooltip.recorrido-label::before,
.leaflet-tooltip.recorrido-sublabel::before { display:none; }

/* Fila de subzona (sección) en el panel */
.subzona-row {
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem .35rem 1.6rem; font-size:.78rem;
  border-bottom:1px solid var(--border);
}
.subzona-row:last-child { border-bottom:none; }
.subzona-row.completada .zona-nombre { text-decoration:line-through; opacity:.75; }

/* Banner de edición de forma */
.edicion-banner {
  display:none; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin-top:.6rem; padding:.6rem .8rem;
  background:var(--accent-glow); border:1px solid var(--accent);
  border-radius:10px; font-size:.8rem;
}

/* Editor de forma: barra de herramientas flotante */
.editor-toolbar {
  display:none; position:absolute; top:.75rem; left:.75rem; z-index:1000;
  align-items:center; gap:.25rem; flex-wrap:wrap; max-width:calc(100% - 1.5rem);
  background:rgba(10,31,15,.94); border:1px solid var(--border);
  border-radius:10px; padding:.4rem .5rem; backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.editor-toolbar .et-titulo {
  font-size:.74rem; font-weight:700; color:var(--accent);
  padding:0 .4rem; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.editor-toolbar .et-sep { width:1px; align-self:stretch; background:var(--border); margin:0 .15rem; }
.editor-toolbar button {
  background:transparent; border:1px solid transparent; color:var(--text);
  border-radius:7px; padding:.35rem .5rem; font-size:.82rem; cursor:pointer;
  display:flex; align-items:center; gap:.3rem; transition:all .15s; white-space:nowrap;
}
.editor-toolbar button:hover { background:var(--accent-glow); border-color:var(--border); }
.editor-toolbar button.active { background:var(--accent); color:#06210f; font-weight:700; }
.editor-toolbar button.et-guardar { background:var(--accent); color:#06210f; font-weight:700; }
.editor-toolbar button:disabled { opacity:.35; cursor:not-allowed; }

/* Vértices del editor */
.vtx {
  background:#fff; border:2px solid #2563eb; border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); cursor:move;
}
.vtx.vtx-quitar { border-color:#ef4444; cursor:pointer; }
.vtx.vtx-fijo   { cursor:default; }

/* Chips de alarma en el formulario de agenda */
.alarma-chip {
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.3rem .65rem; border:1px solid var(--border); border-radius:99px;
  font-size:.78rem; user-select:none; transition:all .15s;
}
.alarma-chip:hover { border-color:var(--accent); }
.alarma-chip:has(input:checked) { background:var(--accent-glow); border-color:var(--accent); color:var(--accent); }

/* Eventos destacados en el calendario */
.fc-event.ev-fijado { box-shadow:0 0 0 2px var(--accent); font-weight:700; }
.fc-event.ev-estimado { opacity:.75; border-style:dashed !important; }

/* FullCalendar adaptado al tema oscuro */
.fc { --fc-border-color:var(--border); --fc-page-bg-color:transparent; color:var(--text); }
.fc .fc-toolbar-title { font-size:1.05rem; }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number,
.fc .fc-timegrid-axis-cushion,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text { color:var(--text); text-decoration:none; }
.fc .fc-day-today { background:var(--accent-glow) !important; }
.fc .fc-list-event:hover td { background:var(--accent-glow); }
.fc .fc-list-empty { background:transparent; color:var(--text-muted); }
.fc-theme-standard td, .fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid { border-color:var(--border); }
.fc .fc-button {
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  text-transform:capitalize; font-size:.8rem; box-shadow:none;
}
.fc .fc-button:hover { background:var(--accent-glow); border-color:var(--accent); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background:var(--accent); border-color:var(--accent); color:#06210f;
}
.fc .fc-button-primary:disabled { opacity:.5; }

/* Adjuntos PDF */
.adj-list { display:flex; flex-direction:column; gap:.5rem; }
.adj-item {
  display:flex; align-items:center; gap:.5rem; font-size:.85rem;
  background:rgba(0,0,0,.2); border:1px solid var(--border);
  border-radius:8px; padding:.5rem .7rem;
}
.adj-item a { color:var(--accent); text-decoration:none; flex:1; word-break:break-all; }
.adj-item a:hover { text-decoration:underline; }
.adj-tam { font-size:.72rem; color:var(--text-muted); }
.adj-del { background:transparent; border:none; color:#ef4444; cursor:pointer; padding:.2rem .35rem; }
.adj-vacio { text-align:center; padding:.75rem; color:var(--text-muted); font-size:.82rem; }

/* Reiterados (mismo árbol) */
.reit-chip {
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.4);
  color:var(--text); border-radius:99px; padding:.3rem .7rem; font-size:.8rem;
}
.reit-chip:hover { background:rgba(239,68,68,.18); }
.reit-count { background:#ef4444; color:#fff; border-radius:99px; padding:0 .45rem; font-size:.72rem; font-weight:700; }
.reit-abiertos { font-size:.68rem; color:#f59e0b; }
.badge-reit {
  display:inline-block; background:#ef4444; color:#fff; border-radius:99px;
  padding:0 .4rem; font-size:.68rem; font-weight:700; margin-left:.25rem; white-space:nowrap;
}
.chk-realizado-wrap { margin-left:.4rem; vertical-align:middle; }
.chk-realizado { width:18px; height:18px; cursor:pointer; accent-color:var(--accent); }

/* Seguimiento de recorridos */
.seg-row { display:flex; align-items:center; gap:.5rem; padding:.45rem .2rem; border-bottom:1px solid var(--border); }
.seg-row:last-child { border-bottom:none; }

/* ── PHE (Poda con Hidro Elevador) – marca interna, nunca la ve el ciudadano ── */
.badge-phe {
  display:inline-block; background:rgba(6,182,212,.16); color:#22d3ee;
  border:1px solid rgba(6,182,212,.5); border-radius:99px;
  padding:.05rem .5rem; font-size:.7rem; font-weight:700; letter-spacing:.03em;
}
.chk-phe-wrap {
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  padding:.55rem .7rem; border:1px solid rgba(6,182,212,.4);
  background:rgba(6,182,212,.07); border-radius:8px;
}
.chk-phe-wrap input { width:18px; height:18px; cursor:pointer; accent-color:#06b6d4; flex-shrink:0; }

/* ── Selección múltiple del listado de reclamos ── */
.chk-sel { width:17px; height:17px; cursor:pointer; accent-color:var(--accent); }
.barra-masiva {
  position:sticky; bottom:0; z-index:20;
  display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap;
  margin-top:.75rem; padding:.7rem .9rem;
  background:rgba(10,31,15,.97); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 -4px 16px rgba(0,0,0,.45);
}
.barra-masiva .bm-texto { margin-right:auto; font-size:.85rem; }
.barra-masiva .bm-texto strong { color:var(--accent); font-size:1rem; }

/* ── Buscador de reclamos (asociar a un evento de agenda) ── */
.rp-wrap { position:relative; }
.rp-row { display:flex; gap:.5rem; align-items:stretch; }
.rp-row .rp-input { flex:1; min-width:0; }
.rp-row .rp-clear { flex-shrink:0; }
.rp-list {
  display:none; position:absolute; z-index:60; left:0; right:0; top:100%;
  background:var(--bg-card); border:1px solid var(--border); border-radius:0 0 10px 10px;
  max-height:320px; overflow-y:auto; box-shadow:var(--shadow);
}
.rp-item { padding:.5rem .85rem; cursor:pointer; border-bottom:1px solid var(--border); }
.rp-item:last-child { border-bottom:none; }
.rp-item:hover, .rp-item.active { background:var(--accent-glow); }
.rp-item .rp-id { font-weight:700; color:var(--accent); margin-right:.4rem; font-size:.85rem; }
.rp-item .rp-nombre { font-size:.85rem; font-weight:500; }
.rp-item .rp-meta { display:block; font-size:.72rem; color:var(--text-muted); margin-top:.1rem; }
.rp-empty { padding:.6rem .85rem; font-size:.8rem; color:var(--text-muted); }
.rp-info { font-size:.72rem; color:var(--text-muted); margin-top:.4rem; }

/* ── ABM de calles (Administración → Calles) ── */
.calles-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.6rem;
}
.calle-item {
  display:flex; gap:.4rem; align-items:center;
  background:rgba(0,0,0,.2); border:1px solid var(--border);
  border-radius:8px; padding:.4rem .5rem;
}
.calle-item input[type=text] { flex:1; min-width:0; font-size:.82rem; padding:.35rem .5rem; }
.calle-item .btn { flex-shrink:0; }