/* ============================================================
   PicoVillavo V2 — componentes.css
   Botones, tarjetas, modales y chat.
   F1: pantallas de autenticación + onboarding. Portado TAL CUAL de
   referencia-v1/index.html (referencias de línea en cada bloque).
   Se amplía por fase.
   ============================================================ */

/* ===== SISTEMA DE PANTALLAS (V1 líneas 37-43) ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.02);}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}   /* V1 449 */
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:.85}}                            /* V1 450 */

.screen{display:none;animation:fadeIn .35s ease;}
.screen.active{display:block;}
.fade-in{animation:fadeIn .4s ease forwards;}

/* ===== CAMPOS Y BOTONES DE AUTH (V1 líneas 451-477) ===== */
.auth-input{
  width:100%;padding:15px 16px 15px 46px;border-radius:15px;
  border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);
  color:#fff;font-size:15px;font-weight:700;outline:none;
  font-family:Nunito,sans-serif;margin-bottom:14px;box-sizing:border-box;
  transition:all .2s ease;
}
.auth-input::placeholder{color:rgba(255,255,255,.4);font-weight:600;}
.auth-input:focus{border-color:#FFD54F;background:rgba(255,255,255,.18);box-shadow:0 0 0 4px rgba(255,213,79,.18);}
.auth-field{position:relative;}
.auth-ico{position:absolute;left:15px;top:16px;font-size:16px;opacity:.75;pointer-events:none;}
.auth-label{color:rgba(255,255,255,.85);font-size:12.5px;font-weight:800;display:block;margin-bottom:6px;letter-spacing:.3px;}
.btn-auth-primary{
  width:100%;padding:16px;border-radius:16px;border:none;
  background:linear-gradient(135deg,#FFD54F,#FFB300);color:#3d2e00;
  font-size:16px;font-weight:900;cursor:pointer;font-family:Nunito,sans-serif;
  box-shadow:0 8px 22px rgba(255,179,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
  letter-spacing:.3px;transition:transform .15s ease;
}
.btn-auth-primary:active{transform:scale(.97);}
.btn-auth-ghost{
  width:100%;padding:13px;border-radius:14px;
  border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);
  color:#fff;font-size:13.5px;font-weight:800;cursor:pointer;font-family:Nunito,sans-serif;
  transition:all .2s ease;
}
.btn-auth-ghost:active{background:rgba(255,255,255,.14);}

/* ===== ONBOARDING (V1 líneas 45-82, 228-234) ===== */
#s-onboarding{
  min-height:100vh;
  background:linear-gradient(160deg,#0d1b6e 0%,#1565c0 55%,#0288d1 100%);
  flex-direction:column;align-items:center;justify-content:center;
  padding:32px 24px;
}
#s-onboarding.active{display:flex;}
.ob-logo{font-size:72px;text-align:center;margin-bottom:4px;}
.ob-title{color:#fff;font-weight:900;font-size:38px;text-align:center;letter-spacing:-1px;}
.ob-sub{color:rgba(255,255,255,.75);font-size:16px;text-align:center;margin:6px 0 36px;}
.ob-card{
  background:rgba(255,255,255,.12);backdrop-filter:blur(20px);
  border-radius:24px;padding:28px 24px;width:100%;
  border:1px solid rgba(255,255,255,.2);
}
.ob-label{color:#fff;font-weight:800;font-size:20px;text-align:center;margin-bottom:18px;}
#plate-input{
  width:100%;padding:16px 20px;border-radius:16px;
  border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);
  color:#fff;font-size:26px;font-weight:900;text-align:center;
  letter-spacing:4px;outline:none;font-family:'Nunito',sans-serif;
}
#plate-input::placeholder{color:rgba(255,255,255,.4);font-size:18px;letter-spacing:1px;}
.ob-hint{color:rgba(255,255,255,.55);font-size:12px;text-align:center;margin-top:8px;}
.btn-start{
  width:100%;margin-top:20px;padding:16px;border-radius:16px;border:none;
  background:#fff;color:#1a237e;font-size:17px;font-weight:900;
  cursor:pointer;font-family:'Nunito',sans-serif;transition:all .2s;
}
.btn-start:disabled{background:rgba(255,255,255,.3);color:rgba(255,255,255,.5);cursor:not-allowed;}
.ob-footer{color:rgba(255,255,255,.4);font-size:12px;text-align:center;margin-top:24px;line-height:1.6;}
.vehicle-selector{display:flex;gap:12px;margin-bottom:8px;}
.vehicle-btn{
  flex:1;padding:16px 8px;border-radius:14px;
  border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;font-family:'Nunito',sans-serif;transition:all .2s;
}
.vehicle-btn.active{background:rgba(255,255,255,.25);border-color:#fff;transform:scale(1.02);}