/* ════════════════════════════════════════════════════════════════════════════
   BCKING APP - Estilos compartidos
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0a0a0a; --bg-card:#181818; --bg-card-2:#222222;
  --border:#2f2f2f; --border-light:#3f3f3f;
  --gold:#fbb519; --gold-bright:#ffd24a; --gold-deep:#e09c10; --gold-dim:#8a6608;
  --text:#ffffff; --text-dim:#b5b5b5; --text-faint:#777777;
  --green:#4ade80; --red:#f87171; --yellow:#fbbf24; --blue:#60a5fa;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif}
body{background:#0a0a0a;color:var(--text);min-height:100vh;display:flex;flex-direction:column}

/* Container responsive — tipo mobile pero centrado en desktop */
.app-container{
  width:100%; max-width:480px; min-height:100vh; margin:0 auto;
  background:var(--bg); position:relative;
  display:flex; flex-direction:column;
}

/* Header común */
.app-header{
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); background:#0a0a0a;
  position:sticky; top:0; z-index:50;
}
.app-logo{display:flex; align-items:center; gap:6px}
.app-logo img{height:38px; width:auto; display:block}

.icon-btn{
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; transition:all .2s; font-size:16px;
}
.icon-btn:hover{border-color:var(--gold-dim); color:var(--gold-bright)}

.back-btn{
  display:flex; align-items:center; gap:6px; color:var(--text-dim);
  font-size:13px; padding:8px; margin:-8px; cursor:pointer; background:none;
  border:none; font-family:inherit;
}
.back-btn:hover{color:var(--gold-bright)}

/* Tipografía */
h1{font-size:26px; font-weight:700; line-height:1.2; letter-spacing:-.5px; margin-bottom:6px}
h2{font-size:20px; font-weight:600; letter-spacing:-.3px}
p{color:var(--text-dim); line-height:1.5; font-size:14px}

/* Botones */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 22px; border-radius:12px; font-size:15px; font-weight:600;
  cursor:pointer; border:none; width:100%; transition:all .2s;
  font-family:inherit; text-decoration:none;
}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-bright));
  color:#000; box-shadow:0 4px 16px rgba(251,181,25,.3);
}
.btn-primary:not(:disabled):hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(251,181,25,.4)}
.btn-secondary{background:var(--bg-card); color:var(--text); border:1px solid var(--border-light)}
.btn-secondary:hover{border-color:var(--gold-dim); background:var(--bg-card-2)}
.btn-ghost{background:transparent; color:var(--text-dim); border:1px solid transparent}
.btn-ghost:hover{color:var(--gold-bright)}

/* Botón grande de WhatsApp (acción primaria de pedir código) */
.btn-whatsapp-big{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 22px; border-radius:12px; font-size:15px; font-weight:700;
  cursor:pointer; border:none; width:100%; transition:all .2s;
  font-family:inherit; text-decoration:none;
  background:linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(37,211,102,.3);
}
.btn-whatsapp-big:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(37,211,102,.4);
}
.btn-whatsapp-big:disabled{opacity:.6; cursor:not-allowed}

/* Forms */
.input-group{margin-bottom:14px}
.input-label{
  display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.8px; color:var(--text-dim); margin-bottom:8px;
}
.input{
  width:100%; padding:14px 16px; border-radius:10px; background:var(--bg-card);
  border:1px solid var(--border); color:var(--text); font-size:15px;
  font-family:inherit; transition:all .2s;
}
.input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(251,181,25,.1)}
.input::placeholder{color:var(--text-faint)}
.input.error{border-color:var(--red)}

select.input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b5b5b5' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}

/* Cards */
.content{padding:24px 22px; flex:1; display:flex; flex-direction:column; gap:16px}
.card{background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:18px}
.card-gold{
  background:linear-gradient(135deg, rgba(251,181,25,.06), transparent);
  border:1px solid rgba(251,181,25,.2);
}
.card-red{
  background:rgba(248,113,113,.05); border:1px solid rgba(248,113,113,.2);
}

/* Mensajes inline */
.msg{padding:12px 14px; border-radius:10px; font-size:13px; margin-bottom:12px}
.msg-error{background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:#fca5a5}
.msg-success{background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.3); color:#86efac}
.msg-info{background:rgba(96,165,250,.08); border:1px solid rgba(96,165,250,.3); color:#93c5fd}

/* Loading spinner */
.spinner{
  width:18px; height:18px; border:2px solid rgba(255,255,255,.2);
  border-top-color:#000; border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Loader fullscreen */
.loader{
  position:fixed; inset:0; background:rgba(10,10,10,.8); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:1000;
}
.loader.show{display:flex}
.loader .spin{
  width:48px; height:48px; border:3px solid rgba(251,181,25,.2);
  border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite;
}

/* Toast notifications */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--bg-card); border:1px solid var(--border-light);
  padding:12px 18px; border-radius:10px; font-size:14px; z-index:9999;
  box-shadow:0 8px 32px rgba(0,0,0,.6); animation:toastIn .3s ease;
  max-width:90%;
}
.toast.success{border-color:var(--green); color:#86efac}
.toast.error{border-color:var(--red); color:#fca5a5}
@keyframes toastIn{from{opacity:0; transform:translate(-50%, 20px)} to{opacity:1; transform:translate(-50%, 0)}}

/* Landing styles */
.landing-hero{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:40px 28px; gap:28px;
  background:radial-gradient(ellipse at center, rgba(251,181,25,.08) 0%, transparent 70%);
}
.landing-logo-big{
  display:flex; align-items:center; gap:10px;
  filter:drop-shadow(0 6px 20px rgba(251,181,25,.4));
}
.landing-logo-big img{height:96px; width:auto}
.landing-title{font-size:34px; font-weight:700; line-height:1.1; letter-spacing:-1px}
.landing-title .accent{
  background:linear-gradient(135deg, var(--gold), var(--gold-bright));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.landing-sub{font-size:15px; color:var(--text-dim); max-width:280px; line-height:1.5}
.landing-trust{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.trust-item{
  display:flex; align-items:center; gap:5px; font-size:11px;
  color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px;
}
.trust-item .ch{color:var(--gold); font-weight:700}
.landing-actions{width:100%; display:flex; flex-direction:column; gap:10px; padding:0 28px 28px}

/* Login / código */
.simple-content{padding:32px 26px; flex:1; display:flex; flex-direction:column}
.code-inputs{display:flex; gap:8px; justify-content:center; margin:24px 0}
.code-inputs input{
  width:46px; height:54px; text-align:center; font-size:22px; font-weight:600;
  background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
  color:var(--gold-bright); font-family:inherit;
}
.code-inputs input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(251,181,25,.1)}

/* Mi cuenta */
.account-greeting{padding:8px 0 16px}
.account-greeting .hi{font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.8px}
.account-greeting .name{
  font-size:24px; font-weight:700; margin-top:2px;
  background:linear-gradient(135deg, var(--text), var(--gold-bright));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Action grid (4 botones grandes en Mi cuenta) */
.action-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.action-card{
  background:linear-gradient(135deg, var(--bg-card), var(--bg-card-2));
  border:1px solid var(--border); border-radius:14px; padding:20px 14px;
  cursor:pointer; transition:all .2s; text-align:center; font-family:inherit;
  color:var(--text); display:flex; flex-direction:column; align-items:center;
  gap:10px; min-height:130px; justify-content:center;
}
.action-card:hover{border-color:var(--gold-dim); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3)}
.action-card .ac-ico{
  font-size:28px; width:52px; height:52px; border-radius:13px;
  display:grid; place-items:center;
  background:rgba(251,181,25,.1); border:1px solid rgba(251,181,25,.2);
}
.action-card.green .ac-ico{background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.2)}
.action-card.red .ac-ico{background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.2)}
.action-card.blue .ac-ico{background:rgba(96,165,250,.08); border-color:rgba(96,165,250,.2)}
.action-card.gold .ac-ico{background:rgba(251,181,25,.14); border-color:rgba(251,181,25,.32)}
.action-card.teal .ac-ico{background:rgba(45,212,191,.1); border-color:rgba(45,212,191,.25)}
.action-card .ac-txt{font-size:13px; font-weight:600; letter-spacing:.3px}

/* Upload */
.upload-area{
  border:2px dashed var(--border-light); border-radius:12px; padding:28px 16px;
  text-align:center; cursor:pointer; transition:all .2s; background:var(--bg-card);
  position:relative;
}
.upload-area:hover{border-color:var(--gold); background:rgba(251,181,25,.03)}
.upload-area input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.upload-area .up-ico{font-size:32px; margin-bottom:6px}
.upload-area .up-txt{font-size:14px; font-weight:600; color:var(--text)}
.upload-area .up-sub{font-size:12px; color:var(--text-faint); margin-top:4px}
.upload-area.has-file{border-color:var(--green); background:rgba(74,222,128,.05)}
.upload-area.has-file .up-ico::before{content:'✓ '; color:var(--green)}

/* Éxito screen */
.success-screen{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:40px 28px; gap:18px;
}
.success-icon{
  width:80px; height:80px; border-radius:50%; background:rgba(74,222,128,.12);
  border:2px solid var(--green); display:grid; place-items:center;
  font-size:36px; color:var(--green); animation:pop .4s ease;
}
@keyframes pop{0%{transform:scale(0)} 60%{transform:scale(1.1)} 100%{transform:scale(1)}}
.success-title{font-size:24px; font-weight:700}
.success-msg{color:var(--text-dim); max-width:280px; font-size:14px; line-height:1.5}

/* Support list */
.support-list{display:flex; flex-direction:column; gap:10px}
.support-item{
  display:flex; align-items:center; gap:14px; padding:15px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  cursor:pointer; transition:all .2s; text-decoration:none; color:var(--text);
}
.support-item:hover{border-color:#22c55e; background:#0d1f1c}
.support-item .ico{
  font-size:18px; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(34,197,94,.08); color:#22c55e;
}
.support-item .txt{flex:1; font-size:14px; font-weight:500}
.support-item .arrow{color:var(--text-faint)}

/* Página debug (cuando se muestra el código generado al operario) */
.dev-code{
  background:rgba(251,181,25,.05); border:1px solid var(--gold-dim);
  padding:14px; border-radius:10px; text-align:center; margin-top:12px;
}
.dev-code .code-label{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px}
.dev-code .code-value{font-family:monospace; font-size:24px; font-weight:700; color:var(--gold-bright); letter-spacing:4px}

/* Util */
.text-center{text-align:center}
.mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.mb-8{margin-bottom:8px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}
.hidden{display:none !important}

/* ════════════════════════════════════════════════════════════════════════
   PWA - Banner instalar app + Modal iOS
   ════════════════════════════════════════════════════════════════════════ */

.install-banner{
  background:linear-gradient(135deg, rgba(251,181,25,.15), rgba(251,181,25,.05));
  border:1px solid rgba(251,181,25,.4);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  animation:slideDown .4s ease;
}
@keyframes slideDown{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:translateY(0)}
}
.install-banner .ib-ico{font-size:28px; flex-shrink:0}
.install-banner .ib-txt{flex:1; line-height:1.3}
.install-banner .ib-txt strong{display:block; font-size:14px; color:var(--gold-bright); margin-bottom:2px}
.install-banner .ib-txt span{font-size:12px; color:var(--text-dim)}
.install-banner .ib-btn{
  background:linear-gradient(135deg, var(--gold), var(--gold-bright));
  color:#000;
  border:none;
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.install-banner .ib-btn:hover{transform:translateY(-1px)}
.install-banner .ib-close{
  position:absolute;
  top:6px; right:8px;
  background:none; border:none;
  color:var(--text-faint); cursor:pointer;
  font-size:14px; padding:4px;
}
.install-banner .ib-close:hover{color:var(--text)}

/* Modal iOS */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.85); backdrop-filter:blur(6px);
  z-index:1000; display:flex;
  align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.hidden{display:none}
.modal-box-ios{
  background:var(--bg-card);
  border:1px solid var(--border-light);
  border-radius:16px;
  padding:24px;
  max-width:380px; width:100%;
  animation:modalIn .25s ease;
}
@keyframes modalIn{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}
.modal-box-ios h2{font-size:20px; margin-bottom:6px}
.ios-steps{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.ios-steps li{
  position:relative;
  padding-left:36px;
  font-size:14px; line-height:1.5;
  counter-increment:step;
}
.ios-steps{counter-reset:step}
.ios-steps li::before{
  content:counter(step);
  position:absolute; left:0; top:0;
  width:26px; height:26px;
  background:rgba(251,181,25,.15);
  border:1px solid rgba(251,181,25,.4);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:12px; font-weight:700;
  color:var(--gold-bright);
}
.ios-share{
  display:inline-block;
  width:22px; height:22px;
  background:var(--bg-card-2);
  border:1px solid var(--border);
  border-radius:5px;
  text-align:center; line-height:22px;
  font-size:12px;
  margin:0 2px;
  color:var(--blue);
}

/* ════════════════════════════════════════════════════════════════════════
   MODALES CUSTOM (confirm, prompt, alert) - reemplazan los del navegador
   ════════════════════════════════════════════════════════════════════════ */

.bk-modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:10000;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .2s ease;
}
.bk-modal-overlay.show{
  display:flex;
  opacity:1;
}

.bk-modal-box{
  background:linear-gradient(135deg, var(--bg-card), var(--bg-card-2));
  border:1px solid var(--border-light);
  border-radius:18px;
  padding:28px 24px;
  max-width:380px;
  width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,.7), 0 0 32px rgba(251,181,25,.08);
  animation:bkModalIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bkModalIn{
  from{opacity:0; transform:translateY(20px) scale(.95)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

.bk-modal-icon{
  font-size:42px;
  text-align:center;
  margin-bottom:8px;
  filter:drop-shadow(0 4px 12px rgba(251,181,25,.3));
}

.bk-modal-title{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  text-align:center;
  margin-bottom:8px;
  letter-spacing:-.3px;
}

.bk-modal-msg{
  color:var(--text-dim);
  font-size:14px;
  line-height:1.5;
  text-align:center;
  margin-bottom:18px;
}

.bk-modal-input{
  width:100%;
  padding:13px 16px;
  border-radius:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  margin-bottom:18px;
  resize:vertical;
}
.bk-modal-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(251,181,25,.1);
}

.bk-modal-actions{
  display:flex;
  gap:10px;
}

.bk-modal-btn{
  flex:1;
  padding:13px 18px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:all .15s;
}
.bk-modal-btn:hover{transform:translateY(-1px)}

.bk-modal-btn-cancel{
  background:var(--bg-card);
  color:var(--text-dim);
  border:1px solid var(--border-light);
}
.bk-modal-btn-cancel:hover{
  background:var(--bg-card-2);
  color:var(--text);
}

.bk-modal-btn-confirm{
  background:linear-gradient(135deg, var(--gold), var(--gold-bright));
  color:#000;
  box-shadow:0 4px 12px rgba(251,181,25,.25);
}
.bk-modal-btn-confirm:hover{
  box-shadow:0 6px 16px rgba(251,181,25,.4);
}

.bk-modal-btn-danger{
  background:linear-gradient(135deg, #dc2626, #f87171);
  color:#fff;
  box-shadow:0 4px 12px rgba(248,113,113,.3);
}
.bk-modal-btn-danger:hover{
  box-shadow:0 6px 16px rgba(248,113,113,.5);
}

/* Selector WhatsApp por uso */
.wsp-pick-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  cursor:pointer;
  transition:all .15s;
}
.wsp-pick-item:hover{border-color:var(--gold-dim)}
.wsp-pick-item.selected{
  border-color:var(--gold);
  background:rgba(251,181,25,.06);
}
.wsp-pick-item input[type="radio"]{
  width:18px; height:18px;
  accent-color:var(--gold);
  flex-shrink:0;
}
.wsp-pick-info{flex:1}
.wsp-pick-name{font-size:14px; font-weight:600; color:var(--text)}
.wsp-pick-num{font-size:11px; color:var(--text-faint); font-family:monospace; margin-top:2px}

/* ════════════════════════════════════════════════════════════════════════
   Tarjeta de estado del cliente (en pantalla Mi cuenta)
   ════════════════════════════════════════════════════════════════════════ */
.estado-card{
  margin-bottom:14px;
  animation:slideDownStatus .3s ease;
}
@keyframes slideDownStatus{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}
.estado-card-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid;
}
.estado-pendiente{
  background:linear-gradient(135deg, rgba(251,191,36,.1), rgba(251,191,36,.02));
  border-color:rgba(251,191,36,.35);
}
.estado-ok{
  background:linear-gradient(135deg, rgba(74,222,128,.1), rgba(74,222,128,.02));
  border-color:rgba(74,222,128,.35);
}
.estado-err{
  background:linear-gradient(135deg, rgba(248,113,113,.08), rgba(248,113,113,.02));
  border-color:rgba(248,113,113,.3);
}
.estado-ico{
  font-size:28px;
  flex-shrink:0;
}
.estado-body{flex:1; min-width:0}
.estado-titulo{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  line-height:1.35;
}
.estado-pendiente .estado-titulo{color:#fbbf24}
.estado-ok .estado-titulo{color:#4ade80}
.estado-err .estado-titulo{color:#fca5a5}
.estado-sub{
  font-size:11px;
  color:var(--text-dim);
  margin-top:2px;
}