/* ============================================================
   Cable Golden - Panel Web
   ============================================================ */
:root{
  --oro:#e0a814; --oro-osc:#b98205; --azul:#123954; --azul-osc:#08283e;
  --gris:#f3f6f8; --gris2:#dfe6eb; --texto:#1b2b36; --muted:#687985;
  --ok:#1e8e5a; --warn:#d98a00; --danger:#c0392b; --info:#2c72c4;
  --radio:14px; --sombra:0 8px 26px rgba(16,45,65,.08);
}
*{box-sizing:border-box}
html{min-width:320px}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--gris);color:var(--texto);line-height:1.45}
button{font-family:inherit;cursor:pointer}
a{color:var(--info);text-decoration:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.nav-item:focus-visible{
  outline:3px solid rgba(224,168,20,.35);outline-offset:2px
}

/* ---------- Login ---------- */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;background:
  radial-gradient(circle at 18% 12%,rgba(224,168,20,.17),transparent 28%),
  linear-gradient(145deg,var(--azul),var(--azul-osc))}
.login-card{background:#fff;padding:36px 34px 30px;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.24);width:390px;max-width:100%;text-align:left}
.login-brand{width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,var(--oro),var(--oro-osc));color:white;
  display:grid;place-items:center;font-size:17px;font-weight:800;letter-spacing:.5px;margin-bottom:18px}
.login-card h1{margin:0 0 3px;color:var(--azul);font-size:26px;letter-spacing:-.5px}
.login-card .marca{color:var(--oro-osc);font-weight:700;letter-spacing:1px}
.login-card p{color:var(--muted);margin:0 0 24px;font-size:14px}
.login-card label{display:block;color:var(--azul);font-weight:650;font-size:13px;margin:12px 0 6px}
.login-card input{width:100%;height:46px;padding:11px 13px;border:1px solid var(--gris2);border-radius:10px;font-size:15px;background:#fbfcfd}
.password-wrap{position:relative}
.password-wrap input{padding-right:56px}
.login-card .password-toggle{position:absolute;right:6px;top:6px;width:auto;height:34px;padding:0 10px;margin:0;border:0;background:transparent;color:var(--azul);font-size:12px;font-weight:700}
.login-card .login-submit{width:100%;margin-top:20px;padding:13px;background:var(--oro);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:750}
.login-card .login-submit:hover{background:var(--oro-osc)}
.login-card .login-submit:disabled{cursor:wait;opacity:.7}
.login-err{color:var(--danger);font-size:13px;min-height:20px;margin-top:10px;text-align:center}

/* ---------- Layout ---------- */
#app{display:none;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:236px;background:linear-gradient(180deg,var(--azul),var(--azul-osc));
  color:#cfe0ee;padding:22px 0 16px;overflow-y:auto;display:flex;flex-direction:column;z-index:40}
.sidebar .logo{padding:0 22px 20px;font-size:21px;font-weight:750;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:-.4px}
.sidebar .logo span{color:var(--oro)}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#cfe0ee;cursor:pointer;font-size:14px;border-left:3px solid transparent;transition:.18s}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:rgba(224,168,20,.16);border-left-color:var(--oro);color:#fff}
.nav-item .ico{width:22px;text-align:center;font-size:18px;font-weight:500}
.sidebar .user{padding:17px 22px 0;margin-top:auto;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.sidebar .user b{color:#fff;display:block}
.rol-pill{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.1);color:#d8e7f0;font-size:11px;text-transform:capitalize}
.sidebar .salir{display:block;color:var(--oro);font-size:12px;cursor:pointer;margin-top:10px;padding:0;border:0;background:none}
.mobile-logout{display:none}

.main{margin-left:236px;padding:30px 34px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.topbar h2{margin:0;color:var(--azul);font-size:25px;letter-spacing:-.6px}
.topbar .fecha{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.subtitulo{color:var(--muted);font-size:13px;margin-top:3px}

/* ---------- Tarjetas KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:15px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid rgba(18,57,84,.05);border-radius:var(--radio);padding:18px 20px;box-shadow:var(--sombra)}
.kpi .n{font-size:30px;font-weight:750;color:var(--azul);line-height:1.15}
.kpi .l{font-size:13px;color:var(--muted);margin-top:2px}
.kpi.oro .n{color:var(--oro-osc)} .kpi.ok .n{color:var(--ok)}
.kpi.warn .n{color:var(--warn)} .kpi.info .n{color:var(--info)}

/* ---------- Tablas y paneles ---------- */
.panel{background:#fff;border:1px solid rgba(18,57,84,.05);border-radius:var(--radio);box-shadow:var(--sombra);padding:20px;margin-bottom:20px;overflow-x:auto}
.panel h3{margin:0 0 14px;color:var(--azul);font-size:17px}
.panel-desplegable{padding:0;overflow:hidden}
.red-poste{--red-sector:#dfe5e9;border:1px solid var(--gris2);border-left:5px solid var(--red-sector);
  border-radius:11px;margin-top:10px;background:#fff;overflow:hidden}
.red-poste.ubicacion-alerta{box-shadow:0 0 0 2px rgba(230,126,34,.18)}
.red-poste>summary{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;
  cursor:pointer;list-style:none;background:#fafcfd}
.red-poste>summary::-webkit-details-marker{display:none}
.red-poste>summary:hover{background:#f3f7f9}
.red-poste>summary::before{content:'›';color:var(--azul);font-size:23px;font-weight:700;line-height:1;
  transition:transform .16s ease}
.red-poste[open]>summary::before{transform:rotate(90deg)}
.red-poste-identidad{display:flex;flex-direction:column;min-width:190px;color:var(--azul)}
.red-poste-identidad small{color:var(--muted);font-weight:400;margin-top:2px}
.red-poste-metricas{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-left:auto}
.red-metrica{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;background:#edf2f5;
  color:#536673;font-size:12px;font-weight:650;white-space:nowrap}
.red-metrica.internet{background:#dff3e8;color:#137346}
.red-metrica.coaxial{background:#fff2cf;color:#8b6500}
.red-metrica.revisar{background:#fff0d8;color:#a84f06}
.red-zona-chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;
  background:color-mix(in srgb,var(--red-sector) 14%,white);color:var(--red-sector);
  border:1px solid color-mix(in srgb,var(--red-sector) 35%,white);font-size:12px;font-weight:750}
.red-poste-contenido{padding:15px 16px 16px;border-top:1px solid var(--gris2)}
.red-poste-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;
  color:var(--muted);font-size:13px;margin-bottom:12px}
.red-poste-datos b{color:var(--texto)}
.red-acciones{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.red-tabla-equipos small{color:var(--muted)}
.red-popup-poste{padding:5px 0;border-top:1px solid #dde4e8}
.red-popup-poste:first-child{border-top:0}
.red-popup-zona{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:var(--red-sector)}
.red-popup-alerta{margin:5px 0;padding:5px 7px;border-radius:6px;background:#fff0d8;color:#a84f06;font-weight:750}
.red-aviso-ubicacion{margin:0 0 12px;padding:9px 11px;border:1px solid #f3c182;border-radius:9px;
  background:#fff8eb;color:#8b4c0e;font-size:12px}
.red-mapa-panel{overflow:visible}
.red-mapa-panel .mapa-encabezado{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.red-mapa-panel .mapa-encabezado h3{margin-bottom:2px}
.red-mapa-panel .mapa-encabezado p{margin:0;color:var(--muted);font-size:13px}
.red-mapa-acciones{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.red-mapa-opciones{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-2px 0 12px;
  padding:9px 12px;border:1px solid var(--gris2);border-radius:10px;background:#f8fafb;color:var(--azul);font-size:12px}
.red-mapa-opciones label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.red-mapa-opciones input{accent-color:var(--oro)}
.red-mapa-ayuda{margin-left:auto;color:var(--muted)}
.red-mapa-estado{display:flex;align-items:center;gap:8px 15px;flex-wrap:wrap;margin:-3px 0 10px;
  padding:8px 11px;border-radius:9px;background:#eef4f7;color:#536673;font-size:12px}
.red-mapa-estado>span{display:inline-flex;align-items:center;gap:5px}
.red-mapa-estado .correcto{color:var(--ok);font-weight:700}.red-mapa-estado .alerta{color:#a84f06;font-weight:750}
.red-estado-sector i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(18,57,84,.18)}
.red-mapa-estado-ayuda{margin-left:auto}
/* Con mas de 350 postes el mapa necesita aire: crece con la pantalla
   pero nunca se pasa de lo que cabe sin hacer scroll. */
.red-mapa{height:clamp(560px, 68vh, 820px);border-radius:12px;overflow:hidden;border:1px solid var(--gris2);background:#e8eef2}
.red-mapa-leyenda{display:flex;gap:9px 17px;align-items:center;flex-wrap:wrap;margin-top:11px;
  color:var(--muted);font-size:12px}
.red-mapa-leyenda>span,.red-leyenda-sector{display:inline-flex;align-items:center;gap:6px}
.red-leyenda-sector{border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);
  padding:4px 7px;font:inherit;cursor:pointer}
.red-leyenda-sector:hover,.red-leyenda-sector.activo{background:#f1f5f7;border-color:#ccd9e0;color:var(--azul)}
.red-leyenda-punto{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(18,57,84,.22);font-style:normal;font-size:9px;font-weight:800}
/* El color de cada zona lo pone el JS con style="background:..." */
.red-leyenda-punto.averiado{background:var(--danger)}
.red-leyenda-punto.revisar{background:#f28c28;color:#fff;border-color:#fff}
.red-leyenda-punto.headend{width:17px;height:17px;border-radius:5px;background:#e5a900;color:var(--azul);border-color:var(--azul)}
.red-leyenda-ayuda{margin-left:auto}
.red-div-icon{background:transparent!important;border:0!important}
.red-marcador{--red-sector:#526d7b;position:relative;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--red-sector);color:#fff;border:3px solid #fff;
  box-shadow:0 3px 10px rgba(13,40,58,.42);font-size:12px;font-weight:800;line-height:1}
.red-marcador::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--red-sector);filter:drop-shadow(0 2px 1px rgba(13,40,58,.2))}
.red-marcador.averiado{--red-sector:var(--danger);box-shadow:0 0 0 4px rgba(192,57,43,.24),0 3px 10px rgba(13,40,58,.42)}
.red-marcador.retirado{--red-sector:#8c9aa3;opacity:.78}
.red-marcador.headend{--red-sector:#e5a900;color:var(--azul);border-color:var(--azul);border-radius:9px;font-size:18px}
.red-marcador.buscado{box-shadow:0 0 0 5px rgba(224,168,20,.42),0 4px 14px rgba(13,40,58,.55);transform:scale(1.13)}
.red-marcador.ubicacion-alerta{box-shadow:0 0 0 5px rgba(242,140,40,.72),0 4px 14px rgba(13,40,58,.5)}
.red-marcador.ubicacion-alerta::before{content:'!';position:absolute;right:-8px;top:-9px;width:18px;height:18px;
  border-radius:50%;display:grid;place-items:center;background:#f28c28;color:#fff;border:2px solid #fff;
  font-size:11px;font-weight:900;z-index:2}
.red-marcador.ubicacion-alerta.buscado{box-shadow:0 0 0 6px rgba(242,140,40,.78),0 4px 16px rgba(13,40,58,.6)}
.red-marcador-conteo{position:absolute;right:-9px;top:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  display:grid;place-items:center;background:var(--azul-osc);color:#fff;border:2px solid #fff;font-size:10px;line-height:1}
.red-etiqueta-mapa{background:rgba(8,40,62,.92)!important;color:#fff!important;border:0!important;
  border-radius:6px!important;padding:3px 7px!important;box-shadow:0 2px 8px rgba(0,0,0,.2)!important;
  font:700 11px/1.2 "Segoe UI",sans-serif!important;white-space:nowrap}
.red-etiqueta-mapa::before{border-top-color:rgba(8,40,62,.92)!important}
.red-linea-tooltip{font:600 11px/1.3 "Segoe UI",sans-serif!important;color:var(--azul)!important}
.red-enlace-alerta{filter:drop-shadow(0 0 3px rgba(216,67,21,.9))}
.red-mapa-panel:fullscreen{background:#fff;margin:0;border-radius:0;padding:16px;overflow:auto}
.red-mapa-panel:fullscreen .red-mapa{height:calc(100vh - 235px);min-height:420px}
.red-mapa-panel:fullscreen .mapa-encabezado p{display:none}
.red-mapa-panel:-webkit-full-screen{background:#fff;margin:0;border-radius:0;padding:16px;overflow:auto}
.red-mapa-panel:-webkit-full-screen .red-mapa{height:calc(100vh - 235px);min-height:420px}
.materiales-inactivos>summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px;color:var(--azul);font-size:17px;font-weight:700;
  cursor:pointer;list-style:none;user-select:none
}
.materiales-inactivos>summary::-webkit-details-marker{display:none}
.materiales-inactivos>summary:hover{background:#f8fafb}
.materiales-inactivos>summary::after{
  content:'Mostrar ▾';flex-shrink:0;color:var(--muted);font-size:12px;font-weight:650
}
.materiales-inactivos[open]>summary{border-bottom:1px solid var(--gris2)}
.materiales-inactivos[open]>summary::after{content:'Ocultar ▴'}
.materiales-inactivos>summary small{color:var(--muted);font-size:12px}
.materiales-inactivos>.subtitulo{margin:16px 20px 8px}
.materiales-inactivos>#materialesInactivosBody{padding:0 20px 20px;overflow-x:auto}
table{width:100%;min-width:680px;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--gris2)}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:hover td{background:#fafbfc}
tbody tr:last-child td{border-bottom:0}
.progress{height:7px;min-width:90px;background:#e9eef2;border-radius:99px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--oro),var(--ok));border-radius:99px}
.progress-label{font-size:12px;color:var(--muted);margin-top:4px}

/* ---------- Badges de estado ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.b-pendiente{background:#eef1f4;color:#5a6b78}
.b-asignada{background:#e3eefc;color:var(--info)}
.b-en_camino,.b-en_proceso{background:#fff3d9;color:var(--warn)}
.b-completada{background:#dff3e8;color:var(--ok)}
.b-no_realizada,.b-cancelada{background:#fbe4e1;color:var(--danger)}
.b-urgente{background:#fbe4e1;color:var(--danger)} .b-alta{background:#fff3d9;color:var(--warn)}
.b-media{background:#eef1f4;color:#5a6b78} .b-baja{background:#eef1f4;color:#9aa}
.b-activo{background:#dff3e8;color:var(--ok)} .b-inactivo,.b-suspendido,.b-baja{background:#fbe4e1;color:var(--danger)}

/* ---------- Botones ---------- */
.btn{padding:9px 14px;border:1px solid transparent;border-radius:9px;font-size:13px;font-weight:650;background:var(--gris2);color:var(--texto);white-space:nowrap}
.btn:hover{filter:brightness(.96)}
.btn:disabled{cursor:wait;opacity:.6}
.btn-oro{background:var(--oro);color:#fff} .btn-oro:hover{background:var(--oro-osc)}
.btn-azul{background:var(--azul);color:#fff} .btn-sm{padding:5px 10px;font-size:13px}
.btn-danger{background:#fbe4e1;color:var(--danger)}

/* ---------- Formularios ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea,.fecha input{width:100%;padding:9px 10px;border:1px solid var(--gris2);border-radius:9px;font-size:14px;font-family:inherit;background:#fff;color:var(--texto)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:end}
.field-help{margin:0 0 9px;color:var(--muted);font-size:12px}
.importacion-clientes-ok{display:flex;align-items:center;justify-content:space-between;gap:18px;border-left:4px solid #1f9d68;background:#f4fbf7;margin-bottom:14px}
.importacion-clientes-ok>div:first-child{display:flex;flex-direction:column;gap:3px}.importacion-clientes-ok small{color:#617268}
.importacion-clientes-kpis{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.importacion-clientes-kpis span{background:#fff;border:1px solid #d5e9de;border-radius:9px;padding:7px 10px;color:#496157;font-size:12px;white-space:nowrap}
.importacion-clientes-kpis b{color:#123f31;font-size:15px;margin-right:3px}
@media(max-width:900px){.importacion-clientes-ok{align-items:flex-start;flex-direction:column}.importacion-clientes-kpis{justify-content:flex-start}}
.mapa-cliente{height:360px;border-radius:12px;overflow:hidden;border:1px solid var(--gris2);background:#e8eef2}
.coord-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pegar-coordenadas{display:flex;gap:8px;margin-top:10px}
.pegar-coordenadas input{flex:1;min-width:0}
.gps-actions{display:flex;gap:8px;margin-top:9px;align-items:center;flex-wrap:wrap}
.gps-calidad{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--gris2);background:#f6f8fa}
.gps-calidad-icono{width:13px;height:13px;border-radius:50%;background:#98a6af;box-shadow:0 0 0 4px rgba(104,121,133,.12);flex-shrink:0}
.gps-calidad div{display:flex;flex-direction:column}
.gps-calidad b{font-size:13px;color:var(--azul)}.gps-calidad small{font-size:11px;color:var(--muted)}
.gps-calidad.buena{border-color:#acd8bf;background:#eff9f3}.gps-calidad.buena .gps-calidad-icono{background:var(--ok)}
.gps-calidad.media{border-color:#ead18e;background:#fff9e9}.gps-calidad.media .gps-calidad-icono{background:var(--warn)}
.gps-calidad.mala{border-color:#e7aaa3;background:#fff3f1}.gps-calidad.mala .gps-calidad-icono{background:var(--danger)}
.gps-calidad.buscando .gps-calidad-icono{background:var(--info);animation:pulsoGps 1.1s infinite}
@keyframes pulsoGps{50%{box-shadow:0 0 0 9px rgba(44,114,196,.08)}}
.cobertura-cliente{margin-top:8px;padding:8px 11px;border-radius:9px;font-size:12px;font-weight:650}
.cobertura-cliente.sin-dato{background:#f2f4f6;color:var(--muted)}
.cobertura-cliente.dentro{background:#e7f6ed;color:var(--ok);border:1px solid #b6dfc7}
.cobertura-cliente.fuera{background:#fff0ed;color:var(--danger);border:1px solid #efb4ac}
.gps-evidence{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:center;
  padding:13px;border:1px solid #bfdfce;border-radius:10px;background:#f1faf5}
.gps-evidence div{display:flex;flex-direction:column}
.gps-evidence b{color:var(--ok);font-size:14px}
.gps-evidence span{font-size:11px;color:var(--muted)}
.modal:has(.orden-form){width:900px}
.seccion-form{margin:5px 0 1px;padding:8px 0 7px;border-bottom:2px solid var(--azul);
  color:var(--azul);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.resumen-cliente{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px;padding:11px 13px;
  background:#f5f8fa;border:1px solid var(--gris2);border-radius:10px}
.resumen-cliente div{display:flex;flex-direction:column;min-width:0}
.resumen-cliente span{font-size:11px;color:var(--muted);text-transform:uppercase}
.resumen-cliente b{font-size:13px;color:var(--azul);overflow-wrap:anywhere}
.check-cerrar{display:flex;align-items:center;gap:8px;padding-top:24px;color:var(--azul);font-size:13px;font-weight:650}
.check-cerrar input{width:18px;height:18px}
.adjuntar-control{display:flex;gap:9px;align-items:center}
.adjuntar-control input{flex:1;min-width:0}
.lista-archivos{display:grid;gap:7px;margin-top:10px}
.archivo-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--gris2);
  border-radius:9px;background:#fbfcfd}
.archivo-descarga{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:0;border:0;
  background:transparent;text-align:left;color:var(--texto)}
.archivo-descarga>span:last-child{display:flex;flex-direction:column;min-width:0}
.archivo-descarga b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archivo-descarga small,.vacio-mini{font-size:11px;color:var(--muted)}
.archivo-ico{display:grid;place-items:center;width:38px;height:30px;border-radius:7px;background:#e5eef5;
  color:var(--azul);font-size:10px;font-weight:800;flex-shrink:0}
.vacio-mini{display:block;padding:8px}.vacio-mini.error{color:var(--danger)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:1000;overflow-y:auto}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:16px;width:600px;max-width:100%;padding:25px;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.modal h3{margin:0 0 16px;color:var(--azul)}
.modal .acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ---------- Mapas GPS ---------- */
.mapa-panel{overflow:visible}
.mapa-encabezado{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:12px}
.mapa-encabezado h3{margin-bottom:3px}.mapa-encabezado p{margin:0;color:var(--muted);font-size:13px}
.mapa-botones{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mapa-leyenda{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:8px;
  color:var(--muted);font-size:11px}
.mapa-leyenda span{display:inline-flex;align-items:center;gap:6px}
.mapa-leyenda i{display:inline-block;width:24px;height:0;border-top:2px dashed}
.mapa-leyenda .leyenda-municipio{border-color:#3186bd}
.mapa-leyenda .leyenda-casco{border-color:#ef3f37}
.mapa-leyenda .leyenda-referencias{width:9px;height:9px;border:0;border-radius:50%;
  background:linear-gradient(135deg,#16975b 0 50%,#237be1 50%)}
.leaflet-control-layers{border:0!important;border-radius:10px!important;
  box-shadow:0 2px 9px rgba(31,50,64,.25)!important}
.leaflet-control-layers-expanded{min-width:190px;padding:9px 11px!important;
  color:#253746;font:12px/1.6 Inter,Segoe UI,sans-serif}
.leaflet-control-layers-separator{border-top-color:#dce4e9!important}
.mapa-ruta{height:480px;border-radius:12px;overflow:hidden;border:1px solid var(--gris2);background:#e8eef2}
.leyenda-mapa{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:12px}
.leyenda-punto{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.leyenda-punto.oro{background:var(--oro)}.leyenda-punto.azul{background:var(--info)}
.mapa-alerta{color:var(--danger);font-weight:700}
.marcador-ubicacion-actual{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #fff;
  box-shadow:0 1px 7px rgba(0,0,0,.4);display:grid;place-items:center}
.marcador-ubicacion-actual span{width:14px;height:14px;border-radius:50%;background:var(--info);
  border:3px solid #bcd8f5;animation:pulsoMarcador 1.4s infinite}
.marcador-oficina{width:34px;height:34px;border-radius:50% 50% 50% 0;background:var(--azul);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.38);transform:rotate(-45deg);
  display:grid;place-items:center}
.marcador-oficina span{color:var(--oro);font-size:10px;font-weight:900;letter-spacing:-.3px;
  transform:rotate(45deg)}
.tooltip-oficina{border:0!important;border-radius:7px!important;color:var(--azul)!important;
  font-weight:800!important;box-shadow:0 2px 8px rgba(0,0,0,.2)!important}
.marcador-aeropuerto{width:38px;height:38px;border:3px solid #fff;border-radius:50%;
  display:grid;place-items:center;background:#2777ce;color:#fff;font-size:20px;
  line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.38)}
.tooltip-aeropuerto{border:0!important;border-radius:7px!important;color:#155ca8!important;
  font-weight:800!important;box-shadow:0 2px 8px rgba(0,0,0,.2)!important}
.marcador-referencia{width:26px;height:26px;border:2px solid #fff;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;line-height:1;
  box-shadow:0 1px 5px rgba(0,0,0,.34)}
.ref-parque,.ref-naturaleza{background:#16975b}.ref-educacion{background:#708895}
.ref-salud{background:#e74a4a}.ref-comida{background:#ef781f}
.ref-comercio{background:#237be1}.ref-servicio,.ref-localidad{background:#71838d}
.ref-religion{background:#7d8990}.ref-turismo{background:#a84cdb}
.ref-energia{background:#e49b13}.ref-agua{background:#268cc8}
.tooltip-referencia{border:0!important;border-radius:6px!important;padding:3px 6px!important;
  color:#44535d!important;font-size:10.5px!important;font-weight:750!important;white-space:nowrap;
  box-shadow:0 1px 5px rgba(0,0,0,.18)!important}
.tooltip-parque,.tooltip-naturaleza{color:#137b4b!important}.tooltip-salud{color:#c63737!important}
.tooltip-comida{color:#cf5d16!important}.tooltip-comercio{color:#176bc7!important}
.tooltip-turismo{color:#8d32bd!important}.tooltip-agua{color:#1d75a8!important}
@keyframes pulsoMarcador{50%{box-shadow:0 0 0 7px rgba(44,114,196,.15)}}

/* ---------- Seguimiento operativo ---------- */
.aviso-privacidad{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;padding:13px 15px;
  border:1px solid #bfd6e8;border-radius:12px;background:#f1f7fb;color:var(--azul)}
.aviso-privacidad>span{font-size:20px}.aviso-privacidad div{display:flex;flex-direction:column}
.aviso-privacidad b{font-size:13px}.aviso-privacidad small{color:var(--muted);font-size:12px}
.tecnicos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-bottom:20px}
.tecnico-control{background:#fff;border:1px solid rgba(18,57,84,.08);border-radius:14px;padding:16px;box-shadow:var(--sombra)}
.tecnico-control-cab{display:flex;align-items:center;gap:11px}
.tecnico-control-cab h3{margin:0;color:var(--azul);font-size:15px}
.tecnico-control-cab small{color:var(--muted);font-size:11px}
.avatar-tecnico{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,var(--azul),#245f86);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.tecnico-metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 10px}
.tecnico-metricas div{display:flex;flex-direction:column;padding:8px;border-radius:9px;background:#f5f8fa;text-align:center}
.tecnico-metricas b{color:var(--azul);font-size:18px}.tecnico-metricas span{color:var(--muted);font-size:10px}
.tecnico-linea{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--gris2);font-size:12px}
.tecnico-linea span{color:var(--muted)}.tecnico-linea b{color:var(--texto);text-align:right}
.tecnico-linea.gps b{color:var(--info)}
.gps-ultimo-detalle{font-size:11px;color:var(--muted);padding-top:5px}.gps-ultimo-detalle a{float:right;font-weight:700}
.mapa-seguimiento-panel{overflow:visible}.mapa-seguimiento{height:450px;border-radius:12px;overflow:hidden;
  border:1px solid var(--gris2);background:#e8eef2}
.mapa-seguimiento-panel.mapa-expandido{position:fixed;inset:12px;z-index:80;margin:0;padding:18px;
  display:flex;flex-direction:column;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.mapa-seguimiento-panel.mapa-expandido .mapa-seguimiento{height:auto;flex:1;min-height:0}
.marcador-destino-tecnico{width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--oro);
  border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35);transform:rotate(-45deg)}
.gps-tabla{color:var(--muted);font-size:12px}.gps-tabla.ok{color:var(--ok);font-weight:650}

/* ---------- Rutas ---------- */
.ruta-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ruta-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--gris2);border-radius:8px;margin-bottom:8px;background:#fff}
.ruta-item .orden{width:26px;height:26px;border-radius:50%;background:var(--oro);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.ruta-item .info{flex:1;font-size:14px}
.ruta-item .info small{color:var(--muted)}
.ruta-item .mover{display:flex;flex-direction:column;gap:2px}
.ruta-item .mover button{border:none;background:var(--gris2);border-radius:5px;width:24px;height:20px;font-size:11px}
.vacio{color:var(--muted);text-align:center;padding:20px;font-size:14px}
.toast{position:fixed;bottom:24px;right:24px;max-width:min(380px,calc(100vw - 32px));background:var(--azul);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--sombra);opacity:0;transform:translateY(10px);transition:.25s;z-index:1100;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:var(--danger)}
.hidden{display:none!important}
@media(max-width:900px){
  .main{padding:24px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  #app{padding-bottom:70px}
  .sidebar{top:auto;right:0;width:auto;height:68px;padding:0;display:flex;flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;box-shadow:0 -8px 24px rgba(8,40,62,.15)}
  .sidebar .logo,.sidebar .user{display:none}
  .nav-item{min-width:68px;flex:1;flex-direction:column;justify-content:center;gap:1px;padding:6px 8px;border-left:0;border-top:3px solid transparent;font-size:10px}
  .nav-item.active{border-left:0;border-top-color:var(--oro)}
  .nav-item .ico{height:23px;font-size:18px}
  .mobile-logout{display:flex;position:sticky;right:0;z-index:2;min-width:62px;border:0;background:var(--azul-osc);color:#cfe0ee;
    flex-direction:column;align-items:center;justify-content:center;font-size:18px;box-shadow:-7px 0 12px rgba(8,40,62,.3)}
  .mobile-logout span{font-size:10px;margin-top:1px}
  .main{margin-left:0;padding:20px 16px}
  .topbar{align-items:flex-start;gap:12px;flex-wrap:wrap}
  .topbar h2{font-size:22px}
  .form-grid,.ruta-cols{grid-template-columns:1fr}
  .coord-grid,.gps-evidence{grid-template-columns:1fr}
  .pegar-coordenadas,.mapa-encabezado{flex-direction:column}
  .mapa-botones{justify-content:flex-start}
  .mapa-cliente{height:320px}.mapa-ruta{height:400px}
  .mapa-seguimiento{height:380px}
  .resumen-cliente{grid-template-columns:1fr}
  .adjuntar-control{align-items:stretch;flex-direction:column}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:14px}
  .kpi .n{font-size:25px}
  .panel{padding:15px}
  .panel-desplegable{padding:0}
  .red-poste>summary{align-items:flex-start;flex-wrap:wrap;padding:12px}
  .red-poste-identidad{min-width:0;flex:1}
  .red-poste-metricas{width:100%;justify-content:flex-start;margin-left:30px}
  .red-poste-contenido{padding:12px}
  .red-poste-datos{grid-template-columns:1fr}
  .red-mapa{height:440px}
  .red-mapa-panel .mapa-encabezado{flex-direction:column}
  .red-mapa-acciones{justify-content:flex-start}
  .red-mapa-opciones{gap:9px 12px}
  .red-mapa-ayuda,.red-mapa-estado-ayuda{width:100%;margin-left:0}
  .red-leyenda-ayuda{width:100%;margin-left:0}
  .materiales-inactivos>summary{padding:15px;font-size:15px}
  .materiales-inactivos>.subtitulo{margin:14px 15px 8px}
  .materiales-inactivos>#materialesInactivosBody{padding:0 15px 15px}
  .filtros>.field{flex:1 1 145px}
  .modal-bg{padding:16px 10px;align-items:flex-start}
  .modal{padding:20px}
  .modal .acciones{flex-wrap:wrap}
  .toast{right:16px;bottom:84px}
}
@media(max-width:420px){
  .login-card{padding:28px 23px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .l{font-size:12px}
}

/* ---------- Buscador de clientes (formulario de visita) ---------- */
.buscador-cliente{position:relative;display:flex;gap:8px;align-items:center}
.buscador-cliente>input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--gris2);
  border-radius:9px;font-size:14px;font-family:inherit;background:#fff;color:var(--texto)}
.buscador-cliente>input:disabled{background:#f4f6f8;color:var(--muted)}
.buscador-resultados{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--gris2);border-radius:10px;box-shadow:0 10px 30px rgba(16,45,65,.16);
  max-height:280px;overflow-y:auto}
.buscador-resultados.abierto{display:block}
.buscador-resultados .resultado{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--gris)}
.buscador-resultados .resultado:last-child{border-bottom:0}
.buscador-resultados .resultado:hover{background:#fbf7ea}
.buscador-resultados .resultado b{display:block;font-size:14px;color:var(--texto);font-weight:650}
.buscador-resultados .resultado small{color:var(--muted);font-size:12px}
.buscador-resultados .buscando{padding:12px;color:var(--muted);font-size:13px;text-align:center}

/* ---------- Aviso de solo lectura (técnicos) ---------- */
.aviso-solo-lectura{background:#eef3f8;border-left:4px solid var(--info);color:var(--azul);
  padding:11px 14px;border-radius:9px;font-size:13px;margin:0 0 16px;line-height:1.45}

/* Campos bloqueados: que se vea que no se pueden tocar */
.orden-form input:disabled,.orden-form select:disabled,.orden-form textarea:disabled{
  background:#f4f6f8;color:#5d6d79;cursor:not-allowed;opacity:1}

/* ---------- Cadena de alimentación (por dónde llega la señal) ---------- */
.cadena-senal{display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  padding:12px;background:var(--gris);border-radius:10px;margin-bottom:6px}
.cadena-nodo{display:inline-block;padding:4px 10px;border-radius:7px;background:#fff;
  border:1px solid var(--gris2);font-size:12.5px;font-weight:650;color:var(--azul);
  cursor:pointer;white-space:nowrap}
.cadena-nodo:hover{border-color:var(--oro);background:#fffbf0}
.cadena-nodo.actual{background:var(--azul);color:#fff;border-color:var(--azul)}
.cadena-nodo.averiado{background:#fbe4e1;border-color:var(--danger);color:var(--danger)}
.cadena-flecha{color:var(--muted);font-size:13px;user-select:none}
.aviso-cadena{background:#fbe4e1;border-left:3px solid var(--danger);color:var(--danger);
  padding:11px 14px;border-radius:0 8px 8px 0;font-size:13px;line-height:1.5;margin:14px 0 4px}

/* ---------- Facturación / área contable ---------- */
.fact-topbar{align-items:flex-start}.fact-top-acciones{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fact-periodo{padding:13px 18px}.fact-periodo .filtros{margin:0;align-items:flex-end}
.fact-periodo .field{min-width:160px}.fact-kpis .kpi .n{font-size:25px}
.fact-panel-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px}
.fact-panel-cab h3{margin:0 0 2px}.fact-panel-cab p{margin:0;color:var(--muted);font-size:12px}
.fact-filtros .field:first-child{flex:1;min-width:230px}.fact-filtros .field:nth-child(2){min-width:165px}
.tabla-scroll{overflow-x:auto}.num{text-align:right}.acciones-celda{display:flex;gap:5px;justify-content:flex-end}
td small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.fact-link{padding:0;border:0;background:none;color:var(--azul);font-weight:750;font-size:13px;text-decoration:underline;text-decoration-color:rgba(18,57,84,.25);text-underline-offset:2px}
.fact-link:hover{color:var(--oro-osc)}
.fact-dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:20px}.fact-dos-columnas>.panel{min-width:0}
.fact-tabla-compacta{min-width:610px}.fact-administracion>summary{display:flex;justify-content:space-between;gap:12px;padding:19px 20px;cursor:pointer;color:var(--azul);font-weight:750;list-style:none}
.fact-administracion>summary::-webkit-details-marker{display:none}.fact-administracion>summary::after{content:'Mostrar ▾';color:var(--muted);font-size:12px}
.fact-administracion[open]>summary::after{content:'Ocultar ▴'}.fact-administracion>summary small{font-weight:400;color:var(--muted)}
.fact-admin-body{padding:0 20px 20px;border-top:1px solid var(--gris2)}.fact-admin-body>.fact-panel-cab{margin-top:18px}
.fact-separador{height:1px;background:var(--gris2);margin:22px 0 4px}
.fact-admin-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.b-fact-emitida{background:#e3eefc;color:var(--info)}.b-fact-parcial{background:#fff3d9;color:var(--warn)}
.b-fact-pagada,.b-fact-aplicado{background:#dff3e8;color:var(--ok)}
.b-fact-vencida,.b-fact-anulada,.b-fact-anulado{background:#fbe4e1;color:var(--danger)}
.b-seg-informativo{background:#e3eefc;color:var(--info)}.b-seg-pendiente{background:#fff3d9;color:var(--warn)}
.b-seg-cumplida{background:#dff3e8;color:var(--ok)}.b-seg-vencida,.b-seg-cancelada{background:#fbe4e1;color:var(--danger)}
.b-rango-activo{background:#dff3e8;color:var(--ok)}.b-rango-inactivo{background:#eef1f4;color:var(--muted)}
.b-rango-agotado,.b-rango-vencido{background:#fbe4e1;color:var(--danger)}
.fact-error{padding:16px;border-radius:10px;background:#fbe4e1;color:var(--danger)}
.fact-alerta{margin-bottom:14px;padding:12px 14px;border-left:4px solid var(--oro);border-radius:8px;background:#fff8e7;color:#795c08;font-size:13px}
.fact-alerta.peligro{border-left-color:var(--danger);background:#fbe4e1;color:var(--danger);font-weight:650}
.fact-cai-activo{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-bottom:15px;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,var(--azul),#1d587e);color:#fff;box-shadow:var(--sombra)}
.fact-cai-activo>div{display:flex;flex-direction:column;min-width:0}.fact-cai-activo span{color:#bcd2df;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.fact-cai-activo b{color:#fff;font-size:14px;overflow-wrap:anywhere}.fact-cai-activo small{color:#d7e5ed;font-size:11px}.fact-cai-activo .progress{margin:5px 0;background:rgba(255,255,255,.18)}.fact-cai-activo .progress span{background:var(--oro)}
.fact-modal{min-width:0}.modal:has(.fact-modal),.modal:has(.fact-documento){width:min(1000px,calc(100vw - 32px))}
.fact-buscador .buscador-resultados{top:43px}.fact-cliente-resumen{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:7px;padding:9px 11px;border:1px solid #cbdce8;border-radius:9px;background:#f3f8fb;font-size:12px;color:var(--azul)}
.fact-cliente-resumen strong{white-space:nowrap}.fact-linea{display:grid;grid-template-columns:minmax(230px,2fr) repeat(4,minmax(90px,1fr)) 34px;gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--gris2)}
.fact-linea .field input{min-width:0}.fact-quitar-linea{width:32px;height:38px;border:0;border-radius:8px;background:#fbe4e1;color:var(--danger);font-size:20px}
.fact-agregar-linea{margin:12px 0}.fact-totales{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;padding:13px;margin:5px 0 15px;background:#f5f8fa;border-radius:10px;color:var(--muted);font-size:12px}
.fact-totales b{color:var(--texto)}.fact-totales strong{padding-left:12px;border-left:2px solid var(--oro);color:var(--azul);font-size:17px}
.fact-info{padding:11px 13px;border-radius:9px;background:#edf5fb;border:1px solid #c8ddea;color:var(--azul);font-size:12px;margin:13px 0}
/* Caja de vista previa de la asignación en lote */
.fact-previa{padding:12px 14px;border-radius:9px;background:#fdf6e3;border:1px solid #e8d9a8;color:#6b5518;font-size:13px;margin:13px 0}
.fact-previa small{display:block;margin-top:5px;color:#8a7433;font-size:11px}
.fact-check{display:flex;align-items:center;gap:8px;color:var(--azul);font-size:13px}.fact-check input{accent-color:var(--oro)}
.fact-aviso-fiscal{padding:11px 13px;border-left:4px solid var(--oro);background:#fff8e7;color:#795c08;font-size:12px;margin:12px 0 16px}
.fact-documento{padding:8px}.fact-doc-cab{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--oro);padding-bottom:12px}
.fact-doc-cab h2{margin:0;color:var(--azul)}.fact-doc-cab p{margin:4px 0 0;color:var(--muted);font-size:12px}
.fact-doc-num{text-align:right}.fact-doc-num span{display:block;color:var(--muted);font-size:11px;letter-spacing:1px}.fact-doc-num b{display:block;color:var(--azul);font-size:20px}.fact-doc-num strong{display:block;color:var(--danger);font-size:18px}
/* ---- Factura con los colores del logo Golden Cable ---- */
/* Tomados del archivo del logo: azul marino #22306D y naranja #D6540C */
.fact-documento{--marca-azul:#22306D; --marca-azul-osc:#1a2553; --marca-naranja:#D6540C; --marca-naranja-osc:#a83f08}
.fact-documento .fact-doc-cab{background:linear-gradient(145deg,var(--marca-azul),var(--marca-azul-osc));
  border-bottom:4px solid var(--marca-naranja);border-radius:12px 12px 0 0;padding:16px 18px;margin:-8px -8px 0}
.fact-documento .fact-doc-cab h2{color:#fff;letter-spacing:-.4px}
.fact-documento .fact-doc-cab p{color:rgba(255,255,255,.82)}
.fact-documento .fact-doc-cab .fact-doc-num span{color:var(--marca-naranja);letter-spacing:2px;font-weight:700}
.fact-documento .fact-doc-cab .fact-doc-num b{color:#fff}
.fact-documento .fact-doc-cab .fact-doc-num small{color:rgba(255,255,255,.72)}
/* El recibo no lleva franja fiscal debajo, así que cierra la esquina */
.fact-recibo .fact-doc-cab{border-radius:12px}
.fact-marca-oro{color:var(--marca-naranja)}
/* Logo real de la empresa: fondo claro para que se lea sobre el azul */
.fact-logo{max-height:56px;max-width:230px;display:block;background:#fff;padding:6px 9px;border-radius:8px}
.fact-lema{margin:7px 0 0!important;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--marca-naranja)!important;font-weight:600}
/* Selector de logo en la configuración */
.cfg-logo-fila{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.cfg-logo-previa{min-width:170px;min-height:62px;display:flex;align-items:center;justify-content:center;
  padding:7px;background:var(--gris);border:1px dashed var(--gris2);border-radius:9px}
.cfg-logo-previa img{max-height:48px;max-width:200px}
.cfg-logo-previa span{color:var(--muted);font-size:11px;text-align:center}
.cfg-logo-botones{display:flex;flex-direction:column;gap:7px}
.cfg-logo-botones input[type=file]{font-size:12px;max-width:220px}
/* Franja del CAI: los tres datos fiscales que el SAR exige en la cabecera */
.fact-fiscal{display:grid;grid-template-columns:2fr 2fr 1fr;gap:14px;margin:0 0 12px;padding:10px 14px;
  background:var(--gris);border:1px solid var(--gris2);border-top:none;border-radius:0 0 10px 10px}
.fact-fiscal>div{display:flex;flex-direction:column;min-width:0}
.fact-fiscal span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.fact-fiscal b{color:var(--marca-azul);font-size:12px;word-break:break-all}
.fact-doc-num small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
/* Tabla de conceptos con encabezado azul */
.fact-tabla-items thead th{background:var(--marca-azul);color:#fff;border-bottom:none}
.fact-tabla-items thead th:first-child{border-radius:8px 0 0 0}
.fact-tabla-items thead th:last-child{border-radius:0 8px 0 0}
.fact-exoneracion{grid-template-columns:repeat(3,1fr)}
/* Total en letras + cuadro de importes */
.fact-cierre{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;margin-top:14px}
.fact-letras{padding:11px 13px;background:#f5f7f8;border-radius:9px;border:1px solid var(--gris2)}
.fact-letras span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.fact-letras b{color:var(--azul);font-size:12px;line-height:1.5}
.fact-resumen-fiscal{border-collapse:collapse;min-width:270px}
.fact-resumen-fiscal td{padding:5px 10px;font-size:12px;border-bottom:1px solid var(--gris2)}
.fact-resumen-fiscal td.num{text-align:right;font-variant-numeric:tabular-nums}
.fact-resumen-fiscal .fact-total-fila td{font-size:15px;font-weight:700;background:var(--marca-azul);color:#fff;border-bottom:none;padding:9px 10px}
.fact-resumen-fiscal .fact-total-fila td:first-child{border-radius:8px 0 0 8px;color:var(--marca-naranja)}
.fact-resumen-fiscal .fact-total-fila td:last-child{border-radius:0 8px 8px 0}
.fact-resumen-fiscal .fact-saldo-fila td{background:#fdece2;color:var(--marca-naranja-osc);font-weight:700}
/* Pie legal obligatorio */
.fact-pie-legal{margin-top:18px;padding-top:11px;border-top:2px solid var(--marca-naranja);text-align:center}
.fact-leyenda{margin:0;font-weight:700;color:var(--marca-azul);font-size:12px;letter-spacing:.3px}
.fact-copias{margin:5px 0 0;color:var(--muted);font-size:11px}
.fact-emitida-por{margin:3px 0 0;color:var(--muted);font-size:10px}
.fact-doc-datos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;padding:12px;border:1px solid var(--gris2);border-radius:10px;margin-bottom:12px}
.fact-doc-datos>div{display:flex;flex-direction:column}.fact-doc-datos span{color:var(--muted);font-size:10px;text-transform:uppercase}.fact-doc-datos b{color:var(--azul)}.fact-doc-datos small{color:var(--muted);font-size:11px}
.fact-doc-totales{display:flex;justify-content:flex-end;gap:13px;align-items:center;flex-wrap:wrap;padding:12px 0}.fact-doc-totales span{color:var(--muted);font-size:12px}.fact-doc-totales span b{color:var(--texto)}
.fact-doc-totales strong{font-size:15px;color:var(--azul)}.fact-doc-totales .saldo{padding:8px 11px;background:#fff3d9;border-radius:8px;color:#8d6500}
.fact-doc-notas,.fact-aplicaciones{padding:9px 11px;background:#f5f8fa;border-radius:8px;font-size:12px;margin-top:8px}
.fact-anulada{padding:12px;background:#fbe4e1;color:var(--danger);border:1px solid #efb8b1;border-radius:8px;font-weight:700;margin-top:10px}
.fact-monto-grande{font-size:19px!important;color:var(--ok)!important}.fact-firma{width:230px;border-top:1px solid var(--muted);margin-top:55px;padding-top:5px}.fact-firma span{display:block;color:var(--muted);font-size:10px}.fact-firma b{font-size:12px}
.fact-estado-cliente{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f5f8fa;border-radius:10px;padding:13px;margin:12px 0}.fact-estado-cliente div{display:flex;flex-direction:column}.fact-estado-cliente span{font-size:12px;color:var(--muted)}.fact-estado-cliente strong{color:var(--warn)}
.fact-timeline{display:flex;flex-direction:column;gap:10px;margin-top:14px}.fact-timeline article{display:grid;grid-template-columns:110px 1fr auto;gap:14px;padding:13px;border:1px solid var(--gris2);border-radius:10px;background:#fafcfd}
.fact-timeline-fecha{font-weight:700;color:var(--azul)}.fact-timeline-fecha small,.fact-timeline article>div>small{display:block;color:var(--muted);font-size:11px}.fact-timeline article p{margin:5px 0;color:var(--texto);font-size:13px}.fact-timeline article strong{display:block;color:var(--warn);font-size:12px;margin-top:5px}.fact-timeline-acciones{display:flex;gap:5px;align-items:flex-start}

@media(max-width:1100px){.fact-dos-columnas{grid-template-columns:1fr}.fact-linea{grid-template-columns:2fr repeat(2,1fr) 34px}.fact-linea .field:nth-of-type(4),.fact-linea .field:nth-of-type(5){grid-row:2}.fact-linea .fact-quitar-linea{grid-column:4;grid-row:1}}
@media(max-width:760px){.fact-top-acciones{width:100%;justify-content:flex-start}.fact-top-acciones .btn{flex:1}.fact-periodo .field{min-width:135px;flex:1}.fact-panel-cab{flex-wrap:wrap}.fact-cai-activo{grid-template-columns:1fr}.fact-linea{grid-template-columns:1fr 1fr}.fact-linea .fl-con{grid-column:1/-1}.fact-linea .field:nth-of-type(4),.fact-linea .field:nth-of-type(5){grid-row:auto}.fact-linea .fact-quitar-linea{grid-column:auto;grid-row:auto}.fact-totales{justify-content:flex-start}.fact-doc-datos{grid-template-columns:1fr}.fact-cliente-resumen{align-items:flex-start;flex-direction:column}
/* En el teléfono la factura se apila: el cuadro de importes no cabe al lado */
.fact-fiscal,.fact-exoneracion,.fact-cierre{grid-template-columns:1fr}
.fact-resumen-fiscal{min-width:0;width:100%}.fact-administracion>summary small{display:none}.fact-timeline article{grid-template-columns:1fr}.fact-timeline-acciones{margin-top:4px}}

@media print{.sidebar,.topbar,.fact-periodo,.fact-no-print,.toast{display:none!important}.main{margin:0;padding:0}.panel{box-shadow:none}.fact-documento{display:block}.modal-bg{position:static;background:none;padding:0}.modal{box-shadow:none;width:100%;max-height:none;overflow:visible}.fact-documento table{min-width:0}}

/* ============================================================
   PESTAÑAS DE PANTALLAS HERMANAS
   Visitas/Recorrido y Clientes/Red son la misma pantalla vista
   de dos maneras. La barra va arriba del todo, antes del título.
   ============================================================ */
.pestanas{display:flex;gap:6px;margin:0 0 18px;border-bottom:2px solid var(--gris2);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestana{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  margin-bottom:-2px;padding:10px 18px;font:inherit;font-size:15px;font-weight:600;
  color:var(--muted);cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0;
  transition:color .15s,background .15s,border-color .15s}
.pestana:hover{color:var(--azul);background:rgba(18,57,84,.04)}
.pestana.activa{color:var(--azul);border-bottom-color:var(--oro)}
.pestana:focus-visible{outline:2px solid var(--oro);outline-offset:-2px}
@media(max-width:640px){.pestana{padding:9px 13px;font-size:14px}}

/* ============================================================
   ESTILO DE MAPA "GOLDEN"
   Cartografía libre (OpenStreetMap vía CARTO y Esri) con un
   tratamiento propio: el fondo se calma para que lo que resalte
   sea la red. No se imita ni se copia ningún mapa comercial.
   ============================================================ */

/* Leaflet pone la clase de la capa en el contenedor (.leaflet-layer),
   no en cada imagen, asi que el filtro va ahi. */

/* Golden claro: fondo apagado y algo mas luminoso, para que los
   postes en oro y las lineas de la red destaquen sobre las calles. */
.leaflet-layer.capa-golden{
  filter:saturate(.5) brightness(1.09) contrast(.9);
}

/* Golden noche: para revisar la red sin que el mapa moleste. */
.leaflet-layer.capa-golden-noche{
  filter:invert(1) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.95);
}

/* Los marcadores y las líneas NO se filtran: van en otro panel
   (overlayPane / markerPane), así que conservan su color exacto. */

/* Control de capas: más grande, para usarlo con el dedo */
.leaflet-control-layers{border-radius:12px !important;
  box-shadow:0 4px 18px rgba(18,57,84,.18) !important;border:0 !important}
.leaflet-control-layers-toggle{width:40px !important;height:40px !important;
  background-size:22px 22px !important}
.leaflet-control-layers-expanded{padding:12px 14px !important;font-size:14px}
.leaflet-control-layers-expanded label{display:flex;align-items:center;gap:7px;
  padding:5px 2px;cursor:pointer;white-space:nowrap}
.leaflet-control-layers-separator{margin:8px 0 !important}

/* Escala y atribución discretas pero legibles */
.leaflet-control-scale-line{border-radius:4px;font-size:11px;
  border:1px solid rgba(18,57,84,.25) !important;background:rgba(255,255,255,.82) !important}
.leaflet-control-attribution{font-size:10px !important;background:rgba(255,255,255,.75) !important;
  border-radius:6px 0 0 0;padding:2px 7px !important}

/* Zoom con más área de toque */
.leaflet-touch .leaflet-bar a{width:34px !important;height:34px !important;
  line-height:34px !important;font-size:19px}
.leaflet-bar{border-radius:10px !important;overflow:hidden;border:0 !important;
  box-shadow:0 3px 14px rgba(18,57,84,.18) !important}

/* ============================================================
   CÚMULOS DE POSTES EN EL MAPA DE LA RED
   Cuando hay muchos postes juntos y se está viendo el mapa de
   lejos, se juntan en un solo círculo con la cantidad. Al
   acercarse se abren solos.
   ============================================================ */
.red-cumulo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;box-sizing:border-box;cursor:pointer;
  background:color-mix(in srgb, var(--red-sector) 88%, #fff);
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 3px 12px rgba(18,57,84,.35);
  color:#fff;line-height:1;transition:transform .12s;
}
.red-cumulo:hover{transform:scale(1.09)}
.red-cumulo b{font-size:15px;font-weight:800;letter-spacing:-.3px}
.red-cumulo small{font-size:8px;opacity:.9;margin-top:1px;letter-spacing:.2px}
.red-cumulo.averiado{
  border-color:var(--danger);
  box-shadow:0 3px 12px rgba(192,57,43,.5), 0 0 0 2px rgba(192,57,43,.25);
}
/* Navegadores sin color-mix: se ve el color del sector tal cual */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .red-cumulo{background:var(--red-sector)}
}

/* ============================================================
   LUGARES DE PURINGLA
   La escuela, el kínder, el café, el tanque de agua. Son
   referencia, no protagonistas: se ven discretos para no
   competir con los postes de la red.
   ============================================================ */
.lugar-punto{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font-size:13px;line-height:1;
  background:#fff;border:2px solid var(--lugar);
  box-shadow:0 1px 5px rgba(18,57,84,.28);
  transition:transform .12s;
}
.lugar-punto:hover{transform:scale(1.18)}
.lugar-etiqueta{
  background:rgba(255,255,255,.95) !important;border:0 !important;
  border-radius:6px !important;box-shadow:0 2px 8px rgba(18,57,84,.2) !important;
  font-size:11.5px !important;font-weight:600;color:var(--azul) !important;
  padding:3px 8px !important;
}
.lugar-etiqueta::before{border-top-color:rgba(255,255,255,.95) !important}
/* De cerca, el nombre del lugar va escrito al lado de su ícono, sin pasar el
   mouse. De lejos no: serían demasiadas letras encimadas. */
.lugar-div-icon .lugar-nombre{
  display:none;position:absolute;left:30px;top:5px;white-space:nowrap;pointer-events:none;
  font-size:11.5px;font-weight:700;color:#3b4a55;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff;
}
.leaflet-container.mapa-de-cerca .lugar-div-icon .lugar-nombre{display:block}
.leaflet-container.mapa-de-cerca .lugar-etiqueta{display:none}
.leaflet-container:has(.capa-golden-noche) .lugar-nombre{color:#e8eef2;text-shadow:0 0 3px #000,0 0 5px #000}

/* ============================================================
   NOMBRES DE BARRIOS Y ALDEAS SOBRE EL MAPA
   Como en cualquier mapa: el nombre del lugar escrito encima,
   sin caja ni marcador. El tamaño depende de cuántos postes
   tiene la zona, para que lo grande se lea primero.
   ============================================================ */
.zona-nombre{
  text-align:center;white-space:nowrap;pointer-events:none;
  font-weight:700;letter-spacing:.3px;color:#3b4a55;
  /* Contorno claro para que se lea sobre cualquier mapa, incluso satélite */
  text-shadow:
     0 0 3px #fff,  0 0 3px #fff,  0 0 6px #fff,
     1px 1px 0 rgba(255,255,255,.9), -1px -1px 0 rgba(255,255,255,.9);
}
.zona-nombre.grande{font-size:14px;text-transform:uppercase;letter-spacing:.7px}
.zona-nombre.media {font-size:12.5px}
.zona-nombre.chica {font-size:11.5px;color:#586772}

/* Sobre el satélite y el mapa de noche el fondo es oscuro:
   el texto se invierte para seguir leyéndose. */
.leaflet-container:has(.capa-golden-noche) .zona-nombre{
  color:#e8eef2;text-shadow:0 0 3px #000, 0 0 5px #000, 0 0 8px #000;
}

/* Aldeas y caseríos que vienen de OpenStreetMap: se escriben en cursiva
   suave para distinguirlos de los barrios donde hay red instalada. */
.zona-nombre.aldea{
  font-size:11.5px;font-weight:600;font-style:italic;color:#6b7d88;
  letter-spacing:.2px;
}

/* ============================================================
   LA ORDEN Y EL REPORTE DE CAMPO, SEPARADOS
   Cada parte tiene su color y su firma, para que se vea de un golpe
   qué escribió la oficina y qué escribió el técnico.
   ============================================================ */
.bloque-orden,.bloque-campo,.bloque-repro{
  border:1px solid var(--gris2);border-radius:12px;padding:0 14px 14px;margin:14px 0}
.bloque-orden{background:#f7fafc;border-left:5px solid var(--azul)}
.bloque-campo{background:#f6fbf8;border-left:5px solid var(--ok)}
.bloque-repro{background:#fffaf0;border-left:5px solid var(--warn)}
.bloque-cab{display:flex;align-items:center;gap:11px;margin:0 -14px 12px;padding:11px 14px;
  border-bottom:1px solid var(--gris2)}
.bloque-cab>div{display:flex;flex-direction:column;min-width:0;flex:1}
.bloque-cab b{font-size:14px;color:var(--azul)}
.bloque-cab small{font-size:11px;color:var(--muted)}
.bloque-ico{font-size:20px;line-height:1}
.bloque-firma{font-size:11px;color:var(--muted);background:#fff;border:1px solid var(--gris2);
  border-radius:20px;padding:4px 10px;white-space:nowrap}
.btn-enlace{border:0;background:transparent;color:var(--info);font-size:11px;
  font-weight:700;cursor:pointer;padding:0 0 0 6px}
.btn-enlace:hover{text-decoration:underline}

/* ---------- Reprogramaciones ---------- */
.b-reprogramada{background:#fdf0d8;color:#a86a00}
.repro-marca{color:#a86a00;font-size:11px;font-weight:700}
.lista-repro{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lista-repro li{display:grid;gap:2px;padding:9px 11px;background:#fff;
  border:1px solid var(--gris2);border-radius:9px}
.lista-repro b{font-size:13px;color:var(--azul)}
.lista-repro span{font-size:13px}
.lista-repro small{font-size:11px;color:var(--muted)}
.motivos-rapidos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{border:1px solid var(--gris2);background:#fff;border-radius:20px;padding:5px 11px;
  font-size:12px;color:var(--azul);cursor:pointer}
.chip:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.modal:has(.estrecho){width:560px}

/* ---------- Fotos en ráfaga ---------- */
.progreso-archivos{font-size:12px;color:var(--info);margin-top:7px;min-height:16px}
.galeria-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:9px;
  margin:10px 0}
.galeria-fotos:empty{display:none}
.galeria-fotos figure{margin:0;border:1px solid var(--gris2);border-radius:9px;overflow:hidden;
  background:#fff}
.galeria-fotos img{display:block;width:100%;height:105px;object-fit:cover;cursor:zoom-in}
.galeria-fotos figcaption{font-size:10px;color:var(--muted);padding:4px 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:900px){
  .bloque-cab{flex-wrap:wrap}
  .bloque-firma{white-space:normal}
  .modal:has(.estrecho){width:auto}
  .galeria-fotos{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* ---------- Órdenes repetidas ---------- */
.aviso-repetida{background:#fff6ec;border:1px solid #f0d3a8;border-left:5px solid var(--warn);
  border-radius:10px;padding:11px 13px}
.aviso-repetida b{display:block;color:#a86a00;font-size:13px;margin-bottom:6px}
.aviso-repetida ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:5px}
.aviso-repetida li{font-size:12px;color:var(--texto)}
.aviso-repetida small{font-size:11px;color:var(--muted)}
.lista-repetidas{display:grid;gap:9px;margin:6px 0 4px}
.repetida{display:grid;gap:3px;padding:11px 13px;border:1px solid var(--gris2);
  border-radius:10px;background:#fbfcfd}
.repetida>div{display:flex;align-items:center;gap:8px}
.repetida b{font-size:14px;color:var(--azul)}
.repetida small{font-size:12px;color:var(--muted)}
.repetida .btn{justify-self:start;margin-top:5px}

/* ---------- Aviso de órdenes arrastradas al día de hoy ---------- */
.aviso-arrastre{background:#fff6ec;border:1px solid #f0d3a8;border-left:5px solid var(--warn);
  border-radius:10px;padding:11px 14px;margin-bottom:13px;font-size:13px;color:var(--texto)}
.aviso-arrastre b{color:#a86a00}
.marca-no-hecha{color:var(--danger);font-size:11px;font-weight:700}

/* ---------- Cerrar sin ubicación (permiso de la oficina) ---------- */
.aviso-permiso{background:#fdf4e3;border:1px solid #edd6a3;border-left:5px solid var(--oro-osc);
  border-radius:10px;padding:11px 14px;margin-bottom:13px;font-size:13px;color:var(--texto)}
.marca-sin-gps{color:#a86a00;font-size:11px;font-weight:700}
.marca-permiso{color:var(--oro-osc);font-size:11px;font-weight:700}
.permiso-caja{background:#f5f8fa;border:1px solid var(--gris2);border-left:4px solid var(--oro-osc);
  border-radius:8px;padding:10px 13px;margin:10px 0}
.permiso-caja div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;color:var(--azul)}
.permiso-caja div span{font-size:11px;color:var(--muted);font-weight:normal}
.permiso-caja p{margin:5px 0 0;font-size:14px}

/* ---------- Instalaciones ---------- */
.marca-instalacion{color:var(--oro-osc)}
.barra-mes{display:block;height:9px;border-radius:5px;background:var(--azul);min-width:2px}

/* ---------- Nueva factura: plan y documento del cliente ---------- */
.fact-extra{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 4px;padding:12px 14px;
  background:#f5f8fa;border:1px solid var(--gris2);border-radius:10px}
.fact-extra.hidden{display:none}
.fact-check{display:flex;gap:7px;align-items:flex-start;margin-top:7px;font-size:12px;color:var(--azul);cursor:pointer}
.fact-check input{margin-top:2px;width:auto!important;min-height:0;flex:0 0 auto}
.fact-check{font-weight:normal}
.fact-doc-fila{display:grid;grid-template-columns:150px 1fr;gap:8px}
@media (max-width:900px){
  .fact-extra{grid-template-columns:1fr}
  .fact-doc-fila{grid-template-columns:1fr}
}
/* Cada concepto se puede elegir del sistema o escribir a mano */
.fact-linea .fl-sistema{width:100%;margin-bottom:6px;font-size:12px;color:var(--azul)}
/* Varios servicios por cliente: la casilla para guardarlos en su ficha */
.fact-servicios{margin:0 0 10px;padding:10px 13px;border:1px solid #e8d9a8;border-radius:10px;background:#fdf8ea}
.fact-servicios.hidden{display:none}
.fact-servicios .fact-check{margin-top:0;font-size:13px;line-height:1.4}
.fact-totales .fact-nota-isv{flex-basis:100%;text-align:right;font-size:11px;color:var(--muted);line-height:1.35}
/* ¿El cliente pagó? Se decide al emitir la factura */
.fact-cobro{margin:0 0 14px;padding:12px 14px;border:1px solid var(--gris2);border-radius:10px;background:#f7fafc}
.fact-cobro.falta{border-color:var(--danger);background:#fdf2f1;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.fact-cobro-titulo{font-weight:700;color:var(--azul);font-size:13px;margin-bottom:8px}
.fact-cobro-opciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fact-cobro-op{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border:2px solid var(--gris2);
  border-radius:10px;background:#fff;cursor:pointer;font-weight:normal}
.fact-cobro-op input{margin-top:3px;width:auto!important;min-height:0;flex:0 0 auto;accent-color:var(--oro)}
.fact-cobro-op b{display:block;font-size:14px;color:var(--texto)}
.fact-cobro-op small{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.fact-cobro-op:has(input:checked){border-color:var(--oro);background:#fffaf0}
.fact-cobro-datos{display:grid;grid-template-columns:200px 1fr;gap:10px;margin-top:10px}
.fact-cobro-datos.hidden{display:none}
.fact-sin-pago{display:block;margin-top:3px;font-size:11px;color:var(--danger)}

/* ---------- Monitoreo de la red (SmartOLT) ---------- */
.mon-lectura{padding:10px 14px;border-radius:10px;margin:0 0 14px;font-size:13px;background:#f5f8fa;border:1px solid var(--gris2);color:var(--texto)}
.mon-lectura.bien{background:#eef8f2;border-color:#bfe3cf}
.mon-lectura.bien::first-letter{color:var(--ok)}
.mon-lectura.mal{background:#fdf2f1;border-color:#f3c2bc}
.mon-general{padding:12px 16px;border-radius:10px;margin:0 0 16px;background:#c0392b;color:#fff;font-size:14px}
.mon-incidente{border:1px solid #f3c2bc;border-left:6px solid var(--danger);border-radius:12px;padding:12px 14px;margin:0 0 12px;background:#fff8f7}
.mon-incidente.causa-luz{border-color:#f1dca0;border-left-color:#d9a404;background:#fffbef}
.mon-inc-cab{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:14px}
.mon-inc-cab span{color:var(--muted);font-size:13px}
.mon-inc-causa{margin:6px 0;font-size:13.5px}
.mon-inc-causa small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.mon-incidente details{margin:6px 0 8px}
.mon-incidente summary{cursor:pointer;color:var(--azul);font-size:13px;font-weight:600}
.mon-lista-onus{margin:6px 0 0;padding-left:18px;columns:2;column-gap:24px;font-size:13px}
.mon-lista-onus li{break-inside:avoid;margin-bottom:3px}
.mon-lista-onus li small{color:var(--muted)}
.mon-lista-onus li.volvio{color:var(--ok)}
.mon-sin-caidas{color:var(--ok);font-weight:600;font-size:14px}
.mon-sin-caidas small{display:block;color:var(--muted);font-weight:normal;margin-top:4px;font-size:12px}
.tabla-mon{min-width:640px}
.tabla-mon .num{text-align:right}
.mon-chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700}
.mon-chip.bien{background:#e6f4ec;color:var(--ok)}
.mon-chip.revisar{background:#fff3dc;color:#a86a00}
.mon-chip.caida{background:#fde3e0;color:var(--danger)}
@media (max-width:700px){.mon-lista-onus{columns:1}}
.mon-inc-botones{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.mon-sin-sector{color:var(--muted);font-size:12px}
.mon-editar{margin-left:6px;padding:2px 8px !important;font-size:11.5px !important}
.mon-pista{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.mon-auto{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:#eef4fb;color:#2c72c4;
  font-size:10.5px;font-weight:700;cursor:help}
.mon-inc-sectores{margin:4px 0 6px;font-size:13px}
.mon-inc-sectores small{display:block;color:var(--muted);font-size:11px}
/* Lecturas que no se tomaron en cuenta (SmartOLT contestó "Unknown") */
.mon-descartada{color:#7a6a3a}
/* Caída de toda la OLT */
.mon-inc-general{margin:6px 0;padding:7px 10px;border-radius:8px;background:#fde3e0;color:#8e2a1f;font-size:13px;font-weight:600}
.red-caida.general{border-left-width:8px}
/* Leyenda del mapa coloreado por puerto PON */
.red-leyenda-puerto-fila{cursor:default;color:var(--texto)}
.red-leyenda-puerto-fila small{color:#2c72c4;font-weight:700}
.mon-sugerencia{padding:9px 12px;border-radius:9px;background:#f5f8fa;border:1px solid var(--gris2);font-size:12.5px;margin:0 0 12px}
.mon-sugerencia small{display:block;color:var(--muted);margin-top:3px}
.mon-sectores{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 12px;max-height:320px;overflow:auto;
  padding:8px 10px;border:1px solid var(--gris2);border-radius:9px;background:#fff}
.mon-sector{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:normal;cursor:pointer;padding:3px 0}
.mon-sector input{width:auto !important;min-height:0}
/* La caída encima del mapa de la red */
.red-caida{border:1px solid #f3c2bc;border-left:6px solid var(--danger);border-radius:12px;padding:11px 14px;margin:0 0 12px;
  background:#fff8f7;font-size:13.5px}
.red-caida.causa-luz{border-color:#f1dca0;border-left-color:#d9a404;background:#fffbef}
.red-caida-cab{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:14.5px;margin-bottom:3px}
.red-caida-cab span{color:var(--muted);font-size:13px}
.red-caida-dep{margin:6px 0 8px;line-height:1.5}
.red-caida-dep small{display:block;color:var(--muted);font-size:11.5px}
/* En la leyenda: el puerto que alimenta cada sector, y el sector caído */
.red-leyenda-puerto{margin-left:5px;padding:0 5px;border-radius:6px;background:#eef2f5;color:var(--azul);font-size:10.5px;font-weight:700}
.red-leyenda-sector.caido{border-color:var(--danger) !important;background:#fde3e0 !important;color:var(--danger) !important}
/* El número rojo en el menú y en la pestaña cuando hay una caída abierta */
.nav-item{position:relative}
.nav-caidas{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#e74c3c;color:#fff;
  font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(231,76,60,.25);animation:latido 1.6s ease-in-out infinite}
@keyframes latido{50%{box-shadow:0 0 0 7px rgba(231,76,60,0)}}
.pestana.con-caidas::after{content:'●';margin-left:6px;color:#e74c3c}
@media (max-width:900px){.nav-caidas{position:absolute;top:2px;right:8px;margin:0}}
@media (prefers-reduced-motion:reduce){.nav-caidas{animation:none}}

/* ---------- Rendimiento por empleado ---------- */
.tabla-rend{min-width:980px}
.tabla-rend th{white-space:nowrap}
.tabla-rend td{vertical-align:top}
.tabla-rend td:first-child{min-width:190px}
.tabla-rend .num{text-align:right}
.rend-grande{font-size:18px;color:var(--azul)}
.rend-de{color:var(--muted);font-size:12px}
.rend-malo{color:var(--danger);font-weight:700}
td small.rend-malo{color:var(--danger)}
.rend-nada{color:#a9b5bd}
.rend-compara{display:inline-block!important;margin-left:4px;font-size:11px;font-weight:700}
.rend-compara.mejor{color:var(--ok)}
.rend-compara.peor{color:var(--danger)}
.rend-compara.igual{color:var(--muted)}
.rend-nota{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.rend-detalle{max-width:980px}
.rend-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px;margin:12px 0}
.rend-tarjeta{padding:10px 12px;border:1px solid var(--gris2);border-radius:10px;background:#f7fafc}
.rend-tarjeta b{display:block;font-size:20px;color:var(--azul);line-height:1.2}
.rend-tarjeta b small{font-size:12px;color:var(--muted);font-weight:600}
.rend-tarjeta span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.rend-tarjeta.malo{border-color:#f3c2bc;background:#fdf2f1}
.rend-tarjeta.malo b{color:var(--danger)}
.rend-sub{margin:18px 0 6px;color:var(--azul);font-size:14px}
.rend-lista{min-width:0;font-size:13px}
.rend-lista th,.rend-lista td{padding:7px 8px}
.rend-lista .num{text-align:right}
.rend-bien{margin:4px 0 8px;color:var(--ok);font-size:13px}
.rend-mas{margin-top:12px;border:1px solid var(--gris2);border-radius:10px;padding:8px 12px;background:#fff}
.rend-mas summary{cursor:pointer;font-weight:700;color:var(--azul);font-size:13px}
.rend-mas[open] summary{margin-bottom:8px}
@media (max-width:700px){.fact-cobro-opciones,.fact-cobro-datos{grid-template-columns:1fr}}

/* ---------- Historial de gestiones y cancelación con motivo ---------- */
.ultimo-comentario{display:inline-block;max-width:260px;margin-top:3px;font-size:11px;color:#55646f;
  line-height:1.3;white-space:normal}
.ultimo-comentario b{color:var(--azul)}
.ultimo-comentario.es-cancelada b{color:var(--danger)}
.aviso-cancelada{background:#fdecea;border:1px solid #f3c2bc;border-left:5px solid var(--danger);
  border-radius:10px;padding:11px 14px;margin:10px 0;font-size:13px;color:var(--texto)}
.aviso-cancelada>b{color:var(--danger)}
.aviso-cancelada div{margin-top:4px}
.aviso-cancelada span{font-weight:700}
.bloque-gestiones{border:1px solid var(--gris2);border-left:5px solid #6b7c89;border-radius:12px;
  padding:0 14px 14px;margin:14px 0;background:#fafbfc}
.gestion-nueva{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.gestion-nueva textarea{flex:1;min-width:0}
.lista-gestiones{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-height:340px;overflow:auto}
.gestion{display:flex;gap:10px;padding:8px 10px;background:#fff;border:1px solid var(--gris2);border-radius:9px}
.gestion-ico{font-size:15px;line-height:1.4;width:20px;text-align:center}
.gestion b{font-size:13px;color:var(--azul)}
.gestion p{margin:2px 0;font-size:13px;white-space:pre-wrap}
.gestion small{font-size:11px;color:var(--muted)}
.gestion.g-cancelada{border-color:#f3c2bc;background:#fff8f7}
.gestion.g-cancelada b{color:var(--danger)}
.gestion.g-no_realizada b{color:var(--danger)}
.gestion.g-reprogramada b{color:#a86a00}
.gestion.g-completada b{color:var(--ok)}
@media (max-width:900px){ .gestion-nueva{flex-direction:column} }
/* Consumo y señal de una ONU (gráficas de SmartOLT) */
.mon-consumo input[type=search],.modal input[type=search]{width:100%;padding:9px 10px;border:1px solid var(--gris2);border-radius:9px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--texto);margin:4px 0 10px}
.mon-onu-enlace{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--azul);cursor:pointer;text-align:left}
.mon-onu-enlace:hover{text-decoration:underline}
.mon-onus-tabla{min-width:560px}
.modal:has(.mon-graficas){width:min(820px,calc(100vw - 32px))}
.mon-graficas h4{margin:14px 0 6px;color:var(--azul)}
.mon-graficas .subtitulo{line-height:1.6}
.mon-periodos{margin:12px 0 4px}
.mon-grafica{min-height:60px;overflow-x:auto}
.mon-grafica img{display:block;max-width:100%;height:auto;border:1px solid var(--gris2);border-radius:8px;background:#fff}
.mon-grafica small{display:block;margin-top:4px}
@media(max-width:640px){.mon-periodos{gap:2px}.mon-periodos .pestana{padding:8px 8px;font-size:13px}}
/* Números de una gráfica de SmartOLT (comentario) */
.mon-comentario{background:#f5f8fa;border:1px solid var(--gris2);border-radius:10px;padding:9px 12px;margin:0 0 10px;font-size:13px}
.mon-comentario p{margin:0 0 4px}
.mon-comentario ul{margin:0;padding-left:0;list-style:none}
.mon-comentario li{margin:2px 0}
.mon-color{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
.mon-color.bajada{background:#4285f4}
.mon-color.subida{background:#f58411}
.mon-ver-imagen{margin-top:6px}
.mon-grafica-img:not(:empty){margin-top:8px}
/* Gráficas de líneas del panel */
.gl{position:relative;width:100%;margin:4px 0}
.gl svg{display:block;overflow:visible}
.gl-rejilla{stroke:#e3e8ec;stroke-width:1}
.gl-eje{fill:var(--muted);font-size:11px;font-family:inherit}
.gl-marca{font-size:11px;font-weight:700;font-family:inherit}
.gl-guia{stroke:#9aa7b1;stroke-width:1;stroke-dasharray:3 3}
.gl-tip{position:absolute;z-index:5;pointer-events:none;background:rgba(18,57,84,.95);color:#fff;border-radius:8px;padding:6px 9px;
  font-size:12px;line-height:1.45;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.gl-tip-t{font-weight:700;margin-bottom:2px;text-transform:capitalize}
.gl-tip i,.gl-leyenda i,.tr-lista i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.gl-leyenda{display:flex;gap:14px;justify-content:center;font-size:12px;color:var(--muted);margin-top:2px}
/* Tráfico y clientes */
.tr-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 16px}
.tr-tarjeta{border-radius:12px;padding:14px 16px;color:#fff;min-height:96px}
.tr-tarjeta.verde{background:#12a99f}
.tr-tarjeta.azul{background:#3a8ee6}
.tr-tarjeta.morado{background:#8656dc}
.tr-t{font-size:12px;letter-spacing:.4px;text-transform:uppercase;opacity:.92}
.tr-n{font-size:28px;font-weight:700;line-height:1.25;margin:2px 0}
.tr-s{font-size:12.5px;opacity:.95}
.tr-barra{height:3px;background:rgba(255,255,255,.35);border-radius:3px;margin-top:8px;overflow:hidden}
.tr-barra i{display:block;height:100%;background:#fff}
.tr-fila{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px}
.tr-lado{text-align:center}
.tr-lado .tr-n{color:var(--azul)}
.tr-lado .tr-s{color:var(--muted);margin-bottom:8px}
.tr-dona-svg{display:block;margin:6px auto}
.tr-dona-n{font-size:26px;font-weight:700;fill:var(--azul);font-family:inherit}
.tr-dona-l{font-size:11px;fill:var(--muted);letter-spacing:.5px;font-family:inherit}
.tr-lista{list-style:none;padding:0;margin:8px 0 0;text-align:left;font-size:13px}
.tr-lista li{margin:4px 0}
@media(max-width:800px){.tr-fila{grid-template-columns:1fr}}

/* ---------- Datos PPPoE en la orden ---------- */
.pppoe-caja{background:#f5f8fa;border:1px solid var(--gris2);border-radius:10px;padding:10px 12px}
.pppoe-campos{display:flex;gap:8px;align-items:center;margin-top:6px}
.pppoe-campos input{flex:1;min-width:0}