/* ================================================
   COMPONENTES — Simulador (Vue) + Form (React)
   css/components.css
   ================================================ */

/* ── SIMULADOR VUE ────────────────────────────────────────── */

.sim-wrapper {
  background: #fff;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  width: 100%;
}

.sim-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sim-left {
  padding: 28px;
  border-right: 1px solid #f0f0f0;
}

.sim-right {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.sim-badge-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.sim-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #031C35;
  margin-bottom: 20px;
}

.sim-badge {
  background: #D90128;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Loading */
.sim-loading {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 24px 0;
}
.sim-dot {
  width: 8px; height: 8px;
  background: #E03232;
  border-radius: 50%;
  animation: sim-bounce 0.9s infinite ease-in-out;
}
.sim-dot:nth-child(2) { animation-delay: 0.15s; }
.sim-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes sim-bounce { 0%,80%,100%{transform:scale(0.6)} 40%{transform:scale(1)} }

/* Monto */
.sim-field-group { margin-bottom: 18px; }
.sim-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}
.sim-amount-display {
  font-family: var(--font-cond, 'Quicksand', sans-serif);
  font-size: 52px;
  font-weight: 900;
  color: #031C35;
  margin-bottom: 10px;
  line-height: 1;
}
.sim-range {
  width: 100%;
  accent-color: #E03232;
  cursor: pointer;
  margin-bottom: 6px;
  display: block;
}
.sim-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #bbb;
}

/* Cuotas — select */
.sim-cuotas-row { margin-bottom: 20px; }
.sim-select-vue {
  width: 100%;
  margin-top: 8px;
  border: 1.5px solid #ddd;
  background: #fff;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #031C35;
  font-family: var(--font-body, 'Nunito', sans-serif);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23031C35' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.sim-select-vue:focus { border-color: #D90128; }

/* Resultado */
.sim-resultado {
  background: #f8f8f8;
  padding: 16px;
  margin-bottom: 18px;
  transition: opacity 0.2s;
}
.sim-resultado.loading,
.sim-resultado--loading { opacity: 0.5; }
.sim-resultado-single { display: block; }
.sim-resultado-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.sim-resultado-label {
  font-size: 10px; color: #999;
  text-transform: uppercase; letter-spacing: 0.5px;
  display: block; margin-bottom: 4px;
}
.sim-resultado-main,
.sim-resultado-val--main {
  font-family: var(--font-cond, 'Quicksand', sans-serif);
  font-size: clamp(20px, 4vw, 28px); font-weight: 900; color: #D90128; display: block;
  white-space: nowrap;
}
.sim-resultado-sec,
.sim-resultado-val {
  font-family: var(--font-cond, 'Quicksand', sans-serif);
  font-size: clamp(20px, 4vw, 28px); font-weight: 900; color: #031C35; display: block;
  white-space: nowrap;
}
.sim-tasa-row,
.sim-tasa-info {
  display: flex; gap: 12px;
  font-size: 10px; color: #aaa;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #eee;
}
.sim-dev-note,
.sim-dev-badge {
  font-size: 10px; color: #E03232;
  background: #fff3f3; padding: 4px 8px;
  margin-top: 8px; font-weight: 600;
}

/* Formulario Vue */
.sim-form { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sim-input {
  border: 1px solid #ddd; padding: 13px 16px;
  font-size: 14px; font-family: var(--font-body, 'Montserrat', sans-serif);
  outline: none; transition: border-color 0.2s; background: #fff;
}
.sim-input:focus { border-color: #D90128; }
.sim-input.error,
.sim-input--error { border-color: #D90128; background: #fff8f8; }
.sim-err,
.sim-error { font-size: 11px; color: #D90128; margin-top: -6px; }
.sim-err-global,
.sim-error-global { font-size: 12px; color: #D90128; text-align: center; padding: 8px; background: #fff3f3; }

@keyframes sim-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(217,1,40,0.3); }
  50%       { box-shadow: 0 4px 28px rgba(217,1,40,0.55); }
}

.sim-cta {
  background: #D90128; color: #fff; border: none;
  width: 100%; padding: 16px;
  font-size: 15px; font-weight: 700; font-family: var(--font-body, 'Montserrat', sans-serif);
  cursor: pointer; letter-spacing: 0.3px;
  transition: background 0.2s, transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: auto;
  animation: sim-pulse 2s ease-in-out infinite;
}
.sim-cta:hover:not(:disabled) {
  background: #b3011f;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(217,1,40,0.5);
  animation: none;
}
.sim-cta:active:not(:disabled) { transform: translateY(0) scale(0.98); animation: none; }
.sim-cta:disabled { opacity: 0.6; cursor: not-allowed; animation: none; }

/* Success Vue */
.sim-success { text-align: center; padding: 16px 0; }
.sim-ok-icon { font-size: 36px; color: #28a745; margin-bottom: 10px; }
.sim-ok-title { font-size: 16px; font-weight: 700; color: #0d1b3e; margin-bottom: 6px; }
.sim-ok-sub { font-size: 13px; color: #666; margin-bottom: 16px; }
.sim-wsp {
  display: inline-block;
  background: #25D366; color: #fff;
  padding: 10px 18px; font-size: 13px; font-weight: 700;
  font-family: 'Barlow', sans-serif; text-decoration: none;
}

/* ── FORMULARIO REACT ─────────────────────────────────────── */

.rf-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Barlow', sans-serif;
}

.rf-resumen {
  background: #f8f8f8;
  border-left: 3px solid #E03232;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rf-resumen-label { font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
.rf-resumen-val { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: #0d1b3e; }

.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.rf-group { display: flex; flex-direction: column; gap: 6px; }
.rf-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #0d1b3e; }
.rf-required { color: #E03232; }
.rf-input {
  border: 1px solid #ddd;
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
  width: 100%;
}
.rf-input:focus { border-color: #E03232; }
.rf-input--error { border-color: #E03232; background: #fff8f8; }
.rf-select { cursor: pointer; }
.rf-error { font-size: 11px; color: #E03232; }

.rf-btn-primary {
  background: #E03232;
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rf-btn-primary:hover { background: #b82424; }
.rf-btn-primary:disabled,
.rf-btn--loading { opacity: 0.7; cursor: not-allowed; }
.rf-btn-submit { width: 100%; }
.rf-spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.rf-disclaimer {
  font-size: 11px;
  color: #aaa;
  line-height: 1.6;
  text-align: center;
}

/* Success React */
.rf-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  font-family: 'Barlow', sans-serif;
}
.rf-success-check {
  width: 56px; height: 56px;
  background: #28a745;
  color: #fff;
  font-size: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.rf-success-title { font-size: 20px; font-weight: 700; color: #0d1b3e; margin-bottom: 8px; }
.rf-success-sub { font-size: 14px; color: #666; margin-bottom: 10px; }
.rf-ref { font-size: 12px; color: #aaa; margin-bottom: 20px; }
.rf-ref code { background: #f0f0f0; padding: 2px 6px; font-size: 12px; }
.rf-wsp-btn {
  background: #25D366; color: #fff;
  padding: 12px 20px; font-size: 13px; font-weight: 700;
  font-family: 'Barlow', sans-serif; text-decoration: none;
}

/* Error React */
.rf-error-state {
  text-align: center;
  padding: 24px 16px;
  font-family: 'Barlow', sans-serif;
}
.rf-error-title { font-size: 16px; font-weight: 700; color: #0d1b3e; margin-bottom: 8px; }
.rf-error-sub { font-size: 14px; color: #666; margin-bottom: 20px; }
.rf-error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rf-btn-wsp {
  background: #25D366; color: #fff;
  padding: 12px 18px; font-size: 13px; font-weight: 700;
  font-family: 'Barlow', sans-serif; text-decoration: none;
}

/* Responsive */
@media (max-width: 700px) {
  .sim-cols { grid-template-columns: 1fr; }
  .sim-left { border-right: none; border-bottom: 1px solid #f0f0f0; padding-bottom: 24px; }
  .sim-amount-display { font-size: 40px; }
  .rf-row { grid-template-columns: 1fr; }
}

.sim-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
/* En el layout 2-col (variante 'prestamos') la columna derecha sólo tiene
   la pill "Sin compromiso" — la alineamos a la derecha para que quede en
   espejo con el título "Simulador de cuota" de la columna izquierda. */
.sim-card-header--right { justify-content: flex-end; }
.sim-card-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #031C35;
}
.sim-pill {
  background: #D90128;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Estructura .sim-resultado-row: grid 1fr 1fr; cada item agrupa label +
   valor en bloque (consistente con la grilla del Vue original). */
.sim-resultado-item { display: block; }

/* ── Estado de error de carga — UC-001 E1/E2 ─────────────────── */
.sim-error-state {
  text-align: center;
  padding: 32px 16px;
}
.sim-error-state-title {
  font-size: 15px;
  font-weight: 700;
  color: #031C35;
  margin: 0 0 8px;
}
.sim-error-state-sub {
  font-size: 13px;
  color: #666;
  margin: 0;
}