/* ============================================================================
   MEJORAS CUPONWEB - Estilos Adicionales
   Hoja de estilos que complementa a styles_v10.css (cargada después de ella
   en index.html/curso.html). Soporta las funcionalidades JS de
   enhancements.js: modo compacto, favoritos, filtros guardados, resaltado
   de búsqueda.
   ============================================================================ */

/* === Modo Compacto ===
   Reglas activadas cuando enhancements.js agrega la clase .compact-mode al
   grid de resultados (toggleCompactMode). Todas usan !important porque
   sobrescriben los tamaños/paddings "normales" de las mismas reglas base
   definidas en styles_v10.css (mayor especificidad no alcanza sin ellas,
   ya que esas reglas base no usan !important y este archivo se carga
   después pero apunta a las mismas clases con selectores igual de
   específicos). */
.compact-mode .course-card {
    padding: 0.75rem !important;
}

.compact-mode .course-image {
    height: 100px !important;
}

.compact-mode .course-title {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

.compact-mode .course-meta {
    font-size: 0.75rem !important;
}

.compact-mode .badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
}

.compact-mode .btn {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.8rem !important;
}

.compact-mode .price-tag {
    font-size: 0.9rem !important;
    padding: 0.4rem 0.8rem !important;
}

/* === Botón de Favorito ===
   Ícono de corazón/estrella sobre cada tarjeta de curso. El estado
   ".active" (curso ya marcado como favorito) se pinta en ámbar y se agranda
   levemente; al pasar el mouse se agranda más, sea o no favorito. */
.favorite-btn {
    transition: all 0.3s ease;
}

.favorite-btn.active {
    color: #fbbf24 !important;
    transform: scale(1.1);
}

.favorite-btn:hover {
    transform: scale(1.2);
}

/* === Contador de Favoritos ===
   Badge numérico rojo que se muestra sobre el botón "Ver Favoritos"
   (ver updateFavoriteCount() en enhancements.js, que además decide si se
   muestra u oculta según la cantidad). */
.favorite-count {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.3rem;
    font-weight: 700;
}

/* === Filtros Guardados: contenedor ===
   Lista scrolleable de filtros guardados (renderSavedFilters() en
   enhancements.js), limitada en altura para no empujar el resto del layout. */
#savedFiltersContainer {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
}

/* === Resaltado de búsqueda ===
   Estilo del <mark> que envuelve las coincidencias de texto buscado
   (ver highlightText() en enhancements.js). */
mark {
    background: #fbbf24;
    color: #000;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* === Animación de "latido" para favoritos ===
   Usada al marcar un curso como favorito (clase .adding aplicada
   momentáneamente sobre .favorite-btn). Tres frames en vez de un simple
   from/to para dar el efecto de "doble pulso" tipo corazón. */
@keyframes heartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(1.1);
    }
}

.favorite-btn.adding {
    animation: heartBeat 0.5s ease;
}

/* === Botones de mejoras ===
   Estilo genérico para los botones de la barra de "mejoras" (Favoritos,
   Modo Compacto, Guardar Filtro, etc.), con estado ".active" resaltado con
   el color de acento cuando la función correspondiente está encendida. */
.enhancement-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.enhancement-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.enhancement-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

/* === Modal de filtros guardados ===
   Contenedor tipo tarjeta para el panel desplegable de filtros guardados. */
.saved-filters-modal {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

/* === Responsive: modo compacto en pantallas chicas ===
   Breakpoint de 768px (tablet/móvil) reduce aún más el padding y la altura
   de imagen del modo compacto respecto de los valores de escritorio de
   arriba. */
@media (max-width: 768px) {
    .compact-mode .course-card {
        padding: 0.5rem !important;
    }

    .compact-mode .course-image {
        height: 80px !important;
    }
}