/* Flujo Reporte IA — frontend
   Reporte -> Ruteo con IA -> Mantención / Inocuidad / Cumplimiento
   Fondo transparente. Tarjetas #1D2632, líneas y títulos #9AE48D. */

.fdrp-canvas{
  --fdrp-card:#1D2632;
  --fdrp-accent:#9AE48D;
  --fdrp-body:#dfe7e4;
  --fdrp-white:#fff;
  --fdrp-spark-dark:#22303c;
}
/* Modo claro: solo cambia lo que queda sobre el fondo de la página */
.fdrp-canvas.fdrp-claro{
  --fdrp-accent-outside:#3f9e4d;
  --fdrp-spark-dark:#c6d2c9;
}
.fdrp-canvas{--fdrp-accent-outside:var(--fdrp-accent);}
.fdrp-canvas.fdrp-claro{--fdrp-accent-outside:#3f9e4d;}

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

/* ---- Tarjeta de reporte ---- */
.fdrp-card{background:var(--fdrp-card);border-radius:18px;position:absolute;z-index:2;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;}
.fdrp-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.35),0 0 20px rgba(154,228,141,0.15);}
#fdrp-reporte{left:40px;top:48px;width:290px;padding:26px 26px 28px;}
#fdrp-reporte .fdrp-label{color:var(--fdrp-accent);font-size:17px;font-weight:700;letter-spacing:.3px;}
#fdrp-reporte .fdrp-quote{color:var(--fdrp-white);font-size:25px;font-weight:700;line-height:1.25;margin-top:10px;}
#fdrp-reporte .fdrp-photo{display:block;width:100%;height:160px;object-fit:cover;border-radius:10px;margin-top:18px;}
#fdrp-reporte .fdrp-temp{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--fdrp-white);font-size:20px;font-weight:500;}
#fdrp-reporte .fdrp-temp svg{width:24px;height:24px;stroke:var(--fdrp-body);fill:none;flex-shrink:0;}
#fdrp-reporte .fdrp-temp .fdrp-icon-img{width:24px;height:24px;object-fit:contain;flex-shrink:0;}

/* ---- Nodo circular Ruteo con IA ---- */
#fdrp-circle{
  position:absolute;left:466px;top:142px;width:100px;height:100px;border-radius:50%;
  background:#fff;border:3px solid var(--fdrp-accent-outside);z-index:3;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(154,228,141,0.10);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);cursor:pointer;
  animation:fdrpPulse 2.8s ease-in-out 1s infinite;
}
#fdrp-circle:hover{transform:scale(1.06);}
@keyframes fdrpPulse{0%,100%{box-shadow:0 0 0 6px rgba(154,228,141,0.10);}50%{box-shadow:0 0 0 10px rgba(154,228,141,0.18),0 0 22px rgba(154,228,141,0.35);}}
#fdrp-circle svg{width:56px;height:56px;fill:var(--fdrp-accent-outside);}
#fdrp-circle .fdrp-icon-img{width:64px;height:64px;object-fit:contain;border-radius:50%;}
#fdrp-ruteo-label{
  position:absolute;left:584px;top:164px;width:140px;z-index:3;
  color:var(--fdrp-accent-outside);font-size:23px;font-weight:700;line-height:1.2;
}

/* Destellos decorativos */
.fdrp-sparkles{position:absolute;left:452px;top:88px;width:66px;height:50px;z-index:3;pointer-events:none;}
.fdrp-sparkles .fdrp-sp1{fill:var(--fdrp-accent-outside);animation:fdrpTwinkle 2.2s ease-in-out infinite;}
.fdrp-sparkles .fdrp-sp2{fill:var(--fdrp-spark-dark);animation:fdrpTwinkle 2.2s ease-in-out 1.1s infinite;}
@keyframes fdrpTwinkle{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.82);}}
.fdrp-sparkles path,.fdrp-sparkles circle{transform-origin:center;transform-box:fill-box;}

/* ---- Tarjetas inferiores ---- */
.fdrp-mini{width:210px;padding:24px 22px 26px;top:452px;}
#fdrp-mantencion{left:40px;}
#fdrp-inocuidad{left:265px;}
#fdrp-cumplimiento{left:490px;}
.fdrp-mini .fdrp-mini-icon svg{width:28px;height:28px;stroke:var(--fdrp-accent);fill:none;stroke-width:2;}
.fdrp-mini .fdrp-mini-icon svg.filled{fill:var(--fdrp-accent);stroke:none;}
.fdrp-mini .fdrp-mini-icon .fdrp-icon-img{width:28px;height:28px;object-fit:contain;}
.fdrp-mini h3{color:var(--fdrp-accent);font-size:21px;font-weight:700;margin-top:14px;}
.fdrp-mini p{color:var(--fdrp-body);font-size:17px;line-height:1.5;margin-top:10px;font-weight:400;}

/* ---- Líneas punteadas ---- */
.fdrp-lines{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;}
.fdrp-lines path{stroke:var(--fdrp-accent-outside);stroke-width:2;fill:none;stroke-dasharray:5 7;stroke-linecap:round;
  animation:fdrpFlow 1.2s linear infinite;}
@keyframes fdrpFlow{to{stroke-dashoffset:-12;}}

/* ---- Entrada escalonada ---- */
.fdrp-anim{opacity:0;transform:translateY(12px);animation:fdrpRise .6s ease forwards;}
@keyframes fdrpRise{to{opacity:1;transform:translateY(0);}}
#fdrp-reporte{animation-delay:.05s;}
#fdrp-circle{animation:fdrpRise .6s ease .3s forwards, fdrpPulse 2.8s ease-in-out 1.2s infinite;}
#fdrp-ruteo-label{animation-delay:.4s;}
#fdrp-mantencion{animation-delay:.55s;}
#fdrp-inocuidad{animation-delay:.7s;}
#fdrp-cumplimiento{animation-delay:.85s;}

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