/**
 * Estilos del formulario público de solicitud de servicio técnico.
 *
 * Vive aquí y no dentro de WordPress para que el bloque que se pega en la
 * página sea corto. Un bloque largo se guardó cortado a la mitad y eso dejó
 * el formulario sin su JavaScript.
 */

.apst-solicitud {
  --apst-rosa: #e6007e;
  --apst-rosa-oscuro: #c40069;
  --apst-negro: #111111;
  --apst-borde: #e3e3e8;
  --apst-gris: #6b6b76;
  max-width: 860px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--apst-negro);
  box-sizing: border-box;

  /* Evita que iOS agrande el texto solo al girar el teléfono. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.apst-solicitud *,
.apst-solicitud *::before,
.apst-solicitud *::after { box-sizing: border-box; }

/* Las reglas de abajo ponen display:flex en .apst-campo, y eso le gana al
   display:none que el navegador aplica por defecto a [hidden]. Sin esta línea
   el selector de productos se vería siempre, aunque esté vacío. */
.apst-solicitud [hidden] { display: none !important; }

.apst-solicitud .apst-card {
  background: #fff;
  border: 1px solid var(--apst-borde);
  border-top: 4px solid var(--apst-rosa);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(17, 17, 17, .06);
}

.apst-solicitud .apst-header h2 {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--apst-negro);
}
.apst-solicitud .apst-header p {
  margin: 0 0 22px;
  color: var(--apst-gris);
  font-size: .95rem;
  line-height: 1.5;
}

.apst-solicitud .apst-seccion {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--apst-rosa);
  padding-bottom: 8px;
  margin: 22px 0 14px;
  border-bottom: 1px solid var(--apst-borde);
}
.apst-solicitud .apst-seccion:first-of-type { margin-top: 0; }

.apst-solicitud .apst-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.apst-solicitud .apst-col-2 { grid-column: 1 / -1; }

.apst-solicitud .apst-campo { display: flex; flex-direction: column; min-width: 0; }
.apst-solicitud .apst-campo label {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--apst-negro);
}
.apst-solicitud .apst-campo label span { color: var(--apst-rosa); }

.apst-solicitud input,
.apst-solicitud textarea,
.apst-solicitud select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--apst-borde);
  border-radius: 9px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--apst-negro);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;

  /* macOS e iOS le ponen su propio estilo nativo a los campos: ignoran el
     relleno y recortan el texto (por eso el selector de productos se veía
     cortado en Mac). Esto los deja con el mismo aspecto en todos lados.
     Va con !important porque el tema de WordPress también los estiliza. */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  min-height: 46px;
  line-height: 1.4 !important;
  box-shadow: none;
}
.apst-solicitud textarea { resize: vertical; min-height: 90px; }

/* La flecha del desplegable la dibujamos nosotros, porque al quitar el estilo
   nativo también desaparece la del sistema. */
.apst-solicitud select {
  padding-right: 40px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%236b6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 18px 18px;
}
.apst-solicitud input:focus,
.apst-solicitud textarea:focus,
.apst-solicitud select:focus {
  outline: none;
  border-color: var(--apst-rosa);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, .13);
}
.apst-solicitud input.apst-invalido,
.apst-solicitud textarea.apst-invalido {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}
.apst-solicitud input.apst-autorelleno {
  background: #fff7fb;
  border-color: #f6b6d8;
}

.apst-solicitud .apst-buscador {
  background: #fafafc;
  border: 1px dashed var(--apst-borde);
  border-radius: 12px;
  padding: 18px;
}
.apst-solicitud .apst-buscador-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.apst-solicitud .apst-ayuda {
  margin: 0;
  flex: 1 1 320px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--apst-gris);
}
.apst-solicitud .apst-btn-secundario {
  background: var(--apst-negro);
  color: #fff;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 9px;
  padding: 11px 22px;
  min-height: 44px; /* mínimo recomendado para tocar cómodo en el móvil */
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.apst-solicitud .apst-btn-secundario:hover:not(:disabled) { background: #000; }
.apst-solicitud .apst-btn-secundario:disabled { opacity: .6; cursor: not-allowed; }

.apst-solicitud .apst-resultado {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: .88rem;
  line-height: 1.5;
  background: #eaf7ee;
  border: 1px solid #b9e2c5;
  color: #17603a;
}
.apst-solicitud .apst-resultado.apst-resultado-error {
  background: #fdecee;
  border-color: #f5c2c7;
  color: #a1232f;
}

.apst-solicitud .apst-bloque-producto { margin-top: 18px; }

.apst-solicitud .apst-trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apst-solicitud .apst-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--apst-borde);
}
.apst-solicitud .apst-nota { margin: 0; font-size: .82rem; color: var(--apst-gris); }
.apst-solicitud .apst-nota span { color: var(--apst-rosa); }

.apst-solicitud button[data-apst="enviar"] {
  background: var(--apst-rosa);
  color: #fff;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 9px;
  padding: 13px 30px;
  font-size: .97rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.apst-solicitud button[data-apst="enviar"]:hover:not(:disabled) { background: var(--apst-rosa-oscuro); }
.apst-solicitud button[data-apst="enviar"]:active:not(:disabled) { transform: translateY(1px); }
.apst-solicitud button[data-apst="enviar"]:disabled { opacity: .6; cursor: not-allowed; }

.apst-solicitud .apst-aviso {
  padding: 15px 17px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: .93rem;
  line-height: 1.5;
}
.apst-solicitud .apst-aviso-ok {
  background: #eaf7ee;
  border: 1px solid #b9e2c5;
  color: #17603a;
}
.apst-solicitud .apst-aviso-ok strong { display: block; margin-bottom: 3px; font-size: 1.02rem; }
.apst-solicitud .apst-aviso-error {
  background: #fdecee;
  border: 1px solid #f5c2c7;
  color: #a1232f;
}

@media (max-width: 782px) {
  /* Si un campo tiene menos de 16px, iOS hace zoom solo al tocarlo y descuadra
     la página entera. Con 16px exactos deja de hacerlo. */
  .apst-solicitud input,
  .apst-solicitud textarea,
  .apst-solicitud select { font-size: 16px !important; }
}

@media (max-width: 640px) {
  .apst-solicitud .apst-card { padding: 20px; border-radius: 12px; }
  .apst-solicitud .apst-grid { grid-template-columns: minmax(0, 1fr); }
  .apst-solicitud .apst-buscador { padding: 14px; }
  .apst-solicitud .apst-buscador-pie { flex-direction: column; align-items: stretch; }
  .apst-solicitud .apst-btn-secundario { width: 100%; }
  .apst-solicitud .apst-pie { flex-direction: column-reverse; align-items: stretch; }
  .apst-solicitud button[data-apst="enviar"] { width: 100%; }
  .apst-solicitud .apst-nota { text-align: center; }
}