:root {
  --negro: black;
  --gris: #f5f5f5;
  --blanco: #ffffff;

  --space-4xs: clamp(0.33rem, calc(0.04vw + 0.32rem), 0.35rem);
  --space-3xs: clamp(0.41rem, calc(0.13vw + 0.37rem), 0.5rem);
  --space-2xs: clamp(0.51rem, calc(0.28vw + 0.43rem), 0.71rem);
  --space-xs: clamp(0.64rem, calc(0.51vw + 0.49rem), 1rem);
  --space-s: clamp(0.8rem, calc(0.88vw + 0.54rem), 1.41rem);
  --space-m: clamp(1rem, calc(1.43vw + 0.57rem), 2rem);
  --space-l: clamp(1.25rem, calc(2.25vw + 0.58rem), 2.83rem);
  --space-xl: clamp(1.56rem, calc(3.47vw + 0.52rem), 4rem);
  --space-2xl: clamp(1.95rem, calc(5.28vw + 0.38rem), 5.65rem);
  --space-3xl: clamp(2.44rem, calc(7.92vw + 0.08rem), 8rem);
  --space-4xl: clamp(3.05rem, calc(11.77vw + -0.46rem), 11.3rem);

  --text-2xs: clamp(0.51rem, calc(0.27vw + 0.43rem), 0.7rem);
  --text-xs: clamp(0.61rem, calc(0.27vw + 0.53rem), 0.8rem);
  --text-s: clamp(0.73rem, calc(0.39vw + 0.61rem), 1rem);
  --text-m: clamp(0.88rem, calc(0.53vw + 0.71rem), 1.25rem);
  --text-l: clamp(1.05rem, calc(0.73vw + 0.83rem), 1.56rem);
  --text-xl: clamp(1.26rem, calc(0.99vw + 0.96rem), 1.95rem);
  --text-2xl: clamp(1.51rem, calc(1.33vw + 1.12rem), 2.44rem);
  --text-3xl: clamp(1.81rem, calc(1.76vw + 1.29rem), 3.05rem);
  --text-4xl: clamp(2.18rem, calc(2.33vw + 1.48rem), 3.81rem);

  --text-width-xs: 40ch;
  --text-width-s: 50ch;
  --text-width-m: 65ch;
  --text-width-l: 75ch;
  --text-width-xl: 90ch;
  --text-width-2xl: 110ch;
  --text-width-3xl: 125ch;

  --h1: var(--text-4xl);
  --h2: var(--text-3xl);
  --h3: var(--text-2xl);
  --h4: var(--text-xl);
  --h5: var(--text-l);
  --h6: var(--text-m);

  --btn-pad-xs: var(--space-4xs);
  --btn-pad-s: var(--space-3xs);
  --btn-pad-m: var(--space-2xs);
  --btn-pad-l: var(--space-xs);
  --btn-pad-xl: var(--space-s);
  --btn-pad-2xl: var(--space-m);

  --width-xs: clamp(2rem, calc(-4.28vw + 6.28rem), 5rem);
  --width-s: clamp(6.25rem, calc(-5.35vw + 11.6rem), 10rem);
  --width-m: clamp(10rem, calc(-7.13vw + 17.13rem), 15rem);
  --width-l: clamp(20rem, calc(-14.26vw + 34.26rem), 30rem);
  --width-xl: clamp(30rem, calc(-21.39vw + 51.39rem), 45rem);
  --width-2xl: clamp(35rem, calc(-24.96vw + 59.96rem), 52.5rem);
  --width-3xl: clamp(45rem, calc(-32.09vw + 77.09rem), 67.5rem);

  --radius-global: 1rem;
  --radius-input-global: 0.51rem;
  --radius-full: 999rem;

  --border-width-api: 0.15rem;
  --border-style: solid;
  --border-color: transparent;
  --space-placeholder: 0.2rem 0.2rem 0.2rem 1rem;
  --border-primary: var(--primary);

  --transition-bezier: cubic-bezier(0.49, 0.14, 0.19, 1);
  --transition-time-s: 0.1s;
  --transition-time-m: 0.3s;
  --transition-time-l: 0.5s;
  --transition-time-xl: 1s;
  --transition-global: var(--transition-time-m) var(--transition-bezier);
  --transition-global-all: all var(--transition-time-m) var(--transition-bezier);
}

#formApi .h4 {
  font-size: var(--h4);
}

#formApi {
  padding: var(--space-m) var(--space-l);
  border: var(--border-width-api) var(--border-style) var(--gris);
  border-radius: var(--radius-global);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.form-group .title h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

span.dashicons {
  background-color: var(--primary);
  color: var(--blanco);
  border-radius: var(--radius-full);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-row {
  display: flex;
  gap: var(--space-s);
}

#formApi label,
input::placeholder,
textarea::placeholder {
  color: var(--text-body-l-1);
}
.form-row > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.8rem;
}

#formApi input,
select,
textarea {
  border-radius: var(--radius-input-global);
  padding: var(--space-3xs) var(--space-m);
  border: var(--border-width-api) var(--border-style) var(--border-primary);
}
textarea {
  resize: none;
  box-sizing: border-box;
  height: 100%;
}
textarea::placeholder {
  opacity: 0.7;
}

select:invalid {
  color: var(--negro);
}

option[value=""] {
  display: none;
}

.customFlex > div {
  width: auto;
}
.customFlex div:nth-child(1) {
  flex: 3;
}
.customFlex div:nth-child(2) {
  flex: 2;
}

.container-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.custom-file-input {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-file-input input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.custom-file-input .placeholder {
  background-color: var(--blanco);
  border: var(--border-width-api) var(--border-style) var(--gris);
  padding: 0.3rem 1rem;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none; /* Desactiva los eventos de puntero para el placeholder */
  border-radius: var(--radius-global);
}

.custom-file-input:hover .placeholder {
  background-color: var(--gris); /* Cambia el color de fondo en hover */
}

.custom-file-input input[type="file"]:focus + .placeholder {
  outline: 2px solid #007bff; /* Borde azul cuando está enfocado */
}
.legal {
  font-size: var(--text-2xs);
}

.legal p {
  margin: 0.2rem 0;
}

#formApi .btnSubmit {
  cursor: pointer;
  background-color: var(--primary);
  color: var(--blanco);
  padding: 0.5rem 1rem;
  font-size: var(--text-xl);
  text-align: center;
}

.mi-plugin-popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.mi-plugin-popup-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  text-align: center;
  border-radius: 5px;
  position: relative;
}

.mi-plugin-popup-cerrar {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 18px;
  cursor: pointer;
}

.success {
  border: 1px solid #4caf50;
  color: #4caf50;
}

.error {
  border: 1px solid #f44336;
  color: #f44336;
}

#formApi a {
  text-decoration: underline;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

@media (max-width: 450px) {
  .form-row {
    flex-direction: column;
  }
}