body { font-family: system-ui, sans-serif; background: #f4f7f6; margin: 0; padding: 15px; color: #333; }
header { text-align: center; padding: 20px 0; }
.filter-box { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 20px; position: sticky; top: 10px; z-index: 100; }
.filter-box input { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 16px; }
.select-group { display: flex; gap: 10px; }
.select-group select { flex: 1; padding: 10px; border-radius: 6px; border: 1px solid #ddd; }

.anuncio { background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 5px solid #007bff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.anuncio-directo { border-left-color: #ff9800; }
.video-thumb { width: 100%; height: 180px; background-size: cover; border-radius: 6px; margin-bottom: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; background-color: #000; }
.video-thumb iframe { width: 100%; height: 100%; border-radius: 6px; }

.acciones { display: flex; gap: 10px; margin-top: 10px; }
.btn-detalles { background: #eee; color: #333; padding: 8px 12px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: bold; }
.btn-ws { background: #25D366; color: #fff; padding: 8px 12px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: bold; }

@media (max-width: 600px) { .select-group { flex-direction: column; } }