@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#17120E; --paper:#F7F4EE; --card:#FFFFFF;
  --copper:#C77B3F; --copper-soft:#F3E3D3; --navy:#131C33;
  --muted:#8B8177; --line:#E7E0D6; --ok:#2E7D4F; --warn:#B3541E;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--paper);color:var(--ink)}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit}

/* ===== Pantallas de acceso (login) ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:400px;padding:32px 30px;box-shadow:0 20px 50px rgba(23,18,14,.08)}
.auth-card h1{font-size:1.25rem;font-weight:800;margin-bottom:4px}
.auth-card p.sub{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.auth-card .btn{width:100%}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font-family:inherit;font-size:.88rem;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);outline:none;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper)}
.error-box{background:#F5E1DF;color:#8A2C26;font-size:.82rem;font-weight:600;padding:10px 13px;border-radius:9px;margin-bottom:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:9px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.83rem;padding:9px 15px;transition:all .15s}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.btn-primary{background:var(--copper);color:#fff}
.btn-primary:hover{background:#B06A32}
.btn-dark{background:var(--ink);color:#fff}
.btn-locked{background:var(--paper);color:var(--muted);border:1px dashed var(--line);cursor:not-allowed}
.btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.btn-sm{padding:7px 12px;font-size:.78rem}

/* ===== Panel (área autenticada) ===== */
body.app{display:flex;min-height:100vh}
aside{width:232px;flex-shrink:0;background:var(--ink);color:#EDE6DC;display:flex;flex-direction:column;padding:26px 18px;position:sticky;top:0;height:100vh}
.app-tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#9C9184;margin:4px 0 30px}
.brand{font-weight:800;font-size:1.05rem}
.brand span{color:var(--copper)}
nav a{display:block;padding:10px 12px;border-radius:10px;color:#CFC6BA;text-decoration:none;font-size:.92rem;font-weight:500;margin-bottom:3px;cursor:pointer}
nav a:hover{background:rgba(255,255,255,.06)}
nav a.active{background:var(--copper);color:#fff}
.side-foot{margin-top:auto;font-size:.72rem;color:#7A7166;line-height:1.5}
.side-foot b{color:#B8AFA3}
main{flex:1;min-width:0;padding:26px 32px 48px;max-width:900px}
main.wide{max-width:1320px}
h1{font-size:1.4rem;font-weight:800;letter-spacing:-.01em}
h1 small{display:block;font-size:.8rem;font-weight:500;color:var(--muted);margin-top:3px}
.pill-rol{display:inline-block;background:var(--copper-soft);color:#8A5424;font-size:.72rem;font-weight:700;padding:3px 11px;border-radius:99px;margin-left:8px;vertical-align:middle}
.mock-banner{background:var(--ink);color:#CFC6BA;font-size:.72rem;padding:8px 14px;border-radius:9px;margin-bottom:20px}
.mock-banner b{color:var(--copper)}

/* ===== Cabecera superior (hamburguesa + título + cerrar sesión) ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
form.logout{margin:0}
.hamburger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:6px;border-radius:8px;flex-shrink:0}
.hamburger:hover{background:var(--copper-soft)}
.hamburger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(23,18,14,.5);z-index:39}
.nav-overlay.open{display:block}

.permisos{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-top:22px;overflow:hidden}
.permisos h2{font-size:.9rem;font-weight:700;padding:14px 18px;border-bottom:1px solid var(--line)}
.permisos ul{list-style:none}
.permisos li{padding:11px 18px;border-bottom:1px solid #F1ECE3;font-size:.85rem;display:flex;justify-content:space-between}
.permisos li:last-child{border-bottom:none}
.si{color:var(--ok);font-weight:700}
.no{color:var(--muted);font-weight:700}

/* ===== KPIs ===== */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.kpi .n{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.kpi .l{font-size:.76rem;color:var(--muted);margin-top:2px}
.kpi.accent{background:var(--ink);border-color:var(--ink);color:#fff}
.kpi.accent .n{color:var(--copper)}
.kpi.accent .l{color:#B8AFA3}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{font-size:.95rem;font-weight:700}
.panel-h .sub{font-size:.75rem;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:18px}

.mapa-tabs{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:3px}
.mapa-tab{border:none;background:transparent;padding:6px 14px;border-radius:99px;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--muted)}
.mapa-tab.on{background:var(--ink);color:#fff}
.sin-regiones{display:none;padding:12px 20px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);background:#FCFAF6}
.sin-regiones.show{display:block}

/* ===== MAPA ===== */
.map-box{position:relative;background:var(--navy);min-width:0}
.map-box svg.map{width:100%;height:auto;display:block;max-width:100%}
.c{fill:#243050;stroke:#0E1526;stroke-width:.5;vector-effect:non-scaling-stroke}
.c.act{fill:#B5762F;cursor:pointer;transition:fill .15s}
.c.act:hover{fill:var(--copper)}
.c.act.soon{fill:#3E4F78}
.c.act.soon:hover{fill:#4E619199}
.c.sel{fill:#EDA764;stroke:#FFF;stroke-width:1.4}
.c-punto{cursor:pointer}
.c-punto.sel{stroke:#EDA764;stroke-width:2.5}
/* A la izquierda, dentro del propio SVG, van los recuadros de Canarias/Islandia — la
   leyenda y el aviso se ponen a la derecha para no solaparse con ellos. */
.map-hint{position:absolute;bottom:12px;right:18px;font-size:.7rem;color:#8B9AC0;letter-spacing:.05em;pointer-events:none;text-align:right;max-width:55%}
.map-legend{position:absolute;top:14px;right:18px;font-size:.7rem;color:#B9C4DC;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 14px;pointer-events:none;max-width:70%}
.map-legend span{display:flex;align-items:center;white-space:nowrap}
.map-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;border:1px solid rgba(255,255,255,.35)}

.pills{display:flex;gap:8px;padding:14px 20px;flex-wrap:wrap;border-top:1px solid var(--line);background:#FCFAF6}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--ink)}
.pill:hover{border-color:var(--copper)}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill b{color:var(--copper);font-weight:800}
.pill.on b{color:#E9A25F}
.pill.soon{border-style:dashed}

/* ===== DETALLE DEL PAÍS ===== */
#detail{display:none}
#detail.show{display:block;animation:slidein .25s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.detail-id{display:flex;align-items:center;gap:13px}
.detail-id .fl{font-size:1.9rem;line-height:1}
.detail-id h2{font-size:1.1rem;font-weight:800}
.detail-id .meta{font-size:.76rem;color:var(--muted);margin-top:1px}
.detail-stats{display:flex;gap:22px;align-items:center}
.dstat{text-align:right}
.dstat .n{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.dstat .l{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.soon-tag{background:#E4E9F5;color:#2C3E66;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.06em}

/* ===== Listado ===== */
.toolbar{display:flex;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{font-family:inherit;font-size:.85rem;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);outline:none}
.toolbar input{flex:1;min-width:170px}
.toolbar input:focus,.toolbar select:focus{border-color:var(--copper)}
/* En escritorio/tablet, este contenedor es "invisible" para el layout: sus selects se
   colocan igual que si no estuvieran envueltos. En móvil pasa a plegable (ver media query). */
.filtros-plegables{display:contents}
.filtros-toggle{display:none}

/* ===== Tarjetas de técnico (listado en móvil) ===== */
.tabla-tarjetas{display:none}
.tarjeta-tecnico{padding:14px 20px;border-bottom:1px solid #F1ECE3;display:flex;flex-direction:column;gap:8px}
.tarjeta-tecnico.inactivo{opacity:.55}
.tarjeta-tecnico .tt-fila1{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.92rem}
.tarjeta-tecnico .tt-fila2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.tarjeta-tecnico .tt-region{white-space:nowrap}
.tarjeta-tecnico .tt-fila3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tt-tel{display:inline-flex;align-items:center;gap:7px;color:var(--copper);font-weight:700;font-size:.88rem;text-decoration:none}
.tt-tel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.tt-tel.sin-tel{color:var(--muted);font-weight:500}
.tarjeta-vacia{padding:30px 20px;text-align:center;color:var(--muted);font-size:.85rem}

table{width:100%;border-collapse:collapse;font-size:.85rem}
thead th{text-align:left;padding:11px 20px;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
tbody td{padding:12px 20px;border-bottom:1px solid #F1ECE3;white-space:nowrap}
tbody tr:hover{background:#FBF8F2}
tbody tr.new{animation:flash 1.6s ease}
tbody tr.inactivo{opacity:.55}
@keyframes flash{0%{background:#F3E3D3}100%{background:transparent}}
.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:600;background:var(--copper-soft);color:#8A5424}
.chip.elec{background:#E4E9F5;color:#2C3E66}
.chip.font{background:#DFF0E6;color:#22603C}
.chip.cerr{background:#EFE4F1;color:#5E3A66}
.chip.solar{background:#FDF3D7;color:#8A6A12}
.chip.ref{background:#F0E9E2;color:#6B5844}
.flag{font-size:1rem;margin-right:6px}
.row-actions{display:flex;gap:6px}
.icon-btn{width:29px;height:29px;border-radius:8px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.icon-btn:hover{color:var(--copper);border-color:var(--copper)}
.icon-btn.danger:hover{color:#B3352E;border-color:#B3352E}
.icon-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.table-foot{padding:13px 20px;font-size:.76rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px}
.paginacion{display:flex;gap:8px;align-items:center}

/* ===== Auditoría ===== */
.audit-row-icon{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.a-down{background:var(--copper-soft);color:#8A5424}
.a-edit{background:#E4E9F5;color:#2C3E66}
.a-new{background:#DFF0E6;color:#22603C}
.a-del{background:#F5E1DF;color:#8A2C26}
.a-otro{background:#F0E9E2;color:#6B5844}
.audit-row-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.badge-ok{color:var(--ok);font-weight:600;font-size:.76rem}
.badge-warn{color:var(--warn);font-weight:600;font-size:.76rem}
.detalle-audit{max-width:340px;white-space:normal;font-size:.78rem;color:var(--muted)}

/* ===== Modal ===== */
.overlay{position:fixed;inset:0;background:rgba(23,18,14,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;overscroll-behavior:contain}
.overlay.open{display:flex}
/* El modal no puede ser más alto que la pantalla: con muchos campos (p. ej. el alta de
   técnico) no cabía entero en un móvil y no había forma de bajar a ver el resto ni el botón
   de guardar. Con flex-direction:column, la cabecera y el pie se quedan fijos y solo el
   cuerpo (modal-b) hace scroll si hace falta. */
.modal{background:var(--card);border-radius:16px;width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal-h{background:var(--ink);color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.modal-h h3{font-size:1rem;font-weight:700}
.modal-h .x{background:none;border:none;color:#B8AFA3;font-size:1.2rem;cursor:pointer;line-height:1}
.modal-b{padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:13px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}
.form-err{grid-column:1/-1;color:#B3352E;font-size:.78rem;font-weight:600;display:none}
.form-err.show{display:block}

#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:.85rem;font-weight:600;opacity:0;transition:all .3s;z-index:60;display:flex;gap:9px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:90vw}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
#toast i{color:var(--copper);font-style:normal;flex-shrink:0}

/* ===== Escritorio grande: mapa a la izquierda, listado a la derecha ===== */
@media(min-width:1400px){
  main.wide{max-width:1600px;margin:0 auto}
  .stack{
    display:grid;
    grid-template-columns:minmax(0,560px) minmax(0,1fr);
    grid-template-rows:auto auto;
    grid-template-areas:"mapa listado" "detalle listado";
    align-items:start;
    gap:18px;
  }
  .panel-mapa{grid-area:mapa}
  .panel-detalle{grid-area:detalle}
  .panel-listado{grid-area:listado}
}

@media(max-width:760px){
  aside{
    display:flex;position:fixed;top:0;left:0;height:100vh;z-index:40;width:232px;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  aside.open{transform:translateX(0)}
  .hamburger{display:inline-flex}
  main{padding:18px 14px 40px}
  main.wide{max-width:100%}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .modal-b{grid-template-columns:1fr}
  .detail-stats{width:100%;justify-content:flex-start;gap:18px}
  .dstat{text-align:left}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar input,.toolbar .btn{width:100%}
  .filtros-toggle{display:inline-flex;width:100%;justify-content:space-between}
  .filtros-plegables{display:none;width:100%}
  .filtros-plegables.open{display:flex;flex-direction:column;gap:10px}
  .filtros-plegables select{width:100%}

  /* La tabla se sustituye por tarjetas — más fácil de leer y de pulsar en el móvil. */
  .tabla-wrap{display:none}
  .tabla-tarjetas{display:block}
}