/* ============================================================
   Simulador de Préstamos — El Bodegón
   Marca: --eb-red #db0b14 · Montserrat + Inter
   Depende de los tokens definidos en eb-theme.css
   ============================================================ */

/* ── Section ────────────────────────────────────────────── */
.sim-section {
    background: var(--eb-bg);
    padding: 48px 0 64px;
    min-height: 60vh;
}

.sim-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contenedor ancho para la vista de resultados (la tabla necesita más espacio) */
.sim-container--wide { max-width: 1180px; }

/* ── Form card ──────────────────────────────────────────── */
.sim-form-card {
    background: var(--eb-surface);
    border-radius: var(--eb-radius);
    box-shadow: var(--eb-shadow);
    border: 1px solid rgba(219, 11, 20, 0.08);
    overflow: hidden;
    animation: eb-fadeUp 0.5s var(--eb-ease) both;
}

.sim-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    border-bottom: 1px solid var(--eb-line);
    background: linear-gradient(90deg, var(--eb-red-soft) 0%, transparent 100%);
}

.sim-card-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--eb-red), var(--eb-red-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 4px 14px rgba(219, 11, 20, 0.28);
}

.sim-card-title {
    font-family: var(--eb-font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--eb-ink);
    margin: 0 0 3px;
}

.sim-card-desc {
    font-family: var(--eb-font-body);
    font-size: 0.85rem;
    color: var(--eb-gray);
    margin: 0;
}

.sim-card-body {
    padding: 28px 32px 32px;
}

/* ── Form fields ────────────────────────────────────────── */
.sim-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.sim-form-full {
    grid-column: 1 / -1;
}

.sim-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sim-label {
    font-family: var(--eb-font-head);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--eb-red-dark);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sim-label i { margin-right: 5px; }

.sim-input-wrap,
.sim-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.sim-input-icon {
    position: absolute;
    left: 14px;
    color: var(--eb-gray-2);
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 1;
}

/* Aplica estilos a los inputs/select aunque conserven la clase form-control de MVC */
.sim-input-wrap .form-control,
.sim-select-wrap .form-control,
.sim-input,
.sim-select {
    width: 100%;
    height: 50px;
    padding: 0 14px 0 40px;
    border: 1.5px solid var(--eb-line);
    border-radius: var(--eb-radius-sm);
    font-family: var(--eb-font-body);
    font-size: 0.95rem;
    color: var(--eb-ink);
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.sim-input-wrap .form-control:focus,
.sim-select-wrap .form-control:focus,
.sim-input:focus,
.sim-select:focus {
    border-color: var(--eb-red);
    box-shadow: 0 0 0 3px rgba(219, 11, 20, 0.12);
    background: #fff;
}

.sim-input-wrap .form-control:disabled,
.sim-select-wrap .form-control:disabled {
    background: #f0f0f0;
    color: var(--eb-gray-2);
    cursor: not-allowed;
}

.sim-select-wrap .form-control,
.sim-select {
    padding-right: 36px;
    cursor: pointer;
}

.sim-select-wrap::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 14px;
    color: var(--eb-gray-2);
    pointer-events: none;
    font-size: 0.85rem;
    z-index: 2;
}

.sim-hint {
    font-family: var(--eb-font-body);
    font-size: 0.78rem;
    color: var(--eb-gray-2);
}

.sim-error-msg,
.sim-error-msg.text-danger {
    font-family: var(--eb-font-body);
    font-size: 0.78rem;
    color: var(--eb-red);
    margin-top: 2px;
}

/* ── Submit button ──────────────────────────────────────── */
.sim-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* Botón principal: hereda .eb-btn pero respeta el input[type=submit] */
.sim-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--eb-red), var(--eb-red-dark));
    color: #fff;
    font-family: var(--eb-font-head);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 14px 32px;
    border: none;
    border-radius: var(--eb-radius-sm);
    cursor: pointer;
    transition: transform 0.2s var(--eb-ease), box-shadow 0.2s var(--eb-ease);
    box-shadow: 0 4px 16px rgba(219, 11, 20, 0.30);
    letter-spacing: 0.02em;
}

.sim-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--eb-shadow-hover);
    color: #fff;
}

.sim-btn-primary:active { transform: translateY(0); }

.sim-btn-primary:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
}

.sim-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--eb-red);
    font-family: var(--eb-font-head);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 12px 24px;
    border: 1.5px solid rgba(219, 11, 20, 0.30);
    border-radius: var(--eb-radius-sm);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.sim-btn-secondary:hover {
    background: var(--eb-red-soft);
    border-color: var(--eb-red);
    transform: translateY(-1px);
    color: var(--eb-red);
    text-decoration: none;
}

/* ── Resultados ─────────────────────────────────────────── */
.sim-results {
    animation: eb-fadeUp 0.5s var(--eb-ease) both;
}

.sim-results-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.sim-results-title {
    font-family: var(--eb-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--eb-ink);
    margin: 0;
}

.sim-results-title span { color: var(--eb-red); }

/* Métricas resumen */
.sim-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.sim-metric {
    background: var(--eb-surface);
    border-radius: 12px;
    border: 1px solid var(--eb-line);
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(219, 11, 20, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: eb-fadeUp 0.4s var(--eb-ease) both;
}

.sim-metric:nth-child(1) { animation-delay: 0.05s; }
.sim-metric:nth-child(2) { animation-delay: 0.10s; }
.sim-metric:nth-child(3) { animation-delay: 0.15s; }
.sim-metric:nth-child(4) { animation-delay: 0.20s; }

.sim-metric:hover {
    transform: translateY(-3px);
    box-shadow: var(--eb-shadow-hover);
}

.sim-metric--accent {
    background: linear-gradient(135deg, var(--eb-red), var(--eb-red-dark));
    border-color: transparent;
}

.sim-metric--accent .sim-metric-label,
.sim-metric--accent .sim-metric-value,
.sim-metric--accent .sim-metric-sub {
    color: #fff;
}

.sim-metric--accent .sim-metric-label { opacity: 0.85; }
.sim-metric--accent .sim-metric-sub { opacity: 0.85; }

.sim-metric-label {
    font-family: var(--eb-font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--eb-gray-2);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sim-metric-label i { font-size: 0.75rem; }

.sim-metric-value {
    font-family: var(--eb-font-head);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--eb-red);
    margin: 0;
    line-height: 1.1;
}

.sim-metric-sub {
    font-family: var(--eb-font-body);
    font-size: 0.75rem;
    color: var(--eb-gray-2);
    margin: 3px 0 0;
}

/* Tarjeta de tabla del plan de pagos */
.sim-table-card {
    background: var(--eb-surface);
    border-radius: var(--eb-radius);
    border: 1px solid var(--eb-line);
    box-shadow: var(--eb-shadow);
    overflow: hidden;
    margin-bottom: 28px;
    animation: eb-fadeUp 0.5s 0.2s var(--eb-ease) both;
}

.sim-table-head-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--eb-line);
    background: linear-gradient(90deg, var(--eb-red-soft) 0%, transparent 100%);
}

.sim-table-head-title {
    font-family: var(--eb-font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--eb-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sim-table-head-title i { color: var(--eb-red); }

.sim-table-badge {
    font-family: var(--eb-font-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(219, 11, 20, 0.10);
    color: var(--eb-red);
    padding: 4px 12px;
    border-radius: 50px;
}

.sim-table-scroll { overflow-x: auto; }

/* La tabla conserva clases bootstrap + id de exportación */
.sim-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--eb-font-body);
    font-size: 0.85rem;
    margin: 0;
    background: var(--eb-surface);
}

.sim-table thead tr { background: var(--eb-bg); }

.sim-table thead th,
.sim-table thead td {
    padding: 12px 16px;
    font-family: var(--eb-font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--eb-red-dark);
    white-space: nowrap;
    text-align: left;
    border-bottom: 2px solid var(--eb-line);
}

.sim-table thead th:first-child,
.sim-table thead td:first-child { text-align: center; }

.sim-table tbody tr {
    border-bottom: 1px solid var(--eb-line);
    transition: background 0.15s;
}

.sim-table tbody tr:last-child { border-bottom: none; }
.sim-table tbody tr:hover { background: var(--eb-red-soft); }

.sim-table tbody td {
    padding: 13px 16px;
    color: var(--eb-ink);
    white-space: nowrap;
}

.sim-table tbody td:first-child {
    text-align: center;
    font-family: var(--eb-font-head);
    font-weight: 700;
    font-size: 0.8rem;
}

.sim-table-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 50px;
    background: rgba(219, 11, 20, 0.10);
    color: var(--eb-red);
    font-size: 0.78rem;
    font-weight: 800;
}

.sim-table-money {
    font-family: var(--eb-font-head);
    font-weight: 600;
    color: var(--eb-red);
}

.sim-table-money--total {
    font-weight: 800;
    color: var(--eb-red-dark);
}

.sim-table-money--interest { color: var(--eb-gray-2); }

/* ── Volver ─────────────────────────────────────────────── */
.sim-back {
    text-align: center;
    margin-top: 40px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
    .sim-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .sim-form-grid    { grid-template-columns: 1fr; }
    .sim-form-full    { grid-column: 1; }
    .sim-card-header,
    .sim-card-body    { padding: 18px; }
    .sim-form-actions { justify-content: stretch; }
    .sim-btn-primary  { width: 100%; justify-content: center; }
    .sim-results-actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 440px) {
    .sim-summary { grid-template-columns: 1fr; }
}