:root{
  /* Color corporativo principal */
  --lutepy-primary:#d2598a;
}

/* ------------------------------------------------------------------
   Limita TUTTO agli elementi dentro .lutepy-calculator per non toccare
   altre parti del tema di Blogger (cabecera, sidebar, ecc.).
------------------------------------------------------------------*/
.lutepy-calculator{
  font-family:Arial,Helvetica,sans-serif;
  color:#333;
  background:#fdfdfd;
  padding:1rem;
  margin:0 auto;
  max-width:600px; /* se vuoi 100% elimina questa riga */
}

/* -------------------- Logo -------------------- */
.lutepy-calculator #logo{
  display:block;
  margin:0 auto 1rem;
  max-width:150px; /* Ajusta si necesario */
  width:40%;
  height:auto;
}

/* ------------------ Tipografía ---------------- */
.lutepy-calculator h1{
  text-align:center;
  color:var(--lutepy-primary);
}

.lutepy-calculator label{
  display:block;
  margin-top:1rem;
  font-weight:600;
}

/* -------------------- Campos ------------------ */
.lutepy-calculator select,
.lutepy-calculator input[type="number"]{
  width:100%;
  padding:.5rem;
  border:1px solid #ccc;
  border-radius:6px;
  box-sizing:border-box;
}

.lutepy-calculator input.error{border-color:red;}

/* -------------------- Botón ------------------- */
.lutepy-calculator button{
  margin-top:1.5rem;
  width:100%;
  padding:.75rem 1rem;
  font-size:1rem;
  background:var(--lutepy-primary);
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:opacity .2s ease-in-out;
}

.lutepy-calculator button:hover{opacity:.9;}

/* ------------------ Resultado ----------------- */
.lutepy-calculator .result{
  margin-top:1.5rem;
  font-size:1.25rem;
  font-weight:700;
  text-align:center;
  color:var(--lutepy-primary);
}

/* -------------- Responsive grid --------------- */
@media (min-width:600px){
  .lutepy-calculator .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
  }
}