/* assets/frontend.css */

/* Container */
.fpt-formulario-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0px;
  font-family: Arial, sans-serif;
}

/* Campos genéricos */
.fpt-field {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
}
.fpt-field label {
  font-weight: bold;
  margin-bottom: 2px;
}
.fpt-field input,
.fpt-field select,
.fpt-field textarea {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* Datos personales */
.fpt-datos-personales {
  border: 1px solid #2153CC;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 4px;
  background: #fff;
}

/*Campo URGENTE SI o NO*/
.fpt-field.fpt-urgente-field{
    padding: 10px;
    border-radius: 4px;
}

.fpt-urgente-options{
    display: flex;
    gap: 20px;
}

/* Navegación paso a paso */
.step {
  display: none;
  background: aliceblue;
  padding: 20px 16px;
  border-radius: 8px;
  box-shadow: 5px 5px 5px #afc6ff;
}
.step h3{
    padding-bottom: 15px;
}
.step[data-step="1"] {
  display: block;
}
.fpt-nav-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.fpt-nav-buttons button {
  background-color: #0073aa;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.fpt-nav-buttons button:hover {
  background-color: #005177;
}

/* Botones finales */
.fpt-botones {
  margin-top: 24px;
  text-align: center;
}
.fpt-btn {
  background-color: #009688;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
}
.fpt-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
button#fpt_ver_pedido{
    background: #F5E500;
    color: #000;
    border: 1px solid #000;
}

/*Material Adicional*/
.fpt-field.material-adicional{
  margin-top: 30px;
  padding: 16px;
  background: aliceblue;
  box-shadow: 5px 5px 5px #afc6ff;
  border-radius: 8px;
}

/* Resumen */
#fpt_resumen {
  margin-top: 24px;
  border: 1px solid #ddd;
  padding: 12px;
  background: #f9f9f9;
  white-space: pre-wrap;
  font-family: monospace;
  max-height: 300px;
  overflow-y: auto;
}

/* Acordeón */
.fpt-acordeon {
  background-color: #f1f1f1;
  color: #333;
  cursor: pointer;
  padding: 10px 14px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  font-size: 15px;
  transition: background-color 0.2s ease;
  margin-bottom: 4px;
  border-radius: 4px;
}
.fpt-acordeon.active,
.fpt-acordeon:hover {
  background-color: #0A2C61;
  transition: background-color 0.5s cubic-bezier(0, 0, 0.37, 1.02);
}
.fpt-acordeon-panel {
  display: none;
  background-color: #fafafa;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  margin-bottom: 16px;
  border-radius: 4px;
}

/* Checkboxes/inputs agrupados */
.checkbox-container,
.inputs-teja-wrapper,
.manguito-row,
.otros-row,
.pozo-row,
.sumidero-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.inputs-teja-wrapper {
  gap: 16px;
}
.inputs-teja-wrapper label {
  font-weight: normal;
}
.inputs-teja-wrapper input {
  width: 100%;
}

/* Formularios secundarios */
.material-form {
  margin-top: 12px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* Tubería Gris */
.chk-gris + label {
  margin-right: 12px;
}

/* Manguito */
.manguito-row .input-manguito-mts {
  width: 70px;
}
.colores-manguito-wrapper input {
  margin-left: 4px;
}

/* Otros Materiales */
.otros-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.otros-row input {
  width: 60px;
}

/* Contenedores */
#fpt_contenedores_form_container .fpt-field {
  margin-bottom: 12px;
}
#contenedores_telesacas_count {
  margin-top: 8px;
}

/* Manga */
.manga-row{
    display: flex;
    align-items: baseline;
}
.manga-row .input-manga-mts {
  margin-left: 10px;
}

/* Tapas */
.sola-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sola-input {
  width: 60px;
}
.serie-60x60 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.serie-60x60-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sumidero-label,
.sola-label,
.pozo-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pozo-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.trafico-group {
  display: flex;
  gap: 8px;
}
.trafico-group input {
  width: 100%;
}
.select-small {
  width: 100px;
}

/* Sumidero */
.sumidero-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.sumidero-input {
  width: 70px;
}

/* Pates */
.pates-container input {
  width: 80px;
  margin-top: 4px;
}

/* ----------------------------------------- */
/* Responsive para móviles: hasta 600px ancho */
/* ----------------------------------------- */

@media (max-width: 600px) {
  /* Mostrar sólo un paso a la vez */
  .step {
    display: none;
  }
  .step[data-step] {
    display: block;
  }

  /* Botones de navegación apilados */
  .fpt-nav-buttons {
    flex-direction: column;
    gap: 10px;
  }

  /* Para todos los checkbox-container: apilar vertical */
  .checkbox-container,
  .inputs-teja-wrapper,
  .manguito-row,
  .otros-row,
  .pozo-row,
  .sumidero-row {
    flex-direction: row;
    align-items: baseline;
  }

  /* CODO: que cada fila se vea separada */
  #fpt_conexiones_codo_container .checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
  }
  #fpt_conexiones_codo_container .checkbox-container input[type="number"] {
    width: 100%;
    margin-top: 6px;
  }
  #fpt_conexiones_codo_container .checkbox-container span {
    margin-top: 6px;
    display: block;
  }

  /* REDUCCIÓN: filas separadas */
  #fpt_conexiones_reduccion_container .reduccion-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
    gap: 6px;
  }
  #fpt_conexiones_reduccion_container .reduccion-row input[type="number"] {
    width: 100%;
    margin-top: 4px;
  }
  #fpt_conexiones_reduccion_container .reduccion-row span {
    margin-top: 4px;
    display: block;
  }

  /* Conexiones: Manguito */
  #fpt_conexiones_manguito_container .manguito-row {
    flex-direction: row;
    align-items: baseline;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
    gap: 6px;
  }
  #fpt_conexiones_manguito_container .manguito-row input[type="number"] {
    width: 100%;
    margin-top: 4px;
  }
  #fpt_conexiones_manguito_container .colores-manguito-wrapper {
    margin-top: 4px;
    display: flex;
    gap: 8px;
  }

  /* OTROS MATERIALES */
  #fpt_otros_form_container .otros-row {
    flex-direction: row;
    align-items: flex-start;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
  }
  #fpt_otros_form_container .otros-row input {
    width: 100%;
    margin-top: 4px;
  }

  /* CONTENEDORES */
  #fpt_contenedores_form_container .fpt-field {
    flex-direction: column;
    align-items: flex-start;
  }
  #fpt_contenedores_form_container .fpt-field input,
  #fpt_contenedores_form_container .fpt-field select {
    width: 100%;
    margin-top: 4px;
  }

  /* MANGA */
  #fpt_manga_form_container .manga-row {
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
  }
  .manga-row{
      display: flex;
      flex-direction: row;
      align-items: baseline;
      padding: 5px 0px;
      gap: 8px;
  }
  #fpt_manga_form_container .manga-row input[type="number"] {
    width: 100%;
    margin-top: 4px;
  }
  #fpt_manga_form_container .resina-field input {
    width: 100%;
    margin-top: 4px;
  }

  /* TAPAS: filas verticales y bordes */
  #tapa-hierro-container .checkbox-container,
  #tapa-pvc-container .checkbox-container,
  #tapa-solable-container .sola-row,
  #tapa-reversible-container .sola-row {
    flex-direction: row;
    align-items: baseline;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
  }
  #tapa-hierro-container .checkbox-container input[type="number"],
  #tapa-pvc-container .checkbox-container input[type="number"],
  #tapa-solable-container .sola-input,
  #tapa-reversible-container .sola-input {
    width: 100%;
    margin-top: 4px;
  }
  .serie-60x60-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

  /* TAPAS DE POZO */
  #pozo-redonda-container .pozo-row,
  #pozo-cuadrada-container .trafico-group,
  #pozo-cuadrada-container .cerco-select {
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
    gap: 6px;
  }
  #pozo-redonda-container .trafico-group input,
  #pozo-cuadrada-container .trafico-group input,
  #pozo-redonda-container .cerco-select,
  #pozo-cuadrada-container .cerco-select {
    width: 100%;
    margin-top: 4px;
  }
  label.pozo-label{
      margin-top: -26px;
      margin-left: 30px;
  }
  .trafico-group{
      flex-direction: column;
      gap:0px;
      width: 100%;
  }

  /* SUMIDERO */
  #sumidero-container .sumidero-row {
    flex-direction: row;
    align-items: baseline;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fafafa;
    gap: 6px;
  }
  #sumidero-container .sumidero-input {
    width: 100%;
    margin-top: 4px;
  }

  /* PATES */
  #pates-container input {
    width: 100%;
    margin-top: 4px;
  }
}

/*ESTILOS PARA LOS ERRORES*/
.error {
  border: 1px solid red !important;
  background-color: #ffe6e6; /* ligero fondo rosado para resaltar */
  outline: none;
}

.error-message {
  color: red;
  font-size: 0.875rem; /* aproximadamente 14px */
  margin-top: 4px;
  margin-bottom: 8px;
  line-height: 1.2;
}

select.error,
textarea.error {
  border: 1px solid red !important;
  background-color: #ffe6e6;
}

label.error + .error-message {

  margin-left: 0;
}

/*ESTILOS PARA LA PANTALLA DE BLOQUEO*/
.fpt-bloqueado {
    background-color: #fdecea!important;
  border: 1px solid #e74c3c!important;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  color: #c0392b;
}

.fpt-urgente-cta .fpt-btn-urgente {
    display: inline-block;
  background-color: #e74c3c!important;
  color: #fff !important;
  border: 1px solid #c0392b !important;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

.fpt-urgente-cta .fpt-btn-urgente:hover {
    background-color: #c0392b!important;
}

input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
	width: 100%!important;
}

.fpt-stock-warning { color:#b36b00; font-weight:700; }
.fpt-stock-empty { color:#b00020; font-weight:700; }
.fpt-stock-error { color:#b00020; font-weight:700; }