*{margin:0;padding:0;font-family:Helvetica;box-sizing:border-box}.App{display:flex;justify-content:center;align-items:center;min-height:100vh;transition:background .3s ease}.login-background{background-image:url(/assets/fundo6-DIys_y0F.webp);background-size:cover;background-position:center}.home-background{background-color:#dff4fd}.login-container{width:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-size:cover;background-position:center;padding:clamp(16px,4vh,48px);box-sizing:border-box}.text-side{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}.main_picture{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0}.main_picture img{width:55vmax;height:55vmax;object-fit:cover;opacity:.06;filter:grayscale(15%) brightness(1.2) contrast(1.15) blur(.5px);transform:scale(1.15)}.title{position:absolute;top:5vh;width:100%;padding:0 clamp(16px,4vw,50px);box-sizing:border-box;text-align:center}.login-container .text-side h1{text-align:center;font-size:clamp(30px,4.2vw,64px);color:#fff;margin:0;line-height:1.1;text-shadow:0 4px 18px rgba(0,0,0,.4),0 0 20px rgba(0,180,219,.28)}.container{position:relative;z-index:1;margin-top:6vh;width:clamp(300px,32vw,470px);background-color:#ffffff29;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:2px solid rgba(255,255,255,.22);border-radius:clamp(12px,1.2vw,18px);padding:clamp(22px,3vw,46px);box-sizing:border-box;box-shadow:0 18px 60px #00000038,inset 0 1px #ffffff29}.container h1{text-align:center;font-size:clamp(24px,2.2vw,32px);color:#fff;margin:0 0 clamp(18px,3vh,32px);text-shadow:0 2px 10px rgba(0,0,0,.25)}.container .input-field{position:relative;width:100%;height:clamp(44px,5.4vh,56px);margin:clamp(16px,2.8vh,30px) auto}.input-field input{width:100%;height:100%;background-color:#ffffff08;outline:none;border:2px solid rgba(255,255,255,.25);border-radius:999px;font-size:clamp(14px,1vw,16px);color:#fff;padding:0 clamp(54px,5vw,72px) 0 clamp(18px,2vw,26px);box-sizing:border-box;transition:.2s}.input-field input:focus{border-color:#ffffff8c;background-color:#ffffff14}.input-field input::placeholder{color:#fffffff2}.input-field .icon{position:absolute;right:clamp(18px,2vw,25px);top:50%;transform:translateY(-50%);font-size:clamp(15px,1.2vw,18px);color:#fff}.password-field input{padding-right:clamp(82px,7vw,96px)}.password-eye-button{position:absolute;right:clamp(48px,4.6vw,60px);top:50%;transform:translateY(-50%);width:auto;height:auto;background:transparent;border:none;outline:none;box-shadow:none;cursor:pointer;color:#fff;font-size:clamp(15px,1.2vw,18px);padding:0;display:flex;align-items:center;justify-content:center}.password-eye-button:hover{background:transparent}.password-eye-button svg{pointer-events:none}.lock-icon{right:clamp(18px,2vw,25px)}.login-submit-button{width:100%;height:clamp(44px,5.4vh,56px);background-color:#fff;color:#111;border:none;outline:none;border-radius:999px;box-shadow:0 0 14px #0000001f;cursor:pointer;font-size:clamp(14px,1vw,17px);font-weight:700;text-shadow:none;margin-top:clamp(6px,1vh,12px);transition:.2s}.login-submit-button:hover{transform:scale(1.015);box-shadow:0 0 18px #ffffff47}.login-submit-button:disabled{cursor:not-allowed;opacity:.7}input::-ms-reveal,input::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-textfield-decoration-container{display:none!important}input[type=password]{-moz-appearance:none;appearance:none;-webkit-appearance:none}@media(max-width:900px){.title{top:clamp(24px,6vh,60px)}.login-container .text-side h1{font-size:clamp(30px,7vw,48px)}.container{width:min(92vw,440px);margin-top:clamp(70px,12vh,120px)}}@media(max-width:560px){.login-container{padding:16px;align-items:center}.title{top:clamp(22px,5vh,45px)}.login-container .text-side h1{font-size:clamp(28px,9vw,38px)}.container{width:min(94vw,420px);padding:22px 18px;margin-top:clamp(80px,13vh,110px)}.container h1{font-size:clamp(22px,7vw,28px)}.container .input-field{height:46px;margin:18px auto}.login-submit-button{height:46px}}@media(max-height:650px){.title{top:3vh}.login-container .text-side h1{font-size:clamp(24px,6vh,40px)}.container{padding:20px 26px;margin-top:clamp(50px,8vh,80px)}.container h1{margin-bottom:16px}.container .input-field{height:42px;margin:14px auto}.login-submit-button{height:42px}}.container-home{width:100%;height:100vh;background-color:#dff6ff;display:grid;grid-template-rows:min(10vh,70px) minmax(0,1fr) 38px;overflow:hidden}.header-home{width:100%;height:100%;background:#003566;display:flex;align-items:center;padding:0 16px;box-sizing:border-box}.header-top-row{width:100%;height:100%;position:relative}.header-selects-wrapper{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;min-width:0}.tank-select-wrapper{display:flex;align-items:center}.tank-select{width:clamp(120px,12vw,180px);height:34px;border-radius:999px;border:none;padding:0 12px;font-size:12px;background:#fff;color:#222;outline:none;box-shadow:0 2px 8px #00000024}.sensor-wrapper{position:absolute;left:20%;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0}.fbg-inline-title{color:#fff;font-size:16px;font-weight:900;letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.25);white-space:nowrap}.header-right{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.logo-card{position:absolute;left:72%;top:50%;transform:translate(-50%,-50%);width:min(390px,27vw);height:56px;max-height:56px;min-height:48px;box-sizing:border-box;background:#fff;border-radius:10px;padding:3px 10px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 8px #0000002e;pointer-events:auto}.header-logos{display:block;width:100%;height:100%;max-width:365px;max-height:56px;object-fit:contain}.exit-button{position:absolute;right:0;top:50%;transform:translateY(-50%);background:#003566;color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:999px;width:100px;height:36px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;pointer-events:auto}.exit-button:hover{background:#001d3d;transform:translateY(-50%) scale(1.03)}.grap_tank_struc{width:100%;height:100%;min-height:0;background-color:#dff6ff;display:grid;grid-template-columns:70% 29%;gap:1%;padding:10px 1%;box-sizing:border-box;overflow:hidden}.graph-section{width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px;box-sizing:border-box}.graph-wrapper{width:100%;height:100%;min-height:0;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #00000014}.side-panel{height:100%;display:flex;flex-direction:column;gap:10px;align-items:stretch;overflow:auto;padding-top:20px;padding-right:1%;box-sizing:border-box}.measurement-section,.error-section{width:100%;flex-shrink:0}.side-table-title{width:100%;font-size:12px;font-weight:600;color:#1f2933;text-align:center;margin-bottom:4px}.level-table{width:100%;border-collapse:collapse;font-size:clamp(10px,.9vw,12px);background-color:#fff;box-shadow:0 2px 8px #0000000f}.graph-control-panel{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;background:#fff;padding:14px 16px;border-radius:8px;border:1px solid #c9d6e2;box-shadow:0 3px 10px #00000014}.graph-control-panel label{font-size:clamp(12px,1vw,15px);font-weight:700;color:#1f2933}.graph-control-input{height:34px;padding:0 13px;border:1px solid #b7c4d1;border-radius:999px;background:#fdfdfd;color:#222;font-size:clamp(12px,1vw,14px);outline:none;box-sizing:border-box;box-shadow:inset 0 1px 3px #0000000f;transition:.2s}.graph-control-input:focus{border-color:#0b7fc3;box-shadow:0 0 0 3px #0b7fc32e,inset 0 1px 3px #0000000f}.latest-card{width:100%;background-color:#fff;border:1px solid #ccc;border-radius:6px;padding:14px 16px;box-sizing:border-box;font-size:clamp(11px,1vw,13px);text-align:center;box-shadow:0 2px 8px #0000000f}.latest-card-title{font-weight:700;margin-bottom:8px}.medidor-info-card{width:100%;background-color:#fff;border:1px solid #ccc;border-radius:6px;padding:14px 16px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;font-size:clamp(11px,1vw,13px);text-align:center;box-shadow:0 2px 8px #0000000f}.medidor-info-field{width:100%}.medidor-info-title{font-weight:700;margin-bottom:6px}.medidor-info-value{min-height:16px;overflow-wrap:anywhere}.medidor-info-divider{width:85%;height:1px;background:#e1e1e1;margin:12px 0}#footer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#003566;color:#fff;font-size:16px;font-weight:600;box-sizing:border-box}@media(max-width:1200px){.header-logos{height:55px;max-width:300px}.exit-button{width:90px}}@media(max-width:900px){.container-home{height:auto;min-height:100vh;grid-template-rows:auto auto auto;overflow-y:auto}.header-home{height:auto;min-height:90px;padding:10px}.header-top-row{width:100%;height:100%;display:flex;align-items:center;position:relative}.header-selects-wrapper{position:absolute;left:0;display:flex;align-items:center;gap:8px}.sensor-wrapper{position:absolute;left:25%;display:flex;align-items:center;justify-content:flex-start;gap:6px}.header-right{position:absolute;left:50%;right:0;height:100%;display:flex;align-items:center;justify-content:center;padding-right:125px;box-sizing:border-box}.logo-card{width:min(390px,75%);height:calc(10vh - 14px);max-height:62px;min-height:48px;box-sizing:border-box;background:#fff;border-radius:10px;padding:3px 10px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 8px #0000002e}.header-logos{display:block;width:100%;height:100%;max-width:365px;max-height:56px;object-fit:contain}.grap_tank_struc{height:auto;grid-template-columns:1fr;padding:12px;overflow:visible}.graph-section{grid-template-rows:35vh 35vh}.side-panel{padding-top:0;padding-right:0}#footer{height:60px}}.sensor-status-container{display:flex;align-items:center;justify-content:center;gap:0;width:350px;max-width:26vw;height:40px;background:#ffffff1f;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px #ffffff1f;flex-shrink:0}.sensor-status-item{flex:1;height:100%;min-width:0;padding:0 6px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.2s}.sensor-status-item:hover{background:#ffffff0f}.sensor-status-separator{width:1px;height:45%;flex-shrink:0;background:#ffffff2e}.label{font-size:10px;font-weight:400;color:#ffffffe0;margin-bottom:1px;white-space:nowrap}.value{font-size:16px;font-weight:600;color:#fff;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.18)}.traffic-blue .value{color:#caf0f8}.traffic-green .value{color:#80ed99}.traffic-yellow .value{color:#ffd166}.traffic-red .value{color:#ff6b6b}.is-loading{opacity:.85}@media(max-width:900px){.sensor-status-container{width:min(92vw,430px)}}@media(max-width:520px){.sensor-status-container{width:100%;height:44px}.label{font-size:8px}.value{font-size:13px}}