/* ==============================================
   Botón "Ingresar con Google"
   Aplica a: Login.cshtml
   ============================================== */

.btn-google {
    background-color: #fff;
    color: #444;
    border: 1px solid #ddd;
    font-weight: 500;
}

.btn-google:hover,
.btn-google:focus {
    background-color: #f7f7f7;
    color: #222;
    border-color: #bbb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ==============================================
   Estilos para tarjetas de publicaciones
   Aplica a: _gridCardPublication.cshtml
             _listCardPublication.cshtml
   ============================================== */

/**
 * Color de texto para detalles de publicación (año, km, estado).
 * Reemplaza text-muted (#6c757d) donde el gris se pierde en el fondo.
 */
.card-publication-detail-text {
    color: #1b2532;
}

/**
 * Capitaliza la primera letra de cada palabra en el título
 * de la tarjeta (marca y modelo del vehículo).
 */
.card-publication-title {
    text-transform: capitalize;
}

/**
 * Estilo del badge de certificación Carfax en las tarjetas.
 * Elimina el fondo negro circular y deja el logo SVG como
 * único elemento visual.
 */
.carfax-badge {
    display: block;
    width: 42px;
    height: 42px;
    text-align: center;
    cursor: pointer;
}

.carfax-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==============================================
   Vista Lista — tarjeta de publicación
   ============================================== */

.list-vehicle-card {
    border-radius: 12px;
}

.list-vehicle-image-container {
    height: 220px;
}

.list-vehicle-img {
    width: 130%;
    object-fit: cover;
    object-position: center right;
}

/* ==============================================
   Filtro de colores — efecto burbuja/degradado
   ============================================== */

.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* burbuja: reflejo blanco en esquina superior-izquierda sobre el color base */
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 55%), var(--swatch-color);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-swatch:hover {
    transform: scale(1.2);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.25), 0 3px 8px rgba(0,0,0,0.3);
}

.color-swatch--selected {
    outline: none;
    transform: scale(1.15);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.25), 0 0 0 2px #fff, 0 0 0 4px #555;
}

/* ==============================================
   Filtro de certificaciones — estado seleccionado
   ============================================== */

.cert-badge {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.cert-badge--selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #28a745 !important;
}