/* Cuenta, acceso y creditos de Propia.Video. Mantiene la paleta lima/grafito del estudio. */
.auth-gate{
  position:fixed; inset:0; z-index:1200; display:grid; place-items:safe center; overflow-y:auto;
  min-height:100dvh; padding:clamp(18px,4vw,44px);
  background:#0b0f0d;
  color:#f3f5f1;
}
/* Circulos de luz del fondo: derivan solos (keyframes en transform) y ademas
   siguen al mouse / giroscopio via la propiedad independiente `translate`
   (--par-x/--par-y en [-1,1] las setea account-ui.js; --depth da la
   profundidad de cada capa para el efecto parallax). */
.auth-atmosphere{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.auth-atmosphere i{
  position:absolute; border-radius:50%;
  translate:calc(var(--par-x,0) * var(--depth,20) * 1px) calc(var(--par-y,0) * var(--depth,20) * 1px);
  will-change:transform,translate;
}
.auth-atmosphere i:nth-child(1){
  width:46rem; height:46rem; left:50%; top:-26rem; margin-left:-23rem; --depth:16;
  background:radial-gradient(circle,rgba(217,255,26,.16),rgba(217,255,26,.05) 45%,transparent 68%);
  animation:authGlow1 26s ease-in-out infinite alternate;
}
.auth-atmosphere i:nth-child(2){
  width:32rem; height:32rem; left:-15rem; bottom:-13rem; --depth:34;
  background:radial-gradient(circle,rgba(217,255,26,.09),transparent 68%);
  animation:authGlow2 34s ease-in-out infinite alternate;
}
.auth-atmosphere i:nth-child(3){
  width:24rem; height:24rem; right:-10rem; top:26%; --depth:26;
  background:radial-gradient(circle,rgba(131,144,135,.15),transparent 70%);
  animation:authGlow3 30s ease-in-out infinite alternate;
}
@keyframes authGlow1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3rem,1.6rem,0) scale(1.09)}
  100%{transform:translate3d(-2.4rem,.8rem,0) scale(.96)}
}
@keyframes authGlow2{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.6rem,-2.2rem,0) scale(1.12)}
  100%{transform:translate3d(-1.6rem,1.4rem,0) scale(.94)}
}
@keyframes authGlow3{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.8rem,2rem,0) scale(1.08)}
  100%{transform:translate3d(1.8rem,-1.5rem,0) scale(.95)}
}
@media (prefers-reduced-motion:reduce){
  .auth-atmosphere i{animation:none; translate:none}
}
.auth-gate[hidden]{display:none!important}
/* La landing es publica; el bloqueo aparece recien al abrir la herramienta. */
html[data-mode="web"] .auth-gate{display:none!important}
.auth-gate::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(to bottom,#000,transparent 78%);
}
.auth-card{
  position:relative; z-index:1; width:min(100%,460px); overflow:hidden;
  padding:clamp(26px,6vw,42px); border:1px solid rgba(217,255,26,.18); border-radius:28px;
  background:linear-gradient(145deg,rgba(24,31,27,.96),rgba(13,18,15,.98));
  box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 70px rgba(217,255,26,.06);
}
.auth-card::after{
  content:""; position:absolute; width:170px; aspect-ratio:1; right:-90px; top:-90px;
  border:1px solid rgba(217,255,26,.16); border-radius:50%; box-shadow:0 0 0 42px rgba(217,255,26,.025);
}
.auth-logo{display:flex; align-items:center; gap:0; width:max-content; margin-bottom:32px}
/* El contenedor .brand-emblem DEBE crecer junto con el SVG: si solo se agranda
   el SVG (overflow visible), la P se derrama encima de la "rop". */
.auth-logo .brand-emblem{width:52px; height:58px; flex:0 0 52px}
.auth-logo .brand-p-mark{filter:drop-shadow(0 0 18px rgba(217,255,26,.25))}
.auth-logo .brand-lettering{font-size:1.28rem; letter-spacing:-.045em}
.auth-kicker{margin:0 0 10px; color:#d9ff1a; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase}
.auth-card h1{margin:0; max-width:360px; font-family:var(--ff-display,system-ui); font-size:clamp(2rem,8vw,3rem); line-height:.98; letter-spacing:-.055em}
.auth-copy{margin:18px 0 26px; color:#aab5ae; font-size:.98rem; line-height:1.6}
.auth-note{display:flex; gap:10px; align-items:flex-start; margin:0 0 24px; padding:13px 14px; border:1px solid rgba(217,255,26,.13); border-radius:14px; background:rgba(217,255,26,.055); color:#dfe6df; font-size:.84rem; line-height:1.45}
.auth-note i{flex:0 0 8px; width:8px; height:8px; margin-top:5px; border-radius:50%; background:#d9ff1a; box-shadow:0 0 13px rgba(217,255,26,.75)}
.auth-actions{display:grid; gap:11px}
.auth-provider{
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px;
  border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:0 18px;
  background:#f5f6f3; color:#131815; font:700 .94rem/1 var(--ff-display,system-ui); cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auth-provider.apple{background:#171c19; color:#f4f6f2; border-color:rgba(255,255,255,.16)}
.auth-provider svg{width:21px; height:21px; flex:none}
.auth-provider:disabled{cursor:not-allowed; opacity:.45}
.auth-provider:not(:disabled):hover{transform:translateY(-2px); border-color:rgba(217,255,26,.55); box-shadow:0 12px 32px rgba(0,0,0,.28),0 0 24px rgba(217,255,26,.08)}
.auth-provider:focus-visible{outline:3px solid rgba(217,255,26,.34); outline-offset:3px}
.auth-status{min-height:21px; margin:16px 0 0; color:#aab5ae; text-align:center; font-size:.82rem; line-height:1.45}
.auth-status.error{color:#ffb4a8}
.auth-legal{margin:18px 0 0; color:#78847d; text-align:center; font-size:.72rem; line-height:1.45}

.credits-pill,.account-trigger{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px;
  border:1px solid var(--line); background:rgba(17,23,20,.82); color:var(--ink); cursor:pointer;
}
html.is-authenticated #proBtn,html.is-authenticated #settingsBtn{display:none!important}
.credits-pill{padding:0 13px; border-radius:999px; font-size:.8rem; font-weight:760}
.credits-pill svg{width:16px; height:16px; color:var(--brand)}
.credits-pill b{color:var(--brand); font-variant-numeric:tabular-nums}
.account-trigger{width:44px; padding:0; overflow:hidden; border-radius:50%}
.account-trigger img{width:100%; height:100%; object-fit:cover}
.account-trigger .account-initial{display:grid; place-items:center; width:100%; height:100%; background:rgba(217,255,26,.12); color:var(--brand); font-weight:800}
.credits-pill:hover,.account-trigger:hover{border-color:rgba(217,255,26,.5); box-shadow:0 0 22px rgba(217,255,26,.08)}
.credits-pill:focus-visible,.account-trigger:focus-visible{outline:3px solid rgba(217,255,26,.3); outline-offset:2px}

#accountSheet{width:min(100% - 20px,590px); max-height:min(88dvh,820px); overflow:auto}
.account-identity{display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center; margin:18px 0; padding:14px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025)}
.account-avatar-large{display:grid; place-items:center; width:54px; height:54px; overflow:hidden; border:1px solid rgba(217,255,26,.22); border-radius:16px; background:rgba(217,255,26,.08); color:var(--brand); font-weight:850; font-size:1.2rem}
.account-avatar-large img{width:100%; height:100%; object-fit:cover}
.account-identity b,.account-identity span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.account-identity span{margin-top:3px; color:var(--ink-3); font-size:.8rem}
.role-chip{padding:6px 9px; border-radius:999px; background:rgba(217,255,26,.1); color:var(--brand); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.wallet-card{position:relative; overflow:hidden; padding:20px; border:1px solid rgba(217,255,26,.2); border-radius:18px; background:linear-gradient(135deg,rgba(217,255,26,.105),rgba(255,255,255,.025) 62%)}
.wallet-card::after{content:""; position:absolute; width:150px; height:150px; right:-70px; top:-85px; border:1px solid rgba(217,255,26,.18); border-radius:50%}
.wallet-label{display:block; color:var(--ink-3); font-size:.72rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase}
.wallet-balance{display:flex; align-items:baseline; gap:8px; margin:5px 0 8px; font-family:var(--ff-display,system-ui)}
.wallet-balance strong{color:var(--brand); font-size:2.7rem; letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.wallet-balance span{color:var(--ink-2); font-size:.94rem}
.wallet-rule{margin:0; max-width:390px; color:var(--ink-2); font-size:.8rem; line-height:1.45}
.account-section{margin-top:22px}
.account-section-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px}
.account-section-head h4{margin:0; font-family:var(--ff-display,system-ui); font-size:.95rem}
.account-section-head span{color:var(--ink-3); font-size:.72rem}
.credit-packages{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}
.credit-package{display:flex; flex-direction:column; align-items:flex-start; min-height:126px; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); color:var(--ink); text-align:left; cursor:pointer}
.credit-package:hover:not(:disabled){border-color:rgba(217,255,26,.42); background:rgba(217,255,26,.045)}
.credit-package:disabled{cursor:not-allowed; opacity:.48}
.credit-package b{font-size:1.18rem; color:var(--brand)}
.credit-package span{margin-top:3px; color:var(--ink-3); font-size:.72rem; line-height:1.35}
.credit-package strong{margin-top:auto; font-size:.84rem}
.billing-note{margin:9px 0 0; color:var(--ink-3); font-size:.74rem; line-height:1.4}
.ledger-list{display:grid; gap:6px; margin:0; padding:0; list-style:none}
.ledger-item{display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding:10px 2px; border-bottom:1px solid var(--line)}
.ledger-item b{font-size:.82rem}.ledger-item time{grid-column:1; color:var(--ink-3); font-size:.69rem}
.ledger-item strong{grid-column:2; grid-row:1/3; align-self:center; font-variant-numeric:tabular-nums}
.ledger-item strong.plus{color:var(--brand)}.ledger-item strong.minus{color:#ffb4a8}
.account-actions{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px}
.account-actions .danger{color:#ffb4a8}

.admin-panel{margin-top:24px; padding-top:20px; border-top:1px solid rgba(217,255,26,.16)}
.admin-dashboard-link{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; padding:14px 15px; border:1px solid rgba(217,255,26,.24); border-radius:15px; background:linear-gradient(120deg,rgba(217,255,26,.105),rgba(217,255,26,.025)); color:var(--ink); text-decoration:none; transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
.admin-dashboard-link:hover,.admin-dashboard-link:focus-visible{border-color:rgba(217,255,26,.58); background:linear-gradient(120deg,rgba(217,255,26,.16),rgba(217,255,26,.045)); box-shadow:0 10px 34px rgba(181,255,0,.08); transform:translateY(-1px); outline:none}
.admin-dashboard-link b,.admin-dashboard-link small{display:block}.admin-dashboard-link b{font-size:.86rem}.admin-dashboard-link small{margin-top:3px; color:var(--ink-3); font-size:.72rem}.admin-dashboard-link>span:last-child{flex:0 0 auto; color:var(--brand); font-size:.76rem; font-weight:800}
.admin-users{display:grid; gap:8px}
.admin-user{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02)}
.admin-user b,.admin-user small{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.admin-user small{margin-top:3px; color:var(--ink-3)}
.admin-user-actions{display:flex; gap:5px}
.admin-user-actions button{min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer}
.admin-user-actions button:hover{border-color:rgba(217,255,26,.42); color:var(--brand)}

.credit-cost-inline{color:var(--brand); font-weight:760}

@media(max-width:560px){
  .auth-card{border-radius:22px}
  .credits-pill{padding:0 10px}.credits-pill .credits-word{display:none}
  #proVersionBtn,#proBtn{display:none!important}
  .credit-packages{grid-template-columns:1fr}
  .credit-package{min-height:82px; display:grid; grid-template-columns:1fr auto; align-items:center}
  .credit-package span{grid-column:1}.credit-package strong{grid-column:2; grid-row:1/3}
  .account-actions{grid-template-columns:1fr}
}
@media(max-height:650px){.auth-gate{place-items:start center}.auth-card{margin:auto 0}}
@media(prefers-reduced-motion:reduce){.auth-provider,.admin-dashboard-link{transition:none}.admin-dashboard-link:hover,.admin-dashboard-link:focus-visible{transform:none}}