/* ══════════════════════════════════════════════════════════════════════════════
   Lactisoft · las pantallas de acceso (entrar, registrarse, recuperar)

   ═══ POR QUÉ UNA HOJA APARTE ═══

   Porque estas pantallas son las únicas del sistema que ve alguien que todavía no
   es cliente, y son las únicas con una maqueta de dos columnas. Meter esto en
   `lactisoft.css` haría que TODO el panel —que se abre cincuenta veces al día en
   la tablet del mostrador— cargue el CSS de un login que sólo se ve una vez.

   Las variables de color, los botones y los campos NO se repiten aquí: salen de
   `lactisoft.css`, que se sigue cargando antes. Esta hoja es sólo la maqueta.

   ═══ LA MAQUETA ═══

   Dos columnas: el formulario a la izquierda, la imagen a la derecha. Debajo de
   960 px la imagen DESAPARECE del todo en lugar de encogerse o irse arriba: en un
   teléfono, una foto de 200 px de alto empuja el formulario fuera de la pantalla y
   obliga a hacer scroll para llegar al campo del correo. La imagen es lo primero
   que sobra cuando falta sitio.
   ══════════════════════════════════════════════════════════════════════════════ */

.acceso {
    min-height: var(--alto-util, 100vh);
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 961px) {
    .acceso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

/* ── Columna del formulario ────────────────────────────────────────────────── */

.acceso-forma {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 34px 20px 26px;
    background: var(--leche);
}

.acceso-caja { width: 100%; max-width: 424px; }
.acceso-caja.ancha { max-width: 560px; }

.acceso-marca {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 26px;
}
.acceso-marca img { width: 34px; height: auto; }
.acceso-marca .nombre {
    font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 118;
    font-weight: 900; font-size: 1.28rem; color: var(--petroleo); letter-spacing: -.02em;
}
.acceso-marca .nombre span { color: var(--mantequilla); }

.acceso-titulo {
    font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 108;
    font-weight: 800; letter-spacing: -.024em;
    font-size: 1.62rem; line-height: 1.18; color: var(--petroleo-osc);
    margin-bottom: 7px;
}
.acceso-sub { color: var(--gris); font-size: .93rem; line-height: 1.55; margin-bottom: 22px; }
.acceso-sub strong { color: var(--tinta-2); font-weight: 600; }

/*
 | La tarjeta del acceso NO lleva borde ni sombra sobre el fondo claro.
 |
 | En el panel, `.card` separa un bloque de otros que compiten con él. Aquí no hay
 | nada más en la columna: el marco sólo dibujaría una caja alrededor de lo único que
 | hay, y el formulario se lee mejor apoyado directamente sobre el fondo.
*/
.acceso-caja .card { border: 0; box-shadow: none; background: transparent; padding: 0; }

.acceso-pie { margin-top: 22px; font-size: .88rem; color: var(--gris); }
.acceso-pie a { color: var(--petroleo); font-weight: 600; }
.acceso-pie a:hover { text-decoration: underline; }

/* ── Los pasos ─────────────────────────────────────────────────────────────── */

/*
 | Cuenta los pasos y dice en cuál vas. Es lo que hace tolerable partir un alta en
 | cuatro pantallas: sin esto, cada «Continuar» parece que puede ser el penúltimo
 | para siempre, que es la sensación que hace abandonar un formulario largo.
*/
.acceso-pasos { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; }
.acceso-pasos .paso {
    height: 4px; border-radius: 3px; background: var(--linea);
    flex: 1; transition: background .2s;
}
.acceso-pasos .paso.hecho { background: var(--petroleo-cl); }
.acceso-pasos .paso.aqui  { background: var(--petroleo); }
.acceso-pasos .cuenta {
    font-size: .74rem; font-weight: 700; color: var(--gris);
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}

/* ── Separador «o» ─────────────────────────────────────────────────────────── */

.acceso-o {
    display: flex; align-items: center; gap: 12px; margin: 18px 0;
    color: var(--gris-cl); font-size: .78rem; font-weight: 500;
}
.acceso-o::before, .acceso-o::after { content: ''; flex: 1; border-top: 1px solid var(--linea); }

/* ── El correo ya resuelto, en los pasos siguientes ────────────────────────── */

/*
 | «Estás entrando como ana@…, ¿no eras tú?». Va arriba del campo de la contraseña
 | porque en una pantalla que sólo pide contraseña, no ver de QUÉ cuenta es deja a
 | quien tiene dos correos sin forma de saber cuál está usando.
*/
.acceso-quien {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border: 1.5px solid var(--linea); border-radius: 10px;
    padding: 9px 12px; margin-bottom: 18px; background: var(--papel);
    font-size: .89rem;
}
.acceso-quien .correo {
    font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; flex: 1; min-width: 0;
}
.acceso-quien a { color: var(--petroleo); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.acceso-quien a:hover { text-decoration: underline; }

/* ── Columna de la imagen ──────────────────────────────────────────────────── */

.acceso-arte { display: none; position: relative; overflow: hidden; background: var(--petroleo-osc); }

@media (min-width: 961px) { .acceso-arte { display: block; } }

.acceso-arte .foto {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
}

/*
 | El velo sobre la foto. No es decoración: sin él, el nombre de la empresa se pierde
 | encima de cualquier imagen clara, y la empresa sube la foto que quiere — no una
 | pensada para llevar texto encima.
*/
.acceso-arte .velo {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(12, 51, 61, .28) 0%,
        rgba(12, 51, 61, .52) 55%,
        rgba(12, 51, 61, .88) 100%);
}
/*
 | El fondo de cuando NO hay foto: un degradado de la marca con dos halos. Es la
 | alternativa a dejar un rectángulo liso o —peor— a poner una foto de banco de
 | imágenes de una vaca que no es la del cliente.
*/
.acceso-arte .lienzo {
    position: absolute; inset: 0;
    background:
        radial-gradient(1100px 520px at 82% 8%,  rgba(232, 179, 60, .20), transparent 62%),
        radial-gradient(900px 520px at 12% 92%, rgba(46, 130, 150, .40), transparent 60%),
        linear-gradient(150deg, #0C333D 0%, #124A58 48%, #155E6E 100%);
}

/*
 | La retícula: cuadros de 46 px, apenas visibles. Le da al degradado algo que mirar
 | de cerca sin competir con el texto ni pesar un solo kilobyte de imagen.
*/
.acceso-arte .lienzo::after {
    content: ''; position: absolute; inset: 0; opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
}

.acceso-arte .texto {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 46px 46px 42px; color: #fff;
}
.acceso-arte .texto .logo-empresa {
    max-height: 54px; max-width: 190px; margin-bottom: 20px;
    /* Los logos suelen venir en oscuro sobre blanco; el fondo del panel es oscuro. */
    background: rgba(255, 255, 255, .94); border-radius: 10px; padding: 8px 12px;
}
.acceso-arte .texto h2 {
    font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 106;
    font-weight: 800; letter-spacing: -.02em; line-height: 1.14;
    font-size: clamp(1.6rem, 2.3vw, 2.25rem);
    margin-bottom: 12px; text-wrap: balance;
}
.acceso-arte .texto p {
    font-size: 1rem; line-height: 1.6; max-width: 46ch;
    color: rgba(255, 255, 255, .84);
}
.acceso-arte .texto .credito {
    margin-top: 22px; font-size: .78rem; color: rgba(255, 255, 255, .55);
    display: flex; align-items: center; gap: 8px;
}

/* ── Detalles de formulario propios del acceso ─────────────────────────────── */

.acceso-caja .campo:last-of-type { margin-bottom: 18px; }

/*
 | La etiqueta del campo y su enlace, en la misma línea y a los extremos.
 |
 | El selector lleva `label` DELANTE a propósito. `lactisoft.css` declara
 | `.campo label { display:block }`, que es especificidad (0,1,1); una clase suelta es
 | (0,1,0) y PERDÍA, así que el `display:flex` no se aplicaba nunca y el «¿La
 | olvidaste?» salía pegado al texto «Contraseña» como si fuera parte de él.
 |
 | Con `label.acceso-etiqueta-fila` las dos valen (0,1,1) y gana la última hoja
 | cargada, que es ésta. Se prefiere igualar la especificidad antes que subirla o usar
 | `!important`: así la regla sigue siendo fácil de sobreescribir más adelante.
*/
label.acceso-etiqueta-fila {
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
label.acceso-etiqueta-fila a { font-weight: 600; font-size: .78rem; color: var(--petroleo); }
label.acceso-etiqueta-fila a:hover { text-decoration: underline; }

.acceso-recordar {
    display: flex; gap: 8px; align-items: center; font-size: .88rem;
    margin-bottom: 18px; color: var(--tinta-2); cursor: pointer;
}
.acceso-recordar input { width: auto; }

/* La casilla de los términos lleva dos enlaces y en el teléfono ocupa dos renglones:
   la casilla se queda arriba, junto al primero, y no centrada contra el bloque. */
.acceso-terminos { align-items: flex-start; margin: 14px 0 6px; line-height: 1.45; }
.acceso-terminos input { margin-top: 3px; flex-shrink: 0; }
.acceso-terminos a { color: var(--petroleo); font-weight: 600; text-decoration: underline; }

/*
 | El campo del código, y por qué no es como los demás.
 |
 | Se teclean seis dígitos leyéndolos de OTRA pantalla —el correo casi siempre se abre
 | en el teléfono y esto se llena en la computadora—, así que la persona va mirando el
 | teléfono y volviendo. Con el tipo de letra normal, a esa distancia, se pierde la
 | cuenta de por dónde iba. Grande, monoespaciado y muy separado, cada dígito ocupa un
 | lugar reconocible y se puede comprobar de un vistazo.
*/
.codigo-campo input {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 1.7rem; font-weight: 700; text-align: center; letter-spacing: .42em;
    /* El `letter-spacing` también separa DESPUÉS del último dígito y descentra el
       texto; el padding izquierdo lo compensa. */
    padding-left: calc(.42em + 12px); color: var(--petroleo-osc);
}
.codigo-pie {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    justify-content: space-between; margin-top: 16px; font-size: .84rem; color: var(--gris);
}
.codigo-pie form { margin: 0; }
.enlace-boton {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--petroleo); font-weight: 600;
}
.enlace-boton:hover { text-decoration: underline; }
.enlace-boton[disabled] { color: var(--gris-cl); cursor: default; font-weight: 500; text-decoration: none; }

/* ── El selector de línea y plan (paso 3 del alta) ─────────────────────────── */

.lineas { display: grid; gap: 14px; }
.linea { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 13px 13px; margin: 0; }
.linea > legend { font-size: .82rem; font-weight: 700; padding: 0 6px; color: var(--petroleo); }
.linea > legend .para { display: block; font-weight: 400; font-size: .76rem; color: var(--gris); padding-top: 2px; }

.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }

/*
 | Son RADIOS de verdad, no divs con JavaScript: el alta tiene que funcionar con el
 | teclado y sin scripts. El input se esconde a la vista pero sigue enfocándose, y
 | `:focus-visible` pinta el anillo sobre la tarjeta.
*/
.opciones input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion {
    display: block; cursor: pointer; border: 1.5px solid var(--linea); border-radius: 10px;
    padding: 11px 12px; background: var(--papel); transition: border-color .12s, box-shadow .12s;
}
.opcion:hover { border-color: var(--petroleo-cl); }
.opcion .nom { display: block; font-weight: 700; font-size: .9rem; color: var(--petroleo-osc); }
.opcion .pre { display: block; font-weight: 700; font-size: 1.15rem; color: var(--petroleo); margin: 3px 0 1px; }
.opcion .pre small { font-weight: 500; font-size: .7rem; color: var(--gris); }
.opcion .cupo { display: block; font-size: .78rem; color: var(--gris); }
.opciones input:checked + .opcion {
    border-color: var(--petroleo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--petroleo) 14%, transparent);
}
.opciones input:focus-visible + .opcion { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.nota-planes { font-size: .8rem; color: var(--gris); margin-top: 10px; }

.seccion-titulo {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--gris); margin: 22px 0 12px;
}
.seccion-titulo:first-child { margin-top: 0; }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .rejilla-2 { grid-template-columns: 1fr; } }

/* El subdominio y su sufijo fijo, pegados como una sola dirección. */
.subdominio { display: flex; align-items: stretch; }
.subdominio input {
    border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; min-width: 0;
}
.subdominio .sufijo {
    display: flex; align-items: center; padding: 0 12px;
    border: 1.5px solid var(--linea); border-left: 0;
    border-top-right-radius: 9px; border-bottom-right-radius: 9px;
    background: var(--linea-2); color: var(--gris); font-size: .86rem; white-space: nowrap;
}

/* Identidad del producto durante el alta y el acceso central. */
.acceso-producto{font-size:.66rem;font-weight:700;letter-spacing:.09em;line-height:1.7;color:#155e6e;margin-bottom:16px}
/*
 | El panel claro: el de cuando NO hay foto de la empresa. Antes era sólo el del
 | acceso central —de ahí el nombre viejo, `acceso-arte-marca`— y ahora también es
 | el de la empresa que no subió ninguna, porque su pantalla se quedaba con una
 | foto de banco de imágenes de un queso que no era el suyo.
*/
.acceso-arte-escena{background:#fff;border-left:1px solid #e1eaeb}
.acceso-arte-escena .texto{color:#155e6e;background:#f3f7f7;padding:32px 40px;position:absolute;bottom:0}
.acceso-arte-escena .texto p{color:#48646a;font-size:.95rem}
.acceso-beneficios{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px;font-size:.75rem;font-weight:600}
@media(min-width:961px) and (max-height:740px){.acceso-arte-escena .texto{padding:24px 32px}.acceso-arte-escena .texto h2{font-size:1.65rem}}

/* ══════════════════════════════════════════════════════════════════════════════
   LAS ESCENAS DEL PANEL DERECHO

   ═══ POR QUÉ DEJARON DE SER UNA FOTO ═══

   Las once pantallas de acceso —entrar, la contraseña, los tres pasos de
   recuperar, los cuatro del alta, vincular— enseñaban TODAS la misma imagen: la
   del equipo de la quesería que también sale en la portada. Quien se registra la
   ve cuatro veces seguidas mientras avanza los pasos, y entonces la imagen deja
   de decir algo y se vuelve papel tapiz: nada en la columna derecha confirma que
   uno avanzó.

   Ahora cada pantalla trae su escena y la escena cuenta lo que esa pantalla pide:
   una llave para entrar, un sobre para el código, una fachada para el negocio.

   ═══ POR QUÉ SVG EN LÍNEA Y NO PNG ═══

   Son once imágenes. En PNG a la resolución del panel —que ocupa media pantalla
   en un escritorio— serían cerca de medio mega, y el acceso es justo donde la
   conexión todavía no importa porque nadie ha entrado. En línea pesan dos kilos
   cada una, se ven nítidas a cualquier tamaño y toman el color de aquí.

   ═══ LA PALETA ═══

   Petróleo y oro, los dos colores del logo, más el blanco. Nada más.

   La primera versión sumó coral, lila, ciruela, cielo y compañía para hacer
   corporate memphis de colores, y el acceso dejó de parecer de la misma casa que
   las landings: allá las ilustraciones (`img/landing/*-vestuario-*`) son sólo
   petróleo y oro, y es lo que se reconoce como la marca. Si una escena pide un
   color que no está aquí, la escena está mal, no la paleta.

   Van con prefijo `--m-` y viven en `.acceso-arte`, NO en `:root`: son de las
   ilustraciones y de nada más. Y son literales, no derivados de los tokens del
   sistema, porque `lactisoft.css` redefine `--petroleo` y compañía en modo
   oscuro — y una ilustración que cambia de colores según el tema del navegador
   deja de ser la misma ilustración.
   ══════════════════════════════════════════════════════════════════════════════ */

.acceso-arte {
    --m-papel:#FFFFFF;   --m-lienzo:#F3F7F7;
    --m-petroleo:#155E6E; --m-petroleo-cl:#2E8296; --m-petroleo-osc:#0C333D;
    --m-oro:#E8B33C;     --m-oro-cl:#F7DFA4;    --m-oro-osc:#C8952B;
}

/*
 | La escena se cuelga del bloque de texto, no del borde de arriba.
 |
 | Anclada arriba —que es como estaba la foto— dejaba una franja de blanco entre el
 | dibujo y el texto que crecía con la ventana: el dibujo guarda su proporción y el
 | hueco se lo queda entero. Anclada abajo, el aire sobrante se va al techo, que es
 | donde no molesta.
 |
 | `height:auto` y no un porcentaje: el `viewBox` ya trae la proporción, y con un
 | alto fijo el dibujo se queda con franjas a los lados en cuanto el panel cambia de
 | forma. El `max-height` es el tope para la ventana muy alta y estrecha, donde si
 | no el dibujo se subiría por encima del logo de la columna de al lado.
*/
.acceso-arte .escena {
    position: absolute; left: 5%; right: 5%; bottom: 30%;
    height: auto; max-height: 58%;
    display: block;
}

@media (min-width: 961px) and (max-height: 740px) {
    .acceso-arte .escena { bottom: 32%; max-height: 50%; }
}

/*
 | El trazo de las escenas: el contorno fino de petróleo de las landings. Lo
 | llevan las piezas blancas —que sin él se pierden en el fondo— y los detalles
 | de dentro de las piezas de color.
*/
.acceso-arte .escena .hoja  { fill: var(--m-papel); stroke: var(--m-petroleo); stroke-width: 1.8; stroke-linejoin: round; }
.acceso-arte .escena .trazo { fill: none; stroke: var(--m-petroleo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acceso-arte .escena .miembro { stroke-linecap: round; stroke-linejoin: round; fill: none; }

/*
 | El respiro de las piezas sueltas —lo que flota— y el guiño de los destellos.
 | Sin movimiento la escena se lee igual; por eso se apaga entera cuando el
 | sistema pide menos animación, y no hay nada que reponer.
*/
@media (prefers-reduced-motion: no-preference) {
    .acceso-arte .escena .flota  { animation: m-flota 5.5s ease-in-out infinite; }
    .acceso-arte .escena .flota-b { animation: m-flota 6.5s ease-in-out .8s infinite; }
    .acceso-arte .escena .brilla { animation: m-brilla 3.4s ease-in-out infinite; transform-origin: center; }
}
@keyframes m-flota  { 50% { transform: translateY(-7px); } }
@keyframes m-brilla { 0%, 100% { opacity: .35; transform: scale(.86); } 55% { opacity: 1; transform: scale(1); } }

/* Selector de producto del registro unificado. */
.registro-productos{border:0;padding:0;margin:20px 0;display:grid;gap:12px;min-width:0}
.registro-productos-leyenda{font-weight:600;margin-bottom:12px}
.registro-producto{border:1px solid #d8e2e3;border-radius:12px;padding:14px 16px}
.registro-producto:has(input:checked){border-color:#155e6e;background:#edf5f5}
.registro-producto label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.registro-producto input[type=radio]{width:18px;height:18px;flex:0 0 18px;margin-top:3px;accent-color:#155e6e}
.registro-producto strong,.registro-producto small{display:block}
.registro-producto small{font-size:.82rem;line-height:1.5;margin-top:4px}
.registro-producto>a{display:inline-block;margin:8px 0 0 30px;font-size:.8rem;text-decoration:underline}