/* ==========================================================================
   Vectiss Rental – Catálogo de Vehículos
   Premium design · Airbnb/Booking.com quality
   Selectores con body .vr-scope / body .vr-sv-main / body .vr-destacados-wrap
   para sobrescribir Elementor sin romper el resto del sitio.
   ========================================================================== */

/* ── Variables por defecto (fallback; la hoja inline de PHP las sobreescribe) */
:root {
	--vr-primario:        #2563eb;
	--vr-primario-hover:  #1d4ed8;
	--vr-primario-texto:  #ffffff;
	--vr-primario-alfa:   rgba(37, 99, 235, .12);

	--vr-fondo:           #f8fafc;
	--vr-fondo-card:      #ffffff;
	--vr-borde:           #e2e8f0;
	--vr-texto:           #0f172a;
	--vr-texto-suave:     #64748b;
	--vr-texto-leve:      #94a3b8;

	--vr-sombra:          0 2px 8px  rgba(0, 0, 0, .08);
	--vr-sombra-md:       0 8px 24px rgba(0, 0, 0, .12);
	--vr-sombra-lg:       0 16px 40px rgba(0, 0, 0, .16);

	--vr-fuente:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

	/* internos */
	--vr-exito:  #16a34a;
	--vr-error:  #dc2626;
}

/* ── Modo oscuro */
[data-vr-theme="dark"] {
	--vr-fondo:       #0f172a;
	--vr-fondo-card:  #1e293b;
	--vr-borde:       #334155;
	--vr-texto:       #f1f5f9;
	--vr-texto-suave: #94a3b8;
	--vr-texto-leve:  #64748b;
	--vr-sombra:      0 2px 8px  rgba(0, 0, 0, .30);
	--vr-sombra-md:   0 8px 24px rgba(0, 0, 0, .40);
	--vr-sombra-lg:   0 16px 40px rgba(0, 0, 0, .50);
}

/* ==========================================================================
   BOX-SIZING global dentro del scope del plugin
   ========================================================================== */
body .vr-scope *,
body .vr-scope *::before,
body .vr-scope *::after,
body .vr-destacados-wrap *,
body .vr-destacados-wrap *::before,
body .vr-destacados-wrap *::after {
	box-sizing: border-box !important;
}

/* ==========================================================================
   BOTONES — alta especificidad para sobrescribir Elementor/themes
   ========================================================================== */
body .vr-scope .vectiss-btn,
body .vr-destacados-wrap .vectiss-btn,
body .vr-sv-main .vectiss-btn,
body .vectiss-btn {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             7px !important;
	padding:         11px 20px !important;
	font-size:       14px !important;
	font-weight:     600 !important;
	border-radius:   10px !important;
	border:          none !important;
	cursor:          pointer !important;
	text-decoration: none !important;
	transition:      background .18s ease, transform .12s ease,
	                 box-shadow .18s ease, opacity .18s ease !important;
	font-family:     var(--vr-fuente) !important;
	line-height:     1 !important;
	white-space:     nowrap !important;
	box-sizing:      border-box !important;
	letter-spacing:  0 !important;
	vertical-align:  middle !important;
}

body .vr-scope .vectiss-btn:focus-visible,
body .vr-destacados-wrap .vectiss-btn:focus-visible,
body .vr-sv-main .vectiss-btn:focus-visible,
body .vectiss-btn:focus-visible {
	outline:        2px solid var(--vr-primario) !important;
	outline-offset: 2px !important;
}

body .vr-scope .vectiss-btn:active,
body .vr-destacados-wrap .vectiss-btn:active,
body .vr-sv-main .vectiss-btn:active,
body .vectiss-btn:active {
	transform: scale(.97) !important;
}

/* Botón primario */
body .vr-scope .vectiss-btn-primario,
body .vr-destacados-wrap .vectiss-btn-primario,
body .vr-sv-main .vectiss-btn-primario,
body .vectiss-btn-primario {
	background:  var(--vr-primario) !important;
	color:       var(--vr-primario-texto) !important;
	box-shadow:  0 2px 8px var(--vr-primario-alfa) !important;
	border:      none !important;
}
body .vr-scope .vectiss-btn-primario:hover,
body .vr-destacados-wrap .vectiss-btn-primario:hover,
body .vr-sv-main .vectiss-btn-primario:hover,
body .vectiss-btn-primario:hover {
	background:      var(--vr-primario-hover) !important;
	color:           var(--vr-primario-texto) !important;
	box-shadow:      0 4px 16px var(--vr-primario-alfa) !important;
	text-decoration: none !important;
	transform:       translateY(-1px) !important;
}

/* Botón secundario */
body .vr-scope .vectiss-btn-secundario,
body .vr-destacados-wrap .vectiss-btn-secundario,
body .vr-sv-main .vectiss-btn-secundario,
body .vectiss-btn-secundario {
	background:  transparent !important;
	color:       var(--vr-primario) !important;
	border:      1.5px solid var(--vr-primario) !important;
	box-shadow:  none !important;
}
body .vr-scope .vectiss-btn-secundario:hover,
body .vr-destacados-wrap .vectiss-btn-secundario:hover,
body .vr-sv-main .vectiss-btn-secundario:hover,
body .vectiss-btn-secundario:hover {
	background:      var(--vr-primario-alfa) !important;
	color:           var(--vr-primario) !important;
	text-decoration: none !important;
}

/* Tamaños adicionales */
body .vectiss-btn-grande,
body .vr-scope .vectiss-btn-grande,
body .vr-destacados-wrap .vectiss-btn-grande,
body .vr-sv-main .vectiss-btn-grande {
	padding:   14px 28px !important;
	font-size: 15px !important;
}
body .vectiss-btn-sm,
body .vr-scope .vectiss-btn-sm,
body .vr-destacados-wrap .vectiss-btn-sm,
body .vr-sv-main .vectiss-btn-sm {
	padding:   8px 14px !important;
	font-size: 13px !important;
}

/* ==========================================================================
   GRID DE VEHÍCULOS
   ========================================================================== */
body .vr-scope .vectiss-grid-vehiculos,
body .vr-destacados-wrap .vectiss-grid-vehiculos,
body .vectiss-grid-vehiculos {
	display:               grid !important;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
	gap:                   22px !important;
	list-style:            none !important;
	padding:               0 !important;
	margin:                0 !important;
}

/* ==========================================================================
   TARJETA DE VEHÍCULO — Diseño premium
   ========================================================================== */
body .vr-scope .vectiss-tarjeta-vehiculo,
body .vr-destacados-wrap .vectiss-tarjeta-vehiculo,
body .vectiss-tarjeta-vehiculo {
	background:     var(--vr-fondo-card) !important;
	border-radius:  18px !important;
	overflow:       hidden !important;
	display:        flex !important;
	flex-direction: column !important;

	/* Solo borde superior de acento; el resto por box-shadow */
	border-top:    4px solid var(--vr-primario) !important;
	border-right:  none !important;
	border-bottom: none !important;
	border-left:   none !important;

	box-shadow:      var(--vr-sombra) !important;
	transition:      transform .24s cubic-bezier(.4, 0, .2, 1),
	                 box-shadow .24s cubic-bezier(.4, 0, .2, 1) !important;
	font-family:     var(--vr-fuente) !important;
	text-decoration: none !important;
	color:           inherit !important;
	position:        relative !important;
}

body .vr-scope .vectiss-tarjeta-vehiculo:hover,
body .vr-destacados-wrap .vectiss-tarjeta-vehiculo:hover,
body .vectiss-tarjeta-vehiculo:hover {
	transform:         translateY(-6px) !important;
	box-shadow:        var(--vr-sombra-lg) !important;
	border-top-color:  var(--vr-primario) !important;
	text-decoration:   none !important;
}

/* ==========================================================================
   ÁREA DE FOTO
   ========================================================================== */
body .vr-scope .vectiss-tarjeta-foto,
body .vr-destacados-wrap .vectiss-tarjeta-foto,
body .vectiss-tarjeta-foto {
	position:   relative !important;
	height:     240px !important;
	overflow:   hidden !important;
	background: var(--vr-fondo) !important;
	flex-shrink: 0 !important;
}

/* Gradiente overlay en la parte inferior de la foto */
body .vr-scope .vectiss-tarjeta-foto::after,
body .vr-destacados-wrap .vectiss-tarjeta-foto::after,
body .vectiss-tarjeta-foto::after {
	content:  '' !important;
	position: absolute !important;
	inset:    0 !important;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .55) 0%,
		transparent 55%
	) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

body .vr-scope .vectiss-tarjeta-foto img,
body .vr-destacados-wrap .vectiss-tarjeta-foto img,
body .vectiss-tarjeta-foto img {
	width:       100% !important;
	height:      100% !important;
	object-fit:  cover !important;
	display:     block !important;
	transition:  transform .42s cubic-bezier(.4, 0, .2, 1) !important;
}

body .vr-scope .vectiss-tarjeta-vehiculo:hover .vectiss-tarjeta-foto img,
body .vr-destacados-wrap .vectiss-tarjeta-vehiculo:hover .vectiss-tarjeta-foto img,
body .vectiss-tarjeta-vehiculo:hover .vectiss-tarjeta-foto img {
	transform: scale(1.07) !important;
}

/* Placeholder sin imagen */
body .vr-scope .vectiss-foto-placeholder,
body .vr-destacados-wrap .vectiss-foto-placeholder,
body .vectiss-foto-placeholder {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	height:          100% !important;
	color:           var(--vr-texto-leve) !important;
	background:      var(--vr-fondo-card) !important;
}

/* ==========================================================================
   BADGE DE CATEGORÍA — top-left, estilo glassmorphism oscuro
   ========================================================================== */
body .vr-scope .vectiss-badge-categoria,
body .vr-destacados-wrap .vectiss-badge-categoria,
body .vectiss-badge-categoria {
	position:           absolute !important;
	top:                12px !important;
	left:               12px !important;
	z-index:            2 !important;
	background:         rgba(15, 23, 42, .75) !important;
	color:              #ffffff !important;
	font-size:          11px !important;
	font-weight:        700 !important;
	letter-spacing:     .06em !important;
	text-transform:     uppercase !important;
	padding:            4px 11px !important;
	border-radius:      20px !important;
	backdrop-filter:    blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	line-height:        1.6 !important;
}

/* ==========================================================================
   BADGE DE PRECIO — bottom-right, color primario sólido
   ========================================================================== */
body .vr-scope .vectiss-precio-badge,
body .vr-destacados-wrap .vectiss-precio-badge,
body .vectiss-precio-badge {
	position:           absolute !important;
	bottom:             12px !important;
	right:              12px !important;
	z-index:            2 !important;
	background:         var(--vr-primario) !important;
	color:              var(--vr-primario-texto) !important;
	font-size:          14px !important;
	font-weight:        800 !important;
	padding:            6px 13px !important;
	border-radius:      20px !important;
	line-height:        1.4 !important;
	white-space:        nowrap !important;
}

body .vr-scope .vectiss-precio-badge span,
body .vr-destacados-wrap .vectiss-precio-badge span,
body .vectiss-precio-badge span {
	font-size:   11px !important;
	font-weight: 400 !important;
	opacity:     .85 !important;
}

/* ==========================================================================
   CUERPO DE LA TARJETA
   ========================================================================== */
body .vr-scope .vectiss-tarjeta-cuerpo,
body .vr-destacados-wrap .vectiss-tarjeta-cuerpo,
body .vectiss-tarjeta-cuerpo {
	padding:        20px 20px 16px !important;
	display:        flex !important;
	flex-direction: column !important;
	gap:            12px !important;
	flex:           1 !important;
}

/* Nombre del vehículo */
body .vr-scope .vectiss-tarjeta-nombre,
body .vr-destacados-wrap .vectiss-tarjeta-nombre,
body .vectiss-tarjeta-nombre {
	font-size:   17px !important;
	font-weight: 700 !important;
	margin:      0 !important;
	color:       var(--vr-texto) !important;
	line-height: 1.25 !important;
}

/* ==========================================================================
   SPECS CHIPS — pills horizontales
   ========================================================================== */
body .vr-scope .vectiss-tarjeta-specs,
body .vr-destacados-wrap .vectiss-tarjeta-specs,
body .vectiss-tarjeta-specs {
	list-style: none !important;
	padding:    0 !important;
	margin:     0 !important;
	display:    flex !important;
	flex-wrap:  wrap !important;
	gap:        6px !important;
}

body .vr-scope .vectiss-tarjeta-specs li,
body .vr-destacados-wrap .vectiss-tarjeta-specs li,
body .vectiss-tarjeta-specs li {
	display:       inline-flex !important;
	align-items:   center !important;
	gap:           4px !important;
	font-size:     12px !important;
	font-weight:   500 !important;
	color:         var(--vr-texto-suave) !important;
	background:    var(--vr-fondo) !important;
	border:        1px solid var(--vr-borde) !important;
	padding:       5px 11px !important;
	border-radius: 20px !important;
	line-height:   1.4 !important;
	white-space:   nowrap !important;
}

/* ==========================================================================
   ACCIONES — grid 2 columnas
   ========================================================================== */
body .vr-scope .vectiss-tarjeta-acciones,
body .vr-destacados-wrap .vectiss-tarjeta-acciones,
body .vectiss-tarjeta-acciones {
	display:               grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap:                   8px !important;
	margin-top:            auto !important;
}

body .vr-scope .vectiss-tarjeta-acciones .vectiss-btn,
body .vr-destacados-wrap .vectiss-tarjeta-acciones .vectiss-btn,
body .vectiss-tarjeta-acciones .vectiss-btn {
	width:     100% !important;
	font-size: 13px !important;
	padding:   10px 8px !important;
}

/* ==========================================================================
   SKELETON LOADER
   ========================================================================== */
@keyframes vr-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position:  600px 0; }
}

body .vr-card-skeleton,
body .vr-scope .vr-card-skeleton,
body .vr-destacados-wrap .vr-card-skeleton {
	border-radius:  18px !important;
	overflow:       hidden !important;
	background:     var(--vr-fondo-card) !important;
	border-top:     4px solid var(--vr-borde) !important;
	border-right:   none !important;
	border-bottom:  none !important;
	border-left:    none !important;
	box-shadow:     var(--vr-sombra) !important;
}

body .vr-card-skeleton .vr-skeleton-img,
body .vr-scope .vr-card-skeleton .vr-skeleton-img,
body .vr-destacados-wrap .vr-card-skeleton .vr-skeleton-img {
	height: 240px !important;
}

body .vr-skeleton-block,
body .vr-scope .vr-skeleton-block,
body .vr-destacados-wrap .vr-skeleton-block {
	background: linear-gradient(
		90deg,
		var(--vr-fondo)      0%,
		var(--vr-borde)     50%,
		var(--vr-fondo)    100%
	) !important;
	background-size: 1200px 100% !important;
	animation: vr-shimmer 1.6s infinite linear !important;
	border-radius: 6px !important;
}

/* ==========================================================================
   UTILITARIOS
   ========================================================================== */
@keyframes vr-girar {
	to { transform: rotate(360deg); }
}

body .vr-svg,
body .vr-scope .vr-svg,
body .vr-destacados-wrap .vr-svg {
	vertical-align: middle !important;
}

/* Estado disponible / no disponible en tarjeta */
body .vr-scope .vr-disponibilidad,
body .vr-destacados-wrap .vr-disponibilidad,
body .vr-disponibilidad {
	font-size:   12px !important;
	font-weight: 600 !important;
	display:     inline-flex !important;
	align-items: center !important;
	gap:         5px !important;
}

body .vr-scope .vr-disponibilidad--ok,
body .vr-destacados-wrap .vr-disponibilidad--ok,
body .vr-disponibilidad--ok { color: var(--vr-exito) !important; }

body .vr-scope .vr-disponibilidad--no,
body .vr-destacados-wrap .vr-disponibilidad--no,
body .vr-disponibilidad--no { color: var(--vr-error) !important; }

/* Sin resultados */
body .vr-scope .vr-sin-resultados,
body .vr-destacados-wrap .vr-sin-resultados,
body .vr-sin-resultados {
	grid-column:  1 / -1 !important;
	text-align:   center !important;
	padding:      60px 24px !important;
	color:        var(--vr-texto-suave) !important;
	font-size:    15px !important;
	font-family:  var(--vr-fuente) !important;
}