/* ============================================
   Inscripciones RD - estilos
   Paleta: navy #14213d, amber #fca311
   ============================================ */

:root {
    --navy: #14213d;
    --navy-700: #1d2c4d;
    --amber: #fca311;
    --amber-600: #e8920a;
}

/* ---------- Animaciones ---------- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.form-step:not(.hidden) { animation: fadeIn 0.35s ease-out; }

/* ---------- Inputs / labels (componentes via @apply-like manual) ---------- */
.lbl { display:block; font-size:.8rem; font-weight:600; color:#334155; margin-bottom:.35rem; }
.lbl-sm { display:block; font-size:.72rem; font-weight:600; color:#475569; margin-bottom:.3rem; }
.hint { font-size:.7rem; color:#94a3b8; font-weight:400; }

.inp, .inp-sm {
    width:100%;
    border:1px solid #e2e8f0;
    border-radius:.75rem;
    outline:none;
    color:#0f172a;
    transition:border-color .2s, box-shadow .2s, transform .2s;
    background:#fff;
}
.inp { padding:.65rem .9rem; font-size:.9rem; }
.inp-sm { padding:.55rem .75rem; font-size:.82rem; }

.inp:focus, .inp-sm:focus, .custom-select-trigger:focus, .search-input:focus, select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(252,163,17,.18);
}
.inp::placeholder, .inp-sm::placeholder { color:#94a3b8; }

/* ---------- Radio cards ---------- */
.radio-card {
    display:flex; align-items:center; gap:.5rem;
    padding:.55rem 1rem; border:1px solid #e2e8f0; border-radius:.75rem;
    cursor:pointer; font-size:.85rem; color:#475569; font-weight:500;
    transition:all .2s; flex:1; justify-content:center;
}
.radio-card:hover { border-color:#cbd5e1; }
.radio-card input[type="radio"] { accent-color: var(--amber); width:1rem; height:1rem; }
.radio-card:has(input:checked) {
    border-color: var(--amber);
    background: rgba(252,163,17,.08);
    color: var(--navy);
    font-weight:600;
}

/* ---------- Botones de navegacion ---------- */
.btn-back, .btn-next, .btn-submit {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.7rem 1.4rem; border-radius:.85rem; font-weight:600; font-size:.9rem;
    transition: all .2s; cursor:pointer;
}
/* .hidden debe prevalecer sobre el display de los botones */
.btn-back.hidden, .btn-next.hidden, .btn-submit.hidden, .hidden { display:none !important; }
.btn-back {
    background:transparent; color:#64748b; border:1px solid #e2e8f0;
}
.btn-back:hover { background:#f8fafc; color:var(--navy); }
.btn-back:disabled, .btn-back.invisible { visibility:hidden; }

.btn-next {
    background: linear-gradient(135deg, var(--amber), var(--amber-600));
    color: var(--navy); box-shadow:0 8px 20px -6px rgba(252,163,17,.55);
    margin-left:auto;
}
.btn-next:hover { transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(252,163,17,.65); }

.btn-submit {
    background: var(--navy); color:#fff; box-shadow:0 8px 20px -6px rgba(20,33,61,.55);
    margin-left:auto;
}
.btn-submit:hover { background:var(--navy-700); transform:translateY(-1px); }

/* ---------- Stepper ---------- */
.step-track { display:flex; align-items:center; gap:.5rem; }
.step-node {
    display:flex; align-items:center; justify-content:center;
    width:2rem; height:2rem; border-radius:9999px; font-size:.8rem; font-weight:700;
    background:#e2e8f0; color:#94a3b8; transition:all .3s; flex-shrink:0;
}
.step-node.active { background:var(--amber); color:var(--navy); box-shadow:0 0 0 4px rgba(252,163,17,.2); }
.step-node.done { background:var(--navy); color:#fff; }
.step-line { flex:1; height:3px; border-radius:9999px; background:#e2e8f0; transition:background .3s; }
.step-line.filled { background:var(--navy); }
.step-label { font-size:.7rem; color:#94a3b8; font-weight:600; margin-top:.35rem; text-align:center; }
.step-label.active { color:var(--navy); }

/* ---------- Selects nativos ocultos ---------- */
.native-select {
    position:absolute; opacity:0; height:0; width:0; pointer-events:none;
}
.searchable-select { position:relative; }

.custom-select-trigger {
    width:100%; padding:.65rem .9rem; border:1px solid #e2e8f0; border-radius:.75rem;
    background:#fff; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    font-size:.9rem; transition:border-color .2s, box-shadow .2s;
}
.custom-select-trigger:hover { border-color:#cbd5e1; }

.custom-select-dropdown {
    animation: fadeIn 0.15s ease-out;
    position:fixed; z-index:9999;
    background:#fff; border:1px solid #e2e8f0; border-radius:.75rem;
    box-shadow:0 12px 30px -8px rgba(15,23,42,.35); max-height:16rem; overflow:hidden;
}
.options-container { overflow-y:auto; max-height:12rem; }
.options-container::-webkit-scrollbar { width:6px; }
.options-container::-webkit-scrollbar-track { background:#f1f5f9; }
.options-container::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.opt-item { padding:.5rem 1rem; font-size:.85rem; color:#334155; cursor:pointer; transition:background .15s; }
.opt-item:hover { background:rgba(252,163,17,.12); color:var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .custom-select-dropdown { max-height:50vh; }
    .options-container { max-height:35vh; }
}