/* ==========================================================================
   MI CUENTA · pantalla v2
   Diseño: «Mi Cuenta Autos Valls.dc.html» (proyecto «Guía de marca completa»)

   🔴 LOS VALORES SALEN DE TOKENS, NO DEL .dc.html.

   El diseño escribe los colores a pelo —#F2F6FA, #E3E8EF, #003069, #00a6e2,
   #41556B, #5C7A99, #8FA9C4, #EAF4FC— porque una maqueta suelta no tiene sistema.
   Aqui cada uno se sustituye por su token, comprobado uno a uno contra
   theme-v2-tokens.css:

       #003069 -> --av-marino        #00a6e2 -> --av-cielo
       #E3E8EF -> --av-borde         #41556B -> --av-texto-3 (5,5:1 sobre blanco)
       #FFFFFF -> --av-blanco

   Los que NO tienen token —#F2F6FA de fondo, #EAF4FC de la franja, #5C7A99 y
   #8FA9C4 de los textos apagados— se mapean al token mas cercano del sistema en
   vez de sumar cuatro colores nuevos a la paleta. Copiarlos habria dejado esta
   pantalla con su propio juego de grises, que es justo lo que el sistema existe
   para evitar.

   ⚠️ LOS CAMPOS DEL CHECK-IN SI SE ESTILAN AQUI, Y NO POR GUSTO. Se penso que
   bastaba con el marcado del motor porque el paso 4 ya lo estila; es falso, esa
   hoja solo se encola en las paginas del flujo. Ver el bloque del formulario mas
   abajo.
   ========================================================================== */

.av-v2-cuenta .av-main {
    background: var(--av-fondo-suave);
}

/* --- Intro ---------------------------------------------------------- */
.av-v2-cuenta .av-cuenta__intro {
    padding: 16px 0 0;
}

.av-v2-cuenta .av-cuenta__h1 {
    margin: 0 0 10px;
    font-family: var(--av-fuente-titulo);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.1;
    color: var(--av-marino);
}

.av-v2-cuenta .av-cuenta__lead {
    margin: 0;
    max-width: 60ch;
    font-size: var(--av-t-base);
    line-height: 1.7;
    color: var(--av-texto-3);
}

/* --- Las tres tarjetas ---------------------------------------------- */
/*
 * `auto-fit` con minimo de 320px, como el diseño: a 1120px caben tres, y por
 * debajo se reparten solas sin una sola media query. Es la misma rejilla que usa
 * el formulario del paso 4, asi que la pantalla no estrena mecanismo.
 */
.av-v2-cuenta .av-cuenta__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    align-items: start;
    padding-top: 32px;
    padding-bottom: 60px;
}

.av-v2-cuenta .av-cuenta__caja {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    background: var(--av-blanco);
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-tarjeta);
}

.av-v2-cuenta .av-cuenta__caja--oscura {
    background: var(--av-marino);
    border-color: var(--av-marino);
    color: var(--av-blanco);
    gap: 14px;
}

.av-v2-cuenta .av-cuenta__h2 {
    margin: 0;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-lead);
    color: var(--av-marino);
}

.av-v2-cuenta .av-cuenta__caja--oscura .av-cuenta__h2 {
    color: var(--av-blanco);
}

.av-v2-cuenta .av-cuenta__nota {
    margin: 0;
    font-size: var(--av-t-nav);
    line-height: 1.6;
    color: var(--av-texto-3);
}

/* --- Accesos rapidos ------------------------------------------------ */
.av-v2-cuenta .av-cuenta__acceso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-sm);
    transition: background .16s;
}

.av-v2-cuenta .av-cuenta__acceso:hover,
.av-v2-cuenta .av-cuenta__acceso:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: var(--av-blanco);
}

/*
 * La flecha va en un <span aria-hidden> y no como `content` de un ::after: asi un
 * lector de pantalla no la lee y, sobre todo, no depende de que la fuente tenga
 * el glifo — la «→» de una fuente de sistema y la de Sora no miden igual.
 */
.av-v2-cuenta .av-cuenta__flecha {
    color: var(--av-borde-fuerte);
    flex: none;
}

.av-v2-cuenta .av-cuenta__ayuda {
    margin: 6px 0 0;
    font-size: var(--av-t-cap);
    line-height: 1.6;
    color: var(--av-borde-fuerte);
}

.av-v2-cuenta .av-cuenta__ayuda a {
    color: var(--av-blanco);
    text-decoration: underline;
}

/* --- El formulario de consulta de reserva --------------------------- */
/*
 * 🔴 SE ESTILA AQUI, Y ESO ES UNA CORRECCION.
 *
 * Primero se dio por hecho que bastaba con el marcado del motor porque el paso 4
 * ya lo estila. Falso: theme-v2-reserva.css SOLO se encola en las paginas del
 * flujo. En /mi-cuenta/ los campos salian como rayas subrayadas —el estilo del
 * proveedor sin hoja— al lado de un login con cajas. Las comprobaciones daban
 * verde («hay 3 selects, hay booking_code») y la pantalla estaba mal; se vio en la
 * captura.
 *
 * El marcado lo pone el override del tema, no el plugin: ver
 * Extensions/CarRental/Templates/Front/MyAccount/template.BookingCheckinForm.php
 */
.av-v2-cuenta .av-checkin {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.av-v2-cuenta .av-checkin__campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Misma etiqueta que la del login de al lado: las dos tarjetas se leen iguales. */
.av-v2-cuenta .av-checkin__rotulo {
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-eyebrow);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}

.av-v2-cuenta .av-checkin__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    background: var(--av-blanco);
    font-family: var(--av-fuente-texto);
    font-size: var(--av-t-sm);
    color: var(--av-marino);
}

.av-v2-cuenta .av-checkin__input:focus-visible {
    border-color: var(--av-cielo);
}

/* Los tres desplegables de la fecha, a partes iguales. minmax(0,1fr) y no 1fr a
 * secas: con 1fr, el ancho minimo del contenido —«Septiembre»— desborda la
 * tarjeta en vez de encogerse. */
.av-v2-cuenta .av-checkin__fecha {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/*
 * El boton en marino, no en cian: el cian se lo lleva «Entrar» de la tarjeta de
 * al lado. Son las dos acciones principales de la pantalla y el diseño las
 * distingue justo asi.
 *
 * box-shadow a none con !important porque el style.css heredado impone una
 * sombra a todo <button> con !important. Misma trampa del paso 3 y del paso 4.
 */
.av-v2-cuenta .av-checkin__boton {
    width: 100%;
    min-height: 46px;
    margin-top: 2px;
    padding: 13px;
    border: none;
    border-radius: var(--av-r-boton);
    background: var(--av-marino);
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-sm);
    cursor: pointer;
    box-shadow: none !important;
    transition: background .16s;
}

.av-v2-cuenta .av-checkin__boton:hover {
    background: var(--av-marino-900);
}

/* --- El login de WordPress ------------------------------------------ */
/*
 * `wp_login_form()` emite `<p class="login-username">` etc. Se le da la misma
 * caja que a los campos del motor para que las dos tarjetas se lean iguales, que
 * es lo que pide el diseño: mismo borde, mismo radio, misma altura.
 */
.av-v2-cuenta .av-cuenta__caja #loginform p {
    margin: 0 0 12px;
}

.av-v2-cuenta .av-cuenta__caja #loginform label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-eyebrow);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--av-texto-3);
}

.av-v2-cuenta .av-cuenta__caja #loginform input[type="text"],
.av-v2-cuenta .av-cuenta__caja #loginform input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--av-borde);
    border-radius: var(--av-r-boton);
    background: var(--av-blanco);
    font-size: var(--av-t-sm);
    color: var(--av-marino);
}

.av-v2-cuenta .av-cuenta__caja #loginform .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--av-fuente-texto);
    font-weight: 400;
    font-size: var(--av-t-meta);
    letter-spacing: 0;
    text-transform: none;
    color: var(--av-texto-3);
}

/*
 * 🔴 EL BOTON EN CIAN, Y ES DELIBERADO. En el resto de la web el boton macizo es
 * marino; aqui el diseño pone «Entrar» en --av-cielo y «Buscar reserva» en
 * marino, porque las dos tarjetas compiten y hay que poder distinguirlas de un
 * vistazo. Se respeta.
 *
 * `box-shadow` con !important: el style.css heredado impone una sombra a todo
 * `.button` y `input[type=submit]` con !important. Misma trampa del paso 3 y del
 * paso 4, documentada en CLAUDE.md.
 */
.av-v2-cuenta .av-cuenta__caja #loginform .login-submit input[type="submit"] {
    width: 100%;
    min-height: 46px;
    padding: 13px;
    border: none;
    border-radius: var(--av-r-boton);
    background: var(--av-cielo);
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-sm);
    cursor: pointer;
    box-shadow: none !important;
    transition: background .16s;
}

.av-v2-cuenta .av-cuenta__caja #loginform .login-submit input[type="submit"]:hover {
    background: var(--av-enlace);
}

/* --- La franja de privacidad ---------------------------------------- */
.av-v2-cuenta .av-cuenta__legal {
    padding: 0 0 72px;
}

.av-v2-cuenta .av-cuenta__legal-caja {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-radius: var(--av-r-tarjeta);
    background: var(--av-fondo-cielo, #eaf4fc);
}

.av-v2-cuenta .av-cuenta__legal-texto {
    margin: 0;
    max-width: 56ch;
    font-size: var(--av-t-nav);
    color: var(--av-marino);
}

.av-v2-cuenta .av-cuenta__legal-cta {
    padding: 11px 18px;
    border-radius: var(--av-r-pill);
    background: var(--av-cielo);
    color: var(--av-blanco);
    font-family: var(--av-fuente-titulo);
    font-weight: 700;
    font-size: var(--av-t-meta);
    white-space: nowrap;
}

.av-v2-cuenta .av-cuenta__legal-cta:hover,
.av-v2-cuenta .av-cuenta__legal-cta:focus-visible {
    background: var(--av-enlace);
    color: var(--av-blanco);
}