/* ============================================================
   assets/css/estilo_formulario.css — Reserva de Entradas CECBA
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@600;700&display=swap');

:root {
    --pri:        #00205B;
    --pri-d:      #001540;
    --acento:     #c8a84b;
    --acento-d:   #a8882b;
    --fondo:      #f0f3f8;
    --blanco:     #ffffff;
    --texto:      #1a1a2e;
    --suave:      #555f7a;
    --borde:      #c8d0e0;
    --exito:      #155724;
    --exito-bg:   #d4edda;
    --error:      #842029;
    --error-bg:   #f8d7da;
    --info-bg:    #e8ecf4;
    --r:          6px;
    --sombra:     0 2px 14px rgba(0,32,91,0.10);
    --trans:      0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Barlow', Arial, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    min-height: 100vh;
    padding: 24px 16px 48px;
}

.rve-contenedor { max-width: 620px; margin: 0 auto; }

/* ── Header ─────────────────────────────────────────────── */
.rve-header {
    background: var(--pri);
    border-radius: var(--r) var(--r) 0 0;
    padding: 22px 26px;
    color: #fff;
    border-bottom: 4px solid var(--acento);
    display: flex;
    align-items: center;
    gap: 16px;
}
.rve-header-logo img { height: 52px; width: auto; display: block; }
.rve-header-inst {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.8;
}
.rve-header-evento      { font-size: 1.2rem; font-weight: 700; margin-top: 3px; line-height: 1.25; }
.rve-header-descripcion { font-size: 0.88rem; opacity: 0.80; margin-top: 4px; line-height: 1.4; }
.rve-header-lugar       { font-size: 0.84rem; opacity: 0.72; margin-top: 4px; }

/* ── Imagen del orador ──────────────────────────────────── */
.rve-orador {
    border-left: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    overflow: hidden;
}
.rve-orador img { width: 100%; height: auto; display: block; }
.rve-orador-leyenda {
    font-size: 0.78rem;
    color: var(--suave);
    padding: 6px 14px;
    background: #f8f9fc;
    border-top: 1px solid var(--borde);
    font-style: italic;
    text-align: center;
}

/* ── Cuerpo ─────────────────────────────────────────────── */
.rve-cuerpo {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-top: none;
    padding: 26px 26px 30px;
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--sombra);
}

/* ── Cupo ────────────────────────────────────────────────── */
.rve-cupo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--info-bg);
    border: 1px solid #b8c4de;
    border-radius: var(--r);
    padding: 9px 14px;
    margin-bottom: 18px;
    font-size: 0.86rem;
    color: var(--pri);
}
.rve-cupo-barra-wrap { flex: 1; background: #d0d8e8; border-radius: 4px; height: 6px; overflow: hidden; }
.rve-cupo-barra { height: 100%; background: var(--pri); border-radius: 4px; transition: width .5s ease; }
.rve-cupo-texto { font-weight: 700; white-space: nowrap; }

/* ── Mensajes ────────────────────────────────────────────── */
.rve-mensaje {
    padding: 11px 14px;
    border-radius: var(--r);
    margin-bottom: 16px;
    font-size: 0.9rem;
    display: none;
    align-items: flex-start;
    gap: 9px;
}
.rve-mensaje.visible { display: flex; }
.rve-mensaje-error { background: var(--error-bg); color: var(--error); border-left: 4px solid #dc3545; }
.rve-mensaje-info  { background: var(--info-bg);  color: var(--pri);   border-left: 4px solid var(--pri); }

/* ── Matrícula ───────────────────────────────────────────── */
.rve-seccion-matricula { margin-bottom: 20px; }
.rve-cierre-texto {
    font-size: 0.8rem;
    color: var(--suave);
    margin-top: 8px;
}
.rve-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pri);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 7px;
}
.rve-input-grupo { display: flex; gap: 10px; }
.rve-input {
    flex: 1;
    padding: 11px 13px;
    border: 1.5px solid var(--borde);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 1rem;
    color: var(--texto);
    background: #fafbff;
    outline: none;
    transition: border-color var(--trans), box-shadow var(--trans);
}
.rve-input:focus { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(0,32,91,.10); background: #fff; }
.rve-input-numero { max-width: 140px; font-weight: 600; letter-spacing: 1px; }

/* ── Botones ─────────────────────────────────────────────── */
.rve-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border: none;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
}
.rve-btn-primario { background: var(--pri); color: #fff; }
.rve-btn-primario:hover:not(:disabled) { background: var(--pri-d); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,32,91,.22); }
.rve-btn-acento   { background: var(--acento); color: var(--pri); }
.rve-btn-acento:hover:not(:disabled)   { background: var(--acento-d); transform: translateY(-1px); }
.rve-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.rve-btn-full { width: 100%; justify-content: center; padding: 13px; font-size: 1rem; margin-top: 6px; }
.rve-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rve-spin .7s linear infinite;
    display: inline-block;
}
@keyframes rve-spin { to { transform: rotate(360deg); } }

/* ── Card escribano ──────────────────────────────────────── */
.rve-escribano-card {
    background: #eef2fa;
    border: 1.5px solid var(--pri);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 0;
    display: none;
}
.rve-escribano-card.activa { display: block; margin-bottom: 20px; }
.rve-escrib-nombre { font-size: 1.1rem; font-weight: 700; color: var(--pri); }
.rve-escrib-mat    { font-size: 0.86rem; color: var(--suave); margin-top: 2px; }

/* ── Vino de honor ───────────────────────────────────────── */
.rve-vino-seccion { display: none; margin-bottom: 20px; }
.rve-vino-seccion.activa { display: block; }
.rve-vino-bloque {
    background: #fffbf0;
    border: 1.5px solid var(--acento);
    border-radius: var(--r);
    padding: 18px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.rve-vino-icono { font-size: 1.8rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.rve-vino-contenido { flex: 1; }
.rve-vino-pregunta { font-size: 0.97rem; font-weight: 600; color: var(--texto); line-height: 1.4; margin-bottom: 4px; }
.rve-vino-obligatorio {
    font-size: 0.76rem;
    color: var(--error);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.rve-opciones-vino { display: flex; gap: 10px; }
.rve-opcion-vino { flex: 1; position: relative; }
.rve-opcion-vino input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rve-opcion-vino label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1.5px solid var(--borde);
    border-radius: var(--r);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    background: #fff;
    transition: all var(--trans);
    text-align: center;
}
.rve-opcion-vino input:checked + label { border-color: var(--acento); background: #fff8e8; color: #5a3d00; font-weight: 700; }
.rve-opcion-vino label:hover { border-color: var(--acento); background: #fffdf5; }

/* ── Confirmación ────────────────────────────────────────── */
.rve-confirmacion { display: none; text-align: center; padding: 8px 0 4px; }
.rve-confirmacion.activa { display: block; }
.rve-confirm-logo { max-height: 100px; max-width: 280px; width: auto; display: block; margin: 0 auto 16px; }
.rve-confirm-titulo {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--pri);
    margin-bottom: 4px;
}
.rve-confirm-evento { font-size: 0.95rem; color: var(--suave); margin-bottom: 2px; }
.rve-confirm-fecha  { font-size: 0.88rem; color: var(--suave); margin-bottom: 16px; }
.rve-confirm-tarjeta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--pri);
    letter-spacing: 4px;
    background: var(--info-bg);
    border: 2px solid var(--pri);
    border-radius: var(--r);
    padding: 12px 22px;
    display: inline-block;
    margin: 0 0 12px;
}
.rve-confirm-titular { font-size: 1rem; font-weight: 600; color: var(--texto); margin-bottom: 6px; }
.rve-confirm-vino    { font-size: 0.88rem; color: var(--suave); margin-bottom: 20px; }
.rve-confirm-acciones { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ── Ya inscripto ────────────────────────────────────────── */
.rve-ya-inscripto {
    display: none;
    background: var(--info-bg);
    border: 1.5px solid #b8c4de;
    border-radius: var(--r);
    padding: 22px;
    text-align: center;
}
.rve-ya-inscripto.activa { display: block; }
.rve-ya-inscripto h3 { color: var(--pri); margin-bottom: 12px; }

/* ── Edición de inscripción ──────────────────────────────── */
.rve-edicion-bloque {
    margin-top: 20px;
    border-top: 1px solid var(--borde);
    padding-top: 18px;
    text-align: left;
}
.rve-edicion-titulo {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pri);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.rve-edicion-seccion {
    background: var(--info-bg);
    border: 1px solid #b8c4de;
    border-radius: var(--r);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.rve-edicion-label { font-size: 0.88rem; font-weight: 600; color: var(--texto); margin-bottom: 2px; }
.rve-edicion-exito {
    background: var(--exito-bg);
    color: var(--exito);
    border-left: 4px solid #28a745;
    padding: 10px 14px;
    border-radius: var(--r);
    font-size: 0.88rem;
    margin-bottom: 12px;
    display: none;
}
.rve-edicion-exito.visible { display: block; }
.rve-edicion-cancelar { text-align: center; padding-top: 4px; }
.rve-btn-cancelar-ins {
    background: transparent;
    border: 1.5px solid #dc3545;
    color: #dc3545;
    font-size: 0.88rem;
    padding: 9px 18px;
    width: 100%;
    justify-content: center;
}
.rve-btn-cancelar-ins:hover { background: #fff0f0; }
.rve-cancelar-aviso { font-size: 0.76rem; color: var(--suave); margin-top: 6px; }

/* ── Cancelado ───────────────────────────────────────────── */
.rve-cancelado { text-align: center; padding: 20px 0 10px; }
.rve-cancelado-icono { font-size: 2rem; color: #dc3545; margin-bottom: 8px; }
.rve-cancelado-titulo { font-size: 1.2rem; font-weight: 700; color: #dc3545; margin-bottom: 6px; }
.rve-cancelado-sub { font-size: 0.88rem; color: var(--suave); }

/* ── Cerrado ─────────────────────────────────────────────── */
.rve-cerrado { text-align: center; padding: 36px 16px; }
.rve-cerrado-icono { font-size: 2.8rem; margin-bottom: 14px; }
.rve-cerrado h2    { color: var(--pri); margin-bottom: 8px; }
.rve-cerrado p     { color: var(--suave); font-size: 0.94rem; }

/* ── Footer ──────────────────────────────────────────────── */
.rve-footer {
    text-align: center;
    font-size: 0.78rem;
    color: var(--suave);
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 500px) {
    body { padding: 0 0 40px; }
    .rve-header { border-radius: 0; padding: 16px; flex-direction: column; text-align: center; gap: 10px; }
    .rve-cuerpo { padding: 18px 14px 22px; border-radius: 0 0 var(--r) var(--r); }
    .rve-opciones-vino { flex-direction: column; }
    .rve-confirm-tarjeta { font-size: 1.5rem; letter-spacing: 2px; }
    .rve-vino-bloque { flex-direction: column; gap: 10px; }
}

/* Modal de confirmacion */
.rve-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, .62);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.rve-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.rve-modal {
    background: #fff;
    border-radius: 14px;
    max-width: 420px;
    width: 100%;
    padding: 30px 26px 24px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    transform: scale(.92) translateY(10px);
    transition: transform .22s cubic-bezier(.2, .9, .3, 1);
}
.rve-modal-overlay.visible .rve-modal {
    transform: scale(1) translateY(0);
}
.rve-modal-icono {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: #fff3cd;
    color: #b8860b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}
.rve-modal-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pri);
    margin-bottom: 10px;
}
.rve-modal-texto {
    font-size: .92rem;
    color: var(--suave);
    line-height: 1.55;
    margin-bottom: 14px;
}
.rve-modal-detalle {
    font-size: .9rem;
    font-weight: 600;
    color: var(--pri);
    background: #f0f3f8;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 20px;
}
.rve-modal-detalle:empty { display: none; }
.rve-modal-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rve-modal-btn-no {
    background: var(--pri);
    color: #fff;
    justify-content: center;
    width: 100%;
}
.rve-modal-btn-si {
    background: transparent;
    color: #c0392b;
    border: 1.5px solid #e0a8a0;
    justify-content: center;
    width: 100%;
}
.rve-modal-btn-si:hover {
    background: #fdecea;
}
.rve-modal-btn-si:disabled {
    opacity: .6;
    cursor: default;
}
@media (max-width: 500px) {
    .rve-modal { padding: 26px 20px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   EVENTO PAGO — Estilos del flujo de inscripción
   ══════════════════════════════════════════════════════════════ */

/* Opciones de pago (radio buttons estilizados) */
.rve-opcion-pago {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid #dde3ee;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: #f7f9fc;
}
.rve-opcion-pago:hover {
    background: #eef2fb;
    border-color: var(--pri);
}
.rve-opcion-pago input[type="radio"] {
    accent-color: var(--pri);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}
.rve-opcion-pago:has(input:checked) {
    border-color: var(--pri);
    background: #eef2fb;
}
.rve-opcion-pago-label {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1a2b4a;
}
.rve-opcion-pago-precio-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.rve-opcion-pago-precio {
    font-size: 16px;
    font-weight: 700;
    color: var(--pri);
}
.rve-opcion-pago-cuotas {
    font-size: 11px;
    color: #6b7c93;
    margin-top: 3px;
    font-weight: 500;
}

/* Acompañantes */
.rve-acomp-bloque {
    background: #f7f9fc;
    border: 1px solid #dde3ee;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.rve-acomp-label {
    font-size: 13px;
    font-weight: 600;
    color: #556070;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 10px;
}
.rve-acomp-fila {
    display: flex;
    gap: 10px;
}
.rve-acomp-fila .rve-input {
    flex: 1;
    margin-bottom: 0;
}
@media (max-width: 440px) {
    .rve-acomp-fila { flex-direction: column; gap: 8px; }
}

/* Aviso Ley 404 (JAZ) */
.rve-pago-aviso-ley {
    background: #eff6ff;
    border-left: 4px solid var(--pri);
    border-radius: 0 6px 6px 0;
    padding: 14px 16px;
    font-size: 14px;
    color: #1e3a5f;
    line-height: 1.6;
    margin-top: 16px;
}

/* Aviso Caja (M) */
.rve-pago-aviso-caja {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 16px 18px;
    font-size: 15px;
    color: #78350f;
    line-height: 1.7;
    margin-top: 18px;
}

/* QR por entrada en pantalla de confirmación */
.rve-confirm-qr-bloque {
    background: #f7f9fc;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
}
.rve-qr-label-cat {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #556070;
    margin-bottom: 4px;
}
.rve-qr-nombre-ent {
    font-size: 15px;
    font-weight: 600;
    color: #1a2b4a;
    margin-bottom: 6px;
}

/* Campo contraseña con ojo */
.rve-input-pass-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.rve-input-pass-wrap .rve-input-pass {
    padding-right: 44px;
    width: 100%;
}
.rve-pass-ojo {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 42px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0 6px 6px 0;
    transition: color .15s;
}
.rve-pass-ojo:hover { color: var(--pri); }