:root{
  --cp-bg:#f7f8fc;
  --cp-card:#ffffff;
  --cp-ink:#111827;
  --cp-muted:#667085;
  --cp-line:rgba(17,24,39,.08);
  --cp-purple:#7c3aed;
  --cp-purple-2:#5b21e5;
  --cp-purple-soft:#f4edff;
  --cp-shadow:0 24px 58px rgba(17,24,39,.10);
  --cp-shadow-soft:0 14px 34px rgba(124,58,237,.12);
}

*{box-sizing:border-box}
html,body{min-height:100%;}
body.authPremium{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--cp-ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,58,237,.10), transparent 34%),
    linear-gradient(180deg,#ffffff 0%, var(--cp-bg) 42%, #ffffff 100%);
  -webkit-font-smoothing:antialiased;
}

.authShell{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:30px 20px calc(36px + env(safe-area-inset-bottom));
}

.authBrand{
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px 6px 22px;
}
.authLogo{
  width:76px;
  height:76px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:38px;
  font-weight:950;
  letter-spacing:-.04em;
  background:linear-gradient(145deg,#7c3aed 0%,#5b21e5 92%);
  box-shadow:0 20px 34px rgba(91,33,229,.24);
}
.authBrand h1{
  margin:0;
  font-size:38px;
  line-height:1;
  letter-spacing:-.045em;
  font-weight:950;
}
.authBrand p{
  margin:8px 0 0;
  color:#536179;
  font-size:20px;
  line-height:1.25;
  font-weight:600;
}

.authCard{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.07);
  border-radius:30px;
  box-shadow:var(--cp-shadow);
  padding:34px;
  margin-top:22px;
  backdrop-filter:blur(18px);
}
.authCardHead h2,.loginHead h2{
  margin:0;
  font-size:32px;
  letter-spacing:-.035em;
  line-height:1.05;
  font-weight:950;
}
.authCardHead p,.loginHead p{
  margin:14px 0 0;
  color:#536179;
  font-size:20px;
  line-height:1.25;
  font-weight:600;
}

.roleGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:30px;
}
.roleCard{
  min-width:0;
  border:1px solid rgba(17,24,39,.08);
  border-radius:26px;
  padding:28px 22px 24px;
  text-align:center;
  background:#fff;
  box-shadow:0 10px 28px rgba(17,24,39,.04);
}
.roleCard--featured{
  border-color:rgba(124,58,237,.30);
  background:linear-gradient(145deg,#fff 0%,#fbf7ff 100%);
  box-shadow:0 18px 36px rgba(124,58,237,.10);
}
.roleIcon{
  width:86px;
  height:86px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
  font-size:42px;
  background:linear-gradient(145deg,#f6f0ff,#eef2ff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.06);
}
.roleCard h3{
  margin:0;
  font-size:27px;
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:950;
}
.roleCard p{
  margin:12px 0 0;
  color:#667085;
  font-size:20px;
  line-height:1.15;
  font-weight:600;
}
.roleBtn{
  margin-top:28px;
  width:100%;
  min-height:58px;
  border-radius:20px;
  border:0;
  font-size:19px;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.roleBtn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--cp-purple),var(--cp-purple-2));
  box-shadow:0 16px 28px rgba(124,58,237,.28);
}
.roleBtn--ghost{
  color:#6d28d9;
  background:#fff;
  border:2px solid rgba(124,58,237,.42);
}
.roleBtn:active,.btnPrimary:active,.googleBtn:active,.cancelBtn:active{transform:scale(.99)}

.loginHead{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.loginIcon{
  width:66px;
  height:66px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:28px;
  color:#6d28d9;
  background:linear-gradient(145deg,#f4edff,#ffffff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.06);
}
.loginForm{
  margin-top:28px;
}
.inputWrap{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:70px;
  border:1px solid rgba(17,24,39,.10);
  border-radius:20px;
  background:#fff;
  margin-top:14px;
  padding:0 18px;
  box-shadow:0 8px 22px rgba(17,24,39,.025);
}
.inputWrap:focus-within{
  border-color:rgba(124,58,237,.48);
  box-shadow:0 0 0 5px rgba(124,58,237,.10),0 10px 28px rgba(124,58,237,.07);
}
.inputIcon{
  width:28px;
  display:flex;
  justify-content:center;
  opacity:.72;
  font-size:23px;
}
.inputWrap input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:21px;
  color:#111827;
  font-weight:600;
  padding:20px 0;
}
.inputWrap input::placeholder{color:#a3a7b2;font-weight:500}
.eyeBtn{
  border:0;
  background:transparent;
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  opacity:.66;
  cursor:pointer;
}
.eyeBtn.isActive{background:#f4edff;opacity:1}

.error{
  margin-top:14px;
  border:1px solid rgba(220,38,38,.18);
  background:#fef2f2;
  color:#991b1b;
  border-radius:16px;
  padding:12px 14px;
  font-size:14px;
  font-weight:850;
}
.btnPrimary{
  width:100%;
  min-height:64px;
  border:0;
  border-radius:18px;
  margin-top:22px;
  color:#fff;
  background:linear-gradient(135deg,var(--cp-purple),var(--cp-purple-2));
  box-shadow:0 18px 30px rgba(124,58,237,.28);
  font-size:21px;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  cursor:pointer;
}
.divider{
  display:flex;
  align-items:center;
  gap:18px;
  color:#667085;
  margin:22px 0 18px;
  font-weight:900;
}
.divider:before,.divider:after{
  content:"";
  height:1px;
  background:rgba(17,24,39,.09);
  flex:1;
}
.googleBtn{
  width:100%;
  min-height:58px;
  border:1px solid rgba(17,24,39,.09);
  border-radius:18px;
  background:#fff;
  color:#111827;
  font-size:19px;
  font-weight:850;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(17,24,39,.025);
}
.googleMark{
  width:26px;
  height:26px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#4285f4;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.08);
}
.cancelBtn{
  width:100%;
  border:0;
  background:transparent;
  color:#667085;
  font-size:18px;
  font-weight:900;
  padding:18px 10px 6px;
  cursor:pointer;
}
.links{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(17,24,39,.08);
}
.links span{
  width:1px;
  height:28px;
  background:rgba(17,24,39,.10);
}
.links a{
  color:#6d28d9;
  text-decoration:none;
  font-size:18px;
  line-height:1.2;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}

@media (max-width:560px){
  .authShell{padding:22px 16px calc(28px + env(safe-area-inset-bottom));}
  .authBrand{gap:14px;padding:6px 4px 18px;}
  .authLogo{width:62px;height:62px;border-radius:18px;font-size:31px;}
  .authBrand h1{font-size:30px;}
  .authBrand p{font-size:16px;margin-top:6px;}
  .authCard{border-radius:26px;padding:24px 20px;margin-top:18px;}
  .authCardHead h2,.loginHead h2{font-size:28px;}
  .authCardHead p,.loginHead p{font-size:17px;margin-top:9px;}
  .roleGrid{gap:12px;margin-top:22px;}
  .roleCard{padding:22px 12px 18px;border-radius:22px;}
  .roleIcon{width:72px;height:72px;font-size:34px;margin-bottom:18px;}
  .roleCard h3{font-size:23px;}
  .roleCard p{font-size:16px;}
  .roleBtn{min-height:54px;font-size:17px;margin-top:22px;border-radius:18px;}
  .loginHead{gap:14px;}
  .loginIcon{width:56px;height:56px;border-radius:18px;font-size:24px;}
  .inputWrap{min-height:62px;border-radius:18px;padding:0 14px;}
  .inputWrap input{font-size:18px;padding:16px 0;}
  .btnPrimary{min-height:58px;font-size:18px;}
  .googleBtn{min-height:54px;font-size:16px;}
  .links{gap:10px;}
  .links a{font-size:15px;}
}

@media (max-width:390px){
  .roleGrid{grid-template-columns:1fr;}
  .roleCard{display:grid;grid-template-columns:auto 1fr;column-gap:12px;text-align:left;align-items:center;}
  .roleIcon{grid-row:1 / span 2;width:58px;height:58px;font-size:28px;margin:0;}
  .roleBtn{grid-column:1 / -1;margin-top:16px;}
}

/* =========================================================
   Login · Selector de rol premium v6.3
   Corrige el chooser que quedaba al pie sin modal.
   ========================================================= */
.cpOverlay{
  position:fixed;
  inset:0;
  z-index:99990;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:cpFadeIn .18s ease-out both;
}
.cpPanel{
  width:min(720px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.72);
  border-radius:32px;
  box-shadow:0 -18px 62px rgba(15,23,42,.28);
  padding:20px;
  transform-origin:bottom center;
  animation:cpSlideUp .22s cubic-bezier(.2,.8,.2,1) both;
}
.cpHandle{
  width:76px;
  height:8px;
  border-radius:999px;
  background:#e4e7ee;
  margin:0 auto 18px;
}
.cpPanel__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:22px;
}
.cpHeadIcon{
  width:68px;
  height:68px;
  border-radius:24px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7c3aed;
  font-size:32px;
  background:linear-gradient(145deg,#f5edff,#ffffff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.08);
}
.cpHeadText{min-width:0;flex:1;padding-top:4px;}
.cpTitle{
  margin:0;
  font-size:32px;
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:950;
  color:#111827;
}
.cpSub{
  margin-top:8px;
  color:#536179;
  font-size:20px;
  line-height:1.22;
  font-weight:600;
}
.cpClose{
  width:58px;
  height:58px;
  border:0;
  border-radius:999px;
  flex:0 0 auto;
  background:#f2f4f8;
  color:#111827;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cpList{display:grid;gap:18px;}
.cpItem{
  width:100%;
  min-height:142px;
  border:2px solid rgba(124,58,237,.25);
  border-radius:24px;
  background:linear-gradient(145deg,#ffffff 0%,#fbf7ff 100%);
  display:grid;
  grid-template-columns:106px 1fr 34px;
  gap:18px;
  align-items:center;
  padding:18px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(124,58,237,.07);
  -webkit-tap-highlight-color:transparent;
}
.cpItem:active{transform:scale(.992);}
.cpItem--presidente{border-color:rgba(37,99,235,.20);background:linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%);box-shadow:0 12px 28px rgba(37,99,235,.06);}
.cpItem--tesorero{border-color:rgba(16,185,129,.22);background:linear-gradient(145deg,#ffffff 0%,#f0fdf8 100%);box-shadow:0 12px 28px rgba(16,185,129,.06);}
.cpItem__icon{
  width:88px;
  height:88px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  background:linear-gradient(145deg,#f5edff,#eef2ff);
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.06);
}
.cpItem--presidente .cpItem__icon{background:linear-gradient(145deg,#eff6ff,#ffffff);}
.cpItem--tesorero .cpItem__icon{background:linear-gradient(145deg,#ecfdf5,#ffffff);}
.cpItem__body{min-width:0;}
.cpItem__label{
  color:#111827;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:950;
}
.cpItem__pill{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:10px;
  padding:6px 12px;
  border-radius:999px;
  color:#6d28d9;
  background:#f3e8ff;
  font-size:16px;
  line-height:1.05;
  font-weight:950;
}
.cpItem--presidente .cpItem__pill{color:#2563eb;background:#dbeafe;}
.cpItem--tesorero .cpItem__pill{color:#059669;background:#d1fae5;}
.cpItem__desc{
  margin-top:10px;
  color:#536179;
  font-size:18px;
  line-height:1.35;
  font-weight:600;
}
.cpItem__chev{
  color:#7c3aed;
  font-size:42px;
  font-weight:950;
  justify-self:end;
}
.cpItem--presidente .cpItem__chev{color:#2563eb;}
.cpItem--tesorero .cpItem__chev{color:#059669;}
.cpCancel{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:22px;
  margin-top:24px;
  background:#f4f6fa;
  color:#667085;
  font-size:19px;
  font-weight:950;
  cursor:pointer;
}
@keyframes cpFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cpSlideUp{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){
  .cpOverlay{padding:16px 14px calc(16px + env(safe-area-inset-bottom));}
  .cpPanel{border-radius:28px;padding:18px;}
  .cpPanel__head{gap:14px;margin-bottom:18px;}
  .cpHeadIcon{width:58px;height:58px;border-radius:21px;font-size:28px;}
  .cpTitle{font-size:28px;}
  .cpSub{font-size:17px;margin-top:7px;}
  .cpClose{width:50px;height:50px;font-size:23px;}
  .cpList{gap:14px;}
  .cpItem{min-height:132px;grid-template-columns:86px 1fr 24px;gap:14px;border-radius:22px;padding:16px;}
  .cpItem__icon{width:74px;height:74px;border-radius:22px;font-size:35px;}
  .cpItem__label{font-size:23px;}
  .cpItem__pill{font-size:14px;padding:5px 10px;}
  .cpItem__desc{font-size:16px;line-height:1.32;}
  .cpItem__chev{font-size:34px;}
}
@media(max-width:390px){
  .cpItem{grid-template-columns:68px 1fr 20px;gap:12px;padding:14px;}
  .cpItem__icon{width:62px;height:62px;border-radius:19px;font-size:30px;}
  .cpItem__label{font-size:21px;}
  .cpItem__desc{font-size:14px;}
}

/* ===== Admin access card ===== */
.authCard--admin{
  border:1px solid rgba(109,40,217,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,241,255,.92));
}
.authCardHead--admin{
  display:flex;
  align-items:center;
  gap:14px;
}
.authIcon--admin{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ede9fe,#ffffff);
  color:#6d28d9;
  box-shadow:0 14px 28px rgba(109,40,217,.10);
}
.adminPanelBtn{
  width:100%;
  margin-top:16px;
  border:0;
  border-radius:22px;
  padding:16px 18px;
  font-weight:950;
  color:#fff;
  font-size:16px;
  background:linear-gradient(135deg,#111827,#4c1d95);
  box-shadow:0 18px 38px rgba(17,24,39,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.adminPanelBtn span{font-size:22px;line-height:1}
.adminHint{
  margin:10px 0 0;
  color:#667085;
  font-weight:800;
  font-size:12px;
  text-align:center;
}