*{
  box-sizing:border-box
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background:#f4f7fb;
  color:#10213d
}

.hidden{
  display:none!important
}

/* LOGIN */
.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:linear-gradient(155deg,#064f91,#0874c9 48%,#eef6fc 48%)
}

.login-card{
  width:min(100%,420px);
  background:#fff;
  border-radius:24px;
  padding:30px;
  box-shadow:0 24px 70px #002b5540
}

/* LOGO CSC */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#075da8
}

.brand-logo{
  display:block;
  width:105px;
  height:105px;
  object-fit:contain;
  object-position:center;
  flex-shrink:0
}

/* Logo menor no cabeçalho do painel */
.brand.small .brand-logo{
  width:48px;
  height:48px
}

/* Mantido caso ainda exista algum brand-mark */
.brand-mark{
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border-radius:14px;
  background:#075da8;
  color:white;
  font-size:25px;
  font-weight:800
}

.brand b{
  display:block;
  font-size:28px;
  line-height:24px
}

.brand span{
  font-size:10px;
  letter-spacing:4px
}

.brand.small b{
  font-size:23px
}

.brand.small .brand-mark{
  width:38px;
  height:38px
}

.eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#0874c9;
  margin-top:28px
}

h1{
  font-size:30px;
  margin:8px 0
}

.muted{
  color:#65738a;
  line-height:1.5
}

label{
  display:block;
  font-weight:700;
  font-size:14px;
  margin:18px 0 8px
}

input{
  display:block;
  width:100%;
  margin-top:8px;
  padding:15px;
  border:1px solid #d7e0ea;
  border-radius:12px;
  font-size:16px;
  outline:none
}

input:focus{
  border-color:#0874c9;
  box-shadow:0 0 0 3px #0874c920
}

button{
  font:inherit;
  cursor:pointer
}

form button{
  width:100%;
  border:0;
  border-radius:12px;
  background:#075da8;
  color:#fff;
  font-weight:800;
  padding:15px;
  margin-top:10px
}

.link-btn{
  border:0;
  background:none;
  color:#075da8;
  width:100%;
  padding:16px
}

.demo{
  text-align:center;
  color:#8a96a8;
  font-size:11px
}

/* APP */
.app{
  min-height:100vh;
  padding-bottom:76px
}

.app header{
  height:72px;
  background:#075da8;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(20px,calc((100% - 760px)/2));
  box-shadow:0 3px 15px #001d3a20
}

.app header .brand{
  color:#fff
}

.app header .brand-mark{
  background:#fff;
  color:#075da8
}

.icon-btn{
  border:0;
  background:#ffffff1f;
  color:#fff;
  border-radius:10px;
  padding:9px 12px
}

.content{
  max-width:760px;
  margin:auto;
  padding:22px
}

.content .eyebrow{
  margin-top:0
}

.content h2{
  font-size:27px;
  margin:5px 0
}

.next-service{
  background:linear-gradient(135deg,#075da8,#0b78c8);
  color:#fff;
  border-radius:20px;
  padding:20px;
  margin:22px 0;
  box-shadow:0 12px 28px #075da830
}

.row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}

.badge{
  font-size:10px;
  font-weight:800;
  letter-spacing:1px
}

.status,
.done{
  background:#e3f7eb;
  color:#177742;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800
}

.next-service h3{
  font-size:21px;
  margin:20px 0 12px
}

.next-service p{
  margin:7px 0;
  color:#e9f5ff
}

.section-title{
  margin:26px 0 12px
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.tile{
  text-align:left;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:17px;
  padding:18px;
  min-height:145px;
  box-shadow:0 5px 15px #001d3a0a
}

.tile span{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:#e9f4fd;
  color:#075da8;
  font-size:20px;
  margin-bottom:18px
}

.tile b,
.tile small{
  display:block
}

.tile b{
  font-size:14px
}

.tile small{
  color:#778399;
  margin-top:6px;
  line-height:1.3
}

.history{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:17px;
  overflow:hidden
}

.history>div{
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eef2f6
}

.history>div:last-child{
  border:0
}

.history b,
.history small{
  display:block
}

.history small{
  color:#8490a2;
  margin-top:4px
}

nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:68px;
  background:#fff;
  border-top:1px solid #e2e8f0;
  display:flex;
  justify-content:center;
  z-index:5
}

nav button{
  width:min(25%,190px);
  border:0;
  background:none;
  color:#075da8;
  font-size:20px
}

nav span{
  display:block;
  font-size:10px;
  margin-top:4px
}

#toast{
  position:fixed;
  left:50%;
  bottom:90px;
  transform:translateX(-50%) translateY(20px);
  background:#10213d;
  color:white;
  padding:12px 16px;
  border-radius:12px;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:20;
  font-size:13px
}

#toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0)
}

/* CELULAR */
@media(max-width:480px){
  .login-card{
    padding:24px
  }

  .brand-logo{
    width:76px;
    height:76px
  }

  .brand.small .brand-logo{
    width:44px;
    height:44px
  }

  .grid{
    gap:10px
  }

  .tile{
    padding:15px;
    min-height:135px
  }

  .content{
    padding:18px
  }

  h1{
    font-size:27px
  }
}