/* --- CONFIGURACIÓN GENERAL --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
}

/* --- ESTILO DE LA BARRA AMARILLA (NAVBAR) --- */
.navbar-custom {
    background-color: #FFC107; /* Amarillo de tu dibujo */
    padding: 10px 5%;
    border-bottom: 2px solid #e0a800;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.circle-logo {
    width: 35px; height: 35px;
    background-color: #3498db; /* Círculo azul del logo */
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}
.nav-logo span { font-weight: 600; font-size: 1.1rem; }
.nav-links {
    background: #3498db; /* Fondo azul del buscador/links de tu dibujo */
    padding: 5px 20px;
    border-radius: 10px;
}
.nav-links a { color: white; text-decoration: none; margin: 0 10px; }

/* --- ESTILO DEL BANNER NEGRO --- */
.banner-carousel {
    background-color: #000; /* Zona negra de tu dibujo */
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

/* --- ESTILO DE LA ZONA AZUL (RECYCLER DE CÍRCULOS) --- */
.premium-zone {
    background-color: #5D9CEC; /* Azul claro de tu dibujo */
    padding: 30px 0;
}
.recycler-horizontal {
    background: rgba(0,0,0,0.8); /* El fondo negro redondeado de tu dibujo */
    border-radius: 50px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow-x: auto; /* Para que sea scrollable en celular */
}
.item-premium { text-align: center; color: white; cursor: pointer; }
.circle-store {
    width: 80px; height: 80px;
    background-color: #7ED321; /* Verde de tus círculos */
    border-radius: 50%;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 3px solid white;
}
.circle-store img { width: 100%; height: 100%; object-fit: cover; }
.circle-store.empty { background-color: #a0a0a0; }

/* --- TARJETA DE CONTENIDO --- */
.admin-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}