/* ═══════════════════════════════════════════════════════════════════════════
   ACCEDER · DESDE LA MAQUETA DEL DUEÑO (2026-10-03)
   ───────────────────────────────────────────────────────────────────────────
   Sólo la carga login.html, y todo va detrás de `:has(.au-dibujo--panel)`:
   «Únete gratis» comparte maquetación y no se toca.

   Las medidas son las de su maqueta, que es una captura de su pantalla a 1,5
   puntos por píxel: lo que en ella mide N, aquí mide N / 1,5 (y un 6 % más,
   porque su ventana es de 1265 y la de la maqueta, de 1183).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EL REPARTO: TEXTO · DIBUJO · TARJETA ──────────────────────────────────
   En su maqueta el texto empieza a 55 px del borde, el dibujo va del 31 % al
   64 % del ancho y la tarjeta mide 424 px y llega a 30 px del borde derecho. */
/* SÓLO EN EL ESCRITORIO. Con `:has()` esta regla pesa más que la de la hoja
   común que apila las dos columnas por debajo de 980 px, y sin el corte se
   imponía también en un móvil: la tarjeta de 424 px y el texto, fuera de la
   pantalla. Por debajo de 981 manda la hoja común, como en «Únete gratis». */
@media (min-width: 981px) {
  .au-main:has(.au-dibujo--panel) {
    grid-template-columns: minmax(0, 1fr) 424px;
    padding-left: clamp(18px, 4.4vw, 78px);
    padding-right: clamp(18px, 2.4vw, 40px);
  }
}
/* El párrafo, en las dos líneas de su maqueta (a 15,5 px caben en 372). */
.au-main:has(.au-dibujo--panel) .au-left > p { max-width: 348px; font-size: 15.5px; line-height: 1.45; margin-bottom: 26px; }
/* 340 y no más: a 360 el «en» de «…y más, en una bandeja» caía encima de
   las hojas de la planta, gris sobre verde oscuro, y no se leía. */
.au-main:has(.au-dibujo--panel) .au-points { max-width: 340px; gap: 9px; }
.au-main:has(.au-dibujo--panel) .au-points li span:not(.ic) { line-height: 1.42; }

/* EL DIBUJO. Es el panel de ChatGPT con fondo transparente de verdad, así
   que NO lleva la máscara que difuminaba los bordes del dibujo de antes (que
   traía su propio fondo lavanda). La caja: del 31 % al 64 % del bloque.
   `bk-el-dibujo-tiene-puntos-de-sobra` lee estos dos números de aquí. */
/* y su borde de arriba, a la altura del de su maqueta (137 px de la página) */
.au-dibujo--panel { left: 31%; right: 36%; top: 132px; }
/* con la franja delante, la barra ocupa su sitio y el bloque empieza 71 px más abajo */
.mk-topbar ~ .au-main .au-dibujo--panel { top: 61px; }
.au-dibujo--panel img { -webkit-mask-image: none; mask-image: none; }

/* ── EL TITULAR, CON SUS RAYAS ───────────────────────────────────────────── */
.au-main:has(.au-dibujo--panel) .au-left h1 { font-size: clamp(38px, 4.1vw, 60px); line-height: 1.02; }
/* Las de su maqueta son tres trazos y más grandes que las del resto de la
   web: dos que suben y uno que corre por debajo. */
.au-rayas { display: inline-block; width: 1.05em; height: 1.05em; margin-left: .02em; vertical-align: .05em;
  fill: none; stroke: #6a1fe6; stroke-width: 4; stroke-linecap: round; }

/* ── LOS TRES PUNTOS: ICONO EN SU BALDOSA ────────────────────────────────── */
/* La baldosa ya viene en el dibujo: fuera el fondo, el radio y el borde lila
   que la hoja común le pone a la caja del icono (dejaba un marco cuadrado
   alrededor de la baldosa redondeada). */
.au-points li .ic.ic--dibujo { width: 46px; height: 46px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; flex: none; }
.au-points li .ic.ic--dibujo img { display: block; width: 100%; height: 100%; }

/* ── LA TARJETA, COMPACTA COMO LA SUYA ─────────────────────────────────────
   En su maqueta los campos y los botones miden 41-44 px y la tarjeta entera
   cabe en la primera pantalla. */
.au-main:has(.au-dibujo--panel) .au-card { padding: 24px 24px 22px; }
@media (min-width: 981px) { .au-main:has(.au-dibujo--panel) .au-card { margin-top: -12px; } }
/* «Mantener la sesión iniciada» y «¿Olvidaste tu contraseña?» en un renglón,
   como su maqueta: con 16 px de hueco no cabían por cinco. */
.au-main:has(.au-dibujo--panel) .au-meta { gap: 6px; margin: 4px 0 14px; }
.au-main:has(.au-dibujo--panel) .au-card h2 { font-size: 29px; line-height: 1.15; margin-bottom: 10px; }
.au-main:has(.au-dibujo--panel) .au-input { min-height: 42px; border-radius: 12px; }
.au-main:has(.au-dibujo--panel) .au-field { margin-bottom: 12px; }
.au-main:has(.au-dibujo--panel) .au-card .lead { margin-bottom: 12px; }
.au-main:has(.au-dibujo--panel) .au-card .lg-tabs { margin-bottom: 12px; }
.au-main:has(.au-dibujo--panel) .au-divider { margin: 16px 0 12px; }
/* «Entrar →». La flecha va pintada por la hoja y no dentro del botón: el
   guion del acceso cambia su texto al enviar («Cargando...») y lo devuelve
   con `textContent`, que se llevaría por delante un <svg> metido dentro. Y
   mientras carga (el botón va desactivado) la flecha no sale. */
#auth-submit { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border-radius: 14px; }
/* OJO: `.mk-btn-primary::after` ya existe en las dos hojas comunes —un
   brillo a toda la anchura, que la hoja de la marca apaga con display:none—.
   Por eso aquí se devuelven display, position e inset: sin ellos la flecha
   heredaba el «none» y no salía. */
#auth-submit::after {
  content: ""; display: block; position: static; inset: auto; flex: none; transform: none; animation: none;
  width: 17px; height: 17px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
#auth-submit:hover::after { transform: translateX(3px); }
#auth-submit:disabled::after { display: none; }
/* «o continúa con»: su maqueta pinta cuatro botones (Google, Microsoft,
   Apple y correo), pero Cuho sólo deja entrar con Google. Va el que existe,
   con el mismo vestido: blanco, borde lila y esquinas de 14. */
.au-main:has(.au-dibujo--panel) .au-oauth-btn { min-height: 46px; border-radius: 14px; border-color: #e6e1f5; font-weight: 600; }
.au-main:has(.au-dibujo--panel) .au-alt { margin-top: 16px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  #auth-submit::after, #auth-submit:hover::after { transition: none; transform: none; }
}