/**
 * La puerta de CitaBot: una tarjeta que gira.
 *
 * ── Qué hay aquí y por qué así ──
 * A esta página llegan dos personas distintas: un cliente que quiere entrar, y
 * alguien que ha visto el producto y no tiene cuenta —hasta ahora se topaba con
 * un formulario de acceso y una línea que le mandaba de vuelta a maherassw.es.
 *
 * Se probó con el panel deslizante de «sign in / sign up» que corre por ahí, y
 * se descartó por dos motivos. Uno: ese componente existe para alternar entre
 * dos acciones EQUIVALENTES cuando no sabes cuál quiere el visitante, y aquí
 * cada uno ya sabe quién es. Y dos: al estrechar la tarjeta para dejar sitio a
 * la imagen a sangre, el panel —que era su mitad derecha— dejó de caber.
 *
 * El giro resuelve las dos cosas y además se cuenta solo: son dos caras de lo
 * mismo, que es literalmente lo que hay. Y sirve igual en ancho que en
 * estrecho, porque no depende de que haya lados.
 *
 * ── El suelo: dos capas, y el orden importa ──
 * Debajo, un fondo GENERADO en CSS. Encima, la imagen del producto. Si la
 * imagen no llega —conexión mala, despliegue a medias— no se ve un hueco: se
 * ve el fondo generado, que ya es una pantalla presentable.
 *
 * ── Lo que no se puede hacer aquí ──
 * La CSP dice `default-src 'none'` sin `font-src`: **no se puede cargar
 * ninguna tipografía**, ni siquiera propia. De ahí que todo vaya en la del
 * sistema y no en la Poppins de la web. Y `script-src 'self'`: el conmutador
 * vive en entrada.js, nunca en un `<script>` con código dentro.
 */

/* ── El suelo ────────────────────────────────────────────────────────────
   El degradado va en una variable porque se usa dos veces: como respaldo
   debajo de la foto, y solo, sin foto, en pantallas estrechas. */
.entrada {
    --fondo-generado:
        radial-gradient(58rem 44rem at 26% 42%, rgba(26, 140, 255, 0.28), transparent 66%),
        radial-gradient(46rem 38rem at 88% 4%, rgba(26, 140, 255, 0.10), transparent 62%);

    min-height: 100vh;
    display: grid;
    place-items: center end;
    padding: calc(var(--u) * 4) clamp(calc(var(--u) * 3), 8vw, calc(var(--u) * 16));

    background-color: #070c16;
    background-image: url('/assets/entrada-fondo.jpg'), var(--fondo-generado);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── La tarjeta ────────────────────────────────────────────────────────────
   `.acceso` no se pinta: sólo fija el ancho y la perspectiva. Lo que se ve
   —fondo, canto, sombra— vive en cada CARA, y por eso lo que gira es la
   tarjeta entera y no su contenido dentro de un marco quieto. Con la
   superficie aquí, el primer intento dejaba el marco parado mientras las
   letras daban vueltas por dentro, y parecía un fallo de pintado.

   La perspectiva va en el PADRE de lo que gira. Puesta en el mismo elemento,
   el giro sale plano y parece un recorte. */
.acceso {
    width: min(29rem, 100%);
    perspective: 1600px;
}

/* Las dos caras van en la MISMA celda de rejilla: así la tarjeta mide lo que
   la cara más alta —contacto tiene un campo más— y no cambia de tamaño a
   mitad del giro, que es lo que arruina este efecto. */
.acceso-caras {
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}
.acceso.activo .acceso-caras { transform: rotateY(180deg); }

.acceso-cara {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    /* Centrado en vertical porque las dos caras comparten alto: la de entrar
       tiene un campo menos y, alineada arriba, dejaba un agujero abajo. */
    justify-content: center;
    padding: calc(var(--u) * 5);

    color: #f4f6f9;
    /* Casi opaca, no vidrio de verdad. Aquí dentro se teclea una contraseña, y
       con una superficie translúcida el contraste dependería de qué trozo de
       foto quedara detrás — que es el fallo que hubo que arreglar en la portada
       de maherassw.es, donde el titular dorado caía a 1,89:1 sobre una veta
       clara. El cristal se cuenta en el canto y en la sombra, que no llevan
       letras.

       Y sin `backdrop-filter`: un filtro dentro de un contexto 3D lo aplana en
       varios navegadores, y a esta opacidad no se vería de todos modos. */
    background-color: rgb(13 20 33 / 0.955);
    border: 1px solid rgb(255 255 255 / 0.10);
    border-radius: var(--radio-l);
    box-shadow:
        inset 0 1px 0 0 rgb(255 255 255 / 0.10),
        0 40px 90px -30px rgb(0 0 0 / 0.75);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Visible es el estado BASE, no el de la cara de entrar. Así una tarjeta de
       una sola cara —olvide.php, restablecer.php: el mismo umbral, sin nada que
       girar— se ve sin tener que fingir que es una de las dos.

       `visibility` cambia a los 0,3 s, justo cuando la tarjeta está de canto y
       no se ve nada. Sin esto la cara de detrás sigue siendo alcanzable con el
       tabulador: se navega a ciegas por campos que están del revés. */
    visibility: visible;
    transition: visibility 0s 0.3s;
}

/* Después de la regla de arriba, y esto importa: `.acceso-contacto` empata con
   `.acceso-cara` en especificidad (0,1,0) y sólo gana por venir después. */
.acceso-contacto { visibility: hidden; transform: rotateY(180deg); }
.acceso.activo .acceso-entrar { visibility: hidden; }
.acceso.activo .acceso-contacto { visibility: visible; }

/* ── Lo de dentro ──────────────────────────────────────────────────────── */
.acceso-cara h1 {
    margin: 0 0 var(--u);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.acceso-cara h1 span { color: #1a8cff; }

.acceso-cara .explica {
    margin: 0 0 calc(var(--u) * 3.5);
    color: rgb(255 255 255 / 0.68);
}

/* Los campos, sobre superficie oscura: la hoja del panel los pinta para fondo
   claro y aquí saldrían blancos sobre casi negro. */
.acceso-cara label { color: rgb(255 255 255 / 0.86); }
.acceso-cara input {
    background: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.14);
    color: #f4f6f9;
}
.acceso-cara input::placeholder { color: rgb(255 255 255 / 0.38); }
.acceso-cara input:focus-visible {
    background: rgb(255 255 255 / 0.10);
    border-color: #1a8cff;
    outline-color: #1a8cff;
}

/* El botón principal, en el azul del producto y con tinta oscura: sobre
   #1A8CFF el blanco da 3,2:1 y el navy 5,6:1. */
.acceso-cara .boton {
    width: 100%;
    background: #1a8cff;
    border-color: #1a8cff;
    color: #06131f;
}
.acceso-cara .boton:hover {
    background: #4dabff;
    border-color: #4dabff;
}

/* El cambio de cara: una línea, no un botón. La otra cara no es una acción que
   compita con «Entrar» — es un sitio distinto, para otra persona. */
.acceso-cambio {
    margin: calc(var(--u) * 3) 0 0;
    font-size: 0.86rem;
    color: rgb(255 255 255 / 0.68);
    text-align: center;
}
/* El botón y el enlace se pintan igual porque hacen lo mismo a ojos de quien
   lee: llevan a otro sitio. Que uno gire una tarjeta sin recargar y el otro
   cambie de página es cosa nuestra, no suya. */
.acceso-cambio button,
.acceso-cambio a {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: #4dabff;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.acceso-cambio button:hover,
.acceso-cambio a:hover { color: #8cc8ff; }

/* Dos líneas seguidas se leen como una lista; ésta va aparte porque es otra
   cosa: la de arriba resuelve un problema, ésta abre una puerta distinta. */
.acceso-cambio-suelto {
    margin-top: calc(var(--u) * 4);
    padding-top: calc(var(--u) * 3);
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

.acceso-legal {
    margin: calc(var(--u) * 2.5) 0 0;
    font-size: 0.78rem;
    color: rgb(255 255 255 / 0.55);
    text-align: center;
}
.acceso-legal a { color: rgb(255 255 255 / 0.72); }

/* Los avisos, sobre oscuro. La tarjeta es casi negra en los dos temas, así que
   los tintes que panel.css calcula para el tema claro aquí no valen: en claro
   quedaría ámbar pálido sobre casi negro. */
.acceso-cara .aviso.mal {
    background: rgb(255 155 84 / 0.14);
    border-color: var(--ambar);
    color: #ffd2ae;
}
.acceso-cara .aviso.bien {
    background: rgb(26 140 255 / 0.14);
    border-color: #1a8cff;
    color: #b6d9ff;
}

/* ── Sin giro para quien ha pedido menos movimiento ─────────────────────────
   Cambia de cara igual, pero de golpe. */
@media (prefers-reduced-motion: reduce) {
    .acceso-caras { transition: none; }
    .acceso-cara { transition: none; }
}

/* ── Estrecho ──────────────────────────────────────────────────────────────
   Aquí la foto SE QUITA, y no es una rendición: la tarjeta ocupa casi toda la
   pantalla, así que del teléfono del fondo sólo asomaba un canto por detrás
   —un rectángulo oscuro a medio recortar que parecía un error de maquetación,
   no un producto. Queda el degradado, que es fondo de verdad y no un resto.

   Y con la foto fuera, la tarjeta se centra. */
@media (max-width: 52rem) {
    .entrada {
        place-items: center;
        padding: calc(var(--u) * 3);
        background-image: var(--fondo-generado);
    }
    .acceso-cara { padding: calc(var(--u) * 4); }
}