*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f6f7f9;color:#16181d}.app{display:flex;min-height:100vh}.sidebar{width:240px;background:#111827;color:#fff;padding:22px 14px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.logo{font-size:14px;font-weight:800;letter-spacing:.1em;padding:8px 12px 28px}.logo span{font-weight:400;opacity:.55}.sidebar nav{display:grid;gap:5px}.nav{background:transparent;border:0;color:#b7bfce;text-align:left;padding:12px;border-radius:9px;cursor:pointer;font-size:14px}.nav.active,.nav:hover{background:#1f2937;color:#fff}.nav span{margin-left:8px}.side-foot{margin-top:auto;color:#778195;font-size:11px;padding:12px}.content{margin-left:240px;width:calc(100% - 240px)}.topbar{height:72px;background:#fff;border-bottom:1px solid #e7e9ed;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.topbar b{display:block}.topbar span{font-size:12px;color:#667085}.refresh{background:#fff;border:1px solid #d9dde5;padding:9px 12px;border-radius:8px;cursor:pointer}main{max-width:1400px;margin:0 auto;padding:30px}.view{display:none}.view.active{display:block}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.page-head h1{margin:0 0 5px;font-size:28px}.page-head p{margin:0;color:#667085}.page-head button,.modal-box>button:not(.close),.upload-panel button{background:#111827;color:#fff;border:0;border-radius:8px;padding:11px 15px;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.metric{background:#fff;border:1px solid #e6e8ec;border-radius:13px;padding:20px}.metric span{display:block;color:#667085;font-size:12px}.metric b{display:block;font-size:29px;margin:6px 0}.metric small{color:#98a2b3}.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}.panel{background:#fff;border:1px solid #e6e8ec;border-radius:13px;padding:20px;margin-bottom:18px}.panel-head{display:flex;align-items:center;justify-content:space-between}.panel-head h2{margin:0 0 16px;font-size:16px}.panel-head button{border:0;background:none;color:#475467;cursor:pointer}.list-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f1f3}.list-row:last-child{border-bottom:0}.list-row small{display:block;color:#98a2b3;margin-top:4px}.online{color:#067647}.offline{color:#b42318}.badge{font-size:10px;font-weight:700;padding:5px 8px;border-radius:20px;background:#eef0f3}.badge.active{background:#ecfdf3;color:#067647}.badge.scheduled{background:#eff8ff;color:#175cd3}.badge.draft{background:#f2f4f7;color:#475467}.toolbar{display:flex;gap:10px;margin-bottom:12px}.toolbar input,.toolbar select{max-width:320px}.toolbar input,input,select{padding:11px 12px;border:1px solid #d9dde5;border-radius:8px;background:#fff;font-size:14px;width:100%}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid #eef0f2;font-size:13px}th{font-size:11px;text-transform:uppercase;color:#667085;letter-spacing:.04em}.creative-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.creative{background:#fff;border:1px solid #e6e8ec;border-radius:13px;padding:12px}.thumb{height:120px;border-radius:9px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:12px}.creative small{display:block;color:#667085;margin-top:5px}.upload-panel{display:flex;gap:10px;align-items:center}.upload-panel input{max-width:500px}.muted,.empty{color:#667085}.alert{padding:11px;background:#fff4e5;border-radius:9px;margin-bottom:8px;font-size:13px}.alert small{display:block;margin-top:4px;color:#667085}.success{padding:12px;background:#ecfdf3;color:#067647;border-radius:9px;font-size:13px;margin-top:10px}.modal{display:none;position:fixed;inset:0;background:#0008;align-items:center;justify-content:center;padding:20px;z-index:10}.modal.open{display:flex}.modal-box{background:#fff;border-radius:15px;padding:25px;width:420px;position:relative}.modal-box.wide{width:720px}.modal-box h2{margin-top:0}.modal-box input,.modal-box select{margin:5px 0 12px}.close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:24px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid label{font-size:12px;color:#667085}.form-grid label input,.form-grid label select{display:block;color:#16181d}.modal-box>a{color:#175cd3}@media(max-width:950px){.sidebar{width:70px}.logo{font-size:0}.logo:after{content:'M';font-size:18px}.nav span,.side-foot{display:none}.content{margin-left:70px;width:calc(100% - 70px)}.metrics{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}.creative-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){main{padding:18px}.metrics,.creative-grid,.form-grid{grid-template-columns:1fr}.toolbar,.upload-panel{flex-direction:column;align-items:stretch}.topbar{padding:0 18px}}













.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#111827}.login-card{width:380px;background:#fff;border-radius:16px;padding:30px;box-shadow:0 20px 60px #0005}.login-logo{font-weight:800;letter-spacing:.08em;margin-bottom:30px}.login-logo span{font-weight:400;opacity:.5}.login-card h1{margin:0 0 6px}.login-card p{color:#667085;margin:0 0 22px}.login-card input{display:block;margin:10px 0}.login-card button{width:100%;background:#111827;color:#fff;border:0;border-radius:8px;padding:12px;cursor:pointer}.login-card #err{color:#b42318;font-size:13px;margin-top:10px}













/* =========================






   PLAYER DE MÍDIA DIGITAL






   ========================= */













html, body.player {






    width: 100%;






    height: 100%;






    margin: 0;






    padding: 0;






    overflow: hidden;






    background: #000;






}













body.player {






    position: fixed;






    inset: 0;






    display: block;






    width: 100vw;






    height: 100vh;






    min-height: 100vh;






    background: #000;






}













body.player #video {






    position: absolute;






    inset: 0;






    display: block;






    width: 100vw;






    height: 100vh;






    min-width: 100%;






    min-height: 100%;






    margin: 0;






    padding: 0;






    border: 0;






    background: #000;






    object-fit: cover;






}













body.player #status {






    display: none !important;






}




























/* =========================================================






   DASHBOARD - ETAPA 2.3






   ========================================================= */













.metrics{






  display:grid;






  grid-template-columns:repeat(5,minmax(0,1fr));






  gap:12px;






  margin-bottom:14px;






}













.metric{






  min-width:0;






}













.dashboard-delivery{






  margin-bottom:14px;






}













.dashboard-delivery .panel-head{






  margin-bottom:4px;






}













.delivery-row{






  padding:15px 0;






  border-bottom:1px solid #eef0f2;






}













.delivery-row:last-child{






  border-bottom:0;






}













.delivery-info{






  display:flex;






  align-items:center;






  justify-content:space-between;






  gap:15px;






}













.delivery-info b{






  display:block;






  font-size:13px;






}













.delivery-info small{






  display:block;






  color:#98a2b3;






  margin-top:4px;






}













.delivery-info strong{






  font-size:14px;






  color:#175cd3;






  white-space:nowrap;






}













.delivery-bar{






  width:100%;






  height:8px;






  background:#eef0f3;






  border-radius:20px;






  overflow:hidden;






  margin-top:10px;






}













.delivery-fill{






  height:100%;






  background:#47c878;






  border-radius:20px;






  transition:width .3s ease;






}













.delivery-meta{






  display:flex;






  justify-content:space-between;






  gap:15px;






  margin-top:7px;






  font-size:11px;






  color:#667085;






}













@media(max-width:1100px){






  .metrics{






    grid-template-columns:repeat(3,minmax(0,1fr));






  }






}













@media(max-width:700px){






  .metrics{






    grid-template-columns:1fr 1fr;






  }






}













@media(max-width:480px){






  .metrics{






    grid-template-columns:1fr;






  }













  .delivery-meta{






    flex-direction:column;






    gap:3px;






  }






}




















/* =========================================================






   DASHBOARD - ETAPA 2.4






   LAYOUT COMPACTO






   ========================================================= */













main{






  padding-top:22px;






}













.page-head{






  margin-bottom:12px;






}













.page-head h1{






  margin-bottom:3px;






}













.page-head p{






  margin:0;






}













.metrics{






  gap:10px;






  margin-bottom:10px;






}













.metric{






  padding:15px;






  min-height:86px;






}













.metric b{






  font-size:25px;






  margin-top:3px;






}













.metric small{






  margin-top:3px;






}













.dashboard-delivery{






  margin-bottom:10px;






  padding:15px;






}













.dashboard-delivery .panel-head{






  margin-bottom:2px;






}













.delivery-row{






  padding:10px 0;






}













.delivery-info{






  gap:10px;






}













.delivery-info b{






  font-size:12px;






}













.delivery-info small{






  margin-top:2px;






  font-size:10px;






}













.delivery-info strong{






  font-size:13px;






}













.delivery-bar{






  height:6px;






  margin-top:6px;






}













.delivery-meta{






  margin-top:4px;






  font-size:10px;






}













.two-col{






  gap:10px;






}













.panel{






  padding:15px;






}













.panel-head h2{






  margin-bottom:8px;






}













.list-row{






  padding:9px 0;






}













.list-row small{






  margin-top:2px;






  font-size:10px;






}













.alert{






  padding:9px;






  margin-bottom:6px;






  font-size:12px;






}













.alert small{






  margin-top:2px;






}













#dashboard > .panel{






  margin-top:10px;






}













#dashboard{






  max-width:1100px;






  margin:0 auto;






}













@media(max-width:1100px){






  #dashboard{






    max-width:none;






  }






}






/* =========================================================






   DASHBOARD - ETAPA 2.5






   AJUSTE RESPONSIVO POR ALTURA






   ========================================================= */













@media (max-height: 800px) and (min-width: 951px){













  #dashboard{






    max-width:1100px;






  }













  #dashboard .page-head{






    margin-bottom:8px;






  }













  #dashboard .page-head h1{






    font-size:24px;






  }













  #dashboard .metrics{






    gap:8px;






    margin-bottom:8px;






  }













  #dashboard .metric{






    padding:11px 13px;






    min-height:72px;






  }













  #dashboard .metric span{






    font-size:11px;






  }













  #dashboard .metric b{






    font-size:22px;






    margin:2px 0;






  }













  #dashboard .metric small{






    font-size:10px;






  }













  #dashboard .dashboard-delivery{






    padding:12px 14px;






    margin-bottom:8px;






  }













  #dashboard .dashboard-delivery .panel-head{






    margin-bottom:0;






  }













  #dashboard .dashboard-delivery .panel-head h2{






    font-size:14px;






    margin-bottom:5px;






  }













  #dashboard .delivery-row{






    padding:7px 0;






  }













  #dashboard .delivery-info b{






    font-size:11px;






  }













  #dashboard .delivery-info small{






    font-size:9px;






    margin-top:1px;






  }













  #dashboard .delivery-info strong{






    font-size:12px;






  }













  #dashboard .delivery-bar{






    height:5px;






    margin-top:4px;






  }













  #dashboard .delivery-meta{






    font-size:9px;






    margin-top:3px;






  }













  #dashboard .two-col{






    gap:8px;






  }













  #dashboard .panel{






    padding:12px 14px;






    margin-bottom:8px;






  }













  #dashboard .panel-head h2{






    font-size:14px;






    margin-bottom:5px;






  }













  #dashboard .list-row{






    padding:6px 0;






  }













  #dashboard .list-row b{






    font-size:11px;






  }













  #dashboard .list-row small{






    font-size:9px;






    margin-top:1px;






  }













  #dashboard .badge{






    font-size:8px;






    padding:3px 6px;






  }













  #dashboard .alert{






    padding:7px;






    margin-bottom:4px;






    font-size:10px;






  }













  #dashboard .alert small{






    font-size:9px;






    margin-top:1px;






  }













  #dashboard > .panel{






    margin-top:8px;






  }






}













@media (max-height: 650px) and (min-width: 951px){













  #dashboard{






    max-width:1050px;






  }













  #dashboard .page-head h1{






    font-size:22px;






  }













  #dashboard .page-head p{






    font-size:10px;






  }













  #dashboard .metrics{






    gap:6px;






    margin-bottom:6px;






  }













  #dashboard .metric{






    padding:8px 10px;






    min-height:62px;






  }













  #dashboard .metric b{






    font-size:19px;






  }













  #dashboard .dashboard-delivery{






    padding:9px 11px;






    margin-bottom:6px;






  }













  #dashboard .delivery-row{






    padding:5px 0;






  }













  #dashboard .delivery-info b{






    font-size:10px;






  }













  #dashboard .delivery-info small{






    font-size:8px;






  }













  #dashboard .delivery-info strong{






    font-size:10px;






  }













  #dashboard .delivery-bar{






    height:4px;






    margin-top:3px;






  }













  #dashboard .delivery-meta{






    font-size:8px;






    margin-top:2px;






  }













  #dashboard .panel{






    padding:9px 11px;






    margin-bottom:6px;






  }













  #dashboard .list-row{






    padding:5px 0;






  }













  #dashboard .list-row b{






    font-size:10px;






  }













  #dashboard .list-row small{






    font-size:8px;






  }






}







/* =========================================================






   DASHBOARD - ETAPA 2.6






   ENQUADRAMENTO FINAL EM 100% DE ZOOM






   ========================================================= */













@media (max-height: 800px) and (min-width: 951px){













  main{






    padding-top:14px;






    padding-bottom:14px;






  }













  #dashboard{






    max-width:1100px;






  }













  #dashboard .page-head{






    margin-bottom:7px;






  }













  #dashboard .page-head h1{






    font-size:22px;






    margin-bottom:2px;






  }













  #dashboard .page-head p{






    font-size:11px;






  }













  #dashboard .metrics{






    gap:7px;






    margin-bottom:7px;






  }













  #dashboard .metric{






    padding:9px 11px;






    min-height:66px;






  }













  #dashboard .metric span{






    font-size:10px;






  }













  #dashboard .metric b{






    font-size:21px;






    margin:2px 0;






  }













  #dashboard .metric small{






    font-size:9px;






  }













  /* Entrega */






  #dashboard .dashboard-delivery{






    padding:10px 12px;






    margin-bottom:7px;






  }













  #dashboard .dashboard-delivery .panel-head h2{






    font-size:14px;






    margin-bottom:3px;






  }













  #dashboard .delivery-row{






    padding:5px 0;






  }













  #dashboard .delivery-info{






    gap:8px;






  }













  #dashboard .delivery-info b{






    font-size:10px;






  }













  #dashboard .delivery-info small{






    font-size:8px;






    margin-top:0;






  }













  #dashboard .delivery-info strong{






    font-size:11px;






  }













  #dashboard .delivery-bar{






    height:4px;






    margin-top:3px;






  }













  #dashboard .delivery-meta{






    font-size:8px;






    margin-top:2px;






  }













  /* Pain?is inferiores */






  #dashboard .two-col{






    gap:7px;






  }













  #dashboard .panel{






    padding:10px 12px;






    margin-bottom:7px;






  }













  #dashboard .panel-head h2{






    font-size:13px;






    margin-bottom:4px;






  }













  #dashboard .list-row{






    padding:5px 0;






  }













  #dashboard .list-row b{






    font-size:10px;






  }













  #dashboard .list-row small{






    font-size:8px;






    margin-top:0;






  }













  #dashboard .badge{






    font-size:7px;






    padding:2px 5px;






  }













  /* Alertas */






  #dashboard .alert{






    padding:6px;






    margin-bottom:4px;






    font-size:9px;






  }













  #dashboard .alert small{






    font-size:8px;






    margin-top:0;






  }













  /* Status das telas */






  #dashboard > .panel{






    margin-top:7px;






  }













  #dashboard > .panel .list-row{






    padding:5px 0;






  }






}




















/* =========================================================






   TELAS MUITO BAIXAS






   ========================================================= */













@media (max-height: 650px) and (min-width: 951px){













  main{






    padding-top:10px;






    padding-bottom:10px;






  }













  #dashboard .page-head{






    margin-bottom:5px;






  }













  #dashboard .page-head h1{






    font-size:20px;






  }













  #dashboard .metrics{






    gap:5px;






    margin-bottom:5px;






  }













  #dashboard .metric{






    padding:7px 9px;






    min-height:56px;






  }













  #dashboard .metric b{






    font-size:18px;






    margin:1px 0;






  }













  #dashboard .dashboard-delivery{






    padding:7px 9px;






    margin-bottom:5px;






  }













  #dashboard .delivery-row{






    padding:3px 0;






  }













  #dashboard .delivery-info b{






    font-size:9px;






  }













  #dashboard .delivery-info small{






    font-size:7px;






  }













  #dashboard .delivery-info strong{






    font-size:9px;






  }













  #dashboard .delivery-bar{






    height:3px;






    margin-top:2px;






  }













  #dashboard .delivery-meta{






    font-size:7px;






    margin-top:1px;






  }













  #dashboard .panel{






    padding:7px 9px;






    margin-bottom:5px;






  }













  #dashboard .list-row{






    padding:3px 0;






  }













  #dashboard .list-row b{






    font-size:9px;






  }













  #dashboard .list-row small{






    font-size:7px;






  }






}





















/* =========================================================






   DASHBOARD - ETAPA 2.6






   ROLAGEM VERTICAL SEM ALTERAR O ZOOM






   ========================================================= */













html,






body{






  min-height:100%;






  height:auto;






  overflow-y:auto;






  overflow-x:hidden;






}













.app{






  min-height:100vh;






  height:auto;






}













.content{






  min-height:100vh;






  height:auto;






}













main{






  min-height:calc(100vh - 72px);






  height:auto;






  overflow:visible;






}













.view{






  overflow:visible;






}













#dashboard{






  height:auto;






  min-height:0;






  overflow:visible;






}





























/* =========================================================







   RIDEMEDIA - TELA INFORMATIVA - ETAPA 3.4.2







   Clima + Noticias







   ========================================================= */















.info-screen{







    position:fixed;







    inset:0;







    width:100vw;







    height:100vh;







    z-index:50;







    background:#0b0f14;







    color:#fff;







    display:flex;







    flex-direction:column;







    overflow:hidden;







    font-family:Inter,Arial,sans-serif;







}















.info-header{







    display:grid;







    grid-template-columns:1fr auto 1fr;







    align-items:center;







    gap:30px;







    padding:28px 42px;







    border-bottom:1px solid rgba(255,255,255,.10);







}















.info-brand strong{







    display:block;







    font-size:24px;







    letter-spacing:.08em;







}















.info-brand span{







    display:block;







    margin-top:5px;







    font-size:12px;







    color:#98a2b3;







}















.info-location{







    font-size:17px;







    font-weight:600;







}















.info-datetime{







    text-align:right;







}















.info-datetime span{







    display:block;







}















#infoDate{







    font-size:12px;







    color:#98a2b3;







}















#infoTime{







    margin-top:3px;







    font-size:22px;







    font-weight:700;







}















.info-content{







    flex:1;







    min-height:0;







    display:grid;







    grid-template-columns:34% 66%;







    gap:0;







}















.info-weather{







    padding:40px;







    border-right:1px solid rgba(255,255,255,.10);







    display:flex;







    flex-direction:column;







    justify-content:center;







}















.info-label{







    font-size:11px;







    letter-spacing:.15em;







    color:#98a2b3;







    margin-bottom:8px;







}















.info-weather-location{







    font-size:25px;







    font-weight:700;







    margin-bottom:24px;







}















.info-weather-main{







    display:flex;







    align-items:center;







    justify-content:space-between;







    gap:20px;







}















#infoWeatherTemperature{







    font-size:72px;







    line-height:1;







    font-weight:700;







    letter-spacing:-.04em;







}















#infoWeatherCondition{







    margin-top:10px;







    font-size:17px;







    color:#c4cbd4;







}















.info-weather-icon{







    font-size:68px;







    line-height:1;







}















.info-weather-details{







    display:grid;







    grid-template-columns:repeat(3,1fr);







    gap:10px;







    margin-top:38px;







}















.info-weather-details div{







    padding:14px;







    background:rgba(255,255,255,.05);







    border:1px solid rgba(255,255,255,.08);







    border-radius:10px;







}















.info-weather-details span{







    display:block;







    font-size:10px;







    color:#98a2b3;







}















.info-weather-details strong{







    display:block;







    margin-top:5px;







    font-size:15px;







}















.info-news{







    padding:40px;







    min-width:0;







    display:flex;







    flex-direction:column;







}















.info-section-title{







    display:flex;







    align-items:baseline;







    justify-content:space-between;







    gap:20px;







    margin-bottom:20px;







}















.info-section-title span{







    font-size:20px;







    font-weight:700;







}















.info-section-title small{







    color:#98a2b3;







    font-size:10px;







    letter-spacing:.12em;







}















.info-news-main{







    flex:1;







    min-height:0;







    display:grid;







    grid-template-columns:38% 62%;







    border:1px solid rgba(255,255,255,.10);







    border-radius:14px;







    overflow:hidden;







    background:#111820;







}















.info-news-image{







    min-height:180px;







    background:







        linear-gradient(







            135deg,







            rgba(71,200,120,.18),







            rgba(23,92,211,.08)







        );







}















.info-news-body{







    padding:28px;







    display:flex;







    flex-direction:column;







    justify-content:center;







}















.info-news-tag{







    font-size:10px;







    letter-spacing:.14em;







    color:#47c878;







    font-weight:700;







}















.info-news-body h2{







    margin:12px 0 10px;







    font-size:28px;







    line-height:1.15;







}















.info-news-body p{







    margin:0;







    color:#b8c0ca;







    font-size:14px;







    line-height:1.5;







}















.info-news-body small{







    margin-top:20px;







    color:#667085;







    font-size:10px;







}















.info-news-list{







    display:grid;







    grid-template-columns:1fr 1fr;







    gap:14px;







    margin-top:14px;







}















.info-news-list article{







    display:flex;







    gap:12px;







    align-items:flex-start;







    padding:15px;







    border:1px solid rgba(255,255,255,.08);







    border-radius:10px;







    background:#111820;







}















.news-number{







    font-size:11px;







    color:#47c878;







    font-weight:700;







}















.info-news-list strong{







    display:block;







    font-size:12px;







}















.info-news-list small{







    display:block;







    margin-top:4px;







    color:#8d98a7;







    font-size:10px;







}















.info-footer{







    display:flex;







    align-items:center;







    justify-content:space-between;







    padding:15px 42px;







    border-top:1px solid rgba(255,255,255,.10);







    color:#667085;







    font-size:10px;







}















.info-footer span:first-child{







    color:#fff;







    font-weight:700;







    letter-spacing:.08em;







}















.info-footer strong{







    color:#98a2b3;







    font-size:13px;







}















@media(max-width:900px){















    .info-header{







        padding:20px;







        gap:15px;







    }















    .info-content{







        grid-template-columns:1fr;







        overflow:auto;







    }















    .info-weather{







        padding:25px;







        border-right:0;







        border-bottom:1px solid rgba(255,255,255,.10);







    }















    .info-news{







        padding:25px;







    }















    #infoWeatherTemperature{







        font-size:56px;







    }















    .info-news-main{







        grid-template-columns:1fr;







    }







}















@media(max-height:650px) and (min-width:901px){















    .info-header{







        padding:15px 25px;







    }















    .info-brand strong{







        font-size:19px;







    }















    .info-content{







        grid-template-columns:32% 68%;







    }















    .info-weather,







    .info-news{







        padding:22px 25px;







    }















    .info-weather-location{







        font-size:20px;







        margin-bottom:15px;







    }















    #infoWeatherTemperature{







        font-size:52px;







    }















    .info-weather-icon{







        font-size:48px;







    }















    .info-weather-details{







        margin-top:20px;







    }















    .info-news-body{







        padding:20px;







    }















    .info-news-body h2{







        font-size:22px;







    }















    .info-footer{







        padding:9px 25px;







    }







}













/* LISTA COMPACTA DE CRIATIVOS - NOVA CAMPANHA */













#creativeSelector {






  display: flex !important;






  flex-direction: column !important;






  gap: 8px !important;






  width: 100% !important;






  max-height: 430px !important;






  overflow-y: auto !important;






  overflow-x: hidden !important;






  padding: 4px !important;






  box-sizing: border-box !important;






}













#creativeSelector .creative-option {






  display: flex !important;






  align-items: center !important;






  flex-direction: row !important;






  width: 100% !important;






  min-width: 0 !important;






  height: 54px !important;






  min-height: 54px !important;






  max-height: 54px !important;






  padding: 8px 12px !important;






  margin: 0 !important;






  box-sizing: border-box !important;






  border: 1px solid #d9dee8 !important;






  border-radius: 8px !important;






  background: #fff !important;






  cursor: pointer !important;






}













#creativeSelector .creative-option:hover {






  background: #f8fafc !important;






  border-color: #98a2b3 !important;






}













#creativeSelector .creative-option.selected {






  background: #eff8ff !important;






  border-color: #175cd3 !important;






}













#creativeSelector .creative-option-icon {






  width: 30px !important;






  height: 30px !important;






  min-width: 30px !important;






  max-width: 30px !important;






  min-height: 30px !important;






  max-height: 30px !important;






  flex: 0 0 30px !important;






  display: flex !important;






  align-items: center !important;






  justify-content: center !important;






  border-radius: 6px !important;






  font-size: 13px !important;






  margin-right: 10px !important;






}













#creativeSelector .creative-option-info {






  flex: 1 1 auto !important;






  min-width: 0 !important;






  overflow: hidden !important;






}













#creativeSelector .creative-option-info b {






  display: block !important;






  width: 100% !important;






  overflow: hidden !important;






  white-space: nowrap !important;






  text-overflow: ellipsis !important;






  font-size: 14px !important;






  line-height: 20px !important;






  font-weight: 600 !important;






}













#creativeSelector .creative-option-info small {






  display: none !important;






}













#creativeSelector .creative-option-check {






  width: 18px !important;






  height: 18px !important;






  min-width: 18px !important;






  max-width: 18px !important;






  min-height: 18px !important;






  max-height: 18px !important;






  flex: 0 0 18px !important;






  border-radius: 50% !important;






  margin-left: 10px !important;






}

















/* ===== DETALHES DA CAMPANHA ===== */











#campaignDetailsModal .campaign-detail-summary{





 display:grid;





 grid-template-columns:repeat(3,minmax(0,1fr));





 gap:12px;





 margin-top:18px;





}











#campaignDetailsModal .campaign-detail-card{





 background:#f8fafc;





 border:1px solid #eaecf0;





 border-radius:12px;





 padding:14px 16px;





}











#campaignDetailsModal .campaign-detail-card small{





 display:block;





 color:#667085;





 font-size:12px;





 margin-bottom:5px;





}











#campaignDetailsModal .campaign-detail-card b{





 display:block;





 color:#101828;





 font-size:15px;





 line-height:1.35;





}











#campaignDetailsModal .campaign-detail-status{





 display:inline-flex;





 align-items:center;





 gap:6px;





 padding:5px 10px;





 border-radius:999px;





 font-size:12px;





 font-weight:700;





}











#campaignDetailsModal .campaign-detail-list{





 display:flex;





 flex-direction:column;





 gap:7px;





 margin-top:12px;





}











#campaignDetailsModal .campaign-detail-list-item{





 display:flex;





 align-items:center;





 justify-content:space-between;





 gap:12px;





 padding:10px 12px;





 background:#fff;





 border:1px solid #eaecf0;





 border-radius:9px;





}











#campaignDetailsModal .campaign-detail-list-item .name{





 min-width:0;





 overflow:hidden;





 text-overflow:ellipsis;





 white-space:nowrap;





 font-size:13px;





 font-weight:600;





 color:#344054;





}











#campaignDetailsModal .campaign-detail-list-item .type{





 flex:none;





 color:#667085;





 font-size:11px;





}











@media(max-width:700px){





 #campaignDetailsModal .campaign-detail-summary{





  grid-template-columns:1fr 1fr;





 }





}











@media(max-width:480px){





 #campaignDetailsModal .campaign-detail-summary{





  grid-template-columns:1fr;





 }





}














/* ===== LISTAS COMPACTAS NO DETALHE DA CAMPANHA ===== */









#campaignDetailsModal .creative-selector{




 display:flex !important;




 flex-direction:column !important;




 gap:8px !important;




 margin-top:12px !important;




}









#campaignDetailsModal .creative-option{




 width:100% !important;




 min-height:52px !important;




 height:52px !important;




 box-sizing:border-box !important;




 display:flex !important;




 align-items:center !important;




 gap:12px !important;




 padding:7px 10px !important;




 margin:0 !important;




 border:1px solid #dfe3e8 !important;




 border-radius:9px !important;




 background:#fff !important;




}









#campaignDetailsModal .creative-option-icon{




 width:36px !important;




 height:36px !important;




 min-width:36px !important;




 flex:none !important;




 display:flex !important;




 align-items:center !important;




 justify-content:center !important;




 border-radius:7px !important;




 font-size:16px !important;




}









#campaignDetailsModal .creative-option-info{




 min-width:0 !important;




 flex:1 !important;




 display:flex !important;




 align-items:center !important;




 gap:10px !important;




}









#campaignDetailsModal .creative-option-info b{




 min-width:0 !important;




 overflow:hidden !important;




 text-overflow:ellipsis !important;




 white-space:nowrap !important;




 font-size:13px !important;




 line-height:1.2 !important;




}









#campaignDetailsModal .creative-option-info small{




 flex:none !important;




 font-size:11px !important;




 color:#667085 !important;




}









#campaignDetailsModal .creative-option-check{




 flex:none !important;




 width:20px !important;




 height:20px !important;




}









#campaignDetailsModal .creative-option button{




 flex:none !important;




 white-space:nowrap !important;




}









#campaignDetailsModal .creative-option .refresh{




 flex:none !important;




 padding:7px 10px !important;




 font-size:12px !important;




}











/* ===== TABELA MODERNA DE CAMPANHAS ===== */







.campaign-table-wrap{



 width:100%;



 overflow-x:auto;



}







.campaigns-modern-table{



 width:100%;



 border-collapse:separate;



 border-spacing:0;



}







.campaigns-modern-table th{



 white-space:nowrap;



}







.campaigns-modern-table td{



 vertical-align:middle;



}







.campaign-name-modern{



 max-width:230px;



 overflow:hidden;



 text-overflow:ellipsis;



 white-space:nowrap;



 display:inline-block;



 vertical-align:middle;



}







.campaign-advertiser{



 display:block;



 max-width:180px;



 overflow:hidden;



 text-overflow:ellipsis;



 white-space:nowrap;



}







.campaign-period{



 display:flex;



 align-items:center;



 gap:6px;



 white-space:nowrap;



 font-size:12px;



 color:#475467;



}







.campaign-period-arrow{



 color:#98a2b3;



 font-weight:700;



}







.campaign-status-badge{



 display:inline-flex;



 align-items:center;



 gap:6px;



 padding:5px 9px;



 border-radius:999px;



 font-size:11px;



 font-weight:700;



 white-space:nowrap;



}







.campaign-status-badge.active{



 background:#ecfdf3;



 color:#027a48;



}







.campaign-status-badge.paused{



 background:#fff7ed;



 color:#c2410c;



}







.campaign-status-badge.scheduled{



 background:#eff8ff;



 color:#175cd3;



}







.campaign-status-badge.draft{



 background:#f2f4f7;



 color:#475467;



}







.campaign-status-badge.finalized{



 background:#f0fdf4;



 color:#166534;



}







.campaign-number{



 font-size:13px;



 font-weight:600;



 color:#344054;



 white-space:nowrap;



}







.campaign-delivery{



 min-width:95px;



}







.campaign-delivery-top{



 margin-bottom:5px;



 font-size:12px;



 color:#344054;



}







.campaign-progress{



 width:100%;



 height:6px;



 background:#eaecf0;



 border-radius:999px;



 overflow:hidden;



}







.campaign-progress-fill{



 height:100%;



 border-radius:999px;



 background:#12b76a;



 transition:width .25s ease;



}







.campaign-action-button{



 border:1px solid #d0d5dd;



 background:#fff;



 color:#344054;



 border-radius:7px;



 padding:7px 11px;



 font-size:12px;



 font-weight:600;



 cursor:pointer;



 white-space:nowrap;



}







.campaign-action-button:hover{



 background:#f9fafb;



}







.campaign-action-empty{



 color:#98a2b3;



}







@media(max-width:1100px){



 .campaigns-modern-table{



  min-width:980px;



 }



}








/* ===== ENTREGA DA CAMPANHA ===== */





.campaign-delivery{


 min-width:105px;


}





.campaign-delivery-percent{


 font-size:12px;


 font-weight:700;


 color:#344054;


 margin-bottom:5px;


}





.campaign-progress{


 width:100%;


 height:6px;


 background:#eaecf0;


 border-radius:999px;


 overflow:hidden;


}





.campaign-progress-fill{


 height:100%;


 min-width:0;


 border-radius:999px;


 background:#12b76a;


 transition:width .3s ease;


}





/* ===== STATUS DA CAMPANHA ===== */





.badge{


 display:inline-flex;


 align-items:center;


 justify-content:center;


 padding:5px 10px;


 border-radius:999px;


 font-size:11px;


 font-weight:700;


 line-height:1;


 white-space:nowrap;


}





.badge.active{


 background:#ecfdf3;


 color:#027a48;


}





.badge.paused{


 background:#fff7ed;


 color:#c2410c;


}





.badge.scheduled{


 background:#eff8ff;


 color:#175cd3;


}





.badge.draft{


 background:#f2f4f7;


 color:#475467;


}





.badge.finalized{


 background:#f0fdf4;


 color:#166534;


}





/* ===== DASHBOARD - CARDS OPERACIONAIS ===== */



#metrics{

 display:grid;

 grid-template-columns:repeat(4,minmax(0,1fr));

 gap:16px;

}



#metrics .metric{

 position:relative;

 min-height:118px;

 box-sizing:border-box;

 padding:18px 20px;

 border:1px solid #eaecf0;

 border-radius:14px;

 background:#fff;

 display:flex;

 flex-direction:column;

 justify-content:center;

 overflow:hidden;

}



#metrics .metric::after{

 content:'';

 position:absolute;

 left:0;

 bottom:0;

 width:100%;

 height:3px;

 background:#12b76a;

}



#metrics .metric span{

 font-size:13px;

 font-weight:600;

 color:#667085;

 margin-bottom:7px;

}



#metrics .metric b{

 font-size:28px;

 line-height:1.1;

 color:#101828;

 letter-spacing:-.5px;

}



#metrics .metric small{

 margin-top:6px;

 font-size:11px;

 color:#98a2b3;

}



@media(max-width:1000px){

 #metrics{

  grid-template-columns:repeat(2,minmax(0,1fr));

 }

}



@media(max-width:520px){

 #metrics{

  grid-template-columns:1fr;

 }

}


/* ===== DASHBOARD - ALERTAS ===== */

#dashAlerts{
 min-height:170px;
}

#dashAlerts .alert{
 display:flex;
 align-items:flex-start;
 gap:12px;
 padding:13px 15px;
 margin-bottom:9px;
 border:1px solid #fedf89;
 border-radius:10px;
 background:#fffaeb;
}

#dashAlerts .alert:last-child{
 margin-bottom:0;
}

#dashAlerts .alert b{
 display:block;
 color:#344054;
 font-size:13px;
 line-height:1.35;
}

#dashAlerts .alert small{
 display:block;
 margin-top:3px;
 color:#667085;
 font-size:12px;
 line-height:1.4;
}

#dashAlerts .alert::before{
 content:'!';
 display:flex;
 align-items:center;
 justify-content:center;
 flex:none;
 width:24px;
 height:24px;
 border-radius:50%;
 background:#f79009;
 color:#fff;
 font-size:12px;
 font-weight:800;
}

@media(max-width:700px){
 #dashAlerts .alert{
  padding:11px 12px;
 }
}


/* =========================================================
   CONTROLE DE STATUS DAS CAMPANHAS
   ========================================================= */

.campaign-status-control{
 position:relative;
 display:inline-block;
 min-width:125px;
}

.campaign-status-button{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:8px;
 width:100%;
 min-width:125px;
 padding:7px 10px;
 border:1px solid #d0d5dd;
 border-radius:6px;
 background:#fff;
 color:#101828;
 font-size:14px;
 font-weight:500;
 cursor:pointer;
}

.campaign-status-button:hover{
 background:#f9fafb;
}

.campaign-status-arrow{
 font-size:11px;
 transition:transform .15s ease;
}

.campaign-status-control.open .campaign-status-arrow{
 transform:rotate(180deg);
}

.campaign-status-menu{
 position:absolute;
 top:calc(100% + 6px);
 left:0;
 z-index:1000;
 display:none;
 min-width:150px;
 padding:6px;
 background:#fff;
 border:1px solid #eaecf0;
 border-radius:8px;
 box-shadow:0 8px 24px rgba(16,24,40,.12);
}

.campaign-status-control.open .campaign-status-menu{
 display:flex;
 flex-direction:column;
 gap:2px;
}

.campaign-status-menu button{
 width:100%;
 display:flex;
 align-items:center;
 gap:8px;
 padding:8px 10px;
 border:0;
 border-radius:6px;
 background:transparent;
 color:#101828;
 font-size:14px;
 text-align:left;
 cursor:pointer;
 white-space:nowrap;
}

.campaign-status-menu button:hover{
 background:#f2f4f7;
}

/* Cores dos status */

.campaign-status-control.status-active .campaign-status-button{
 color:#027a48;
 border-color:#abefc6;
 background:#f6fef9;
}

.campaign-status-control.status-paused .campaign-status-button{
 color:#b54708;
 border-color:#fedf89;
 background:#fffcf5;
}

.campaign-status-control.status-draft .campaign-status-button{
 color:#475467;
 border-color:#d0d5dd;
 background:#f9fafb;
}

.campaign-status-control.status-finalized .campaign-status-button{
 color:#344054;
 border-color:#d0d5dd;
 background:#f9fafb;
}


/* =========================================================
   CAMPAIGN DETAILS — ORGANIZAÇÃO DOS CAMPOS EDITÁVEIS
   ========================================================= */

#campaignDetailsModal .campaign-detail-summary{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:18px 24px;
 align-items:start;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(1){
 grid-column:1;
 grid-row:1;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(2){
 grid-column:2;
 grid-row:1;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(3){
 grid-column:1;
 grid-row:2;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(4){
 grid-column:2;
 grid-row:2;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(5){
 grid-column:3;
 grid-row:2;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(6){
 grid-column:3;
 grid-row:1;
}

#campaignDetailsModal .campaign-detail-summary input{
 max-width:100%;
 box-sizing:border-box;
}

@media(max-width:700px){
 #campaignDetailsModal .campaign-detail-summary{
  grid-template-columns:1fr 1fr;
 }

 #campaignDetailsModal .campaign-detail-summary > div{
  grid-column:auto !important;
  grid-row:auto !important;
 }
}

@media(max-width:480px){
 #campaignDetailsModal .campaign-detail-summary{
  grid-template-columns:1fr;
 }
}


/* =========================================================
   CAMPAIGN DETAILS — GRID FINAL DOS DADOS DA CAMPANHA
   ========================================================= */

#campaignDetailsModal .campaign-detail-summary{
 display:grid;
 grid-template-columns:2fr 2fr 1fr 1fr;
 gap:22px 24px;
 align-items:start;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(1){
 grid-column:1 / span 2;
 grid-row:1;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(2){
 grid-column:3 / span 2;
 grid-row:1;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(3){
 grid-column:1;
 grid-row:2;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(4){
 grid-column:2;
 grid-row:2;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(5){
 grid-column:3;
 grid-row:2;
}

#campaignDetailsModal .campaign-detail-summary > div:nth-child(6){
 grid-column:4;
 grid-row:2;
}

#campaignDetailsModal .campaign-detail-summary input{
 max-width:100%;
 box-sizing:border-box;
}

@media(max-width:700px){
 #campaignDetailsModal .campaign-detail-summary{
  grid-template-columns:1fr 1fr;
 }

 #campaignDetailsModal .campaign-detail-summary > div{
  grid-column:auto !important;
  grid-row:auto !important;
 }
}

@media(max-width:480px){
 #campaignDetailsModal .campaign-detail-summary{
  grid-template-columns:1fr;
 }
}


/* =========================================================
   CAMPAIGN DETAILS — CRIATIVOS E TELAS
   ========================================================= */

#campaignDetailsModal .creative-selector{
 display:flex;
 flex-direction:column;
 gap:10px;
 margin-top:14px;
}

#campaignDetailsModal .creative-option{
 display:flex;
 align-items:center;
 gap:12px;
 width:100%;
 min-height:64px;
 padding:12px 14px;
 box-sizing:border-box;
 background:#fff;
 border:1px solid #eaecf0;
 border-radius:12px;
 transition:border-color .15s ease, box-shadow .15s ease;
}

#campaignDetailsModal .creative-option:hover{
 border-color:#d0d5dd;
 box-shadow:0 2px 6px rgba(16,24,40,.06);
}

#campaignDetailsModal .creative-option-icon{
 display:flex;
 align-items:center;
 justify-content:center;
 flex:0 0 38px;
 width:38px !important;
 height:38px;
 border-radius:10px;
 background:#f2f4f7;
 color:#475467;
 font-size:16px;
}

#campaignDetailsModal .creative-option-info{
 flex:1;
 min-width:0 !important;
 display:flex;
 flex-direction:column;
 gap:4px;
}

#campaignDetailsModal .creative-option-info b{
 display:block;
 min-width:0 !important;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:14px;
 color:#101828;
}

#campaignDetailsModal .creative-option-info small{
 display:block;
 flex:none !important;
 color:#667085;
 font-size:12px;
}

#campaignDetailsModal .creative-option button{
 flex:none !important;
 margin-left:auto;
 white-space:nowrap;
}

#campaignDetailsModal .creative-option .refresh{
 flex:none !important;
}

@media(max-width:600px){
 #campaignDetailsModal .creative-option{
  align-items:flex-start;
 }

 #campaignDetailsModal .creative-option button{
  align-self:center;
 }
}