/* ==========================================================================
   Webform Styles — Based on webform1.svg design
   ========================================================================== */

/* --- Form container --- */
.node-webform-section .webform-submission-form {
  background: #fff;
  border: 1px solid #e5ecf8;
  border-radius: 12px;
  padding: 30px 25px;
}

/* --- Labels (field labels — blue, normal weight) --- */
.node-webform-section .webform-submission-form label,
.node-webform-section .webform-submission-form .form-item__label {
  color: #0943b5;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 6px;
  text-transform: none;
}

/* --- Section headers (fieldset legends) --- */
.node-webform-section .webform-submission-form fieldset > legend,
.node-webform-section .webform-submission-form .fieldset-legend,
.node-webform-section .webform-submission-form .webform-section-title {
  color: #0943b5;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* --- Fieldsets --- */
.node-webform-section .webform-submission-form fieldset {
  border: none;
  padding: 0;
  margin-bottom: 20px;
}

/* --- 2-column grid layout for the form root AND top-level fieldset wrappers --- */
.node-webform-section .webform-submission-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  padding: 0;
}

/* --- Radios/checkboxes wrapper fieldsets should NOT use grid (at any level) --- */
.node-webform-section .webform-submission-form fieldset.js-webform-type-radios > .fieldset-wrapper,
.node-webform-section .webform-submission-form fieldset.js-webform-type-checkboxes > .fieldset-wrapper,
.node-webform-section .webform-submission-form fieldset.radios--wrapper > .fieldset-wrapper,
.node-webform-section .webform-submission-form fieldset fieldset > .fieldset-wrapper {
  display: block;
  padding: 0;
}

/* --- Phone fieldset (País / Área / Número) in 3 columns --- */
.node-webform-section .webform-submission-form #edit-tel > .fieldset-wrapper,
.node-webform-section .webform-submission-form #edit-telefono-fijo-o-celular > .fieldset-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 20px;
  padding: 0;
}

/* Full-width elements inside top-level fieldset grid */
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-type-textarea,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-type-radios,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-type-checkboxes,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-type-webform-markup,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-type-processed-text,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .webform-markup,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-type-managed-file,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .description,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .webform-element-description,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-webform-type-radios,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-webform-type-checkboxes,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > fieldset {
  grid-column: 1 / -1;
}

/* Also full-width for specific fields */
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-item-direccion,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-item-direccion-sitio-falla,
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-item-descripcion-de-la-falla {
  grid-column: 1 / -1;
}

/* Full-width elements at form root level */
.node-webform-section .webform-submission-form > fieldset,
.node-webform-section .webform-submission-form > .js-form-type-textarea,
.node-webform-section .webform-submission-form > .js-form-type-radios,
.node-webform-section .webform-submission-form > .js-form-type-checkboxes,
.node-webform-section .webform-submission-form > .js-form-type-managed-file,
.node-webform-section .webform-submission-form > .js-form-type-webform-markup,
.node-webform-section .webform-submission-form > .js-form-type-processed-text,
.node-webform-section .webform-submission-form > .webform-markup,
.node-webform-section .webform-submission-form > .webform-progress,
.node-webform-section .webform-submission-form > .js-form-wrapper,
.node-webform-section .webform-submission-form > .captcha,
.node-webform-section .webform-submission-form > .form-actions,
.node-webform-section .webform-submission-form > .js-form-item-medio-por-el-cual-desea-recibir-la-respuesta,
.node-webform-section .webform-submission-form > .js-form-item-tipo-de-solicitud,
.node-webform-section .webform-submission-form > .js-form-item-describa-un-asunto-corto-y-claro {
  grid-column: 1 / -1;
}

/* Full-width correo only on Reporte Fallas form */
.webform-submission-wf-formato-de-recepci-n-de-recl-form > fieldset > .fieldset-wrapper > .js-form-item-correo-electronico {
  grid-column: 1 / -1;
}

/* Full-width for long notice field in Solicitud Certificación */
.node-webform-section .webform-submission-form > fieldset > .fieldset-wrapper > .js-form-item-rtvc-tendra-el-termino-de-10 {
  grid-column: 1 / -1;
}

/* Hide "layout" legend (used as wrapper, not a real section title) */
.node-webform-section .webform-submission-form fieldset > legend .fieldset-legend {
  /* Only hide if text is "layout" — handled generically by keeping small/lowercase legends hidden */
}
.node-webform-section .webform-submission-form > fieldset[id="edit-layout"] > legend {
  display: none;
}

/* Flexbox layouts (if webform uses them) */
.node-webform-section .webform-submission-form .webform-flexbox,
.node-webform-section .webform-submission-form .js-webform-flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  grid-column: 1 / -1;
}

.node-webform-section .webform-submission-form .webform-flexbox > .webform-flex,
.node-webform-section .webform-submission-form .js-webform-flexbox > .webform-flex {
  flex: 1 1 calc(50% - 15px);
  min-width: 200px;
}

/* --- Text inputs, selects, textareas --- */
.node-webform-section .webform-submission-form input[type="text"],
.node-webform-section .webform-submission-form input[type="email"],
.node-webform-section .webform-submission-form input[type="tel"],
.node-webform-section .webform-submission-form input[type="url"],
.node-webform-section .webform-submission-form input[type="number"],
.node-webform-section .webform-submission-form input[type="date"],
.node-webform-section .webform-submission-form input[type="time"],
.node-webform-section .webform-submission-form input[type="search"],
.node-webform-section .webform-submission-form select,
.node-webform-section .webform-submission-form textarea {
  background: #fff;
  border: 1px solid #707070;
  border-radius: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  padding: 8px 12px;
  font-size: 15px;
  width: 100%;
  color: #333;
}

.node-webform-section .webform-submission-form input[type="text"]:focus,
.node-webform-section .webform-submission-form input[type="email"]:focus,
.node-webform-section .webform-submission-form input[type="tel"]:focus,
.node-webform-section .webform-submission-form input[type="url"]:focus,
.node-webform-section .webform-submission-form input[type="number"]:focus,
.node-webform-section .webform-submission-form input[type="date"]:focus,
.node-webform-section .webform-submission-form input[type="time"]:focus,
.node-webform-section .webform-submission-form input[type="search"]:focus,
.node-webform-section .webform-submission-form select:focus,
.node-webform-section .webform-submission-form textarea:focus {
  border-color: #0943b5;
  outline: none;
  box-shadow: 0 3px 6px rgba(9, 67, 181, 0.25);
}

/* --- Textarea --- */
.node-webform-section .webform-submission-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Override max-width from node-detail.css for inputs/selects inside webforms */
.node-webform-section .webform-submission-form select,
.node-webform-section .webform-submission-form .form-select,
.node-webform-section .webform-submission-form .form-item input[type="text"],
.node-webform-section .webform-submission-form .form-item input[type="number"] {
  max-width: 100%;
}

/* --- Form items spacing --- */
.node-webform-section .webform-submission-form .form-item,
.node-webform-section .webform-submission-form .js-form-item {
  margin-bottom: 16px;
}

/* --- Radio buttons --- */
.node-webform-section .webform-submission-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #0943b5;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  flex-shrink: 0;
}

.node-webform-section .webform-submission-form input[type="radio"]:checked {
  background: #fff;
}

.node-webform-section .webform-submission-form input[type="radio"]:checked::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: #0943b5;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- Checkboxes --- */
.node-webform-section .webform-submission-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 21px;
  height: 21px;
  border: 1px solid #707070;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  flex-shrink: 0;
}

.node-webform-section .webform-submission-form input[type="checkbox"]:checked {
  background: #0943b5;
  border-color: #0943b5;
}

.node-webform-section .webform-submission-form input[type="checkbox"]:checked::after {
  content: '\2713';
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- Radio/checkbox labels inline --- */
.node-webform-section .webform-submission-form .form-type-radio label,
.node-webform-section .webform-submission-form .form-type-checkbox label,
.node-webform-section .webform-submission-form .js-form-type-radio label,
.node-webform-section .webform-submission-form .js-form-type-checkbox label {
  display: inline;
  font-weight: 400;
  color: #333;
  font-size: 15px;
  vertical-align: middle;
}

/* --- Radio/checkbox items as flex row --- */
.node-webform-section .webform-submission-form .form-type-radio,
.node-webform-section .webform-submission-form .js-form-type-radio,
.node-webform-section .webform-submission-form .form-type-checkbox,
.node-webform-section .webform-submission-form .js-form-type-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* --- Wizard progress tracker --- */
.node-webform-section .webform-submission-form .webform-progress {
  margin-bottom: 30px;
}

/* Inactive step — circle border blue, white fill */
.node-webform-section .webform-progress-tracker .progress-step:not(.is-active) .progress-marker::before,
.node-webform-section .webform-progress-tracker .progress-step:hover .progress-marker::before {
  background-color: #fff;
  border: 2px solid #0943b5;
  color: #0943b5;
}

/* Inactive step — gray background, white text */
.node-webform-section .webform-progress-tracker .progress-step .progress-marker::after {
  background-color: #afafaf;
  color: #fff;
}

/* Active step — filled blue circle */
.node-webform-section .webform-progress-tracker .progress-step.is-active .progress-marker::before,
.node-webform-section .webform-progress-tracker .progress-step.is-active:hover .progress-marker::before {
  background-color: #0943b5;
  border: 2px solid #0943b5;
}

/* Active step — white number on red background */
.node-webform-section .webform-progress-tracker .progress-step.is-active .progress-marker::after {
  background-color: #c7013d;
  color: #fff;
  background-image: linear-gradient(90deg, #c7013d 50%, #afafaf 50%);
}

/* Completed step — filled blue circle with checkmark */
.node-webform-section .webform-progress-tracker .progress-step.is-complete .progress-marker::before,
.node-webform-section .webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before {
  background-color: #0943b5;
  border: 2px solid #0943b5;
  color: #fff;
  content: "✔";
}

/* Completed step — white checkmark on red background */
.node-webform-section .webform-progress-tracker .progress-step.is-complete .progress-marker::after {
  background-color: #c7013d;
  color: #fff;
}

/* Connecting line — gray default */
.node-webform-section .webform-progress-tracker .progress-step::after {
  background-color: #afafaf;
}

/* Step title text — blue */
.node-webform-section .webform-progress-tracker .progress-step .progress-text {
  color: #0943b5;
}

.node-webform-section .webform-progress-tracker .progress-step.is-active .progress-text,
.node-webform-section .webform-progress-tracker .progress-step.is-complete .progress-text {
  color: #0943b5;
}

.node-webform-section .webform-progress-tracker .progress-step.is-active .progress-title {
  font-weight: 700;
}

/* --- Submit button container --- */
.node-webform-section .webform-submission-form .form-actions {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 10px;
}

/* --- Markup elements --- */
.node-webform-section .webform-submission-form .webform-markup,
.node-webform-section .webform-submission-form .js-form-type-webform-markup {
  margin-bottom: 16px;
}

.node-webform-section .webform-submission-form .webform-markup strong,
.node-webform-section .webform-submission-form .webform-markup b {
  color: #0943b5;
}

/* --- Required marker --- */
.node-webform-section .webform-submission-form .form-required::after {
  color: #c7013d;
}

/* --- Description text --- */
.node-webform-section .webform-submission-form .description,
.node-webform-section .webform-submission-form .form-item__description {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

/* --- Datelist (Mes/Día/Año selects inline) --- */
.node-webform-section .webform-submission-form .form-type-datelist .container-inline {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.node-webform-section .webform-submission-form .form-type-datelist .container-inline > .form-item {
  flex: 1;
  margin-bottom: 0;
}

/* Hide individual "Fecha: Mes", "Fecha: Día", "Fecha: Año" labels */
.node-webform-section .webform-submission-form .form-type-datelist .container-inline > .form-item > label {
  display: none;
}

/* --- CAPTCHA / reCAPTCHA widget --- */
.node-webform-section .captcha {
  margin: 20px 0;
}

/* --- File upload --- */
.node-webform-section .webform-submission-form input[type="file"] {
  background: #fff;
  border: 1px solid #707070;
  padding: 8px;
  width: 100%;
}

.node-webform-section .webform-submission-form input[type="file"]::file-selector-button {
  background: #0943b5;
  color: #fff;
  padding: 8px 16px;
  margin: -8px 10px -8px -8px;
  border: none;
}

/* Upload/remove button (Subir archivo / Eliminar) */
.node-webform-section .webform-submission-form .form-managed-file .btn,
.node-webform-section .webform-submission-form .form-managed-file button[type="submit"] {
  background: #0943b5;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}

.node-webform-section .webform-submission-form .form-managed-file .btn:hover,
.node-webform-section .webform-submission-form .form-managed-file button[type="submit"]:hover {
  background: #072d7a;
}

/* --- Webform messages --- */
.node-webform-section .webform-submission-form .messages {
  border-radius: 8px;
  margin-bottom: 16px;
}

/* --- 2-column layout containers (used in foro and similar webforms) --- */
.node-webform-section .webform-submission-form .webform-layout-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  grid-column: 1 / -1;
}

/* Full-width elements inside 2col containers */
.node-webform-section .webform-submission-form .webform-layout-2col > .js-form-type-textarea,
.node-webform-section .webform-submission-form .webform-layout-2col > .js-form-type-radios,
.node-webform-section .webform-submission-form .webform-layout-2col > .js-form-type-checkboxes,
.node-webform-section .webform-submission-form .webform-layout-2col > .js-form-type-webform-markup,
.node-webform-section .webform-submission-form .webform-layout-2col > .webform-markup,
.node-webform-section .webform-submission-form .webform-layout-2col > .js-form-type-managed-file,
.node-webform-section .webform-submission-form .webform-layout-2col > fieldset {
  grid-column: 1 / -1;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .node-webform-section .webform-submission-form {
    padding: 20px 15px;
    grid-template-columns: 1fr;
  }

  .node-webform-section .webform-submission-form fieldset > .fieldset-wrapper {
    grid-template-columns: 1fr;
  }

  .node-webform-section .webform-submission-form .webform-flexbox > .webform-flex,
  .node-webform-section .webform-submission-form .js-webform-flexbox > .webform-flex {
    flex: 1 1 100%;
  }

  .node-webform-section .webform-submission-form .form-actions input[type="submit"] {
    width: 100%;
  }
}