/* ==========================================================================
   Bank Autos — Complementos del sitio público
   --------------------------------------------------------------------------
   Estilos que el mockup no necesitaba porque su contenido era estático:
   paginación real del catálogo, avisos de formulario y estados nuevos.
   Se carga después de style.css y pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Campo trampa contra robots
   Debe ser invisible pero seguir existiendo para el navegador: display:none
   haría que algunos robots lo detectaran y lo dejaran vacío.
   -------------------------------------------------------------------------- */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Paginación del catálogo
   Misma apariencia que la del panel, adaptada al sitio público.
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.pagination a,
.pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  color: var(--navy-800, #021b35);
  font-family: var(--font-title, inherit);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .18s ease;
}

.pagination a:hover {
  border-color: var(--cyan-500, #05acc5);
  color: var(--cyan-500, #05acc5);
}

.pagination .is-active,
.pagination button.is-active {
  background: var(--cyan-500, #05acc5);
  border-color: var(--cyan-500, #05acc5);
  color: #fff;
  cursor: default;
}

.pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   3. Errores de formulario
   El panel usa .is-invalid y el sitio público usaba .field--error: se unifican
   para que un único script sirva a los dos.
   -------------------------------------------------------------------------- */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #e5484d;
}

.field.is-invalid .field__error {
  display: flex;
}

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #e5484d;
  font-size: .84rem;
}

/* --------------------------------------------------------------------------
   4. Aviso posterior al envío del formulario de contacto
   -------------------------------------------------------------------------- */
.contact-wa {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid rgba(5, 172, 197, .28);
  border-radius: 16px;
  background: rgba(5, 172, 197, .06);
}

.contact-wa p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 600;
  color: var(--navy-800, #021b35);
}

.contact-wa i {
  color: #1faa59;
  font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   5. Detalles menores
   -------------------------------------------------------------------------- */

/* Reseñas sin foto: se dibujan las iniciales del cliente. */
.review__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy-800, #021b35);
  color: #fff;
  font-family: var(--font-title, inherit);
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}

.hours__note {
  margin-top: 10px;
  font-size: .82rem;
  opacity: .75;
}

.tag--green {
  background: rgba(31, 170, 89, .12);
  color: #1faa59;
}

/* El asterisco de campo obligatorio. */
.req {
  color: #e5484d;
}

/* Mientras el catálogo pide resultados al servidor. */
.catalog__main.is-cargando {
  opacity: .55;
  pointer-events: none;
  transition: opacity .18s ease;
}