/**
 * @file
 * Styles for the RUT element.
 */

/* Indicador de RUT válido */
.webform-rut-input.rut-valid {
  border-color: #28a745 !important;
  background-color: #f8fff8;
}

.webform-rut-input.rut-valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Indicador de RUT inválido */
.webform-rut-input.rut-invalid {
  border-color: #dc3545 !important;
  background-color: #fff8f8;
}

.webform-rut-input.rut-invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Wrapper con posición relativa para iconos y mensaje */
.form-item:has(.webform-rut-input) {
  position: relative;
}

/* Ícono de validación exitosa - ::before en el wrapper */
.form-item.rut-valid::before {
  content: '✓';
  position: absolute;
  right: var(--rut-icon-right, 16px);
  top: 50%;
  transform: translateY(var(--rut-icon-offset-valid, -50%));
  color: var(--rut-icon-color-valid, #28a745);
  font-size: var(--rut-icon-size, 1.5rem);
  font-weight: normal;
  line-height: 1.0;
  pointer-events: none;
  z-index: 1;
}

/* Ícono de error sin mensaje - ::before en el wrapper */
.form-item.rut-invalid:not([data-error-rut])::before {
  content: '✗';
  position: absolute;
  right: var(--rut-icon-right, 16px);
  top: 50%;
  transform: translateY(var(--rut-icon-offset-invalid, -50%));
  color: var(--rut-icon-color-invalid, #dc3545);
  font-size: var(--rut-icon-size, 1.5rem);
  font-weight: normal;
  line-height: 1.0;
  pointer-events: none;
  z-index: 1;
}

/* Ícono de error con mensaje - ::before en el wrapper */
.form-item.rut-invalid[data-error-rut]::before {
  content: '✗';
  position: absolute;
  right: var(--rut-icon-right, 16px);
  top: 50%;
  transform: translateY(var(--rut-icon-offset-invalid-with-message, -90%));
  color: var(--rut-icon-color-invalid, #dc3545);
  font-size: var(--rut-icon-size, 1.5rem);
  font-weight: normal;
  line-height: 1.0;
  pointer-events: none;
  z-index: 1;
}

/* Mensaje de error personalizado usando ::after con attr() */
.form-item.rut-invalid[data-error-rut]::after {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #dc3545;
  line-height: 1.125;
  content: attr(data-error-rut);
}

/* Adjust input padding to make room for icon */
.form-item.rut-valid .webform-rut-input,
.form-item.rut-invalid .webform-rut-input {
  padding-right: 35px;
}

/* Iconos personalizados - Ícono de éxito con librería personalizada */
.form-item.rut-valid[data-has-custom-icons]::before {
  content: var(--rut-icon-valid-content);
  font-family: var(--rut-icon-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant: normal;
  text-transform: none;
}

/* Iconos personalizados - Ícono de error sin mensaje con librería personalizada */
.form-item.rut-invalid:not([data-error-rut])[data-has-custom-icons]::before {
  content: var(--rut-icon-invalid-content);
  font-family: var(--rut-icon-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant: normal;
  text-transform: none;
}

/* Iconos personalizados - Ícono de error con mensaje con librería personalizada */
.form-item.rut-invalid[data-error-rut][data-has-custom-icons]::before {
  content: var(--rut-icon-invalid-content);
  font-family: var(--rut-icon-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant: normal;
  text-transform: none;
}