/* Flujo Diagrama Interactivo — frontend
   Diseño original preservado (Montserrat, paleta verde), sin fondo. */

.fdrf-canvas{
  --fdrf-card-fill:rgba(255,255,255,0.03);
  --fdrf-card-border:#1E2934;
  --fdrf-divider:rgba(255,255,255,0.05);
  --fdrf-accent:#9AE48D;
  --fdrf-flow:#51BA5C;
  --fdrf-title:#9AE48D;
  --fdrf-body:#dfe7e4;
  --fdrf-body-soft:#c9d4cf;
  --fdrf-h1:#f3f7f4;
  --fdrf-strong:#fff;
  --fdrf-ruteo-fill:rgba(154,228,141,0.07);
  --fdrf-ruteo-text:#d7efb6;
}

/* Modo claro: misma estructura, colores adaptados a fondos claros */
.fdrf-canvas.fdrf-claro{
  --fdrf-card-fill:rgba(0,0,0,0.02);
  --fdrf-card-border:#d4ddd6;
  --fdrf-divider:rgba(0,0,0,0.06);
  --fdrf-accent:#3f9e4d;
  --fdrf-flow:#3f9e4d;
  --fdrf-title:#2e7a3a;
  --fdrf-body:#3a453e;
  --fdrf-body-soft:#5a675f;
  --fdrf-h1:#1c2b22;
  --fdrf-strong:#1c2b22;
  --fdrf-ruteo-fill:rgba(63,158,77,0.07);
  --fdrf-ruteo-text:#2e7a3a;
}

.fdrf-scaler{width:100%;max-width:1180px;margin:0 auto;}
.fdrf-fit{width:100%;overflow:hidden;}
.fdrf-canvas{
  position:relative;width:1180px;height:960px;
  background:transparent;
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  color:var(--fdrf-body);transform-origin:top left;
}
.fdrf-canvas *{box-sizing:border-box;margin:0;padding:0;}

/* ---- Punto del flujo + halo ---- */
.fdrf-header{position:absolute;left:40px;top:40px;display:flex;align-items:center;gap:22px;z-index:4;}
.fdrf-flow-dot{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.fdrf-flow-dot .fdrf-core{width:15px;height:15px;border-radius:50%;background:var(--fdrf-flow);z-index:3;box-shadow:0 0 12px 2px rgba(81,186,92,0.85);animation:fdrfCoreGlow 2.4s ease-in-out infinite;}
.fdrf-flow-dot .fdrf-ring{position:absolute;inset:0;margin:auto;width:27px;height:27px;border-radius:50%;border:1.5px solid rgba(81,186,92,0.6);animation:fdrfHalo 2.6s ease-out infinite;}
.fdrf-flow-dot .fdrf-ring:nth-of-type(2){animation-delay:.87s;}
.fdrf-flow-dot .fdrf-ring:nth-of-type(3){animation-delay:1.73s;}
@keyframes fdrfHalo{0%{transform:scale(.5);opacity:.85;}100%{transform:scale(2.5);opacity:0;}}
@keyframes fdrfCoreGlow{0%,100%{box-shadow:0 0 10px 1px rgba(81,186,92,0.7);}50%{box-shadow:0 0 18px 4px rgba(81,186,92,1);}}
.fdrf-header h1{font-size:40px;font-weight:700;color:var(--fdrf-h1);letter-spacing:.2px;line-height:1.2;}

/* ---- Tarjetas ---- */
.fdrf-card{position:absolute;z-index:2;background:var(--fdrf-card-fill);border:1px solid var(--fdrf-card-border);border-radius:16px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s,background .28s;cursor:pointer;}
.fdrf-card:hover{transform:translateY(-6px);border-color:var(--fdrf-accent);background:rgba(154,228,141,0.05);box-shadow:0 12px 34px rgba(0,0,0,0.25),0 0 22px rgba(154,228,141,0.22);}
.fdrf-card .fdrf-head{display:flex;align-items:center;gap:14px;padding:24px 28px 22px;border-bottom:1px solid var(--fdrf-divider);}
.fdrf-card .fdrf-head svg{width:30px;height:30px;stroke:var(--fdrf-accent);fill:none;transition:transform .28s;flex-shrink:0;}
.fdrf-card .fdrf-head svg.filled{fill:var(--fdrf-accent);stroke:none;}
.fdrf-card .fdrf-head .fdrf-icon-img{width:30px;height:30px;object-fit:contain;transition:transform .28s;flex-shrink:0;}
.fdrf-card:hover .fdrf-head svg,
.fdrf-card:hover .fdrf-head .fdrf-icon-img{transform:scale(1.12);}
.fdrf-card .fdrf-head h2{font-size:28px;font-weight:600;color:var(--fdrf-title);line-height:1.2;}
.fdrf-card .fdrf-body{padding:26px 28px 28px;font-size:25px;line-height:1.35;color:var(--fdrf-body);}
.fdrf-card .fdrf-body .fdrf-area{margin-top:16px;}
.fdrf-card .fdrf-body .fdrf-area b{color:var(--fdrf-strong);font-weight:600;}
.fdrf-card .fdrf-body .fdrf-area .fdrf-val{color:var(--fdrf-body-soft);}
#fdrf-reportar{left:40px;top:140px;width:500px;}
#fdrf-inocuidad{left:620px;top:140px;width:520px;}
#fdrf-cumplimiento{left:620px;top:494px;width:520px;}
#fdrf-reparar{left:620px;top:770px;width:520px;}

/* ---- Ruteo con IA ---- */
#fdrf-ruteo{
  position:absolute;left:110px;top:540px;width:380px;height:112px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--fdrf-ruteo-fill);border:1.6px solid var(--fdrf-accent);border-radius:20px;cursor:pointer;
  opacity:0;transform:translateY(14px);
  animation:fdrfRise .6s ease .2s forwards, fdrfRuteoGlow 2.8s ease-in-out .9s infinite;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
#fdrf-ruteo:hover{transform:scale(1.04);}
@keyframes fdrfRuteoGlow{0%,100%{box-shadow:0 0 10px rgba(154,228,141,0.14),inset 0 0 10px rgba(154,228,141,0.05);}50%{box-shadow:0 0 18px rgba(154,228,141,0.28),inset 0 0 12px rgba(154,228,141,0.09);}}
#fdrf-ruteo svg{width:32px;height:32px;fill:var(--fdrf-accent);flex-shrink:0;}
#fdrf-ruteo .fdrf-icon-img{width:32px;height:32px;object-fit:contain;flex-shrink:0;}
#fdrf-ruteo span{font-size:27px;font-weight:600;color:var(--fdrf-ruteo-text);}

/* ---- Conectores ---- */
.fdrf-lines{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;}
.fdrf-lines path{stroke:var(--fdrf-accent);stroke-width:2;fill:none;stroke-dasharray:7 9;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(154,228,141,0.45));animation:fdrfFlow 1.15s linear infinite;}
@keyframes fdrfFlow{to{stroke-dashoffset:-14;}}

/* ---- Entrada escalonada ---- */
.fdrf-anim{opacity:0;transform:translateY(14px);animation:fdrfRise .6s ease forwards;}
@keyframes fdrfRise{to{opacity:1;transform:translateY(0);}}
#fdrf-reportar{animation-delay:.05s;}
#fdrf-inocuidad{animation-delay:.35s;}
#fdrf-cumplimiento{animation-delay:.5s;}
#fdrf-reparar{animation-delay:.65s;}

@media (prefers-reduced-motion: reduce){
  .fdrf-canvas *{animation:none !important;}
  .fdrf-anim,#fdrf-ruteo{opacity:1;transform:none;}
}