/* Pantalles sense sessio (entrar, restablir, privacitat). Pla 9: la maqueta A2 «Carbón» (pantalles 505-533).
   Carrega despres d'app.css: els tokens (--bg-1, --ink, --line-2, --input-bg...) i el boto del mode (.tema-btn) venen d'alla.
   El quadre de l'esquerra es fosc en tots dos modes, com a la maqueta: els seus colors son fixos. */
body.auth{
  margin:0; min-height:100vh; min-height:100dvh;
  display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--bg-1); color:var(--ink);
}
.auth-art{position:relative; overflow:hidden; background:#0B1216; color:#F3ECE1; padding:48px 56px;
  display:flex; flex-direction:column; justify-content:space-between; min-height:100%}
.auth-art::before{content:""; position:absolute; inset:-20%;
  background:radial-gradient(600px 420px at 70% 75%,rgba(235,94,31,.28),transparent 60%),
             radial-gradient(500px 400px at 20% 10%,rgba(81,18,25,.45),transparent 60%)}
.auth-art > *{position:relative}
.auth-art-logo{width:150px; height:44px; background-color:#F3ECE1;
  -webkit-mask:url(josper-logo.svg) no-repeat left center/contain; mask:url(josper-logo.svg) no-repeat left center/contain}
.auth-art .auth-flama{position:absolute; right:-60px; bottom:-40px; width:520px; height:746px; background-color:rgba(235,94,31,.12);
  -webkit-mask:url(josper-flama.svg) no-repeat center/contain; mask:url(josper-flama.svg) no-repeat center/contain}
.auth-lema{font-weight:200; font-size:48px; line-height:1; letter-spacing:-.04em; max-width:420px; margin:0}
.nowrap{white-space:nowrap}
.auth-casa{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#9A9184}

.auth-side{display:flex; flex-direction:column; justify-content:center; align-items:center; padding:48px 24px 80px; position:relative; min-width:0}
.auth-side > .tema-btn{position:absolute; top:28px; right:28px}
.auth-card{width:100%; max-width:380px}
.auth-logo{display:none; width:140px; height:40px; margin:0 0 40px; background-color:var(--ink);
  -webkit-mask:url(josper-logo.svg) no-repeat left center/contain; mask:url(josper-logo.svg) no-repeat left center/contain}
.auth-card h1{font-weight:200; font-size:48px; letter-spacing:-.03em; line-height:1; margin:0}
.auth-card h2{font-weight:400; font-size:19px; letter-spacing:-.01em; margin:34px 0 8px}
.auth-card p{margin:0 0 12px; color:var(--ink-2); font-size:14.5px; line-height:1.6}
.auth-card p.auth-ajuda{font-family:var(--ital); font-style:italic; color:var(--ink-3); font-size:14.5px; margin:12px 0 16px}
.auth-card form{display:flex; flex-direction:column; gap:18px}

.camp{display:flex; flex-direction:column; gap:7px}
.camp label{font-size:11.5px; color:var(--ink-3); font-weight:400}
.camp input{
  width:100%; min-height:44px; padding:0 16px;
  font-size:16px; font-weight:300; color:var(--ink);   /* 16 px: iOS no fa zoom en enfocar */
  border:1px solid var(--line-2); border-radius:12px; background:var(--input-bg); outline:none;
}
.camp input:focus{border-color:var(--ink-3)}
.camp input:focus-visible{outline:2px solid var(--ink-2); outline-offset:2px}   /* teclat: contorn sòlid, sense halo */

/* El boto principal de la maqueta (.btn.pri): tinta, a tota l'amplada */
.auth-boto{
  min-height:48px; padding:0 18px; margin-top:8px; width:100%;
  background:var(--ink); color:var(--bg-1); border:1px solid var(--ink); border-radius:999px;
  font-size:14px; font-weight:400;
}
.auth-boto:hover{background:var(--ink-2); border-color:var(--ink-2)}
.auth-boto:disabled{opacity:.6; cursor:default}

.auth-enllac{
  display:inline-block; align-self:center; padding:10px 4px;      /* area tactil comoda */
  font-size:13px; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-2);
  text-underline-offset:5px;
}
.auth-enllac:hover{color:var(--ink); text-decoration-color:var(--ink-3)}

.auth-card .msg{
  margin:18px 0 0; padding:12px 14px; border-radius:10px; background:var(--track);
  font-size:13px; line-height:1.45; color:var(--ember-txt); overflow-wrap:anywhere;
}
.auth-card .msg:empty{display:none}
.auth-card .msg.ok{color:var(--ink-2)}
.auth-card .msg.ok:not(:empty){display:flex; gap:10px; align-items:center}   /* buit, el :empty de dalt l'amaga */
/* el «fet» de la maqueta (pantalles 529-530): una marca en el verd --ok, la icona ve d'app.css */
.auth-card .msg.ok::before{content:""; width:16px; height:16px; flex:none; background:var(--ok);
  -webkit-mask:var(--ic-check) center/contain no-repeat; mask:var(--ic-check) center/contain no-repeat}
.auth-card .msg a{color:var(--ink)}

.auth-peu{position:absolute; bottom:26px; left:0; right:0; font-size:12px; color:var(--ink-3); text-align:center}
.auth-peu a{color:var(--ink-3)}

/* Privacitat: una sola columna de lectura, amb el logo i el boto del mode */
.auth-side.pagina-text{grid-column:1/-1; justify-content:flex-start; padding:96px 24px 72px}
.pagina-text .auth-logo{display:block}
.pagina-text .auth-card{max-width:680px}

@media (max-width:760px){
  body.auth{grid-template-columns:minmax(0,1fr)}
  .auth-art{display:none}
  .auth-logo{display:block}
  .auth-card h1{font-size:42px}
  .auth-side{padding:72px 20px 80px}
  .auth-side > .tema-btn{top:16px; right:16px; width:44px; height:44px}
}