:root{--fig-deep:#1a0b2e;--fig-skin:#2d1b4e;--fig-flesh:#d63384;--fig-accent:#f59e0b;--text-main:#f8fafc;--text-muted:#94a3b8;--bg-color:var(--fig-deep);--card-bg:#1e143299;--glass-border:#ffffff1a;--primary:var(--fig-flesh);--secondary:var(--fig-skin);--accent:var(--fig-accent);--success:#10b981;--danger:#ef4444;--info:#3b82f6}body{color:var(--text-main);min-height:100vh;margin:0;font-family:Outfit,Segoe UI,sans-serif;background-color:var(--fig-deep)!important;background-image:radial-gradient(circle at 50% 0%, #4a192c 0%, var(--fig-deep) 70%), radial-gradient(at 100% 100%, #d633841a 0px, transparent 50%)!important;background-attachment:fixed!important}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);color:var(--text-main);border-radius:24px;padding:2rem;box-shadow:0 25px 50px -12px #00000080}h1,h2,h3,h4,h5,h6{color:var(--text-main)}.btn-primary{background:linear-gradient(135deg, var(--fig-flesh) 0%, #8e2de2 100%);color:#fff;border:none;box-shadow:0 4px 6px -1px #0003}.btn-primary:hover{filter:brightness(1.1);box-shadow:0 10px 15px -3px #d6338466}header{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--glass-border);z-index:100;width:100%;margin-bottom:2rem;padding:2rem 0;position:relative}.logout-btn{color:var(--danger);cursor:pointer;background:#ef44441a;border:1px solid #ef444433;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;text-decoration:none;transition:all .2s;display:flex;position:absolute;top:2rem;right:2rem}.logout-btn:hover{background:#ef444433}@media (width<=768px){.logout-btn{width:fit-content;margin:1rem auto;position:static}}.sidebar-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10000;opacity:0;background:#00000080;width:100vw;height:100vh;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.sidebar-overlay.active{opacity:1;display:block}.sidebar{border-right:1px solid var(--glass-border);z-index:10001;background:#0f172afa;flex-direction:column;gap:.5rem;width:280px;height:100%;padding-top:6rem;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:4px 0 24px #00000080}.sidebar.open{transform:translate(0)}.sidebar a{color:var(--text-muted);border-left:3px solid #0000;align-items:center;gap:1rem;padding:1rem 2rem;font-size:1.1rem;text-decoration:none;transition:all .2s;display:flex}.sidebar a:hover{color:var(--text-main);background:#ffffff08}.sidebar a.active{color:var(--primary);border-left-color:var(--primary);background:#d633840d}.sidebar .disabled{opacity:.3;color:var(--text-muted);filter:grayscale();cursor:not-allowed;pointer-events:none;align-items:center;gap:1rem;padding:1rem 2rem;display:flex}.burger-btn{color:var(--text-main);cursor:pointer;z-index:10002;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:.5rem;font-size:1.5rem;transition:background .2s;display:flex;position:absolute;top:2rem;left:2rem}.burger-btn:hover{background:#ffffff1a}@media (width<=768px){.burger-btn{top:1.5rem;left:1rem}}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000;opacity:0;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:none;position:fixed;top:0;left:0}.modal-overlay.open{opacity:1;display:flex}.modal{border:1px solid var(--glass-border);text-align:center;background:#1e293b;border-radius:16px;width:90%;max-width:400px;padding:2rem;transition:transform .3s;transform:scale(.9)}.modal-overlay.open .modal{transform:scale(1)}.modal h3{color:var(--text-main);margin-top:0;margin-bottom:1rem}.modal p{color:var(--text-muted);margin-bottom:2rem}.modal-actions{justify-content:center;gap:1rem;display:flex}.card-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.card-title{color:var(--text-muted);align-items:center;gap:.75rem;font-size:1.25rem;font-weight:600;display:flex}.card-title i{color:var(--primary)}.status-indicators{align-items:center;gap:1.5rem;display:flex}.status-item{align-items:center;gap:.5rem;display:flex}.status-item small{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.status-dot{border-radius:50%;width:10px;height:10px;transition:all .3s;display:inline-block}.status-online{background-color:var(--success);box-shadow:0 0 10px var(--success)}.status-offline{background-color:var(--danger);box-shadow:0 0 10px var(--danger)}.filling-status{flex-direction:column;align-items:center;margin-bottom:2rem;display:flex}.current-volume-wrapper{justify-content:center;align-items:center;width:200px;height:200px;margin-bottom:1rem;display:flex;position:relative}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring-circle-bg{stroke:#ffffff0d}.progress-ring-circle{stroke:var(--primary);filter:drop-shadow(0 0 10px #f59e0b66);stroke-dasharray:553;stroke-dashoffset:553px;transition:stroke-dashoffset .35s}.volume-display{text-align:center;position:absolute}.volume-value{font-size:3rem;font-weight:700;line-height:1}.volume-unit{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:5px;font-size:1rem}.controls{gap:1.5rem;display:grid}.input-group{position:relative}.input-group label{color:var(--text-muted);margin-bottom:.5rem;font-size:.875rem;display:block}.input-wrapper{gap:.5rem;display:flex}.input-group input{border:1px solid var(--glass-border);color:#fff;box-sizing:border-box;background:#0000004d;border-radius:12px;outline:none;width:100%;padding:1rem;font-family:inherit;font-size:1.1rem;transition:all .2s}.input-group input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #f59e0b33}.setpoint-feedback{color:var(--success);opacity:0;min-height:1.2em;margin-top:.5rem;font-size:.8rem;transition:opacity .3s}.setpoint-feedback.visible{opacity:1}.btn-group{grid-template-columns:1fr 1fr;gap:1rem;display:grid}button{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.btn-set{color:var(--info);background:#3b82f61a;border:1px solid #3b82f633;padding:0 1.5rem}.btn-set:hover{background:#3b82f633}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:grayscale()}.btn-danger{color:var(--danger);background:#ef44441a;border:1px solid #ef444433}.btn-danger:hover{background:#ef444433}.btn-danger:active{transform:scale(.98)}.btn-cancel{border:1px solid var(--text-muted);color:var(--text-muted);background:0 0}.btn-cancel:hover{color:#fff;background:#ffffff0d}.temp-grid{grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem;display:grid}.temp-item{text-align:center;background:#ffffff08;border-radius:16px;padding:1.5rem}.temp-val{color:var(--success);margin:.5rem 0;font-size:2rem;font-weight:600}.temp-label{color:var(--text-muted);font-size:.875rem}.chart-container{height:250px;margin-top:1rem;position:relative}.toast-container{z-index:1000;flex-direction:column;gap:.5rem;display:flex;position:fixed;bottom:6rem;right:2rem}.toast{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:4px solid var(--primary);color:#fff;background:#1e293be6;border-radius:8px;align-items:center;gap:.75rem;padding:1rem 1.5rem;font-size:.9rem;animation:.3s ease-out forwards slideIn;display:flex;box-shadow:0 4px 12px #0000004d}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (width<=768px){.toast-container{bottom:1rem;left:1rem;right:1rem}}.company-logo{z-index:9999;border-radius:12px;width:150px;position:fixed;bottom:20px;right:20px}@media (width<=768px){.company-logo{text-align:center;width:120px;margin:2rem auto;display:block;position:static}}.santa-diabla-logo{z-index:1050;border-radius:12px;width:auto;height:50px;position:absolute;top:2rem;left:4.5rem}@media (width<=768px){.santa-diabla-logo{display:none}}.sidebar-logo-img{display:none}@media (width<=768px){.sidebar-logo-img{border-radius:12px;width:80%;max-width:180px;margin:2rem auto 1rem;display:block}}.app-layout{flex-direction:column;align-items:center;width:100%;display:flex}.container{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;width:90%;max-width:1200px;margin-top:1rem;padding-bottom:3rem;display:grid}.login-page{background-color:var(--fig-deep);background-image:radial-gradient(circle at 50% 0%, #4a192c 0%, var(--fig-deep) 70%), radial-gradient(at 100% 100%, #d633841a 0px, transparent 50%);box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-height:100vh;margin:0;padding:20px;display:flex}.login-container{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);text-align:center;background:#1e143299;border:1px solid #ffffff1a;border-radius:24px;width:100%;max-width:380px;padding:40px;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.login-container:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#d6338426 0%,#0000 70%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.login-content{z-index:1;position:relative}.fig-logo{filter:drop-shadow(0 0 10px #d6338480);width:80px;height:auto;margin-bottom:1rem;transition:transform .3s}.fig-logo:hover{transform:scale(1.05)rotate(5deg)}.login-container h2{color:var(--text-main);letter-spacing:-.025em;margin-bottom:1.5rem;font-size:1.8rem;font-weight:600}.login-container input{color:#fff;box-sizing:border-box;background-color:#0000004d;border:1px solid #ffffff1a;border-radius:12px;width:100%;margin-bottom:20px;padding:14px;font-family:inherit;font-size:1rem;transition:all .2s}.login-container input:focus{border-color:var(--fig-flesh);background-color:#00000080;outline:none;box-shadow:0 0 0 4px #d6338426}.login-container button{background:linear-gradient(135deg, var(--fig-flesh) 0%, #8e2de2 100%);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;padding:14px;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:0 4px 6px -1px #0003}.login-container button:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 10px 15px -3px #d6338466}@media (width<=480px){.login-container{border-radius:16px;width:85%;max-width:320px;padding:20px 15px}.login-container h2{margin-bottom:1rem;font-size:1.25rem}.fig-logo{width:50px;margin-bottom:.5rem}.login-container input{margin-bottom:12px;padding:10px;font-size:.9rem}.login-container button{padding:10px;font-size:.9rem}}