/* ==========================================================================
   VH Cotizar CTA — formulario de placa dentro del bloque vh-cta--seguro
   vehiculoseguros.com · v1.0.0 · 2026-09-30

   Hereda caja, etiqueta y nota de vh-content.css §4.5. Aquí solo vive el formulario.
   Los selectores llevan .page-content-single y el elemento (input./button.) porque el tema
   estiliza input[type=text] y button globalmente y hay que ganarle sin !important.
   ========================================================================== */

.page-content-single .vh-cta--placa [hidden] {
  display: none;
}

.page-content-single .vh-placa {
  margin: 0.2em 0 0.9em;
}

.page-content-single .vh-placa__campos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.page-content-single .vh-cta--placa .vh-placa__label {
  flex-basis: 100%;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #17323d;
}

/* La placa se ve como una placa colombiana: amarilla, borde negro y filete interior. */
.page-content-single .vh-placa input.vh-placa__input {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 280px;
  height: 52px;
  margin: 0;
  padding: 0 12px;
  border: 3px solid #111;
  border-radius: 8px;
  background: #ffcd00;
  box-shadow: inset 0 0 0 2px #ffcd00, inset 0 0 0 4px #111;
  color: #111;
  font: 800 24px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.page-content-single .vh-placa input.vh-placa__input::placeholder {
  color: rgba(0, 0, 0, 0.38);
}

.page-content-single .vh-placa input.vh-placa__input:focus {
  outline: 3px solid #0d2b38;
  outline-offset: 2px;
}

.page-content-single .vh-placa input.vh-placa__input[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: inset 0 0 0 2px #ffcd00, inset 0 0 0 4px #b42318;
}

.page-content-single .vh-placa button.vh-placa__boton {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--vh-azul, #008ec2);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.page-content-single .vh-placa button.vh-placa__boton:hover,
.page-content-single .vh-placa button.vh-placa__boton:focus-visible {
  background: var(--vh-azul-oscuro, #056d94);
}

.page-content-single .vh-placa button.vh-placa__boton:focus-visible {
  outline: 3px solid #0d2b38;
  outline-offset: 2px;
}

.page-content-single .vh-cta--placa .vh-placa__ayuda {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: #40525c;
}

.page-content-single .vh-placa[data-vh-vehiculo="carro"] .vh-placa__ayuda,
.page-content-single .vh-placa[data-vh-vehiculo="moto"] .vh-placa__ayuda {
  color: #1f6b45;
  font-weight: 600;
}

.page-content-single .vh-cta--placa .vh-placa__estado {
  margin: 0;
  font-size: 14px;
}

.page-content-single .vh-cta--placa .vh-placa__estado:empty {
  display: none;
}

.page-content-single .vh-placa[data-vh-error] .vh-placa__estado {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fef3f2;
  color: #b42318;
}

.page-content-single .vh-placa.is-listo .vh-placa__campos {
  display: none;
}

.page-content-single .vh-placa__listo {
  padding: 14px 16px;
  border: 1px solid #cfe0d4;
  border-radius: 8px;
  background: #edf6f0;
}

.page-content-single .vh-placa__listo:focus {
  outline: none;
}

.page-content-single .vh-cta--placa .vh-placa__listo-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-weight: 700;
  color: #1f6b45;
}

.page-content-single .vh-placa__tag {
  padding: 2px 10px;
  border: 2px solid #111;
  border-radius: 6px;
  background: #ffcd00;
  color: #111;
  font: 800 17px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
}

.page-content-single .vh-cta--placa .vh-placa__listo-texto {
  margin: 0 0 10px;
  font-size: 15px;
}

.page-content-single .vh-placa__barra {
  height: 4px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: #cfe0d4;
}

.page-content-single .vh-placa__barra span {
  display: block;
  height: 100%;
  background: #1f6b45;
  transform-origin: left;
  animation: vh-placa-avance var(--vh-espera, 2200ms) linear forwards;
}

.page-content-single .vh-placa.is-sin-copia .vh-placa__barra {
  display: none;
}

@keyframes vh-placa-avance {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.page-content-single .vh-placa__listo a.vh-placa__ir {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 5px;
  background: var(--vh-azul, #008ec2);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.page-content-single .vh-placa__listo a.vh-placa__ir:hover,
.page-content-single .vh-placa__listo a.vh-placa__ir:focus-visible {
  background: var(--vh-azul-oscuro, #056d94);
  color: #fff;
}

.page-content-single .vh-placa button.vh-placa__cambiar {
  min-height: 44px;
  margin: 0 0 0 12px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--vh-azul-oscuro, #056d94);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 480px) {
  .page-content-single .vh-placa input.vh-placa__input {
    max-width: none;
  }

  .page-content-single .vh-placa button.vh-placa__boton {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-content-single .vh-placa__barra span {
    animation: none;
    transform: none;
  }
}