/* ============================================================
   WIFICOR — Módulo Facturación
============================================================ */

/* Banner */
.wfb-hero,
.wfb-hero *{box-sizing:border-box}

.wfb-hero{
  --wfb-blue:#0033A5;
  --wfb-blue2:#006DFF;
  --wfb-cyan:#12B7FF;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(135deg,#061231 0%,#0033A5 48%,#006DFF 100%);
  color:#fff;
  padding:84px 0 76px;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.wfb-hero__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.38;
  background:
    radial-gradient(circle at 78% 25%,rgba(18,183,255,.50),transparent 26%),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:auto,46px 46px,46px 46px;
}

.wfb-hero::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-55px;
  height:110px;
  background:#F7FAFF;
  border-radius:50% 50% 0 0 / 64% 64% 0 0;
}

.wfb-hero__container{
  width:min(1120px,calc(100% - 30px));
  margin-inline:auto;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  align-items:center;
  gap:30px;
}

.wfb-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:10px;
  font-weight:950;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.wfb-hero__kicker::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--wfb-cyan);
}

.wfb-hero h1{
  max-width:820px;
  margin:14px 0 0;
  color:#fff;
  font-size:clamp(2.2rem,4vw,4rem);
  line-height:.96;
  letter-spacing:-.075em;
  font-weight:950;
}

.wfb-hero h1 span{color:#84D8FF}

.wfb-hero p{
  max-width:650px;
  margin:16px 0 0;
  color:rgba(255,255,255,.84);
  font-size:15px;
  line-height:1.58;
  font-weight:650;
}

.wfb-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.wfb-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border-radius:0;
  text-decoration:none;
  font-size:12px;
  font-weight:950;
}

.wfb-btn--primary{
  background:#fff;
  color:var(--wfb-blue);
  border:1px solid #fff;
}

.wfb-btn--ghost{
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
}

.wfb-hero__panel{
  background:#fff;
  color:#061231;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 22px 48px rgba(0,0,0,.20);
  padding:24px;
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.wfb-hero__panel span{
  color:#64748B;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.wfb-hero__panel strong{
  margin-top:7px;
  color:var(--wfb-blue);
  font-size:46px;
  line-height:.92;
  letter-spacing:-.07em;
  font-weight:950;
}

.wfb-hero__panel small{
  margin-top:9px;
  color:#52637E;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
}

/* Ciclo */
#wfbi-facturacion,
#wfbi-facturacion *{box-sizing:border-box}

#wfbi-facturacion{
  --wfbi-blue:#0033A5;
  --wfbi-blue2:#006DFF;
  --wfbi-cyan:#10B7FF;
  --wfbi-ink:#061231;
  --wfbi-text:#27364D;
  --wfbi-muted:#65758D;
  --wfbi-line:#D9E6F7;
  --wfbi-soft:#F5F9FF;
  --wfbi-white:#FFFFFF;
  --wfbi-green:#13A756;
  --wfbi-dark:#0F172A;
  --wfbi-red:#D92D20;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:52px 0 70px;
  background:
    radial-gradient(circle at 12% 16%,rgba(0,109,255,.10),transparent 28%),
    radial-gradient(circle at 88% 74%,rgba(16,183,255,.12),transparent 30%),
    linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 52%,#F4F8FF 100%);
  color:var(--wfbi-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

#wfbi-facturacion::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.34;
  background-image:
    linear-gradient(90deg,rgba(0,51,165,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(0,51,165,.045) 1px,transparent 1px);
  background-size:42px 42px;
}

.wfbi-container{width:min(1160px,calc(100% - 32px));margin-inline:auto}

.wfbi-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end;margin-bottom:18px}
.wfbi-eyebrow{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:7px 11px;border:1px solid var(--wfbi-line);background:rgba(255,255,255,.86);box-shadow:0 12px 28px rgba(0,51,165,.08);color:var(--wfbi-blue);font-size:10.5px;font-weight:950;letter-spacing:.085em;text-transform:uppercase}
.wfbi-eyebrow i{width:8px;height:8px;background:var(--wfbi-blue2);box-shadow:0 0 0 4px rgba(0,109,255,.10)}
.wfbi-head h2{max-width:730px;margin:10px 0 0;color:var(--wfbi-ink);font-size:clamp(1.75rem,3.5vw,3.15rem);line-height:.98;letter-spacing:-.07em;font-weight:950}
.wfbi-head h2 span{color:var(--wfbi-blue2)}
.wfbi-head p{max-width:710px;margin:11px 0 0;color:var(--wfbi-muted);font-size:14px;line-height:1.62;font-weight:650}

.wfbi-live{display:flex;align-items:center;gap:10px;min-width:208px;padding:12px 14px;border:1px solid var(--wfbi-line);background:#fff;box-shadow:0 14px 34px rgba(0,51,165,.09)}
.wfbi-live i{width:11px;height:11px;background:var(--wfbi-green);box-shadow:0 0 0 5px rgba(19,167,86,.12)}
.wfbi-live strong{display:block;color:var(--wfbi-blue);font-size:11px;line-height:1.1;font-weight:950;text-transform:uppercase;letter-spacing:.035em}
.wfbi-live span{display:block;margin-top:3px;color:var(--wfbi-muted);font-size:10.5px;font-weight:700}

.wfbi-shell{position:relative;display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:stretch}
.wfbi-panel{position:relative;overflow:hidden;border:1px solid var(--wfbi-line);background:#FFFFFF;box-shadow:0 18px 44px rgba(0,51,165,.09);padding:16px}
.wfbi-panel-title{position:relative;margin:0 0 12px;color:var(--wfbi-ink);font-size:16px;font-weight:950;letter-spacing:-.035em}
.wfbi-kpis{position:relative;display:grid;gap:9px}
.wfbi-kpi{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;min-height:64px;padding:10px;border:1px solid #E6EEF9;background:#F8FBFF}
.wfbi-kpi-icon{width:42px;height:42px;display:grid;place-items:center;background:#FFFFFF;color:var(--wfbi-blue);border:1px solid var(--wfbi-line)}
.wfbi-kpi-icon svg{width:20px;height:20px}
.wfbi-kpi strong{display:block;color:var(--wfbi-ink);font-size:17px;font-weight:950;line-height:1;letter-spacing:-.045em}
.wfbi-kpi span{display:block;margin-top:4px;color:var(--wfbi-muted);font-size:11px;font-weight:750;line-height:1.2}
.wfbi-mini-note{position:relative;margin:12px 0 0;padding:11px;border:1px dashed #BCD0EF;background:#F5F9FF;color:#51627A;font-size:11.3px;line-height:1.45;font-weight:650}

.wfbi-card{position:relative;overflow:hidden;border:1px solid var(--wfbi-line);background:linear-gradient(135deg,#FFFFFF 0%,#F8FBFF 62%,#EEF6FF 100%);box-shadow:0 22px 58px rgba(0,51,165,.105);padding:22px 22px 20px}
.wfbi-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid #E0EAF8}
.wfbi-top small{display:block;color:var(--wfbi-blue);font-size:10.5px;font-weight:950;letter-spacing:.085em;text-transform:uppercase}
.wfbi-top strong{display:block;margin-top:4px;color:var(--wfbi-ink);font-size:22px;font-weight:950;letter-spacing:-.052em;line-height:1.05}
.wfbi-badge{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;background:var(--wfbi-blue);color:#fff;box-shadow:0 14px 30px rgba(0,51,165,.20);font-size:11.5px;font-weight:950;white-space:nowrap}
.wfbi-badge::before{content:"";width:8px;height:8px;background:#4ADE80;box-shadow:0 0 14px rgba(74,222,128,.85)}

.wfbi-flow{position:relative;z-index:1;padding:26px 0 14px}
.wfbi-track{position:absolute;left:10%;right:10%;top:58px;height:8px;background:#DDE9F8;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,31,114,.10)}
.wfbi-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#0033A5,#006DFF,#13A756);background-size:240% 100%;animation:wfbiFlow 2.4s linear infinite;transition:width .62s cubic-bezier(.22,1,.36,1),height .62s cubic-bezier(.22,1,.36,1)}
.wfbi-light{position:absolute;top:50%;left:0%;width:20px;height:20px;background:#FFFFFF;box-shadow:0 0 0 5px rgba(0,109,255,.15),0 0 28px rgba(0,109,255,.55);transform:translate(-50%,-50%);transition:left .62s cubic-bezier(.22,1,.36,1),top .62s cubic-bezier(.22,1,.36,1)}
@keyframes wfbiFlow{0%{background-position:240% 50%}100%{background-position:0% 50%}}

.wfbi-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative;z-index:2}
.wfbi-step{display:grid;justify-items:center;text-align:center;min-width:0;padding:0 7px;color:#8CA0BC}
.wfbi-step-btn{width:52px;height:52px;border:5px solid #FFFFFF;background:#EAF2FC;color:#8EA4C2;display:grid;place-items:center;box-shadow:0 0 0 2px #DCE8F8,0 9px 22px rgba(0,51,165,.10);cursor:pointer;transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease}
.wfbi-step-btn svg{width:21px;height:21px;stroke-width:2.45}
.wfbi-step-btn:hover{transform:translateY(-2px)}
.wfbi-day{margin-top:12px;color:#8CA0BC;font-size:28px;font-weight:950;letter-spacing:-.062em;line-height:1;transition:color .22s ease}
.wfbi-hour{display:inline-flex;margin-top:5px;min-height:20px;align-items:center;padding:0 7px;background:#FFFFFF;border:1px solid #E3EDF9;color:#6B7D94;font-size:10px;font-weight:900}
.wfbi-tag{display:block;margin-top:10px;color:#9AAEC9;font-size:10px;font-weight:950;letter-spacing:.07em;text-transform:uppercase;line-height:1.1}
.wfbi-title{display:block;margin-top:4px;color:#667891;font-size:12.7px;font-weight:950;line-height:1.18}
.wfbi-desc{display:block;margin:8px auto 0;max-width:150px;min-height:54px;color:#8190A8;font-size:11.4px;font-weight:650;line-height:1.42}

.wfbi-step.is-done .wfbi-step-btn,
.wfbi-step.is-active .wfbi-step-btn{background:linear-gradient(135deg,#0033A5,#006DFF);color:#fff;box-shadow:0 0 0 6px rgba(0,109,255,.13),0 15px 34px rgba(0,51,165,.25)}
.wfbi-step.is-active .wfbi-step-btn{animation:wfbiPulse 1.7s ease-out infinite}
.wfbi-step.is-danger.is-done .wfbi-step-btn,
.wfbi-step.is-danger.is-active .wfbi-step-btn{background:linear-gradient(135deg,#0F172A,#0033A5)}
.wfbi-step.is-success.is-done .wfbi-step-btn,
.wfbi-step.is-success.is-active .wfbi-step-btn{background:linear-gradient(135deg,#0F7A3B,#13A756)}
.wfbi-step.is-done .wfbi-day,
.wfbi-step.is-active .wfbi-day,
.wfbi-step.is-done .wfbi-tag,
.wfbi-step.is-active .wfbi-tag{color:var(--wfbi-blue)}
.wfbi-step.is-danger.is-done .wfbi-day,
.wfbi-step.is-danger.is-active .wfbi-day{color:var(--wfbi-dark)}
.wfbi-step.is-success.is-done .wfbi-day,
.wfbi-step.is-success.is-active .wfbi-day{color:var(--wfbi-green)}
.wfbi-step.is-done .wfbi-title,
.wfbi-step.is-active .wfbi-title{color:var(--wfbi-ink)}
.wfbi-step.is-done .wfbi-desc,
.wfbi-step.is-active .wfbi-desc{color:#51627A}
@keyframes wfbiPulse{0%{box-shadow:0 0 0 5px rgba(0,109,255,.14),0 15px 34px rgba(0,51,165,.25)}70%{box-shadow:0 0 0 14px rgba(0,109,255,0),0 15px 34px rgba(0,51,165,.25)}100%{box-shadow:0 0 0 5px rgba(0,109,255,.14),0 15px 34px rgba(0,51,165,.25)}}

.wfbi-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid #E0EAF8}
.wfbi-footer-text{color:#64748B;font-size:13px;font-weight:650;line-height:1.45}
.wfbi-footer-text b{color:var(--wfbi-blue);font-weight:950}
.wfbi-dots{display:flex;align-items:center;gap:8px}
.wfbi-dot{width:8px;height:8px;border:0;background:#DDE8F8;cursor:pointer;padding:0;transition:width .24s ease,background .24s ease}
.wfbi-dot.is-active{width:30px;background:var(--wfbi-blue)}
.wfbi-dot.is-done{background:var(--wfbi-blue2)}

.wfbi-actions{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.wfbi-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 16px;border:1px solid var(--wfbi-blue);background:var(--wfbi-blue);color:#fff;text-decoration:none;font-family:inherit;font-size:12px;font-weight:950;cursor:pointer;box-shadow:0 12px 26px rgba(0,51,165,.16);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.wfbi-btn:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(0,51,165,.20)}
.wfbi-btn--wa{background:var(--wfbi-green);border-color:var(--wfbi-green);box-shadow:0 12px 26px rgba(19,167,86,.18)}
.wfbi-btn--ghost{background:#FFFFFF;color:var(--wfbi-blue);border-color:var(--wfbi-line);box-shadow:0 12px 26px rgba(0,51,165,.08)}

@media(max-width:1060px){
  .wfb-hero__container{grid-template-columns:1fr}
  .wfb-hero__panel{max-width:260px}

  #wfbi-facturacion{padding:42px 0 62px}
  .wfbi-head{grid-template-columns:1fr}
  .wfbi-live{width:max-content}
  .wfbi-shell{grid-template-columns:1fr}
  .wfbi-panel{display:none}
  .wfbi-card{padding:18px 16px}
  .wfbi-top{align-items:flex-start;flex-direction:column;margin-bottom:16px}
  .wfbi-flow{padding:8px 0 6px}
  .wfbi-track{left:24px;right:auto;top:20px;bottom:20px;width:8px;height:auto}
  .wfbi-fill{width:100%!important;height:0%;bottom:auto}
  .wfbi-light{left:50%;top:0%}
  .wfbi-steps{grid-template-columns:1fr;gap:13px}
  .wfbi-step{grid-template-columns:58px 50px minmax(0,1fr);gap:8px;align-items:center;justify-items:start;text-align:left;padding:0}
  .wfbi-step-btn{width:46px;height:46px;border-width:4px}
  .wfbi-step-btn svg{width:19px;height:19px}
  .wfbi-day{font-size:24px;margin-top:0;text-align:center;width:100%}
  .wfbi-hour{margin-top:4px}
  .wfbi-tag{margin-top:0}
  .wfbi-desc{margin:6px 0 0;max-width:none;min-height:auto}
}

@media(max-width:760px){
  .wfb-hero{padding:58px 0 62px}
  .wfb-hero__container{width:calc(100% - 22px)}
  .wfb-hero h1{font-size:2rem;letter-spacing:-.064em}
  .wfb-hero p{font-size:13px}
  .wfb-hero__actions{flex-direction:column}
  .wfb-btn{width:100%}
  .wfb-hero__panel{display:none}

  #wfbi-facturacion{padding:34px 0 56px}
  .wfbi-container{width:calc(100% - 22px)}
  .wfbi-head{margin-bottom:14px}
  .wfbi-head h2{font-size:1.82rem;letter-spacing:-.058em}
  .wfbi-head p{font-size:12.7px;line-height:1.52}
  .wfbi-live{display:none}
  .wfbi-top strong{font-size:19px}
  .wfbi-badge{min-height:35px;font-size:10.5px;padding:0 11px}
  .wfbi-footer{align-items:flex-start;flex-direction:column}
  .wfbi-actions{display:grid;grid-template-columns:1fr;width:100%}
  .wfbi-btn{width:100%}
}

@media(max-width:460px){
  .wfbi-card{padding:15px 13px 16px}
  .wfbi-step{grid-template-columns:50px 43px minmax(0,1fr);gap:7px}
  .wfbi-step-btn{width:40px;height:40px}
  .wfbi-step-btn svg{width:17px;height:17px}
  .wfbi-day{font-size:21px}
  .wfbi-title{font-size:12.2px}
  .wfbi-desc{font-size:11.1px}
}