/* ═══════════════════════════════════════════════════════════════════════
   CLIPBOOK · Auth premium (login / registro)
   Mismo lenguaje que el onboarding. Solo lo cargan login y registro, así el
   logo animado (más abajo) es opt-in: en 2FA / olvidé-clave / errores el
   partial del logo queda estático.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logo animado (aplica al partial partials/logo.blade.php) ──────────── */
.cb-logo .cb-logo-clip{ transform-box:fill-box; transform-origin:center; opacity:0;
  animation:cbClipIn .7s cubic-bezier(.2,.8,.25,1.35) .1s forwards; }
@keyframes cbClipIn{
  0%{ opacity:0; transform:scale(.2) rotate(-55deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
.cb-logo .cb-logo-letters path{ opacity:0; transform:translateY(7px); transform-box:fill-box;
  animation:cbLetterIn .45s cubic-bezier(.2,.7,.3,1) forwards; }
.cb-logo .cb-logo-letters path:nth-child(1){ animation-delay:.42s }
.cb-logo .cb-logo-letters path:nth-child(2){ animation-delay:.48s }
.cb-logo .cb-logo-letters path:nth-child(3){ animation-delay:.54s }
.cb-logo .cb-logo-letters path:nth-child(4){ animation-delay:.60s }
.cb-logo .cb-logo-letters path:nth-child(5){ animation-delay:.66s }
.cb-logo .cb-logo-letters path:nth-child(6){ animation-delay:.72s }
.cb-logo .cb-logo-letters path:nth-child(7){ animation-delay:.78s }
.cb-logo .cb-logo-letters path:nth-child(8){ animation-delay:.84s }
@keyframes cbLetterIn{ to{ opacity:1; transform:none; } }
.cb-logo:hover .cb-logo-clip{ animation:cbClipWink .6s ease; }
@keyframes cbClipWink{ 0%,100%{ transform:rotate(0) } 35%{ transform:rotate(-8deg) scale(1.06) } 70%{ transform:rotate(3deg) } }
@media (prefers-reduced-motion: reduce){
  .cb-logo .cb-logo-clip, .cb-logo .cb-logo-letters path{ animation:none; opacity:1; transform:none; }
}

/* ── Página + tarjeta ─────────────────────────────────────────────────── */
body.cb-auth-body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;
  background:radial-gradient(1100px 520px at 50% -8%, rgba(251,209,13,.10), transparent 60%), var(--bg);
}
.cb-auth-card{
  width:100%; max-width:410px; background:var(--surface); border-radius:20px;
  box-shadow:0 24px 70px rgba(31,28,20,.10), 0 2px 6px rgba(31,28,20,.03);
  border:1px solid var(--hairline); padding:38px 38px 32px;
}
.cb-auth-logo{ margin-bottom:24px; }
.cb-auth-card h1{ font-size:24px; letter-spacing:-.02em; font-weight:750; margin:0 0 5px; }
.cb-auth-card p.sub{ font-size:13.5px; color:var(--ink-3); margin:0 0 26px; }

/* ── Campos ───────────────────────────────────────────────────────────── */
.cba-field{ margin-bottom:16px; }
.cba-field label{ display:block; font-size:12.5px; font-weight:650; color:var(--ink-2); margin-bottom:6px; }
.cba-field input{
  width:100%; padding:12px 13px; border-radius:12px; border:1.5px solid var(--hairline);
  background:var(--surface); color:var(--ink); font:inherit; font-size:14px; box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
.cba-field input:focus{ outline:none; border-color:var(--yellow); box-shadow:0 0 0 3px rgba(251,209,13,.18); }
.cba-pass-wrap{ position:relative; }
.cba-pass-wrap input{ padding-right:40px; }
.cba-pass-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:15px; padding:4px; line-height:1; }
.cba-hint{ font-size:11.5px; color:var(--ink-3); margin-top:5px; }

.cba-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 20px; }
.cba-remember{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); cursor:pointer; }
.cba-remember input{ width:16px; height:16px; accent-color:var(--yellow); }
.cba-forgot{ font-size:12.5px; color:var(--ink-3); text-decoration:none; }
.cba-forgot:hover{ color:var(--ink-2); text-decoration:underline; }

/* ── Botón principal ──────────────────────────────────────────────────── */
.cba-cta{
  width:100%; height:52px; border:none; border-radius:13px; background:var(--yellow); color:#2B2A26;
  font:inherit; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 20px rgba(251,209,13,.26); transition:transform .16s, box-shadow .16s, background .16s;
}
.cba-cta:hover{ background:#FFDA2E; transform:translateY(-1px); box-shadow:0 12px 26px rgba(251,209,13,.34); }
.cba-cta:active{ transform:translateY(0); }
.cba-cta i{ font-size:16px; }

/* ── Separador + social ───────────────────────────────────────────────── */
.cba-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; }
.cba-divider .line{ flex:1; height:1px; background:var(--hairline); }
.cba-divider span{ font-size:11.5px; color:var(--ink-3); font-weight:600; }
.cba-social{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; border-radius:13px;
  border:1.5px solid var(--hairline); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none; box-sizing:border-box; transition:border-color .15s, background .15s; margin-bottom:10px; }
.cba-social:hover{ border-color:#D9D3C6; background:#FCFBF8; }
.cba-social i{ font-size:16px; }
.cba-social.soon{ justify-content:space-between; opacity:.6; cursor:not-allowed; }
.cba-social.soon .s-left{ display:flex; align-items:center; gap:9px; }
.cba-social.soon i.bi-facebook{ color:#1877F2; }
.cba-soon-badge{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--hairline); color:var(--ink-3); padding:2px 8px; border-radius:999px; }

.cba-foot{ text-align:center; font-size:12.5px; color:var(--ink-3); margin-top:20px; }
.cba-foot a{ color:var(--ink); font-weight:650; text-decoration:none; border-bottom:1.5px solid var(--yellow); }

/* ── Entrada escalonada ───────────────────────────────────────────────── */
.cba-rise{ opacity:0; transform:translateY(12px); animation:cbaRise .5s cubic-bezier(.2,.7,.3,1) forwards; }
.cba-d1{ animation-delay:.05s } .cba-d2{ animation-delay:.15s } .cba-d3{ animation-delay:.25s }
.cba-d4{ animation-delay:.35s } .cba-d5{ animation-delay:.45s }
@keyframes cbaRise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .cba-rise{ animation:none; opacity:1; transform:none; } }

/* ── Móvil / app-like (login) ─────────────────────────────────────────── */
@media (max-width:520px){
  body.cb-auth-body{ padding:0; align-items:stretch; background:var(--surface); }
  .cb-auth-card{ max-width:none; min-height:100vh; border-radius:0; border:none; box-shadow:none;
    padding:34px 22px 28px; display:flex; flex-direction:column; justify-content:center; }
  .cb-auth-card h1{ font-size:22px; }
}