/* ============================================================
   Formulario "Reclama tu nómina" — estilos
   Se encola desde el mu-plugin rtn-formulario.php
   ============================================================ */

/* ---- Lógica condicional ---- */
.rtn-oculto { display: none !important; }

/* ---- Mensajes de error propios ---- */
.rtn-error {
  display: block;
  color: #b3261e;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
}

.rtn-campo-mal input,
.rtn-campo-mal select {
  border-color: #b3261e !important;
}

/* ---- Pantalla de gracias ---- */
.rtn-gracias { text-align: center; padding: 10px 0; }
.rtn-gracias h3 { margin: 0 0 18px; font-size: 26px; }
.rtn-gracias p { margin: 0 0 14px; line-height: 1.6; }


/* ============================================================
   ARREGLO DE LOS CAMPOS DE SUBIDA
   El tema estilizaba input[type=file] como si fuera un campo de
   texto: salía una raya larga con un botón diminuto pegado a la
   izquierda, que no se entendía. Los convertimos en una caja de
   "suelta aquí tu archivo", como en la referencia del cliente.
   ============================================================ */
/* Los !important son necesarios: el tema fija border-width:0 con !important
   y sin esto la caja no se dibuja. Comprobado en vivo. */
.elementor-widget-form .elementor-field-type-upload .elementor-upload-field {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  background: #fff;
  border: 1px dashed #C3AF83 !important;
  border-radius: 6px !important;
  font-size: 14px;
  line-height: 1.4;
  color: #515457;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.elementor-widget-form .elementor-field-type-upload .elementor-upload-field:hover {
  background: #FBF9F5;
  border-color: #0D1218 !important;
}

.elementor-widget-form .elementor-field-type-upload .elementor-upload-field:focus-visible {
  outline: 2px solid #0D1218;
  outline-offset: 2px;
}

/* El botón nativo del selector de archivos.
   Se deja claro pero neutro a propósito: cada navegador le pone su
   propio texto ("Elegir archivo", "Seleccionar archivo"...) y en algunos
   entornos no lo pinta. Con fondo claro, si el texto no apareciera,
   se ve una caja discreta y no un bloque negro sin sentido. */
.elementor-widget-form .elementor-upload-field::file-selector-button {
  flex: 0 0 auto;
  min-width: 140px;
  background: #F1EFE9;
  color: #0D1218;
  border: 1px solid #C3AF83;
  border-radius: 4px;
  padding: 10px 18px;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s ease;
}
.elementor-widget-form .elementor-upload-field::file-selector-button:hover { background: #E7E3D8; }

/* Safari y Chrome antiguos */
.elementor-widget-form .elementor-upload-field::-webkit-file-upload-button {
  flex: 0 0 auto;
  min-width: 140px;
  background: #F1EFE9;
  color: #0D1218;
  border: 1px solid #C3AF83;
  border-radius: 4px;
  padding: 10px 18px;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}


/* ============================================================
   DESPLEGABLES Y CAMPOS DE TEXTO
   Homogeneiza alturas y bordes: antes unos tenían caja y otros
   solo una raya inferior, y no parecían el mismo formulario.
   ============================================================ */
.elementor-widget-form .elementor-field-textual,
.elementor-widget-form .elementor-select-wrapper select {
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  background-color: #fff;
  font-size: 15px;
  line-height: 1.4;
  color: #0D1218;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.elementor-widget-form textarea.elementor-field-textual {
  min-height: 120px;
  line-height: 1.6;
}

.elementor-widget-form .elementor-field-textual:focus,
.elementor-widget-form .elementor-select-wrapper select:focus {
  border-color: #0D1218;
  box-shadow: 0 0 0 3px rgba(195, 175, 131, .35);
  outline: none;
}

/* desplegable deshabilitado (Provincia antes de elegir comunidad) */
.elementor-widget-form select:disabled {
  background: #F4F4F4;
  color: #8A8A8A;
  cursor: not-allowed;
}

/* la flecha del desplegable, alineada con la caja nueva */
.elementor-widget-form .elementor-select-wrapper::before { line-height: 52px; }


/* ============================================================
   ETIQUETAS, ESPACIADO Y OBLIGATORIOS
   ============================================================ */
.elementor-widget-form .elementor-field-group > .elementor-field-label {
  margin-bottom: 8px;
  line-height: 1.35;
}

.elementor-widget-form .elementor-field-group {
  margin-bottom: 22px;
  align-content: start;
}

/* el asterisco de obligatorio, discreto y en el dorado de marca */
.elementor-widget-form .elementor-mark-required .elementor-field-label:after {
  color: #C3AF83;
  font-weight: 700;
  margin-left: 3px;
}

/* casillas y radios: algo de aire para poder pulsarlas bien */
.elementor-widget-form .elementor-field-subgroup .elementor-field-option {
  margin-bottom: 8px;
}
.elementor-widget-form .elementor-field-subgroup label {
  cursor: pointer;
  line-height: 1.45;
}

/* selección múltiple (meses, pagas extra): que se vean varias a la vez */
.elementor-widget-form select[multiple] {
  min-height: 150px;
  padding: 8px;
}
.elementor-widget-form select[multiple] option {
  padding: 7px 10px;
  border-radius: 4px;
}


/* ============================================================
   TARJETAS INFORMATIVAS DEL PASO 3
   ============================================================ */
.rtn-tarjeta {
  background: #F8F8F8;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.55;
  height: 100%;
}
.rtn-tarjeta__titulo {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0D1218;
}
.rtn-tarjeta p { margin: 0 0 10px; }
.rtn-tarjeta p:last-child { margin-bottom: 0; }
.rtn-tarjeta ul { margin: 0 0 10px; padding-left: 18px; }
.rtn-tarjeta li { margin-bottom: 4px; }
.rtn-tarjeta a { color: #0D1218; text-decoration: underline; word-break: break-word; }
.rtn-tarjeta--aviso { background: #FBF7EE; border-color: #C3AF83; }

/* En escritorio la tarjeta se alinea con su campo, no con la etiqueta */
@media (min-width: 768px) {
  .elementor-widget-form .elementor-field-type-html.elementor-col-50 { align-self: end; }
}

/* En móvil la tarjeta va debajo de su campo, pegada a él */
@media (max-width: 767px) {
  .elementor-widget-form .elementor-field-type-html.elementor-col-50 { margin-top: -10px; }
  .elementor-widget-form .elementor-field-type-upload .elementor-upload-field {
    flex-wrap: wrap;
    gap: 10px;
  }
}


/* ============================================================
   SUB-PANTALLAS DEL PASO 3 (Documentación)
   Un documento por pantalla, como pidió el cliente.
   ============================================================ */
.rtn-sub {
  display: none;
  width: 100%;
  flex-wrap: wrap;
  padding: 0;
}
.rtn-sub--activa {
  display: flex;
}

.rtn-sub__titulo {
  width: 100%;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E2E2E2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0D1218;
}

.rtn-sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #E2E2E2;
}

.rtn-sub-pos {
  font-size: 13px;
  letter-spacing: .04em;
  color: #797C80;
  white-space: nowrap;
}

.rtn-sub-btn {
  border: 1px solid #0D1218;
  border-radius: 4px;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.rtn-sub-btn--atras {
  background: transparent;
  color: #0D1218;
}
.rtn-sub-btn--atras:hover { background: #F1EFE9; }

.rtn-sub-btn--siguiente {
  background: #0D1218;
  color: #fff;
}
.rtn-sub-btn--siguiente:hover { background: #2A3138; }

.rtn-sub-btn:focus-visible {
  outline: 2px solid #C3AF83;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .rtn-sub-nav { flex-wrap: wrap; }
  .rtn-sub-pos { order: -1; width: 100%; text-align: center; }
  .rtn-sub-btn { flex: 1 1 auto; padding: 14px 18px; }
}


/* ============================================================
   BOTONES DE PASO
   ============================================================ */
.elementor-widget-form .e-form__buttons__wrapper__button-next,
.elementor-widget-form .e-form__buttons__wrapper__button-previous,
.elementor-widget-form button[type="submit"] {
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .02em;
}