/* ===== Scope del componente ===== */
.uc-thermo{
  --bg:#f6f7fb; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --brand:#6c5ce7; --brand-2:#22c1c3; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --radius-2xl:18px; --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 8px 24px rgba(0,0,0,.08);
}

}
.uc-thermo *{box-sizing:border-box}
.uc-thermo html, .uc-thermo body{background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.35}
.uc-thermo h1{font-size:clamp(1.8rem, 3.2vw, 2.4rem);margin:0}
.uc-thermo h2{font-size:1rem;margin:1.25rem 0 .5rem}
.uc-thermo p, .uc-thermo label, .uc-thermo small{color:var(--muted)}
.uc-thermo .container{max-width:980px;margin:24px auto;padding:0 16px}
.uc-thermo .card{background:var(--card);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);padding:24px}
.uc-thermo .header{display:flex;gap:16px;align-items:center;justify-content:center;margin-bottom:20px}
.uc-thermo .brand{display:grid; grid-template-columns:1fr; justify-items:center; align-items:center; gap:12px; text-align:center;}
.uc-thermo .brand img{height:82px;width:auto;display:block}
@media (max-width:480px){ .uc-thermo .brand img{height:68px} }
.uc-thermo .badge{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.uc-thermo .note{font-size:1rem;text-align:center}
.uc-thermo .accent{background: linear-gradient(135deg, var(--brand), var(--brand-2));-webkit-background-clip:text; background-clip:text; color: transparent; font-weight:800;}
.uc-thermo fieldset{border:0;margin:0;padding:0}
.uc-thermo .section{border:1px dashed #e5e7eb;border-radius:14px;padding:16px;margin:18px 0;background:#fff}
.uc-thermo .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:780px){.uc-thermo .row{grid-template-columns:1fr}}
.uc-thermo .group{padding:12px;border-radius:12px;background:#fafbff}
.uc-thermo .group legend{font-weight:600;margin-bottom:8px}
.uc-thermo .opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:8px}
.uc-thermo .chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;box-shadow:var(--shadow-sm)}
.uc-thermo input[type="number"], .uc-thermo select, .uc-thermo .text{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.uc-thermo .actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
.uc-thermo .btn{appearance:none;border:0;border-radius:999px;padding:12px 18px;font-weight:600;transition:.2s transform ease,.2s box-shadow ease;cursor:pointer}
.uc-thermo .btn:active{transform:translateY(1px)}
.uc-thermo .btn-primary{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 10px 24px rgba(108,92,231,.25)}
.uc-thermo .btn-secondary{background:#eef2ff;color:#4338ca}
.uc-thermo dialog{width:min(760px,92vw);border:0;border-radius:20px;padding:0;box-shadow:var(--shadow-md)}
.uc-thermo dialog::backdrop{background:rgba(2,6,23,.55)}
.uc-thermo .modal-head{padding:18px 20px;border-bottom:1px solid #eef2ff;display:flex;justify-content:space-between;align-items:center}
.uc-thermo .modal-body{padding:18px 20px}
.uc-thermo .close{background:#f3f4f6;border:0;border-radius:10px;padding:8px 10px;cursor:pointer}
.uc-thermo .gauge-wrap{display:grid;justify-items:center;gap:12px;margin-top:4px}
.uc-thermo .gauge{width:min(520px,86vw);height:auto;display:block}
.uc-thermo .score{font-size:clamp(1.1rem, 2.5vw, 1.35rem);font-weight:700}
.uc-thermo .level{font-weight:700}
.uc-thermo .advices{margin-top:8px}
.uc-thermo .advices li{margin:.25rem 0}
.uc-thermo .legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.uc-thermo .dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px}

/* ===== Botón CALCULAR: degradado tricolor y texto visible ===== */
.uc-thermo .btn-primary{
  color:#fff !important;                     /* asegura contraste del texto */
  background: linear-gradient(135deg,
              #60a5fa 0%,   /* azul */
              #6c5ce7 50%,  /* violeta */
              #ec4899 100%  /* fucsia */
            ) !important;
  box-shadow: 0 12px 28px rgba(108,92,231,.28);
  border: 0;
}
.uc-thermo .btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 14px 34px rgba(108,92,231,.36);
}
.uc-thermo .btn-primary:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,.35); /* anillo de enfoque accesible */
}

/* ===== Botón WHATSAPP: verde degradado, icono y texto blancos ===== */
.uc-thermo .btn-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px 18px; border:0; border-radius:999px; cursor:pointer;
  color:#fff !important;                     /* fuerza color blanco para texto e icono (currentColor) */
  text-decoration:none; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
  background: linear-gradient(135deg,
              #16a34a 0%,   /* verde */
              #22c55e 55%,  /* verde claro */
              #4ade80 100%  /* lima */
            ) !important;
  box-shadow: 0 12px 26px rgba(34,197,94,.28);
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
  margin-top:14px;
}
.uc-thermo .btn-whatsapp:hover{ filter:brightness(1.06); box-shadow:0 14px 34px rgba(34,197,94,.36) }
.uc-thermo .btn-whatsapp:active{ transform:translateY(1px) }
.uc-thermo .btn-whatsapp svg{ width:18px; height:18px; display:block }