@import "../../src/scss/init";

.webform-submission-form {
  div.js-form-item {
    margin-bottom: 1.5rem;
  }
}

// Card visual para el formulario
.webform-card {
  max-width: 950px;
  margin: 3rem auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 6px rgba(44,62,80,0.07);
  padding: 2.5rem 2rem 0rem 2rem; // <-- Restaurar padding lateral
  border: 1.5px solid #e3eaf2;
  position: relative;
  width: 100%;

  // Mejorar presentación de labels
  .form-item > label {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
    color: #222;
    line-height: 2;
    letter-spacing: 0.01em;
    word-break: break-word;
  }

  // Inputs y textarea modernos
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="color"],
  input[type="url"],
  textarea,
  select,
  .CodeMirror {
    padding: 0.7em 1em;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: 1rem;
    background: #f7fafc;
    transition: border 0.2s, box-shadow 0.2s;
    margin-bottom: 0.1rem;
    box-shadow: 0 1px 2px rgba(60,60,60,0.03);
  }

  // Ajustar el color picker para que se vea alineado
  input[type="color"] {
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    border: none;
    background: none;
    margin-right: 0.9em;
    vertical-align: middle;
  }

  // Descripciones de campos
  .description {
    font-size: 0.97rem;
    color: #607d8b;
  }

  .js-form-wrapper {
    .webform-element-description,
    .edit-text-format {
      font-size: 0.97rem;
      color: #607d8b;
    }
  }

  // Botón submit y submit wrapper
  .js-form-submit {
    background-color: #607d8b;
    border: none;
  }

  .webform-button--submit {
    background-color: rgb(76, 98, 197);
    border: none;
    padding: 0.85em 2em;
    transition: background 0.2s, box-shadow 0.2s;
    margin-top: 1.2rem;
    margin-left: 0;
    margin-right: 0;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(255, 213, 79, 0.13);
    width: calc(100% + 4rem); // <-- Sobresale el padding lateral
    left: -2rem;              // <-- Sobresale el padding lateral
    position: relative;
    display: block;
    border-radius: 0 0 16px 16px;
  }

  // Mejorar títulos de secciones/captchas
  legend,
  .fieldset-legend {
    font-size: 1.12rem;
    font-weight: 700;
    color: #283593;
    margin-bottom: 0.7rem;
    padding-bottom: 0.2rem;
    border-bottom: 1.5px solid #e3eaf2;
    letter-spacing: 0.01em;
  }
}

// Descripciones fuera de la card
#edit-text-format--description {
  font-size: 0.97rem;
  color: #607d8b;
}

// Media queries
@media (max-width: 600px) {
  .webform-card {
    max-width: 98vw;
    padding: 1.2rem 0.5rem 0rem 0.5rem; // <-- Restaurar padding lateral

    .webform-button--submit {
      width: calc(100% + 1rem); // <-- Ajusta para mobile
      left: -0.5rem;
    }
  }
}

fieldset.webform-composite-hidden-title {
  legend {
    display: none;
  }
}

td.webform-multiple-table--handle {
  display: none !important;
}

div.webform-multiple-tabledrag-toggle-weight {
  display: none !important;
}

div.js-form-item-links-add-more-items {
  display: none !important;
}

div.js-webform-multiple-add input.form-submit{
  margin-top: 1rem;
  @include gradient--bg($auth-primary-start, $auth-primary-end);
}

td.webform-multiple-table--operations > input.image-button:nth-child(1) {
  display: none !important;
}

input.webform-button--submit {
  @include gradient--bg($auth-primary-start, $auth-primary-end);
}
