/* --- RESET Y CUERPO --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #181818;        /* fondo general */
    color: #e0e0e0;             /* texto general */
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.5s, color 0.5s;
}

/* --- CONTENIDO PRINCIPAL --- */
.main { margin-left: 260px; flex: 1; padding: 20px; transition: all 0.3s ease; }
header { text-align: center; margin-bottom: 25px; }
header h1 { color: #61dafb; text-shadow: 0 0 10px #61dafb; }
header p { color: #c0c0c0; margin-bottom: 15px; }
header input {
    width: 80%;
    padding: 10px;
    border-radius: 25px;
    border: none;
    background: #2c2f36;
    color: #fff;
    box-shadow: 0 0 8px rgba(33, 161, 241, 0.5);
    transition: all 0.3s ease;
}
header input:focus { outline: none; box-shadow: 0 0 15px #21a1f1; }

/* --- ANIMACIONES --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- RESPONSIVE --- */
@media (max-width: 768px) { .sidebar { width: 220px; } .main { margin-left: 220px; } }
@media (max-width: 480px) { body { flex-direction: column; } .sidebar { width: 100%; height: auto; position: relative; box-shadow: none; } .main { margin-left: 0; padding: 10px; } header input { width: 100%; } }

/* Flecha al final de la pestaña */
.tab::after {
    content: '▸';
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 16px;
    color: #61dafb;
    transition: transform 0.3s ease;
}

.tab:hover::after {
    transform: rotate(90deg);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    #recommended { gap: 15px; }
    .tab { width: 45%; }
}
@media (max-width: 480px) {
    #recommended { flex-direction: column; gap: 12px; }
    .tab { width: 100%; }
}