/* ============================================================
   estilo_divi.css — Vista apaisada para embeber en Divi (iframe)
   Prefijo rvd- para no colisionar con estilos de Divi/WordPress.
   Dos columnas en desktop, una columna en mobile.
   ============================================================ */

:root {
    --rvd-pri:    #00205B;
    --rvd-acento: #C8A84B;
    --rvd-ok:     #1a7a3a;
    --rvd-err:    #b3261e;
    --rvd-bg:     #f0f3f8;
    --rvd-card:   #ffffff;
    --rvd-borde:  #d8dfeb;
    --rvd-texto:  #1a2b4a;
    --rvd-suave:  #5a6480;
    --rvd-r:      14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--rvd-texto);
    -webkit-font-smoothing: antialiased;
}

.rvd-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
}

.rvd-card {
    background: var(--rvd-card);
    border-radius: var(--rvd-r);
    box-shadow: 0 4px 24px rgba(0, 32, 91, .10);
    overflow: hidden;
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 460px;
}

/* ── Columna izquierda: info del evento ── */
.rvd-info {
    background: linear-gradient(155deg, var(--rvd-pri) 0%, #001640 100%);
    color: #fff;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.rvd-info-inst {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: .72;
    margin-bottom: 18px;
}

.rvd-info-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
    display: block;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.rvd-info-nombre {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.18;
    margin-bottom: 10px;
}

.rvd-info-sub {
    font-size: 1rem;
    opacity: .85;
    line-height: 1.4;
    margin-bottom: 18px;
}

.rvd-info-meta {
    font-size: .9rem;
    opacity: .8;
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 16px;
    margin-top: 16px;
}
.rvd-info-meta div { display: flex; gap: 8px; align-items: flex-start; }
.rvd-info-meta .rvd-ico { opacity: .75; }

.rvd-cupo {
    margin-top: 18px;
}
.rvd-cupo-barra-bg {
    height: 7px;
    background: rgba(255, 255, 255, .18);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.rvd-cupo-barra {
    height: 100%;
    background: var(--rvd-acento);
    width: 0;
    border-radius: 4px;
    transition: width .9s ease;
}
.rvd-cupo-txt { font-size: .78rem; opacity: .75; }

/* ── Columna derecha: formulario ── */
.rvd-form {
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rvd-paso-titulo {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.rvd-paso-sub {
    font-size: .9rem;
    color: var(--rvd-suave);
    margin-bottom: 22px;
}

.rvd-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--rvd-suave);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rvd-input {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--rvd-borde);
    border-radius: 9px;
    font-size: 1rem;
    color: var(--rvd-texto);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
}
.rvd-input:focus {
    border-color: var(--rvd-pri);
    box-shadow: 0 0 0 3px rgba(0, 32, 91, .12);
}

.rvd-fila {
    display: flex;
    gap: 10px;
}
.rvd-fila .rvd-input { flex: 1; }

.rvd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: none;
    border-radius: 9px;
    font-size: .98rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .08s, opacity .15s, background .15s;
    line-height: 1;
}
.rvd-btn:active { transform: translateY(1px); }
.rvd-btn:disabled { opacity: .6; cursor: default; }

.rvd-btn-pri    { background: var(--rvd-pri); color: #fff; }
.rvd-btn-pri:hover { background: #002d7d; }
.rvd-btn-acento { background: var(--rvd-acento); color: #1a1a1a; }
.rvd-btn-acento:hover { background: #d4b65c; }
.rvd-btn-ghost  { background: transparent; border: 1.5px solid var(--rvd-pri); color: var(--rvd-pri); }
.rvd-btn-full   { width: 100%; }

.rvd-mt  { margin-top: 14px; }
.rvd-mt2 { margin-top: 22px; }

.rvd-escrib {
    background: #eef2f9;
    border: 1px solid var(--rvd-borde);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    display: none;
}
.rvd-escrib.activa { display: block; }
.rvd-escrib-nombre { font-weight: 700; font-size: 1.05rem; }
.rvd-escrib-mat    { font-size: .85rem; color: var(--rvd-suave); margin-top: 2px; }

.rvd-seg { margin: 18px 0; display: none; }
.rvd-seg.activa { display: block; }
.rvd-seg-preg { font-weight: 600; margin-bottom: 4px; }
.rvd-seg-oblig { font-size: .76rem; color: var(--rvd-err); margin-bottom: 10px; }
.rvd-seg-ops { display: flex; gap: 10px; }
.rvd-seg-op {
    flex: 1;
    position: relative;
}
.rvd-seg-op input { position: absolute; opacity: 0; }
.rvd-seg-op label {
    display: block;
    text-align: center;
    padding: 11px;
    border: 1.5px solid var(--rvd-borde);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
    transition: all .15s;
}
.rvd-seg-op input:checked + label {
    border-color: var(--rvd-pri);
    background: var(--rvd-pri);
    color: #fff;
}

.rvd-msg {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: .88rem;
    margin: 12px 0;
    display: none;
    line-height: 1.45;
}
.rvd-msg.visible { display: block; }
.rvd-msg-err  { background: #fdecea; color: var(--rvd-err); border: 1px solid #f5c6c2; }
.rvd-msg-info { background: #e7f0fb; color: var(--rvd-pri); border: 1px solid #c3d7f0; }

/* ── Confirmación ── */
.rvd-confirm { display: none; text-align: center; }
.rvd-confirm.activa { display: block; }
.rvd-confirm-check {
    width: 58px; height: 58px;
    background: var(--rvd-ok);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 14px;
}
.rvd-confirm-tit { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; }
.rvd-confirm-tarjeta {
    font-family: "Courier New", monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rvd-pri);
    background: #eef2f9;
    border: 2px dashed var(--rvd-pri);
    border-radius: 9px;
    padding: 10px;
    margin: 14px 0;
    letter-spacing: 2px;
}
.rvd-confirm-qr img {
    border: 7px solid #fff;
    border-radius: 9px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .12);
}
.rvd-confirm-aviso { font-size: .85rem; color: var(--rvd-suave); margin: 10px 0; }

.rvd-cal { margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--rvd-borde); }
.rvd-cal-tit { font-size: .9rem; font-weight: 700; margin-bottom: 10px; }
.rvd-cal-btns { display: flex; flex-direction: column; gap: 8px; }
.rvd-cal-nota { font-size: .76rem; color: var(--rvd-suave); margin-top: 8px; line-height: 1.4; }

.rvd-cargando {
    text-align: center;
    color: var(--rvd-suave);
    font-size: .9rem;
    padding: 20px;
}

/* ── Responsive: una columna en mobile ── */
@media (max-width: 760px) {
    .rvd-wrap { padding: 10px; }
    .rvd-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .rvd-info {
        padding: 26px 22px;
    }
    .rvd-info-nombre { font-size: 1.4rem; }
    .rvd-form { padding: 26px 22px; }
}