/*
 * Simulador de Factoring Orsan — scoped under .orsan-sim-root so nothing
 * leaks into / clashes with the FinFlow theme. Typography is intentionally
 * NOT reset here so the page's own font-family is inherited.
 *
 * Values below are taken directly from the prototype export
 * (design/html/design-web.html) rather than approximated: card border
 * #E4E7EE, input/pill border #C9CEDA, primary #0055B8 (the site's real
 * global primary, not a plugin-specific blue), results panel #F6F7FB,
 * notice banner #E6EBFC.
 */

.orsan-sim-root {
  --orsan-sim-primary: #0055b8;
  --orsan-sim-primary-hover: #002f5c;
  --orsan-sim-heading: #16213e;
  --orsan-sim-body: #4a5468;
  --orsan-sim-results-bg: #f6f7fb;
  --orsan-sim-notice-bg: #e6ebfc;
  --orsan-sim-border: #e4e7ee;
  --orsan-sim-input-border: #c9ceda;
  --orsan-sim-disabled: #c9cdd8;
  --orsan-sim-white: #ffffff;
  --orsan-sim-error: #d14343;
  --orsan-sim-radius-card: 16px;
  --orsan-sim-radius-control: 10px;

  box-sizing: border-box;
  color: var(--orsan-sim-body);
}

.orsan-sim-root *,
.orsan-sim-root *::before,
.orsan-sim-root *::after {
  box-sizing: inherit;
}

/* ---------- Card (simulator) ---------- */

.orsan-sim-card {
  background: var(--orsan-sim-white);
  border: 1px solid var(--orsan-sim-border);
  border-radius: var(--orsan-sim-radius-card);
  box-shadow: 0 10px 30px rgba(10, 20, 40, 0.06);
  overflow: hidden;
  max-width: 100%;
}

.orsan-sim-card-title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  color: var(--orsan-sim-heading);
}

.orsan-sim-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.orsan-sim-col-inputs {
  background: var(--orsan-sim-white);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.orsan-sim-col-inputs > .orsan-sim-field {
  margin-bottom: 18px;
}

.orsan-sim-col-inputs > .orsan-sim-field:last-child {
  margin-bottom: 0;
}

.orsan-sim-col-results {
  background: var(--orsan-sim-results-bg);
  padding: 22px;
  display: flex;
  flex-direction: column;
}

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

/* ---------- Fields ---------- */

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

.orsan-sim-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--orsan-sim-heading);
}

.orsan-sim-optional {
  font-weight: 400;
  color: #8a93a6;
}

.orsan-sim-input {
  width: 100%;
  border: 1px solid var(--orsan-sim-input-border);
  border-radius: var(--orsan-sim-radius-control);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--orsan-sim-heading);
  background: var(--orsan-sim-white);
}

.orsan-sim-slider:focus-visible,
.orsan-sim-term-pill input:focus-visible,
.orsan-sim-submit-btn:focus-visible,
.orsan-sim-back-link:focus-visible {
  outline: 2px solid var(--orsan-sim-primary);
  outline-offset: 2px;
}

.orsan-sim-input:focus-visible {
  outline: none;
  border-color: var(--orsan-sim-primary);
}

.orsan-sim-amount-wrap,
.orsan-sim-phone-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--orsan-sim-input-border);
  border-radius: var(--orsan-sim-radius-control);
  overflow: hidden;
}

.orsan-sim-amount-wrap .orsan-sim-input,
.orsan-sim-phone-wrap .orsan-sim-input {
  border: none;
  border-radius: 0;
}

/* The inner input's own :focus-visible outline gets clipped by the wrap's
   overflow:hidden (only a sliver survives, next to the $/+569 prefix) —
   so focus styling is applied to the whole wrap instead, around the prefix
   and the input together. */
.orsan-sim-amount-wrap .orsan-sim-input:focus-visible,
.orsan-sim-phone-wrap .orsan-sim-input:focus-visible {
  outline: none;
}

.orsan-sim-amount-wrap:has(.orsan-sim-input:focus-visible),
.orsan-sim-phone-wrap:has(.orsan-sim-input:focus-visible) {
  border-color: var(--orsan-sim-primary);
  outline: none;
}

/* Home variant only: shorter amount field. */
.orsan-sim-card-wrapper[data-variant="home"] .orsan-sim-amount-wrap {
  height: 36px;
}

/* height left to flex stretch (not set explicitly) so the input's box
   matches the prefix's box exactly — both sit inside the wrap's 36px
   minus its 1px top/bottom border — then the same line-height on both
   centers their text identically. */
.orsan-sim-card-wrapper[data-variant="home"]
  .orsan-sim-amount-wrap
  .orsan-sim-input {
  line-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
}

.orsan-sim-card-wrapper[data-variant="home"]
  .orsan-sim-amount-wrap
  .orsan-sim-amount-prefix {
  line-height: 34px;
}

.orsan-sim-amount-prefix,
.orsan-sim-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 0 0 14px;
  font-size: 14px;
  color: var(--orsan-sim-heading);
  font-weight: 600;
  white-space: nowrap;
}

/* The phone "+569" prefix keeps the shaded chip look used elsewhere on the
   site; the amount "$" prefix is plain inline text per the prototype. */
.orsan-sim-phone-prefix {
  padding: 0 12px;
  background: #f4f5f8;
  color: var(--orsan-sim-body);
}

.orsan-sim-amount-wrap .orsan-sim-input {
  padding-left: 4px;
}

.orsan-sim-field-error {
  margin: 0;
  font-size: 13px;
  color: var(--orsan-sim-error);
  min-height: 16px;
}

.orsan-sim-field-error:empty {
  display: none;
}

.orsan-sim-field.orsan-sim-field-invalid .orsan-sim-input,
.orsan-sim-field.orsan-sim-field-invalid .orsan-sim-amount-wrap,
.orsan-sim-field.orsan-sim-field-invalid .orsan-sim-phone-wrap {
  border-color: var(--orsan-sim-error);
}

/* ---------- Slider ---------- */

.orsan-sim-slider {
  width: 100%;
  accent-color: var(--orsan-sim-primary);
}

/* ---------- Term pills ---------- */

.orsan-sim-term-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* Home variant's left column is narrower (it shares the card with the
   results panel), so its 4 term pills wrap 3-then-1 instead of one row —
   matching the design. Scoped to desktop only so it never fights the
   mobile 2-column rule below. */
@media (min-width: 769px) {
  .orsan-sim-card-wrapper[data-variant="home"] .orsan-sim-term-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .orsan-sim-term-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

.orsan-sim-term-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--orsan-sim-input-border);
  border-radius: var(--orsan-sim-radius-control);
  padding: 5px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--orsan-sim-heading);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.orsan-sim-term-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.orsan-sim-term-pill:hover {
  border-color: var(--orsan-sim-primary);
}

.orsan-sim-term-pill.is-selected,
.orsan-sim-term-pill:has(input:checked) {
  background: var(--orsan-sim-primary);
  border-color: var(--orsan-sim-primary);
  color: var(--orsan-sim-white);
}

/* ---------- Results ---------- */

.orsan-sim-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.orsan-sim-result-row span:first-child {
  font-size: 12.5px;
  color: var(--orsan-sim-body);
}

.orsan-sim-result-row span:last-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--orsan-sim-heading);
}

.orsan-sim-result-divider {
  height: 1px;
  background: var(--orsan-sim-border);
  margin: 12px 0;
}

.orsan-sim-result-total {
  margin-bottom: 0px;
}

.orsan-sim-result-total span:first-child {
  font-size: 17px;
  font-weight: 700;
  color: var(--orsan-sim-heading);
}

.orsan-sim-result-total span:last-child {
  font-size: 17px;
  font-weight: 700;
  color: var(--orsan-sim-primary);
}

/* ---------- Buttons ---------- */

.orsan-sim-submit-btn {
  margin-top: auto;
  width: 100%;
  border: none;
  border-radius: var(--orsan-sim-radius-control);
  padding: 12px 0;
  background: var(--orsan-sim-primary);
  color: var(--orsan-sim-white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.orsan-sim-submit-btn:hover:not(:disabled) {
  background: var(--orsan-sim-primary-hover);
}

.orsan-sim-submit-btn:disabled {
  background: var(--orsan-sim-disabled);
  color: #ffffff;
  cursor: not-allowed;
}

/* ---------- Notice banner ---------- */

.orsan-sim-notice {
  border-top: 1px solid var(--orsan-sim-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--orsan-sim-notice-bg);
  padding: 14px 22px;
}

.orsan-sim-notice-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--orsan-sim-primary);
}

.orsan-sim-notice p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--orsan-sim-body);
}

/* ---------- Honeypot ---------- */

.orsan-sim-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Contact page ---------- */

.orsan-sim-contacto-wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.orsan-sim-breadcrumb {
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--orsan-sim-body);
}

.orsan-sim-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.orsan-sim-breadcrumb a:hover {
  text-decoration: underline;
}

.orsan-sim-breadcrumb-sep {
  margin: 0 8px;
}

.orsan-sim-breadcrumb strong {
  color: var(--orsan-sim-heading);
  font-weight: 700;
}

.orsan-sim-back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--orsan-sim-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.orsan-sim-back-link:hover {
  text-decoration: underline;
}

.orsan-sim-contacto-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  color: var(--orsan-sim-heading);
}

.orsan-sim-contacto-subtitle {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--orsan-sim-body);
}

/* Unlike the simulator card's own two-column layout (gap:0, clipped by
   overflow:hidden into one flush panel), the contact page's summary card
   is a separate, free-standing box — it keeps a real gap and its own
   rounded corners/shadow instead of being clipped by a shared outer card. */
.orsan-sim-contacto-columns {
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}

.orsan-sim-contacto-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.orsan-sim-field-checkbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--orsan-sim-body);
  cursor: pointer;
  line-height: 20px;
}

.orsan-sim-field-checkbox input {
  accent-color: var(--orsan-sim-primary);
}

.orsan-sim-form-error {
  margin: 0;
  font-size: 13px;
  color: var(--orsan-sim-error);
}

.orsan-sim-form-error:empty {
  display: none;
}

.orsan-sim-summary-card {
  background: var(--orsan-sim-results-bg);
  border: 1px solid var(--orsan-sim-border);
  border-radius: var(--orsan-sim-radius-card);
  padding: 22px;
}

.orsan-sim-summary-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--orsan-sim-heading);
}

.orsan-sim-success {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 32px;
  background: var(--orsan-sim-white);
  border: 1px solid var(--orsan-sim-border);
  border-radius: var(--orsan-sim-radius-card);
  text-align: center;
}

.orsan-sim-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: #e3f5ea;
  color: #1a9b53;
}

.orsan-sim-success-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--orsan-sim-heading);
}

.orsan-sim-success-text {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--orsan-sim-body);
}

.orsan-sim-success-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--orsan-sim-radius-control);
  background: var(--orsan-sim-primary);
  color: var(--orsan-sim-white);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: none;
}

.orsan-sim-success-btn:hover {
  background: var(--orsan-sim-primary-hover);
}

.orsan-sim-col-form {
  padding-right: 50px;
}

@media (max-width: 768px) {
  .orsan-sim-contacto-columns {
    grid-template-columns: 1fr;
  }

  .orsan-sim-col-form {
    padding-right: 0;
  }
}