* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2933; background: #f4f6f8; }
body { display: flex; }
#panel { width: 310px; flex: none; height: 100%; overflow-y: auto; background: #fff; border-right: 1px solid #d9dee3; padding: 12px 14px; }
#mapa { flex: 1; height: 100%; }
h1 { font-size: 17px; margin: 0 0 4px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #52606d; margin: 0 0 8px; display: flex; justify-content: space-between; }
section { border-top: 1px solid #e4e7eb; padding: 12px 0; }
header { padding-bottom: 10px; }
.estado { font-size: 12px; color: #52606d; margin-bottom: 8px; }
.estado.error { color: #b42318; }
label { display: block; font-size: 12px; color: #52606d; margin-bottom: 6px; }
select, input[type=search] { width: 100%; padding: 6px 8px; border: 1px solid #cbd2d9; border-radius: 6px; font: inherit; color: inherit; background: #fff; }
select { margin-top: 2px; }
button, .boton-archivo { display: inline-block; padding: 6px 10px; border: 1px solid #cbd2d9; border-radius: 6px; background: #f5f7fa; font: inherit; font-size: 13px; color: #1f2933; cursor: pointer; }
button:hover, .boton-archivo:hover { background: #e4e7eb; }
#btn-recargar { background: #1769aa; border-color: #1769aa; color: #fff; }
#btn-recargar:hover { background: #125488; }
.fila { display: flex; gap: 6px; margin-top: 6px; }
.fila input { flex: 1; }
.check { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #1f2933; }
.conteo { font-weight: normal; text-transform: none; letter-spacing: 0; color: #1769aa; }
#lista-capas { list-style: none; padding: 0; margin: 8px 0 0; }
#lista-capas li { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; }
#lista-capas li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lista-capas li button { padding: 2px 6px; font-size: 12px; }
#lista-capas .muestra { width: 12px; height: 12px; border-radius: 3px; flex: none; }
#archivos { font-size: 12px; color: #52606d; margin-top: 8px; }
#archivos div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#resultados-lugar div { font-size: 12px; padding: 4px 2px; cursor: pointer; border-bottom: 1px solid #f0f2f4; }
#resultados-lugar div:hover { background: #f0f4f8; }

.popup-nap table { border-collapse: collapse; font-size: 12px; }
.popup-nap td { padding: 2px 6px 2px 0; vertical-align: top; }
.popup-nap td:first-child { color: #52606d; white-space: nowrap; }
.popup-nap h3 { margin: 0 0 6px; font-size: 14px; }
.popup-nap .sep td { border-top: 1px solid #e4e7eb; padding-top: 4px; }
.leaflet-tooltip.etiqueta-kml { background: rgba(255,255,255,.8); border: none; box-shadow: none; font-weight: 600; font-size: 11px; padding: 1px 4px; color: #102a43; }
.leaflet-tooltip.etiqueta-kml::before { display: none; }
.oculta-etiquetas .etiqueta-kml { display: none; }

.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.modal[hidden] { display: none; }
.modal-caja { background: #fff; border-radius: 8px; width: min(900px, 94vw); max-height: 85vh; display: flex; flex-direction: column; }
.modal-titulo { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #e4e7eb; }
#tabla-problemas { overflow: auto; padding: 0 14px 14px; }
#tabla-problemas table { border-collapse: collapse; width: 100%; font-size: 12px; }
#tabla-problemas th, #tabla-problemas td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #f0f2f4; }
#tabla-problemas th { position: sticky; top: 0; background: #fff; }
#tabla-problemas tr.aviso td { color: #8a6d00; }
.aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #102a43; color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 3000; font-size: 13px; }

@media (max-width: 700px) {
  body { flex-direction: column; }
  #panel { width: 100%; height: 45%; border-right: none; border-bottom: 1px solid #d9dee3; }
}

/* ===== Aspecto de Telecable (mismos colores y letras que Visitas Empresariales) ===== */
:root{
  --red:#FF0044; --red-ink:#D10038; --purple:#6B2FA0; --yellow:#FFC000;
  --bg:#F6F4F7; --surface:#FFFFFF; --surface-2:#EFEBF2; --fg:#1E1A22; --muted:#625A6B; --line:#DCD5E2;
  --bad:#B4232C; --bad-bg:#FCE4E6; --ok:#1E8A4C; --focus:#6B2FA0;
  --f-display:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
}
html,body{font-family:var(--f-body);color:var(--fg);background:var(--bg)}
body{flex-direction:column}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.muted{color:var(--muted)}

.top{background:var(--red);color:#fff;flex:none;z-index:1100;padding:0}
.top-in{display:flex;align-items:center;gap:14px;padding:10px 16px}
.top img{height:26px;width:auto;display:block}
.top .app{font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:.02em;padding-left:14px;border-left:1px solid rgba(255,255,255,.45)}
.top .sp{flex:1}
.stripe{height:6px;background:linear-gradient(90deg,var(--yellow) 0 72%,var(--purple) 72% 100%)}
.top .chip,.top button.lnk{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:999px;padding:5px 12px;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.top button.lnk{cursor:pointer}
.top button.lnk:hover{background:rgba(255,255,255,.28)}

#cuerpo{flex:1;display:flex;min-height:0}
#panel{height:auto;border-right-color:var(--line)}
h2{font-family:var(--f-display);font-size:13px;color:var(--muted)}
section{border-top-color:var(--line)}
button,.boton-archivo{border-color:var(--line);border-radius:8px;background:var(--surface);font-weight:600}
button:hover,.boton-archivo:hover{background:var(--surface-2)}
#btn-recargar{background:var(--red);border-color:var(--red)}
#btn-recargar:hover{background:var(--red-ink)}
select,input[type=search]{border-color:var(--line);border-radius:8px}
.conteo{color:var(--red-ink)}
.estado.error{color:var(--bad)}
.aviso{background:var(--fg)}
.nota{font-size:12px;color:var(--muted);margin:6px 0 0}
#carpeta{font-size:12px;margin-bottom:6px}
#carpeta a{color:var(--purple);font-weight:600}
#archivos{margin-bottom:8px}

.pantalla{flex:1;overflow-y:auto}
.caja{max-width:480px;margin:48px auto;padding:0 16px;display:flex;flex-direction:column;gap:16px}
.caja h2{font-size:1.5rem;color:var(--fg);text-transform:none;letter-spacing:0;margin:0;display:block}
.caja p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;min-height:44px;font-size:1rem;align-self:flex-start}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff}
.btn.pri:hover{background:var(--red-ink);border-color:var(--red-ink)}
.error-caja{background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:10px 14px;font-weight:600}

@media (max-width:700px){
  #cuerpo{flex-direction:column}
  #panel{width:100%;height:45%;flex:none}
  .top .app{display:none}
}