/* Reproductor TV - Custom Styles */

.nav-link.active {
    background-color: #1e40af;
    border-right: 3px solid #60a5fa;
}

.section { min-height: 200px; }

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.media-card {
    border: 2px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}
.media-card:hover { border-color: #3b82f6; }
.media-card.selected { border-color: #2563eb; background-color: #eff6ff; }

.media-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.5rem 0.5rem 0 0;
    background: #f3f4f6;
}

.drag-item {
    cursor: grab;
    transition: all 0.2s;
}
.drag-item:active { cursor: grabbing; }
.drag-item.dragging { opacity: 0.5; }

.drop-zone { min-height: 60px; }
.drop-zone.drag-over { background: #dbeafe; border-color: #3b82f6; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-green  { background: #d1fae5; color: #065f46; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-gray   { background: #f3f4f6; color: #374151; }

.toast {
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.spinner {
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.module-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 1.25rem;
}