/* The customer account pages (/cuenta/). Colours, type, spacing and radii are the site's own tokens (style.css);
   nothing is redefined here. One column on a phone; the account view opens to two from 900px. */
.acct-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--black);color:var(--off-white);}

.acct-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px 20px;border-bottom:1px solid var(--line);
  padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
.acct-brand{display:block;border-radius:6px;flex:none;}
.acct-brand img{display:block;height:44px;width:auto;}
.acct-top-ctl{display:flex;align-items:center;gap:var(--space-2);min-width:0;}
.acct-ctl{min-width:44px;height:44px;padding:0 12px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(244,243,240,.05);color:var(--off-white);font:inherit;font-size:.8125rem;font-weight:650;letter-spacing:.04em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:border-color var(--dur-2) var(--ease-out-quart),color var(--dur-2) var(--ease-out-quart);}
@media (hover:hover){.acct-ctl:hover{border-color:var(--gold);color:var(--gold-soft);}}

.acct-main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:var(--space-6) 20px var(--space-8);
  padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
.acct-main:focus{outline:none;}
.acct-note{color:var(--text-dim);}

/* A single form or message: sign in, sign up, check email, forgot, reset, verify. */
.acct-card{max-width:460px;margin:0 auto;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--charcoal);}
.acct-card h1,.acct-head h1{font-size:var(--step-2);margin:0 0 var(--space-2);}
.acct-lead{margin:0 0 var(--space-5);color:var(--text-dim);font-size:var(--step-0);line-height:1.5;}
.acct-card p{line-height:1.5;}

.acct-form{display:grid;gap:var(--space-4);}
.acct-field{display:grid;gap:6px;min-width:0;}
.acct-field label{font-size:var(--step--1);font-weight:600;color:var(--off-white);}
.acct-field input{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--black);color:var(--off-white);
  font:inherit;font-size:1rem;}
.acct-field input:focus-visible{border-color:var(--gold);box-shadow:var(--focus-ring);border-radius:var(--radius-sm);}
.acct-field input[readonly]{color:var(--text-dim);background:var(--charcoal-2);}
.acct-field input[aria-invalid="true"]{border-color:#e0786c;}
.acct-hint{margin:0;font-size:var(--step--1);color:var(--text-dim);line-height:1.4;}
.acct-error{margin:0;font-size:var(--step--1);color:#f0a096;line-height:1.4;}

.acct-btn{min-height:48px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);border:1.5px solid transparent;
  font:inherit;font-weight:650;font-size:1rem;text-decoration:none;cursor:pointer;transition:background var(--dur-2) var(--ease-out-quart),border-color var(--dur-2) var(--ease-out-quart);}
.acct-btn--main{background:var(--gold);color:var(--gold-ink);}
.acct-btn--quiet{background:transparent;border-color:var(--line-strong);color:var(--off-white);}
.acct-btn--small{min-height:44px;padding:8px 14px;font-size:var(--step--1);}
.acct-btn:disabled{background:var(--charcoal-2);border-color:var(--line);color:var(--text-dim);cursor:not-allowed;}
@media (hover:hover){
  .acct-btn--main:not(:disabled):hover{background:var(--gold-soft);}
  .acct-btn--quiet:not(:disabled):hover{border-color:var(--gold);}
}
.acct-form > .acct-btn{width:100%;}

.acct-links{display:grid;gap:var(--space-2);margin:var(--space-5) 0 0;padding:0;list-style:none;color:var(--text-dim);font-size:var(--step--1);}
.acct-link{display:inline-block;padding:10px 0;margin:-10px 0;background:none;border:0;color:var(--gold-soft);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
@media (hover:hover){.acct-link:hover{color:var(--off-white);}}

/* What a request answered: a failure, a confirmation, a notice. */
.acct-msg{margin:0;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--charcoal-2);font-size:var(--step--1);line-height:1.45;}
.acct-msg:empty{display:none;}
.acct-msg[data-kind="error"]{border-color:rgba(224,120,108,.6);color:#f6c1ba;}
.acct-msg[data-kind="ok"]{border-color:rgba(184,149,80,.55);color:var(--gold-soft);}
.acct-card > .acct-msg,.acct-dash > .acct-msg{margin-bottom:var(--space-4);}

/* The account view. */
.acct-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);}
.acct-head h1{margin:0;}
.acct-head p{margin:4px 0 0;color:var(--text-dim);font-size:var(--step--1);overflow-wrap:anywhere;}
.acct-head-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.acct-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5);padding:14px 16px;
  border:1px solid rgba(184,149,80,.55);border-radius:var(--radius-md);background:rgba(184,149,80,.08);}
.acct-banner p{margin:0;flex:1 1 260px;line-height:1.45;}
.acct-banner .acct-msg{flex:1 1 100%;}

.acct-grid{display:grid;gap:var(--space-5);}
.acct-panel{min-width:0;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--charcoal);}
.acct-panel h2{margin:0 0 var(--space-4);font-size:var(--step-1);}
.acct-panel h3{margin:var(--space-5) 0 var(--space-3);font-size:var(--step-0);font-weight:650;}
.acct-panel > .acct-lead{margin-bottom:var(--space-4);font-size:var(--step--1);}
.acct-empty{margin:0;color:var(--text-dim);line-height:1.5;}
.acct-panel .acct-form .acct-btn{width:auto;justify-self:start;}
@media (min-width:900px){
  .acct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;}
  .acct-panel--wide{grid-column:1 / -1;}
}

.acct-list{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none;}
.acct-row{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--charcoal-2);min-width:0;}
.acct-row-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;}
.acct-row-title{margin:0;font-weight:650;overflow-wrap:anywhere;}
.acct-row-sub{margin:0;color:var(--text-dim);font-size:var(--step--1);line-height:1.45;overflow-wrap:anywhere;}
.acct-pill{flex:none;padding:3px 10px;border-radius:999px;border:1px solid var(--line-strong);font-size:.75rem;font-weight:650;letter-spacing:.03em;color:var(--text-dim);}
.acct-pill[data-status="confirmed"],.acct-pill[data-status="available"],.acct-pill[data-status="qualified"],.acct-pill[data-status="completed"]{border-color:rgba(184,149,80,.6);color:var(--gold-soft);}
.acct-pill[data-status="cancelled"],.acct-pill[data-status="void"]{text-decoration:line-through;}

.acct-code{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);}
.acct-code-value{padding:10px 16px;border:1.5px dashed var(--gold);border-radius:var(--radius-sm);font-size:var(--step-1);font-weight:650;letter-spacing:.14em;color:var(--gold-soft);user-select:all;}
.acct-share{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3);}
.acct-total{margin:0 0 var(--space-3);font-size:var(--step-1);font-weight:650;color:var(--gold-soft);}
/* The referral totals: what was earned, and under it the estimate of what is pending, quieter and with its condition. */
.acct-totals{display:grid;gap:4px;margin:0 0 var(--space-4);}
.acct-totals .acct-total{margin:0;font-size:var(--step-0);}
.acct-total--pending{color:var(--off-white);font-weight:600;}
.acct-row-amount{margin:0;font-size:var(--step--1);font-weight:600;line-height:1.45;color:var(--gold-soft);overflow-wrap:anywhere;}
.acct-row-amount[data-kind="pending"]{color:var(--text-dim);}
.acct-panel h2:focus{outline:none;box-shadow:none;}

@media (max-width:520px){
  .acct-main{padding-top:var(--space-5);}
  .acct-card,.acct-panel{padding:var(--space-4);}
  .acct-brand img{height:38px;}
  .acct-head-actions{width:100%;}
  .acct-head-actions .acct-btn{flex:1 1 auto;}
  .acct-share .acct-btn{flex:1 1 auto;}
}
@media (prefers-reduced-motion:reduce){.acct-ctl,.acct-btn{transition:none;}}
