/* Fuente global */
.calculator-wrapper,
.calculator-wrapper * {
  font-family: 'Montserrat', sans-serif;
}

/* CONTENEDOR GENERAL */
.calculator-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 40px; /* más aire */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/* FORMULARIO (izquierda) */
.calculator-form-column {
  flex: 1 1 60%;
  margin-bottom: 30px; /* extra espacio antes del footer */
}

/* RESULTADOS (derecha) */
.calculator-results-column {
  flex: 1 1 35%;
  background: #EDF5FE; /* secundario */
  padding: 30px;      /* más padding */
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;   /* más separación arriba */
}

/* TÍTULOS */
.calculator-title {
  font-size: 28px;
  font-weight: bold;
  color: #17375F; /* principal */
  margin-bottom: 10px;
  font-style: italic;
}
.calculator-subtitle {
  font-size: 16px;
  margin-bottom: 20px;
  color: #7A7A7A; /* texto */
}

/* FILAS DE CAMPOS */
.position-row {
  display: flex;
  gap: 10px;
  padding: 12px;              /* acolchado interno */
  margin-bottom: 12px;        /* separación entre filas */
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-bottom: 1px solid #eee; /* línea suave */
}

/* Columnas dentro de cada fila */
.field-col {
  padding: 0 8px;   /* un poquito de padding */
}

/* Ajustar proporciones: job title más ancho */
.position-row .field-col:nth-child(2) {
  flex: 2;
}
.position-row .field-col:nth-child(1),
.position-row .field-col:nth-child(3) {
  flex: 1;
}

/* SELECT y INPUT estilo uniforme */
select,
input.hiring-number-leads {
  width: 100%;
  padding: 12px 14px; /* aumentar altura */
  border: 1px solid #17375F; /* principal */
  background-color: #EEF3F7; /* soft */
  border-radius: 6px;
  font-size: 14px;
  color: #17375F;
  appearance: none;
  box-shadow: none;
  transition: border-color .3s, background .3s;
}
select:hover,
input.hiring-number-leads:hover,
select:focus,
input.hiring-number-leads:focus {
  border-color: #3860A8; /* hover dark blue */
  background-color: #F6FBFF; /* blue soft */
  outline: none;
  box-shadow: 0 0 0 2px rgba(239,125,23,0.2); /* énfasis */
}
/* Flecha personalizada */
select {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%2317375F" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 30px;
}

/* BOTÓN DE BORRAR FILA (input + papelera) */
.position-row .field-col:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.position-row .hiring-number-leads {
  flex: 0 0 120px;
  margin-right: 10px;
}
.position-row .action-col {
  flex: 0 0 auto;
}
.delete-row-btn-leads {
  background: none;
  border: none;
  color: #17375F;
  cursor: pointer;
}

/* ADD ONE MORE + SALARY + CALCULATE */
.actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 10px;
}
/* + Add One More */
#add-position-leads {
  background-color: #17375F; /* principal */
  border: none;
  padding: 10px 20px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  max-width: 200px;
}
#add-position-leads:hover {
  background-color: #3860A8; /* hover dark blue */
}

/* Salary Period label & select */
.period-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.period-field label {
  font-weight: bold;
  color: #17375F;
}
.period-field select {
  width: auto;
}

/* Calculate Your Savings */
#calculate-btn-leads {
  background-color: #EF7D17; /* énfasis */
  border: none;
  padding: 12px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
}
#calculate-btn-leads:hover {
  background-color: #d96b12;
}

/* NOTA */
.calculator-note {
  margin-top: 20px;
  font-size: 14px;
  color: #7A7A7A;
}
.info-icon {
  background: #EF7D17;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  padding: 0 7px;
  margin-right: 5px;
}

/* RESULTADOS */
.results-title {
  font-size: 20px;
  margin-bottom: 15px; /* más espacio */
  font-weight: bold;
  color: #17375F;
}
.results-amount {
  font-size: 28px;
  margin-bottom: 25px; /* más espacio */
  font-weight: bold;
  color: #17375F;
}
.savings-result-leads {
  margin-bottom: 25px; /* más espacio */
  font-size: 16px;
  color: #17375F;
}

/* Botón de sample profiles (ahora debajo del texto) */
.sample-profiles-btn {
  background-color: #EF7D17;
  color: #fff;
  font-weight: bold;
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  margin-bottom: 20px;
  cursor: pointer;
}
.sample-profiles-btn:hover {
  background-color: #d96b12;
}

/* CHART */
.chart-container {
  width: 100%;
  height: 300px;
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 15px;       /* espacio interior */
  margin-bottom: 20px; /* espacio antes de la leyenda */
}
/* Si la leyenda usa .chartjs-legend: */
.chartjs-legend {
  margin-top: 20px;
}
.costs-chart {
  width: 100%;
  height: 100%;
}

/* ───────────────────────────────────────
   MÓVIL: Espaciado y apilado generoso
──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Apilar cada row */
  .position-row {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-bottom: 25px;
  }
  /* Campos full width */
  .position-row .field-col {
    flex: 1 1 100% !important;
    width: 100%;
  }
  /* Cantidad + papelera juntos */
  .position-row .field-col:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* Inputs más grandes */
  .calculator-form-column select,
  .calculator-form-column input {
    padding: 14px !important;
    font-size: 16px !important;
  }
  /* + Add One More full width */
  #add-position-leads {
    width: 100%;
    text-align: center;
  }
  /* Botón Calculate centrado */
  .actions-right {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }
  #calculate-btn-leads {
    width: 100%;
    max-width: 300px;
  }
  /* Footer spacing */
  .calculator-results-column {
    padding: 30px;
    margin-top: 60px;
  }
}

/* ───────────────────────────────────────
   Alineación uniforme de columnas
──────────────────────────────────────── */

/* 1) Industria: ocupa 20% */
.position-row .field-col:nth-child(1) {
  flex: 0 0 20%;
  max-width: 20%;
}

/* 2) Job Title: ocupa 35% */
.position-row .field-col:nth-child(2) {
  flex: 0 0 35%;
  max-width: 35%;
}

/* 3) Experiencia: ocupa 20% */
.position-row .field-col:nth-child(3) {
  flex: 0 0 20%;
  max-width: 20%;
}

/* 4) Cantidad de hires: ocupa 15% */
.position-row .field-col:nth-child(4) {
  flex: 0 0 15%;
  max-width: 15%;
}

/* 5) Acción (papelera): ocupa 10% */
.position-row .action-col {
  flex: 0 0 10%;
  max-width: 10%;
}

/* ───────────────────────────────────────
   Que todos los selects/inputs llenen su celda
──────────────────────────────────────── */
.position-row select,
.position-row input.hiring-number-leads {
  width: 100%;
  box-sizing: border-box;
}

/* ───────────────────────────────────────
   Estructura de columnas: formulario + resultados
──────────────────────────────────────── */
.calculator-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/* Formulario ocupa 60%, resultados 35% */
.calculator-form-column {
  flex: 0 0 60%;
  max-width: 60%;
}
.calculator-results-column {
  flex: 0 0 35%;
  max-width: 35%;
}

/* ───────────────────────────────────────
   Breakpoint móvil: apilar verticalmente
──────────────────────────────────────── */
@media (max-width: 768px) {
  .calculator-form-column,
  .calculator-results-column {
    flex: 0 0 100%;
    max-width: 100%;
  }
}