/* ===================================================================
   /css/web/bloque_metodo_pago.css — Paquete mp 18/05/2026
   Estilos del bloque "¿Cómo prefieres pagar?" en /reservar.

   mp 18/05/2026: los 4 métodos son botones uniformes. TPV (tarjeta /
   Bizum online) mantienen tonos más prominentes para señalar que "pagar
   ahora" es lo más cómodo. Transferencia y Bizum manual usan tonos
   sobrios pero igual de clicables — todos disparan submit al pulsarse.
   =================================================================== */

@charset "UTF-8";

.form-bloque--metodo-pago {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Aviso destacado encima de los métodos */
.form-bloque__aviso-destacado {
    margin: 0 0 4px 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, #faf6ec 0%, #f0e6cf 100%);
    border-left: 4px solid #5a7a3a;
    border-radius: 6px;
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: #2a4a1e;
    text-align: center;
    letter-spacing: 0.3px;
}

.metodo-pago {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #e0d4b8;
    border-radius: 8px;
    background: #faf6ec;
    color: #3d2410;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.metodo-pago:hover,
.metodo-pago:focus-visible {
    border-color: #5a7a3a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    outline: none;
}

/* mt 19/05/2026: los hovers de TPV (verde y dorado) iluminan en vez de oscurecer.
   En ms se oscurecía un punto y resultaba imperceptible. Ahora el botón se enciende
   con tonos varios pasos más claros: el ojo lo capta sin esfuerzo y refuerza la
   sensación de "pulsable". Manual sigue como antes (blanco→crema, ya visible). */
.metodo-pago--tarjeta:hover {
    background: linear-gradient(180deg, #5a7a3a 0%, #4a6a2a 100%);
    border-color: #6a8a4a;
}
.metodo-pago--bizum:hover {
    background: linear-gradient(180deg, #ecd47a 0%, #dbc060 100%);
    border-color: #d4b14e;
}
.metodo-pago--manual:hover {
    background: #f5efe0;
}

.metodo-pago.is-seleccionado {
    box-shadow: 0 0 0 3px rgba(90,122,58,0.35);
}

/* Botones de TPV: tarjeta verde y Bizum dorado, más prominentes */
.metodo-pago--tpv {
    border: 1.5px solid;
}
.metodo-pago--tarjeta {
    border-color: #2a4a1e;
    background: linear-gradient(180deg, #325627 0%, #2a4a1e 100%);
    color: #fff;
}
.metodo-pago--tarjeta small { color: #d8e3cf; }

.metodo-pago--bizum {
    border-color: #c9a94b;
    background: linear-gradient(180deg, #d8b95b 0%, #c9a94b 100%);
    color: #3d2410;
}
.metodo-pago--bizum small { color: #5d442b; }

/* Métodos manuales: caja crema discreta pero igual de clicable */
.metodo-pago--manual {
    background: #ffffff;
    border-color: #d4c8a8;
}
/* ms 18/05/2026: el hover manual está más arriba con tono más cálido. */

.metodo-pago__icono {
    font-size: 30px;
    flex-shrink: 0;
    line-height: 1;
}

.metodo-pago__texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}

.metodo-pago__texto strong {
    font-size: 16px;
    font-weight: 600;
}

.metodo-pago__texto small {
    font-size: 12.5px;
    color: #7a6a4f;
}

.metodo-pago__texto code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: 12px;
    background: rgba(255,255,255,.5);
    padding: 1px 4px;
    border-radius: 3px;
}

.form-bloque__aviso {
    color: #b33;
    font-size: 13px;
    margin-top: 6px;
    background: #fbe9e9;
    border: 1px solid #f0c4c4;
    padding: 10px 14px;
    border-radius: 6px;
}

@media (max-width: 480px) {
    .form-bloque__aviso-destacado { font-size: 15px; padding: 12px 14px; }
    .metodo-pago { padding: 14px 16px; }
    .metodo-pago__icono { font-size: 26px; }
    .metodo-pago__texto strong { font-size: 15px; }
}