/* ================================================
   FAVORITOS - CSS para corazón de favoritos
   ================================================ */

/* Corazón de favoritos - funciona con div o button */
.fav-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    font-size: 1.2rem;
    color: #64748b;  /* Gris por defecto */
    transition: all 0.2s ease;
    z-index: 10;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);  /* Para que se vea sobre thumbnails */
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    border: none;
    padding: 0;
}

/* Cuando está dentro de .prime-actions o .poster-actions, mantener estilo de botón circular */
.prime-actions .fav-heart,
.poster-actions .fav-heart {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    /* Mantener el estilo circular como los demás botones */
    background: rgba(255, 255, 255, 0.1) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 4px !important;
    font-size: 1rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.prime-actions .fav-heart:hover,
.poster-actions .fav-heart:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Para poster-btn-circle, heredar su estilo */
.poster-btn-circle.fav-heart {
    background: rgba(255, 255, 255, 0.1) !important;
    width: 44px !important;
    height: 44px !important;
}

/* Corazón circular exclusivo para primera fila de prime (posters) */
.poster-fav-heart {
    border-radius: 50% !important;
}

/* Corazón en carousel (trends_carousel.html) */
.carousel-actions .fav-heart,
.carousel-fav-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    background: rgba(255, 255, 255, 0.1) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 0.95rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    color: #94a3b8;
}

.carousel-actions .fav-heart:hover,
.carousel-fav-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #f8fafc;
}

.fav-heart:hover {
    color: #f8fafc;  /* Blanco brillante en hover */
    transform: scale(1.15);
    background: rgba(0, 0, 0, 0.6);
}

.prime-actions .fav-heart:hover,
.poster-actions .fav-heart:hover {
    background: transparent;
}

.fav-heart.favorited {
    color: #ef4444 !important;  /* Rojo cuando está marcado */
}

.fav-heart.favorited:hover {
    color: #dc2626 !important;  /* Rojo más oscuro en hover */
}

/* Cambiar icono a sólido cuando está favorito */
.fav-heart.favorited i::before {
    content: "\f004";  /* fa-heart solid */
    font-weight: 900;
}

/* Estilos específicos para trends - asegurar visibilidad */
.thumb-area .fav-heart,
.thumb-media .fav-heart,
.prime-thumb .fav-heart {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    top: auto !important;
    right: auto !important;
    z-index: 100 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Admin: mover corazón abajo para no solapar con checkbox de selección */
body.is-admin .thumb-container .fav-heart {
    top: 48px;
}

/* Animación de pulso al añadir */
@keyframes favPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.fav-heart.pulse {
    animation: favPulse 0.3s ease;
}

/* Tooltip de favoritos */
.fav-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
}

@keyframes favFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes favFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ================================================
   PÁGINA DE FAVORITOS - Estilos
   ================================================ */

.favoritos-page {
    min-height: calc(100vh - 60px);
    padding: 2rem;
}

.favoritos-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.favoritos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.favoritos-header h1 {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.favoritos-header h1 i {
    color: #ef4444;
}

/* Panel de control */
.favoritos-control-panel {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.selection-info {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.selection-info strong {
    color: var(--color-brand);
}

.btn-analyze-batch {
    background: var(--color-brand);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-analyze-batch:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.3);
}

.btn-analyze-batch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Grid de favoritos */
.favoritos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Tarjeta de favorito */
.fav-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

.fav-card:hover {
    border-color: rgba(var(--color-brand-rgb), 0.4);
    transform: translateY(-2px);
}

.fav-card.selected {
    border-color: rgba(var(--color-brand-rgb), 0.4);
    background: var(--color-bg-elevated);
}

.fav-card .thumb-container {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.fav-card .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Círculo de selección */
.select-circle {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 2px solid rgb(255 255 255 / 77%);
    background: rgb(0 0 0 / 68%);
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.select-circle:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.2);
}

.select-circle.checked {
    border-color: var(--color-brand);
    background: var(--color-brand);
}

.select-circle.checked::after {
    content: '✓';
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.select-circle.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Botón eliminar */
.btn-remove-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #94a3b8;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    font-size: 0.75rem;
}

.btn-remove-fav:hover {
    background: #ef4444;
    color: white;
}

/* Info del video */
.fav-card-info {
    padding: 0.75rem 1rem;
}

.fav-card-title {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fav-card-channel {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.fav-card-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.fav-card-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fav-card-stats .vsr {
    color: var(--color-success);
    font-weight: 600;
}

/* Badges */
.fav-duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Estado vacío */
.favoritos-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-text-muted);
}

.favoritos-empty i {
    font-size: 4rem;
    color: var(--color-border);
    margin-bottom: 1rem;
}

.favoritos-empty h3 {
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.favoritos-empty p {
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Loading */
.favoritos-loading {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-muted);
}

.favoritos-loading i {
    font-size: 2rem;
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Folder picker (al guardar favorito) */
.fav-folder-picker {
    width: 220px;
    background: #1a1d2e;
    border: 1px solid rgba(164, 69, 255, 0.3);
    border-radius: 10px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.55);
    overflow: hidden;
    animation: favFadeIn 0.15s ease;
}
.fav-fp-title {
    padding: 10px 14px 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.fav-fp-option {
    padding: 9px 14px;
    font-size: 0.85rem;
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s;
}
.fav-fp-option:hover {
    background: rgba(164, 69, 255, 0.15);
}
.fav-fp-option i {
    font-size: 0.8rem;
    color: #64748b;
    width: 14px;
    text-align: center;
}
.fav-fp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fav-fp-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 0;
}
.fav-fp-new {
    display: flex;
    gap: 4px;
    padding: 8px 10px 10px;
}
.fav-folder-new-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 10px;
    color: #e2e8f0;
    font-size: 0.8rem;
    outline: none;
}
.fav-folder-new-input:focus {
    border-color: rgba(164, 69, 255, 0.5);
}
.fav-folder-new-input::placeholder {
    color: #64748b;
}
.fav-fp-new-btn {
    background: rgba(164, 69, 255, 0.2);
    border: 1px solid rgba(164, 69, 255, 0.3);
    border-radius: 6px;
    color: #a445ff;
    width: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.fav-fp-new-btn:hover {
    background: rgba(164, 69, 255, 0.35);
}
.fav-folder-picker-loading {
    padding: 20px;
    text-align: center;
    color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
    .favoritos-control-panel {
        flex-direction: column;
        text-align: center;
    }
    
    .favoritos-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}