/*
 * Mi cuenta -> Reservas Garantizadas.
 *
 * Tokens tomados del sitio real (Elementor kit 1722, ver Web Garantizadas/):
 *   Poppins  #1E73BE  #333333  #DD3333  #CEB06A  #EEEEEE  #777  #999
 *   radio 4px botones / 5px contenedores, sombra 0 0 10px rgba(0,0,0,.03)
 *
 * La tipografia se HEREDA del sitio: no se carga ninguna fuente.
 * El azul del shop (#1E7DD0) NO se usa con texto blanco: da 4.29:1 de contraste,
 * por debajo del minimo AA de 4.5:1. #1E73BE da 4.94:1.
 *
 * Publico objetivo: personas mayores. Base 17px, interlineado 1.6, todo control
 * con 48px de alto minimo.
 */

.mp-ra-cards,
.mp-ra-screen {
    font-size: 17px;
    line-height: 1.6;
    color: #333;
}

/* ---------- Tarjetas ---------- */

.mp-ra-card {
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .03);
    padding: 20px;
    margin-bottom: 20px;
}

.mp-ra-card--inactiva { opacity: .6; }

.mp-ra-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.mp-ra-card__title {
    font-size: 20px;
    font-weight: 900;
    color: #000;
    margin: 0;
}

.mp-ra-badge {
    border: 1px solid #1E73BE;
    color: #1E73BE;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.mp-ra-kiosko {
    border-left: 4px solid #CEB06A;
    background: #FAF7F0;
    border-radius: 4px;
    padding: 12px 14px;
    margin: 16px 0;
}

.mp-ra-kiosko__label,
.mp-ra-datos__label {
    display: block;
    font-size: 14px;
    color: #777;
}

.mp-ra-kiosko__value {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.mp-ra-datos {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.mp-ra-datos__value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

/* Explicación de una sub pausada. Sin pausa autoservicio el cliente no tiene ningún botón que
   apretar sobre ese estado: este bloque es lo único que le dice qué significa. Cuerpo grande a
   propósito, igual que el resto de la pestaña. */
.mp-ra-aviso {
    background: #F7F7F7;
    border-left: 4px solid #777;
    border-radius: 4px;
    padding: 12px 14px;
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.5;
    color: #000;
}

/* #1E73BE sobre #F7F7F7 da 4.60:1 (AA). NO aclarar el fondo de este bloque sin recalcular: sobre
   #F4F4F4 el mismo azul cae a 4.48:1 y queda por debajo del mínimo. */
.mp-ra-aviso a {
    color: #1E73BE;
    font-weight: 600;
}

.mp-ra-acciones {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.mp-ra-inline { flex: 1; margin: 0; }
.mp-ra-inline .mp-ra-btn { width: 100%; }

/*
 * Con pausar/reactivar fuera de Mi Cuenta, "Cancelar" queda solo en la fila. Sin esto el `flex: 1`
 * lo estira a todo el ancho y la acción destructiva termina del mismo tamaño y peso visual que
 * "Cambiar mi kiosko", que está justo arriba y también ocupa la fila entera. Se acota la CAJA (el
 * <form>), no el botón: el `width: 100% !important` del botón existe para ganarle al theme y no se
 * toca. En pantalla chica vuelve a ancho completo — ahí el área de toque manda.
 */
.mp-ra-acciones .mp-ra-inline:only-child {
    flex: 0 1 auto;
    max-width: 50%;
}

@media (max-width: 480px) {
    .mp-ra-acciones .mp-ra-inline:only-child {
        flex: 1;
        max-width: none;
    }
}

.mp-ra-historial { margin-top: 14px; }
.mp-ra-historial summary { color: #1E73BE; cursor: pointer; }
.mp-ra-historial ul { margin: 8px 0 0; padding-left: 1.2em; }

/* ---------- Botones ---------- */

/*
 * La caja del boton tambien va con !important: el theme le gana a `width` y `min-height` igual que
 * al color, y "Guardar el cambio" salia como un <button> angosto de ~40px de alto, mas chico que el
 * boton secundario que tiene al lado. En una interfaz pensada para gente mayor el area de toque de
 * 48px no es decorativa, asi que se defiende.
 */
.mp-ra-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 13px 16px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font-family: inherit;
    font-size: 17px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
}

/*
 * OJO CON EL !important DE ACA ABAJO: esto es CSS de plugin cayendo en un theme que no controlamos
 * (Elementor + WooCommerce), que pinta <a> y <button> con reglas de MAYOR especificidad
 * (.woocommerce a.button, .elementor-button, a { color: ... }). Sin esto, "Cambiar mi kiosko" salia
 * con letras azules sobre fondo azul —ilegible— y los botones de accion salian rosas. El !important
 * va SOLO en color/fondo/borde, que es donde el theme pisa; el resto (tamanos, padding) no lo toca.
 */

.mp-ra-btn--primary {
    background: #1E73BE !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 600;
}

.mp-ra-btn--primary:hover,
.mp-ra-btn--primary:focus {
    background: #175D9B !important;
    color: #fff !important;
}

.mp-ra-btn--ghost {
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #999 !important;
    font-size: 16px;
}

.mp-ra-btn--ghost:hover,
.mp-ra-btn--ghost:focus {
    border-color: #333 !important;
    color: #333 !important;
}

/* Pausar / cancelar: rojo de la marca (#DD3333), no el rosa del theme. Contorno en reposo y relleno
   al pasar por encima — son acciones que conviene que se lean como serias, sin gritar en la tarjeta.
   #DD3333 sobre blanco da 4.57:1 y blanco sobre #DD3333 lo mismo: pasa el minimo AA en los dos
   estados. */
.mp-ra-btn--danger {
    background: #fff !important;
    color: #DD3333 !important;
    border: 1px solid #DD3333 !important;
    font-size: 16px;
}

.mp-ra-btn--danger:hover,
.mp-ra-btn--danger:focus {
    background: #DD3333 !important;
    color: #fff !important;
    border-color: #DD3333 !important;
}

/*
 * Va con !important porque el margin: 0 de la base tambien lo lleva y si no, lo pisaria.
 *
 * Tambien separa "Cambiar mi kiosko" (primario) de "Me mude de casa" (fantasma) en la tarjeta: van
 * uno arriba del otro, a ancho completo y con el mismo alto de 48px. NO se ponen lado a lado porque
 * en un celular de 320px quedarian de ~150px cada uno, con el texto en dos renglones y el area de
 * toque partida. La jerarquia la da el COLOR, no el tamano.
 *
 * ⚠️ Es un combinador de HERMANO ADYACENTE: exige que los dos <a> se emitan SEGUIDOS. Por eso
 * mp_account_list.php recorre las vistas dos veces —primero los botones, despues los modales— en
 * lugar de emitir boton + modal por vuelta: un .mp-ra-modal en el medio (oculto, pero igual un
 * hermano en el DOM) rompe el selector y los botones quedan pegados.
 */
.mp-ra-btn + .mp-ra-btn { margin-top: 9px !important; }

/* ---------- Formulario ---------- */

.mp-ra-title { font-size: 21px; font-weight: 900; color: #000; margin: 0 0 4px; }
.mp-ra-sub   { color: #777; font-size: 15px; margin: 0 0 16px; }
.mp-ra-back  { margin: 0 0 10px; }
.mp-ra-back a { color: #1E73BE; }

.mp-ra-actual {
    background: #EEEEEE;
    border-radius: 4px;
    padding: 11px 13px;
    margin: 0 0 18px;
}

.mp-ra-actual__label { color: #777; font-size: 14px; }

.mp-ra-field { margin: 0 0 14px; }

.mp-ra-field label {
    display: block;
    font-weight: 600;
    color: #000;
    margin-bottom: 6px;
}

.mp-ra-field input,
.mp-ra-field select {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 17px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    color: #333;
}

.mp-ra-field input:focus,
.mp-ra-field select:focus {
    border-color: #1E73BE;
    outline: 2px solid rgba(30, 115, 190, .25);
}

.mp-ra-field--error input,
.mp-ra-field--error select { border: 2px solid #DD3333; }

.mp-ra-help  { display: block; font-size: 14px; color: #777; margin-top: 6px; }
.mp-ra-muted { color: #999; font-size: 14px; font-weight: 400; }

.mp-ra-group { margin: 20px 0 0; border-top: 1px solid #EEEEEE; padding-top: 16px; }
.mp-ra-group > summary { color: #1E73BE; cursor: pointer; font-size: 16px; list-style: none; }
.mp-ra-group > summary::-webkit-details-marker { display: none; }
.mp-ra-group > summary::before { content: "\25B8 "; }
.mp-ra-group[open] > summary::before { content: "\25BE "; }
.mp-ra-group__title { font-weight: 600; color: #000; margin: 0 0 10px; }

/* Aire entre el ultimo campo y "Guardar el cambio". Apunta al primario y no a :first-of-type: el
   boton es un <button> y el "Cerrar sin guardar" un <a>, asi que cada uno era "el primero de su
   tipo" y los dos se llevaban el margen. */
.mp-ra-form > .mp-ra-btn--primary { margin-top: 20px !important; }

.mp-ra-error {
    background: #FDECEA;
    border-left: 5px solid #DD3333;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

/* ---------- Panel admin: disparador del formulario ---------- */
/*
 * En la vista detalle (?sub=) esto era un <summary> de texto plano en medio de una pantalla llena de
 * datos, y era LA accion de esa pantalla: se perdia de vista. Ahora se lee como boton. Sigue siendo
 * un <details> nativo (cero JS) y por eso se puede abrir solo cuando la validacion falla.
 */

/*
 * OJO: lo esencial del boton (que se vea COMO boton) NO vive aca. Va en linea en el PHP, apoyado en
 * las clases nativas de wp-admin, para que no dependa de que esta hoja llegue: cacheada o sin subir,
 * el disparador volvia a ser texto plano. Lo de abajo es solo el detalle fino, y todo es prescindible.
 */

.mp-ra-admin-box > summary.mp-ra-admin-toggle {
    background: #1E73BE;
    border-color: #1E73BE;
    box-shadow: none;
    text-shadow: none;
    user-select: none;
}

.mp-ra-admin-box > summary.mp-ra-admin-toggle::-webkit-details-marker { display: none; }

.mp-ra-admin-box[open] > summary.mp-ra-admin-toggle,
.mp-ra-admin-box > summary.mp-ra-admin-toggle:hover,
.mp-ra-admin-box > summary.mp-ra-admin-toggle:focus {
    background: #175D9B;
    border-color: #175D9B;
    color: #fff;
}

/* wp-admin no hereda la base de .mp-ra-cards/.mp-ra-screen, asi que el formulario de esta pantalla
   necesita su propio piso de tamano; sin esto los inputs quedan en el 13px de wp-admin. */
.mp-ra-admin-box .mp-ra-field label { font-size: 14px; }
.mp-ra-admin-box .mp-ra-field input,
.mp-ra-admin-box .mp-ra-field select { font-size: 15px; max-width: 420px; }
.mp-ra-admin-box .mp-ra-help { font-size: 13px; }

/* ---------- Modal ---------- */

.mp-ra-modal {
    position: fixed;
    inset: 0;
    background: rgba(51, 51, 51, .55);
    z-index: 99999;
    overflow-y: auto;
    padding: 24px 16px;
}

.mp-ra-modal[hidden] { display: none; }

.mp-ra-modal__box {
    background: #fff;
    border-radius: 5px;
    padding: 22px;
    max-width: 560px;
    margin: 0 auto;
}

/* En celular ocupa toda la pantalla: si el modal flota, el teclado virtual tapa
   el campo activo y no hay forma de scrollear hasta el boton de guardar. */
@media (max-width: 782px) {
    .mp-ra-modal { padding: 0; }
    .mp-ra-modal__box {
        min-height: 100%;
        border-radius: 0;
        max-width: none;
    }
}