body{ background:#ffffff; margin:0; font-family:Roboto, Arial, sans-serif; }

:root{
    --field-h: 54px;
    --field-radius: 24px;
    --field-border: 1px solid rgba(42,42,134,.45);
    --field-border-focus: 1px solid rgba(42,42,134,.85);
    --field-focus-ring: 0 0 0 3px rgba(34,69,199,.12);
    --field-left-gap: 56px;
    --font-size-fields: 20.25px;
    --font-size-input-content: 22.275px;
}

/* Cabecera */
.rp-header{
    background: url('../../images/registro/fondo_cabecera.png') center/cover no-repeat;
    color:#fff;
    padding:75px 16px 62px;
    display:flex; align-items:center; gap:10px;
    position:relative; z-index:1;
}
.rp-back{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.35); cursor:pointer;
    position:absolute; top:14px; left:14px;
}
.rp-header img{
    height:48.6px;
    object-fit:contain;
    position:absolute; top:10px; left:68px;
}
.rp-title{
    text-transform: capitalize;
    font-size:25.5px;
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:26px; color:#fff; font-weight:800; letter-spacing:.5px;
    text-shadow: 0 8px 18px rgba(0,60,255,0.28);
    pointer-events:none;
}

/* Caja gris */
.contenedor_principal{
    display:flex; justify-content:center; position:relative; z-index:2;
    margin-top:-26px;
}

.contenedor_principal form{
    text-align: -moz-center;
    text-align: center;
    text-align: -webkit-center;
}

.contenedor_secundario{
    width:92%; max-width:560px; background:#f5f5f7; border-radius:24px;
    padding:24px 18px 24px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
    position:relative;
}

/* Campos */
.rp-field{
    position:relative; background:#fff; border:var(--field-border); border-radius:var(--field-radius);
    height:var(--field-h); display:flex; align-items:center;
    padding:0 16px 0 var(--field-left-gap); margin:12px 8px;
    transition:box-shadow .15s ease,border-color .15s ease;
    font-size:var(--font-size-fields);
}
.rp-field:focus-within{ border:var(--field-border-focus); box-shadow:var(--field-focus-ring); }
.rp-icon{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    transition: color .35s ease;
    color:#004aad;
}
.rp-field:focus-within .rp-icon i,
.rp-phone:focus-within .rp-icon i,
.rp-prefix:focus-within .rp-icon i,
.rp-mobile:focus-within .rp-icon i,
.rp-prefix.is-open .rp-icon i{
    color:#ff9800 !important;
}

.rp-input,
.rp-tel,
.select-wrapper input.select-dropdown {
    width:100%; border:none!important; outline:none!important; box-shadow:none!important;
    background:transparent; margin:0; padding:0;
    height:calc(var(--field-h) - 2px);
    font-size:var(--font-size-input-content);
    display:flex; align-items:center; text-align:left;
    line-height:var(--field-h);
}
select.rp-select{ opacity: 0 }
.select-wrapper{ width:100%; }
.rp-input::placeholder,
.rp-tel::placeholder { text-align:left; opacity:.9; font-size:var(--font-size-fields); line-height:var(--field-h); }

/* Autocompletado blanco */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: inherit !important;
}

/* Teléfono */
.rp-phone{ display:flex; gap:14px; align-items:center; margin:12px 8px; }
.rp-prefix{
    flex:1 1 38%;
    min-width:0; background:#fff; border:var(--field-border); border-radius:var(--field-radius);
    height:var(--field-h); display:flex; align-items:center;
    padding-left:var(--field-left-gap); padding-right:14px;
    position:relative;
}
.rp-mobile{
    flex:2 1 62%;
    background:#fff; border:var(--field-border); border-radius:var(--field-radius);
    height:var(--field-h); display:flex; align-items:center; padding:0 16px;
}

/* --- Selector de país --- */
.rp-prefix-display{ cursor:pointer; user-select:none; }
.country-dropdown{
    position:absolute; left:0; top:calc(100% + 8px);
    background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:16px;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    z-index:30; display:none; overflow:hidden;
    min-width:360px;
}
.country-dropdown.is-visible{ display:block; }
.country-search{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08); }
.country-search input{
    width:100%; height:40px; border:1px solid rgba(0,0,0,.15); border-radius:10px;
    padding:0 12px; outline:none; font-size:16px;
}
.country-list{ max-height:320px; overflow:auto; }
.country-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; cursor:pointer; transition:background .12s ease;
    white-space:nowrap;
}
.country-item:hover{ background:#f4f6ff; }
.country-flag{ width:26px; text-align:center; font-size:20px; }
.country-name{ flex:1; font-size:16px; overflow:hidden; text-overflow:ellipsis; }
.country-dial{ font-weight:700; font-size:15px; color:#111; }

/* Nivel + género */
.rp-row{ display:flex; gap:34px; align-items:center; margin:0 8px; }
.rp-col{ flex:1; position:relative; }
.rp-gender{ display:flex; align-items:center; gap:8px; position:relative; }
.rp-gender .rp-gender-btn{
    width:var(--field-h); height:var(--field-h); border-radius:50%;
    border:1.6px solid rgba(42,42,134,.6);
    background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:.18s ease, transform .08s ease, box-shadow .12s ease;
}
.rp-gender .rp-gender-btn.is-active{
    background:#e9ecff; box-shadow:inset 0 0 0 3px rgba(34,69,199,.12);
}
.rp-gender .rp-gender-btn.pressed{
    transform:scale(.94); box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/* Selector de Nivel con persiana */
.rp-level-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; user-select:none; gap:10px; padding-right:6px;
    font-size:var(--font-size-input-content);
}
.rp-level-text{ color:#1a237e; opacity:.85; }
.rp-level-text.has-value{ font-weight:700; opacity:1; }
.rp-level-caret i{ font-size:22px; color:#2a2a86; }

.rp-level-panel{
    position:absolute; left:8px; right:8px; top:0;
    background:#e9e9ee; border-radius:12px; box-shadow:0 10px 26px rgba(0,0,0,.12);
    overflow:hidden; display:none; max-height:0; transition:max-height .28s ease;
    z-index:40;
}
.rp-level-panel-inner{
    padding:14px 18px; display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; align-items:center;
}
.rp-level-item{
    background:#fff; border:2px solid #2a2a86; border-radius:50%;
    width:74px; height:74px; display:flex; align-items:center; justify-content:center; margin:0 auto 8px;
    transition:transform .08s ease, box-shadow .12s ease;
}
.rp-level-item:active{ transform:scale(.94); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.rp-level-item.is-active{ outline:3px dashed #f7b500; outline-offset:4px; }
.rp-level-label{ text-align:center; font-weight:600; color:#1b1b1b; }

.rp-bars{ display:flex; gap:3px; align-items:flex-end; }
.rp-bar{ width:6px; background:#ff6a00; border:2px solid #1c2c8d; border-radius:2px; }
.rp-bar.b1{ height:18px; }
.rp-bar.b2{ height:28px; }
.rp-bar.b3{ height:38px; }
.rp-bar.b4{ height:48px; }

/* Legal + botón */
.rp-legal{ text-align:center; color:#1d1791; font-size:18px; line-height:1.35; padding:18px 12px 0; }
.rp-legal a{ color:#1d1791; text-decoration:underline; cursor:pointer; }
.rp-submit{ display:flex; justify-content:center; margin-top:12px; margin-bottom:18px; }
.rp-submit .btn-large{
    background:#fff; color:#12127a; border:1.8px solid rgba(18,18,122,.8);
    border-radius:28px; padding:0 50px; height:46px; line-height:44px;
    font-size:18px; font-weight:700; text-transform:none; width:auto;
}

.toggle-pass{ position:absolute; right:14px; cursor:pointer; user-select:none; }

/* Mensajes de error */
.rp-error-msg{
    position:relative;
    margin:-6px 12px 8px 12px;
    padding:6px 10px;
    font-size:14.5px;
    line-height:1.2;
    color:#c62828;
    background:#ffebee;
    border:1px solid rgba(198,40,40,.25);
    border-radius:10px;
    box-shadow:0 4px 10px rgba(198,40,40,.08);
    opacity:0; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease;
    max-width:100%;
    word-wrap:break-word;
    white-space:normal;
}
.rp-error-msg.is-visible{ opacity:1; transform:translateY(0); }

.rp-row-msgs{ display:flex; gap:34px; margin:0 8px 6px 8px; }
.rp-row-msgs > div{ flex:1; position:relative; }
.rp-row-msgs > div.align-right{ display:flex; justify-content:flex-end; }
.rp-row-msgs .rp-error-msg{ margin:6px 0 0 0; }
.rp-row-msgs > div.align-right .rp-error-msg{ text-align:right; }

/*JMAM: Nuevo Modal Idiomas*/
/* Asegurar posicionamiento del trigger dentro de la cabecera */
.rp-header{position:relative;}

/* Trigger de idioma en cabecera */
.rp-lang-trigger{
    position:absolute; top:25px; right:25px; z-index:50;
}
.btn_default_language{
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.1);
}
.btn_default_language .material-icons{font-size:20px}

/* Persiana idiomas (bottom-sheet) */
.lang-sheet{
    position:fixed; inset:0; z-index:9999;
    display:none; opacity:0; pointer-events:none;
}
.lang-sheet.open{ display:block; }
.lang-sheet.show{ opacity:1; pointer-events:auto; }

/* Capas internas con z-index para asegurar la X por encima del botón superior */
.lang-sheet__scrim{
    position:absolute; inset:0; z-index:0;
    background:rgba(0,0,0,.45); backdrop-filter:saturate(1.2) blur(2px);
    transition:opacity .25s ease;
    opacity:0;
}
.lang-sheet.show .lang-sheet__scrim{ opacity:1; }

.lang-sheet__panel{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    max-height:80vh; background:#fff; color:#111;
    border-top-left-radius:16px; border-top-right-radius:16px;
    box-shadow:0 -10px 30px rgba(0,0,0,.25);
    transform:translateY(100%); transition:transform .28s ease;
    display:flex; flex-direction:column;
    padding:12px 12px calc(16px + env(safe-area-inset-bottom));
}
.lang-sheet.show .lang-sheet__panel{ transform:translateY(0); }

/* Botón de cierre superior (por encima del botón de cabecera) */
.lang-sheet__closeTop{
    position:fixed;
    top:calc(10px + env(safe-area-inset-top));
    right:10px;
    z-index:2;
    border:none; background:rgba(0,0,0,.55);
    color:#fff; border-radius:999px; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}
.lang-sheet__closeTop i{font-size:22px; line-height:1}

/* Indicador de arrastre (línea negra centrada) */
.lang-sheet__drag{
    width:48px; height:4px; border-radius:4px; background:#111;
    margin:10px auto 12px;
}

/* GRID de 2 columnas */
.lang-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:6px 10px;
    padding:6px; overflow:auto;
}
.lang-cell{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border:1px solid rgba(0,0,0,.06);
    border-radius:12px; text-decoration:none; background:#fff;
}
.lang-cell:active{opacity:.85}

/* Bandera redonda */
.lang-flag{
    width:30px; height:30px; border-radius:50%; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(0,0,0,.1);
}
.lang-flag .lang-sm{display:block; transform:scale(1.15);}

/* Nombre del idioma: negro y 50% más grande */
.lang-name{
    font-size:1.5rem; line-height:1.1; color:#111; font-weight:700;
}

/* Forzar árabe alineado a la izquierda (sin RTL) */
.lang-cell[data-lang="ar"]{ direction:ltr; text-align:left; }

/* Modo oscuro */
.dark .lang-sheet__panel,
[data-theme="dark"] .lang-sheet__panel,
body.dark-mode .lang-sheet__panel{ background:#1e1e1e; }
.dark .lang-name,
[data-theme="dark"] .lang-name,
body.dark-mode .lang-name{ color:#fff; }
.dark .lang-cell{ background:#222; border-color:#2f2f2f; }
.dark .lang-sheet__drag{ background:#bbb; }

@media (min-width:768px){
    .lang-sheet__panel{ max-width:420px; margin:0 auto; border-radius:16px; }
}