/* Plano 3D de la ruta crítica (ruta-critica-3d.js). Tarjeta blanca con el plano tipo blueprint; la ficha y la leyenda
   van debajo del lienzo, nunca encima del dibujo. Mismos colores de la cadena de tramos de agua potable. */
.r3{background:#fff;border:1px solid #EAE1D8;border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(70,48,18,.04),0 12px 30px rgba(70,48,18,.06)}
.r3-cab{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid #F2EAE0}
.r3-tit{min-width:0;flex:1 1 auto}
.r3-tit small{display:block;font:600 9.5px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8A6416}
.r3-tit b{display:block;margin-top:2px;font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#1F1B16;overflow-wrap:anywhere}
.r3-vistas{flex:none}
.r3-vistas button{white-space:nowrap}
.r3-bot{display:flex;gap:6px;flex:none}
.r3-bot button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:36px;height:36px;padding:0 11px;border-radius:99px;border:1px solid #EAE1D8;background:#fff;font-family:inherit;font-size:12px;font-weight:600;line-height:1;color:#7A5813;cursor:pointer;transition:border-color .2s,background-color .2s,transform .35s cubic-bezier(.22,1,.36,1)}
.r3-bot button:hover{border-color:#C49A50;background:#FFFCF7}
.r3-bot button svg{width:15px;height:15px;flex:none;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.r3-bot .r3-prim{background:#825e21;border-color:#825e21;color:#fff}
.r3-bot .r3-prim:hover{background:#6f4f1a;border-color:#6f4f1a}
.r3-plegado [data-r3-plegar] svg{transform:rotate(180deg)}
/* Plegar sin cortes bruscos: la altura se recoge con la grilla (0fr) y el contenido se desvanece. */
.r3-cuerpo{display:grid;grid-template-rows:1fr;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.r3-cuerpo-in{min-height:0;overflow:hidden}
.r3-plegado .r3-cuerpo{grid-template-rows:0fr;opacity:0}
.r3-plegado .r3-cab{border-bottom-color:transparent}
.r3-plegado .r3-vistas,.r3-plegado [data-r3-armar],.r3-plegado [data-r3-encuadrar]{display:none}
.r3-sin-anim .r3-cuerpo{transition:none}
.r3-lienzo{position:relative;height:clamp(420px,62vh,560px);background-color:#fff;background-image:radial-gradient(circle,#efe6d9 1px,transparent 1.3px);background-size:18px 18px;background-position:9px 9px}
.r3-lienzo canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.r3-lienzo canvas.r3-mano{cursor:pointer}
.r3-lienzo canvas.r3-arrastra{cursor:grabbing}
.r3-vacio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;font-size:13px;line-height:1.5;color:#807667}
.r3-vacio[hidden]{display:none}
.r3-pista{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:calc(100% - 24px);padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.94);border:1px solid #EAE1D8;box-shadow:0 4px 14px rgba(80,56,22,.08);font-size:11.5px;font-weight:600;line-height:1.35;color:#4E4538;pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.r3-pista svg{width:15px;height:15px;flex:none;color:#7A5813}
.r3-p-dedo{display:none}
.r3-pista.r3-fuera{opacity:0;transform:translate(-50%,6px)}
.r3-pie{display:flex;flex-direction:column;gap:9px;padding:10px 14px 12px;border-top:1px solid #F2EAE0;background:#FFFDF9}
/* Ficha del tramo elegido */
.r3-ficha{min-height:22px}
.r3-f-vacia{margin:0;font-size:12px;line-height:1.45;color:#807667}
.r3-f-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r3-f-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#7A5813;color:#fff;font:700 11px "JetBrains Mono",ui-monospace,monospace}
.r3-f-ico{width:22px;height:22px;border-radius:99px;border:1.5px solid #4b3f31;background:#fff;flex:none}
.r3-f-calentador{border-radius:6px;border-color:#e0702e}
.r3-f-cab b{font-size:13px;letter-spacing:-.01em;color:#1F1B16}
.r3-f-nota{font-size:12px;color:#807667;min-width:0;flex:1 1 120px;line-height:1.35}
.r3-f-ir{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:99px;border:1px solid #EAE1D8;background:#fff;font-family:inherit;font-size:11.5px;font-weight:600;line-height:1;color:#7A5813;cursor:pointer;flex:none}
.r3-f-ir svg{width:13px;height:13px}
.r3-f-ir:hover{border-color:#C49A50}
.r3-f-x{width:28px;height:28px;border-radius:99px;border:1px solid #EAE1D8;background:#fff;color:#4E4538;font-family:inherit;font-size:16px;font-weight:500;line-height:1;cursor:pointer;flex:none}
.r3-f-datos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.r3-f-datos span{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:99px;background:#fff;border:1px solid #EAE1D8;font:600 12px "JetBrains Mono",ui-monospace,monospace;color:#1F1B16;font-variant-numeric:tabular-nums}
.r3-f-datos u{text-decoration:none;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8A6416}
.r3-f-datos .r3-f-p{background:#FBF2E9;border-color:#EBD9AE;color:#7A5813}
.r3-f-giro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:#807667}
.r3-ficha.r3-entra{animation:r3FichaIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes r3FichaIn{from{opacity:0;transform:translateY(4px)}}
/* Leyenda y cuenta de la descarga */
.r3-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:11px;color:#807667}
.r3-ly{display:inline-flex;align-items:center;gap:7px;line-height:1.3}
.r3-ly b{font:600 11px "JetBrains Mono",ui-monospace,monospace;color:#4E4538}
.r3-ly i{display:inline-block;flex:none}
.r3-ly-agua{width:14px;height:6px;border-radius:9px;background:radial-gradient(circle at 75% 50%,#1673c2 0 2.4px,transparent 2.8px),radial-gradient(circle at 30% 50%,rgba(98,176,232,.55) 0 2px,transparent 2.4px)}
.r3-ly-pres{width:44px;height:7px;border-radius:9px;background:linear-gradient(90deg,#9fdcd4,#f1d39b,#eab0a1);border:1px solid rgba(75,63,49,.45)}
.r3-ly-otra{width:18px;height:0;border-top:2px dashed #b6aad8}
.r3-ly-piezo{width:18px;height:2px;border-radius:2px;background:#b8862c}
.r3-ly-esc{font:600 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#807667;margin-left:auto}
.r3-ec{display:flex;flex-direction:column;gap:7px;width:100%}
.r3-ec-barra{display:flex;height:9px;border-radius:99px;overflow:hidden;background:#EAE1D8}
.r3-ec-barra i{display:block;height:100%;transition:flex-grow .5s cubic-bezier(.22,1,.36,1)}
.r3-c-alt{background:#9c8a72}.r3-c-pc{background:#2bb3a3}.r3-c-tr{background:#8a7cc4}.r3-c-fr{background:#d0573a}.r3-c-eq{background:#e0902e}
.r3-ec-txt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11.5px;color:#4E4538;line-height:1.35}
.r3-ec-txt span{display:inline-flex;align-items:center;gap:5px}
.r3-ec-txt span i{width:9px;height:9px;border-radius:3px;flex:none}
.r3-ec-txt b{font:700 12px "JetBrains Mono",ui-monospace,monospace;color:#1F1B16;font-variant-numeric:tabular-nums}
.r3-ec-tot b{color:#7A5813!important}
.r3-ec-op{color:#807667;font:600 12px "JetBrains Mono",ui-monospace,monospace}
.r3-ec-nota{font-size:11px;color:#807667;line-height:1.45}
/* La fila de la cadena que se está mirando en el plano */
.ap-tramo.ap-fila-plano{border-color:#B8862C!important;box-shadow:0 0 0 3px rgba(196,154,80,.22)}
tr.ap-fila-plano>td{background:#FFF6E3!important}
.ap-fila-destello{animation:r3Destello 1.1s cubic-bezier(.22,1,.36,1)}
@keyframes r3Destello{0%,30%{box-shadow:0 0 0 6px rgba(196,154,80,.35)}100%{box-shadow:0 0 0 3px rgba(196,154,80,.22)}}
@media (pointer:coarse){.r3-p-dedo{display:inline}.r3-p-raton{display:none}.r3-lienzo canvas{touch-action:pan-y}}
@media (max-width:640px){
  .r3{border-radius:18px}
  .r3-cab{flex-wrap:wrap;padding:10px 10px 10px 14px;gap:8px}
  .r3-tit{flex-basis:100%}
  .r3-plegado .r3-tit{flex-basis:auto}
  .r3-vistas{flex:1 1 auto}
  .r3-vistas button{flex:1 1 0;justify-content:center;padding:6px 8px}
  .r3-bot button span{display:none}
  .r3-lienzo{height:clamp(340px,58vh,470px)}
  .r3-pie{padding:10px 12px 12px}
  .r3-ly-esc{margin-left:0}
  .r3-lienzo canvas{touch-action:pan-y}
}
@media (prefers-reduced-motion:reduce){.r3-cuerpo{transition:none}.r3-ficha.r3-entra{animation:none}.r3-pista{transition:none}.ap-fila-destello{animation:none}}