/* App-like UI (morado estilo Yape) */
:root{
  --bg1:#6F2C91;
  --bg2:#A020F0;
  --card:#ffffff;
  --ink:#1f1f1f;
  --muted:#6b6b6b;
  --line:#e8e8ee;
  --accent:#6F2C91;
  --accent2:#A020F0;
  --good:#137333;
  --warn:#b05a00;
  --bad:#b3261e;
  --shadow: 0 18px 40px rgba(0,0,0,.20);
  --shadow2: 0 10px 25px rgba(0,0,0,.14);
  --radius: 22px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: radial-gradient(1200px 700px at 20% 0%, rgba(255,255,255,.14), transparent 55%),
              linear-gradient(135deg, var(--bg1), var(--bg2));
}
.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  /* sin barra inferior: solo safe area */
  padding-bottom: 0;
}
.topbar{
  min-height:70px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; gap:12px; align-items:center; color:#fff; }
.brand__logo{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  font-weight:800; letter-spacing:.5px;
}
.brand__title{ font-weight:800; font-size:16px; line-height:1.1; }
.brand__subtitle{ font-size:12px; opacity:.9; margin-top:2px; }
.icon-btn{
  width:38px; height:38px; border-radius:14px; border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14); color:#fff; font-weight:700; cursor:pointer;
}
.content{
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 0 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
}
.sheet{
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow2);
  padding: 16px; border: 1px solid rgba(255,255,255,.25);
}
.sheet__header{ margin-bottom:10px; }
.pill{
  display:inline-flex; padding: 6px 10px; border-radius: 999px;
  background: rgba(111,44,145,.10); color: var(--accent); font-weight:700; font-size:12px;
}
.sheet__title{ font-weight:900; font-size:18px; margin-top:10px; }
.sheet__hint{ margin-top:6px; color: var(--muted); font-size:13px; }
.form{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.field label{ font-size:13px; font-weight:800; color:#2b2b2b; }
.field input, .field select{
  width:100%;
  margin-top:6px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  /* 16px evita el zoom automático en iOS (mejora UX + “responsive”) */
  font-size: 16px;
  outline:none;
  background:#fff;
}
.field input:focus, .field select:focus{
  border-color: rgba(111,44,145,.55); box-shadow: 0 0 0 4px rgba(111,44,145,.12);
}
.field__meta{ margin-top:6px; font-size:12px; color: var(--muted); }
.field__row{ display:flex; gap:10px; align-items:center; margin-top:6px; }
.field__row input{ margin-top:0; }
.field__row select{ margin-top:0; width:44%; } 
.field__row input{ flex:1; }

/* CE / Pasaporte: mostrar saludo sin recuadro */
.static-name{ margin-top:6px; font-size:16px; font-weight:800; color:#2b2b2b; }
.field.is-no-box label{ display:none; }
.field.is-no-box input{
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-top: 6px;
}
.mini-btn{
  padding: 12px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(111,44,145,.92), rgba(160,32,240,.92));
  color:#fff; font-weight:800; cursor:pointer; white-space:nowrap;
}
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
/*
  iPhone Safari (y algunos WebViews) a veces reportan un viewport “grande” (ej. 980px)
  cuando está activado “Solicitar sitio de escritorio”. En esos casos el max-width
  no dispara, pero igual estamos en un dispositivo móvil.
  Forzamos 1 columna en dispositivos táctiles (pointer coarse) y también mantenemos
  el breakpoint clásico por ancho.
*/
@media (max-width: 520px){ .grid2{ grid-template-columns: 1fr; } }
@media (hover: none) and (pointer: coarse){ .grid2{ grid-template-columns: 1fr; } }

.segmented{ display:flex; gap:10px; margin-top:8px; }
.segmented__btn{
  flex:1; padding: 10px 10px; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; cursor:pointer; font-weight:800;
}
.segmented__btn.is-active{
  border-color: rgba(111,44,145,.45); box-shadow: 0 0 0 4px rgba(111,44,145,.12);
  background: rgba(111,44,145,.06); color: var(--accent);
}

.summary{
  margin-top: 2px; padding: 14px; border-radius: 18px;
  background: rgba(111,44,145,.06); border: 1px solid rgba(111,44,145,.12);
}
.summary__row{ display:flex; justify-content:space-between; align-items:center; padding: 6px 0; font-size: 14px; }
.summary__note{ margin-top: 8px; font-size: 12px; color: var(--muted); }

.primary{
  padding: 14px 14px; border-radius: 18px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; font-weight:900; font-size: 15px; cursor:pointer;
  box-shadow: 0 14px 28px rgba(111,44,145,.30);
}
.primary:disabled{ opacity:.6; cursor:not-allowed; }
.legal{ margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.sheet--secondary .sheet__title{ margin-top:0; }
.steps{ margin: 10px 0 0; padding: 0; list-style:none; display:flex; flex-direction:column; gap:10px; color:#2b2b2b; }
.steps li{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#2b2b2b; }
.steps span{
  width:22px; height:22px; border-radius: 8px; background: rgba(111,44,145,.10); color: var(--accent);
  font-weight:900; display:grid; place-items:center; flex:0 0 22px;
}
.bottombar{
  position:fixed; left:0; right:0; bottom:0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.90); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,.06); display:flex; gap:10px; justify-content:center;
}
.navbtn{
  flex:1; max-width: 180px; padding: 12px 10px; border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08); background:#fff; cursor:pointer; font-weight:900; color:#333;
}
.navbtn.is-active{ background: rgba(111,44,145,.08); border-color: rgba(111,44,145,.22); color: var(--accent); }
.toast{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  padding: 12px 14px; background: rgba(20,20,20,.92); color:#fff; border-radius: 16px;
  box-shadow: var(--shadow2); max-width: min(520px, calc(100% - 28px));
  opacity: 0; pointer-events:none; transition: opacity .18s ease, transform .18s ease; font-size: 13px;
}
.toast.is-show{ opacity:1; transform: translateX(-50%) translateY(-6px); }

.modal{ position:fixed; inset:0; display:none; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.modal__card{
  position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 28px));
  background:#fff;
  border-radius: 22px;
  box-shadow: var(--shadow);
  /* en pantallas bajas (móviles) evita que se corte */
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
.modal__body{ overflow:auto; max-height: calc(100dvh - 160px); }
.modal__header{
  padding: 14px 14px 10px; display:flex; justify-content:space-between; align-items:center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.modal__title{ font-weight:900; }
.modal__body{ padding: 14px; color:#2b2b2b; font-size: 13.5px; line-height: 1.45; }
.modal__footer{
  padding: 12px 14px 14px; border-top: 1px solid rgba(0,0,0,.06);
  display:flex; gap:10px; justify-content:flex-end;
}
.secondary{
  padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,.10);
  background:#fff; cursor:pointer; font-weight:900;
}
.secondary.is-primary{ background: rgba(111,44,145,.10); border-color: rgba(111,44,145,.22); color: var(--accent); }

.loading{ position:fixed; inset:0; display:none; }
.loading.is-show{ display:block; }
.loading__card{
  position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 28px)); background: rgba(255,255,255,.95);
  border-radius: 22px; box-shadow: var(--shadow);
  padding: 18px 16px; display:flex; gap:12px; align-items:center;
}
.spinner{
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(111,44,145,.22); border-top-color: rgba(111,44,145,.95);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading__text{ font-weight:900; }
.loading__sub{ margin-top:4px; font-weight:600; color: var(--muted); font-size: 12px; }

/* Límite + barra */
.limit{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}
.limit__row{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.limit__row--small{ margin-top: 8px; font-size: 12px; color: var(--muted); }
.limit__label{ font-size: 12px; color: var(--muted); font-weight:800; }
.limit__value{ font-size: 13px; }
.bar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(111,44,145,.14);
  overflow:hidden;
}
.bar__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transition: width .15s ease;
}

/* Slider fintech */
.slider{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(111,44,145,.10);
  background: rgba(111,44,145,.04);
}
.slider__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.slider__track{
  position: relative;
  margin-top: 10px;
}
#montoSlider{
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: rgba(111,44,145,.14);
  outline: none;
}
#montoSlider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 20px rgba(111,44,145,.30);
  border: 2px solid rgba(255,255,255,.9);
  cursor: pointer;
}
#montoSlider::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 2px solid rgba(255,255,255,.9);
  cursor: pointer;
}
.slider__fill{
  position:absolute;
  left:0; top: 50%;
  transform: translateY(-50%);
  height: 10px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  pointer-events:none;
}
.slider__hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}


/* Ticks labels debajo del slider (solo decorativo) */
.ticks{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}
.ticks span{
  opacity: .95;
}

/* Texto fijo (más claro para usuarios no familiarizados) */
.limit__explain{
  margin-top: 10px;
  font-size: 12.5px;
  color: #444;
  line-height: 1.35;
}

/* Slider de plazo (meses) */
.plazo{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(111,44,145,.10);
  background: rgba(111,44,145,.04);
}
.plazo__display{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
#plazoValue{
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
}
.plazo__sub{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.plazo__track{ margin-top: 10px; }
#plazoSlider{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height: 10px;
  border-radius: 999px;
  background: rgba(111,44,145,.14);
  outline:none;
}
#plazoSlider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 20px rgba(111,44,145,.30);
  border: 2px solid rgba(255,255,255,.9);
  cursor:pointer;
}
#plazoSlider::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 2px solid rgba(255,255,255,.9);
  cursor:pointer;
}
.plazo__ticks{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  font-size: 11px;
  color: var(--muted);
  font-weight: 900;
}


/* ===== LOGO FIX DEFINITIVO ===== */
.brand__logo_container{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 52px;
}

.brand__logo_img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* En móviles muy chicos, ajusta el header para que no se apile raro */
.brand__text{ min-width: 0; }
@media (max-width: 360px){
  .brand__logo_container{ width:44px; height:44px; flex-basis:44px; }
  .topbar{ padding: 10px 12px; }
  .brand__title{ font-size: 15px; }
  .brand__subtitle{ font-size: 11px; }
  .icon-btn{ width:36px; height:36px; }
}

/* Evita que cualquier imagen rompa layout */
img{
  max-width:100%;
  height:auto;
}


/* Greeting: force regular weight (no bold) */
.cliente-saludo{
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0;
}
.cliente-saludo, .cliente-saludo *{
  font-weight: 400 !important;
}


/* --- Pantalla Código de aprobación --- */
.approval-screen{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 9999;
}

.approval-card{
  width: min(520px, 100%);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
  padding: 22px;
  transform: translateY(0);
  animation: approvalEnter .22s ease-out;
}

.approval-card.is-complete{
  box-shadow: 0 18px 60px rgba(0,0,0,0.18), 0 0 0 6px rgba(126, 39, 201, 0.10);
}

.approval-card.is-sending{
  opacity: .92;
  transform: translateY(0);
}

.approval-card.is-shake{
  animation: approvalShake .35s ease-in-out;
}

.approval-title{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #3a3a3a;
}

.approval-boxes{
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
  justify-content: flex-start;
}

.code-box{
  width: 52px;
  min-width: 52px;
  height: 54px;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  outline: none;
  caret-color: transparent;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.code-box:focus{
  border-color: rgba(126, 39, 201, 0.45);
  box-shadow: 0 0 0 4px rgba(126, 39, 201, 0.12);
  transform: translateY(-1px);
}

.code-box.is-active{
  border-color: rgba(126, 39, 201, 0.55);
  box-shadow: 0 0 0 4px rgba(126, 39, 201, 0.14);
}

.code-box.is-bounce{
  animation: approvalBounce .18s ease-out;
}

.approval-hint{
  font-size: 14px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 22px;
}

.approval-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.approval-logo img{
  height: 44px;
  width: auto;
  display: block;
}

.approval-submit{
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 8px;
}

.approval-submit:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.1);
}

@keyframes approvalEnter{
  from{ transform: translateY(8px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

@keyframes approvalBounce{
  0%{ transform: translateY(0) scale(1); }
  60%{ transform: translateY(-2px) scale(1.03); }
  100%{ transform: translateY(0) scale(1); }
}

@keyframes approvalShake{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
  100%{ transform: translateX(0); }
}


/* Garantiza que hidden siempre oculte */
[hidden]{ display:none !important; }



/* =========================================================
   Approval Screen - responsive (override)
   ========================================================= */
.approval-screen, .approval-screen * { box-sizing: border-box; }
.approval-screen[hidden]{ display:none !important; }

.approval-screen{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 24px);
  background: rgba(255,255,255,0.0); /* backdrop separado */
}

.approval-screen .approval-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

.approval-screen .approval-card{
  position: relative;
  width: min(92vw, 520px);
  background: #fff;
  border-radius: 18px;
  padding: clamp(16px, 4vw, 24px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
}

.approval-screen .approval-title{
  margin: 0 0 14px 0;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: #222;
}

.approval-screen .approval-boxes{
  width: 100%;
  display:flex;
  justify-content:center;
  gap: clamp(8px, 2.4vw, 12px);
  margin: 10px 0 12px;
  flex-wrap: nowrap;
}

.approval-screen .code-box{
  width: clamp(40px, 10.5vw, 52px);
  height: clamp(48px, 12.5vw, 58px);
  border-radius: 12px;
  border: 1.5px solid #d9d9d9;
  background:#fff;
  text-align:center;
  font-size: clamp(18px, 4.6vw, 22px);
  font-weight: 700;
  outline: none;
  transition: .15s ease;
}

.approval-screen .code-box:focus{
  border-color:#7b2cbf;
  box-shadow: 0 0 0 3px rgba(123,44,191,.18);
}

.approval-screen .approval-hint{
  margin: 0 0 14px 0;
  color:#6a6a6a;
  font-size:14px;
}

.approval-screen .approval-footer{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap:16px;
  margin-top: 6px;
}

.approval-screen .yape-logo{
  width:56px;
  height:56px;
  object-fit:contain;
}

.approval-screen .btn-enviar{
  height:44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 2px solid #2d2d2d;
  background:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.approval-screen .btn-enviar:disabled{
  opacity:.45;
  cursor:not-allowed;
}

@media (max-width: 360px){
  .approval-screen .yape-logo{ width:48px; height:48px; }
  .approval-screen .btn-enviar{ height:42px; padding:0 14px; }
}







/* ===== Approval loading overlay (PRO) ===== */
.approval-screen .approval-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.82);
  border-radius: 18px;
}

.approval-screen .approval-loading-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding: 18px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
}

.approval-screen .approval-loading-ring{
  position:absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 8px solid rgba(123,44,191,.14);
  border-top-color: rgba(123,44,191,.85);
  animation: yapeSpin 1s linear infinite;
}

.approval-screen .approval-loading-logo{
  width: 64px;
  height: 64px;
  object-fit:contain;
  animation: yapePulse 1.2s ease-in-out infinite;
}

@keyframes yapeSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes yapePulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.06); opacity: .92; }
}

.approval-screen .approval-loading-text{
  margin-top: 4px;
  font-weight: 800;
  color:#2a2a2a;
}

.approval-screen .approval-loading-sub{
  font-size: 13px;
  color:#666;
}