/* diagrama.olistic.app — plano tecnico, fondo claro, sin dependencias.
   Lenguaje visual: lienzo blanco con malla de puntos, tarjetas con sombra,
   cuadro de icono por familia, conexiones bezier con anclaje y recursos
   colgantes que aparecen al acercarse. */

:root{
  --papel:#ffffff;
  --fondo:#ffffff;
  --tinta:#1B2733;
  --tinta-suave:#6B7684;
  --tinta-tenue:#98A2B3;
  --borde:#D7DCE3;
  --borde-fuerte:#C3CAD3;
  --puntos:#E3E6EA;
  --conexion:#99A2AD;

  --violeta:#7C5CFF;
  --violeta-claro:#B9A8FF;
  --ambar:#E5A000;

  --ok:#22A06B;
  --ok-fondo:#E9F7F0;
  --alerta:#E5A000;
  --alerta-fondo:#FDF4E3;
  --roto:#E5484D;
  --roto-fondo:#FDECEC;
  --sinmedir:#98A2B3;
  --sinmedir-fondo:#F2F4F7;

  --f-origen:#F4772E;
  --f-canal:#22A06B;
  --f-atencion:#7C5CFF;
  --f-pedido:#E5A000;
  --f-despacho:#2E7BF4;
  --f-cobro:#0E9F6E;
  --f-postventa:#16BDCA;
  --f-infra:#6B7684;

  --barra-alto:58px;
  --panel-ancho:392px;
  --radio:14px;
  --sombra-tarjeta:0 2px 8px rgba(16,24,40,.06);
  --sombra-alta:0 10px 24px rgba(16,24,40,.13), 0 2px 6px rgba(16,24,40,.07);
  --sombra-barra:0 1px 3px rgba(16,24,40,.07), 0 4px 16px rgba(16,24,40,.05);
}

*{box-sizing:border-box}

html,body{
  margin:0; padding:0; height:100%;
  background:var(--fondo); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.42;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ── barra superior ─────────────────────────────────────────────── */
#barra{
  position:fixed; inset:0 0 auto 0; height:var(--barra-alto); z-index:40;
  display:flex; align-items:center; gap:14px; padding:0 14px;
  background:#fff;
  box-shadow:var(--sombra-barra);
  border-bottom:1px solid var(--borde);
}

.migas{display:flex; align-items:center; gap:2px; flex:0 1 auto; min-width:0; overflow:hidden}
.migas button{
  font:inherit; font-size:13.5px; color:var(--tinta-suave);
  background:none; border:0; padding:5px 7px; border-radius:6px;
  cursor:pointer; white-space:nowrap; max-width:230px; overflow:hidden; text-overflow:ellipsis;
}
.migas button:hover{background:#F2F4F7; color:var(--tinta)}
.migas button[aria-current="true"]{color:var(--tinta); font-weight:650; cursor:default}
.migas button[aria-current="true"]:hover{background:none}
.migas .sep{color:var(--tinta-tenue); font-size:12px; user-select:none; padding:0 1px}

.buscador{position:relative; flex:0 1 300px; min-width:130px; margin-left:auto}
.buscador input{
  width:100%; font:inherit; font-size:13.5px; color:var(--tinta);
  background:#F7F8FA; border:1px solid var(--borde); border-radius:9px;
  padding:7px 11px; outline:none;
}
.buscador input:focus{background:#fff; border-color:var(--violeta); box-shadow:0 0 0 3px rgba(124,92,255,.13)}
.buscador input::-webkit-search-cancel-button{-webkit-appearance:none}
.qres{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:11.5px; color:var(--tinta-tenue); pointer-events:none; background:inherit;
}

.controles{display:flex; align-items:center; gap:9px; flex:0 0 auto}

.interruptor{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:12.5px; color:var(--tinta-suave);
  background:#F7F8FA; border:1px solid var(--borde); border-radius:999px;
  padding:6px 12px 6px 9px; cursor:pointer; white-space:nowrap;
}
.interruptor .punto{
  width:11px; height:11px; border-radius:50%;
  background:#fff; border:2px solid var(--borde-fuerte); flex:0 0 auto;
  transition:background .12s, border-color .12s;
}
.interruptor[aria-pressed="true"]{color:var(--tinta); background:#fff; border-color:var(--borde-fuerte)}
.interruptor[aria-pressed="true"] .punto{background:var(--ambar); border-color:var(--ambar)}

.fugas{
  font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.1px;
  background:var(--roto-fondo); color:var(--roto);
  border:1px solid #F6CFD0; border-radius:999px; padding:6px 13px;
  cursor:pointer; white-space:nowrap;
}
.fugas:hover{background:#FBDDDD}
.fugas.limpio{background:var(--ok-fondo); color:var(--ok); border-color:#C7E9D8}
.fugas.limpio:hover{background:#D8F0E5}

/* ── lienzo ─────────────────────────────────────────────────────── */
#lienzo{position:fixed; inset:var(--barra-alto) 0 0 0; overflow:hidden; background:#fff}
#svg{
  display:block; width:100%; height:100%;
  background:#fff;
  cursor:grab; touch-action:none; outline:none;
}
#svg.arrastrando{cursor:grabbing}

/* rotulos de columna */
.rotulo-col{
  font-size:12px; font-weight:700; letter-spacing:1.3px;
  fill:var(--tinta-tenue);
}

/* ── nodos ──────────────────────────────────────────────────────── */
.nodo{cursor:pointer}
.nodo .caja{
  fill:var(--papel); stroke:var(--borde); stroke-width:1.5;
  filter:url(#sombra-nodo);
}
.nodo:hover .caja{stroke:var(--borde-fuerte); filter:url(#sombra-alta)}
.nodo .halo{fill:none; stroke:none}

/* la caja del icono lleva el color de la familia */
.nodo .icono-fondo{stroke:none}
.nodo .icono-trazo{
  fill:none; stroke:#fff; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* quien lo hace: el BORDE lo dice */
.nodo[data-auto="auto"] .caja{stroke:var(--borde-fuerte); stroke-width:1.5; stroke-dasharray:none}
.nodo[data-auto="agente"] .caja{stroke:var(--violeta); stroke-width:1.8; stroke-dasharray:none}
.nodo[data-auto="persona"] .caja{stroke:var(--ambar); stroke-width:1.8; stroke-dasharray:6 4}
.nodo[data-auto="mixto"] .caja{stroke:url(#borde-mixto); stroke-width:1.8; stroke-dasharray:none}

.nodo .titulo{font-size:17px; font-weight:700; fill:var(--tinta)}
.nodo .resumen{font-size:13px; fill:var(--tinta-suave)}
.nodo .detalle{font-size:11px; fill:var(--tinta-suave)}
.nodo .nota-tecnica{font-size:10.5px; fill:var(--tinta-tenue); font-style:italic}
.nodo .metrica-v{font-size:12px; font-weight:700; fill:var(--tinta)}
.nodo .metrica-f{font-size:10px; fill:var(--tinta-tenue)}

/* pastilla de estado, arriba a la derecha */
.nodo .pastilla-fondo{stroke:none}
.nodo .pastilla-texto{font-size:10px; font-weight:700; letter-spacing:.3px}
.nodo .pastilla-punto{stroke:none}

/* el cuadro "+" del borde derecho, invita a entrar */
.nodo .mas rect{fill:#fff; stroke:var(--borde); stroke-width:1.4}
.nodo .mas path{stroke:var(--tinta-tenue); stroke-width:1.8; fill:none; stroke-linecap:round}
.nodo:hover .mas rect{fill:var(--violeta); stroke:var(--violeta)}
.nodo:hover .mas path{stroke:#fff}

.nodo.apagado{opacity:.13}
.nodo.hallado .caja{stroke:#2F6FD0; stroke-width:2.6}
.nodo.hallado .halo{stroke:#2F6FD0; stroke-width:2; opacity:.45}
.nodo.destello .caja{animation:destello 1.5s ease-out 1}
@keyframes destello{
  0%,100%{stroke:#2F6FD0; stroke-width:2.6}
  30%{stroke:#2F6FD0; stroke-width:6}
}

/* ── recursos colgantes (solo de cerca) ─────────────────────────── */
.recursos{display:none}
#svg[data-z="cerca"] .recursos,
#svg[data-z="detalle"] .recursos{display:block}

.recurso .aro{fill:#fff; stroke:var(--borde); stroke-width:1.5}
.recurso .aro-color{fill:none; stroke-width:2.5; stroke-linecap:round}
.recurso .rec-icono{
  fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.recurso .rec-titulo{font-size:11px; font-weight:700; fill:var(--tinta)}
.recurso .rec-sub{font-size:9.5px; fill:var(--tinta-suave)}
.recurso .rec-punto{stroke:none}
.enlace-recurso{
  fill:none; stroke:var(--violeta-claro); stroke-width:1.6; stroke-dasharray:5 5;
}
.ancla-rombo{fill:#fff; stroke:var(--violeta-claro); stroke-width:1.5}

#svg.solo-personas .nodo[data-auto="auto"]{opacity:.14}
#svg.solo-personas .flecha[data-auto="auto"]{opacity:.14}
#svg.solo-personas .recursos{opacity:.14}

/* ── flechas ────────────────────────────────────────────────────── */
.flecha-linea{fill:none; stroke:var(--conexion); stroke-width:2; stroke-linecap:round}
.flecha .ancla{fill:var(--conexion); stroke:none}
.flecha .etiqueta{font-size:10.5px; font-weight:600; fill:var(--tinta-suave)}
.flecha .etiqueta-fondo{fill:#fff; stroke:var(--borde); stroke-width:1}

.flecha[data-estado="ok"] .flecha-linea{stroke:#7FC0A2}
.flecha[data-estado="ok"] .ancla{fill:#7FC0A2}
.flecha[data-estado="alerta"] .flecha-linea{stroke:#E9C46A}
.flecha[data-estado="alerta"] .ancla{fill:#E9C46A}
.flecha[data-estado="roto"] .flecha-linea{stroke:#EE9A9C}
.flecha[data-estado="roto"] .ancla{fill:#EE9A9C}
.flecha[data-estado="sin-medir"] .flecha-linea{stroke:var(--conexion); stroke-dasharray:7 6}

/* ── zoom semantico: solo se muestran u ocultan clases ──────────── */
/* <0.45: solo icono y titulo */
#svg[data-z="lejos"] .resumen,
#svg[data-z="lejos"] .detalle,
#svg[data-z="lejos"] .metrica,
#svg[data-z="lejos"] .etiqueta,
#svg[data-z="lejos"] .etiqueta-fondo,
#svg[data-z="lejos"] .mas,
#svg[data-z="lejos"] .nota-tecnica,
#svg[data-z="lejos"] .pastilla-texto,
#svg[data-z="lejos"] .rec-titulo,
#svg[data-z="lejos"] .rec-sub,
#svg[data-z="lejos"] .rotulo-col{display:none}

#svg[data-z="lejos"] .flecha-linea{stroke-width:3}
#svg[data-z="lejos"] .nodo .caja{stroke-width:2.2}
#svg[data-z="lejos"] .nodo .pastilla-fondo{opacity:.85}

/* 0.45–1.1: + resumen y etiquetas de flecha */
#svg[data-z="medio"] .detalle,
#svg[data-z="medio"] .metrica,
#svg[data-z="medio"] .nota-tecnica,
#svg[data-z="medio"] .rec-titulo,
#svg[data-z="medio"] .rec-sub{display:none}

/* >2.2: + notas tecnicas dentro de la tarjeta */

/* ── controles de zoom (abajo a la derecha) ─────────────────────── */
.zoom-controles{
  position:absolute; right:14px; bottom:14px; z-index:20;
  display:flex; align-items:center; gap:0;
  background:#fff; border:1px solid var(--borde); border-radius:11px;
  box-shadow:var(--sombra-tarjeta); overflow:hidden;
}
.zoom-controles button{
  font:inherit; font-size:15px; line-height:1; color:var(--tinta-suave);
  background:none; border:0; border-right:1px solid var(--borde);
  width:36px; height:36px; cursor:pointer;
}
.zoom-controles button:hover{background:#F2F4F7; color:var(--tinta)}
.zoom-controles .ajustar{width:auto; padding:0 11px; font-size:12px; font-weight:600}
.zoom-controles .nivel{
  border-right:0; width:auto; padding:0 11px; cursor:default;
  font-size:12px; color:var(--tinta-tenue); font-variant-numeric:tabular-nums;
}
.zoom-controles .nivel:hover{background:none; color:var(--tinta-tenue)}

/* ── ayudas en pantalla ─────────────────────────────────────────── */
.ayuda{
  position:absolute; right:14px; bottom:60px; z-index:20;
  font-size:11.5px; color:var(--tinta-tenue); text-align:right;
  background:rgba(255,255,255,.94); border:1px solid var(--borde);
  border-radius:9px; padding:7px 11px; pointer-events:none; max-width:46vw;
  box-shadow:var(--sombra-tarjeta);
}
.ayuda b{color:var(--tinta-suave); font-weight:650}

.leyenda{
  position:absolute; left:14px; bottom:14px; z-index:20;
  background:rgba(255,255,255,.96); border:1px solid var(--borde);
  border-radius:var(--radio); padding:11px 15px 12px; box-shadow:var(--sombra-tarjeta);
  font-size:11.5px; color:var(--tinta-suave);
  display:flex; gap:22px; align-items:flex-start; max-width:calc(100vw - 28px);
}
.leyenda-grupo{min-width:0}
.leyenda-titulo{
  font-size:9.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--tinta-tenue); margin:0 0 6px;
}
.leyenda-lista{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.leyenda-lista li{display:flex; align-items:center; gap:7px; white-space:nowrap}
.muestra{width:13px; height:13px; border-radius:3px; flex:0 0 auto; display:inline-block}
.muestra.e-ok{background:var(--ok)}
.muestra.e-alerta{background:var(--alerta)}
.muestra.e-roto{background:var(--roto)}
.muestra.e-sin-medir{background:var(--sinmedir)}
.muestra.m-auto{background:#fff; border:1.7px solid var(--borde-fuerte)}
.muestra.m-agente{background:#fff; border:1.7px solid var(--violeta)}
.muestra.m-persona{background:#fff; border:1.7px dashed var(--ambar)}
.muestra.m-mixto{background:linear-gradient(90deg,var(--violeta) 50%,var(--ambar) 50%); border:0}

/* ── panel lateral ──────────────────────────────────────────────── */
.panel{
  position:fixed; top:var(--barra-alto); right:0; bottom:0; width:var(--panel-ancho);
  z-index:50; background:var(--papel); border-left:1px solid var(--borde);
  box-shadow:-8px 0 26px rgba(16,24,40,.09);
  display:flex; flex-direction:column;
  animation:entra-panel .16s ease-out;
}
@keyframes entra-panel{from{transform:translateX(22px); opacity:.4}to{transform:none; opacity:1}}
.panel[hidden]{display:none}
.panel-cerrar{
  position:absolute; top:9px; right:11px; z-index:2;
  width:29px; height:29px; border-radius:7px; border:1px solid transparent;
  background:none; color:var(--tinta-tenue); font-size:20px; line-height:1;
  cursor:pointer;
}
.panel-cerrar:hover{background:#F2F4F7; color:var(--tinta)}
.panel-cuerpo{overflow-y:auto; padding:20px 20px 34px; -webkit-overflow-scrolling:touch}

.panel h2{margin:0 26px 3px 0; font-size:19px; line-height:1.25; font-weight:700}
.panel .sub{color:var(--tinta-suave); font-size:13px; margin:0 0 15px}

.fichas{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px}
.ficha{
  font-size:11px; font-weight:650; letter-spacing:.2px;
  border-radius:999px; padding:4px 10px; border:1px solid transparent; white-space:nowrap;
}
.ficha.e-ok{background:var(--ok-fondo); color:var(--ok); border-color:#C7E9D8}
.ficha.e-alerta{background:var(--alerta-fondo); color:var(--alerta); border-color:#F0DCA8}
.ficha.e-roto{background:var(--roto-fondo); color:var(--roto); border-color:#F6CFD0}
.ficha.e-sin-medir{background:var(--sinmedir-fondo); color:#6B7684; border-color:#E1E5EA}
.ficha.quien{background:#F2F4F7; color:var(--tinta-suave); border-color:var(--borde)}

.panel h3{
  font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--tinta-tenue); margin:19px 0 7px;
}
.panel ul{margin:0; padding-left:17px}
.panel li{margin:0 0 5px; font-size:13.5px}

.metrica{
  border:1px solid var(--borde); border-radius:var(--radio);
  padding:11px 13px; background:#FAFBFC;
}
.metrica .valor{font-size:20px; font-weight:700; letter-spacing:-.2px; font-variant-numeric:tabular-nums}
.metrica .pie{font-size:11.5px; color:var(--tinta-tenue); margin-top:4px}
.metrica .pie code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; background:#F2F4F7; border-radius:4px; padding:1px 5px;
}
.vacio{color:var(--tinta-tenue); font-size:13px; font-style:italic}

/* recursos dentro del panel */
.recursos-lista{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.recursos-lista li{
  display:flex; align-items:flex-start; gap:10px; margin:0;
  border:1px solid var(--borde); border-radius:10px; padding:9px 11px; background:#FAFBFC;
}
.recursos-lista .rec-aro{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--borde); background:#fff;
}
.recursos-lista .rec-aro svg{width:16px; height:16px}
.recursos-lista .rec-txt{min-width:0}
.recursos-lista .rec-nombre{font-size:13.5px; font-weight:650; display:flex; align-items:center; gap:6px}
.recursos-lista .rec-punto{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto; display:inline-block;
}
.recursos-lista .rec-pie{font-size:12px; color:var(--tinta-suave); margin-top:2px}

.notas{
  font-size:13px; color:var(--tinta-suave); white-space:pre-wrap;
  border-left:3px solid var(--borde); padding-left:11px; margin:0;
}
.comando{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; line-height:1.5; color:#2B3440;
  background:#F7F8FA; border:1px solid var(--borde); border-radius:8px;
  padding:9px 11px; overflow-x:auto; white-space:pre; margin:0;
}
.entrar{
  display:block; width:100%; margin-top:17px;
  font:inherit; font-size:13.5px; font-weight:650; color:#fff;
  background:var(--violeta); border:0; border-radius:9px; padding:10px 13px; cursor:pointer;
}
.entrar:hover{background:#6A49F2}

.tabla-flechas{width:100%; border-collapse:collapse; font-size:12.5px}
.tabla-flechas td{padding:5px 0; border-bottom:1px solid var(--borde); vertical-align:top}
.tabla-flechas td:first-child{color:var(--tinta-tenue); padding-right:9px; white-space:nowrap}
.tabla-flechas tr:last-child td{border-bottom:0}

/* ── movil ──────────────────────────────────────────────────────── */
@media (max-width:860px){
  :root{--barra-alto:96px; --panel-ancho:100%}
  #barra{flex-wrap:wrap; padding:7px 10px; gap:7px; align-content:center}
  .migas{order:1; flex:1 1 100%}
  .buscador{order:2; flex:1 1 45%; margin-left:0; min-width:0}
  .controles{order:3; flex:1 1 45%; justify-content:flex-end; gap:6px}
  .interruptor .rotulo{display:none}
  .interruptor{padding:6px 9px}
  .ayuda{display:none}
  .leyenda{
    position:absolute; left:8px; right:8px; top:auto; bottom:8px;
    max-width:none; display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center;
    padding:7px 10px; font-size:11px;
  }
  .leyenda-titulo{margin:0; padding:0; border:0!important}
  .leyenda-lista{display:flex; gap:10px}
  .leyenda-lista li{gap:5px}
  .zoom-controles{display:none}
  .panel{
    top:auto; height:76vh; width:100%; border-left:0; border-top:1px solid var(--borde);
    border-radius:14px 14px 0 0; animation:entra-abajo .18s ease-out;
  }
  @keyframes entra-abajo{from{transform:translateY(24px); opacity:.4}to{transform:none; opacity:1}}
}

@media print{
  #barra,.leyenda,.ayuda,.zoom-controles,.panel{display:none}
}