:root{
    --primary:#748E54; /* botones, features, gráficos */
    --text:#004B58;    /* texto principal */
    --white:#ffffff;   /* fondo */
    --tint:#EAF1E0;    /* acento suave */
    --chart-h:325px;   /* alto por defecto del gráfico */
  }
  *{box-sizing:border-box; align-items: center;}
  html,body{height:100%}
  body{
    margin:0; background:var(--white); color:var(--text);
    font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  }
  img{max-width:100%; display:block}
  .container{max-width:1180px; margin:0 auto; padding:0 20px}

  /* Buttons */
  .btn{display:inline-flex; align-items:center; gap:8px; background:var(--primary); text-decoration: none; color:#fff; border:none; padding:12px 18px; border-radius:14px; font-weight:700; cursor:pointer; box-shadow:0 6px 20px rgba(116,142,84,.25)}
  .btn:active{transform:scale(.98)}
  .btn.white{background:#fff; color:var(--text); border:1px solid var(--primary)}

  /* Hero */
  .hero{padding:1px 0}
  .grid{display:grid; gap:28px}
  @media(min-width:900px){.grid-cols-2{grid-template-columns:1.05fr .95fr}}
  h1{font-size:clamp(26px,4vw,44px); line-height:1.15; margin:12px 0 0}
  .lead{font-size:1.05rem; opacity:.95; margin:14px 0 0}
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
  /* Card */
  .card{border: 6px solid #A4C66D; border-radius:22px; padding:20px; box-shadow:20px 25px 35px rgba(229, 239, 132, 1); position:relative; background-color: #789352;}
  .grafico{border:1px solid var(--primary); border-radius:22px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.06); position:relative; background-color: #ffffff; overflow:hidden;}
  .field{margin:10px 0}
  .label{display:block; font-weight:600; margin:8px 0 6px; color:white; }
  .input, .select{width:100%; border:2.5px solid #A4C66D; border-radius:14px; padding:12px 14px; outline:none; color:var(--text)}
  .input:disabled{background:#f6f8f0; cursor:not-allowed}
  .input:focus, .select:focus{box-shadow:0 0 0 5px rgba(116,142,84,.15)}
  .hint{font-size:.82rem; opacity:.75}
.error-msg {
    color: red;
    font-size: 0.85em;
    display: none;
  }
  /* Stats */
  .stats{display:none !important; grid-template-columns:repeat(2,1fr); gap:14px}
  .stat{background:var(--tint); border-radius:16px; padding:16px}
  .stat .k{font-size:.85rem; opacity:.7}
  .stat .v{font-size:1.4rem; font-weight:800}

  /* Outputs block */
  .outputs{display:grid; grid-template-columns:1fr; gap:12px}
  .highlight{background:var(--tint); border-radius:16px; padding:16px; display:flex; align-items:center; justify-content:space-between}
  .highlight .big{font-size:1.6rem; font-weight:900}

  /* Chart */
  .chart{display:block; width:100%; height:var(--chart-h)}

  /* Footer */
  footer{border-top:1px solid var(--tint); padding:24px 0; font-size:11px}

  /* Utility */
  .center{display:flex; align-items:center; justify-content:center}
  .mb-6{margin-bottom:24px}
  .mb-8{margin-bottom:32px}
  .title{font-size:1.6rem; font-weight:900 ; color:white;}

  /* Responsive images */
  .fondos-img{width:min(100%,520px); height:auto; margin-top:16px; object-fit:contain}

/* ------- Tooltip Rentabilidad ------- */
#field-rend { position: relative; }

#field-rend .tip{
  display:inline-flex; justify-content:center; align-items:center;
  width:22px; height:22px; border-radius:50%;
  border:0; background:#fff; color:var(--text);
  box-shadow: inset 0 0 0 1.5px var(--tint);
  font-weight:800; font-size:.9rem; line-height:1; cursor:pointer;
  transition: transform .06s ease;
}
#field-rend .tip:hover,
#field-rend .tip:focus{
  box-shadow: inset 0 0 0 1.5px var(--primary);
  outline: none;
}
#field-rend .tip:active{ transform: scale(.97); }

/* Panel del tooltip */
#field-rend .tooltip{
  position:absolute;
  bottom: calc(100% + 8px); /* arriba del input */
  top: auto;                /* importante: anula 'top' */
  right: 0;
  z-index: 30;
  max-width:340px; width:max-content;
  padding:12px 14px; background:#fff; color:var(--text);
  border:1px solid var(--tint); border-radius:10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  font-size:.9rem; line-height:1.25rem;
}
#field-rend .tooltip[hidden]{ display:none !important; }


/* Responsive: en móviles el tooltip “cae” hacia la izquierda */
@media (max-width: 430px){
  #field-rend .tooltip{ left:0; right:auto; max-width:min(92vw, 340px); }
  #field-rend .tooltip::before{ right:auto; left:16px; }
}

  /* ====== Breakpoints por dispositivo ====== */
  /* iPhone 14 Pro Max (430x932) y menores */
  @media (max-width: 430px){
    .container{padding:0 16px}
    .hero{padding:28px 0}
    .grid{grid-template-columns: none;}
    .grid{gap:18px}
    .highlight .big{font-size:1.5rem}
    .title{font-size:1.5rem}
    :root{ --chart-h:300px }
  }
  /* iPhone XR (414x896) */
  @media (max-width: 414px){
    :root{ --chart-h:280px }
  }
  /* Pixel 7 / Galaxy S20 Ultra / A51/71 (412x915/914) */
  @media (max-width: 412px){
    :root{ --chart-h:270px }
  }
  /* iPhone 12 Pro (390x844) */
  @media (max-width: 390px){
    .stats{grid-template-columns:1fr}
    .btn{width:100%; justify-content:center}
    .highlight .big{font-size:1.4rem}
    :root{ --chart-h:250px }
  }
  /* iPhone SE (375x667) */
  @media (max-width: 375px){
    h1{font-size:clamp(22px,6vw,32px)}
    .container{padding:0 14px}
    :root{ --chart-h:240px }
  }
  /* Galaxy S8+ (360x740) */
  @media (max-width: 360px){
    .hero{padding:22px 0}
    .grid{gap:14px}
    .highlight .big{font-size:1.3rem}
    .card{padding:16px}
    :root{ --chart-h:220px }
  }
  /* Galaxy Z Fold 5 (344x882) plegado estrecho */
  @media (max-width: 344px){
    .grid{grid-template-columns: none}
    .container{padding:0 12px}
    .title{font-size:1.35rem}
    :root{ --chart-h:210px }
    .center-button{width: 80%}
  }

  #field-fondo { position: relative; }

#field-fondo .tip{
  display:inline-flex; justify-content:center; align-items:center;
  width:22px; height:22px; border-radius:50%;
  border:0; background:#fff; color:var(--text);
  box-shadow: inset 0 0 0 1.5px var(--tint);
  font-weight:800; font-size:.9rem; line-height:1; cursor:pointer;
  transition: transform .06s ease;
}
#field-fondo .tip:hover,
#field-fondo .tip:focus{
  box-shadow: inset 0 0 0 1.5px var(--primary);
  outline: none;
}
#field-fondo .tip:active{ transform: scale(.97); }

/* Panel del tooltip */
#field-fondo .tooltip{
  position:absolute;
  bottom: calc(100% + 8px);
  top: auto;
  right: 0;
  z-index: 30;
  max-width:340px; width:max-content;
  padding:12px 14px; background:#fff; color:var(--text);
  border:1px solid var(--tint); border-radius:10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  font-size:.9rem; line-height:1.25rem;
}
#field-fondo .tooltip[hidden]{ display:none !important; }

/* Responsive: en móviles el tooltip “cae” hacia la izquierda */
@media (max-width: 430px){
  #field-fondo .tooltip{ left:0; right:auto; max-width:min(92vw, 340px); }
  #field-fondo .tooltip::before{ right:auto; left:16px; }
}
/* ------- Tooltip Renta Mensual ------- */
#field-renta { position: relative; }

#field-renta .tip{
  display:inline-flex; justify-content:center; align-items:center;
  width:22px; height:22px; border-radius:50%;
  border:0; background:#fff; color:var(--text);
  box-shadow: inset 0 0 0 1.5px var(--tint);
  font-weight:800; font-size:.9rem; line-height:1; cursor:pointer;
  transition: transform .06s ease;
}
#field-renta .tip:hover,
#field-renta .tip:focus{
  box-shadow: inset 0 0 0 1.5px var(--primary);
  outline: none;
}
#field-renta .tip:active{ transform: scale(.97); }

/* Panel del tooltip */
#field-renta .tooltip{
  position:absolute;
  bottom: calc(100% + 8px);
  top: auto;
  right: 0;
  z-index: 30;
  max-width:340px; width:max-content;
  padding:12px 14px; background:#fff; color:var(--text);
  border:1px solid var(--tint); border-radius:10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  font-size:.9rem; line-height:1.25rem;
}
#field-renta .tooltip[hidden]{ display:none !important; }

/* Responsive: en móviles el tooltip “cae” hacia la izquierda */
@media (max-width: 430px){
  #field-renta .tooltip{ left:0; right:auto; max-width:min(92vw, 340px); }
  #field-renta .tooltip::before{ right:auto; left:16px; }
}