/* ===========================
   RESET / BASE
   =========================== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:'Segoe UI', Arial, sans-serif;
  background:#F4F6F8;
  color:#263238;
  line-height:1.4;
  transition:.3s;
}

.container{
  max-width:1300px;
  margin:0 auto;
  padding:0 25px 60px;
}

/* ===========================
   HEADER / NAV
   =========================== */
header{
  background:#0F4C81;
  color:white;
  padding:22px 25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}

header h1{
  font-size:22px;
}

header p{
  font-size:13px;
  opacity:.85;
  margin-top:4px;
}

.topo-direita{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.campo-busca{
  position:relative;
  display:flex;
  align-items:center;
}

.campo-busca input{
  padding-right:34px;
}

#btnLimparBusca{
  position:absolute;
  right:4px;
  width:26px;
  height:26px;
  padding:0;
  border-radius:50%;
  background:rgba(0,0,0,.15);
  color:#fff;
  font-size:16px;
  line-height:1;
  display:none;
}

.campo-busca input:not(:placeholder-shown) + #btnLimparBusca{
  display:block;
}

.opcao-busca{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}

.opcao-busca input{
  width:auto;
  padding:0;
  cursor:pointer;
}

.info-busca{
  padding:0 25px;
  margin-top:-4px;
  font-size:13px;
  color:#0B3760;
  font-weight:600;
}

.info-busca:empty{
  display:none;
}

select,
input{
  padding:10px 12px;
  border-radius:8px;
  border:none;
  font-size:14px;
}

button{
  padding:10px 16px;
  border-radius:8px;
  border:none;
  font-size:14px;
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}

nav{
  background:#0B3760;
  display:flex;
  gap:6px;
  padding:10px 25px;
}

.aba{
  background:transparent;
  color:#CFE0F0;
  border-radius:8px 8px 0 0;
  padding:10px 18px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
}

.aba.ativa{
  background:#F4F6F8;
  color:#0F4C81;
}

/* ===========================
   CARDS DE RESUMO
   =========================== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
  margin-top:25px;
}

.card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-left:6px solid #0F4C81;
}

.card h3{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#607D8B;
  margin-bottom:8px;
}

.card .valor{
  font-size:28px;
  font-weight:bold;
  color:#0F4C81;
}

/* ===========================
   SECOES / TITULOS
   =========================== */
.secao-titulo{
  margin-top:35px;
  margin-bottom:5px;
  font-size:19px;
  color:#0F4C81;
}

footer{
  text-align:center;
  padding:25px;
  font-size:12px;
  color:#90A4AE;
}

/* ===========================
   CALENDÁRIO
   =========================== */
#calendario{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
  margin-top:25px;
}

.dia{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  overflow:hidden;
  transition:.30s;
  cursor:pointer;
  border-top:6px solid #0F4C81;
}

.dia:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.numero{
  background:#0F4C81;
  color:white;
  padding:12px;
  font-size:22px;
  font-weight:bold;
  text-align:center;
}

.conteudo{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.turno{
  border-radius:10px;
  padding:10px;
  font-size:14px;
}

.turno h4{
  margin-bottom:8px;
  font-size:15px;
}

.turno ul{
  list-style:none;
}

.turno li{
  padding:3px 0;
}

.manha{
  background:#E3F2FD;
  border-left:5px solid #1976D2;
}

.tarde{
  background:#FFF3E0;
  border-left:5px solid #FB8C00;
}

.intermediario{
  background:#E8F5E9;
  border-left:5px solid #43A047;
}

.plantao{
  background:#FCE4EC;
  border-left:5px solid #D81B60;
}

.folga{
  background:#F5F5F5;
  border-left:5px solid #9E9E9E;
}

.destaque{
  outline:4px solid #FFD54F;
  transform:scale(1.02);
}

.oculto{
  opacity:.25;
  filter:grayscale(1);
}

.nome-encontrado{
  background:#FFD54F;
  border-radius:5px;
  padding:1px 6px;
  font-weight:700;
  color:#3E2723;
}

.fds-card.destaque{
  outline:3px solid #FFD54F;
}

/* ===========================
   PLANTÕES FIM DE SEMANA
   =========================== */
#fimDeSemana{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
  margin-top:25px;
}

.fds-card{
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  border-left:6px solid #D81B60;
}

.fds-card h4{
  color:#0F4C81;
  margin-bottom:6px;
}

.fds-card .tag{
  display:inline-block;
  margin-top:8px;
  background:#FCE4EC;
  color:#D81B60;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
}

/* ===========================
   MODAL
   =========================== */
.modal{
  display:none;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.55);
  justify-content:center;
  align-items:center;
  z-index:9999;
  animation:fade .25s;
}

.modal.ativo{
  display:flex;
}

.modal-box{
  width:min(650px,95%);
  background:white;
  border-radius:16px;
  padding:25px;
  box-shadow:0 15px 40px rgba(0,0,0,.25);
  position:relative;
  animation:zoom .20s;
}

#fechar{
  position:absolute;
  right:18px;
  top:12px;
  font-size:28px;
  cursor:pointer;
  font-weight:bold;
}

#modalConteudo h2{
  margin-bottom:15px;
  color:#0F4C81;
}

#modalConteudo h3{
  margin-top:18px;
  margin-bottom:8px;
  font-size:17px;
}

#modalConteudo ul{
  margin-left:18px;
}

#modalConteudo li{
  padding:4px 0;
}

/* ===========================
   MODO EDIÇÃO
   =========================== */
.barra-edicao{
  background:#FFF8E1;
  border-bottom:3px solid #FFB300;
  color:#5D4037;
  padding:12px 25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  font-weight:600;
}

.barra-edicao-botoes{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

body.dark .barra-edicao{
  background:#3E3316;
  color:#FFECB3;
}

.dica-edicao{
  font-size:13px;
  color:#607D8B;
  margin-bottom:10px;
}

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

.lista-editavel li.vazio{
  color:#90A4AE;
  font-style:italic;
  justify-content:flex-start;
}

.btn-remover{
  background:#FFEBEE;
  color:#C62828;
  border-radius:50%;
  width:26px;
  height:26px;
  min-width:26px;
  padding:0;
  font-size:16px;
  line-height:1;
}

.btn-remover:hover{
  background:#EF5350;
  color:white;
}

.add-pessoa{
  display:flex;
  gap:8px;
  margin:8px 0 10px;
}

.add-pessoa input{
  flex:1;
  border:1px solid #CFD8DC;
}

.add-pessoa button{
  padding:8px 14px;
  font-size:13px;
}

.fds-card label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#607D8B;
  margin-top:10px;
}

.fds-card label input,
.fds-card label select{
  width:100%;
  margin-top:4px;
  border:1px solid #CFD8DC;
}

.fds-card .btn-remover-fds{
  margin-top:14px;
  width:100%;
  font-size:13px;
}

.fds-novo{
  border-left-color:#43A047;
  border:2px dashed #A5D6A7;
}

.fds-novo .btn-add-fds{
  margin-top:14px;
  width:100%;
}

/* ===========================
   BOTÕES
   =========================== */
button{
  background:#0F4C81;
  color:white;
}

button:hover{
  background:#1565C0;
}

button.secundario{
  background:#ECEFF1;
  color:#263238;
}

button.secundario:hover{
  background:#CFD8DC;
}

/* ===========================
   RESPONSIVO
   =========================== */
@media(max-width:1100px){
  #calendario{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:700px){
  header{
    flex-direction:column;
    gap:18px;
  }

  .topo-direita{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }

  select,input,
  button{
    width:100%;
  }

  #calendario{
    grid-template-columns:1fr;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .modal-box{
    width:96%;
    padding:18px;
  }
}

/* ===========================
   MODO ESCURO
   =========================== */
body.dark{
  background:#101418;
  color:#ECEFF1;
}

body.dark header{
  background:#1B263B;
}

body.dark nav{
  background:#101418;
}

body.dark .card{
  background:#1E293B;
  color:white;
}

body.dark .dia{
  background:#1E293B;
  color:white;
}

body.dark .fds-card{
  background:#1E293B;
  color:white;
}

body.dark .modal-box{
  background:#1E293B;
  color:white;
}

body.dark footer{
  color:#90A4AE;
}

body.dark select,
body.dark input{
  background:#263238;
  color:white;
}

body.dark .aba{
  background:#263238;
  color:white;
}

body.dark .ativa{
  background:#1976D2;
}

/* ===========================
   ANIMAÇÕES
   =========================== */
@keyframes zoom{
  from{
    transform:scale(.8);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes fade{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

/* ===========================
   IMPRESSÃO A4
   =========================== */
@media print{
  header, nav, .topo-direita, .modal, footer, .barra-edicao{
    display:none !important;
  }
  body{
    background:white;
    color:black;
  }
  #calendario{
    grid-template-columns:repeat(3,1fr);
  }
  .dia{
    box-shadow:none;
    border:1px solid #ccc;
    break-inside:avoid;
  }
}