/* ============================================================
   ACTORES S.C.G — INICIAR SESIÓN / ÁREA DE SOCIOS (iniciar-sesion.html)
   Pantalla dividida: panel de marca (naranja) + formulario (blanco).
   Standalone (sin nav/footer). Se carga junto a site.css.
   ============================================================ */
body{background:var(--paper)}
.auth{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr}

/* ---- Panel de marca (izquierda) ---- */
.auth-side{position:relative; overflow:hidden; background:var(--orange); color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:clamp(34px,4vw,60px)}
.auth-side .spiral{left:-160px; bottom:-180px; width:460px; height:460px; opacity:.16}
.auth-side .spiral path{stroke:#fff}
.auth-side > *{position:relative; z-index:2}
.auth-brand{font-family:var(--font-display); font-weight:700; letter-spacing:.34em; font-size:17px; padding-left:.34em; color:var(--ink)}
.auth-brand .o{color:#fff}
.as-mid{max-width:30ch}
.as-mid .lab{color:var(--ink); margin-bottom:16px}
.as-mid .lab::before{background:var(--ink)}
.as-mid h1{font-family:var(--font-display); font-weight:600; font-size:clamp(34px,4.4vw,56px); line-height:1; letter-spacing:-.02em; margin:0; color:var(--ink)}
.as-mid h1 em{font-style:italic; color:#fff; font-weight:500}
.as-mid p{margin:20px 0 26px; font-size:17px; font-weight:500; color:rgba(18,17,15,.82); max-width:38ch}
.as-points{display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0}
.as-points li{display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:600; color:var(--ink)}
.as-points li svg{flex:0 0 auto; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--ink); color:var(--orange); fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.auth-side .as-foot{font-family:var(--font-display); font-weight:500; font-size:16px; color:rgba(18,17,15,.72)}

/* ---- Formulario (derecha) ---- */
.auth-main{display:flex; align-items:center; justify-content:center; padding:clamp(28px,4vw,60px); background:var(--white)}
.auth-card{width:100%; max-width:404px}
.auth-card .back{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--g2); margin-bottom:34px; transition:color .2s}
.auth-card .back:hover{color:var(--accent)}
.auth-card h2{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,34px); line-height:1.05; margin:0 0 8px; color:var(--ink)}
.auth-card .sub{font-size:15px; color:var(--g2); margin:0 0 28px}

.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--g2); margin-bottom:7px}
.inp{position:relative}
.field input{width:100%; height:50px; padding:0 15px; border:1px solid var(--line); border-radius:12px;
  font-family:var(--font-ui); font-size:15px; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s}
.field.pwd input{padding-right:48px}
.field input::placeholder{color:var(--g1)}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(90,90,90,.15)}
.inp .toggle{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--g2); border-radius:9px}
.inp .toggle:hover{color:var(--ink); background:var(--paper)}
.inp .toggle svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.inp .toggle .off{display:none}
.inp .toggle.on .on{display:none} .inp .toggle.on .off{display:block}

.field-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 24px}
.remember{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--g2); cursor:pointer}
.remember input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.forgot{font-size:13.5px; font-weight:600; color:var(--accent)}
.forgot:hover{text-decoration:underline}

.auth-card .btn-full{width:100%; justify-content:center; padding:15px}
.demo-note2{display:none; margin-top:16px; font-size:13px; font-weight:500; color:var(--g2); background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.demo-note2.show{display:block}
.demo-note2 b{color:var(--ink)}

.auth-sep{display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--g1); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.auth-sep::before, .auth-sep::after{content:""; height:1px; flex:1; background:var(--line)}
.auth-alt{text-align:center; font-size:14.5px; color:var(--g2)}
.auth-alt a{font-weight:700; color:var(--accent)}
.auth-alt a:hover{text-decoration:underline}

/* ---- Responsive ---- */
@media(max-width:860px){
  .auth{grid-template-columns:1fr; min-height:auto}
  .auth-side{min-height:auto; gap:26px; padding:clamp(30px,7vw,44px)}
  .as-points, .auth-side .as-foot{display:none}
  .as-mid p{margin-bottom:0}
  .auth-main{min-height:auto; padding:clamp(30px,8vw,52px) 24px 56px}
}