/* =========================================================
   custom.css (VíaSubasta)
   =========================================================

   ÍNDICE
   1) Utilidades y colores
   2) Overrides Bootstrap y componentes globales
   3) Footer
   4) Subasta: cabecera, cajas y ficha
   5) Mensajes de subasta
   6) Puja: contenedores, inputs y tablas
   7) Buscador y listados
   8) Modal registro subasta
   9) Top y favoritas
   10) Dashboard: formulario de puja
   11) Notificaciones
   12) Área del Administrador Concursal (/mis-expedientes/)
   13) Menú móvil de la cabecera

   ========================================================= */

/* =========================================================
   1) UTILIDADES / COLORES (helpers)
   ========================================================= */

.bg-primario {
    background-color: #121636 !important;
    border-color: #121636 !important;
    color: #fff !important;
}

.bg-primario-hover:hover {
    background-color: #2f3777 !important;
    border-color: #2f3777 !important;
    color: #fff !important;
}

.bg-secundario {
    background-color: #d1bb92 !important;
    border-color: #d1bb92 !important;
    color: #212529 !important;
}

.bg-secundario-hover:hover {
    background-color: #e3cca1 !important;
    border-color: #e3cca1 !important;
    color: #212529 !important;
}

.btn-light-gray {
    background-color: #e3e3e3 !important;
    border-color: #e3e3e3 !important;
    color: #333 !important;
}

.btn-light-gray:hover {
    background-color: #f3f3f3 !important;
    border-color: #f3f3f3 !important;
    color: #333 !important;
}

.bg-warning-light {
    background-color: #f8f4e8;
}

.bg-warning-light-2 {
    background-color: #e6dbbd;
}

.no-border {
    border: none !important;
}

/* Overlay para menú móvil */
.vs-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  /* Por debajo del 99 de `header.header-area`, a proposito.

     La cabecera es `position: relative; z-index: 99`, o sea que CREA un contexto
     de apilamiento: el `z-index: 99999` del panel lateral solo compite dentro de
     ella, y contra el velo lo que cuenta es el 99 de la cabecera. Con el velo a
     9998 el velo pintaba encima del propio menu y, peor, encima del boton: el
     clic que sigue al toque en un movil lo recibia el velo y cerraba el menu
     recien abierto. Con 98 la cabecera y su menu quedan siempre por encima sin
     depender de ninguna clase condicional. Verificado que en estas paginas nada
     mas tiene z-index entre 90 y 9997.

     AMPLIACION (bloque 14, cabecera fija en movil): aquella verificacion se
     hizo en portada y listado, y en la FICHA DE LOTE no se cumple — su nav de
     secciones es un `.sticky-top` de Bootstrap con z-index 1030. Por eso en
     <=991px la cabecera ya no vale 99: el envoltorio `.header-topbar-area`
     pasa a `sticky`/`fixed` con z-index 1035, y es el que crea el contexto de
     apilamiento frente a este velo. El razonamiento de arriba no cambia, solo
     el numero: 1035 sigue estando muy por encima de 98, asi que el menu movil
     y su boton siguen ganandole al velo. */
  z-index: 98;
}

body.vs-menu-open .vs-mobile-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.vs-menu-open {
  overflow: hidden;
}


/* Sube el z-index del panel lateral (ajusta el selector al tuyo) */
.main-menu {
  position: relative;
  z-index: 9999;
}

/* =========================================================
   2) OVERRIDES BOOTSTRAP / COMPONENTES GLOBAL
   ========================================================= */

.form-control {
    border-radius: 18px !important;
}

.form-control::placeholder {
    color: #767676 !important;
}

.btn-primary {
    background-color: #121636 !important;
    border-color: #121636 !important;
}

/* Botón outline al lado de "Registrar nuevo participante" (límite de puja).
   Ojo: no invertir a fondo oscuro en :focus, o al cerrar el modal el botón
   se queda con pinta de botón primario. Solo :hover / :focus-visible. */
.btn-limite-puja {
  background-color: #fff;
  border: 1px solid #ccd5e8;
  color: #121636 !important;
  font-weight: 600;
}

.btn-limite-puja:hover,
.btn-limite-puja:focus-visible {
  background-color: #fff;
  border-color: #121636;
  color: #121636 !important;
}

.btn-limite-puja:focus {
  box-shadow: none;
}

/* "x" roja para quitar el límite, al lado del botón anterior */
.btn-limite-quitar {
  background-color: #fff;
  border: 1px solid #ccd5e8;
  color: #db3030 !important;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  line-height: 1;
}

.btn-limite-quitar:hover,
.btn-limite-quitar:focus-visible {
  background-color: #fff;
  border-color: #db3030;
  color: #db3030 !important;
}

.btn-limite-quitar:focus {
  box-shadow: none;
}

/* Modales */
.modal-content {
    border-radius: 15px;
    border: none;
    overflow: hidden;
}

.modal-backdrop {
    background-color: rgba(18, 22, 53, 0.8) !important;
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 1;
}

/* Dropdown */
.dropdown-menu {
    background-color: #282d57;
    border: none;
    border-radius: 8px;
}

.dropdown-menu .dropdown-item {
    color: #FFF;
    font-weight: 500;
    padding: 4px 15px;
    font-size: 13px;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #343A6A;
    color: #FFFFFF;
}

/* Avatar header */
.header-avatar {
    background-color: #B0BADD;
    color: #fff;
    width: 35px;
    height: 35px;
    font-size: 1.4rem;
    font-weight: 400;
}

.dropdown-avatar span {
    font-size: 14px;
    font-weight: 300 !important;
}

/* Animaciones */
.animate-fade {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal específico vsubasta */
.modal-vsubasta .modal-header {
    border: none;
    padding: 30px;
    padding-bottom: 0;
}

.modal-vsubasta .modal-body {
    border: none;
    padding-bottom: 0;
    padding: 30px;
    padding-top: 20px;
}

.modal-vsubasta label {
    color: #282d57;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

/* Jerarquía de encabezados: la etiqueta correcta, el mismo aspecto.

   Los títulos de categoría y de lote se pintaban con <h5> y <h6> por su tamaño
   de letra, no por su nivel, y dejaban el índice de la página saltando del H2 al
   H5 y al H6. Ahora son <h3>, que es lo que les toca colgando del H2 de su
   sección. Aquí se repiten, palabra por palabra, las reglas que el tema aplicaba
   a las etiquetas antiguas: el objetivo era arreglar la estructura SIN tocar el
   diseño. Si algún día se rehace la maqueta, esto se puede unificar.

   Se replica en custom.css y no se editan las reglas de style.css a propósito:
   style.css es la base heredada de la plantilla y se toca lo mínimo. */

.category-card5 .category-card-wrapper .category-content h3 {
  margin-bottom: 5px;
  font-size: 1rem;
  font-weight: 500;
}

.category-card5 .category-card-wrapper .category-content h3 a {
  color: var(--title-color);
  font-family: var(--font-dmsans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  transition: 0.5s;
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .category-card5 .category-card-wrapper .category-content h3 a {
    font-size: 19px;
  }
}

.category-card5 .category-card-wrapper .category-content h3 a:hover {
  color: var(--primary-color4);
}

.auction-card .auction-card-content h3 {
  margin-bottom: 20px;
  font-size: 1rem;
  font-weight: 500;
}

.auction-card .auction-card-content h3 a {
  color: var(--title-color);
  font-family: var(--font-dmsans);
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
  transition: 0.5s;
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .auction-card .auction-card-content h3 a {
    font-size: 17px;
  }
}

.auction-card.style-5 .auction-card-content h3 {
  margin-bottom: 5px;
}

.auction-card.style-5 .auction-card-content h3 a:hover {
  color: var(--primary-color4);
}

/* Lema del hero: era un <h4> y no es un encabezado. Mismas dos reglas que
   tenía el tema, incluida la variante de móvil. */

.home5-banner-section .banner-wrapper .banner-content .banner-subtitulo {
  color: var(--white-color);
  font-family: var(--font-dmsans);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 25px;
}

@media (max-width: 576px) {
  .home5-banner-section .banner-wrapper .banner-content .banner-subtitulo {
    font-size: 20px;
    margin-bottom: 20px;
    color: #282d57;
    text-align: center;
  }
}

/* Altura automática en las imágenes.

   Compañera obligatoria de los `width`/`height` que se añadieron al HTML el
   2026-08-28 para evitar el salto de maquetación. Sin esto, en cuanto el CSS
   fija SOLO el ancho —`style="width:180px"`, `width:100%`…— el navegador se
   queda con la altura del atributo y la imagen sale estirada. Le pasó al logo
   de Hermes Capital del pie.

   Va como selector de elemento a propósito: cualquier regla con clase que sí
   defina una altura (tarjetas con `object-fit`, por ejemplo) le gana. */

img {
  height: auto;
}

/* Bloque de confianza de la portada.

   Sustituye a `home-confianza.webp`, que llevaba el texto dentro de la imagen
   (y en Lorem ipsum). Se sigue el diseño de Figma: fondo claro con anillos
   concéntricos muy suaves centrados en la marca, y cuatro columnas con la
   pastilla del icono en claro, no en oscuro.

   Los anillos van en un ::before y no en el fondo del section para poder
   recortarlos con `overflow: hidden` sin afectar al contenido. */

.vs-confianza {
  position: relative;
  overflow: hidden;
  background: #f1f2f6;
  padding: 96px 0 104px;
}

.vs-confianza::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1700px;
  height: 1700px;
  transform: translate(-50%, -58%);
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    rgba(18, 22, 54, 0) 0 108px,
    rgba(18, 22, 54, .045) 108px 109px
  );
  pointer-events: none;
}

.vs-confianza .container {
  position: relative;
  z-index: 1;
}

.vs-confianza-cabecera {
  text-align: center;
  margin-bottom: 72px;
}

/* Es el encabezado de la sección, aunque se pinte pequeño: el tamaño es una
   decisión visual y el nivel una decisión de estructura. */
.vs-confianza-titulo {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #8b8fa4;
  margin: 0 0 10px;
}

.vs-confianza-logo {
  width: 300px;
  max-width: 72%;
  height: auto;
}

.vs-confianza-item {
  text-align: center;
  max-width: 285px;
  margin: 0 auto;
}

/* Pastilla clara con el glifo en azul marino, como en el diseño. Antes era al
   revés —fondo marino y glifo blanco— y pesaba demasiado sobre un fondo tan
   claro. */
.vs-confianza-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 24px;
  border-radius: 16px;
  background: #ffffff;
  color: #2b3160;
  font-size: 26px;
  box-shadow: 0 10px 26px rgba(18, 22, 54, .10);
}

/* El glifo lleva degradado en el diseño, no color plano. Se consigue pintando
   el degradado y recortándolo con la forma del icono (los Bootstrap Icons son
   una fuente, así que `background-clip: text` funciona).

   Va dentro de @supports porque el recorte exige `color: transparent`: si el
   navegador no lo entendiera, el icono desaparecería. Sin soporte se queda el
   color plano de arriba, que es un degradado a secas menos bonito pero visible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .vs-confianza-icono i {
    background: linear-gradient(180deg, #7c86b8 0%, #262c58 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.vs-confianza-item-titulo {
  font-size: 19px;
  font-weight: 700;
  color: var(--blue-vs);
  margin: 0 0 12px;
}

/* El texto NO es gris: es azul marino claro, de la misma familia que el título.
   Un gris neutro aquí rompía la gama del bloque. */
.vs-confianza-item-texto {
  font-size: 15.5px;
  line-height: 1.55;
  color: #4a5378;
  margin: 0;
}

@media (max-width: 991.98px) {
  .vs-confianza {
    padding: 64px 0 72px;
  }

  .vs-confianza::before {
    width: 1100px;
    height: 1100px;
  }

  .vs-confianza-cabecera {
    margin-bottom: 48px;
  }
}

@media (max-width: 575.98px) {
  .vs-confianza {
    padding: 48px 0 56px;
  }

  .vs-confianza-cabecera {
    margin-bottom: 36px;
  }

  /* A dos columnas la caja mide 164 px y «Acompañamiento» pedía 170 a 19 px:
     el título se salía por la derecha. A 17 px cabe la palabra más larga, que
     es la que manda aquí porque no se puede partir. */
  .vs-confianza-item-titulo {
    font-size: 17px;
  }

  /* A dos columnas el texto largo apretaba demasiado. */
  .vs-confianza-item-texto {
    font-size: 14px;
  }
}

/* Los conmutadores de vista pasaron de <a> a <button>: hay que quitarles la
   apariencia por defecto para que sigan viéndose igual. */

.vs-search-actions-btn-link {
  background: none;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Botón de «volver arriba».

   Pasó de <div> a <button> para que se pueda tabular y tenga nombre, así que
   hay que quitarle el relleno y la apariencia que trae un botón por defecto.

   Y se sube del suelo: estaba a 30 px del borde inferior en móvil, que es justo
   donde vive la barra de gestos del teléfono. `env(safe-area-inset-bottom)` lo
   levanta lo que haga falta en los que la tienen, y 0 en los que no. */

.circle-container {
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El SVG del tema va posicionado en absoluto y centrado con transform; con el
   flex de arriba sobra, y además el transform pelea con el centrado. */
.circle-container svg {
  position: static;
  transform: none;
}

@media (max-width: 991.98px) {
  .circle-container {
    width: 44px;
    height: 44px;
    right: 20px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Tipografía de los titulares en móvil.

   El tema ya trae reglas para pantallas pequeñas, pero calibradas muy grandes:
   45 px el H1 y 38 px los títulos de sección. En un teléfono de 360 px eso hace
   que «Tu portal de subastas» ocupe dos líneas enormes y que «Categorías» llene
   el ancho de la pantalla.

   Se usa clamp() en vez de un tamaño fijo para que escale con el ancho: a 360 px
   el H1 queda en ~30 y a 575 en 36, sin el salto brusco de un breakpoint. */

@media (max-width: 575.98px) {
  .home5-banner-section .banner-wrapper .banner-content h1 {
    font-size: clamp(28px, 8.2vw, 36px);
    line-height: 1.15;
  }

  .section-title4 h2 {
    font-size: clamp(24px, 7vw, 30px);
  }
}

/* Pie: las tres piezas del contacto, una debajo de otra en móvil.

   `.footer-content` es una fila flexible sin `wrap`, así que a 360 px metía la
   dirección, el email con las redes y el logo de Hermes en tres columnas de
   ~104 px. La dirección salía partida palabra a palabra. */

/* El corte está en 1200 y no en 768 a propósito: el bloque vive dentro de un
   `col-sm-6`, así que a 768 px la columna mide ~350 y las tres piezas seguían
   saliendo a 104 px cada una. Con el ancho de `Edificio Málaga, Planta 2,
   Oficina 14` hacen falta unos 230 px, y eso no se consigue hasta pasado el
   contenedor de 1200. */

@media (max-width: 1199.98px) {
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-content img {
    width: 150px;
  }
}

/* Tablet: las dos columnas del pie, centradas entre sí.

   Entre 576 y 1199 px el pie va a dos columnas, pero el logotipo ocupa 126 px
   y el bloque de contacto 339: la columna del logotipo se quedaba con 233 px de
   vacío debajo y las dos mitades no se miraban. Centrando en vertical, el hueco
   se reparte arriba y abajo y las dos piezas quedan a la misma altura.

   Por debajo de 576 hay una sola columna, así que esto no le afecta; a partir
   de 1200 manda la composición original del tema. */

@media (min-width: 576px) and (max-width: 1199.98px) {
  .footer-menu-wrap .row {
    align-items: center;
  }
}

/* Pie centrado en móvil y tablet.

   Apilado a la izquierda, el pie quedaba como una columna de bloques sueltos
   pegados al borde. Centrado se lee como una sola pieza, que es lo que pide una
   pantalla estrecha.

   Y el hueco: `.footer-menu-wrap` lleva `padding-top: 165px`, que en escritorio
   da aire al fondo decorativo pero en un móvil es un vacío de media pantalla
   antes del logotipo. */

@media (max-width: 991.98px) {
  /* Selector largo a propósito: el tema fija ese relleno con
     `footer.style-5 .footer-wrapper .footer-menu-wrap`, y con un solo nombre de
     clase esta regla perdía por especificidad y no hacía nada. */
  footer.style-5 .footer-wrapper .footer-menu-wrap {
    padding-top: 56px;
    /* Eran 70 px, y con el pie ya apilado quedaba un vacío al final tan grande
       como el hueco que había arriba. */
    padding-bottom: 44px;
  }

  .footer-menu-wrap {
    text-align: center;
  }

  /* La separación entre las dos columnas se toca por la canaleta de Bootstrap,
     NO anulando el margen de las columnas.

     La fila lleva `margin-top: -48px` y lo compensa el `margin-top` de cada
     columna: al ponerlo a cero, el negativo se quedaba suelto y subía todo el
     contenido 48 px. Por eso el logotipo aparecía pegado al borde superior pese
     a haber 56 px de relleno. */
  .footer-menu-wrap .row {
    --bs-gutter-y: 2.5rem;
  }

  /* Con `.footer-content` a secas perdía contra la regla base de este mismo
     archivo, que está más abajo y por tanto gana a igualdad de especificidad. */
  .footer-wrapper .footer-content {
    align-items: center;
    gap: 32px;
  }

  .footer-menu-wrap img {
    margin-left: auto;
    margin-right: auto;
  }

  /* «Contacto» quedaba a 8 px de la dirección: con el pie centrado, los
     encabezados necesitan más aire que en una columna estrecha. */
  .footer-menu-wrap h4 {
    margin-bottom: 20px;
  }

  footer .footer-wrapper .social-area .social-list {
    justify-content: center;
  }
}

/* Contacto del pie: email y teléfono.

   Al pasarlos de texto plano a enlaces —para que en móvil se puedan pulsar—
   heredaron el azul de enlace del tema y cantaban sobre el fondo marino. En el
   diseño van del mismo color que el resto del contacto. */

.pie-contacto-enlace,
.pie-contacto-enlace:visited {
  color: inherit;
}

.pie-contacto-enlace:hover,
.pie-contacto-enlace:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* Pie: sellos bajo el logotipo y columna «Conócenos» (2026-09-16).

   Los sellos van SIN baldosa: ANEES en su versión blanca y los otros dos traen
   su propio fondo (el rectángulo rojo del ISO y el círculo blanco de Confianza
   Online). Una tarjeta blanca detrás de todos los convertía en un parche.

   Se igualan por ALTO y no por ancho, que es como se leen alineados en una
   fila; la fila salta de línea sola para cuando se añadan más. El selector
   repite `.footer-menu-wrap` porque la regla del pie móvil centra cualquier
   `img` de ahí dentro con márgenes automáticos. */

.pie-sellos {
  margin-top: 36px;
}

.footer-menu-wrap p.pie-sellos-titulo {
  margin: 0 0 14px;
  color: #afbbda;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pie-sellos-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-sellos-lista li {
  display: block;
}

.pie-sellos-lista a {
  display: block;
  border-radius: 4px;
}

.pie-sellos-lista a:focus-visible {
  outline: 2px solid #d1bb92;
  outline-offset: 4px;
}

.footer-menu-wrap .pie-sellos-lista img {
  display: block;
  width: auto;
  height: 56px;
  margin: 0;
}

.pie-enlaces {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-enlaces li + li {
  margin-top: 10px;
}

.pie-enlaces a,
.pie-enlaces a:visited {
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}

.pie-enlaces a:hover,
.pie-enlaces a:focus {
  color: #d1bb92;
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .pie-sellos-lista {
    justify-content: center;
  }
}

/* Con tres columnas, el centrado vertical del bloque «Tablet» de más arriba
   dejaba «Conócenos» flotando a media altura entre el logo y el contacto. Por
   debajo de 992 las columnas ya van apiladas y ese centrado no hace nada. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .footer-menu-wrap .row {
    align-items: flex-start;
  }

  /* La columna del logo mide unos 300 px a este ancho: a 56 px de alto los tres
     sellos no caben en una fila y el último quedaba solo debajo. */
  .footer-menu-wrap .pie-sellos-lista img {
    height: 48px;
  }

  .pie-sellos-lista {
    gap: 14px 18px;
  }
}

/* Franja legal del pie: contraste.

   El tema pinta el copyright y los enlaces legales en #646464 sobre el negro
   puro de `.footer-wrapper-bottom`. Eso da 3,55:1, por debajo del 4,5:1 que
   la WCAG 2.1 exige en el nivel AA para texto normal —y son justamente aviso
   legal, privacidad, cookies y condiciones, que es donde peor sienta que no
   se lean—.

   #7d7d7d sube a 5,10:1. Se queda corto respecto al blanco a propósito: la
   franja legal no debe competir con el contenido, solo ser legible. El hover
   sigue yendo al dorado, que sobre negro da 11,2:1 y no necesita tocarse.

   Mismos selectores que style.css para igualar especificidad; custom.css
   carga después, así que gana sin `!important`. */

footer .footer-wrapper-bottom .footer-bottom .copyright-area p,
footer .footer-wrapper-bottom .footer-bottom .copyright-area p a,
footer .footer-wrapper-bottom .footer-bottom .footer-bottom-right ul li a {
  color: #7d7d7d;
}

/* Objetivos táctiles del corazón de favoritos y del botón de cuenta.

   Medían 30x30 y 31x31, por debajo del mínimo cómodo para un dedo (40-44px).
   En vez de agrandarlos —lo que descolocaría la esquina de las tarjetas y la
   cabecera— se amplía SOLO el área de pulsación con un pseudo-elemento
   centrado. El dibujo no cambia; lo que cambia es dónde hay que acertar. */

.anadir-favorita,
.login-btn {
  position: relative;
}

.anadir-favorita::after,
.login-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Menu usuario */

.navbar-nav-usuario {
    font-size: 15px;
}

.navbar-nav-usuario .nav-link {
    /*padding: 8px 20px !important;*/
    margin-right: 5px;
    border-radius: 20px;
}

.navbar-nav-usuario .nav-link:hover {
    background: #e3e3e3 !important;
    border-radius: 20px;
    /*padding: 8px 20px !important;*/
}

.navbar-nav-usuario .nav-link.active {
    background: #121636 !important;
    color: white;
    /*padding: 8px 20px !important;*/
}

.navbar-nav-usuario .nav-separator .nav-link {
    cursor: default;
    opacity: .6;
    padding: 8px 10px !important;
}

/* Movil y tablet: los ocho enlaces en UNA fila que se arrastra con el dedo.

   Sin esto se apilaban en vertical: la barra es `navbar-expand-lg` pero no
   tiene `navbar-toggler` ni `.collapse`, asi que por debajo de 992px Bootstrap
   pone el `.navbar-nav` en columna y no hay nada que lo colapse. De ahi tambien
   que el separador `|` cayera en su propia linea y que el `ms-auto` del boton
   lo empujara descolgado a la derecha. Por encima de `lg` no cambia nada. */

@media (max-width: 991.98px) {
    /* Selector con el `.navbar >` delante a proposito: Bootstrap declara
       `.navbar > .container { flex-wrap: inherit }` y el navbar hereda `wrap`
       por debajo de `lg`. Con un solo nombre de clase perdia la especificidad
       y el boton se caia a una segunda linea. */
    .navbar > .navbar-usuario-container {
        flex-wrap: nowrap;
        gap: 12px;
        /* Sin relleno propio: entre el `px-3` del <nav> y el del `.container`
           se iban 56px de los 412 de pantalla, y se los quitaban a las
           pestanas. El respiro lateral lo pone ya el <nav>. */
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-nav-usuario-scroll {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    /* La tira se arrastra; la barra de scroll visible solo estorba. */
    .navbar-nav-usuario-scroll::-webkit-scrollbar {
        display: none;
    }

    .navbar-nav-usuario {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    /* Relleno lateral, imprescindible con la pildora.
       Bootstrap solo lo pone a partir de `lg`: por debajo deja
       `.navbar-nav .nav-link` con padding horizontal 0. Combinado con el
       `border-radius: 20px` del estado activo, la curva se comia las letras de
       los extremos y la pestana activa se veia cortada. En escritorio no
       pasaba porque alli Bootstrap si da sus 8px. */
    .navbar-nav-usuario .nav-link {
        white-space: nowrap;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Separacion entre pildoras: con 5px se tocaban y las cuatro se leian como
       un texto corrido. */
    .navbar-nav-usuario .nav-link {
        margin-right: 8px;
    }

    /* Aviso de que la tira sigue: se difumina el borde derecho. La clase la
       pone y la quita front.custom.js segun haya o no contenido por delante,
       para que no aparezca un degradado sobre el final de la tira. */
    .navbar-nav-usuario-scroll.vs-hay-mas {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }

    /* Lupa de 40x40 en vez del boton con texto: ver el porque en
       menu-usuario.inc. 40px es el minimo comodo para un objetivo tactil. */
    .navbar-usuario-container #toggleSearch {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 17px;
    }
}

/* Movil y tablet: el desplegable del icono de usuario a ancho completo.

   Anclado por Popper era una tarjeta estrecha colgando del icono, con opciones
   de poca altura. Se neutraliza el posicionamiento en linea de Popper (de ahi
   los !important: son estilos inline, no de hoja) y se ancla a la cabecera,
   que pasa a ser el bloque contenedor. */

@media (max-width: 991.98px) {
    .header-topbar-area {
        position: relative;
    }

    .dropdown-avatar {
        position: static;
    }

    .dropdown-avatar .dropdown-menu {
        position: absolute !important;
        inset: 100% 0 auto 0 !important;
        transform: none !important;
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .dropdown-avatar .dropdown-item {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* =========================================================
   3) FOOTER
   ========================================================= */

.footer-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5px;
}

.footer-content p {
    color: white;
    font-size: 14px;
}

.footer-content img {
    width: 160px;
}

.footer-wrapper h4 {
    color: var(--white-color);
}

/* =========================================================
   4) SUBASTA - CABECERA / CAJAS / FICHA
   ========================================================= */

/* ---------------------------------------------------------------------------
   Esqueleto de la ficha: cabecera · lateral · cuerpo

   La ficha eran dos columnas: TODO el contenido en una, y la caja lateral
   —contador, mayor puja, registro, valoración— en la otra. Por debajo de
   1200px (`col-xl`) las dos se apilan, y la lateral caía ENTERA al final:
   medido, el contador aparecía a 2.708px de scroll en móvil, 2.799 en tablet
   y 2.900 en un portátil de 1024. O sea, detrás de toda la descripción.

   El orden del DOM pasa a ser el bueno para pantalla estrecha —cabecera,
   lateral, cuerpo—, que además es el orden correcto de tabulación, y en
   escritorio se reconstruye la maqueta de siempre con una rejilla.

   La rejilla no es capricho: la lateral tiene que ocupar LAS DOS FILAS para
   conservar su altura completa, y con ella el `position: sticky` de
   `.auction-details-content`. Partiendo la columna en dos sin rejilla, la
   lateral se quedaba en 717px de alto en vez de 2.498 y el bloque de puja
   dejaba de seguirte al leer.

   Las medidas salen idénticas a las de antes: 75% y 25% de una fila de 1140px
   son los mismos 855 y 285px que daban `.col-xl-9` y `.col-xl-3`.
   --------------------------------------------------------------------------- */

/* El canalón vertical de `gy-5` sobra entre cabecera y cuerpo: eran una sola
   columna, y ese hueco lo sigue dando el `mt-5` de la descripción. Se apunta
   a `.row > ...` para ganarle a `.row > *` de Bootstrap sin un !important. */
.row > .vs-ficha-cuerpo {
    margin-top: 0;
}

@media (min-width: 1200px) {
    .vs-ficha-grid {
        display: grid;
        grid-template-columns: 75% 25%;
    }

    /* Bootstrap le pone `width: 75%` a `.col-xl-9`. Dentro de una rejilla eso
       sería el 75% DE SU CELDA, no de la fila: el ancho lo decide la pista. */
    .vs-ficha-grid > .vs-ficha-cabecera,
    .vs-ficha-grid > .vs-ficha-lateral,
    .vs-ficha-grid > .vs-ficha-cuerpo {
        width: auto;
        max-width: none;
    }

    .vs-ficha-grid > .vs-ficha-cabecera { grid-column: 1; grid-row: 1; }
    .vs-ficha-grid > .vs-ficha-lateral  { grid-column: 2; grid-row: 1 / span 2; }
    .vs-ficha-grid > .vs-ficha-cuerpo   { grid-column: 1; grid-row: 2; }
}

.auction-details-top-header {
    display: flex;
    font-size: 15px;
    justify-content: flex-start;
    gap: 25px;
}

.auction-details-top-header-id {
    font-weight: 600;
}

.auction-details-top-header-tags {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    color: var(--soft-gray);
}

.auction-details-top-header-id,
.auction-details-top-header-tags {
    flex: 0 1 auto;
}

.auction-details-top-header-share {
    flex: 1;
    text-align: right;
    position: relative;
}

/* Compartir: botón con el aspecto del texto que había antes (un div mudo) */
.vs-compartir-btn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.vs-compartir-btn:hover {
    text-decoration: underline;
}

/* El desplegable es el .dropdown-menu del sitio; aquí solo su sitio */
.vs-compartir-menu {
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 6px;
    text-align: left;
    z-index: 1030;
}

.vs-compartir-menu .dropdown-item i {
    width: 16px;
    margin-right: 6px;
    text-align: center;
}

.auction-details-header h1 {
    color: var(--blue-vs);
    font-size: 28px;
    font-weight: 700;
}

.auction-details-header-info {
    border: 2px solid var(--border-gray);
    border-radius: 10px;
    color: var(--blue-vs);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 10px 20px;
}

.auction-details-header-info .badge {
    display: block;
    margin-top: 1px;
}

/* Caja mayor puja */
.box-subasta-mayor-puja {
    border: 2px solid var(--blue-vs);
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.box-subasta-mayor-puja p {
    margin: 0 !important;
}

.box-subasta-mayor-puja span {
    color: var(--blue-vs);
    font-size: 24px;
    font-weight: 600;
}

/* Caja calculadora / CTA */
.box-subasta-calculadora {
    color: var(--blue-vs);
}

.box-subasta-calculadora a {
    width: 100%;
    border-radius: 5px;
    padding: 12px;
    font-size: 15px;
}

.box-subasta-calculadora .primary-btn {
    justify-content: center;
    background-color: var(--blue-vs);
}

.box-subasta-cta {
    color: var(--blue-vs);
}

/* El título de esta caja era un `<h5>` por su TAMAÑO, no por su nivel: la
   ficha saltaba del H1 del lote al 5 y anunciaba cuatro secciones que no
   existen. Pasa a `<h2>`, que es lo que de verdad es —la primera sección tras
   el título—, y aquí se le devuelve su aspecto exacto: sin esto, el `h2` de
   Bootstrap lo dejaría en 32px. Medido antes del cambio: 20px, peso 500,
   interlineado 24, 15px de hueco debajo. */
.box-subasta-cta h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 15px;
}

.box-subasta-cta p {
    color: #1d1d1d !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 20px !important;
    margin-bottom: 15px !important;
}

.box-subasta-cta a.btn {
    color: #1d1d1d;
    width: 100%;
    border-radius: 5px;
    padding: 12px;
    font-size: 15px;
}

.box-subasta-cta .primary-btn {
    justify-content: center;
    background-color: var(--primary-color4);
}

/* Caja info */
.box-subasta-info {
    border: 2px solid var(--border-gray);
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 14px;
}

.box-subasta-info table {
    width: 100%;
}

.box-subasta-info table tr td {
    padding: 5px;
}

.box-subasta-info table td:nth-child(odd) {
    color: var(--paragraph-color);
}

.box-subasta-info table td:nth-child(even) {
    color: var(--blue-vs);
    font-weight: 600;
    text-align: right;
}

.box-subasta-info-link {
    display: flex;
    justify-content: end;
}

.box-subasta-info-link a {
    color: var(--blue-vs);
    font-weight: 600;
}

/* Ficha subasta */
.subasta-ficha h3 {
    color: #282d57;
}

.subasta-ficha h4 {
    font-size: 22px;
    color: #282d57;
}

.subasta-ficha-documentos {
    font-weight: 500;
    color: #282d57;
}

.subasta-ficha-documentos i {
    font-size: 20px;
}

.subasta-ficha-documentos a {
    font-weight: 600;
    color: #282d57;
    font-size: 18px;
}

.subasta-ficha-documentos-doc {
    border-bottom: 2px solid #eeeeee;
    padding: 20px 0;
}

.subasta-ficha-datos-exp-linea {
    border-radius: 6px;
    background: #eee;
    padding: 20px;
    color: #282D57;
    margin-bottom: 10px;
}

.subasta-ficha-datos-exp-linea strong {
    font-weight: 700;
    margin-right: 20px;
}

/* Separación entre secciones */
.subasta-ficha section + section {
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
}

/* Tabla activos */
.auction-details-description-table-activos {
    border-collapse: separate;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #eee;
}

.auction-details-description-table-activos th,
.auction-details-description-table-activos td {
    padding: 15px 12px;
    border-bottom: 1px solid #eee;
}

.auction-details-description-table-activos tr:last-child td {
    border-bottom: none;
    padding: 30px 12px;
    font-weight: bold;
}

.coste-total-activos {
    background-color: #EAF0FC;
    padding: 8px 15px;
    border-radius: 6px;
}

.auction-details-description-acc-btn {
    background: #eaf0fc;
    border-bottom: 1px solid #fff;
}

/* =========================================================
   5) MENSAJES SUBASTA
   ========================================================= */

.mensaje_subasta {
    padding: 15px 0;
    text-align: center;
}

.mensaje_subasta h3 {
    font-size: 24px;
    margin: 0;
}

.mensaje_subasta_success {
    background-color: #92D12B;
    color: #494949;
}

.mensaje_subasta_warning {
    background-color: #F8F4E8;
    color: #494949;
}

.mensaje_subasta_danger {
    background-color: #FF6757;
    color: #fff;
}

/* =========================================================
   6) PUJA - CONTENEDORES / INPUTS / TABLAS
   ========================================================= */

.auction-container {
    font-family: var(--font-dmsans);
    font-weight: 700 !important;
    color: var(--blue-vs) !important;
    background-color: white;
    padding: 20px 30px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.auction-form-container {
    display: inline-flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.auction-container-mayor-puja p {
    font-family: var(--font-dmsans);
    font-weight: 300 !important;
    color: var(--blue-vs) !important;
}

.auction-container-mayor-puja p span {
    font-family: var(--font-dmsans);
    font-weight: 700 !important;
    color: var(--blue-vs) !important;
    font-size: 18px;
}

#auction-form {
    display: inline-flex;
    gap: 15px;
}

/* Caja de cantidad con botones */
.entrada-cantidad .input-tipos-entrada-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #b8b8b8;
    border-radius: 35px;
    overflow: hidden;
    height: 38px;
    background-color: white;
    padding: 0 7px;
}

.input-tipos-entrada-btn {
    border: 1px solid #767676;
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 50%;
    color: #767676;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-tipos-entrada-btn:hover {
    background-color: var(--blue-vs-dark);
    color: white;
    border-color: transparent;
}

.input-tipos-entrada-box input {
    width: 110px;
    text-align: center;
    border: none;
    height: 100%;
    padding: 0;
    background-color: transparent;
}

/* Select / input / botón antiguos (si aún se usan en alguna vista) */
.auction-select {
    border-radius: 5px;
    border: none;
    background-color: #f0f2f5;
    padding: 5px 20px;
}

.auction-input {
    padding: 5px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    width: 100px;
    text-align: center;
}

.auction-button {
    padding: 5px 20px;
    background-color: #1f2937;
    color: white;
    border: none;
    border-radius: 5px;
}

/* Tabla pujas */
.box-subasta-pujas {
    border: 2px solid var(--border-gray);
    border-radius: 10px;
    padding: 5px;
}

.auction-tabla-pujas {
    width: 100%;
}

.auction-tabla-pujas tr th {
    font-weight: 400 !important;
    font-size: 14px;
}

.auction-tabla-pujas tr td {
    font-weight: 300 !important;
    font-size: 14px;
}

.auction-tabla-pujas-postor {
    background-color: #f5f5f5;
    border-radius: 50%;
    padding: 3px;
}

.auction-tabla-pujas-postor-success {
    color: white;
    background-color: #92D12B;
    border-radius: 50%;
    padding: 3px;
}

/* Cards / imágenes */
.category-card5 img {
    max-height: 55px;
}

.card-img img {
    width: 100% !important;
}

/* ========================================
   CARD: sin imagen (grid)
   ======================================== */
.auction-card-img-wrap-noimg {
    background: #121636;
    height: 245px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    padding: 20px;
    text-align: center;
    /* Última red: la caja tiene alto fijo, así que un nombre imposible se
       recorta en vez de derramarse sobre la tarjeta. */
    overflow: hidden;
}

/* El nombre se corta por LÍNEAS, no por píxeles: así nunca parte una letra por
   la mitad. Cinco caben en los 205px de alto útil a 24px de letra. */
.auction-card-img-wrap-noimg .vs-noimg-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   El estado de puja en la tarjeta del listado

   Son dos piezas superpuestas DENTRO de la caja de la imagen: la banda de
   arriba («Vas ganando esta subasta») y la franja de abajo (icono + texto +
   iniciales + importe, repartidos con `gap: 20px`).

   Se diseñaron para la rejilla en escritorio, donde entran por los pelos, y no
   aguantan ni la rejilla en tablet ni la vista de lista. Medido:

     rejilla 1280   tarjeta 356 · franja de 50px de alto · entra justa
     rejilla  820   tarjeta 216 · franja de 92px (37% de la tarjeta),
                    icono aplastado a 6px, texto partido en cuatro líneas
     lista   1280   miniatura 130x90 · la franja pide 168 y mide 92 de alto:
                    se sale por la derecha y tapa la foto entera
     lista    820   miniatura 130x111 · lo mismo

   Dos causas: el icono no tiene `flex-shrink: 0`, así que el reparto lo machaca
   hasta 6 y hasta 0 px; y los `gap: 20px` se comen 60 de los 216 que tiene la
   tarjeta en tablet.
   --------------------------------------------------------------------------- */

/* El icono es una imagen: sin esto el reparto la aplasta. Va fuera de toda
   media query porque el fallo aparece en cuanto la fila va justa. */
.auction-card-pujausuario .auction-card-pujausuario-ico {
    flex-shrink: 0;
}

/* ---- Rejilla estrecha ------------------------------------------------------
   La franja se queda sobre la foto, pero deja de repetir lo que la banda dice
   dos centímetros más arriba: solo icono, iniciales e importe. Con eso vuelve
   a una línea. */
@media (max-width: 1199.98px) {
    .auction-card-pujausuario {
        gap: 8px;
    }

    /* La banda, en UNA línea. El tema clava la etiqueta «Ref.» a 40px del borde
       dando por hecho una banda de un renglón; con dos se solapaban 14px. A
       13px y con 10px de aire a los lados, los siete textos entran en una —los
       tres de representado se acortaron para eso, ver textoBanner()—. */
    .auction-card-message {
        font-size: 13px;
        padding: 6px 10px;
    }

    /* El texto, fuera, PERO solo cuando hay cuatro datos: segundo hijo que a la
       vez es el tercero por la cola. En «Aún no has pujado», que solo trae
       icono y texto, no encaja y el texto se queda. */
    .auction-card-pujausuario span:nth-child(2):nth-last-child(3) {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   La foto, del alto de la caja

   La caja del lote SIN foto mide 245 px fijos; la foto es de 600x400, así que
   a 336 px de ancho se quedaba en 224 y la tarjeta con imagen salía más baja
   que la de al lado. Se nota en cuanto se ponen dos en fila.

   `object-fit: cover` recorta lo que sobra en vez de deformar la foto, que es
   lo que haría un alto fijo a secas.

   Solo en rejilla: en vista lista la caja baja a 90x80 y tiene su propio
   reparto. */
.vs-rejilla-tarjetas:not(.fila) .auction-card .auction-card-img-wrap .card-img,
.vs-rejilla-tarjetas:not(.fila) .auction-card .auction-card-img-wrap .card-img img {
    height: 245px;
}

.vs-rejilla-tarjetas:not(.fila) .auction-card .auction-card-img-wrap .card-img img {
    width: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Y la tarjeta, del alto de su columna

   Con la foto ya igualada seguía descuadrando, y no era la imagen: era el
   título. Las columnas de una fila SÍ igualan —el `row` las estira—, pero la
   tarjeta de dentro se quedaba en su alto natural, así que con un título de
   dos líneas al lado de uno de tres los importes de una y otra quedaban a 25 px
   de altura distinta. Medido.

   La tarjeta pasa a llenar su columna y el bloque de datos se empuja al fondo
   con `margin-top: auto`, que es lo que alinea contador e importes entre las
   tarjetas de una misma fila sin recortar ni un carácter del título. */
.vs-rejilla-tarjetas:not(.fila) .auction-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vs-rejilla-tarjetas:not(.fila) .auction-card .auction-card-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.vs-rejilla-tarjetas:not(.fila) .auction-card .vs-card-meta {
    margin-top: auto;
}

/* La letra encogida del lote sin foto en tablet, retirada.

   Aquí vivía una bajada a 17px entre 768 y 991. Tenía su motivo: la rejilla
   saltaba de una columna a TRES de golpe en 768 y la tarjeta se quedaba en
   216px, donde un nombre largo pedía 267px en una caja de 245 y se salía 22
   por debajo.

   Ese salto ya no existe: en esa franja la rejilla va a DOS columnas y la
   tarjeta mide unos 336. Medido con el nombre a sus 24px de diseño: ocupa 162
   de los 245 y no se corta. Así que el apaño sobra y el nombre vuelve a leerse
   igual que en el resto de anchuras. */

.auction-card-img-wrap-noimg:hover {
    background: #1d224d;
}

/* Pantallas táctiles: el corazón de favoritos, siempre visible.

   En escritorio aparece al pasar el ratón por la tarjeta (style.css). En un
   móvil no hay ratón y el primer toque se convierte en ese hover: Safari de
   iOS ve que el toque revela contenido y se queda ahí, sin seguir el enlace.
   Hacía falta un segundo toque para entrar en el lote. Si el corazón ya está a
   la vista, el toque no revela nada y entra a la primera. Además el corazón
   deja de ser invisible en móvil, donde no había manera de verlo antes de
   tocarlo.

   Por lo mismo se apagan el brillo que cruza la foto (un ::after que crece
   desde altura 0, y eso también cuenta como contenido que aparece) y el zoom
   de la imagen: en táctil solo se verían a medias durante el toque. */
@media (hover: none) {
    .auction-card .auction-card-img-wrap .view-and-favorite-area {
        opacity: 1;
    }
    .auction-card:hover .auction-card-img-wrap .view-and-favorite-area {
        animation: none;
    }
    .auction-card .auction-card-img-wrap .card-img::after {
        display: none;
    }
    .auction-card:hover .auction-card-img-wrap .card-img img {
        transform: none;
    }
}

/* ========================================
   VS-CARD-META: bloque timer + depósito (grid view)
   ======================================== */

.vs-card-meta {
    display: flex;
    align-items: flex-start;
    margin-top: 1.5rem;
}

.vs-card-meta-timer {
    flex: 1;
    min-width: 0;
}

.vs-card-meta-deposit {
    flex: 0 0 50%;
    text-align: right;
}

.vs-card-meta-deposit p {
    margin-bottom: 0;
}

/* Pill de estado (oculto en grid) */
.vs-list-estado {
    display: none;
}

/* Botón de vista activo */
.vs-search-actions-btn-link.is-vista-activa {
    opacity: 1 !important;
    color: #121636 !important;
}

/* ========================================
   LISTADO EN MODO LISTA (fila)
   ======================================== */

.fila [data-lote-card] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

.fila .auction-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 0.75rem;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    padding-top: 13px;
    padding-bottom: 25px;
}

.fila .view-and-favorite-area {
    display: none;
}

/* Imagen móvil */
.fila .auction-card-img-wrap {
    flex: 0 0 90px;
    width: 90px;
    min-height: 80px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.fila .auction-card-img-wrap .card-img {
    display: block;
    width: 90px;
    height: 80px;
}

.fila .auction-card-img-wrap .card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fila .auction-card-img-wrap-noimg {
    width: 90px;
    height: 80px;
    border-radius: 8px;
    font-size: 9px;
    padding: 6px;
}

/* Contenido móvil: columna */
.fila .auction-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    min-width: 0;
    gap: 6px;
}

/* El título de la tarjeta pasó de <h6> a <h3> el 2026-08-28 al corregir la
   jerarquía de encabezados, y estas reglas se quedaron apuntando al <h6>. El
   resultado en la vista lista era que el título perdía su `flex: 1` y se
   encogía a su ancho mínimo: 88 px y ocho líneas en tablet. Se dejan los dos
   selectores por si alguna vista todavía emite <h6>. */
.fila .auction-card-content h6,
.fila .auction-card-content h3 {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.fila .vs-card-meta {
    margin-top: 0;
    align-items: center;
}

/* ========================================
   LISTA — DESKTOP (≥768px)
   ======================================== */
@media (min-width: 768px) {
    .fila .auction-card-img-wrap {
        flex: 0 0 130px;
        width: 130px;
        min-height: 90px;
        border-radius: 8px;
    }

    .fila .auction-card-img-wrap .card-img {
        width: 130px;
        height: 90px;
    }

    .fila .auction-card-img-wrap-noimg {
        width: 130px;
        height: 90px;
        border-radius: 8px;
        font-size: 10px;
    }

    /* Badge de estado en imagen oculto (se usa el pill en el content) */
    .fila .auction-card-img-wrap .batch {
        display: none;
    }

    /* Anula margin-top del tema (style.css:7334) solo en lista */
    .fila .auction-card.style-5 .auction-card-content {
        margin-top: 0;
    }

    /* Contenido: fila horizontal con gap uniforme entre todos los bloques */
    .fila .auction-card-content {
        flex-direction: row;
        align-items: center;
        padding: 0;
        gap: 35px;
    }

    /* Título: absorbe el espacio libre, empuja el resto a la derecha */
    .fila .auction-card-content h6,
    .fila .auction-card-content h3 {
        flex: 1;
        min-width: 0;
        font-size: 0.875rem;
        margin: 0;
    }

    /* Pill de estado: hijo directo del content, visible en desktop lista */
    .fila .vs-list-estado {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        padding: 0.3rem 0.9rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        background: rgba(18, 22, 54, 0.08);
        color: #121636;
    }

    /* Bloque meta: timer + deposit en fila */
    .fila .vs-card-meta {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0;
        gap: 35px;
    }

    .fila .vs-card-meta-timer {
        flex: 0 0 auto;
    }

    /* Depósito y Mayor puja: dos columnas paralelas */
    .fila .vs-card-meta-deposit {
        display: flex;
        flex-direction: row;
        gap: 35px;
    }

    /* Cada columna: etiqueta arriba, importe abajo, centrados */
    .fila .vs-card-meta-deposit p {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0;
        font-size: 14px;
        line-height: 18px;
    }

    .fila .vs-card-meta-deposit p span {
        display: block;
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
        color: #121636;
    }
}

/* ---- Vista de lista --------------------------------------------------------
   Aquí no hay arreglo posible dentro de la miniatura: 130px no dan para cuatro
   datos, en ninguna anchura. El estado sale de la foto y pasa a ser una banda
   a lo ancho de toda la fila, con el detalle en el extremo derecho.

   Se promociona la FRANJA y se esconde la banda: la franja ya trae el texto,
   las iniciales y el importe, así que no hace falta inventar marcado nuevo.

   El truco es quitarle a la miniatura su `position: relative`. La franja sigue
   colgando de ella en el HTML, pero al no haber ya un marco de referencia
   dentro, se posiciona contra la tarjeta entera —y, por lo mismo, deja de
   recortarla el `overflow: hidden` de la miniatura. */
.fila .auction-card {
    position: relative;
}

.fila .auction-card-img-wrap {
    position: static;
}

.fila .auction-card-message {
    display: none !important;
}

.fila .auction-card-pujausuario {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    border-radius: 10px 10px 0 0;
    font-size: 14px;
}

/* En lista sí queremos el texto: aquí la banda no está para decirlo. */
.fila .auction-card-pujausuario span:nth-child(2):nth-last-child(3) {
    display: inline;
}

/* El verde de la banda es el fuerte, no el suave de la franja: en lista esto ES
   la banda, y así se dibujó.
   Los dos iconos son archivos de color fijo —el de ganando es marino, el de
   superada color arena—, así que sobre estos fondos se perdían. Se recolorean
   con `filter`, que es lo único que se puede hacer sobre un <img> externo:
   `brightness(0)` lo deja negro y el `invert(1)` lo pasa a blanco. */
.fila .auction-card-pujausuario.bg-green {
    background-color: #92D12B;
    color: #fff;
}

.fila .auction-card-pujausuario.bg-green .auction-card-pujausuario-ico {
    filter: brightness(0) invert(1);
}

.fila .auction-card-pujausuario.bg-red {
    background-color: #F8F4E8;
    color: #282D57;
}

.fila .auction-card-pujausuario.bg-red .auction-card-pujausuario-ico {
    filter: brightness(0);
}

/* Las iniciales y el importe, al extremo derecho. El tercer hijo solo existe
   cuando hay cuatro datos, así que en «Aún no has pujado» no empuja nada. */
.fila .auction-card-pujausuario span:nth-child(3) {
    margin-left: auto;
}

/* La franja, SIEMPRE en una línea.

   Va posicionada en absoluto y la tarjeta le reserva el hueco con un padding
   fijo, así que una franja de dos líneas no empuja nada: se sale y tapa la
   miniatura. El contenedor ya es `nowrap`, pero eso no impide que el texto se
   parta DENTRO de cada hijo, que es lo que la hacía crecer.

   Con la cifra de un lote de siete dígitos no cabía: a 402px pedía unos 381 de
   los 352 que hay —texto 184, iniciales 44, importe 97, más icono y huecos—.

   Aquí se decide quién cede. El importe y las iniciales son EL dato y no se
   encogen ni se parten nunca; cede el texto, que se corta con puntos
   suspensivos. Es la parte redundante: el color de fondo y el icono ya dicen
   si vas ganando o te han superado. Y así aguanta cualquier cifra, no solo la
   de diez millones de hoy. */
.fila .auction-card-pujausuario > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fila .auction-card-pujausuario > span:nth-child(3),
.fila .auction-card-pujausuario > span:nth-child(4) {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Hueco para la banda, solo cuando hay algo que contar: la clase de color la
   pone el renderizador únicamente en las ramas que muestran la franja. */
.fila .auction-card:has(.auction-card-pujausuario.bg-green),
.fila .auction-card:has(.auction-card-pujausuario.bg-red) {
    --vs-lista-arriba: 52px;
}

@media (max-width: 575.98px) {
    .fila .auction-card-pujausuario {
        gap: 8px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .fila .auction-card:has(.auction-card-pujausuario.bg-green),
    .fila .auction-card:has(.auction-card-pujausuario.bg-red) {
        --vs-lista-arriba: 48px;
    }
}

/* ---------------------------------------------------------------------------
   La fila de la lista, como caja

   En el diseño aprobado la fila ES una caja con su banda dentro, no un renglón
   suelto con una franja de color encima. Se implementó sin ese envoltorio y la
   diferencia se nota: la banda flotaba pegada a los bordes de la página y las
   filas solo se separaban por una raya.

   El `overflow: hidden` es lo que hace que la banda —que va posicionada a
   `top/left/right: 0`— quede recortada por las esquinas redondeadas en vez de
   asomar por ellas.
   --------------------------------------------------------------------------- */

.fila .auction-card {
    /* Dónde empieza la miniatura, medido desde el borde de la caja. Tres
       cosas cuelgan de este número —el acolchado, la etiqueta «Ref.» y la
       pastilla de estado— y con la banda de puja arriba cambia. Estaba
       repetido en seis reglas; ahora se declara una vez y las demás lo leen. */
    --vs-lista-arriba: 16px;

    border: 1px solid #e4e7f2;
    border-bottom: 1px solid #e4e7f2;
    border-radius: 10px;
    overflow: hidden;
    padding: var(--vs-lista-arriba) 20px 20px;
    margin-bottom: 16px;
}

/* El hueco de la banda y el de la etiqueta «Ref.» se miden desde el borde de
   la caja, así que suben con el acolchado nuevo. */
/* El tema apunta a `.auction-card .auction-card-img-wrap .subasta-id`, con
   tres clases, así que un selector de dos no le gana: la etiqueta se quedaba
   en el `left: 10px` del tema y salía fuera de la miniatura, que ahora empieza
   donde acaba el acolchado de la caja. */
.fila .auction-card .auction-card-img-wrap .subasta-id {
    top: calc(var(--vs-lista-arriba) + 8px);
    left: 28px;
}

/* ---------------------------------------------------------------------------
   La columna de texto, apilada

   Estaba en fila —título a la izquierda, pastilla de estado empujada al
   extremo derecho—, y en el diseño va apilada: título, estado debajo, y la
   línea de contador e importes al final. En móvil eso además arregla que la
   pastilla apareciera flotando sola encima del título.
   --------------------------------------------------------------------------- */

/* Apilar con `flex: 0 0 100%` estiraba la pastilla a todo el ancho: en una fila
   flexible, el `basis` FIJA el ancho del elemento, no solo dónde corta la
   línea. Se apila cambiando la dirección del contenedor y se deja que cada
   hijo mida lo suyo. */
.fila .auction-card-content {
    align-items: flex-start;
}

/* En lista, el estado va en la columna de texto A CUALQUIER ANCHURA. Debajo
   de 768 se pintaba el badge de la miniatura, y desde que la banda ocupa la
   fila entera ese badge se escapa de la miniatura y queda flotando sobre el
   titulo: colgaba de ella y se quedo sin marco de referencia. */
.fila .vs-list-estado {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.3rem 0.9rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(18, 22, 54, 0.08);
    color: #121636;
}

.fila .auction-card-img-wrap .batch {
    display: none;
}

/* La miniatura crecía con la columna de texto al apilarse —de 111px a 157—
   porque un elemento flex se estira al alto de su fila si no se le dice que
   no. */
.fila .auction-card-img-wrap {
    align-self: flex-start;
}

@media (min-width: 768px) {
    .fila .auction-card-content {
        flex-direction: column;
        gap: 12px;
    }

    /* El titulo lleva `flex: 1` para absorber el hueco cuando la columna iba
       en fila. En columna eso mismo significa crecer A LO ALTO, y dejaba la
       caja en 401px con un vacio enorme bajo el titulo. */
    .fila .auction-card-content h6,
    .fila .auction-card-content h3 {
        flex: 0 0 auto;
    }

    .fila .vs-card-meta {
        width: 100%;
        justify-content: space-between;
        gap: 24px;
    }
}

/* Tabs */
#auction-tabs {
    background: #fff;
    box-shadow: none !important;
    margin-bottom: 50px;
}

.nav-tabs .nav-link {
    position: relative;
    transition: color .2s;
    color: #767676;
}

@media (max-width: 575.98px) {
    #auction-tabs .nav-link {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: transparent !important;
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--blue-vs);
}

.nav-tabs .nav-link.active {
    background: #fff;
    border-color: transparent;
}

/* Countdown */
.auction-container .coundown-area-2 .countdown-timer-2 {
    display: flex;
    justify-content: center;
    border-left: 1px solid #d1d5db;
    margin-left: 20px;
    padding-left: 20px;
}

.auction-container .coundown-area-2 .countdown-timer-2 ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0px;
}

.auction-container .coundown-area-2 .countdown-timer-2 ul li {
    color: #767676;
    font-family: var(--font-dmsans);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 5px;
}

@media (max-width: 576px) {
    .auction-container .coundown-area-2 .countdown-timer-2 ul li {
        font-size: 20px;
        font-weight: 800;
        padding: 0;
        border: unset;
    }
}

.auction-container .coundown-area-2 .countdown-timer-2 ul li svg {
    fill: #808080;
}

/* El separador del contador lo emite includes/maqueta/countdown-subasta.inc
   con fill="currentColor", para heredar el color de su fila en las dos
   pieles. En la del lateral no basta: el tema ya trae una regla propia
   (.coundown-area .countdown-timer ul li svg) que lo deja al 15% de
   opacidad —pensada para su diseño, no para el nuestro— y ahí los puntos
   quedaban casi invisibles. Se le gana en especificidad con .clone. */
.auction-details-section .auction-details-content .coundown-area .countdown-timer ul li.clone svg {
    fill: currentColor;
}

.auction-container .coundown-area-2 .countdown-timer-2 ul li span {
    color: rgba(var(--title-color-opc), 0.7);
    font-family: var(--font-dmsans);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
}

@media (max-width: 576px) {
    .auction-container .coundown-area-2 .countdown-timer-2 ul li span {
        font-size: 13px;
    }
}

.auction-container .coundown-area-2 .countdown-timer-2 ul li span:first-child {
    display: none;
    visibility: hidden;
}

.auction-container .coundown-area-2 .countdown-timer-2 ul li.clone {
    padding: 0;
    border: unset;
}

.auction-container .coundown-area-2 > span {
    color: var(--paragraph-color);
    font-family: var(--font-dmsans);
    font-size: 18px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 0.02em;
    display: block;
    padding-top: 20px;
}

@media (max-width: 576px) {
    .auction-container .coundown-area-2 > span {
        font-size: 17px;
    }
}

.auction-container .coundown-area-2 > span strong {
    color: var(--title-color);
    font-weight: 500;
}

/* Panel emails */
.auction-email-container {
    border-left: 1px solid #d1d5db;
    margin-left: 20px;
    padding-left: 20px;
}

.form-switch.form-switch-lg .form-check-input {
    width: 2.5rem;
    height: 1.5rem;
}

.form-switch.form-switch-lg .form-check-input:checked {
    background-position: right center;
}

.auction-email-container .form-check-input:checked {
    background-color: #92d12b;
    border-color: #92d12b;
}

/* ---------------------------------------------------------------------------
   Enlaces de texto dentro de la ficha

   Salían con el azul por defecto de Bootstrap (#0d6efd) y SIN subrayado: ni
   pegaban con la marca ni se distinguían del texto salvo por el color. Son los
   de la caja «¿Quieres participar en esta subasta?», los PDF de documentos y
   cualquiera que venga dentro del texto que escribe el gestor (descripción,
   condiciones, gastos).

   Van en el azul marino de la marca y CON subrayado: sin él, un enlace del
   color del texto deja de parecer un enlace. Se excluyen botones y pestañas,
   que ya tienen su propio aspecto.
   --------------------------------------------------------------------------- */

.box-subasta-cta a:not(.btn),
.subasta-ficha a:not(.btn):not(.nav-link) {
    color: var(--blue-vs);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.box-subasta-cta a:not(.btn):hover,
.box-subasta-cta a:not(.btn):focus-visible,
.subasta-ficha a:not(.btn):not(.nav-link):hover,
.subasta-ficha a:not(.btn):not(.nav-link):focus-visible {
    color: var(--blue-vs-dark);
    text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
   Los avisos de participación de la ficha (`.vs-aviso`)

   Son siete y comparten forma: círculo de 40px + título y texto + botón(es).
   Todos se montan con `d-flex justify-content-between`, pensado para escritorio.

   Tres fallos, medidos con sesión cerrada:

   - El círculo del icono lleva `width: 40px` en línea, pero al ser un elemento
     flex sin `flex-shrink: 0` el reparto lo aplastaba a **16×40**: un óvalo.
     Pasa en CUALQUIER anchura donde la fila vaya justa, así que esa regla no va
     dentro de ninguna media query.
   - A 820px los dos botones no caben en fila —piden 375px y solo quedan 664
     con el texto delante—, así que envolvían por su cuenta: uno de 130px y otro
     de 237px, desalineados por el `ms-2` del segundo. Apilados e iguales.
   - A 402px, además, el aviso entero se apila y los botones van a lo ancho.
   --------------------------------------------------------------------------- */

.vs-aviso .rounded-circle {
    flex-shrink: 0;
}

/* El mismo círculo sin el `style` en línea (aviso de email del área privada). */
.vs-aviso-icono {
    width: 40px;
    height: 40px;
}

@media (max-width: 1199.98px) {
    /* `justify-content: space-between` no reserva hueco: cuando el texto llena
       su ancho, acaba pegado a los botones. Medido a 820px, el texto terminaba
       en 479 y los botones empezaban en 479. */
    .vs-aviso { gap: 24px; }

    /* El bloque de icono y texto cede ancho; el de los botones no. */
    .vs-aviso > .d-flex { min-width: 0; }
    .vs-aviso > div:not(.d-flex) {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex-shrink: 0;
    }
    .vs-aviso > div:not(.d-flex) > .btn {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-left: 0 !important;   /* el segundo botón lleva `ms-2` */
    }
}

@media (max-width: 767.98px) {
    /* `align-items-center` es una utilidad de Bootstrap y lleva !important. */
    .vs-aviso {
        flex-direction: column;
        align-items: stretch !important;
        gap: 14px;
    }

    /* El icono deja de centrarse con el bloque entero y se alinea con el
       título, que es lo que acompaña. */
    .vs-aviso > .d-flex {
        align-items: flex-start !important;
    }

    .vs-aviso > div:not(.d-flex) > .btn,
    .vs-aviso > .btn {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-left: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
   El panel de puja en tablet y en móvil

   `.auction-container` era una fila flex SIN `flex-wrap` y sin una sola media
   query. Con `overflow-x: clip` en el <body>, lo que sobraba no desbordaba: se
   cortaba en silencio. El panel pide 1.049px, así que se salía 117px a 1024,
   364px a 768 y 701px a 375, y en móvil el botón «Pujar» quedaba fuera de
   pantalla: no se podía pujar desde el teléfono.

   OJO CON QUIÉN REPARTE. `.auction-container` tiene UN SOLO hijo. Los cuatro
   bloques del panel —acción, mayor puja, contador y avisos— cuelgan de
   `.auction-form-container`, que es el flex que de verdad los coloca. La
   indentación del PHP sugiere otra cosa, y por creérsela se escribió una
   primera versión de estas reglas apuntando a `.auction-container > ...` que no
   seleccionaba nada. Si tocas esto, cuenta las etiquetas, no los espacios.

   El corte cae en 1200px, el mismo del esqueleto, y no por gusto: a 1200 la
   caja mide 1.112px y el panel entra justo.

     >=1200  una fila, exactamente como estaba. No se toca.
      <1200  dos filas: arriba la información, abajo la acción.
       <768  apilado: contador, mayor puja, formulario, avisos.
   --------------------------------------------------------------------------- */

/* La etiqueta «Realizar puja» y el formulario, juntos. En escritorio es lo que
   ya había —dos elementos con 15px de hueco—; existe para que por debajo de
   1200px puedan bajar a la segunda fila A LA VEZ. */
.auction-form-accion {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Sale solo por debajo de 1200. Arriba el contador va en fila junto a la mayor
   puja y la etiqueta sobra; abajo sube al principio del panel y sin ella se
   queda sin contexto. */
.auction-cd-label {
    display: none;
}

@media (max-width: 1199.98px) {
    .auction-cd-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(40, 45, 87, .6);
        margin-bottom: 8px;
    }

    .auction-container { padding: 20px; }

    .auction-form-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        row-gap: 18px;
        justify-content: flex-start;
    }

    /* La raya separadora sube de `.countdown-timer-2` al bloque entero. Si se
       queda abajo, el rótulo «Termina en» arranca 40px a la izquierda de sus
       propios dígitos —el margen y el acolchado de la raya— y se ve descolgado. */
    .auction-container .coundown-area-2 {
        border-left: 1px solid #d1d5db;
        margin-left: 20px;
        padding-left: 20px;
    }
    .auction-container .coundown-area-2 .countdown-timer-2 {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }

    /* El conmutador de avisos es un ajuste, no un dato: se va al extremo
       derecho en vez de dejar medio renglón vacío detrás de él. */
    .auction-form-container > .auction-email-container { margin-left: auto; }

    /* Fila 1: lo que hay que saber. Fila 2: lo que hay que hacer. */
    .auction-form-container > .auction-container-mayor-puja { order: 1; margin-left: 0 !important; }
    .auction-form-container > .coundown-area-2              { order: 1; }
    .auction-form-container > .auction-email-container      { order: 1; }
    .auction-form-container > .auction-form-accion {
        order: 2;
        flex: 1 1 100%;
        border-top: 1px solid #d1d5db;
        padding-top: 18px;
    }

    /* La fila de la acción tiene que poder ROMPER, no solo estirarse.
       A 820px entraba con cero holgura —el botón acababa justo en el borde— y
       cualquier píxel de más la sacaba fuera de la tarjeta. Un elemento flex
       trae `min-width: auto`, así que en vez de encogerse se desborda: por eso
       van los `min-width: 0`, y por eso los dos contenedores envuelven. Si algún
       día no cabe, baja de línea; no se sale. */
    .auction-form-container,
    .auction-form-container > .auction-form-accion { min-width: 0; }
    .auction-form-accion { flex-wrap: wrap; row-gap: 10px; }

    /* La etiqueta deja de ir EN la fila y pasa a ir SOBRE ella, como «Termina
       en» sobre el contador. Se comía 124px de una fila que va justa, y ahí
       tampoco orientaba a nadie: el botón «Pujar» está al lado. */
    .auction-form-accion > .auction-form-label {
        flex: 0 0 100%;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(40, 45, 87, .6);
    }

    /* El div sin clase que envuelve al <form>: es quien debe estirarse. */
    .auction-form-accion > div:not(.auction-form-label) { flex: 1 1 260px; min-width: 0; }
    #auction-form {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 10px;
        min-width: 0;
    }
    #auction-form .auction-select { flex: 1 1 180px; min-width: 0; }
    .auction-container .entrada-cantidad,
    .auction-container .auction-button { flex-shrink: 0; }
    /* 110px de ancho fijo para cuatro dígitos y dos decimales es generoso en
       una fila que va justa. */
    .auction-container .input-tipos-entrada-box input { width: 90px; }

    /* 16px o iOS hace zoom al enfocar, y no lo deshace al salir. */
    .auction-container .auction-select,
    .auction-container .input-tipos-entrada-box input { font-size: 16px; }

    .auction-container .auction-select,
    .auction-container .input-tipos-entrada-box,
    .auction-container .auction-button { height: 44px; }
    .auction-container .input-tipos-entrada-btn {
        width: 32px; height: 32px; font-size: 18px; flex-shrink: 0;
    }
}

@media (max-width: 767.98px) {
    .auction-container { padding: 20px 16px; }

    .auction-form-container {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        row-gap: 0;
    }

    /* El orden en que hace falta: cuánto queda, cuánto va, y pujar. */
    .auction-form-container > .coundown-area-2              { order: 1; }
    .auction-form-container > .auction-container-mayor-puja { order: 2; }
    .auction-form-container > .auction-form-accion          { order: 3; }
    .auction-form-container > .auction-email-container      { order: 4; }

    /* En columna, el `flex: 1 1 100%` de la fila de arriba sería el 100% DEL
       ALTO. Se devuelve al tamaño de su contenido. */
    .auction-form-container > .auction-form-accion { flex: 0 0 auto; }

    .auction-form-container > .auction-container-mayor-puja,
    .auction-form-container > .auction-form-accion,
    .auction-form-container > .auction-email-container {
        border-top: 1px solid #d1d5db;
        margin-top: 18px;
        padding-top: 18px;
    }

    /* En columna, todo lo que la fila de arriba dejó preparado para envolver
       juega en contra: un `flex-basis` de 180 ó 260px pasa a ser ALTO, y el
       selector se convertía en un bloque de 180px de alto. Se devuelve todo al
       tamaño de su contenido. */
    .auction-form-accion,
    #auction-form { flex-wrap: nowrap; }
    .auction-form-accion > div:not(.auction-form-label),
    #auction-form .auction-select { flex: 0 0 auto; }

    .auction-cd-label { text-align: center; margin-bottom: 10px; }
    .auction-container .coundown-area-2 {
        border-left: none; margin-left: 0; padding-left: 0;
    }
    .auction-container .coundown-area-2 .countdown-timer-2 {
        border-left: none; margin-left: 0; padding-left: 0; justify-content: center;
    }
    .auction-container .coundown-area-2 .countdown-timer-2 ul { gap: 4px; }

    /* «Mayor puja:» y su importe pasan de dos líneas a una, etiqueta a la
       izquierda e importe a la derecha. El <br> del marcado estorba aquí. */
    .auction-container-mayor-puja p {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 12px; margin: 0;
    }
    .auction-container-mayor-puja br { display: none; }
    .auction-container-mayor-puja p span { font-size: 24px; }

    .auction-form-label { display: none; }
    .auction-form-accion { flex-direction: column; align-items: stretch; gap: 10px; }
    #auction-form { flex-direction: column; align-items: stretch; gap: 10px; }

    .auction-container .auction-select { width: 100%; height: 48px; }
    .auction-container .entrada-cantidad .input-tipos-entrada-box {
        width: 100%; height: 56px; justify-content: space-between; padding: 0 6px;
    }
    /* 44px: es el control que decide cuánto dinero ofreces, mal sitio para
       apretar. Y flex-shrink o el reparto los deja ovalados. */
    .auction-container .input-tipos-entrada-btn {
        width: 44px; height: 44px; font-size: 20px; flex-shrink: 0;
    }
    .auction-container .input-tipos-entrada-box input {
        flex: 1 1 auto; width: auto; font-size: 18px;
    }
    .auction-container .auction-button { width: 100%; height: 52px; font-size: 17px; }

    .auction-container .auction-email-container {
        border-left: none; margin-left: 0; padding-left: 0;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .auction-container .auction-email-container .form-check {
        padding-left: 0; margin: 0; min-height: 0;
    }
    .auction-container .auction-email-container .form-check-input { margin: 0; float: none; }

    /* La barra de «Mis pujas» se apila también: sus dos botones quedaban a
       130px con el texto partido en tres líneas. Los !important son para
       ganarle a las utilidades de Bootstrap que ya lleva el marcado. */
    .auction-mis-pujas {
        flex-direction: column; align-items: stretch !important; gap: 12px; padding: 20px 16px;
    }
    .auction-mis-pujas > .flex-grow-1 { margin-right: 0 !important; }
    .auction-mis-pujas > div:last-child {
        flex-direction: column; align-items: stretch !important; gap: 10px !important;
    }
    .auction-mis-pujas > div:last-child > .d-flex { width: 100%; }
    .auction-mis-pujas .btn-limite-puja { flex: 1 1 auto; }
    .auction-mis-pujas .btn-limite-puja,
    .auction-mis-pujas .btn-primary { min-height: 48px; }
}


/* Mis pujas */
.auction-mis-pujas {
    display: flex;
    justify-content: space-between;
    background-color: #eaf0fc;
    border-radius: 10px;
    padding: 20px 30px;
}

.auction-mis-pujas-btn-pujas {
    background: none;
    border: none;
    color: #282d57;
    font-weight: 600;
}

.auction-mis-pujas table {
    color: #282d57;
}

.auction-mis-pujas table th {
    padding: 15px 0;
}

.auction-mis-pujas-btn-pujas svg {
    transition: transform .25s ease;
}

.auction-mis-pujas-btn-pujas[aria-expanded="false"] svg {
    transform: rotate(0deg);
}

.auction-mis-pujas-btn-pujas[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Paginación

   No tenía ni una regla propia: era la de Bootstrap tal cual, con su azul
   #0d6efd, sus esquinas rectas y sus bordes solapados. Y con once elementos
   —«Primera», «Anterior», siete números, «Siguiente» y «Última»— pedía 483px
   en una caja de 378: se salía 105px, y al ir centrada se cortaba por los DOS
   lados a la vez.

   Tres cosas, por ese orden de importancia:

   1. Que quepa. Por debajo de 576px las cuatro palabras se esconden y quedan
      solo sus flechas, que es lo que de verdad se pulsa. Y la fila envuelve:
      si aun así no cabe, baja de línea en vez de salirse.
   2. Que se pueda pulsar. 40px de alto en móvil, que es el mínimo para un dedo.
   3. Que sea de la casa: marino en vez del azul del navegador, y las esquinas
      redondeadas como el resto de la web.
   --------------------------------------------------------------------------- */

/* Centrada por márgenes y no con `justify-content-center`, que es una utilidad
   de Bootstrap y por tanto lleva `!important`: ganaba siempre, y centrar un
   contenedor que desborda recorta por los DOS lados dejando la izquierda
   inalcanzable. Con `max-content` topado al 100% se tienen las dos cosas: si
   cabe, la fila se encoge a su contenido y los márgenes automáticos la centran;
   si no cabe, se topa al ancho disponible y empieza por el principio. La clase
   se quitó del marcado en renderPagination(). */
.pagination {
    flex-wrap: wrap;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    color: var(--blue-vs);
    border: 1px solid #ccd5e8;
    border-radius: 6px;
    margin: 0;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
}

.pagination .page-link:hover,
.pagination .page-link:focus-visible {
    color: var(--blue-vs-dark);
    background-color: #eaf0fc;
    border-color: var(--blue-vs-dark);
}

.pagination .page-item.active .page-link {
    background-color: var(--blue-vs-dark);
    border-color: var(--blue-vs-dark);
    color: #fff;
}

/* Los extremos cuando ya estás en la primera o la última página: siguen ahí
   para que la fila no baile de ancho al navegar, pero apagados. */
.pagination .page-item.disabled .page-link {
    color: #9aa0b5;
    background-color: transparent;
    border-color: #e4e7f2;
}

/* ---------------------------------------------------------------------------
   La tira de números: el único trozo que se desplaza

   Hubo un intento anterior con `position: sticky` en las cuatro flechas,
   dejando que la fila ENTERA se desplazara por debajo de ellas. Se descartó
   con el dedo en la pantalla: al arrastrar, el navegador recoloca los
   elementos clavados DESPUÉS de mover el contenido, y por un instante se ven
   moverse. La sensación era que se movía todo.

   Y arrastraba tres apaños que ahora sobran: una cola para que el último
   número pudiera salir de debajo de la flecha —un elemento clavado ocupa su
   sitio en la fila, así que tapa sin añadir recorrido—, máscaras blancas para
   cubrir lo que asomaba por los huecos de 6px, y anclajes descontando los
   92px de las flechas.

   Ahora las flechas no están quietas de mentira: están fuera de lo que se
   mueve. El `min-width: 0` es imprescindible: sin él un elemento flexible no
   baja de su contenido y desborda en vez de encogerse.
   --------------------------------------------------------------------------- */

.vs-pag-tira {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* Que no pueda pararse con un número medio cortado por el borde. */
    scroll-snap-type: x mandatory;
}

.vs-pag-tira::-webkit-scrollbar {
    display: none;
}

.vs-pag-nums {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-pag-nums .page-item {
    scroll-snap-align: start;
}

/* Los puntos entre la primera/última y la ventana. No son una página, así que
   no llevan `page-item`: ni pastilla, ni anclaje, ni lectura en voz alta. */
.vs-pag-elipsis {
    display: flex;
    align-items: center;
    padding-inline: 2px;
    color: #9aa0b5;
    user-select: none;
}

/* De la ventana de siete, solo la actual y un vecino a cada lado hasta 768.
   Medido con 238 páginas: la ventana entera pide 628px de fila, así que por
   debajo de unos 700 no cabe y la tira se pone a desplazarse —a 576 el margen
   era exactamente 0—. Los vecinos son lo primero que sobra: para moverse de
   una en una están las flechas.

   Si el navegador no entiende `:has()` la regla entera se cae y queda la tira
   desplazable de siempre, que es un buen sitio donde aterrizar. */
@media (max-width: 767.98px) {
    .vs-pag-nums .page-item:not(:first-child):not(:last-child):not(.active):not(:has(+ .active)):not(.active + .page-item) {
        display: none;
    }
}

/* ---- Móvil: que se vea de dónde a dónde va la lista -----------------------

   El servidor pinta «1 … 11 12 13 14 15 16 17 … 238». En un móvil de 402px la
   tira mide 197 y eso son unos 600: se ve un trozo del medio —«14 15 16 17»—
   y hay que arrastrar para descubrir que hay 238 páginas. Justo lo que
   queríamos quitar.

   El recorte de vecinos está en el bloque de arriba. Aquí se va además
   «Primera» y «Última»: dejaron de hacer falta en el momento en que el 1 y
   el 238 son dos pastillas que se pulsan —hacen lo mismo—, y eso libera
   92px para lo que sí informa.

   Queda «1 … 13 14 15 … 238», que dice el total y dónde estás sin
   arrastrar. Medido: 37px de margen en un 402. */
@media (max-width: 575.98px) {
    .pagination > .page-item:nth-child(1),
    .pagination > .page-item:nth-last-child(1) {
        display: none;
    }

    /* Y un poco de aire. Con los recortes de arriba «1 … 13 14 15 … 238» cabía
       en un 402 con CERO píxeles de sobra, que es como no caber: a la primera
       página de cuatro cifras o en un móvil de 360 se desborda. Bajando el
       acolchado de 10 a 8 y el hueco de 6 a 4 quedan unos 40 de margen, sin
       tocar los 40px de alto, que es lo que se pulsa con el dedo. */
    .pagination,
    .vs-pag-nums {
        gap: 4px;
    }

    .vs-pag-nums .page-link {
        padding-inline: 8px;
    }
}

/* Y en los móviles estrechos, sin vecinos: solo la primera, la actual y la
   última. Medido con 238 páginas: «1 … 13 14 15 … 238» cabe justo en un 402
   pero a 360 se sale 5px, y 360 es el ancho de medio catálogo Android. Los
   vecinos son lo primero que sobra —para ir de una en una están las flechas—,
   y quitarlos deja unos 70px de margen en vez de cinco de déficit.

   Ojo con la medida: `scrollWidth` nunca baja de `clientWidth`, así que
   restarlos NO dice cuánto sobra, solo cuánto falta. Para saber si hay holgura
   hay que sumar los hijos. */
@media (max-width: 399.98px) {
    .vs-pag-nums .page-item:not(:first-child):not(:last-child):not(.active) {
        display: none;
    }
}

/* El corte está en 992 y no en 576 porque es donde de verdad dejan de caber:
   medido, con las palabras la fila pide unos 707px y a 820 solo hay 696, así
   que partía en dos. Desde 992 hay 936 y entra sobrada. */
@media (max-width: 991.98px) {
    /* Solo las flechas. «Primera» y «Anterior» miden 87px cada una: con once
       elementos no hay pantalla estrecha que los aguante. */
    .pagination .vs-pag-txt {
        display: none;
    }

    .pagination .page-link {
        min-height: 40px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Las flechas: ancho fijo, y son las únicas hijas directas de la lista
       —la tercera es la tira de números—, de ahí el `>`: sin él, `nth-child(1)`
       cazaría también al primer número de dentro de la tira. */
    .pagination > .page-item:nth-child(1) .page-link,
    .pagination > .page-item:nth-child(2) .page-link,
    .pagination > .page-item:nth-last-child(2) .page-link,
    .pagination > .page-item:nth-last-child(1) .page-link {
        width: 40px;
        min-width: 40px;
        padding-inline: 0;
    }

    .pagination {
        flex-wrap: nowrap;
    }
}

/* =========================================================
   7) BUSCADOR / LISTADOS
   ========================================================= */

.vs-search-wrap {
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #fff;
    padding: 18px 0;
}

.vs-searchbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "main actions"
        "advanced advanced";
    column-gap: 18px;
    row-gap: 8px;
    align-items: start;
}

.vs-search-main {
    grid-area: main;
    display: grid;
    /* El suelo del campo de texto era 320px. Sumado a los dos selectores, los
       huecos y la columna de acciones, la barra pedía 1051px: entre los 992
       donde colapsa a una columna y unos 1060, no cabía. Y como `body` lleva
       `overflow-x: clip`, no salía barra de desplazamiento —salía "Borrar
       filtros" cortado por la mitad, que es peor porque no se nota.

       Con 220 el campo cede lo justo en esa franja y por encima de 1060 se
       expande igual que antes: a 1400px sigue midiendo 602px. Los selectores
       no se tocan. */
    grid-template-columns: minmax(220px, 1fr) 220px 220px;
    gap: 14px;
    align-items: center;
    min-height: 44px;
}

.vs-search-main .form-control,
.vs-search-main .form-select,
.vs-search-actions .btn {
    height: 44px;
}

.vs-search-main .form-control,
.vs-search-advanced .form-control {
    border-radius: 25px !important;
}

.vs-search-main .form-select,
.vs-search-advanced .form-select {
    background-color: #eee;
    border: none;
}

.vs-search-main .form-control,
.vs-search-main .form-select,
.vs-search-advanced .form-control,
.vs-search-advanced .form-select {
    font-size: 14px !important;
}

.vs-input-icon {
    position: relative;
}

.vs-input-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(0,0,0,.45);
    font-size: 16px;
}

.vs-search-main-input {
    padding-left: 42px;
}

.vs-search-main .input-group-text {
    height: 44px;
}

.vs-search-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    white-space: nowrap;
    align-self: start;
}

.vs-search-actions-btn-link,
.vs-search-actions-btn-link-icon {
    font-size: 12px;
    font-weight: 300;
    padding: 0;
    height: auto;
    line-height: 1.1;
    color: #494949;
    cursor: pointer;
}

.vs-search-actions-btn-link:hover {
    color: #111;
}

.vs-search-actions .btn-link:hover {
    color: #0d1b3d;
}

.vs-btn-plus {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    padding: 0;
}

.vs-btn-plus span {
    font-weight: 700;
    line-height: 1;
}

/* Advanced (details) */
.vs-adv-details {
    grid-area: advanced;
}

.vs-adv-details summary::-webkit-details-marker {
    display: none;
}

.vs-adv-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin-top: 2px;
    color: #0d6efd;
}

.vs-adv-icon {
    transition: transform .2s ease;
}

.vs-adv-details[open] .vs-adv-icon {
    transform: rotate(180deg);
}

.vs-adv-details .vs-search-advanced {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
    padding-top: 0;
}

.vs-adv-details[open] .vs-search-advanced {
    max-height: 260px;
    padding-top: 10px;
}

.vs-search-advanced {
    display: grid;
    grid-template-columns: 1fr 1fr 220px;
    gap: 18px;
}

.vs-advanced-label {
    font-size: 12px;
    color: rgba(0,0,0,.6);
    margin-bottom: 6px;
}

.vs-advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.vs-search-advanced .form-control {
    height: 44px;
}

/* Página de un convenio: un selector más (grupo o marca, dentro de la familia).
   Los tres selectores ceden 30px cada uno para que la barra siga cabiendo en la
   misma franja que la de /subastas. */
.vs-search-main.vs-search-main--cuatro {
    grid-template-columns: minmax(200px, 1fr) 190px 190px 190px;
}

@media (max-width: 992px) {
    .vs-search-main.vs-search-main--cuatro {
        grid-template-columns: 1fr;
    }

    .vs-searchbar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "advanced"
            "actions";
        row-gap: 12px;
    }

    .vs-search-main {
        grid-template-columns: 1fr;
    }

    .vs-search-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        align-self: auto;
    }

    .vs-search-advanced {
        grid-template-columns: 1fr;
    }
}

/* Cards búsqueda */
.vs-busqueda-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 18px 18px 0 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    height: 100%;
}

.vs-busqueda-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.vs-busqueda-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #1e2440;
}

.vs-busqueda-count {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
}

.vs-busqueda-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 16px;
}

.vs-tag {
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    color: rgba(0,0,0,.70);
    background: #fff;
}

.vs-busqueda-footer {
    border-top: 1px solid rgba(0,0,0,.06);
    margin: 0 -18px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.vs-busqueda-actions {
    display: flex;
    gap: 10px;
}

.vs-busqueda-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
}

.vs-busqueda-switch-text {
    line-height: 1.05;
}

@media (max-width: 576px) {
    .vs-busqueda-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .vs-busqueda-actions {
        justify-content: flex-start;
    }

    .vs-busqueda-switch {
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }
}

/* =========================================================
   8) MODAL REGISTRO SUBASTA (Paso 1/2 + opciones + copiar)
   ========================================================= */

/* Condiciones de la subasta, desplegadas bajo la casilla de aceptación */
.reg-condiciones-subasta {
    max-height: 260px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    font-size: 0.875rem;
}

.reg-condiciones-subasta > :last-child {
    margin-bottom: 0;
}

/* Paso 1 / Paso 2 */
.reg-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reg-step-badge {
    font-weight: 700;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    white-space: nowrap;
}

.reg-step-title {
    font-size: 1.05rem;
}

.reg-step-observacion {
  font-size: 0.90rem;
}

/* Opciones (única definición; eliminada duplicada) */
.reg-opciones {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .reg-opciones {
        grid-template-columns: repeat(3, 1fr);
    }
}

.reg-opcion-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reg-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.reg-opcion:hover {
    border-color: #cbd5e1;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
}

.reg-opcion-dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    display: inline-block;
    flex: 0 0 auto;
    position: relative;
}

.reg-opcion-text {
    font-weight: 600;
    color: #1f2937;
    line-height: 1.2;
}

.reg-opcion-input:checked + .reg-opcion {
    border-color: #eaf0fc;
    background: #eaf0fc;
}

.reg-opcion-input:checked + .reg-opcion .reg-opcion-dot {
    border-color: var(--blue-vs-dark);
}

.reg-opcion-input:checked + .reg-opcion .reg-opcion-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--blue-vs-dark);
    border-radius: 999px;
    position: absolute;
    inset: 0;
    margin: auto;
}

.reg-opcion-input:focus-visible + .reg-opcion {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

/* Copy inputs: NUEVO estándar + compatibilidad con clases antiguas */
.reg-copy-input,
.reg-cuenta-input {
    border-radius: 0 !important;
}

.reg-copy-btn,
.reg-cuenta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    padding: 0;
    border-color: #dee2e6 !important;
}

/* Estado copiado (verde 1s) para ambos sistemas */
.reg-copy-group.is-copied .reg-copy-input,
.reg-copy-group.is-copied .reg-copy-btn,
.reg-cuenta-group.is-copied .reg-cuenta-input,
.reg-cuenta-group.is-copied .reg-cuenta-btn {
    background: #198754;
    border-color: #198754 !important;
    color: #fff;
}

.reg-copy-group.is-copied .reg-copy-input::selection,
.reg-cuenta-group.is-copied .reg-cuenta-input::selection {
    background: rgba(255, 255, 255, 0.25);
}

#reg-step-deposito label {
    font-size: 0.8rem !important;
}

/* =========================================================
   9) TOP / FAVORITAS
   ========================================================= */

.subastas-top {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
}

/* Favoritas (corazón) */
a.anadir-favorita {
    color: #121636;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, color .12s ease;
}

a.anadir-favorita.is-fav {
    color: #e03131;
    transform: scale(1.06);
}

/* Asegura que icono herede el color */
a.anadir-favorita .fa-heart,
a.anadir-favorita svg.fa-heart {
    color: inherit;
    fill: currentColor;
}

/* =========================================================
   10) DASHBOARD: FORM PUJA (Figma)
   ========================================================= */

.auction-card.is-dashboard {
    overflow: hidden;
    border: 1px solid #eee;
    padding: 10px;
}

.auction-card.is-dashboard .auction-card-formwrap {
    padding: 20px 0 0;
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-postor.form-select {
    background: #EEEEEE;
    border: 1px solid #EEEEEE;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 500;
    box-shadow: none;
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-pill {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    border: 1px solid #D9D9D9;
    border-radius: 999px;
    background: #FFFFFF;
    padding: 6px;
    min-width: 0;
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid #D9D9D9;
    background: #FFFFFF;
    line-height: 1;
    font-size: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-btn:active {
    transform: translateY(1px);
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    padding: 0 6px;
    min-width: 0;
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-submit {
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    background: #1E2559;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .auction-card.is-dashboard .auction-card-formwrap .vs-bid-row {
        grid-template-columns: 1fr;
    }

    .auction-card.is-dashboard .auction-card-formwrap .vs-bid-submit {
        width: 100%;
    }
}

/* ---- Tablet: dos columnas, y el importe sobre el botón ---------------------

   El envoltorio de la tarjeta es `col-12 col-md-4`, o sea TRES columnas desde
   768px, que ahí dejan la tarjeta en unos 216. Dentro tiene que caber el
   selector de postor, la pastilla del importe y el botón de pujar: no hay
   forma. El nombre del representado se corta a media palabra y al importe le
   queda un hueco de tres dígitos, con lo que una cifra real no se lee.

   Dos columnas dan unos 324, y el importe pasa a su propia línea sobre el
   botón —igual que en la tarjeta ancha—. La regla de apilado que hay arriba
   solo llega a 420px, así que en tablet no se aplicaba nunca.

   En móvil no se toca nada: por debajo de 420 ya se apilaba, y entre 421 y 767
   la tarjeta va a ancho completo y le sobra sitio.

   Vale para las SIETE rejillas de tarjetas: el listado público, «Próximas
   subastas», el panel, favoritas, «mis finalizadas» y ganadas, y —desde la
   revisión del 2026-09-02— la página pública de subastas finalizadas, que
   se había quedado fuera porque es un módulo aparte y su contenedor era un
   `row` pelado. Todas comparten envoltorio y todas tenían el mismo apretón,
   así que comparten también el arreglo.

   El `:not(.fila)` es imprescindible: en vista lista el mismo contenedor
   lleva esa clase y las tarjetas van a ancho completo. Sin él, este 50%
   ganaría por orden a la regla que las estira y partiría la lista en dos
   columnas.

   Las reglas del formulario de puja no necesitan contenedor: `is-dashboard`
   solo lo pone el renderizador donde se pinta el formulario. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .vs-rejilla-tarjetas:not(.fila) > [data-lote-card] {
        width: 50%;
    }

    .auction-card.is-dashboard .auction-card-formwrap .vs-bid-row {
        grid-template-columns: 1fr;
    }

    .auction-card.is-dashboard .auction-card-formwrap .vs-bid-submit {
        width: 100%;
    }
}

/* Flecha custom select */
.auction-card.is-dashboard .auction-card-formwrap .mb-2 {
    position: relative;
}

.auction-card.is-dashboard .auction-card-formwrap .mb-2::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-right: 2px solid rgba(0, 0, 0, 0.55);
    border-bottom: 2px solid rgba(0, 0, 0, 0.55);
    transform: rotate(45deg);
    pointer-events: none;
}

.auction-card.is-dashboard .auction-card-formwrap .vs-bid-postor.form-select {
    padding-right: 44px;
}

/* =========================================================
   11) NOTIFICACIONES (Usuario Notificaciones)
   ========================================================= */

.vs-notif-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.vs-notif-row:last-child {
    border-bottom: 0;
}

.vs-notif-channels {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.vs-notif-channel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
}

.vs-switch {
    transform: scale(1.05);
}

/* El texto va delante del interruptor: fuera el sangrado y el margen negativo
   que pone Bootstrap a .form-check / .form-switch para el caso contrario. */
.vs-notif-channel.form-check {
    min-height: 0;
    padding-left: 0;
}

.vs-notif-channel .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}

/* El mismo verde que el interruptor de e-mail de la barra de puja
   (.auction-email-container): los dos dicen «avísame por e-mail». */
.vs-notif-channel .form-check-input:checked {
    background-color: #92d12b;
    border-color: #92d12b;
}

.vs-muted {
    opacity: .45;
    cursor: not-allowed;
}

.vs-save-indicator {
    font-size: 12px;
    opacity: .75;
    min-height: 18px;
}

/* =========================================================
   Intereses: categorías × provincias
   (includes/bloques/intereses_form.inc, en el alta y en «Mis intereses»)

   La tarjeta es un <label> con su checkbox real dentro, oculto a la vista: el
   estado marcado se lee con :has(). Antes la marcada pintaba
   `var(--color-primary)`, que no existe en ninguna hoja, y no se distinguía.
   ========================================================= */

.vs-int-bloque {
    margin-bottom: 36px;
}

.vs-int-paso {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 16px;
}

.vs-int-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: #121636;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-int-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.vs-int-tarjeta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    margin: 0;
    padding: 12px 44px 12px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.vs-int-tarjeta:hover {
    border-color: #c9cbd6;
    box-shadow: 0 4px 14px rgba(18, 22, 54, .08);
}

.vs-int-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.vs-int-tarjeta:has(.vs-int-check:checked) {
    border-color: #121636;
    background: #f4f5f9;
    box-shadow: inset 0 0 0 1px #121636;
}

.vs-int-tarjeta:has(.vs-int-check:focus-visible) {
    outline: 2px solid #121636;
    outline-offset: 2px;
}

.vs-int-icono {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c6f80;
    font-size: 20px;
}

.vs-int-icono img {
    max-width: 30px;
    max-height: 28px;
}

.vs-int-nombre {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: #212529;
}

.vs-int-marca {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #c9cbd6;
    color: transparent;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease;
}

.vs-int-tarjeta:has(.vs-int-check:checked) .vs-int-marca {
    background: #121636;
    border-color: #121636;
    color: #fff;
}

.vs-int-ayuda {
    color: #6c757d;
    font-size: 15px;
    margin-bottom: 14px;
}

.vs-int-sin {
    margin: 0;
    padding: 18px;
    border: 1px dashed #d3d8e8;
    border-radius: 10px;
    color: #6c757d;
    text-align: center;
}

.vs-int-filas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vs-int-fila {
    display: grid;
    grid-template-columns: minmax(200px, 260px) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 20px;
    padding: 12px 16px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
}

/* `display: grid` pisa al atributo hidden: hay que decirlo. */
.vs-int-fila[hidden],
.vs-int-prov[hidden],
.vs-int-sin[hidden],
.vs-int-error[hidden] {
    display: none;
}

.vs-int-fila-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vs-int-fila-cat .vs-int-icono {
    width: 36px;
    height: 36px;
    font-size: 17px;
}

.vs-int-fila-cat .vs-int-icono img {
    max-width: 24px;
    max-height: 22px;
}

.vs-int-ambito {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: #eeeeee;
}

.vs-int-ambito label {
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    color: #444;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.vs-int-ambito .btn-check:checked + label {
    background: #121636;
    color: #fff;
}

.vs-int-ambito .btn-check:focus-visible + label {
    outline: 2px solid #121636;
    outline-offset: 2px;
}

.vs-int-prov {
    min-width: 0;
}

.vs-int-error {
    margin-top: 6px;
    color: #b42318;
    font-size: 13px;
}

.vs-int-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.vs-int-aviso .form-check-input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.vs-int-aviso .form-check-input:checked {
    background-color: #121636;
    border-color: #121636;
}

.vs-int-aviso strong {
    display: block;
    font-weight: 500;
    color: #212529;
}

.vs-int-aviso small {
    display: block;
    color: #6c757d;
}

/* Barra de acciones: con ~20 tarjetas la página es larga y el botón de
   guardar se quedaba al final. Se queda pegada abajo mientras se baja. */
.vs-int-barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 14px 0;
    background: #fff;
    border-top: 1px solid #e3e3e3;
    box-shadow: 0 -10px 16px -14px rgba(0, 0, 0, .25);
}

.vs-int-contador {
    font-size: 14px;
    color: #555;
}

.vs-int-botones {
    display: flex;
    gap: 10px;
}

@media (max-width: 767.98px) {
    .vs-int-rejilla {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .vs-int-tarjeta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 36px 12px 12px;
    }

    .vs-int-marca {
        top: 12px;
        right: 10px;
        transform: none;
    }

    .vs-int-fila {
        grid-template-columns: minmax(0, 1fr);
    }

    .vs-int-ambito {
        display: flex;
    }

    .vs-int-ambito label {
        flex: 1;
        text-align: center;
    }

    .vs-int-barra {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 0;
    }

    .vs-int-contador {
        font-size: 13px;
        text-align: center;
    }

    .vs-int-botones .btn {
        flex: 1;
        min-height: 44px;
    }
}

/* =========================================================
   Dashboard: panel «Completa tu cuenta» (VS_dashboard.php)

   Junta en una sola pieza lo que antes eran dos avisos sueltos (confirmar
   email, que pintaba el menú, y completar perfil, que pintaba el dashboard
   debajo del título). Mismo crema y botón que los avisos `.vs-aviso`.
   ========================================================= */

.vs-onboarding {
    margin-bottom: 40px;
    padding: 22px 24px 8px;
    border-radius: 12px;
    background: #f8f4e8;
}

.vs-onb-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.vs-onb-titulo {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 600;
    color: #212529;
}

.vs-onb-sub {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

.vs-onb-progreso {
    flex: 0 0 120px;
    font-size: 13px;
    font-weight: 500;
    color: #6b5b3a;
    text-align: right;
}

.vs-onb-barra {
    height: 6px;
    margin-top: 6px;
    border-radius: 3px;
    background: #e6dbbd;
    overflow: hidden;
}

.vs-onb-barra > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #121636;
}

.vs-onb-pasos {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.vs-onb-paso {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #ece3cb;
}

.vs-onb-estado {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #d1bb92;
    color: #6b5b3a;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-onb-paso.is-hecho .vs-onb-estado {
    border-color: #121636;
    background: #121636;
    color: #fff;
}

.vs-onb-texto {
    flex: 1;
    min-width: 0;
}

.vs-onb-texto strong {
    display: block;
    font-weight: 600;
    color: #212529;
}

.vs-onb-texto small {
    display: block;
    color: #6c757d;
}

.vs-onb-paso.is-hecho .vs-onb-texto strong {
    color: #6c757d;
}

.vs-onb-opcional {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e6dbbd;
    font-size: 12px;
    font-weight: 500;
    color: #5c4d2e;
}

.vs-onb-accion {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .vs-onboarding {
        padding: 18px 16px 6px;
    }

    .vs-onb-cabecera {
        flex-direction: column;
        gap: 12px;
    }

    .vs-onb-progreso {
        flex-basis: auto;
        width: 100%;
        text-align: left;
    }

    .vs-onb-paso {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .vs-onb-accion {
        flex-basis: 100%;
        padding-left: 46px;
    }

    .vs-onb-accion .btn {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* =========================================================
   Estado vacío del área privada: vs_estado_vacio() en funciones_vs.php

   Sustituye a los `alert alert-info` de «No tienes…». Sin variables de
   `.vs-ac` a propósito: aquello vive solo dentro del área del AC.
   ========================================================= */

.vs-vacio {
    margin: 8px 0 24px;
    padding: 48px 24px;
    border: 1px dashed #d3d8e8;
    border-radius: 12px;
    background: #fafafc;
    text-align: center;
}

.vs-vacio-icono {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f8f4e8;
    color: #a88a55;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-vacio-titulo {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 500;
    color: #282d57;
}

.vs-vacio-texto {
    max-width: 460px;
    margin: 0 auto;
    font-size: 15px;
    color: #6c757d;
}

.vs-vacio-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* Para huecos dentro de una pantalla con varias secciones (representados). */
.vs-vacio--compacto {
    padding: 24px 16px;
}

.vs-vacio--compacto .vs-vacio-icono {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    font-size: 20px;
}

.vs-vacio--compacto .vs-vacio-titulo {
    font-size: 16px;
}

@media (max-width: 575.98px) {
    .vs-vacio:not(.vs-vacio--compacto) {
        padding: 36px 16px;
    }

    .vs-vacio-acciones .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* =========================================================
   Mi perfil: secciones de ajustes (VS_usuario-perfil.php)

   Cada bloque es una fila: a la izquierda qué es y para qué se usa, a la
   derecha los campos en una tarjeta. Los campos conservan el aspecto global
   del sitio (.form-control en píldora de 18px): aquí solo se ordena.
   ========================================================= */

.vs-perfil-cabecera {
    margin-bottom: 28px;
}

.vs-ajuste {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 16px 48px;
    padding: 28px 0;
    border-top: 1px solid #e9e9ee;
}

.vs-perfil-form .vs-ajuste:first-child {
    border-top: 0;
    padding-top: 8px;
}

.vs-ajuste--suelta {
    margin-top: 40px;
    border-top: 1px solid #e9e9ee;
}

.vs-ajuste-intro h2 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 500;
    color: #212529;
}

.vs-ajuste-intro p {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

.vs-ajuste-campos {
    padding: 24px;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    background: #fff;
}

.vs-ajuste-campos .form-label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.vs-ajuste-campos .form-control[readonly] {
    background-color: #f6f6f8;
    color: #555;
}

.vs-perfil-mayus {
    text-transform: uppercase;
}

.vs-perfil-mayus::placeholder {
    text-transform: none;
}

.vs-ajuste-acciones {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.vs-ajuste-acciones--dentro {
    margin-top: 20px;
    padding-top: 0;
}

@media (max-width: 991.98px) {
    .vs-ajuste {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 24px 0;
    }
}

@media (max-width: 575.98px) {
    .vs-ajuste-campos {
        padding: 18px 16px;
    }

    .vs-ajuste-acciones .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ajuste visual select2 */
.select2-container--default .select2-selection--multiple {
    min-height: 45px;
    border-radius: 6px;
    background-color: #eee;
    border: 1px solid #ced4da;
}

.select2-container--default .select2-selection__choice {
    background-color: #eee;
    border: none;
    color: var(--bs-body-color);
    padding: 3px 8px;
}

/* =========================================================
   12) Galería de imágenes de la ficha de lote
   ========================================================= */

.vs-galeria {
  --vs-gal-radio: 16px;
  --vs-gal-gap: 12px;
}

/* Anchors comunes */
.vs-galeria a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--vs-gal-radio);
  background: #f1f1f4;
}

.vs-galeria a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.vs-galeria a:hover img {
  transform: scale(1.04);
}

/* Imágenes que solo alimentan el lightbox */
.vs-galeria__hidden {
  display: none !important;
}

/* Overlay "+N fotos más" */
.vs-galeria__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 22, 54, .55);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2px;
  text-align: center;
  padding: 8px;
}

/* ---- Modo HERO: imagen grande + columna de miniaturas ---- */
.vs-galeria--hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--vs-gal-gap);
  align-items: stretch;
}

.vs-galeria--hero .vs-galeria__main {
  height: 100%;
}

.vs-galeria--hero .vs-galeria__main img {
  min-height: 380px;
  max-height: 480px;
}

.vs-galeria__col {
  display: flex;
  flex-direction: column;
  gap: var(--vs-gal-gap);
}

.vs-galeria__col a {
  flex: 1 1 0;
  min-height: 0;
}

/* ---- Modo COMPACTO: una sola fila de miniaturas ---- */
.vs-galeria--compacta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vs-gal-gap);
}

.vs-galeria--compacta .vs-galeria__thumb {
  aspect-ratio: 4 / 3;
}

/* ---- Sin imágenes ---- */
.vs-galeria--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border-radius: var(--vs-gal-radio);
  background: #f1f1f4;
  color: #8a8a9a;
  font-style: italic;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .vs-galeria--hero {
    grid-template-columns: 1fr;
  }
  .vs-galeria--hero .vs-galeria__main img {
    min-height: 240px;
  }
  .vs-galeria__col {
    flex-direction: row;
  }
  .vs-galeria__col a {
    aspect-ratio: 4 / 3;
  }
  .vs-galeria--compacta {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   La nav de secciones de la ficha

   Vivía con `style="top: 0; z-index: 1030"` en el marcado, y ese estilo en
   línea se comía la regla de más abajo que la baja por debajo de la cabecera
   fija. Resultado: se pegaba al borde superior, la cabecera le caía encima y
   solo asomaba la última fila. Aquí van las dos declaraciones, donde la media
   query sí puede ganarles.

   Y por debajo de 1200px las cinco pestañas no caben en una línea: eran 2
   filas a 820px (83px de alto) y 3 filas a 402px (124px). Con la cabecera
   delante, 193px de una pantalla de 874: el 22%. Pasan a una sola fila que se
   desplaza a dedo.
   --------------------------------------------------------------------------- */

.nav-tabs.sticky-top {
    top: 0;
    z-index: 1030;
}

@media (max-width: 1199.98px) {
    .nav-tabs.sticky-top {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        /* `justify-content-center` es una utilidad de Bootstrap y lleva
           !important; centrado no vale cuando la fila se desplaza. */
        justify-content: flex-start !important;
        /* Sin barra: la pestaña cortada a la derecha ya avisa de que hay más. */
        scrollbar-width: none;
    }

    .nav-tabs.sticky-top::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs.sticky-top .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Al saltar a una sección, que su título no acabe debajo de la cabecera y de
   la nav. El JS ya descuenta las dos alturas al hacer el scroll suave; esto
   cubre el salto directo del navegador cuando se entra con #ancla en la URL. */
@media (max-width: 991px) {
    .subasta-ficha section[id] {
        scroll-margin-top: calc(var(--vs-alto-cabecera) + 60px);
    }
}

/* La fecha, el estado y el corazón se reparten con `space-between`, que NO
   reserva hueco: cuando la fecha llena su ancho, el badge acaba pegado al
   corazón. Medido a 402px: el badge terminaba en 352 y el corazón empezaba en
   352. */
.auction-details-header-info {
    gap: 12px;
}

/* Galería de una sola imagen: sin columna de miniaturas que rellenar. */
.vs-galeria--unica {
    grid-template-columns: 1fr;
}

/* =========================================================
   12) ÁREA DEL ADMINISTRADOR CONCURSAL (/mis-expedientes/)
   Solo visible para clientes con es_ac. Módulos VS_ac-*.php
   ========================================================= */

.vs-ac {
  --vs-ac-tinta: #121636;
  --vs-ac-tinta-2: #5b6079;
  --vs-ac-linea: #e4e7f2;
  --vs-ac-fondo: #f6f7fb;
  --vs-ac-acento: #d1bb92;
  --vs-ac-radio: 12px;
  padding: 32px 0 72px;
  color: var(--vs-ac-tinta);
}

/* ---- Migas ---- */
.vs-ac-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: #b9bed2;
}

.vs-ac-breadcrumb a {
  color: var(--vs-ac-tinta-2);
  text-decoration: none;
}

.vs-ac-breadcrumb a:hover {
  color: var(--vs-ac-tinta);
  text-decoration: underline;
}

.vs-ac-breadcrumb [aria-current="page"] {
  color: var(--vs-ac-tinta);
  font-weight: 600;
}

/* ---- Cabecera de sección ---- */
.vs-ac-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--vs-ac-linea);
}

.vs-ac-head-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vs-ac-tinta);
}

.vs-ac-head-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--vs-ac-tinta-2);
}

/* ---- Pill de estado (color leído del catálogo vs_*_estados) ---- */
.vs-ac-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---- Chip de rol ---- */
.vs-ac-rol {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eceef6;
  color: var(--vs-ac-tinta-2);
  font-size: 12px;
  font-weight: 600;
}

.vs-ac-rol.is-principal {
  background: rgba(209, 187, 146, 0.28);
  color: #7a6533;
}

/* ---- Resumen bajo el título ---- */
.vs-ac-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: -8px 0 28px;
}

.vs-ac-resumen-item {
  font-size: 13px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-resumen-item i {
  margin-right: 6px;
  color: #9aa0bb;
}

/* ---- Filtro por despacho (Mis expedientes) ---- */
.vs-ac-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 24px;
}

.vs-ac-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--vs-ac-linea);
  border-radius: 999px;
  background: #fff;
  color: var(--vs-ac-tinta-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.vs-ac-filtro:hover {
  border-color: var(--vs-ac-tinta);
  color: var(--vs-ac-tinta);
}

.vs-ac-filtro.is-activo {
  border-color: var(--vs-ac-tinta);
  background: var(--vs-ac-tinta);
  color: #fff;
}

.vs-ac-filtro-n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--vs-ac-fondo);
  color: var(--vs-ac-tinta);
  font-size: 12px;
  text-align: center;
}

.vs-ac-filtro.is-activo .vs-ac-filtro-n {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ---- Listado de expedientes ---- */
.vs-ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.vs-ac-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--vs-ac-linea);
  border-radius: var(--vs-ac-radio);
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.vs-ac-card:hover {
  box-shadow: 0 10px 28px rgba(18, 22, 54, 0.09);
  transform: translateY(-2px);
}

.vs-ac-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vs-ac-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.vs-ac-card-title a {
  color: var(--vs-ac-tinta);
  text-decoration: none;
}

.vs-ac-card-title a:hover {
  text-decoration: underline;
}

.vs-ac-card-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-card-meta li + li {
  margin-top: 5px;
}

.vs-ac-card-meta i {
  width: 16px;
  margin-right: 6px;
  color: #9aa0bb;
}

.vs-ac-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--vs-ac-linea);
}

.vs-ac-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.vs-ac-stat {
  font-size: 13px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-stat strong {
  margin-right: 3px;
  font-size: 15px;
  color: var(--vs-ac-tinta);
}

/* ---- Botones ---- */
.vs-ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--vs-ac-tinta);
  border-radius: 8px;
  background: var(--vs-ac-tinta);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vs-ac-btn:hover {
  background: #2f3777;
  border-color: #2f3777;
  color: #fff;
}

.vs-ac-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.vs-ac-btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.vs-ac-btn-ghost {
  background: transparent;
  color: var(--vs-ac-tinta);
}

.vs-ac-btn-ghost:hover {
  background: var(--vs-ac-tinta);
  color: #fff;
}

.vs-ac-btn-ok {
  background: #1f9d55;
  border-color: #1f9d55;
}

.vs-ac-btn-ok:hover {
  background: #178048;
  border-color: #178048;
}

.vs-ac-btn-danger {
  background: transparent;
  border-color: #d94b4b;
  color: #d94b4b;
}

.vs-ac-btn-danger:hover {
  background: #d94b4b;
  border-color: #d94b4b;
  color: #fff;
}

/* ---- Panel de subasta ---- */
.vs-ac-panel {
  margin-bottom: 24px;
  border: 1px solid var(--vs-ac-linea);
  border-radius: var(--vs-ac-radio);
  background: #fff;
  overflow: hidden;
}

.vs-ac-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: var(--vs-ac-fondo);
  border-bottom: 1px solid var(--vs-ac-linea);
}

.vs-ac-panel-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.vs-ac-panel-sub {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-panel-sub i {
  color: #9aa0bb;
}

.vs-ac-panel-empty {
  margin: 0;
  padding: 22px;
  font-size: 14px;
  color: var(--vs-ac-tinta-2);
}

/* ---- Tabla de lotes ---- */
.vs-ac-table-wrap {
  overflow-x: auto;
}

.vs-ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.vs-ac-table th {
  padding: 12px 22px;
  border-bottom: 1px solid var(--vs-ac-linea);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vs-ac-tinta-2);
  white-space: nowrap;
}

.vs-ac-table td {
  padding: 14px 22px;
  border-bottom: 1px solid #f0f2f8;
  vertical-align: middle;
}

.vs-ac-table tr:last-child td {
  border-bottom: 0;
}

.vs-ac-table tr.is-pendiente td {
  background: rgba(209, 187, 146, 0.12);
}

.vs-ac-table-link {
  color: var(--vs-ac-tinta);
  font-weight: 600;
  text-decoration: none;
}

.vs-ac-table-link:hover {
  text-decoration: underline;
}

.vs-ac-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--vs-ac-acento);
  color: #4a3d1d;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Cajas de la ficha del lote ---- */
.vs-ac-box {
  padding: 22px;
  border: 1px solid var(--vs-ac-linea);
  border-radius: var(--vs-ac-radio);
  background: #fff;
}

.vs-ac-box + .vs-ac-box {
  margin-top: 20px;
}

.vs-ac-box-acta {
  margin-top: 24px;
}

.vs-ac-box-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.vs-ac-box-subtitle {
  margin: 20px 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.vs-ac-box-empty {
  margin: 0;
  font-size: 14px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 0;
  font-size: 14px;
}

.vs-ac-dl dt {
  color: var(--vs-ac-tinta-2);
  font-weight: 500;
  white-space: nowrap;
}

.vs-ac-dl dd {
  margin: 0;
  font-weight: 600;
}

.vs-ac-activos {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-activos li + li {
  margin-top: 4px;
}

/* ---- Subasta por convenio en el panel del AC (resumen + paginación) ---- */
.vs-ac-convenio {
  padding: 18px 22px 0;
}

.vs-ac-convenio .vs-ac-kpis {
  margin-bottom: 12px;
}

.vs-ac-paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  font-size: 13px;
  color: var(--vs-ac-tinta-2);
}

/* ---- KPIs del lote ---- */
.vs-ac-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.vs-ac-kpi {
  padding: 16px;
  border: 1px solid var(--vs-ac-linea);
  border-radius: var(--vs-ac-radio);
  background: var(--vs-ac-fondo);
  text-align: center;
}

.vs-ac-kpi-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.vs-ac-kpi-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vs-ac-tinta-2);
}

/* ---- Mejor postor ---- */
.vs-ac-importe {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.vs-ac-postor {
  padding: 16px;
  border-radius: 10px;
  background: var(--vs-ac-fondo);
  font-size: 14px;
}

.vs-ac-postor-nombre {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.vs-ac-postor-linea {
  margin: 0;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-postor-linea + .vs-ac-postor-linea {
  margin-top: 4px;
}

.vs-ac-postor-linea i {
  width: 16px;
  margin-right: 6px;
  color: #9aa0bb;
}

/* ---- Acciones y avisos ---- */
.vs-ac-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.vs-ac-acciones:empty {
  display: none;
}

.vs-ac-aviso {
  flex: 1 1 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: #eaf0fc;
  color: #23407a;
  font-size: 13px;
}

.vs-ac-nota {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--vs-ac-tinta-2);
}

.vs-ac-nota.is-ok {
  color: #1f9d55;
  font-weight: 600;
}

/* Verificación del pago al ratificar: ocupa su propia fila bajo los botones */
.vs-ac-ratificar {
  flex: 1 1 100%;
  padding: 14px;
  border: 1px solid #d3d8e8;
  border-radius: 8px;
}

.vs-ac-ratificar[hidden] {
  display: none;
}

/* ---- Estado vacío ---- */
.vs-ac-empty {
  padding: 56px 24px;
  border: 1px dashed #d3d8e8;
  border-radius: var(--vs-ac-radio);
  background: var(--vs-ac-fondo);
  text-align: center;
}

.vs-ac-empty i {
  font-size: 34px;
  color: #b9bed2;
}

.vs-ac-empty-title {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 700;
}

.vs-ac-empty-text {
  margin: 6px auto 0;
  max-width: 460px;
  font-size: 14px;
  color: var(--vs-ac-tinta-2);
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .vs-ac-head-title {
    font-size: 24px;
  }
  .vs-ac-grid {
    grid-template-columns: 1fr;
  }
  .vs-ac-kpis {
    grid-template-columns: 1fr;
  }
  .vs-ac-dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .vs-ac-dl dd {
    margin-bottom: 10px;
  }
  .vs-ac-table th,
  .vs-ac-table td {
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* ==========================================================================
   Páginas de contenido editables (aviso legal, privacidad, cookies, términos)
   Módulo: modulos/vsubasta/VS_pagina.php · contenido en la tabla vs_paginas.
   Los textos los edita el gestor con CKEditor, así que el HTML que llega aquí
   es limitado y variable (p, h2-h4, listas, enlaces, tablas): se estiliza por
   descendencia en vez de con clases propias.
   ========================================================================== */
.vs-pagina-contenido {
  color: #4a4f6a;
  font-size: 16px;
  line-height: 1.75;
}

.vs-pagina-contenido > *:first-child {
  margin-top: 0;
}

.vs-pagina-contenido > *:last-child {
  margin-bottom: 0;
}

.vs-pagina-contenido p {
  margin-bottom: 18px;
}

.vs-pagina-contenido h2,
.vs-pagina-contenido h3,
.vs-pagina-contenido h4 {
  color: #282d57;
  font-weight: 700;
  margin-top: 38px;
  margin-bottom: 14px;
}

.vs-pagina-contenido h2 {
  font-size: 24px;
}

.vs-pagina-contenido h3 {
  font-size: 20px;
}

.vs-pagina-contenido h4 {
  font-size: 18px;
}

.vs-pagina-contenido strong {
  color: #282d57;
}

.vs-pagina-contenido ul,
.vs-pagina-contenido ol {
  margin-bottom: 18px;
  padding-left: 22px;
}

.vs-pagina-contenido li {
  margin-bottom: 8px;
}

.vs-pagina-contenido a {
  color: #282d57;
  text-decoration: underline;
  word-break: break-word;
}

.vs-pagina-contenido a:hover {
  color: #d1bb92;
}

/* Las tablas de las políticas (cookies, plazos de conservación) son anchas:
   scroll propio para que no desborde el ancho de la página en móvil. */
.vs-pagina-contenido table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin-bottom: 22px;
  border-collapse: collapse;
  font-size: 14px;
}

.vs-pagina-contenido th,
.vs-pagina-contenido td {
  border: 1px solid #e4e7f2;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.vs-pagina-contenido th {
  background-color: #f6f7fb;
  color: #282d57;
  font-weight: 600;
}

.vs-pagina-fecha {
  border-top: 1px solid #e4e7f2;
  padding-top: 18px;
  font-size: 14px;
}

@media (max-width: 767.98px) {
  .vs-pagina-contenido {
    font-size: 15px;
  }
  .vs-pagina-contenido h2 {
    font-size: 21px;
  }
}

/* ==========================================================================
   Objetivos táctiles en móvil
   Medido en dev (2026-08-27, viewport 375px): los enlaces con estilo de botón
   del listado ("Guardar búsqueda" y el desplegable de orden) quedaban en 15px
   de alto por el `padding: 0`. Con el dedo eso es una diana muy pequeña; la
   recomendación de accesibilidad ronda los 44px.
   Solo se toca en pantallas táctiles pequeñas: en escritorio el diseño
   compacto es deliberado y se deja como está.
   ========================================================================== */
@media (max-width: 767.98px) {
  .vs-search-actions-btn-link,
  .vs-search-actions-btn-link-icon {
    padding: 10px 4px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------
   Al final del archivo a propósito: estas reglas compiten con otras
   que también llevan !important, y a igualdad de peso gana la última
   que aparece. Puestas más arriba no hacían nada.
   --------------------------------------------------------------- */

/* Campos del buscador: 16 px en móvil y tablet.

   Safari en iOS hace zoom automático al enfocar un campo de menos de 16 px, y
   NO lo deshace al salir: el usuario se queda con la página ampliada y tiene que
   pellizcar para volver. Con ocho campos de filtro a 14 px, buscar desde un
   iPhone era eso.

   Lleva `!important` porque la regla original también lo lleva; sin él esto no
   pinta nada. En escritorio se mantienen los 14 px del diseño. */

@media (max-width: 991.98px) {
  .vs-search-main .form-control,
  .vs-search-main .form-select,
  .vs-search-advanced .form-control,
  .vs-search-advanced .form-select {
    font-size: 16px !important;
  }
}

/* Titulares de las páginas interiores en móvil y tablet.

   Mismo patrón que se corrigió en la portada, pero afecta a más pantallas:

   - `.section-title h1` está fijo en **56 px** sin ninguna regla responsive, así
     que el «Subastas» del listado ocupaba media pantalla en un teléfono.
   - `.banner-content h1` se queda en 38 px en móvil: es el titular de las
     páginas interiores (cómo pujar, legales…).

   El de la portada NO se toca aquí: tiene su propia regla, más específica.

   clamp() en vez de un tamaño fijo para que escale con el ancho y no dé un
   salto brusco al cruzar el punto de ruptura. */

@media (max-width: 991.98px) {
  .section-title h1 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
  }
}

/* Los dos selectores porque el tema usa `.breadcrumb-section.five ...`, que
   con tres clases gana a un `.banner-content h1` a secas. Con la misma
   especificidad, al estar en custom.css —que carga después— manda esta. */

@media (max-width: 767.98px) {
  .breadcrumb-section .banner-content h1,
  .breadcrumb-section.five .banner-content h1 {
    font-size: clamp(26px, 7.6vw, 34px);
    line-height: 1.18;
  }
}


/* =========================================================
   13) MENÚ MÓVIL DE LA CABECERA
   =========================================================

   El tema pinta `header.style-4 .main-menu` como un panel lateral blanco de
   280 px (`style.css`, dentro de `@media (max-width: 991px)`). El diseño pide
   otra cosa: una superposición a pantalla completa sobre azul marino, con los
   enlaces centrados, una barra superior con el isotipo y el aspa, y las redes
   al pie. Todo lo de aquí lo reescribe.

   Dos reglas que hay que respetar al tocar este bloque:

   1. TODO va dentro de `@media (max-width: 991px)`, el mismo punto de ruptura
      que usa el tema. Por encima de 992 px no se define ni una regla nueva, así
      que la cabecera de escritorio queda exactamente como estaba: la
      superposición se queda ahí como un `inline-block` vacío —sus bloques
      internos llevan `d-lg-none`— igual que el panel al que sustituye.
   2. `style.css` es la base heredada de la plantilla y no se toca. De ahí que
      algunas propiedades vayan con `!important`: el tema declara
      `padding: 30px 20px !important` en el panel y sin esto no hay forma de
      quitárselo.

   ========================================================= */

@media (max-width: 991px) {

  /* --- La superposición ---------------------------------------------------
     Sigue siendo el primer `.main-menu` del documento, que es el elemento al
     que `main.js` le pone `show-menu` y el que observa `front.custom.js`. El
     mecanismo de apertura no se ha tocado; lo que ha cambiado es qué hay
     dentro del panel.

     Se abre con opacidad + visibilidad en vez de con el `translateX` del tema:
     cubriendo toda la pantalla un deslizamiento lateral no aporta nada, y
     `visibility: hidden` saca los enlaces del árbol de accesibilidad y del
     orden de tabulación mientras está cerrada, cosa que `translateX(-100%)` no
     hacía. */

  header.style-4 .main-menu.vs-menu-movil {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: 0 !important;
    border-right: 0;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;

    /* El gráfico arquitectónico del fondo va como imagen del propio panel, no
       como pseudoelemento: así, si los enlaces llegasen a no caber y el panel
       scrollease, el dibujo se queda quieto (`background-attachment: scroll`
       ancla el fondo a la caja, no al contenido).

       Es un SVG en línea a propósito: no depende de ningún archivo nuevo en
       `assets/img/`, y con `stroke-opacity` bajo queda en el «tono apenas más
       claro» que pide el diseño en vez de dibujar un cuadro. */
    background-color: #121636;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='420' viewBox='0 0 480 420' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.2'%3E%3Cpath d='M0 419.5h480'/%3E%3Cpath d='M60 420V190l70-46 70 46v230'/%3E%3Cpath d='M130 144v-42'/%3E%3Cpath d='M60 236h140M60 282h140M60 328h140M60 374h140M130 190v230'/%3E%3Crect x='246' y='118' width='114' height='302'/%3E%3Cpath d='M246 176h114M246 234h114M246 292h114M246 350h114M303 118v302'/%3E%3Cpath d='M392 420V252h64v168'/%3E%3Cpath d='M392 306h64M392 360h64M424 252v168'/%3E%3Ccircle cx='424' cy='186' r='30'/%3E%3Cpath d='M394 186h60M424 156v60'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: min(150%, 660px) auto;
  }

  header.style-4 .main-menu.vs-menu-movil.show-menu {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* --- Barra superior: isotipo a la izquierda, usuario y aspa a la derecha */

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 16px 18px;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-iso {
    display: inline-flex;
    align-items: center;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-iso img {
    display: block;
    width: auto;
    height: 32px;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Botón y enlace comparten pinta. El aspa es un <button> de verdad, así que
     hay que anular los estilos de botón del navegador. */
  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .92);
    line-height: 1;
    transition: background-color .2s ease, color .2s ease;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-accion:hover,
  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-accion:focus-visible {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-accion:focus-visible {
    outline: 2px solid #d1bb92;
    outline-offset: 2px;
  }

  /* --- Enlaces: centrados en el hueco que queda entre barra y redes ------- */

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
  }

  /* `header.style-4 .main-menu .menu-list` del tema mete 50 px de relleno
     arriba, que aquí descentraría la lista. */
  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .menu-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .menu-list > li {
    display: block;
    padding: 0;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .menu-list > li + li {
    margin-top: 26px;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .menu-list > li > a {
    display: inline-block;
    padding: 6px 12px;
    color: #fff;
    font-size: clamp(19px, 5.2vw, 22px);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: color .2s ease;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .menu-list > li > a:hover,
  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .menu-list > li > a:focus-visible {
    color: #d1bb92;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .menu-list a:focus-visible {
    outline: 2px solid #d1bb92;
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Defensivo: hoy `menuHeader.inc` no emite submenús (la parte que los
     generaba está comentada), pero si se reactivan que no salgan sin estilo. */
  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .sub-menu {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-nav .sub-menu a {
    display: inline-block;
    padding: 5px 12px;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
  }

  /* --- Redes sociales al pie ---------------------------------------------- */

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-redes {
    flex: 0 0 auto;
    padding: 10px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-redes ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, .5);
    font-size: 17px;
    line-height: 1;
    transition: color .2s ease;
  }

  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-redes a:hover,
  header.style-4 .main-menu.vs-menu-movil .vs-menu-movil-redes a:focus-visible {
    color: #fff;
  }

  /* --- El menú horizontal de escritorio no pinta nada aquí ----------------
     En móvil el tema lo convertía en un segundo panel lateral que nunca recibía
     `show-menu`: invisible, pero con los mismos enlaces duplicados en el árbol
     de accesibilidad. Ahora la navegación vive en la superposición. */

  header.style-4 .main-menu.vs-menu-escritorio {
    display: none;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  header.style-4 .main-menu.vs-menu-movil,
  header.style-4 .main-menu.vs-menu-movil * {
    transition-duration: .01ms !important;
  }
}

/* ===============================================================
   Tarjetas del listado: que quepan también en tablet
   =============================================================== */

/* REJILLA — tarjeta estrecha.

   `.vs-card-meta` pone el contador y los importes en una fila al 50% cada uno.
   A 820 px el listado va a 3 columnas y la tarjeta baja a 216: el contador
   necesita 149 px en un hueco de 108, **se sale 41 y cae encima del bloque de
   depósito**. Medido, no estimado.

   Se resuelve dejando que la fila se parta cuando no cabe, en vez de forzar dos
   columnas. El punto de corte lo marca el contenido —el `min-width` del
   contador— y no el ancho de la ventana, que es justo el error: a 820 px la
   ventana es ancha pero la tarjeta es estrecha. */

.vs-card-meta {
  flex-wrap: wrap;
  gap: 10px;
}

/* `min-width: max-content` en los dos, y ahí está la clave.

   Con un mínimo en píxeles fijos (probé 150) el reparto flexible seguía dejando
   al contador más estrecho que sus propios dígitos: a 1280 px pedía 240 px en
   una caja de 182 y se salía 58 encima del depósito. Con `max-content` ninguno
   de los dos puede encogerse por debajo de su contenido, así que cuando no
   caben juntos **se parten en dos líneas** en vez de pisarse. */
.vs-card-meta-timer {
  flex: 0 1 auto;
  min-width: max-content;
}

.vs-card-meta-deposit {
  flex: 1 1 auto;
  min-width: max-content;
}

/* Lo de arriba es para la REJILLA. La vista lista tiene su propia maqueta y su
   propio reparto; si hereda el `wrap` y el crecimiento del depósito, la fila se
   parte en dos líneas también en escritorio, donde cabe de sobra. */
@media (min-width: 768px) {
  .fila .vs-card-meta {
    flex-wrap: nowrap;
  }

  .fila .vs-card-meta-timer,
  .fila .vs-card-meta-deposit {
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* LISTA — el apaño de las dos líneas, retirado.

   Aquí vivía un `flex-wrap` con una base de 220px para el título, puesto para
   que la fila se partiera en dos cuando no cabían miniatura, título, estado,
   contador e importes en una sola línea —a 820px al título le quedaban 56px y
   salían once renglones de una palabra—.

   La columna de texto pasó a apilarse (ver «La columna de texto, apilada»), que
   resuelve lo mismo de raíz: si nada compite por el ancho, el título no se
   estrecha. Y este bloque ya no solo sobraba: estorbaba. Con la columna en
   vertical, ese `flex: 1 1 220px` deja de significar «al menos 220px de ancho»
   y pasa a significar «crece a lo alto», que dejaba la fila en 401px con un
   vacío enorme bajo el título. */

/* Entre 768 y 1199 los 35 px de separación del diseño de escritorio son
   demasiados: se comen el sitio que necesita el título. */

@media (min-width: 768px) and (max-width: 1199.98px) {
  .fila .auction-card-content {
    gap: 18px;
  }

  .fila .vs-card-meta,
  .fila .vs-card-meta-deposit {
    gap: 22px;
  }
}

/* Marcador de lote sin foto: el nombre en rejilla, un icono en lista.

   El fondo oscuro con el nombre se mantiene tal cual estaba —es lo que
   identifica el lote cuando no hay imagen, y encima el «Ref. NN» solo se lee
   sobre ese fondo—. Lo único que cambia es la vista lista: ahí la caja mide
   90x80, el nombre no cabe y chocaba con el «Ref.», así que se enseña el icono.

   Se emiten los dos en el HTML y decide el CSS, en vez de que el PHP tenga que
   saber en qué vista se está pintando: la vista se elige en el cliente y puede
   cambiar sin recargar. */

.vs-noimg-icono {
  display: none;
}

.fila .vs-noimg-nombre {
  display: none;
}

.fila .vs-noimg-icono {
  display: block;
  font-size: 20px;
  color: rgba(255, 255, 255, .5);
}


/* =========================================================
   14) CABECERA FIJA EN MÓVIL
   =========================================================

   La cabecera se queda arriba al scrollear en vez de irse con la página.

   Antes de tocar nada aquí hay que entender por qué las dos primeras reglas,
   que no parecen tener relación con la cabecera, son las que lo hacen posible.

   `style.css` declara `html, body { height: 100% }` y `body { overflow-x:
   hidden }`. La primera deja el `<body>` con la altura EXACTA de la pantalla
   aunque la página mida cuatro mil píxeles. La segunda fuerza a que
   `overflow-y` compute a `auto`, lo que convierte el `<body>` en un contenedor
   de scroll... que nunca scrollea, porque quien scrollea es el `<html>`.

   Entre las dos dejaban MUERTA toda `position: sticky` del front, en todos los
   tamaños. No fallaba ni avisaba: el navegador aceptaba la declaración y no
   pegaba nada (medido: la cabecera con `position: sticky` computada acababa en
   `top: -157px`). Aparte de la cabecera seguían muertas la nav de secciones de
   la ficha (`VS_subasta.php`, un `sticky-top` de Bootstrap escrito justamente
   para pegarse), `.auction-details-content` y el menú lateral del dashboard.

   `overflow-x: clip` recorta igual que `hidden` pero NO crea contenedor de
   scroll, que es exactamente lo que hacía falta.

   Todo va confinado a `≤991px`: en escritorio no cambia ni un píxel, y las
   tres sticky de arriba siguen dormidas allí.
   ========================================================= */

@media (max-width: 991px) {

  /* Alto real de la cabecera, medido. Lo consume la nav de secciones de la
     ficha para pegarse por debajo en vez de encima. */
  :root {
    --vs-alto-cabecera: 69px;
  }

  html,
  body {
    height: auto;
    min-height: 100%;
  }

  body {
    overflow-x: clip;
  }

  /* --- Páginas interiores -------------------------------------------------
     `sticky` y no `fixed`: la cabecera ya está en el flujo, así que no hay que
     compensar con ningún padding ni se produce salto de contenido.

     El z-index sube de 99 a 1035 por la ficha de lote: su nav de secciones es
     un `.sticky-top` de Bootstrap, que va a 1030 y le asomaba una franja
     blanca por encima a la cabecera. 1035 la deja debajo, y sigue muy por
     encima del velo del menú móvil (98), que es la otra relación que importa
     —ver la nota del bloque `.vs-mobile-overlay`—. */
  .header-topbar-area.black-bg {
    position: sticky;
    top: 0;
    z-index: 1035;
  }

  /* --- Portada ------------------------------------------------------------
     Aquí la cabecera flota transparente sobre la foto del hero (`.three` la
     pone `absolute`). Con `sticky` entraría en el flujo y empujaría el hero
     69 px hacia abajo, rompiendo el diseño, así que se queda fuera del flujo
     con `fixed`.

     El fondo lo enciende `scripts-cabecera.js` cuando la foto queda atrás: el
     logo es blanco y sobre el contenido claro no habría forma de leerlo. La
     cabecera NO se mueve en ningún momento; lo único que aparece es el fondo. */
  .header-topbar-area.three {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color .2s ease;
    z-index: 1035;
  }

  .header-topbar-area.three.vs-cabecera-con-fondo {
    background-color: var(--blue-vs-dark);
  }

  /* --- Nav de secciones de la ficha ---------------------------------------
     Se pega por debajo de la cabecera y no encima. Antes de este bloque nunca
     llegaba a pegarse, así que este conflicto no existía. */
  .nav-tabs.sticky-top {
    top: var(--vs-alto-cabecera);
  }
}

/* =========================================================
   14) LISTA EN MÓVIL: el bloque de datos de la tarjeta
   ========================================================= */

/* Va al final del archivo A PROPÓSITO. En la sección 12 hay reglas sueltas de
   `.vs-card-meta` —el `flex-wrap` y los `min-width: max-content` de la rejilla—
   que aplican también en móvil y ganarían por orden a un bloque escrito más
   arriba. Puesto aquí, gana este.

   Qué se arregla (medido a 402 px sobre la tarjeta real):

   - Había TRES alineaciones a la vez. El título, la pastilla de estado y el
     contador arrancaban en la columna de texto; el bloque de importes ocupaba
     los 226 px enteros con el texto pegado al borde derecho.
   - Los dos importes pesaban lo mismo, cuando en una subasta la mayor puja es
     EL dato y el depósito un requisito. De ahí que la tarjeta se viera plana.
   - Bajo la miniatura, de 90x80, quedaban unos 190 px de columna vacía.

   El contador pasa a un panel gris que llega hasta donde llega el título, los
   importes van debajo con la mayor puja destacada, y la pastilla de estado se
   baja al hueco de la miniatura. La tarjeta baja de 336 a 303 px de alto.

   Solo en móvil: de 768 en adelante la fila tiene sitio de sobra y su maqueta
   está revisada aparte. */

@media (max-width: 767.98px) {

    /* El bloque de datos deja de ser una fila de dos mitades. El
       `align-self: stretch` es lo que hace que el panel llegue hasta el borde
       del título: la columna de texto es flex con los hijos alineados al
       principio, así que si no se dice nada cada uno se encoge a su contenido. */
    .fila .vs-card-meta {
        display: block;
        align-self: stretch;
    }

    .fila .vs-card-meta-timer {
        background: #f2f4fa;
        border-radius: 10px;
        padding: 10px 14px;
    }

    /* `column-reverse` porque en el HTML el depósito va primero y aquí manda la
       puja. El `text-align: right` lo pone el tema en los <p>, no en su
       contenedor: hay que apuntar al párrafo o no cambia nada. */
    .fila .vs-card-meta-deposit {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-top: 12px;
    }

    /* Cinco clases, y no es por gusto. El tema alinea a la derecha con
       `.auction-card.style-5 .auction-card-content p.mayor_puja` —cuatro
       clases—, así que un selector de dos no le gana y esto no hacía nada.

       Se notaba: el párrafo se encoge a su línea más ancha, así que con la
       cifra larga era la etiqueta la que se iba al borde derecho, y con una
       cifra corta —«0,00 €»— era la cifra la que se iba. Dos elementos que
       deberían empezar en la misma vertical y bailaban según el contenido.

       Cómo se me pasó: las variantes se probaron con selectores de `#id`, que
       ganan a cualquier cosa. La maqueta se veía bien y la realidad no. Al
       probar una variante hay que hacerlo con el selector que va a llevar de
       verdad, o no se prueba la regla: se prueba otra cosa. */
    .fila .auction-card.style-5 .auction-card-content .vs-card-meta-deposit p {
        text-align: left;
    }

    .fila .vs-card-meta-deposit .mayor_puja {
        font-size: 11px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .fila .vs-card-meta-deposit .mayor_puja span {
        display: block;
        font-size: 24px;
        font-weight: 700;
        color: #121636;
        line-height: 1.1;
        letter-spacing: 0;
        text-transform: none;
    }

    .fila .vs-card-meta-deposit .deposito {
        font-size: 12px;
        color: #9aa0b5;
        margin-top: 8px;
    }

    /* La pastilla de estado, al hueco bajo la miniatura.

       Vive en la columna de texto y no hay forma de moverla al otro lado con
       CSS —son ramas distintas del árbol—, así que se saca del flujo. Los 88 px
       son el alto de la miniatura más 8 de aire; de dónde empieza la miniatura
       se encarga `--vs-lista-arriba`, que ya sube sola cuando hay banda de puja.

       El `max-width` no es decoración: «Empieza próximamente» mide 172 px suelta
       y se metía encima del título. Limitada al ancho de la miniatura se parte
       en dos renglones y se queda en su columna, que ahí sobra sitio. */
    .fila .vs-list-estado {
        position: absolute;
        left: 20px;
        top: calc(var(--vs-lista-arriba) + 88px);
        margin: 0;
        max-width: 90px;
        padding: 5px 10px;
        border-radius: 12px;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }
}

/* Contraste del gris secundario de la tarjeta de subasta.

   El tema pinta el contador, la localización, el depósito y la mayor puja en
   #808080 sobre blanco: 3,95:1, por debajo del 4,5:1 que la WCAG 2.1 exige en
   AA para texto normal. Ninguno de estos textos llega a "texto grande" —el más
   grande es el contador, a 20 px y peso 500—, así que se les aplica el umbral
   estricto.

   #767676 da 4,54:1 y es el gris más claro que cumple sobre blanco. La
   diferencia con #808080 no se aprecia a simple vista.

   Mismos selectores que style.css para igualar especificidad; custom.css carga
   después, así que gana sin `!important`. */

.auction-card .countdown-timer ul li,
.auction-card .countdown-timer ul li span,
.auction-card.style-5 .auction-card-content p.localizacion,
.auction-card.style-5 .auction-card-content p.deposito,
.auction-card.style-5 .auction-card-content-pendiente p.mayor_puja,
.auction-card.style-5 .auction-card-content p.mayor_puja {
  color: #767676;
}

/* ============================================================================
   TARJETA DE SUBASTA — LA MAYOR PUJA COMO PROTAGONISTA (2026-09-08)
   ============================================================================

   El depósito sale de la tarjeta —ya no lo emite AuctionCardRenderer— y la
   mayor puja pasa a ser el dato principal. */

/* --- Rejilla --------------------------------------------------------------
   Las dos columnas del pie se estiran al mismo alto y cada una reparte su
   contenido con `space-between`: cifras del contador arriba y sus rótulos
   abajo a la izquierda; «Mayor puja» arriba y el importe abajo a la derecha.

   Así queda cuadrado sin números mágicos: si mañana cambia el tamaño del
   contador o del importe, los cuatro extremos siguen alineándose solos. */

.vs-rejilla-tarjetas:not(.fila) .vs-card-meta {
  align-items: stretch;
}

.vs-rejilla-tarjetas:not(.fila) .auction-card .countdown-timer,
.vs-rejilla-tarjetas:not(.fila) .auction-card .countdown-timer ul {
  height: 100%;
  align-items: stretch;
}

/* Solo las celdas con cifra: los `li.colon` son los dos puntos y no se tocan. */
.vs-rejilla-tarjetas:not(.fila) .auction-card .countdown-timer ul li.times {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vs-rejilla-tarjetas:not(.fila) .auction-card.style-5 .auction-card-content p.mayor_puja {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 13px;
}

.vs-rejilla-tarjetas:not(.fila) .auction-card.style-5 .auction-card-content p.mayor_puja span {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
}

/* --- Lista, de 768 en adelante --------------------------------------------
   La fila medía 158 px y la altura no la marcaba la miniatura (90) sino la
   columna de texto (120): título, píldora de estado y meta, cada uno en su
   línea.

   Se mantiene el apilado que pide el diseño —el título arriba— pero la
   píldora baja a compartir línea con el contador y el importe, donde no
   cuesta altura porque esa línea ya mide 36 px. Con eso y una miniatura de
   76 px la fila queda en 106: un 33% menos, y se ven seis subastas donde
   antes cabían cuatro.

   No se toca el DOM: el título ocupa la primera línea con `flex: 0 0 100%` y
   los otros dos hijos caen solos a la segunda. */

@media (min-width: 768px) {
  .fila .auction-card {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .fila .auction-card-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
  }

  .fila .auction-card-content h3,
  .fila .auction-card-content h6 {
    flex: 0 0 100%;
  }

  .fila .vs-list-estado {
    flex: 0 0 auto;
  }

  .fila .vs-card-meta {
    flex: 1;
    width: auto;
  }

  .fila .auction-card-img-wrap,
  .fila .auction-card-img-wrap .card-img,
  .fila .auction-card-img-wrap-noimg {
    height: 76px;
    min-height: 76px;
  }

  .fila .vs-card-meta-deposit p.mayor_puja span {
    font-size: 18px;
    line-height: 22px;
  }
}

/* ============================================================================
   PORTADA — COMPRAR Y VENDER (2026-09-16)
   ============================================================================

   Dos franjas a todo el ancho hacia /como-participar y /vender, como las de
   «Confianza» y el pie. Marcado en includes/bloques/portada_comprar_vender.inc.

   - Comprar sobre marino con acentos dorados; vender sobre arena clara con
     texto marino. La segunda va en espejo (visual a la izquierda) para que
     las dos no se lean como la misma franja repetida.
   - La «V» del isotipo en trazo, grande y saliendo por el borde: el mismo
     recurso geométrico que la cabecera de la portada. Se desvanece hacia el
     centro para no cruzar el contenido. */

.vs-cv {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0;
}

.vs-cv.comprar {
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(209, 187, 146, .12) 0%, rgba(209, 187, 146, 0) 60%),
    linear-gradient(160deg, #1b2150 0%, #121636 65%);
  color: #ffffff;
}

.vs-cv.vender {
  background:
    radial-gradient(60% 110% at 100% 100%, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 60%),
    #f4eee3;
  color: #282d57;
}

.vs-cv .container {
  position: relative;
}

/* --- La V de fondo --------------------------------------------------------- */

.vs-cv-isotipo {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 640px;
  height: auto;
  fill: none;
  stroke-width: 1.6;
  pointer-events: none;
}

.vs-cv.comprar .vs-cv-isotipo {
  right: -150px;
  transform: translateY(-50%);
  stroke: rgba(209, 187, 146, .24);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* En espejo: sale por la izquierda. */
.vs-cv.vender .vs-cv-isotipo {
  left: -150px;
  transform: translateY(-50%) scaleX(-1);
  stroke: rgba(40, 45, 87, .10);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

/* --- Columna de texto ------------------------------------------------------ */

.vs-cv-texto-col {
  max-width: 540px;
}

.vs-cv.vender .vs-cv-texto-col {
  margin-left: auto;
}

.vs-cv-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vs-cv-rotulo::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.vs-cv.comprar .vs-cv-rotulo {
  color: #d1bb92;
}

.vs-cv.vender .vs-cv-rotulo {
  color: #7a6440;
}

/* Prefijo .vs-cv: el tema pone tamaño y color a todo h2 y h3. */
.vs-cv .vs-cv-titulo {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: inherit;
}

.vs-cv .vs-cv-texto {
  margin: 0 0 28px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
}

.vs-cv.comprar .vs-cv-texto {
  color: rgba(255, 255, 255, .74);
}

.vs-cv.vender .vs-cv-texto {
  color: #4a4f6e;
}

.vs-cv .vs-cv-nota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 36px;
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.vs-cv-nota svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #d1bb92;
}

.vs-cv-ventajas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.vs-cv-ventajas li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #282d57;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

.vs-cv-ventajas svg {
  flex: 0 0 auto;
  color: #a8894f;
}

/* --- Baldosas: pasos (comprar) y cifras (vender) ---------------------------- */

.vs-cv-baldosas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-cv-baldosa {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-radius: 16px;
  transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}

.vs-cv-baldosa:hover {
  transform: translateY(-3px);
}

.vs-cv.comprar .vs-cv-baldosa {
  border: 1px solid rgba(255, 255, 255, .10);
}

.vs-cv.comprar .vs-cv-baldosa:hover {
  border-color: rgba(209, 187, 146, .35);
}

.vs-cv.vender .vs-cv-baldosa {
  border: 1px solid rgba(40, 45, 87, .06);
  background: #ffffff;
  box-shadow: 0 18px 40px -26px rgba(120, 96, 52, .35);
}

.vs-cv-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(209, 187, 146, .55);
  border-radius: 50%;
  color: #d1bb92;
  font-size: 15px;
  font-weight: 600;
}

.vs-cv .vs-cv-baldosa h3 {
  margin: 22px 0 8px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.vs-cv .vs-cv-baldosa p {
  margin: 0;
  color: rgba(255, 255, 255, .64);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}

.vs-cv-baldosa dt {
  margin-top: auto;
  color: #282d57;
  font-size: clamp(30px, 2.8vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.vs-cv-baldosa dd {
  margin: 10px 0 0;
  color: #5E5E5E;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* Opacas a propósito: la «V» de fondo pasa POR DETRÁS y no cruza el texto. */
.vs-cv.comprar .vs-cv-baldosa {
  background: #1a1f4a;
}

.vs-cv.comprar .vs-cv-baldosa:hover {
  background: #20265a;
}

.vs-cv.vender .vs-cv-baldosa {
  min-height: 176px;
}

/* Filete dorado sobre cada cifra: la única nota de color de las baldosas. */
.vs-cv-baldosa dt::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: #d1bb92;
}

/* --- Acciones -------------------------------------------------------------- */

.vs-cv-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.vs-cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.vs-cv-btn.dorado,
.vs-cv-btn.dorado:visited {
  background: #d1bb92;
  color: #121636;
}

.vs-cv-btn.dorado:hover,
.vs-cv-btn.dorado:focus-visible {
  background: #e2cfa9;
  color: #121636;
}

.vs-cv-btn.marino,
.vs-cv-btn.marino:visited {
  background: #121636;
  color: #ffffff;
}

.vs-cv-btn.marino:hover,
.vs-cv-btn.marino:focus-visible {
  background: #282d57;
  color: #ffffff;
}

.vs-cv-flecha {
  transition: transform .25s ease;
}

.vs-cv-btn:hover .vs-cv-flecha {
  transform: translateX(4px);
}

.vs-cv-btn:focus-visible,
.vs-cv-enlace:focus-visible {
  outline: 2px solid #d1bb92;
  outline-offset: 3px;
}

.vs-cv-enlace {
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.vs-cv.comprar .vs-cv-enlace,
.vs-cv.comprar .vs-cv-enlace:visited,
.vs-cv.comprar .vs-cv-enlace:hover {
  color: #ffffff;
}

.vs-cv.vender .vs-cv-enlace,
.vs-cv.vender .vs-cv-enlace:visited,
.vs-cv.vender .vs-cv-enlace:hover {
  color: #282d57;
}

.vs-cv-enlace:hover {
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vs-cv-baldosa,
  .vs-cv-flecha {
    transition: none;
  }

  .vs-cv-baldosa:hover,
  .vs-cv-btn:hover .vs-cv-flecha {
    transform: none;
  }
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 991.98px) {
  .vs-cv {
    padding: 80px 0;
  }

  .vs-cv-texto-col,
  .vs-cv.vender .vs-cv-texto-col {
    max-width: 640px;
    margin-left: 0;
  }

  .vs-cv-isotipo {
    width: 460px;
    top: 0;
  }

  .vs-cv.comprar .vs-cv-isotipo {
    right: -170px;
    transform: none;
  }

  .vs-cv.vender .vs-cv-isotipo {
    left: auto;
    right: -170px;
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .vs-cv {
    padding: 64px 0;
  }

  .vs-cv-isotipo {
    width: 300px;
  }

  .vs-cv .vs-cv-texto {
    font-size: 16px;
  }

  .vs-cv-baldosas {
    gap: 14px;
  }

  .vs-cv-baldosa,
  .vs-cv.vender .vs-cv-baldosa {
    min-height: 0;
    padding: 22px 18px;
  }

  /* Pasos en una columna, número a la izquierda y texto a la derecha: a dos
     columnas, en 170 px cada frase se partía en cuatro líneas. */
  .vs-cv.comprar .vs-cv-baldosas {
    grid-template-columns: 1fr;
  }

  .vs-cv.comprar .vs-cv-baldosa {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 16px;
    align-items: start;
  }

  .vs-cv.comprar .vs-cv-num {
    grid-row: span 2;
  }

  .vs-cv .vs-cv-baldosa h3 {
    margin: 7px 0 6px;
    font-size: 17px;
  }

  .vs-cv-baldosa dt {
    font-size: 28px;
  }

  .vs-cv-baldosa dt::before {
    margin-bottom: 16px;
  }

  .vs-cv-baldosa dd {
    font-size: 13px;
  }

  .vs-cv-btn {
    width: 100%;
    justify-content: center;
  }

  .vs-cv-acciones {
    justify-content: center;
  }
}

/* ============================================================================
   MIS COMPRAS — ENTREGA Y PAGO (2026-10-03)
   ============================================================================

   Compra de convenio en plazo (modulos/vsubasta/VS_usuario-compras.php).
   Dos tarjetas de entrega con el mismo lenguaje que las de «Mis intereses»
   (borde y marca en marino al elegir; el radio real va dentro, oculto) y un
   resumen con el total y un único botón: guardar la entrega y pagar.

   - El precio del envío va en la propia tarjeta y en el resumen, en grande:
     antes salía en una línea pequeña bajo el formulario y no se veía.
   - La tarjeta de envío sin peso o sin servicio sale apagada con el motivo,
     en vez de dejar elegirla y fallar al guardar. */

.vs-compra-plazo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff6e0;
  color: #6b4e00;
  font-size: 15px;
}

.vs-entrega-titulo {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 500;
}

.vs-entrega-opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vs-entrega-op {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px 48px 16px 16px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.vs-entrega-op:hover {
  border-color: #c9cbd6;
  box-shadow: 0 4px 14px rgba(18, 22, 54, .08);
}

.vs-entrega-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vs-entrega-op:has(.vs-entrega-radio:checked) {
  border-color: #121636;
  background: #f4f5f9;
  box-shadow: inset 0 0 0 1px #121636;
}

.vs-entrega-op:has(.vs-entrega-radio:focus-visible) {
  outline: 2px solid #121636;
  outline-offset: 2px;
}

.vs-entrega-op.is-off {
  cursor: not-allowed;
  background: #fafafa;
  box-shadow: none;
}

.vs-entrega-op.is-off .vs-entrega-icono,
.vs-entrega-op.is-off .vs-entrega-nombre {
  opacity: .55;
}

.vs-entrega-icono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #121636;
  font-size: 20px;
}

.vs-entrega-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vs-entrega-nombre {
  font-size: 16px;
  font-weight: 500;
  color: #212529;
}

.vs-entrega-precio {
  font-size: 20px;
  font-weight: 600;
  color: #121636;
}

.vs-entrega-detalle {
  font-size: 14px;
  color: #6c757d;
  line-height: 1.35;
}

.vs-entrega-marca {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #c9cbd6;
  color: transparent;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}

.vs-entrega-op:has(.vs-entrega-radio:checked) .vs-entrega-marca {
  background: #121636;
  border-color: #121636;
  color: #fff;
}

.vs-entrega-nota {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f7f7f9;
  font-size: 14px;
  color: #495057;
}

.vs-envio-form {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
}

.vs-envio-form-titulo {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
}

.vs-envio-estado:not(:empty) {
  margin-top: 12px;
  font-size: 14px;
}

.vs-envio-estado.is-error {
  color: #b42318;
}

.vs-resumen {
  padding: 20px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  background: #fff;
}

.vs-resumen-titulo {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
}

.vs-resumen-fila,
.vs-resumen-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.vs-resumen-fila {
  font-size: 15px;
  color: #495057;
}

.vs-resumen-fila span:last-child {
  white-space: nowrap;
}

.vs-resumen-total {
  margin: 8px 0 16px;
  padding-top: 12px;
  border-top: 1px solid #e3e3e3;
  font-size: 22px;
  font-weight: 600;
  color: #121636;
}

/* Desactivado se distinguía mal del activo (el verde a 65 % de opacidad). */
.vs-resumen .vs-pagar:disabled {
  background: #c9cbd6;
  border-color: #c9cbd6;
  color: #fff;
  opacity: 1;
}

.vs-resumen-ayuda {
  margin-top: 10px;
  font-size: 14px;
  color: #6b4e00;
}

.vs-resumen-seguro {
  margin-top: 10px;
  font-size: 13px;
  color: #6c757d;
}

.vs-msg:not(:empty) {
  margin-top: 10px;
  font-size: 14px;
  color: #146c43;
}

.vs-msg.is-error {
  color: #b42318;
}

@media (min-width: 992px) {
  .vs-resumen {
    position: sticky;
    top: 110px;
  }
}

@media (max-width: 575.98px) {
  .vs-entrega-opciones {
    grid-template-columns: 1fr;
  }
}