/* WeLeasing Front Theme
   Purpose: make the internal Cotizador UI match the public weleasing.com.mx front
   Safe overrides only (no layout-breaking changes).
*/

:root{
  /* Match Front palette (turquoise -> navy) */
  --we-teal: #57B5C9;
  --we-navy: #263D60;
  --we-orange: #FF6B35;
  --we-green: #10B981;
  --we-purple: #8B5CF6;

  /* Use the same gradient as the Front buttons */
  --we-gradient: linear-gradient(90deg, #57B5C9 0%, #263D60 100%);
  --we-gradient-135: linear-gradient(135deg, #57B5C9 0%, #263D60 100%);

  /* UI tokens */
  --we-radius: 999px;
  --we-radius-card: 18px;
  --we-shadow: 0 14px 28px rgba(0,0,0,.16);
  --we-shadow-soft: 0 10px 20px rgba(0,0,0,.10);
}

/* Make sure common brand helpers reflect new variables */
.we-gradient{ background: var(--we-gradient) !important; }
.text-we-teal{ color: var(--we-teal) !important; }
.text-we-navy{ color: var(--we-navy) !important; }
.bg-we-teal{ background-color: var(--we-teal) !important; }
.border-we-teal{ border-color: var(--we-teal) !important; }

/* Login: match the public front feeling */
#loginScreen{
  background: var(--we-gradient-135) !important;
}
#loginScreen .bg-white{
  border-radius: var(--we-radius-card) !important;
  box-shadow: var(--we-shadow) !important;
}

/* Cards/sections */
.form-section,
.results-section,
.client-data-section{
  border-radius: var(--we-radius-card) !important;
  box-shadow: var(--we-shadow-soft) !important;
}

/* Inputs */
.form-input,
.form-select,
input[type="text"],
input[type="password"],
input[type="number"],
select{
  border-radius: 12px !important;
}
.form-input:focus,
.form-select:focus,
input:focus,
select:focus{
  border-color: var(--we-teal) !important;
  box-shadow: 0 0 0 4px rgba(87, 181, 201, 0.18) !important;
}

/* Primary buttons */
.btn-primary,
button[style*="var(--we-gradient)"]{
  background: var(--we-gradient) !important;
  border-radius: var(--we-radius) !important;
  box-shadow: var(--we-shadow-soft) !important;
}
.btn-primary:hover,
button[style*="var(--we-gradient)"]:hover{
  filter: brightness(1.05);
}

/* Secondary buttons (white + border teal) */
.btn-secondary{
  background: #fff !important;
  color: var(--we-teal) !important;
  border: 2px solid var(--we-teal) !important;
  border-radius: var(--we-radius) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.08) !important;
}
.btn-secondary:hover{
  background: var(--we-teal) !important;
  color: #fff !important;
}

/* Toggles & selection chips */
.toggle-btn.active,
.asset-button.active{
  background: var(--we-teal) !important;
  border-color: var(--we-teal) !important;
}

/* Highlight blocks: align to new brand gradient */
.monthly-payment-highlight{
  background: var(--we-gradient-135) !important;
  box-shadow: var(--we-shadow-soft) !important;
}

/* Small tweaks for common Tailwind blues used in the UI */
.text-blue-600{ color: var(--we-teal) !important; }
.hover\:text-blue-800:hover{ color: var(--we-navy) !important; }
.focus\:ring-blue-500:focus{ --tw-ring-color: rgba(87,181,201,.45) !important; }