:root{
  color-scheme:light;
  --bg:#f4f5f7; --surface:#ffffff; --text:#1b1f24; --text-2:#56606b; --line:#dde1e6;
  --accent:#2a78d6;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --good:#0ca30c; --warning:#fab219; --critical:#d03b3b; --neutral:#b9bfc7;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121416; --surface:#1a1a19; --text:#f2f3f4; --text-2:#b4bcc5; --line:#33373c;
    --accent:#3987e5; --s1:#3987e5; --s2:#d95926; --s3:#199e70; --neutral:#5a6068;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{background:var(--surface);border-bottom:1px solid var(--line)}
.wrap{max-width:72rem;margin:0 auto;padding:0 16px}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding-block:.9rem}
h1{font-size:1.2rem;margin:0}
h1 small{display:block;font-size:.85rem;font-weight:400;color:var(--text-2)}
h2{font-size:1.05rem;margin:0 0 .75rem}
main{padding-block:1.25rem 3rem}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem;margin-bottom:1rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid>.card{margin:0}

button,.btn{font:inherit;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;display:inline-block}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button:disabled{opacity:.5;cursor:default}
select,input,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.4rem .5rem;max-width:100%}
label{font-size:.85rem;color:var(--text-2)}

/* Pestañas de captura */
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:1rem}
.tabs button[aria-selected="true"]{background:var(--text);color:var(--surface);border-color:var(--text)}

.filtros{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin-bottom:1rem}
.filtros>div{display:flex;flex-direction:column;gap:.2rem}
.acciones{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}
.msg{font-size:.9rem;color:var(--text-2)}
.msg.error{color:var(--critical)}

table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--text-2);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-scroll{overflow-x:auto}
td input[type=number]{width:4.5rem}
td input[type=text]{width:100%;min-width:8rem}

/* Puntos de zonas comunes */
.punto{border:1px solid var(--line);border-radius:6px;padding:.75rem;margin-bottom:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));align-items:end}
.punto .tit{grid-column:1/-1;font-weight:600}
.punto .checks{display:flex;flex-direction:row;flex-wrap:wrap;gap:.25rem .9rem;grid-column:1/-1}
.punto .checks label{color:var(--text);font-size:.9rem}
.punto>div{display:flex;flex-direction:column;gap:.2rem}

/* Tablero */
.kpis{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem}
.kpi .v{font-size:2.25rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .d{color:var(--text-2);font-size:.85rem}
.kpi progress{width:100%;height:8px;margin-top:.6rem;accent-color:var(--accent)}
.chart{position:relative;height:280px}
.chart.alto{height:360px}
.nota{font-size:.85rem;color:var(--text-2);margin:.5rem 0 0}

/* Ventanas de alta */
dialog{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:1.25rem;width:min(40rem,calc(100% - 32px))}
dialog::backdrop{background:rgb(0 0 0 / .5)}

/* Planos */
.nav{display:flex;gap:.5rem;flex-wrap:wrap}
.pagina-mapa{display:flex;flex-direction:column;height:100vh;height:100dvh}
.barra{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.6rem 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.leyenda{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:0 0 0 auto;padding:0;font-size:.85rem;color:var(--text-2)}
.leyenda li{display:flex;align-items:center;gap:.35rem}
.leyenda .marca{position:static;transform:none;width:14px;height:14px;cursor:default}
.mapa{flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(18rem,26rem)}
.visor{overflow:auto;background:#fff;cursor:grab;user-select:none;-webkit-user-select:none}
.visor:active{cursor:grabbing}
.visor.colocando,.visor.colocando .marca{cursor:crosshair}
.lienzo{position:relative;width:100%}
.lienzo img{display:block;width:100%;height:auto}
.panel{overflow:auto;padding:1rem;background:var(--surface);border-left:1px solid var(--line)}
.panel .punto{grid-template-columns:1fr}
.lista{list-style:none;padding:0;margin:0}
.lista li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.lista button{padding:.25rem .6rem;font-size:.85rem}

.marca{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;padding:0;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px rgb(0 0 0 / .35);font:700 11px/1 system-ui,sans-serif;cursor:pointer;color:#1b1f24}
.marca.completo{background:var(--good);color:#fff}
.marca.avance{background:var(--warning)}
.marca.pendiente{background:#9aa1a9}
.marca.sin_canal{background:var(--critical);color:#fff}
.marca.sel{outline:3px solid var(--accent);outline-offset:2px;z-index:1}
.marca:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

@media (max-width:760px){
  .pagina-mapa{height:auto}
  .mapa{grid-template-columns:1fr}
  .visor{height:65vh}
  .panel{border-left:0;border-top:1px solid var(--line)}
  .leyenda{margin-left:0}
}