/* =========================
   BASE
   ========================= */
:root{
  --bg: #e9eef3;
  --panel-bg: #ffffff;
  --border: #cfd9e3;
  --shadow: 0 8px 24px rgba(0,0,0,0.04);

  --radius-lg: 10px;
  --radius-md: 8px;

  --gap: 12px;

  --pad-panel: 18px;
  --pad-box: 14px;

  --font-base: 16px;
  --font-table: 16px;

  --input-h: 32px;
  --max-form: 1000px;
  --max-results: 950px;

  /* Colores  */

  --excel-blue-soft: #d8f3fb;

  --excel-green: #8cc63e;
  --excel-green-soft: #e9f6d8;

  --excel-gray: #d6f1fa;
}


#formulario-calentadores{
  width: 100%;
  margin: 0 auto;
  color: #002b56;
  border: 1px solid black;
  border-radius: 30px;
  padding: 30px 20px;
}

/* =========================
   BLOQUE SUPERIOR
   ========================= */
.top-2col{
  width: 100%;
  margin: 0 auto;
}

.top-left{
  padding: var(--pad-box);
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--gap);
}







.form-group{
  display: flex;
  flex-direction: column;
  gap: 4px;
  
}

.form-group.full{
  grid-column: 1 / -1;
 
}

.bloque-plantas-grid{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fila-estancia{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.titulo-fila{
  font-weight: 600;
  color: #002b56;
}

.columnas-plantas{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;

  
}
.titulo-fila{
  margin-top:8px;
  margin-bottom:4px;
  font-weight: 600;
  font-size: 16px;
  
}

.campo-planta{
  display: flex;
  flex-direction: column;
  gap: 5px;
 
}

.campo-planta label, .titulo-fila{
  font-size: 1.1em;
  font-weight: 700;
  color: #002B56;
}

.campo-planta select{
  height: 40px;
  border: 1px solid #002B56;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 16px;
  width: 100%;
}

select{
  accent-color: #002b56;
  height: 40px;
}

select option:checked{
  background:#002B56;
  color:white;
}

select:disabled{
  background-color: #cfcfcf;
  color: #666;
  border-color: #b5b5b5;
  cursor: not-allowed;
}

input:read-only{
  background-color: #e5e5e5;
}


label[for="numPlantas"], .titulo-fila{
  font-size: 1.1em;
  font-weight: 700;
}

label[for="gamaRecuperador"], .titulo-fila{
  font-size: 1.1em;
  font-weight: 700;
}

#gamaRecuperador{
  color:#002B56;
  font-weight: 600;
}

/* =========================
   GAMA DEBAJO
   ========================= */
.gama-debajo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  text-align: center;
  
}

.gama-debajo label{
  text-align: left;
  width: 100%;
  max-width: 100%;
}

.gama-debajo select{
  width: 100%;
 
}

/* =========================
   CONTROLES
   ========================= */
label{
  font-weight: 600;
  font-size: 16px;
  color: #002b56;
}

input{
  height: 32px;
  padding: 2px 8px;
  font-size: 16px;
  border: 1px solid #002B56;
  border-radius: 6px;
  box-sizing: border-box;
  color: #002b56;
  background: #ffffff;
}

select:focus,
input:focus{
  outline:none;
  border-color:#002B56;
  box-shadow:0 0 0 2px rgba(0,43,86,0.15);
}

.fila-estancia{
  gap:6px;
}






/* =========================
   RESULTADOS
   ========================= */
.resultados{
  background: transparent;
  margin: 20px auto 0;
  padding: 16px;
}

.resultados h2{
  margin: 14px 0 8px;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-top: 50px !important;
}

/* =========================
   TABLAS
   ========================= */
.tabla-scroll{
  overflow-x: auto;
  margin-bottom: 14px;
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
  font-size: var(--font-table);
}

/* Cabecera */
table thead th{
  background: #002B56;
  color: #fff;
  font-weight: 700;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Celdas */
th,
td{
  border: none;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

/* Filas alternas suaves */
table tbody tr:nth-child(even){
  background: var(--excel-gray);
}

table{
  color:#002B56;
}

#componentes-container table{
  min-width: 760px;
}

#componentes-container th:last-child,
#componentes-container td:last-child{
  width: 86px;
  text-align: center;
}

#tabla-referencias-principales th:last-child,
#tabla-referencias-principales td:last-child{
  width: 86px;
  text-align: center;
}

#tabla-referencias-principales{
  border-radius: 20px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #002B56;
  padding: 20px 10px;
}

#tabla-referencias-principales thead th,
#tabla-referencias-principales tbody td,
#tabla-referencias-principales tbody tr,
#tabla-referencias-principales tbody tr:nth-child(even){
  background: #002B56;
  color: #ffffff;
  border-color: #2b537c;
}

#componentes-container .componente-img,
#tabla-referencias-principales .componente-img{
  width: 80px;
  max-width: 80px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================
   RESUMEN 
   ========================= */
.resumen-destacado{
  background: #002B56;
  color: #ffffff;
  padding: 16px 22px;
  border-radius: 10px;
  margin: 18px 0 0;
  width: 100%;
  box-sizing: border-box;
}

.resumen-destacado span,
.resumen-destacado strong{
  color: #ffffff;
}

.resumen-linea{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
  font-size: 16px;
  gap: 10px;
  color: #ffffff;
}



.resumen-linea strong{
  font-weight: 800;
  color: #ffffff;        
  white-space: nowrap;
}

/* =========================
   CABECERAS DE BLOQUES (común / planta)
   ========================= */
/* Esto es para los títulos que  genera el JS encima de cada tabla */
.bloque-titulo{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-radius: 8px;
  margin: 14px 0 8px;

  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;

  font-size: 16px !important;
}

/* Común en verde */
.bloque-titulo.is-comun{
  background: #002B56;
  color: #fff;
}

/* Plantas en azul oscuro */
.bloque-titulo.is-planta{
  background: #002B56;
  color: #fff;
  border-radius: 0px;
}

/* Texto pequeño  */
.bloque-titulo small{
  font-weight: 600;
  opacity: .95;
  text-transform: none;
  letter-spacing: 0;
}

.bloque-seccion-separado{
  margin-top: 50px;
}

/* =========================
   PRECIO FINAL 
   ========================= */
.precio-final-box{
  margin-top: -10px;
  background: #002B56;
  color: #ffffff;
  padding: 21px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#serv-tecnico{
  font-size: 16px;
  width: 100%;
  text-align: right;
  color: #ffffff;
}

#precio-final{
  font-weight: 700;
}

/* Si quieres ocultarlo con JS  */
.hide{
  display: none !important;
}

/* =========================
   BOTONES
   ========================= */
.button-container{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.export-btn-container{
  width: 100%;
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
}

.container-foot{
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  gap: 10px;
  text-align: center !important;
}

.button-text{
  margin: 0 auto;
  max-width: 700px;
  color: #002B56;
  text-align: center;
}

#exportPdfBtn{
  background-color: #002B56;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 10px;
  padding: 14px 35px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
  min-width: 200px;
  height: auto;
  margin-left: auto;
  width: auto !important;
}

#contactButton{
  background-color: #002B56;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 10px;
  padding: 14px 35px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
  min-width: 200px;
}

.button-container button{
  padding: 0 12px;
  border: 1px solid #002B56;
  border-radius: 8px;
  background: #002B56;
  cursor: pointer;
  font-weight: 700;
  color: #ffffff;
}

.button-container button:hover{
  background: #001d3d;
  border-color: #001d3d;
}


/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  body{
    place-items: start center;
  }

  .top-left{
    grid-template-columns: 1fr;
  }

  .planta-box{
    grid-template-columns: 1fr;
  }

  table{
    min-width: 650px;
  }
}
@media (max-width:600px){
  .columnas-plantas{
    grid-template-columns:1fr;
  }
}