/* ARCHIVO GENERADO — no editar a mano.
   Se genera con: php tools/scope-acceso-css.php
   Fuente: assets/acceso/acceso.css (entregable del cliente, intacto).
   Cada selector se escopa bajo .acceso-flow (y body.acceso-page) para que
   el tema y Elementor no pisen los componentes de nombre genérico. */
/* =========================================================================
   Estudio Música — Pantallas de Acceso
   Hoja de estilos autocontenida (fuentes + tokens + componentes).
   Solo se incluyen los tokens y las fuentes que usan las pantallas de acceso.
   La paleta y tipografía completas del sistema están en tokens.css.
   ========================================================================= */

/* ---- Fuentes (self-hosted, sin CDN) ------------------------------------ */
@font-face { font-family: "DynaPuff"; font-weight: 400; font-style: normal; font-display: swap; src: url("./fonts/DynaPuff-Regular.ttf") format("truetype"); }
@font-face { font-family: "DynaPuff"; font-weight: 500; font-style: normal; font-display: swap; src: url("./fonts/DynaPuff-Medium.ttf") format("truetype"); }
@font-face { font-family: "DynaPuff"; font-weight: 600; font-style: normal; font-display: swap; src: url("./fonts/DynaPuff-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "DynaPuff"; font-weight: 700; font-style: normal; font-display: swap; src: url("./fonts/DynaPuff-Bold.ttf") format("truetype"); }

@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-style: normal; font-display: swap; src: url("./fonts/BeVietnamPro-Regular.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-style: normal; font-display: swap; src: url("./fonts/BeVietnamPro-Medium.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-style: normal; font-display: swap; src: url("./fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-style: normal; font-display: swap; src: url("./fonts/BeVietnamPro-Bold.ttf") format("truetype"); }

/* ---- Tokens (subconjunto usado en acceso) ------------------------------ */
:root {
  --em-yellow:        #F4D738;
  --em-navy:          #1F3F5F;
  --em-navy-deep:     #0F2A45;
  --em-navy-soft:     #4F6580;
  --em-orange:        #F07330;
  --em-orange-deep:   #C75A1F;
  --em-cream:         #FAF6EE;
  --em-paper:         #FFFFFF;
  --em-sky-soft:      #C8DCEF;
  --em-lavender-soft: #E4E4F2;

  --border-default:   #E5DDC9;

  --font-display: "DynaPuff", system-ui, sans-serif;
  --font-body:    "Be Vietnam Pro", system-ui, sans-serif;

  --radius-sm:   10px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow-stamp:    4px 4px 0 0 var(--em-navy);
  --shadow-stamp-sm: 2px 2px 0 0 var(--em-navy);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-slow: 420ms;
}


/* ---- Base -------------------------------------------------------------- */
.acceso-flow,
.acceso-flow * { box-sizing: border-box;
}

body.acceso-page { margin: 0; padding: 0;
}

body.acceso-page {
  font-family: var(--font-body);
  color: var(--em-navy);
  background: var(--em-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* Cambio de pantalla: solo una visible a la vez */
.acceso-flow .acceso-screen { display: none;
}

.acceso-flow .acceso-screen.is-active { display: flex;
}


@keyframes emScreenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {

.acceso-flow .acceso-screen { animation: none !important;
}

}


/* ---- Layout de pantalla ------------------------------------------------ */
.acceso-flow .acceso-screen {
  min-height: 100vh;
  flex-direction: column;
  animation: emScreenIn var(--dur-slow) var(--ease-out);
}

.acceso-flow .acceso-screen--entrada { background: var(--em-cream);
}

.acceso-flow .acceso-screen--login { background: var(--em-sky-soft);
}

.acceso-flow .acceso-screen--signup { background: var(--em-lavender-soft);
}

.acceso-flow .acceso-header { width: 100%;
}

.acceso-flow .acceso-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1200px; margin: 0 auto; padding: 13px 32px;
}

.acceso-flow .acceso-header__left { display: flex; align-items: center; gap: 28px;
}

.acceso-flow .acceso-logo { display: flex; align-items: center;
}

.acceso-flow .acceso-logo img { height: 34px; width: auto; display: block;
}

.acceso-flow .acceso-back {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--em-navy); padding: 8px 14px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast);
}

.acceso-flow .acceso-back:hover { background: rgba(255,255,255,0.55);
}


/* Indicador de pasos (Acceso · Inscripción) */
.acceso-flow .acceso-steps { display: flex; align-items: center; gap: 16px;
}

.acceso-flow .acceso-step { display: flex; align-items: center; gap: 8px;
}

.acceso-flow .acceso-step__bar { width: 56px; height: 5px; border-radius: var(--radius-pill);
}

.acceso-flow .acceso-step__label { font-family: var(--font-body); font-size: 12px;
}

.acceso-flow .acceso-step--on  .acceso-step__bar { background: var(--em-navy);
}

.acceso-flow .acceso-step--on  .acceso-step__label { color: var(--em-navy); font-weight: 700;
}

.acceso-flow .acceso-step--off .acceso-step__bar { background: rgba(31,63,95,0.18);
}

.acceso-flow .acceso-step--off .acceso-step__label { color: rgba(31,63,95,0.55); font-weight: 500;
}


/* ---- Cuerpo: ilustración + tarjeta ------------------------------------ */
.acceso-flow .acceso-main {
  flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  align-items: center; max-width: 1200px; width: 100%; margin: 0 auto;
  padding: 24px 48px 64px;
}

.acceso-flow .acceso-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
}

.acceso-flow .acceso-hero img { width: 400px; max-width: 100%; height: auto;
}

.acceso-flow .acceso-hero h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 38px;
  line-height: 1.1; color: var(--em-navy); margin: 8px 0 0; letter-spacing: -0.015em;
}

.acceso-flow .acceso-hero p {
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  color: var(--em-navy); margin: 8px 0 0; max-width: 420px;
}

.acceso-flow .acceso-card {
  background: var(--em-paper); border: 2px solid var(--em-navy);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-stamp);
  padding: 40px 44px; max-width: 460px; width: 100%; justify-self: center;
}

.acceso-flow .acceso-card h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 26px;
  color: var(--em-navy); margin: 0 0 10px; text-align: center; letter-spacing: -0.01em;
}

.acceso-flow .acceso-card__sub {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--em-navy-soft); margin: 0 0 28px; text-align: center;
}


/* ---- Botones ----------------------------------------------------------- */
.acceso-flow .btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 20px; border-radius: var(--radius-pill);
  border: 2px solid var(--em-navy); cursor: pointer;
  box-shadow: var(--shadow-stamp-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.acceso-flow .btn:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-stamp);
}

.acceso-flow .btn:active { transform: translate(2px,2px); box-shadow: none;
}

.acceso-flow .btn--google {
  background: var(--em-paper);
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--em-navy);
}

.acceso-flow .btn--primary {
  background: var(--em-yellow);
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--em-navy);
}


/* ---- Separador "o" ----------------------------------------------------- */
.acceso-flow .acceso-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0;
}

.acceso-flow .acceso-divider__line { flex: 1; height: 1.5px; background: var(--border-default);
}

.acceso-flow .acceso-divider span { font-family: var(--font-body); font-size: 13px; color: var(--em-navy-soft);
}


/* ---- Campos ------------------------------------------------------------ */
.acceso-flow .field { display: block;
}

.acceso-flow .field__label {
  display: block; font-family: var(--font-body); font-size: 13px;
  font-weight: 600; color: var(--em-navy); margin: 0 0 6px;
}

.acceso-flow .field__label--mt { margin-top: 16px;
}

.acceso-flow .input {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--em-paper);
  font-family: var(--font-body); font-size: 16px; color: var(--em-navy);
  outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.acceso-flow .input:focus { border-color: var(--em-navy); box-shadow: 0 0 0 3px rgba(31,63,95,0.08);
}

.acceso-flow .input-wrap { position: relative;
}

.acceso-flow .input--pass { padding-right: 48px;
}

.acceso-flow .toggle-pass {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 8px; display: flex;
  color: var(--em-navy-soft); border-radius: var(--radius-pill);
}

.acceso-flow .toggle-pass:hover { color: var(--em-navy);
}

.acceso-flow .btn--primary.btn--submit { margin-top: 20px;
}


/* Chip de email confirmado (login / signup) */
.acceso-flow .email-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--em-cream); margin: 0 0 20px;
}

.acceso-flow .email-chip__id { display: flex; align-items: center; gap: 10px; min-width: 0;
}

.acceso-flow .email-chip__addr {
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--em-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acceso-flow .link-btn {
  background: none; border: none; cursor: pointer; padding: 0; flex: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--em-orange);
}

.acceso-flow .link-btn:hover { text-decoration: underline;
}

.acceso-flow .forgot {
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--em-orange); text-decoration: none; display: inline-block; margin-top: 10px;
}

.acceso-flow .forgot:hover { text-decoration: underline; color: var(--em-orange-deep);
}


/* Aviso ♪ en crear cuenta */
.acceso-flow .note {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  border-radius: var(--radius-sm); background: var(--em-sky-soft); margin: 0 0 20px;
}

.acceso-flow .note__icon { font-family: var(--font-body); font-size: 15px; color: var(--em-navy); flex: none; line-height: 1.5;
}

.acceso-flow .note p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--em-navy); margin: 0;
}

.acceso-flow .legal {
  font-family: var(--font-body); font-size: 12px; line-height: 1.6;
  color: var(--em-navy-soft); text-align: center; margin: 24px 0 0;
}

.acceso-flow .legal a { color: var(--em-orange); font-weight: 600; text-decoration: none;
}

.acceso-flow .legal a:hover { text-decoration: underline;
}

.acceso-flow .switch-line {
  font-family: var(--font-body); font-size: 13px; text-align: center;
  margin: 20px 0 0; color: var(--em-navy-soft);
}


/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {

.acceso-flow .acceso-main { grid-template-columns: 1fr; gap: 24px; padding: 16px 24px 48px;
}

.acceso-flow .acceso-hero { order: -1;
}

.acceso-flow .acceso-hero img { width: 280px;
}

.acceso-flow .acceso-hero h1 { font-size: 30px;
}

.acceso-flow .acceso-card { padding: 32px 28px;
}

}