/* static/css_clientes/header_cli.css */
.navbar { background-color: var(--navbar-bg); color: var(--navbar-text); box-shadow: var(--navbar-shadow); padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; transition: all 0.3s ease; }
.navbar-logo { color: var(--navbar-text) !important; text-decoration: none; font-weight: bold; font-size: 1.5rem; letter-spacing: 1px; }
.navbar-menu { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; align-items: center; }
.navbar-menu a { color: var(--navbar-text); text-decoration: none; transition: all 0.3s; font-weight: 500; opacity: 0.85; }
.navbar-menu a:hover { color: var(--accent-color); opacity: 1; }
.navbar-actions { display: flex; align-items: center; gap: 20px; }
.cart-icon-wrapper { color: var(--navbar-text); position: relative; font-size: 1.2rem; text-decoration: none; transition: transform 0.2s; }
.cart-icon-wrapper:hover { transform: scale(1.1); color: var(--accent-color); }
.cart-icon-wrapper .badge { position: absolute; top: -8px; right: -10px; background-color: var(--accent-color); color: #000; font-size: 0.7rem; padding: 3px 6px; border-radius: 50%; font-weight: bold;}

.sara-toggle-btn { position: relative !important; width: 55px !important; height: 28px !important; background: var(--toggle-bg) !important; border: 1px solid var(--border-color) !important; border-radius: 30px !important; cursor: pointer !important; padding: 0 !important; display: flex !important; align-items: center !important; transition: background 0.3s ease !important; }
.sara-slider-circle { position: absolute !important; top: 2px !important; left: 3px !important; width: 22px !important; height: 22px !important; background: var(--slider-bg) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; z-index: 2 !important; }
body.dark-mode .sara-slider-circle { transform: translateX(25px) !important; }

@media (max-width: 991px) { .navbar { flex-direction: column; padding: 15px 20px; gap: 15px; } .navbar-menu { flex-wrap: wrap; justify-content: center; gap: 12px; } .navbar-menu a { font-size: 0.9rem; padding: 6px 12px; background-color: rgba(255,255,255,0.1); border-radius: 20px; } .navbar-actions { width: 100%; justify-content: space-around; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; } }