/* Estilos del grafo y su panel. Los comparten el HTML autónomo de mapa.py y la
   web: estaban duplicados (50 de 57 selectores), y una regla que se añadía a una
   copia no llegaba a la otra. sync_docs.py lo copia a docs/. */
/* El alto lo manda este archivo, no cada consumidor: cuando lo fijaba
   index.html en su propio <style>, ganaba a la media query de aquí y en
   móvil el grafo quedaba en una franja de 150px. */
#app{height:100vh}
#lienzo{flex:1;position:relative;min-width:0}
svg{width:100%;height:100%;display:block;cursor:grab}svg.arrastrando{cursor:grabbing}
.enlace{stroke:#5C5245;stroke-width:1.4;transition:stroke .2s,stroke-width .2s,opacity .2s}
.enlace.riesgo{stroke:#7C3320;stroke-dasharray:5 4}
.enlace.fuerte{stroke-width:2.6}
.enlace.on{stroke:var(--laton);stroke-width:3}.enlace.riesgo.on{stroke:var(--brasa)}
.enlace.off{opacity:.10}
.etq{font-family:var(--c);font-size:10px;fill:var(--laton);letter-spacing:.06em;
 text-transform:uppercase;pointer-events:none}
.etq.riesgo{fill:var(--brasa)}
.nodo{cursor:pointer}
.nodo .aro{fill:var(--fondo);stroke-width:2.5;transition:stroke-width .15s}
.nodo:hover .aro{stroke-width:4}.nodo.sel .aro{stroke-width:5}.nodo.off{opacity:.16}
.nodo .nom{font-family:var(--c);font-size:11px;font-weight:700;fill:#D9CFBE;text-anchor:middle;
 letter-spacing:.03em;pointer-events:none}
.nodo .cnt{font-family:var(--c);font-size:11px;font-weight:700;fill:#fff;text-anchor:middle;
 pointer-events:none}
.cntbg{fill:var(--brasa)}
.barra{position:absolute;top:0;left:0;right:0;padding:16px 20px;display:flex;gap:16px;
 align-items:flex-start;justify-content:space-between;pointer-events:none;flex-wrap:wrap}
.barra h1{font-size:19px;margin:0;line-height:1.05;letter-spacing:-.01em}
.barra h1 em{font-style:normal;color:var(--laton)}
.barra p{margin:3px 0 0;font-family:var(--c);font-size:10.5px;text-transform:uppercase;
 letter-spacing:.14em;color:var(--humo)}
.chips{display:flex;gap:6px;flex-wrap:wrap;pointer-events:auto}
.chip{font-family:var(--c);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 background:transparent;color:var(--humo);border:1px solid var(--lin);border-radius:999px;
 padding:5px 11px;cursor:pointer}
.chip:hover{color:var(--pap);border-color:#5C5245}
/* Panel de ajustes del mapa: densidad de la red. Cuelga de .barra, que tiene
   pointer-events:none, así que hay que reactivarlos aquí. */
#ajustes{position:relative;pointer-events:auto}
.ajustes-caja{position:absolute;right:0;top:34px;width:232px;background:var(--fondo);
 border:1px solid var(--lin);border-radius:8px;padding:12px 13px;z-index:5;
 box-shadow:0 8px 24px rgba(0,0,0,.45)}
.ajustes-caja[hidden]{display:none}
.ajustes-caja label{display:block;font-family:var(--c);font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--humo);margin-bottom:11px}
.ajustes-caja label.lin{display:flex;align-items:center;gap:7px;text-transform:none;
 letter-spacing:.04em;font-size:11.5px;color:var(--pap)}
.ajustes-caja output{color:var(--laton);font-weight:700;margin-left:4px}
.ajustes-caja input[type=range]{width:100%;margin-top:6px;accent-color:var(--laton)}
.ajustes-caja input[type=checkbox]{accent-color:var(--laton);margin:0}
.nota-ajustes{font-size:10.5px;line-height:1.35;color:var(--humo);margin:2px 0 0}
.enlace.oculto{display:none}
.chip.act{color:var(--ceniza);background:var(--laton);border-color:var(--laton)}
.pie{position:absolute;left:20px;bottom:14px;font-family:var(--c);font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;color:#544B41;pointer-events:none}
.leyenda{position:absolute;right:20px;bottom:14px;display:flex;gap:14px;font-family:var(--c);
 font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--humo);pointer-events:none}
.leyenda i{display:inline-block;width:16px;height:0;border-top:2px solid var(--laton);
 vertical-align:3px;margin-right:5px}
.leyenda i.r{border-top:2px dashed var(--brasa)}
.leyenda i.m{border-top:2px dotted #7E8C5C}
#panel{width:340px;flex:0 0 340px;background:var(--fondo);border-left:1px solid var(--lin);
 overflow-y:auto;padding:20px}
.carta-img{width:100%;aspect-ratio:488/680;border-radius:10px;object-fit:cover;background:#2A241D;
 display:block}
.rolcap{font-family:var(--c);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
 margin:14px 0 2px}
#panel h2{font-size:20px;margin:0 0 2px;line-height:1.1;letter-spacing:-.01em}
.meta{font-family:var(--c);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--humo);margin:0 0 12px}
.bloq{font-size:13.5px;line-height:1.45;color:#CFC5B4;margin:0 0 12px}
.bloq b{color:var(--pap)}
h3{font-family:var(--c);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--laton);margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--lin)}
h3.r{color:var(--brasa)}
.conn{display:flex;gap:10px;align-items:flex-start;padding:8px;margin:0 -8px;border-radius:6px;
 cursor:pointer;background:none;border:0;width:calc(100% + 16px);text-align:left;color:inherit;font:inherit}
.conn:hover{background:rgba(216,177,94,.09)}
.conn img{width:34px;aspect-ratio:488/680;object-fit:cover;border-radius:3px;background:#2A241D;
 flex:0 0 auto}
.conn .qn{font-size:13px;font-weight:700;line-height:1.2}
.conn .qd{font-size:12px;line-height:1.35;color:#A79C8C;margin-top:2px}
.pill{font-family:var(--c);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--laton);display:block;margin-bottom:1px}
.pill.r{color:var(--brasa)}
.ev{font-size:11px;color:#8B8175;font-style:italic;margin-top:6px;padding-left:8px;
 border-left:1px solid var(--lin)}
@media (max-width:860px){html,body{overflow:auto;height:auto}#app{flex-direction:column;height:auto}
 /* flex-basis manda sobre height en un contenedor flex, así que sin esto
    el #lienzo{flex:1} de arriba dejaba el grafo en una franja. */
 #lienzo{flex:0 0 68vh;height:68vh}#panel{width:100%;flex:1 1 auto;border-left:0;border-top:1px solid var(--lin)}}