/* ============================================
   SIMULADORES FINANCIEROS - CSS
   ============================================ */

/* ===== SECCIÓN HOME ===== */
.seccion-simuladores { background: linear-gradient(135deg, #fff8f4 0%, #fff 50%, #f0f7ff 100%); }

.sim-badge { display: inline-block; color: black; padding: 6px 18px; border-radius: 25px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

.sim-card { background: #fff; border-radius: var(--radio-tarjeta); padding: 25px 24px; height: 100%; border: 1px solid var(--color-gris-borde); transition: all 0.3s ease; display: flex; flex-direction: column; }
.sim-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-suave); border-color: var(--color-primario); }

.sim-card-icon { width: 56px; height: 56px; min-width: 56px; background: rgba(232, 113, 43, 0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; }

.sim-card-btn { background: transparent; border: 1.5px solid var(--color-primario); color: var(--color-primario); padding: 8px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; margin-top: auto; display: inline-flex; align-items: center; gap: 6px;justify-content: end; }
.sim-card-btn:hover { background: var(--color-primario); color: #fff; transform: translateX(4px); }
.sim-card-btn span { font-size: 18px; transition: transform 0.2s; }
.sim-card-btn:hover span { transform: translateX(4px); }

.sim-card-btn-disabled { border-color: #dee2e6; color: #adb5bd; cursor: not-allowed; }
.sim-card-btn-disabled:hover { background: transparent; color: #adb5bd; transform: none; }

/* ===== MODAL SIMULADOR ===== */
.sim-modal { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sim-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }

.sim-modal-content { position: relative; z-index: 2; background: #fff; border-radius: var(--radio-tarjeta); max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; animation: simSlideUp 0.3s ease; }

@keyframes simSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.sim-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--color-gris-borde); }
.sim-modal-close { background: none; border: none; font-size: 28px; color: #6C757D; cursor: pointer; padding: 0 5px; line-height: 1; transition: color 0.2s; }
.sim-modal-close:hover { color: #333; }

.sim-modal-body { padding: 28px; }

/* ===== CAMPOS DE INPUT ===== */
.sim-campo label { display: block; font-size: 13px; color: #374151; margin-bottom: 6px; }

.sim-input-group { display: flex; align-items: center; border: 1px solid var(--color-gris-borde); border-radius: 10px; overflow: hidden; transition: all 0.2s; background: var(--color-gris-claro); }
.sim-input-group:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(232, 113, 43, 0.1); background: #fff; }

.sim-input-prefix { padding: 0 0 0 14px; color: #6C757D; font-size: 14px; }
.sim-input-suffix { padding: 0 14px 0 0; color: #6C757D; font-size: 13px; white-space: nowrap; }

.sim-input { border: none; background: transparent; padding: 11px 10px; font-size: 14px; outline: none; flex: 1; min-width: 0; }

select.sim-input { border: 1px solid var(--color-gris-borde); border-radius: 10px; padding: 11px 14px; background: var(--color-gris-claro); width: 100%; cursor: pointer; transition: all 0.2s; }
select.sim-input:focus { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(232, 113, 43, 0.1); }

.sim-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 16px; border: 1px solid var(--color-gris-borde); border-radius: 8px; transition: all 0.2s; }
.sim-radio:has(input:checked) { border-color: var(--color-primario); background: rgba(232, 113, 43, 0.05); }
.sim-radio input { accent-color: var(--color-primario); }

/* ===== BOTÓN CALCULAR ===== */
.sim-btn-calcular { background: var(--color-primario); color: #fff; border: none; padding: 14px 24px; border-radius: 10px; font-size: 15px; cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.3px; }
.sim-btn-calcular:hover { background: var(--color-primario-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 113, 43, 0.3); }

/* ===== RESULTADOS ===== */
.sim-resultado { animation: simFadeIn 0.4s ease; }
@keyframes simFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sim-resultado-header { text-align: center; padding: 20px; background: linear-gradient(135deg, #fff8f4, #fff); border-radius: 12px; border: 1px solid rgba(232, 113, 43, 0.1); margin-bottom: 16px; }

.sim-resultado-detalle { display: flex; flex-direction: column; gap: 10px; }
.sim-resultado-fila { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
.sim-resultado-fila span:first-child { color: #6C757D; }
.sim-resultado-total { border-top: 2px solid var(--color-primario); padding-top: 12px; margin-top: 4px; }

.sim-btn-asesoria { display: inline-block; background: #25D366; color: #fff; padding: 10px 24px; border-radius: 25px; font-size: 13px; text-decoration: none; transition: all 0.2s; margin-top: 8px; }
.sim-btn-asesoria:hover { background: #1fb855; color: #fff; transform: scale(1.03); }

.sim-placeholder { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 300px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .sim-modal-content { max-width: 95%; margin: 10px; }
    .sim-modal-body { padding: 20px; }
    .sim-resultado-header h2 { font-size: 28px !important; }
    .sim-placeholder { min-height: 200px; padding: 30px 15px; }
}

@media (max-width: 575px) {
    .sim-modal { padding: 10px; }
    .sim-modal-content { max-height: 95vh; }
    .sim-modal-header { padding: 15px 18px; }
    .sim-modal-header h3 { font-size: 16px; }
    .sim-modal-body { padding: 15px; }
    .sim-card { padding: 20px 18px; }
}