/* shell-auth.css — the account, search and modal styles of the shell's
   account and auth modals (js/auth.js), over the cube flow.
   Selectors here are collision-free with index.html's inline cube-flow styles
   (the cube flow uses .velo/.dlg for its own dialogs). No rule from the
   collision set (badge/btn/btn-ghost/btn-primary/chip/chips/current/globe/
   lang/menu/pin/tab) is included. */

/* index.html's :root already defines --w-ink and --w-line; only the tokens
   the account rules below need that index.html's :root lacks are added here. */
:root{
  --w-body:#1b1b46;
  --btn:#080830; --btn-hover:#1c1c5e;
  --w-blue:#4aa8e8;
}

/* ---------- icon buttons ---------- */
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--w-line);background:#fff;display:grid;place-items:center;flex:none;transition:background .15s ease;}
.iconbtn:hover{background:#f2f5f9;}
.iconbtn svg{width:20px;height:20px;stroke:var(--w-ink);}
.iconbtn.sm{width:40px;height:40px;} .iconbtn.sm svg{width:19px;height:19px;}

/* ---------- account menu ---------- */
.acctmenu{position:relative;}
.acct-panel{position:absolute; top:calc(100% + 8px); right:0; min-width:260px; background:#fff;
  border:1px solid var(--w-line); border-radius:14px; padding:8px; box-shadow:0 12px 34px rgba(8,8,48,.14);
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:60;}
.acctmenu.open .acct-panel{opacity:1;transform:translateY(0);pointer-events:auto;}
.acct-card{background:#eef2f7;border-radius:10px;padding:16px 12px 14px;text-align:center;margin-bottom:6px;}
.acct-av{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 8px;}
.acct-avfb{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:#0e1430;color:#fff;font-weight:700;font-size:22px;margin:0 auto 8px;}
.acct-name{font-size:15px;font-weight:600;color:var(--w-ink);}
.acct-email{font-size:12px;color:#5a5a72;margin-top:2px;word-break:break-all;}
.acct-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:transparent;
  font-family:'Geist',sans-serif;font-size:14px;font-weight:500;color:var(--w-ink);padding:11px 12px;border-radius:9px;cursor:pointer;}
.acct-row:hover{background:#eef2f7;}
.acct-row svg{width:19px;height:19px;stroke:#5a5a72;flex:none;}

/* ---------- modal overlay + sheet ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,8,48,.42);backdrop-filter:blur(3px);display:flex;
  align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:200;padding:20px;}
.overlay.show{opacity:1;pointer-events:auto;}
.sheet{background:#fff;border-radius:22px;padding:30px 30px 26px;max-width:420px;width:100%;text-align:center;
  box-shadow:0 24px 70px rgba(8,8,48,.3);transform:translateY(12px) scale(.97);transition:transform .26s cubic-bezier(.2,.8,.2,1);}
.overlay.show .sheet{transform:none;}
.sheet-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-blue);
  background:rgba(74,168,232,.12);border-radius:999px;padding:5px 13px;}
.sheet-h{font-size:20px;font-weight:600;letter-spacing:-0.02em;margin:16px 0 10px;color:var(--w-ink);}
.sheet-action{font-size:16px;line-height:1.5;color:var(--w-body);}
.sheet-note{font-size:13px;line-height:1.5;color:#9a9aad;margin-top:12px;}
.sheet-btn{margin-top:22px;border:none;background:var(--btn);color:#fff;font-size:14px;font-weight:600;padding:12px 32px;border-radius:999px;}
.sheet-btn:hover{background:var(--btn-hover);}
.sheet-h.left{text-align:left;} .sheet-note.top{margin-top:8px;} .sheet-note.left{text-align:left;}
.sheet-btn.ghost{background:#fff;color:var(--w-ink);border:1.5px solid var(--w-line);}
.sheet-actions{display:flex;gap:10px;margin-top:20px;} .sheet-actions .btn{flex:1;}

/* ---------- fields + password reveal ---------- */
.fld{width:100%;border:1px solid var(--w-line);border-radius:12px;padding:13px 16px;font-family:inherit;font-size:15px;color:var(--w-ink);margin-top:10px;outline:none;}
.fld-wrap{position:relative;}
.fld-wrap .fld{padding-right:44px;}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#9a9aad;cursor:pointer;border-radius:8px;padding:0;}
.pw-eye:hover{color:var(--w-ink);}
.pw-eye svg{width:20px;height:20px;display:block;}
.fld::placeholder{color:#9a9aad;}
.fldlabel{font-size:14px;font-weight:600;margin:16px 0 8px;text-align:left;}

/* ---------- auth modals ---------- */
.auth-modal{text-align:center;}
/* Flecha "volver" del modal de alta: arriba a la izquierda, dentro de la hoja.
   Area de toque de 40px para dedo; la etiqueta accesible sale de inbox.back. */
.sheet{position:relative;}
.auth-back{position:absolute;top:12px;left:12px;width:40px;height:40px;border:none;background:transparent;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--w-ink);padding:0;}
.auth-back:hover{background:#eef2f7;}
.auth-back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

.auth-logo{height:26px;width:auto;display:block;margin:0 auto 18px;}
.auth-sub{font-size:15px;line-height:1.5;color:var(--w-body);margin:0;}
.auth-fld{margin-top:18px;text-align:left;box-sizing:border-box;}
.auth-modal .fld{margin-top:0;box-sizing:border-box;text-align:left;}
.auth-modal .fld:focus{border-color:var(--w-blue);box-shadow:0 0 0 3px rgba(74,168,232,.18);}
.auth-fld.auth-err,.auth-modal .auth-err{border-color:#c1121f;}
.auth-btn{margin-top:18px;width:100%;font-size:15px;padding:13px 32px;}
.auth-btn:disabled{opacity:.45;cursor:default;}
.auth-btn:disabled:hover{background:var(--btn);}
.auth-btn.outline{background:#fff;color:var(--w-ink);border:1.5px solid var(--w-line);font-size:14px;padding:12px 32px;}
.auth-btn.outline:hover{background:#fff;border-color:var(--btn);}
.auth-lbl{font-size:14px;font-weight:600;color:var(--w-ink);margin:14px 0 8px;text-align:left;}
.auth-lblrow{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px;}
.auth-lblrow .auth-lbl{margin:0;}
.auth-lblrow a{font-size:13px;}
/* Tabbed auth: segmented toggle + animated height */
.auth-seg{position:relative;display:flex;background:#eef0f4;border-radius:999px;padding:4px;margin:18px 0 4px;}
.auth-seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border-radius:999px;box-shadow:0 2px 6px rgba(8,8,48,.10);transition:transform .28s cubic-bezier(.4,0,.2,1);}
.auth-seg.seg-signup .auth-seg-thumb{transform:translateX(100%);}
.auth-seg button{position:relative;z-index:1;flex:1;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--w-body);padding:10px 0;border-radius:999px;cursor:pointer;transition:color .2s ease;}
.auth-seg button.on{color:var(--w-ink);}
.auth-anim{overflow:hidden;transition:height .32s cubic-bezier(.4,0,.2,1);}
.auth-pane{transition:opacity .22s ease;}
.auth-anim .auth-fld{margin-top:26px;} /* extra space under the toggle on Create account */
@media (prefers-reduced-motion: reduce){
  .auth-anim{transition:none;}
  .auth-pane{transition:none;}
  .auth-seg-thumb{transition:none;}
}
/* Cuenta regresiva de la ventana de 10 s antes de mandar el mail de alta. */
.auth-count{margin-top:14px;font-size:clamp(13px,3.4vw,14px);line-height:1.5;color:#8a8aa2;
  font-variant-numeric:tabular-nums;}
.auth-mailic{width:64px;height:64px;border-radius:50%;background:rgba(74,168,232,.12);display:grid;place-items:center;margin:4px auto 0;}
.auth-mailic svg{width:28px;height:28px;}
.auth-hint{display:flex;align-items:flex-start;gap:10px;text-align:left;background:#f5f7fa;border-radius:14px;padding:13px 15px;margin-top:18px;font-size:13.5px;line-height:1.5;color:#8a8aa2;}
.auth-hint svg{width:19px;height:19px;flex:none;margin-top:1px;}
.auth-hint strong{color:#5a5a72;}
.auth-reqs{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:13px;line-height:1.4;color:#9a9aad;text-align:left;}
.auth-req{display:flex;align-items:center;gap:8px;}
.auth-req svg{width:14px;height:14px;flex:none;stroke:#c9c9d6;}
.auth-req.ok svg{stroke:var(--w-blue);}
.auth-req.ok span{color:#5a5a72;}
.auth-req svg.x{display:none;}
.auth-reqs.marked .auth-req.bad svg{display:none;}
.auth-reqs.marked .auth-req.bad svg.x{display:block;stroke:#c1121f;}
.auth-reqs.marked .auth-req.bad span{color:#c1121f;}
.auth-birth{text-align:left;}
.auth-birth.center{margin-top:18px;}
.auth-birth.center .tkw-sum{justify-content:center;}
.auth-birth.center .tkw.open .tkw-box{left:50%;transform:translateX(-50%);}
.auth-birth+.auth-btn{margin-top:20px;}
.auth-photo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:96px;height:96px;border-radius:50%;border:2px dashed var(--w-line);background:#fafbfc;background-size:cover;background-position:center;margin:20px auto 0;cursor:pointer;font-family:inherit;}
.auth-photo:hover{border-color:var(--w-blue);}
.auth-photo svg{width:22px;height:22px;}
.auth-photo span{font-size:11px;font-weight:600;color:#7a7a92;}
.auth-photo.haspic svg,.auth-photo.haspic span{display:none;}
.auth-photo.haspic{border-style:solid;}
/* Camera badge: shown over the photo (bottom-right) so the user knows a tap re-takes a selfie. */
.auth-photo-badge{position:absolute;right:1px;bottom:1px;display:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--w-line);box-shadow:0 2px 6px rgba(8,8,48,.22);}
.auth-photo-badge svg{width:15px;height:15px;}
.auth-photo.haspic .auth-photo-badge{display:flex;}
.auth-photo.haspic .auth-photo-badge svg{display:block;}
.auth-choose{margin-top:10px;}
.auth-choose a{font-size:13px;font-weight:600;color:var(--w-blue);text-decoration:none;cursor:pointer;}
.auth-choose a:hover{text-decoration:underline;}
.auth-names{display:flex;gap:10px;margin-top:16px;}
.auth-names>div{flex:1;}
.auth-ini{font-size:15px;font-weight:700;color:#fff;}
#authBtn.on{background:var(--btn);border-color:var(--btn);}
#authBtn.on:hover{background:var(--btn-hover);}
.auth-error{font-size:13.5px;font-weight:500;color:#c1121f;margin-top:12px;min-height:19px;}
/* Profile modal: as tall as its fields; the error keeps its line (min-height), so it never resizes. */
.sheet.sheet-profile{height:auto;}
.auth-select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;padding-right:36px;cursor:pointer;}
.auth-select{cursor:text;}
.auth-cmenu{position:fixed;z-index:1500;max-height:212px;overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid #e6e4e4;border-radius:14px;padding:6px;box-shadow:0 12px 34px rgba(8,8,48,.16);box-sizing:border-box;}
.auth-cmenu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:9px;font:inherit;font-size:14.5px;font-weight:600;color:#0b1030;cursor:pointer;}
.auth-cmenu button:hover{background:#eef2f7;}
.auth-cmenu button.on{background:#080830;color:#fff;}
.auth-cmenu .fl{font-size:17px;line-height:1;width:20px;flex:none;}
.auth-note{font-size:12px;color:#5a5a72;margin-top:10px;}

/* ===== Camera / photo overlay (profile avatar) ===== */
.cam-ov{position:fixed;inset:0;z-index:1000;background:#0d0d0f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;}
.cam-stage{position:relative;width:100%;max-width:520px;aspect-ratio:3/4;background:#1c1c20;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cam-video,.cam-shot{width:100%;height:100%;object-fit:cover;display:block;}
.cam-video.mirror{transform:scaleX(-1);}
.cam-msg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;color:#f4a;font-size:14px;line-height:1.5;}
.cam-msg.show{display:flex;}
.cam-controls{display:flex;align-items:center;gap:20px;}
.cam-shot{background:#1c1c20;}
/* .cam-video/.cam-shot llevan display:block, que le gana al atributo hidden. */
.cam-video[hidden],.cam-shot[hidden]{display:none;}
.cam-controls[hidden]{display:none;}
.cam-close[hidden]{display:none;}
.cam-controls{flex-wrap:wrap;justify-content:center;}
/* Botones del paso de revision: confirmar / sacar otra / cerrar. */
.cam-btn{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;
  font-family:inherit;font-size:clamp(13px,3.4vw,14px);font-weight:600;padding:12px 18px;
  border-radius:999px;cursor:pointer;min-height:44px;}
.cam-btn:hover{background:rgba(255,255,255,.18);}
.cam-btn.primary{background:#fff;color:#0d0d0f;border-color:#fff;}
.cam-btn.primary:hover{background:#e9e9ef;}

.cam-shutter{width:66px;height:66px;border-radius:50%;background:#fff;border:5px solid #6b6b73;cursor:pointer;transition:transform .08s;}
.cam-shutter:active{transform:scale(.92);}
.cam-close{position:absolute;top:14px;right:14px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:20px;padding:8px 14px;font-size:13px;cursor:pointer;}

.sheet-x{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(8,8,48,.06);color:#6b6f8a;display:grid;place-items:center;cursor:pointer}
.sheet-x:hover{background:rgba(8,8,48,.12);color:#080830}
.sheet-x svg,.cam-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body.tk-gate .sheet-x{display:none}
.cam-x{position:fixed;top:16px;right:16px;z-index:3;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.cam-x:hover{background:rgba(255,255,255,.26)}