:root{
  --azul:#06276d;
  --azul2:#0b55c8;
  --borda:#d6dce6;
  --txt:#10204a;
  --verde:#07852a;
  --ouro:#bd8600;
  --vermelho:#b42318;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:#eef4ff;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--txt);
}

.app{
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 24px #00000010;
}

header{
  background:radial-gradient(circle at top left,#0f60d9,#061f5d 70%);
  color:white;
  text-align:center;
  padding:15px 10px 11px;
}

header h1{
  margin:0;
  font-size:27px;
  line-height:29px;
  letter-spacing:.5px;
}

header div{
  font-size:14px;
  color:#c8dcff;
  font-weight:700;
  margin-top:4px;
}

main{
  padding:13px 14px 18px;
  overflow-y:auto;
  flex:1;
}

label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#082461;
  margin-bottom:5px;
  text-transform:uppercase;
}

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

.field{margin-bottom:10px}

.half-field{
  width:calc(50% - 5px);
}

.date-pair{
  display:grid;
  grid-template-columns:1fr 86px;
  gap:7px;
}

.date-pair select{
  height:38px;
}

.calc-date{
  grid-template-columns:1fr 100px;
}


select,input{
  width:100%;
  height:38px;
  border:1px solid var(--borda);
  border-radius:9px;
  background:white;
  font-size:15px;
  padding:0 10px;
  color:#222;
  outline:none;
}

input:focus,select:focus{
  border-color:#0b55c8;
  box-shadow:0 0 0 3px #0b55c81a;
}

.iconinput{position:relative}

.iconinput span{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
  line-height:1;
}

.iconinput input{padding-left:38px}

.iconinput em{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:#6b7280;
  font-size:12px;
  font-style:normal;
  font-weight:800;
  pointer-events:none;
}

.iconinput input.has-unit{
  padding-right:34px;
}

.fa-whatsapp{
  color:#25D366;
  font-size:22px;
}

.radio-card{
  border:1px solid var(--borda);
  border-radius:11px;
  padding:9px 7px;
  background:#fff;
  margin-bottom:10px;
}

.radio-title{
  font-size:11px;
  font-weight:800;
  color:#082461;
  text-transform:uppercase;
  margin-bottom:7px;
}

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

.opt{
  height:34px;
  border:1px solid var(--borda);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:800;
  color:#082461;
  cursor:pointer;
  user-select:none;
  background:white;
}

.circle{
  width:17px;
  height:17px;
  border:2px solid #9098a6;
  border-radius:50%;
}

.opt.active{background:#f3f7ff}

.opt.active .circle{border:5px solid #0755ca}

.compact-radio{
  padding:6px;
  margin-bottom:10px;
}

.compact-radio .radio-title{
  font-size:10px;
  margin-bottom:5px;
}

.compact-radio .opts{
  gap:4px;
}

.compact-radio .opt{
  height:26px;
  gap:3px;
  border-radius:7px;
  font-size:11px;
}

.compact-radio .circle{
  width:13px;
  height:13px;
  border-width:2px;
}

.compact-radio .opt.active .circle{
  border-width:4px;
}

.check-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  margin:0 0 10px;
  color:#082461;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
}

.check-line input{
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  accent-color:#0b55c8;
  cursor:pointer;
}

.areas-complementares-campos[hidden]{display:none}

.areas-complementares-campos{
  margin-bottom:10px;
}

.paralisacao-campos[hidden]{display:none}

.paralisacao-campos{
  margin-bottom:10px;
}

.paralisacao-row{
  display:grid;
  grid-template-columns:1fr 1fr 38px;
  gap:8px;
  align-items:end;
  margin-bottom:8px;
}

.paralisacao-row .field{
  margin-bottom:0;
}

.add-paralisacao{
  width:38px;
  height:38px;
  border:1px solid #063291;
  border-radius:9px;
  background:#0b55c8;
  color:#fff;
  font-size:22px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.banner{
  height:46px;
  background:linear-gradient(90deg,#063291,#061f5d);
  border-radius:10px;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:21px;
  font-weight:900;
  margin:10px 0;
}

.banner span{
  border:2px solid white;
  border-radius:50%;
  width:31px;
  height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.result{
  min-height:51px;
  border:1px solid #e1e6ef;
  border-radius:12px;
  margin-bottom:7px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  background:#f7faff;
  box-shadow:0 3px 10px #0000000d;
}

.result .ico{
  width:31px;
  height:31px;
  border-radius:50%;
  background:#0b57d0;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.result small{
  font-size:10.5px;
  font-weight:800;
  color:#10204a;
  line-height:13px;
}

.result b{
  font-size:17px;
  color:#0b57d0;
  white-space:nowrap;
}

.result.verde{background:#f0fff4}
.result.verde .ico{background:var(--verde)}
.result.verde b{color:var(--verde)}

.result.ouro{background:#fff9e9}
.result.ouro .ico{background:var(--ouro)}
.result.ouro b{color:var(--ouro)}

.result.red{background:#fff4f2}
.result.red .ico{background:var(--vermelho)}
.result.red b{color:var(--vermelho)}

.formula,.detail,.aviso{
  font-size:11px;
  color:#5c6678;
  line-height:15px;
  margin:4px 0 9px;
  background:#f8fafc;
  border:1px solid #e6ebf2;
  border-radius:8px;
  padding:7px 9px;
}

.aviso:empty{display:none}

.aviso{
  color:#b42318;
  background:#fff4f2;
  border-color:#ffd8d4;
}

.detail summary{
  font-weight:900;
  color:#082461;
  cursor:pointer;
}

.tablewrap{
  overflow:auto;
  margin-top:8px;
  max-height:320px;
  border:1px solid #e6ebf2;
  border-radius:8px;
}

table{
  border-collapse:collapse;
  width:100%;
  font-size:10.5px;
  background:white;
}

th,td{
  border-bottom:1px solid #e6ebf2;
  padding:5px 6px;
  text-align:right;
  white-space:nowrap;
}

th:first-child,td:first-child{text-align:left}

th{
  background:#f2f6ff;
  color:#082461;
  position:sticky;
  top:0;
}

.note{
  font-size:10px;
  color:#6b7280;
  line-height:14px;
  margin-top:6px;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
  padding-bottom:4px;
}

.btn{
  height:44px;
  border:0;
  border-radius:10px;
  font-size:15px;
  font-weight:900;
  color:white;
  background:linear-gradient(90deg,#075be0,#063291);
  cursor:pointer;
}

.btn.clear{
  background:#f8fafc;
  color:#4a5568;
  border:1px solid var(--borda);
}

@media(max-width:380px){
  header h1{font-size:25px}
  main{padding:12px}
  .row{gap:8px}
  .half-field{width:calc(50% - 4px)}
  .result b{font-size:15px}
  .result small{font-size:10px}
  .banner{font-size:19px}
  .paralisacao-row{grid-template-columns:1fr}
  .add-paralisacao{width:100%}
}


.month-picker{
  border:1px solid var(--borda);
  border-radius:9px;
  padding:6px;
  background:#fff;
}

.month-picker .year-select{
  width:100%;
  height:30px;
  border:1px solid #d5dce8;
  border-radius:7px;
  background:#f8fafc;
  font-size:13px;
  font-weight:800;
  color:#082461;
  margin-bottom:6px;
}

.month-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.month-btn{
  height:27px;
  border:1px solid transparent;
  border-radius:6px;
  background:#fff;
  color:#111827;
  font-size:12px;
  cursor:pointer;
}

.month-btn.active{
  background:#0b55c8;
  border-color:#063291;
  color:#fff;
  font-weight:900;
}

.month-btn.disabled{
  opacity:.35;
  cursor:not-allowed;
  background:#f3f4f6;
}

.calc-picker .month-grid{
  grid-template-columns:repeat(4,1fr);
}


/* v11 datepicker recolhido */
.date-collapsible{position:relative}
.date-display{
  width:100%;
  height:38px;
  border:1px solid var(--borda);
  border-radius:9px;
  background:#fff;
  display:grid;
  grid-template-columns:28px 1fr 20px;
  align-items:center;
  gap:4px;
  padding:0 8px;
  color:#111827;
  font-size:14px;
  cursor:pointer;
  text-align:left;
}
.date-display.open{
  border-color:#0b55c8;
  box-shadow:0 0 0 3px #0b55c81a;
}
.date-icon{font-size:16px;display:flex;justify-content:center}
.date-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-arrow{color:#526174;font-size:12px;text-align:right}
.date-panel{
  display:none;
  margin-top:6px;
  border:1px solid var(--borda);
  border-radius:9px;
  padding:6px;
  background:#fff;
  box-shadow:0 8px 22px #00000012;
  z-index:5;
}
.date-panel.open{display:block}
.date-panel .year-select{
  width:100%;
  height:30px;
  border:1px solid #d5dce8;
  border-radius:7px;
  background:#f8fafc;
  font-size:13px;
  font-weight:800;
  color:#082461;
  margin-bottom:6px;
}
.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.month-btn{
  height:27px;
  border:1px solid transparent;
  border-radius:6px;
  background:#fff;
  color:#111827;
  font-size:12px;
  cursor:pointer;
}
.month-btn.active{background:#0b55c8;border-color:#063291;color:#fff;font-weight:900}
.month-btn.disabled{opacity:.35;cursor:not-allowed;background:#f3f4f6}
[data-picker="calculo"] .month-grid{grid-template-columns:repeat(4,1fr)}