/*
 * 2.8.43.416 - Entrar, crear cuenta y recuperar la contraseña: la propuesta A.
 *
 * Eudes eligió la A del lienzo «Classicspark: acceso y registro» (27/09/2026). Bajo el header público:
 * a la izquierda el panel de marca, #8B001E al 0.9, con el MISMO ancho en las tres pantallas (el de
 * crear cuenta); a la derecha el formulario. En el teléfono el panel queda como franja corta arriba y
 * el formulario sube encima como una hoja.
 *
 * Todo cuelga de `.cs-acceso`: las vistas ya no llevan `auth-page` ni `login-supercontainer`, así que
 * las reglas viejas de `classicspark-auth.css` y `classicspark-unified.css` no las alcanzan. Esta hoja
 * sólo se carga en esas tres páginas (`$isAuthPage` en el header) y va la última.
 *
 * 2.8.43.418 - Simétrica en cualquier ancho. La página se parte en dos mitades iguales (el rojo llega
 * justo al centro) y el contenido se alinea con la caja del header (`.cs-shell`: 1160 / 20 a cada lado):
 * el texto del panel empieza donde el logo y el formulario nunca pasa del borde derecho del botón
 * «Crear perfil». Antes el panel medía 560 + el margen de una caja de 1400 que el header no usa, así
 * que en pantallas grandes el texto quedaba a la izquierda del logo y el formulario flotaba a la
 * derecha del menú. El margen sale de `padding` en %, que en un hijo de grid se mide sobre su mitad:
 * margen = mitad − 580, sin `100vw` (que cuenta la barra de desplazamiento y descuadraba unos píxeles).
 */
body.auth-shell > .cs-acceso { flex: 1 0 auto; }

.cs-acceso {
    --acceso-vino: #8b001e;
    --acceso-rojo: #b9052b;
    --acceso-panel: rgba(139, 0, 30, 0.9);
    --acceso-tinta: #181316;
    --acceso-suave: #5f575b;
    --acceso-linea: #d6cbcf;
    --acceso-papel: #fbf8f5;
    /* Hasta el borde de la caja del header, nunca menos de 40. En %: sobre la mitad donde se usa. */
    --acceso-margen: max(40px, calc(100% - var(--cs-shell, 1160px) / 2));
    /* Del centro de la página al texto y al formulario. */
    --acceso-medio: clamp(32px, 3.5vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    min-height: 680px;
    margin: 0;
    background: var(--acceso-papel);
    color: var(--acceso-tinta);
    font-family: gilroy-regular, Arial, sans-serif;
}
.cs-acceso *, .cs-acceso *::before, .cs-acceso *::after { box-sizing: border-box; }
.cs-acceso [hidden] { display: none !important; }
.cs-acceso a { color: var(--acceso-rojo); font-family: gilroy-semibold, Arial, sans-serif; text-decoration: none; }
.cs-acceso a:hover { color: var(--acceso-vino); text-decoration: underline; }
.cs-acceso a:focus-visible, .cs-acceso button:focus-visible { outline: 3px solid rgba(185, 5, 43, 0.35); outline-offset: 2px; }
.cs-acceso__solo-movil { display: none !important; }

/* ---------------------------------------------------------------- El panel */
.cs-acceso__panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 48px var(--acceso-medio) 48px var(--acceso-margen);
    background: var(--acceso-panel);
    color: #fff;
}
.cs-acceso__pentagrama { position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; pointer-events: none; }
.cs-acceso__panel-cuerpo { position: relative; display: flex; flex-direction: column; gap: 32px; max-width: 432px; }
/* 2.8.43.418 - El texto del panel, a media altura como el formulario (mismo aire arriba y abajo: 48).
   En horizontal sigue empezando en el logo. La nota de crear cuenta va justo debajo del texto, dentro
   del bloque centrado, y el pentagrama baja al borde para no cruzar nada. */
@media (min-width: 901px) {
    .cs-acceso__panel { display: grid; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); row-gap: 0; align-content: stretch; }
    .cs-acceso__panel-cuerpo { grid-row: 2; }
    .cs-acceso__panel > .cs-acceso__panel-nota { grid-row: 3; max-width: 432px; margin-top: 28px; }
}
.cs-acceso .cs-acceso__panel-titulo { margin: 0; color: #fff; font: 400 clamp(34px, 3.1vw, 44px)/1.08 gilroy-bold, Arial, sans-serif; letter-spacing: -0.02em; }
.cs-acceso__rasgos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; color: rgba(255, 255, 255, 0.92); font-size: 18px; line-height: 1.35; }
.cs-acceso__rasgos li { display: flex; gap: 12px; align-items: center; }
.cs-acceso__rasgos svg { flex: none; stroke: #ffc2cf; }
.cs-acceso__panel-nota { position: relative; margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 15px; line-height: 1.5; }
.cs-acceso__candado { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 16px; background: rgba(255, 255, 255, 0.14); color: #fff; }

.cs-acceso__pasos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; color: rgba(255, 255, 255, 0.78); font-size: 17px; }
.cs-acceso__pasos li { display: flex; gap: 14px; align-items: center; }
.cs-acceso__num { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 50%; font-family: gilroy-bold, Arial, sans-serif; font-size: 15px; }
.cs-acceso__pasos li.is-actual { color: #fff; font-family: gilroy-semibold, Arial, sans-serif; }
.cs-acceso__pasos li.is-actual .cs-acceso__num { border-color: #fff; background: #fff; color: var(--acceso-vino); }
.cs-acceso__pasos li.is-hecho .cs-acceso__num { border-color: transparent; background: rgba(255, 255, 255, 0.22); }

/* La franja del teléfono (oculta en escritorio). */
.cs-acceso .cs-acceso__banda-titulo { position: relative; margin: 0; max-width: 300px; color: #fff; font: 400 26px/1.15 gilroy-bold, Arial, sans-serif; letter-spacing: -0.01em; }
.cs-acceso__banda { position: relative; flex-direction: column; gap: 10px; }
.cs-acceso__banda-fila { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.cs-acceso .cs-acceso__volver { display: grid; width: 44px; height: 44px; margin-left: -12px; padding: 0; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
.cs-acceso .cs-acceso__volver:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cs-acceso__banda-rotulo { font-family: gilroy-semibold, Arial, sans-serif; font-size: 16px; }
.cs-acceso__progreso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cs-acceso__progreso span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.32); }
.cs-acceso__progreso span.is-on { background: #fff; }
.cs-acceso__banda-texto { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 14px; }

/* ---------------------------------------------------------------- El formulario */
.cs-acceso__lado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px var(--acceso-margen) 48px var(--acceso-medio); }
.cs-acceso__form, .cs-acceso__paso { width: 100%; max-width: 440px; }
.cs-acceso__paso--ancho { max-width: 680px; }
.cs-acceso__form { display: flex; flex-direction: column; gap: 22px; }
/* El paso 1 lleva `style="display:block"` (lo pone y lo quita `site.js`), así que no puede ser flex: separación con margen. */
.cs-acceso .cs-acceso__paso.cs-acceso__paso--ancho > * + * { margin-top: 24px; }

.cs-acceso__cabeza { display: flex; flex-direction: column; gap: 10px; }
.cs-acceso .cs-acceso__cabeza h1, .cs-acceso .cs-acceso__cabeza h2 { margin: 0; color: var(--acceso-tinta); font: 400 clamp(30px, 2.8vw, 40px)/1.1 gilroy-bold, Arial, sans-serif; letter-spacing: -0.02em; }
.cs-acceso .cs-acceso__cabeza h1:focus, .cs-acceso .cs-acceso__cabeza h2:focus { outline: 0; }
.cs-acceso .cs-acceso__cabeza p { margin: 0; color: var(--acceso-suave); font-size: 17px; line-height: 1.5; }
.cs-acceso .cs-acceso__cabeza p.cs-acceso__antetitulo { color: var(--acceso-rojo); font: 400 13px/1.2 gilroy-bold, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }

.cs-acceso__campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-acceso__etiqueta-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cs-acceso__etiqueta-fila a { font-size: 14px; }
.cs-acceso label { margin: 0; color: var(--acceso-tinta); font: 400 14px/1.3 gilroy-semibold, Arial, sans-serif; }
.cs-acceso .cs-acceso__input {
    display: block;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--acceso-linea);
    border-radius: 12px;
    background: #fff;
    color: var(--acceso-tinta);
    font: 400 16px/1.2 gilroy-regular, Arial, sans-serif;
    box-shadow: none;
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-acceso .cs-acceso__input::placeholder { color: #9a8f93; opacity: 1; }
.cs-acceso .cs-acceso__input:focus { border-color: var(--acceso-rojo); box-shadow: 0 0 0 4px rgba(185, 5, 43, 0.12); }
.cs-acceso__clave { position: relative; }
.cs-acceso .cs-acceso__clave .cs-acceso__input { padding-right: 56px; }
.cs-acceso .cs-acceso__ver { position: absolute; top: 4px; right: 4px; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--acceso-suave); cursor: pointer; }
.cs-acceso .cs-acceso__ver:hover { background: #fff4f6; color: var(--acceso-vino); }
.cs-acceso .cs-acceso__ayuda { margin: 0; color: var(--acceso-suave); font-size: 13px; line-height: 1.4; }
.cs-acceso__pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.cs-acceso .cs-acceso__boton {
    display: flex;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: var(--acceso-rojo);
    color: #fff;
    font: 400 17px/1.2 gilroy-semibold, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cs-acceso .cs-acceso__boton:hover { background: var(--acceso-vino); color: #fff; text-decoration: none; }
.cs-acceso .cs-acceso__boton-sec { display: inline-flex; min-height: 46px; padding: 0 20px; align-items: center; border: 1.5px solid var(--acceso-rojo); border-radius: 12px; background: #fff; color: var(--acceso-rojo); font: 400 15px/1.2 gilroy-semibold, Arial, sans-serif; cursor: pointer; }
.cs-acceso .cs-acceso__boton-sec:hover { background: #fff4f6; color: var(--acceso-vino); }
.cs-acceso .cs-acceso__enlace { display: inline-flex; min-height: 44px; margin: 0; padding: 0 4px; align-items: center; border: 0; background: transparent; color: var(--acceso-rojo); font: 400 15px/1.2 gilroy-semibold, Arial, sans-serif; cursor: pointer; }
.cs-acceso .cs-acceso__enlace:hover { color: var(--acceso-vino); text-decoration: underline; }
.cs-acceso .cs-acceso__legal { margin: 0; color: var(--acceso-suave); font-size: 13.5px; line-height: 1.5; }
.cs-acceso .cs-acceso__pie { margin: 0; color: var(--acceso-suave); font-size: 15px; line-height: 1.5; text-align: center; }
.cs-acceso .cs-acceso__pie--suave { font-size: 14px; }

/* Los perfiles del paso 1: cada tarjeta es un botón que lleva al paso 2. */
/* 2.8.43.418 - Una columna: en media página (unos 480 px) dos tarjetas por fila partían las descripciones en cuatro líneas. */
.cs-acceso__roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cs-acceso .cs-acceso__rol {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 18px 18px 18px 20px;
    border: 1px solid var(--acceso-linea);
    border-radius: 16px;
    background: #fff;
    color: var(--acceso-tinta);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cs-acceso .cs-acceso__rol:hover, .cs-acceso .cs-acceso__rol:focus-visible { border-color: var(--acceso-rojo); background: #fff8f9; box-shadow: 0 0 0 3px rgba(185, 5, 43, 0.12); outline: 0; }
.cs-acceso__rol--ancho { grid-column: 1 / -1; }
.cs-acceso__rol-icono { display: grid; grid-row: 1 / span 2; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #fff0f3; color: var(--acceso-rojo); }
.cs-acceso__rol-nombre { font: 400 18px/1.2 gilroy-bold, Arial, sans-serif; }
.cs-acceso__rol-desc { grid-column: 2; color: var(--acceso-suave); font-size: 14.5px; line-height: 1.4; }
.cs-acceso__rol-flecha { display: grid; grid-row: 1 / span 2; grid-column: 3; color: var(--acceso-rojo); }

.cs-acceso__elegido { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 4px 8px 4px 14px; border: 1px solid #f1c6cf; border-radius: 12px; background: #fff4f6; font-size: 15px; }
.cs-acceso__elegido strong { font-family: gilroy-bold, Arial, sans-serif; font-weight: 400; }

.cs-acceso__foto { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.cs-acceso__foto img { width: 112px; height: 112px; border: 1px solid var(--acceso-linea); border-radius: 50%; background: #fff; object-fit: cover; }

/* «Revisa tu correo» */
.cs-acceso__sobre { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 20px; background: #fff0f3; color: var(--acceso-rojo); }
.cs-acceso__enviado:focus { outline: 0; }
.cs-acceso__enviado strong { color: var(--acceso-tinta); font-family: gilroy-semibold, Arial, sans-serif; font-weight: 400; }
.cs-acceso__consejos { margin: 0; padding: 16px 18px 16px 34px; border-radius: 14px; background: #f4eee9; color: #4d4549; font-size: 14.5px; line-height: 1.5; }
.cs-acceso__consejos li + li { margin-top: 6px; }
.cs-acceso__enviado .cs-acceso__enlace { align-self: center; }

/* ---------------------------------------------------------------- Teléfono */
@media (max-width: 900px) {
    .cs-acceso { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .cs-acceso__solo-escritorio { display: none !important; }
    .cs-acceso__solo-movil { display: flex !important; }
    .cs-acceso p.cs-acceso__solo-movil { display: block !important; }
    .cs-acceso__panel { gap: 0; padding: 20px 20px 44px; }
    .cs-acceso__pentagrama { bottom: -8px; height: 120px; }
    .cs-acceso--entrar .cs-acceso__panel { padding-top: 28px; padding-bottom: 48px; }
    .cs-acceso__lado { position: relative; z-index: 1; justify-content: flex-start; align-items: stretch; gap: 20px; margin-top: -20px; padding: 28px 20px 32px; border-radius: 24px 24px 0 0; background: var(--acceso-papel); }
    .cs-acceso__form, .cs-acceso__paso, .cs-acceso__paso--ancho { max-width: none; }
    .cs-acceso__form { gap: 18px; }
    .cs-acceso .cs-acceso__paso.cs-acceso__paso--ancho > * + * { margin-top: 18px; }
    .cs-acceso .cs-acceso__cabeza h1, .cs-acceso .cs-acceso__cabeza h2 { font-size: 28px; }
    .cs-acceso .cs-acceso__cabeza p { font-size: 16px; }
    .cs-acceso__rol-desc { font-size: 14px; }
    .cs-acceso__nuevo { flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: #f2ebe6; }
    .cs-acceso__nuevo p { margin: 0; color: var(--acceso-suave); font-size: 15px; line-height: 1.5; }
    .cs-acceso .cs-acceso__nuevo p.cs-acceso__nuevo-titulo { color: var(--acceso-tinta); font: 400 16px/1.3 gilroy-semibold, Arial, sans-serif; }
}

@media (max-width: 360px) {
    .cs-acceso__pareja { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-acceso *, .cs-acceso *::before, .cs-acceso *::after { transition: none !important; }
}

/* En el teléfono, crear cuenta lleva texto y barra en la franja: el pentagrama se quita para que no los cruce. */
@media (max-width: 900px) {
    .cs-acceso--registro .cs-acceso__pentagrama { display: none; }
}