/* ═══════════════════════════════════════════════════════════════════
   iFlexo · Registro de NC (index.html) — capa visual del asistente
   Clases funcionales conservadas tal cual: step / active, step-dot / done /
   active, sel, on, open, show, has-value, active-item, f-err, date-hint.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Barra de progreso (el JS escribe su ancho) ─────────────────────── */
.progress-wrap{top:64px;height:3px;background:transparent;z-index:101;}
.progress-fill{background:var(--orange);border-radius:0 3px 3px 0;}

/* ── Riel de pasos ──────────────────────────────────────────────────── */
.wz-rail{position:fixed;z-index:98;}
.wz-rail-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.005em;}
.wz-rail-sub{font-size:12.5px;color:var(--text3);margin-top:2px;}
.step-dots{position:static;display:flex;padding:0;counter-reset:paso;}
.step-dot{counter-increment:paso;}
#dot-1::after{content:'Sede';}
#dot-2::after{content:'Datos de la orden';}
#dot-3::after{content:'Responsable';}
#dot-4::after{content:'Causa';}
#dot-5::after{content:'Material afectado';}
#dot-6::after{content:'Acción y compromiso';}
#dot-7::after{content:'Revisión y envío';}

@media(min-width:1080px){
  .wz-rail{top:112px;left:max(24px,calc(50% - 476px));width:228px;}
  .wz-rail-head{padding:0 12px 14px;margin-bottom:8px;border-bottom:1px solid var(--border);}
  .step-dots{flex-direction:column;gap:2px;}
  .step-dot{width:auto;height:auto;border-radius:10px;background:none;display:flex;align-items:center;gap:12px;
    padding:9px 12px;font-size:13.5px;font-weight:500;color:var(--text3);transition:background .2s,color .2s;}
  .step-dot::before{content:counter(paso);width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    border:1.5px solid var(--border2);background:#fff;font-size:12px;font-weight:700;color:var(--text3);transition:all .2s;}
  .step-dot.done{background:none;color:var(--text2);}
  .step-dot.done::before{content:'';border-color:var(--ink);background:var(--ink) var(--i-check-w) center/12px no-repeat;}
  .step-dot.active{width:auto;border-radius:10px;background:#fff;color:var(--text);font-weight:700;box-shadow:var(--shadow-xs),0 0 0 1px var(--border);}
  .step-dot.active::before{border-color:var(--orange);background:var(--orange);color:#fff;box-shadow:0 0 0 4px rgba(232,96,26,.14);}
  .main{padding:112px 24px 80px;}
  .form-container{max-width:952px;padding-left:288px;}
}
@media(max-width:1079px){
  .progress-wrap{display:none;}
  .wz-rail{top:64px;left:0;right:0;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);padding:10px 20px 12px;}
  .wz-rail-head{display:none;}
  .step-dots{gap:5px;}
  .step-dot{flex:1;width:auto;height:4px;border-radius:4px;background:var(--border);}
  .step-dot.done{background:var(--ink);}
  .step-dot.active{width:auto;height:4px;border-radius:4px;background:var(--orange);}
  .step-dot::after{display:none;}
  .main{padding:104px 20px 80px;}
}

/* ── Tarjeta del formulario ─────────────────────────────────────────── */
.form-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:40px 44px 36px;}

/* Encabezado de cada paso */
.eyebrow{display:inline-flex;font-size:12px;font-weight:700;letter-spacing:.01em;text-transform:none;color:var(--orange);
  background:var(--orangeL);padding:4px 10px;border-radius:999px;margin-bottom:14px;}
.eyebrow::before{display:none;}
.step-title{font-family:var(--font);font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--text);margin-bottom:6px;}
.step-desc{font-size:14.5px;color:var(--text2);line-height:1.6;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border);}

/* Etiquetas y campos */
.fg{margin-bottom:22px;}
label{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);margin-bottom:8px;}
label .req{color:var(--orange);font-weight:700;}
.date-field input[type=date]{font-family:var(--font);background:#fff;border:1px solid var(--border2);border-radius:10px;font-size:14.5px;font-weight:500;
  padding:11px 14px;box-shadow:var(--shadow-xs);}
.date-field input[type=date]:focus{border-color:var(--orange);box-shadow:var(--ring);}
.date-hint{font-size:12.5px;}
.date-hint.suggest{position:relative;padding-left:23px;color:var(--text2);margin-bottom:10px;}
.date-hint.suggest::before{content:'';position:absolute;left:0;top:3px;width:15px;height:15px;background:var(--text3);
  -webkit-mask:var(--i-calendar) center/contain no-repeat;mask:var(--i-calendar) center/contain no-repeat;}
.date-hint.ok{color:#067647;} .date-hint.warn{color:#b54708;} .date-hint.bad{color:#b42318;}
.f-err{font-size:12.5px;font-weight:500;color:#b42318;margin-top:6px;}

/* ── Paso 1: sede ───────────────────────────────────────────────────── */
.sede-opts{gap:14px;}
.sede-card{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:96px;background:#fff;border:1.5px solid var(--border);
  border-radius:16px;padding:20px 52px 20px 76px;box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s,transform .15s;}
.sede-card:hover{border-color:#c2c8d2;background:#fff;box-shadow:var(--shadow);}
.sede-card .opt-ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;background:var(--surface2);
  color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all .15s;}
.sede-card::after{content:'';position:absolute;right:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--border2);background:#fff;transition:all .15s;}
.sede-card .sn{font-family:var(--font);font-size:16px;font-weight:700;color:var(--text);margin-bottom:2px;}
.sede-card .ss2{font-size:13px;color:var(--text3);}
.sede-card.sel{border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(232,96,26,.10);}
.sede-card.sel .sn{color:var(--text);}
.sede-card.sel .opt-ico{background:var(--orangeL);color:var(--orange);}
.sede-card.sel::after{border-color:var(--orange);background:var(--orange) var(--i-check-w) center/11px no-repeat;}

/* ── Paso 2: consecutivo ────────────────────────────────────────────── */
.nc-display{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:26px;}
.nc-lbl{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text3);margin-bottom:2px;}
.nc-num{font-family:var(--font);color:var(--text);font-weight:700;letter-spacing:0;}
.nc-sede{background:#fff;color:var(--text);border:1px solid var(--border2);font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;padding:6px 14px;}

/* ── Paso 3: origen y responsable ───────────────────────────────────── */
.origen-opts{gap:12px;margin-bottom:6px;}
.origen-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:18px 12px 16px;box-shadow:var(--shadow-xs);transition:all .15s;}
.origen-card:hover{border-color:#c2c8d2;background:#fff;box-shadow:var(--shadow);}
.origen-card .oi{width:40px;height:40px;border-radius:12px;margin:0 auto 10px;background:var(--surface2);color:var(--text2);
  display:flex;align-items:center;justify-content:center;font-size:0;transition:all .15s;}
.origen-card .ot{font-size:13.5px;font-weight:600;color:var(--text);}
.origen-card.sel{border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(232,96,26,.10);}
.origen-card.sel .oi{background:var(--orangeL);color:var(--orange);}
.origen-card.sel .ot{color:var(--text);}

.toggle-row{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px;gap:16px;box-shadow:var(--shadow-xs);margin-bottom:22px;}
.toggle-row:hover{border-color:#c2c8d2;}
.t-title{font-size:14px;font-weight:600;color:var(--text);}
.t-sub{font-size:12.5px;color:var(--text2);margin-top:3px;line-height:1.5;}
.tswitch{width:40px;height:24px;background:#d0d5dd;}
.tswitch::after{top:3px;left:3px;width:18px;height:18px;box-shadow:0 1px 3px rgba(16,24,40,.2);}
.tswitch.on{background:var(--orange);}
.tswitch.on::after{transform:translateX(16px);}
.resp-item{grid-template-columns:1fr 36px;}
.btn-add-row{height:46px;padding:0 14px;border:1.5px dashed var(--border2);border-radius:12px;color:var(--text2);font-family:var(--font);font-size:13.5px;font-weight:600;}
.btn-add-row:hover{border-color:var(--orange);color:var(--orange);background:var(--orangeL);}

/* ── Paso 4: causas ─────────────────────────────────────────────────── */
.area-badge{background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-weight:600;padding:6px 12px;margin-bottom:18px;}
.causa-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.causa-chip{position:relative;background:#fff;border:1px solid var(--border2);border-radius:12px;padding:12px 14px 12px 42px;
  font-size:13px;line-height:1.45;color:var(--text);box-shadow:var(--shadow-xs);}
.causa-chip::before{content:'';position:absolute;left:14px;top:13px;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--border2);background:#fff;transition:all .15s;}
.causa-chip:hover{border-color:#c2c8d2;background:#fff;color:var(--text);}
.causa-chip.sel{border-color:var(--orange);background:#fff;color:var(--text);font-weight:600;box-shadow:0 0 0 3px rgba(232,96,26,.10);}
.causa-chip.sel::before{border-color:var(--orange);background:var(--orange) var(--i-check-w) center/10px no-repeat;}
.causa-empty{font-size:13.5px;color:var(--text2);background:var(--surface2);border:1px dashed var(--border2);border-radius:12px;padding:22px;}

/* ── Paso 5: materiales ─────────────────────────────────────────────── */
.mat-row{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow-xs);}
.mat-row:has(> .btn-rm) .mat-row-hdr{padding-right:38px;}
.mat-row-hdr{margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.mat-row-num{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text);}
.tipo-pills{background:var(--surface2);border:1px solid var(--border);padding:3px;border-radius:10px;gap:2px;}
.tipo-pill{border:none;background:transparent;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--text2);}
.tipo-pill:hover{color:var(--text);border:none;}
.tipo-pill.sel{background:#fff;color:var(--orange);box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--border);}
.mat-grid label,.mat-precio label{font-size:12.5px;color:var(--text2);}
.mat-precio{max-width:180px;}
.mat-footer{border-top:1px dashed var(--border2);padding-top:14px;}
.mat-footer-lbl{font-size:13px;color:var(--text2);font-weight:500;}
.mat-footer-val{font-family:var(--font);font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.btn-rm{top:16px;right:14px;width:30px;height:30px;border-radius:8px;color:var(--text3);}
.btn-rm:hover{background:var(--redL);color:var(--red);}
.total-card{background:var(--ink);border-radius:16px;padding:20px 24px;margin-top:16px;}
.total-lbl{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.7);}
.total-val{font-family:var(--font);font-size:28px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

/* ── Paso 6: avisos ─────────────────────────────────────────────────── */
.info-alert,.info-alert-money,.notif{position:relative;border-radius:14px;padding:14px 16px 14px 46px;font-size:13.5px;line-height:1.6;}
.info-alert::before,.info-alert-money::before,.notif::before{content:'';position:absolute;left:16px;top:15px;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat;}
.info-alert{background:#f5f8ff;border:1px solid #d6e2fb;color:#1d3a8a;}
.info-alert.al-warn{background:#fffaeb;border-color:#fedf89;color:#93370d;}
.info-alert.al-warn::before{-webkit-mask-image:var(--i-alert);mask-image:var(--i-alert);}
.info-alert.al-clock::before{-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock);}
.info-alert.al-org::before{-webkit-mask-image:var(--i-building);mask-image:var(--i-building);}
.info-alert-money{background:var(--surface2);border:1px solid var(--border);color:var(--text2);margin-top:26px;}
.info-alert-money::before{color:var(--text2);-webkit-mask-image:var(--i-coins);mask-image:var(--i-coins);}
.info-alert-money .big-money{font-family:var(--font);font-size:22px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;margin:2px 0 4px;}
.notif{background:#ecfdf3;border:1px solid #abefc6;color:#05603a;margin-bottom:22px;}
.notif::before{-webkit-mask-image:var(--i-mail);mask-image:var(--i-mail);}
.notif .ni{display:none;}
.notif .nt{color:#05603a;font-size:13.5px;}
.notif .nt strong{color:#05603a;}

/* ── Paso 7: revisión ───────────────────────────────────────────────── */
.rv-section{background:#fff;border:1px solid var(--border);border-radius:14px;padding:0;margin-bottom:14px;overflow:hidden;}
.rv-sec-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);background:var(--surface2);
  margin:0;padding:11px 18px;border-bottom:1px solid var(--border);}
.rv-row{margin:0;padding:11px 18px;border-top:1px solid #f0f1f4;gap:20px;}
.rv-sec-title + .rv-row{border-top:none;}
.rv-key{font-size:13px;color:var(--text2);}
.rv-val{font-size:13.5px;color:var(--text);font-weight:500;max-width:64%;}
.rv-val.hl{font-family:var(--font);font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
#rv-total{color:var(--orange);}

/* ── Botones de navegación ──────────────────────────────────────────── */
.btn-row{margin-top:34px;padding-top:24px;border-top:1px solid var(--border);gap:12px;}
.btn-primary{flex:0 1 auto;margin-left:auto;min-width:210px;height:46px;padding:0 22px;border-radius:11px;background:var(--orange);
  font-family:var(--font);font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;
  box-shadow:0 1px 2px rgba(16,24,40,.08),inset 0 -1px 0 rgba(0,0,0,.08);}
.btn-primary:hover{background:var(--orange2);transform:none;box-shadow:0 6px 16px -6px rgba(232,96,26,.55);}
.btn-primary:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-primary:disabled{opacity:1;background:#eef0f3;color:#98a2b3;box-shadow:none;}
.btn-back{height:46px;padding:0 18px;border:1px solid var(--border2);border-radius:11px;background:#fff;color:var(--text2);
  font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;box-shadow:var(--shadow-xs);}
.btn-back:hover{background:var(--surface2);color:var(--text);border-color:#c2c8d2;}

/* ── Pantalla de éxito ──────────────────────────────────────────────── */
.suc-wrap{padding:24px 0 8px;}
.suc-circle{width:76px;height:76px;background:#ecfdf3;border:none;color:#079455;font-size:34px;font-weight:700;margin:0 auto 22px;
  box-shadow:0 0 0 10px rgba(18,147,106,.06);}
.suc-title{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-bottom:18px;}
.suc-numbox{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface2);border:1px solid var(--border);
  border-radius:16px;padding:14px 32px 16px;margin-bottom:20px;}
.suc-numlbl{font-size:12px;font-weight:600;color:var(--text3);}
.suc-nc{font-family:var(--font);font-size:38px;font-weight:800;letter-spacing:.01em;color:var(--text);margin:0;font-variant-numeric:tabular-nums;}
.suc-msg{font-size:14.5px;color:var(--text2);max-width:440px;margin:0 auto 18px;}
.suc-pill{background:#fffaeb;border:1px solid #fedf89;color:#b54708;font-size:12.5px;font-weight:700;padding:7px 14px;margin-bottom:26px;}
.suc-pill .pulse{background:#f79009;}
.suc-next{text-align:left;max-width:440px;margin:0 auto 28px;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.suc-next-t{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);background:var(--surface2);padding:10px 16px;border-bottom:1px solid var(--border);}
.suc-next-i{display:flex;gap:12px;padding:12px 16px;font-size:13.5px;color:var(--text2);line-height:1.5;}
.suc-next-i + .suc-next-i{border-top:1px solid #f0f1f4;}
.suc-next-n{width:22px;height:22px;border-radius:50%;flex-shrink:0;background:#fff;border:1.5px solid var(--border2);font-size:11.5px;font-weight:700;color:var(--text2);
  display:flex;align-items:center;justify-content:center;}
.suc-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.suc-actions .btn-primary{margin:0 !important;}
.suc-link{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:11px;border:1px solid var(--border2);background:#fff;color:var(--text);
  font-size:14px;font-weight:600;text-decoration:none;box-shadow:var(--shadow-xs);}
.suc-link:hover{background:var(--surface2);}

/* ── Móvil ──────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .form-card{padding:26px 18px 0;border-radius:18px;}
  .step-title{font-size:22px;}
  .step-desc{margin-bottom:22px;padding-bottom:20px;}
  .fg.two{grid-template-columns:1fr;}
  .sede-opts{grid-template-columns:1fr;}
  .origen-opts{grid-template-columns:repeat(3,1fr);gap:8px;}
  .origen-card{padding:14px 6px 12px;}
  .causa-grid{grid-template-columns:1fr;}
  .mat-grid.plancha,.mat-grid.till{grid-template-columns:1fr 1fr;}
  .mat-row{padding:16px;}
  .main{padding:96px 12px 40px;}
  .wz-rail{top:58px;padding:10px 16px 12px;}
  /* Barra de acciones fija abajo mientras se completa el paso */
  .btn-row{position:sticky;bottom:0;z-index:5;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    margin:28px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-radius:0 0 18px 18px;}
  .btn-primary{min-width:0;flex:1;}
  .suc-wrap{padding-bottom:26px;}
  .suc-actions{flex-direction:column;}
  .suc-actions .btn-primary,.suc-link{width:100%;justify-content:center;max-width:none !important;}
  .rv-row{flex-direction:column;gap:2px;}
  .rv-val{text-align:left;max-width:none;}
}