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

/* ══════════════════════════════════════════════════════════════════════
   PALETA — panel genérico, neutro y legible
   El acento es azul y no dorado por una razón medible: el dorado sobre
   fondo blanco tiene contraste 1.79, y el mínimo legible es 4.5. Por eso
   en modo claro había texto que no se leía. El azul da 6.70.
   El azul tampoco choca con el verde y el rojo, que en el panel ya
   significan aprobado y rechazado.
   ══════════════════════════════════════════════════════════════════════ */

/* Modo CLARO — es el que arranca por defecto */
:root{
  --bg:#f6f7f9; --bg-card:#ffffff; --bg-card-2:#f0f1f4;
  --border:#e2e4e9; --border-light:#cfd2d9;

  /* El acento sigue llamándose --gold para no reescribir 106 usos.
     Es el color de acento del panel, ya no un dorado. */
  --gold:#1d4ed8; --gold-bright:#1e40af; --gold-deep:#1e3a8a; --gold-dim:#93b4f0;

  --text:#16181d; --text-dim:#5a5f6b; --text-faint:#878d99;
  --green:#15803d; --red:#dc2626; --yellow:#b45309; --blue:#1d4ed8;
}

/* Modo OSCURO — se activa con el botón del header */
html[data-tema="oscuro"]{
  --bg:#0f1115; --bg-card:#171a20; --bg-card-2:#1e222a;
  --border:#2a2f38; --border-light:#3a404b;
  --gold:#60a5fa; --gold-bright:#93c5fd; --gold-deep:#3b82f6; --gold-dim:#1e3a5f;
  --text:#f5f6f8; --text-dim:#a8aeba; --text-faint:#6f7683;
  --green:#4ade80; --red:#f87171; --yellow:#fbbf24; --blue:#60a5fa;
}

/* El modo claro es el :root de arriba. */
/* Transición suave al cambiar, sin animar cosas que se ven mal. */
html[data-tema] body, html[data-tema] .app-header, html[data-tema] .app-container{
  transition:background-color .2s ease, color .2s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv02","cv03","cv04","cv11"}
body{background:var(--bg);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:var(--bg);
  position:sticky; top:0; z-index:50;
  /* Con viewport-fit=cover la página se mete abajo del notch y la barra de
     estado. Sin esto, en iPhone el header queda tapado y el botón "Atrás"
     no se puede tocar. */
  padding-top:calc(18px + env(safe-area-inset-top));
}
/* Los laterales también, para iPhone en horizontal. */
body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.app-logo{display:flex; align-items:center; gap:6px}
/* 32px en vez de 38: con un logo apaisado, 38 de alto hacía que la barra
   superior creciera de más. Y el ancho se limita para que un logo muy
   ancho no empuje los otros botones. */
.app-logo img{height:32px; width:auto; max-width:150px; object-fit:contain; display:block}
.app-logo{min-height:36px}

.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.15; letter-spacing:-.03em; margin-bottom:6px}
h2{font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.25}
p{color:var(--text-dim); line-height:1.55; 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:transform .12s cubic-bezier(.4,0,.2,1), box-shadow .2s, background .2s, border-color .2s;
  font-family:inherit; text-decoration:none;
  letter-spacing:-.01em;
}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:not(:disabled):active{transform:scale(.97)}
.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-primary:not(:disabled):active{transform:scale(.97) translateY(0)}
.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:transform .12s cubic-bezier(.4,0,.2,1), box-shadow .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);
  letter-spacing:-.01em;
}
.btn-whatsapp-big:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(37,211,102,.4);
}
.btn-whatsapp-big:not(:disabled):active{transform:scale(.97)}
.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)}}

/* Skeleton loaders (para cargas de datos) */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-2) 50%, var(--bg-card) 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.8s infinite linear;
  border-radius: 8px;
  display: block;
}
.skeleton-text{height:12px; margin-bottom:8px}
.skeleton-text.short{width:40%}
.skeleton-text.medium{width:70%}
.skeleton-text.long{width:100%}
.skeleton-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  margin-bottom:12px;
}
.skeleton-avatar{width:40px; height:40px; border-radius:50%}
.skeleton-btn{height:44px; border-radius:12px}
.skeleton-title{height:20px; width:50%; margin-bottom:10px}

/* 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 */
/* El saludo y todo lo que cuelga de él (barrita de plataforma, tarjeta de
   datos, aviso de pedir usuario) tienen que llegar al mismo borde que las
   tarjetas de abajo. Sin esto quedaban más angostos. */
.account-greeting{padding:8px 0 16px; width:100%; display:flex; flex-direction:column; align-items:stretch}
.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}
/* Con cantidad impar de tarjetas, la última quedaba sola a la izquierda
   con un hueco al lado. Estas reglas la centran ocupando las dos columnas
   pero sin estirarse: queda del mismo ancho que las otras, en el medio. */
.action-grid > .action-card:last-child:nth-child(odd){
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 5px);
}
.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);
}

/* Variante especial cuando la carga incluye BONO */
.estado-bono{
  background:linear-gradient(135deg, rgba(251,181,25,.18), rgba(251,181,25,.03) 60%, rgba(74,222,128,.06));
  border-color:rgba(251,181,25,.55);
  box-shadow: 0 0 24px rgba(251,181,25,.15), inset 0 0 20px rgba(251,181,25,.05);
  animation: bonoGlow 2.4s ease-in-out infinite alternate, bonoEnter .6s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  overflow:hidden;
}
.estado-bono::before{
  content:'';
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background: radial-gradient(circle at 30% 30%, rgba(251,181,25,.12), transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(251,181,25,.08), transparent 40%);
  animation: bonoShimmer 6s linear infinite;
  pointer-events:none;
}
.estado-bono .estado-titulo{
  color:var(--gold);
  font-weight:700;
  font-size:14px;
  text-shadow: 0 0 10px rgba(251,181,25,.3);
}
.estado-bono .estado-ico{
  animation: bonoIcon 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px rgba(251,181,25,.6));
}
.estado-bono-tag{
  display:inline-block;
  margin-top:6px;
  padding:4px 10px;
  background: linear-gradient(135deg, var(--gold, var(--gold)), #d4a017);
  color:#1a1a1a;
  font-size:11px;
  font-weight:800;
  border-radius:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  box-shadow: 0 2px 8px rgba(251,181,25,.4);
  animation: bonoTagPulse 1.6s ease-in-out infinite alternate;
}

@keyframes bonoEnter{
  from{ transform: scale(.92); opacity:0 }
  to{ transform: scale(1); opacity:1 }
}
@keyframes bonoGlow{
  from{ box-shadow: 0 0 20px rgba(251,181,25,.12), inset 0 0 15px rgba(251,181,25,.04) }
  to{ box-shadow: 0 0 36px rgba(251,181,25,.28), inset 0 0 25px rgba(251,181,25,.08) }
}
@keyframes bonoShimmer{
  from{ transform: rotate(0deg) }
  to{ transform: rotate(360deg) }
}
@keyframes bonoIcon{
  from{ transform: scale(1) rotate(-8deg) }
  to{ transform: scale(1.15) rotate(8deg) }
}
@keyframes bonoTagPulse{
  from{ transform: scale(1) }
  to{ transform: scale(1.06) }
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* CELEBRACIÓN DE BONO — pop-up con confetti CSS puro */
/* ═════════════════════════════════════════════════════════════════════════ */
#celebrar-bono-overlay{
  position:fixed;
  inset:0;
  z-index: 9999;
  display:none;
  pointer-events:none;
}
#celebrar-bono-overlay.show{
  display:block;
  pointer-events:auto;
}
#celebrar-bono-overlay .cel-backdrop{
  position:absolute; inset:0;
  background: radial-gradient(circle at center, rgba(251,181,25,.25), rgba(0,0,0,.75));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: celFadeIn .25s ease-out;
}
#celebrar-bono-overlay.closing .cel-backdrop{
  animation: celFadeOut .3s ease-in forwards;
}
#celebrar-bono-overlay .cel-box{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background: linear-gradient(160deg, #241a08, #1a1207);
  border: 2px solid var(--gold, var(--gold));
  border-radius: 24px;
  padding: 28px 36px;
  text-align:center;
  box-shadow: 0 0 60px rgba(251,181,25,.5), 0 20px 60px rgba(0,0,0,.6);
  animation: celBoxIn .5s cubic-bezier(.34, 1.7, .5, 1);
  min-width: 260px;
  max-width: 90vw;
}
#celebrar-bono-overlay.closing .cel-box{
  animation: celBoxOut .3s ease-in forwards;
}
#celebrar-bono-overlay .cel-emoji{
  font-size: 56px;
  margin-bottom: 4px;
  animation: celEmoji 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 12px rgba(251,181,25,.6));
}
#celebrar-bono-overlay .cel-titulo{
  font-size: 18px;
  font-weight: 800;
  color: var(--gold, var(--gold));
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(251,181,25,.6);
}
#celebrar-bono-overlay .cel-pct{
  font-size: 46px;
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold), #d4a017);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 4px;
}
#celebrar-bono-overlay .cel-monto{
  font-size: 15px;
  color: #4ade80;
  font-weight: 700;
  margin-bottom: 18px;
}
#celebrar-bono-overlay .cel-btn{
  background: linear-gradient(135deg, var(--gold, var(--gold)), #d4a017);
  color: #1a1a1a;
  border: none;
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: .5px;
  box-shadow: 0 4px 12px rgba(251,181,25,.4);
  transition: transform .1s;
}
#celebrar-bono-overlay .cel-btn:active{ transform: scale(.96); }

#celebrar-bono-overlay .cel-confetti{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.confetti-pza{
  position:absolute;
  top:-20px;
  border-radius: 2px;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(.55, .05, .55, 1);
  animation-fill-mode: forwards;
}

@keyframes celFadeIn{
  from{ opacity:0 } to{ opacity:1 }
}
@keyframes celFadeOut{
  from{ opacity:1 } to{ opacity:0 }
}
@keyframes celBoxIn{
  0%{ transform:translate(-50%,-50%) scale(.3); opacity:0 }
  60%{ transform:translate(-50%,-50%) scale(1.08); opacity:1 }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:1 }
}
@keyframes celBoxOut{
  from{ transform:translate(-50%,-50%) scale(1); opacity:1 }
  to{ transform:translate(-50%,-52%) scale(.8); opacity:0 }
}
@keyframes celEmoji{
  from{ transform: scale(1) rotate(-6deg) }
  to{ transform: scale(1.15) rotate(6deg) }
}
@keyframes confettiFall{
  0%{ transform: translate(0, -20px) rotate(0deg); opacity: 1 }
  100%{ transform: translate(var(--drift, 0), 100vh) rotate(720deg); opacity: 0 }
}

@keyframes badgeBonoPulse{
  0%, 100%{ transform: scale(1); box-shadow: 0 2px 8px rgba(251,181,25,.5) }
  50%{ transform: scale(1.12); box-shadow: 0 3px 14px rgba(251,181,25,.75) }
}
.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;
}

/* Chat soporte responsive: 1 columna en mobile */
@media (max-width: 768px){
  #soporte-layout{
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
  }
  #chats-list-container{
    max-height: 400px;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
  }
  #chat-abierto-container{
    min-height: 500px;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PANEL OPERADOR - REORGANIZACIÓN + ESTÉTICA                          */
/* ═══════════════════════════════════════════════════════════════════ */

/* Separador visual entre tabs operativas y agrupadas */
.panel-tab-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 8px;
  background: linear-gradient(180deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
  flex-shrink: 0;
}

/* Barra de tabs con más profundidad */
.panel-tabs {
  background: linear-gradient(180deg, rgba(24,29,38,.6) 0%, rgba(14,17,22,.9) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  position: relative;
}

.panel-tab {
  transition: all .18s ease;
  position: relative;
}

.panel-tab:hover:not(.active){
  background: rgba(251,181,25,.05);
}

.panel-tab.active {
  background: linear-gradient(180deg, rgba(251,181,25,.12), rgba(251,181,25,.04));
  border-bottom: 2px solid var(--gold-bright);
  color: var(--text);
  font-weight: 700;
}

.panel-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-bright);
  opacity: .3;
}

/* Sub-tabs internas */
.sub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  flex-wrap: wrap;
}

.sub-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s ease;
  white-space: nowrap;
  font-family: inherit;
}

.sub-tab:hover:not(.active){
  background: rgba(255,255,255,.03);
  color: var(--text);
}

.sub-tab.active {
  background: linear-gradient(135deg, rgba(251,181,25,.15), rgba(251,181,25,.05));
  color: var(--gold-bright);
  border: 1px solid rgba(251,181,25,.3);
  padding: 9px 15px;
  box-shadow: 0 2px 8px rgba(251,181,25,.15);
}

.sub-tab-body{
  min-height: 200px;
}

/* Las panel-section dentro de sub-tab-body no usan display:none clásico */
/* Solo aplica a las sub-secciones de config, no a otras que puedan estar embebidas */
#sec-config .sub-tab-body > #sec-cvus,
#sec-config .sub-tab-body > #sec-whatsapps,
#sec-config .sub-tab-body > #sec-telegram,
#sec-config .sub-tab-body > #sec-promos,
#sec-config .sub-tab-body > #sec-ajustes {
  display: none;
}
#sec-config .sub-tab-body > .panel-section.active {
  display: block !important;
}

/* Cards con más profundidad */
.panel-section h2 {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text), var(--gold-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cards de contenido con sombra sutil */
.panel-section > div[style*="background:var(--bg-card)"],
.panel-section > div[style*="background: var(--bg-card)"] {
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: box-shadow .2s ease;
}

/* Kanban: mejor separación */
.kanban {
  gap: 14px;
}

/* Badges de tabs con más contraste */
.panel-tab .badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
  border: 1.5px solid #0e1116;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

/* Responsive: sub-tabs en mobile */
/* ══════════════════════════════════════════════════════════════════════
   CELULAR — la app del cliente se usa casi siempre desde el teléfono,
   así que estas reglas no son un extra: son el caso principal.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px){
  /* Números grandes: en pantallas de 360px un monto de 7 cifras se salía. */
  #retiro-timer{ font-size:24px !important; letter-spacing:1px }

  /* Botones más altos: el dedo necesita 44px de alto para no errar. */
  .btn, button.action-card{ min-height:44px }

  /* Las tarjetas de acción entran de a dos, pero con menos aire para que
     no haya que scrollear tanto. */
  .action-grid{ gap:8px }
  .action-grid > .action-card:last-child:nth-child(odd){ width: calc(50% - 4px) }
  .action-card{ padding:12px 10px }

  /* El CVU es largo y no se puede partir: se achica en vez de cortarse. */
  #cvu-card [style*="font-size:15px"], #cvu-numero{ font-size:14px; letter-spacing:0 }
  /* Cualquier texto largo sin espacios (CVU, alias) se parte en vez de
     estirar la tarjeta. */
  #cvu-card{ overflow-wrap:anywhere }

  /* Modales pegados a los bordes en pantallas chicas. */
  .bk-modal-box{ padding:1.15rem; border-radius:18px }
  .bk-modal-overlay{ padding:10px }
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width: 340px){
  .action-grid{ grid-template-columns:1fr }
  /* Con una sola columna ya está centrada por definición. */
  .action-grid > .action-card:last-child:nth-child(odd){ width:100%; grid-column:auto }
  #retiro-timer{ font-size:21px !important }
}

/* Respeta la zona segura de los teléfonos con muesca. */
@supports (padding: max(0px)){
  body{
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Al tocar, respuesta inmediata: sin esto parece que no registró. */
@media (hover: none){
  .btn:active, .action-card:active, .bk-plat-card:active{
    transform: scale(.97); transition: transform .08s ease;
  }
  /* En táctil el hover queda "pegado" después de tocar. */
  .card:hover, .metric-card:hover{ transform:none; box-shadow:inherit }
}

@media (max-width: 640px){
  .sub-tabs {
    padding: 3px;
  }
  .sub-tab, .sub-tab.active {
    padding: 8px 12px;
    font-size: 12px;
  }
  .panel-tab-sep {
    display: none;
  }
}