/* ========= Real Estate Calculator – Base Theme Vars ========= */
:root{
  --background:#f6f8fb;
  --foreground:#0f172a;
  --card:#ffffff;
  --card-foreground:#0f172a;
  --primary:#2563eb;
  --primary-foreground:#ffffff;
  --muted:#f1f5f9;
  --muted-foreground:#475569;
  --border:#e5e7eb;
  --ring:#2563eb;
  --success:#16a34a;
  --destructive:#dc2626;
  --radius:12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --background:#0b1220;
    --foreground:#e5e7eb;
    --card:#0f172a;
    --card-foreground:#e5e7eb;
    --muted:#0b1324;
    --muted-foreground:#94a3b8;
    --border:#1f2937;
    --ring:#3b82f6;
    --success:#22c55e;
    --destructive:#ef4444;
  }
}

/* ========= Container & Header ========= */
#real-estate-calculator-container{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--foreground);
}
#real-estate-calculator-container .calculator-wrapper{
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px 64px;
}
.calculator-header{margin-bottom:24px;}
.header-content{display:flex;align-items:center;gap:12px;}
.header-icon{font-size:28px;line-height:1;}
.header-title{margin:0;font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.02em;}
.header-subtitle{margin:6px 0 0;color:var(--muted-foreground);}

/* ========= Grid ========= */
.calculator-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width: 980px){
  .calculator-grid{grid-template-columns:1fr;}
}

/* ========= Cards ========= */
.card{
  background:var(--card);
  color:var(--card-foreground);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 6px 16px rgba(2,8,23,.06);
}
.card-header{
  padding:14px 18px 8px;
  border-bottom:1px solid var(--border);
}
.card-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.card-icon{font-size:18px;}
.card-content{padding:16px 18px 18px;}

/* ========= Inputs ========= */
.input-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:12px;
}
.input-group{display:flex;flex-direction:column;gap:6px;}
.input-group.full-width{grid-column:1 / -1;}
label{font-size:12px;color:var(--muted-foreground);}
.calculator-input{
  appearance:none;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  outline:none;
}
.calculator-input:focus{border-color:var(--ring); box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.switch-container{margin-top:8px;display:flex;align-items:center;gap:8px;}
.switch-label{font-size:13px;color:var(--foreground);}

/* ========= Results – Metrics ========= */
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.metric-item{text-align:center;padding:18px 10px;}
.metric-value{font-size:36px;font-weight:800;letter-spacing:-.02em;}
.metric-label{margin-top:6px;color:var(--muted-foreground);}

/* ========= Cash Flow & Summary ========= */
.cash-flow-item{display:flex;justify-content:space-between;margin:8px 0;}
.cash-flow-label{color:var(--muted-foreground);}
.cash-flow-value{font-weight:700;}
.cash-flow-value.success{color:var(--success);}
.cash-flow-value.destructive{color:var(--destructive);}
.cash-flow-item.total{border-top:1px dashed var(--border);padding-top:10px;margin-top:12px;}
.cash-flow-separator{height:1px;background:var(--border);margin:10px 0;}

/* ========= Recommendation ========= */
.recommendation-content{display:flex;flex-direction:column;gap:6px;}
.recommendation-title{font-weight:800;}
.recommendation-text{color:var(--muted-foreground);}
.recommendation-content.excellent .recommendation-title{color:var(--success);}
.recommendation-content.moderate .recommendation-title{color:#f59e0b;}
.recommendation-content.poor .recommendation-title{color:var(--destructive);}

/* ========= Layout Columns ========= */
.input-section{display:flex;flex-direction:column;gap:20px;}
.results-section{display:flex;flex-direction:column;gap:20px;}

/* ========= Fuerza “Investment Analysis” a gris claro ========= */
.gradient-card{
  background:#f3f4f6 !important;
  background-image:none !important;
  border:1px solid #e5e7eb;
}
.gradient-card .card-title{color:#111827 !important;}
.gradient-card .metric-value{color:#0f172a !important;}
.gradient-card .metric-label{color:#374151 !important;}

/* ============================================================
   OVERRIDES SOLICITADOS: todas las tarjetas en gris claro (#c9c9c9)
   (Colócalo al final del archivo para asegurar prioridad)
   ============================================================ */
#real-estate-calculator-container .card{
  background:#c9c9c9 !important;     /* gris claro para todos los recuadros */
  color:#111827 !important;           /* texto principal oscuro */
  border:1px solid #b3b3b3;           /* borde un poco más oscuro */
}

/* Mantener inputs en blanco para mejor contraste dentro de tarjetas grises */
#real-estate-calculator-container .calculator-input{
  background:#ffffff;
  border:1px solid #999999;
  color:#111827;
}

/* Afinar textos secundarios dentro de tarjetas grises */
#real-estate-calculator-container label,
#real-estate-calculator-container .metric-label,
#real-estate-calculator-container .cash-flow-label,
#real-estate-calculator-container .recommendation-text{
  color:#333333 !important;
}

/* También aplicar gris claro a la tarjeta destacada si la quieres igual que el resto */
#real-estate-calculator-container .gradient-card{
  background:#c9c9c9 !important;
  background-image:none !important;
  border:1px solid #b3b3b3;
}
#real-estate-calculator-container .gradient-card .card-title{color:#111827 !important;}
#real-estate-calculator-container .gradient-card .metric-value{color:#0f172a !important;}
#real-estate-calculator-container .gradient-card .metric-label{color:#333333 !important;}