/* =============================================================================
   Gestao de Inspetores — camada propria sobre o Bootstrap 5.
   A cor principal vem do parametro tema_cor, injetado em --marca pelo header.
   ========================================================================== */

:root {
  --marca:        #14304f;
  --marca-clara:  #1d4b7d;
  --marca-suave:  #eaf1f8;

  --lateral: 258px;
  --topo:    58px;

  --tinta:        #1f2733;
  --tinta-suave:  #667085;
  --linha:        #e4e8ee;
  --fundo:        #f4f6f9;
  --papel:        #ffffff;

  --ok:      #1c8b5a;
  --alerta:  #c98a04;
  --perigo:  #c8402f;
  --info:    #0f7f96;
  --roxo:    #6a4bb0;
  --laranja: #d97706;

  --raio:   12px;
  --raio-p: 8px;
  --sombra:   0 1px 2px rgba(16, 29, 51, .06), 0 2px 8px rgba(16, 29, 51, .05);
  --sombra-f: 0 6px 24px rgba(16, 29, 51, .12);
}

* { scrollbar-width: thin; }

body {
  padding-top: var(--topo);
  background: var(--fundo);
  color: var(--tinta);
  font-size: .925rem;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Login -- */
.tela-login {
  padding-top: 0;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(29, 75, 125, .55), transparent 60%),
    linear-gradient(155deg, #0e1c2f 0%, #16324f 55%, #0b1524 100%);
}
.caixa-login { width: 100%; max-width: 420px; padding: 1.25rem; }
.caixa-login .cartao-login {
  background: var(--papel);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.login-marca {
  padding: 1.75rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--linha);
  text-align: center;
}
.login-marca img { max-height: 62px; max-width: 200px; object-fit: contain; }
.login-marca .simbolo {
  width: 56px; height: 56px; margin: 0 auto .75rem;
  display: grid; place-items: center;
  border-radius: 16px; font-size: 1.6rem; color: #fff;
  background: linear-gradient(140deg, var(--marca-clara), var(--marca));
}
.login-corpo { padding: 1.5rem 1.75rem 1.75rem; }
.login-rodape { text-align: center; color: rgba(255, 255, 255, .55); font-size: .78rem; margin-top: 1rem; }

/* ------------------------------------------------------------ Estrutura -- */
.navbar-topo {
  height: var(--topo);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 2px rgba(16, 29, 51, .04);
}
.navbar-topo .marca {
  display: flex; align-items: center; gap: .6rem;
  color: var(--tinta); font-weight: 650; letter-spacing: -.01em;
}
.navbar-topo .marca:hover { text-decoration: none; color: var(--marca); }
.navbar-topo .marca img { max-height: 34px; max-width: 150px; object-fit: contain; }
.navbar-topo .marca .simbolo {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; font-size: 1rem;
  background: linear-gradient(140deg, var(--marca-clara), var(--marca));
}

.barra-lateral {
  width: var(--lateral);
  background: linear-gradient(180deg, #12243c 0%, #0e1c2f 100%);
  border-right: 0;
}
.conteudo {
  padding: 1.35rem 1.5rem 2rem;
  min-height: calc(100vh - var(--topo) - 44px);
}
.rodape {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .65rem 1.5rem; font-size: .78rem; color: var(--tinta-suave);
  border-top: 1px solid var(--linha); background: var(--papel);
}

@media (min-width: 992px) {
  .barra-lateral {
    position: fixed; top: var(--topo); bottom: 0; left: 0;
    overflow-y: auto; z-index: 1020;
  }
  .conteudo, .rodape { margin-left: var(--lateral); }
}

/* ----------------------------------------------------------------- Menu -- */
.menu-grupo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255, 255, 255, .38); padding: 1.05rem 1.15rem .35rem; font-weight: 600;
}
.barra-lateral .nav-link {
  color: rgba(255, 255, 255, .78);
  padding: .5rem .85rem; margin: .1rem .6rem; border-radius: var(--raio-p);
  display: flex; align-items: center; gap: .65rem; font-size: .875rem;
  transition: background .12s ease, color .12s ease;
}
.barra-lateral .nav-link i { font-size: 1rem; opacity: .85; width: 1.15rem; text-align: center; }
.barra-lateral .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.barra-lateral .nav-link.ativo {
  background: var(--marca-clara); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55);
}
.barra-lateral .nav-link.ativo i { opacity: 1; }
.barra-lateral .contador {
  margin-left: auto; font-size: .68rem; font-weight: 700;
  background: rgba(255, 255, 255, .16); color: #fff;
  border-radius: 999px; padding: .1rem .45rem;
}
.barra-lateral .contador.urgente { background: var(--perigo); }

/* ------------------------------------------------------- Topo de pagina -- */
.pagina-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: .85rem; margin-bottom: 1.15rem;
}
.pagina-titulo { font-size: 1.35rem; font-weight: 680; margin: 0; letter-spacing: -.015em; }
.pagina-sub { color: var(--tinta-suave); font-size: .85rem; margin-top: .2rem; max-width: 70ch; }
.grupo-titulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-suave); font-weight: 700; margin: .5rem 0 .65rem;
}

/* --------------------------------------------------------------- Cartao -- */
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao-cabecalho {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--linha);
}
.cartao-titulo { font-size: .95rem; font-weight: 640; margin: 0; display: flex; align-items: center; gap: .45rem; }
.cartao-titulo i { color: var(--marca-clara); }
.cartao-ajuda { font-size: .8rem; color: var(--tinta-suave); margin: .15rem 0 0; }
.cartao-corpo { padding: 1rem; }
.cartao-rodape {
  padding: .6rem 1rem; border-top: 1px solid var(--linha);
  font-size: .82rem; background: #fbfcfd; border-radius: 0 0 var(--raio) var(--raio);
}
.cartao-filtro { box-shadow: none; padding: .85rem; }
.cartao-filtro .cartao-cabecalho { margin: -.85rem -.85rem .85rem; }
.cartao-filtro .form-label { margin-bottom: .15rem; }

.passo {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--marca-suave); color: var(--marca);
  font-size: .8rem; font-weight: 700;
}

/* ------------------------------------------------------------------ KPI -- */
.kpi {
  display: grid; gap: .1rem;
  position: relative; height: 100%;
  padding: .95rem 1rem 1rem;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
  color: var(--tinta); overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kpi:hover { text-decoration: none; color: var(--tinta); transform: translateY(-2px); box-shadow: var(--sombra-f); }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tinta-suave); }
.kpi-icone {
  position: absolute; right: .8rem; top: .8rem;
  font-size: 1.5rem; opacity: .16;
}
.kpi-rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); font-weight: 650; }
.kpi-numero { font-size: 1.95rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kpi-ajuda  { font-size: .76rem; color: var(--tinta-suave); }

.kpi.tom-perigo::before  { background: var(--perigo); }  .kpi.tom-perigo  .kpi-icone { color: var(--perigo); }
.kpi.tom-alerta::before  { background: var(--alerta); }  .kpi.tom-alerta  .kpi-icone { color: var(--alerta); }
.kpi.tom-info::before    { background: var(--info); }    .kpi.tom-info    .kpi-icone { color: var(--info); }
.kpi.tom-roxo::before    { background: var(--roxo); }    .kpi.tom-roxo    .kpi-icone { color: var(--roxo); }
.kpi.tom-sucesso::before { background: var(--ok); }      .kpi.tom-sucesso .kpi-icone { color: var(--ok); }
.kpi.tom-laranja::before { background: var(--laranja); } .kpi.tom-laranja .kpi-icone { color: var(--laranja); }
.kpi.tom-neutro::before  { background: var(--marca-clara); } .kpi.tom-neutro .kpi-icone { color: var(--marca-clara); }
.kpi.tom-perigo.zerado .kpi-numero,
.kpi.tom-alerta.zerado .kpi-numero { color: var(--ok); }

/* -------------------------------------------------------------- Tabelas -- */
.tabela-compacta { font-size: .855rem; margin-bottom: 0; }
.tabela-compacta td, .tabela-compacta th { vertical-align: middle; padding: .55rem .7rem; }
.tabela-compacta thead th {
  background: #f7f9fb; color: var(--tinta-suave);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela-compacta tbody tr:hover { background: #f9fbfd; }
.tabela-rolagem { overflow-x: auto; border-radius: 0 0 var(--raio) var(--raio); }
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel::after { content: " ⇅"; opacity: .35; font-size: .8em; }
.vazio { text-align: center; color: var(--tinta-suave); padding: 2rem 1rem !important; }

/* --------------------------------------------------------------- Listas -- */
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--linha); font-size: .86rem;
}
.lista-simples li:last-child { border-bottom: 0; }
.rolagem-media { max-height: 290px; overflow-y: auto; }

.lista-medidor { list-style: none; margin: 0; padding: .85rem 1rem; }
.lista-medidor li + li { margin-top: .8rem; }
.medidor-topo { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; margin-bottom: .25rem; }
.medidor { height: 7px; background: #eef1f5; border-radius: 999px; overflow: hidden; }
.medidor span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--marca-clara), var(--marca)); }

/* -------------------------------------------------------------- Grafico -- */
.grafico-barras {
  display: flex; align-items: flex-end; gap: .6rem;
  height: 168px; padding-top: .5rem;
}
.grafico-barras.compacto { height: 128px; }
.barra-item { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.barra-valor { font-size: .74rem; font-weight: 700; color: var(--tinta-suave); margin-bottom: .2rem; }
.barra {
  width: 100%; max-width: 46px; margin-top: auto;
  border-radius: 6px 6px 0 0; position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--marca-clara), var(--marca));
}
.barra.laranja { background: linear-gradient(180deg, #f0a13a, var(--laranja)); }
.barra-parcial { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .28); }
.barra-rotulo { font-size: .7rem; color: var(--tinta-suave); margin-top: .35rem; white-space: nowrap; }

.barra-empilhada { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #eef1f5; }
.barra-empilhada .fatia { display: block; height: 100%; }
.fatia.cinza { background: #98a2b3; } .fatia.azul { background: var(--marca-clara); }
.fatia.amarelo { background: var(--alerta); } .fatia.verde { background: var(--ok); }

.legenda { font-size: .76rem; color: var(--tinta-suave); margin: .75rem 0 0; }
.legenda-lista { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; font-size: .8rem; }
.ponto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .25rem; }
.ponto.cinza { background: #98a2b3; } .ponto.azul { background: var(--marca-clara); }
.ponto.amarelo { background: var(--alerta); } .ponto.verde { background: var(--ok); }
.ponto.laranja { background: #f0a13a; } .ponto.laranja-escuro { background: #8a5205; }

/* ---------------------------------------------------------------- Abas --- */
.nav-abas { border-bottom: 1px solid var(--linha); gap: .25rem; }
.nav-abas .nav-link {
  color: var(--tinta-suave); font-size: .87rem; font-weight: 550;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--raio-p) var(--raio-p) 0 0; padding: .5rem .9rem;
  display: flex; align-items: center; gap: .4rem;
}
.nav-abas .nav-link:hover { color: var(--marca); background: #eef2f7; text-decoration: none; }
.nav-abas .nav-link.active {
  color: var(--marca); background: var(--papel);
  border-color: var(--linha); margin-bottom: -1px; font-weight: 650;
}

/* --------------------------------------------------- Formulario / chips -- */
.form-label { font-size: .8rem; font-weight: 600; color: #3c4757; margin-bottom: .25rem; }
.form-obrigatorio::after { content: " *"; color: var(--perigo); }
.form-text { font-size: .76rem; }
.form-control, .form-select { border-color: #d6dce5; }
.form-control:focus, .form-select:focus {
  border-color: var(--marca-clara);
  box-shadow: 0 0 0 3px rgba(29, 75, 125, .12);
}

.seletor-modo { display: flex; gap: .35rem; background: #eef2f7; padding: .25rem; border-radius: var(--raio-p); }
.seletor-modo label { flex: 1; margin: 0; }
.seletor-modo input { position: absolute; opacity: 0; pointer-events: none; }
.seletor-modo span {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .4rem .5rem; border-radius: 6px; font-size: .82rem; font-weight: 600;
  color: var(--tinta-suave); cursor: pointer; transition: all .12s ease;
}
.seletor-modo input:checked + span { background: var(--papel); color: var(--marca); box-shadow: var(--sombra); }

.chips-dias, .chips-turno { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { margin: 0; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid #d6dce5; background: var(--papel);
  font-size: .8rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer;
  transition: all .12s ease;
}
.chip input:checked + span { background: var(--marca); border-color: var(--marca); color: #fff; }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(29, 75, 125, .2); }
.chip-manha input:checked + span      { background: #1c8b5a; border-color: #1c8b5a; }
.chip-tarde input:checked + span      { background: #c98a04; border-color: #c98a04; }
.chip-noite input:checked + span      { background: #6a4bb0; border-color: #6a4bb0; }
.chip-sobreaviso input:checked + span { background: #c8402f; border-color: #c8402f; }

.lista-selecao {
  max-height: 330px; overflow-y: auto;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
}
.item-selecao {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .7rem; border-bottom: 1px solid var(--linha);
  font-size: .85rem; cursor: pointer; margin: 0;
}
.item-selecao:last-child { border-bottom: 0; }
.item-selecao:hover { background: #f7f9fc; }
.item-selecao input { margin-top: .15rem; }
.item-selecao small { font-size: .74rem; }

.atalhos-periodo { display: flex; flex-wrap: wrap; gap: .3rem; }
.aviso-limpar {
  background: #fdf3f2; border: 1px solid #f6d5d1; color: #8f2c1f;
  border-radius: var(--raio-p); padding: .65rem .8rem; font-size: .8rem;
}

.barra-acao {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .75rem 1rem; box-shadow: var(--sombra-f);
}
.resumo-previa { display: flex; gap: .5rem; align-items: center; font-size: .84rem; color: var(--tinta-suave); }
.resumo-previa i { font-size: 1.1rem; color: var(--marca-clara); }
.resumo-previa.perigo { color: #8f2c1f; }
.resumo-previa.perigo i { color: var(--perigo); }

/* ------------------------------------------------------------ Relatorio -- */
.cartao-relatorio { transition: transform .12s ease, box-shadow .12s ease; }
.cartao-relatorio:hover { transform: translateY(-2px); box-shadow: var(--sombra-f); }
.cartao-relatorio.destacado { border-color: var(--marca-clara); box-shadow: 0 0 0 3px rgba(29, 75, 125, .12); }
.icone-relatorio {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--marca-suave); color: var(--marca); font-size: 1.2rem;
}
.icone-relatorio.destaque { background: var(--marca); color: #fff; }
.filtros-aceitos { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0 .7rem; }
.pastilha {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  background: #f0f3f7; color: var(--tinta-suave); border-radius: 4px; padding: .1rem .35rem; font-weight: 600;
}
.botoes-formato { display: flex; flex-wrap: wrap; gap: .35rem; }
.menu-exportar { min-width: 270px; }
.menu-exportar .dropdown-item { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .9rem; }
.menu-exportar .dropdown-item i { font-size: 1.05rem; margin-top: .1rem; }
.menu-exportar small { font-size: .72rem; }

/* -------------------------------------------------------------- Kanban --- */
.kanban-rolagem { overflow-x: auto; padding-bottom: .5rem; }
.kanban { display: grid; grid-template-columns: repeat(var(--kanban-colunas, 4), minmax(250px, 1fr)); gap: .75rem; align-items: start; }
.kanban-coluna { background: #eef1f5; border-radius: var(--raio); padding: .6rem; min-height: 180px; border-top: 3px solid var(--cor-coluna, #98a2b3); }
.kanban-coluna.arrastando { outline: 2px dashed var(--marca-clara); outline-offset: -4px; }
.kanban-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 700; padding: .25rem .25rem .5rem; }
.kanban-cartao { background: var(--papel); border-radius: var(--raio-p); padding: .6rem .7rem; margin-bottom: .5rem; box-shadow: var(--sombra); cursor: grab; }
.kanban-cartao.prioridade-ALTA  { border-left: 4px solid var(--perigo); }
.kanban-cartao.prioridade-MEDIA { border-left: 4px solid var(--alerta); }
.kanban-cartao.prioridade-BAIXA { border-left: 4px solid #98a2b3; }
@media (max-width: 991px) { .kanban { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Demandas --- */
.kanban-cartao { transition: box-shadow .12s ease, transform .12s ease; }
.kanban-cartao:hover { box-shadow: var(--sombra-f); }
.kanban-cartao:focus-visible { outline: 2px solid var(--marca-clara); }
.kanban-cartao.atrasada { background: #fff7f6; }
.dm-rec { font-size: .72rem; font-weight: 700; color: var(--marca); letter-spacing: .02em; }
.dm-tipo-rapida { background: #fff4d6; color: #9a6700; border: 1px solid #f3d27a; font-weight: 600; }
.dm-texto { font-size: .84rem; line-height: 1.3; margin: .3rem 0 .35rem; color: var(--tinta); }
.dm-meta { display: flex; flex-wrap: wrap; gap: .15rem .6rem; font-size: .74rem; color: var(--tinta-suave); }
.dm-inspetor { font-size: .76rem; font-weight: 600; color: var(--marca-clara); margin-top: .2rem; }
.dm-pendencia {
  margin-top: .35rem; font-size: .72rem; font-weight: 600; border-radius: 6px; padding: .15rem .4rem;
  color: var(--cor-pendencia); background: color-mix(in srgb, var(--cor-pendencia) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--cor-pendencia) 35%, #fff);
}
.dm-rodape { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .45rem; }
.dm-contadores { display: flex; gap: .5rem; font-size: .74rem; color: var(--tinta-suave); }
.dm-contadores i { margin-right: .1rem; }

.dm-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.dm-modo {
  display: flex; gap: .7rem; align-items: center; padding: .75rem .9rem; border-radius: var(--raio);
  background: var(--papel); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dm-modo i { font-size: 1.45rem; color: var(--marca-clara); }
.dm-modo span { display: flex; flex-direction: column; line-height: 1.2; }
.dm-modo small { color: var(--tinta-suave); font-size: .76rem; }
.dm-modo:hover { border-color: var(--marca-clara); color: var(--tinta); }
.dm-modo.ativo { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(29, 75, 125, .14); background: var(--marca-suave); }
@media (max-width: 767px) { .dm-modos { grid-template-columns: 1fr; } }

.dm-texto-longo { font-size: .95rem; line-height: 1.5; }
.dm-envio {
  position: relative; display: flex; align-items: center; gap: .75rem; cursor: pointer;
  border: 1.5px dashed #c7d0dc; border-radius: var(--raio); padding: .8rem 1rem; background: #fbfcfd; margin: 0;
}
.dm-envio:hover { border-color: var(--marca-clara); background: var(--marca-suave); }
.dm-envio i { font-size: 1.6rem; color: var(--marca-clara); }
.dm-envio span { display: flex; flex-direction: column; line-height: 1.2; }
.dm-envio small { color: var(--tinta-suave); font-size: .76rem; }
.dm-envio input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dm-envio-grande { flex-direction: column; text-align: center; padding: 2rem 1rem; }
.dm-envio-grande i { font-size: 2.4rem; }
.dm-previa { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.dm-previa img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); }
.dm-previa .dm-previa-arq { font-size: .74rem; background: #eef1f5; border-radius: 6px; padding: .2rem .45rem; }

.dm-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.dm-galeria figure { position: relative; margin: 0; }
.dm-galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-p); border: 1px solid var(--linha); }
.dm-galeria-excluir {
  position: absolute; top: 4px; right: 4px; border: 0; border-radius: 50%; width: 24px; height: 24px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; display: grid; place-items: center;
}

.dm-comentarios { list-style: none; padding: 0; margin: 0; }
.dm-comentarios li { display: flex; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--linha); }
.dm-comentarios li:first-child { border-top: 0; }
.dm-avatar {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca); font-weight: 700; font-size: .8rem;
}
.dm-comentario-texto { font-size: .88rem; white-space: normal; }

.dm-descricao { font-size: .95rem; line-height: 1.55; white-space: normal; }
.dm-detalhes { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; font-size: .87rem; }
.dm-detalhes dt { color: var(--tinta-suave); font-weight: 500; }
.dm-detalhes dd { margin: 0; font-weight: 600; }
.dm-badge-cor { background: var(--cor); color: #fff; }
.dm-alerta-pendencia {
  display: flex; gap: .7rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--raio);
  background: color-mix(in srgb, var(--cor-pendencia) 10%, #fff); border-left: 4px solid var(--cor-pendencia);
}
.dm-alerta-pendencia > i { color: var(--cor-pendencia); font-size: 1.2rem; }
.dm-prioridade.prioridade-ALTA { color: var(--perigo); }
.dm-prioridade.prioridade-MEDIA { color: var(--alerta); }

.dm-opcao, .dm-opcao-cab { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.dm-opcao-cab { border-top: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 700; }
.dm-opcao.inativa { opacity: .55; }
.dm-opcao-nova { background: #fbfcfd; border-radius: var(--raio-p); padding: .5rem; margin-top: .4rem; border: 1px dashed #cfd7e2; }
.dm-o-ordem { width: 68px; flex: 0 0 68px; }
.dm-o-cor { width: 42px; flex: 0 0 42px; }
.dm-o-nome { flex: 1 1 180px; }
.dm-o-flags { display: flex; gap: .7rem; flex: 0 0 auto; }
.dm-o-flags label { display: flex; gap: .25rem; align-items: center; white-space: nowrap; }
.dm-o-acoes { display: flex; gap: .3rem; margin-left: auto; }

/* Relatorio visual */
.dm-capa {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
  background: var(--marca); color: #fff; border-radius: var(--raio); padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.dm-capa h2 { font-size: 1.3rem; margin: .1rem 0 .35rem; font-weight: 700; }
.dm-capa-empresa { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.dm-capa-filtros { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .76rem; opacity: .85; }
.dm-capa-data { font-size: .76rem; opacity: .85; text-align: right; }
.dm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.dm-kpi {
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--cor);
  border-radius: var(--raio-p); padding: .6rem .8rem; display: flex; flex-direction: column;
}
.dm-kpi span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 700; }
.dm-kpi strong { font-size: 1.7rem; line-height: 1.15; color: var(--cor); font-weight: 750; }
.dm-kpi strong em { font-size: .85rem; font-style: normal; margin-left: .15rem; color: var(--tinta-suave); }
.dm-kpi small { font-size: .72rem; color: var(--tinta-suave); }
@media (max-width: 767px) { .dm-kpis { grid-template-columns: repeat(2, 1fr); } }

.dm-rosca { width: 170px; height: 170px; border-radius: 50%; position: relative; flex: 0 0 170px; }
.dm-rosca span {
  position: absolute; inset: 28px; border-radius: 50%; background: var(--papel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; color: var(--tinta-suave);
}
.dm-rosca span strong { font-size: 1.8rem; color: var(--tinta); line-height: 1; }
.dm-legenda { list-style: none; padding: 0; margin: 0; flex: 1 1 160px; font-size: .84rem; }
.dm-legenda li { display: flex; align-items: center; gap: .45rem; padding: .22rem 0; }
.dm-legenda li i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }
.dm-legenda li span { flex: 1; }
.dm-legenda li small { color: var(--tinta-suave); width: 3.2rem; text-align: right; }

.dm-colunas { display: flex; align-items: stretch; gap: .5rem; height: 190px; }
.dm-coluna-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.dm-coluna-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid var(--linha); }
.dm-col { width: 38%; max-width: 30px; border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.dm-col span { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-size: .7rem; font-weight: 700; color: var(--tinta); }
.dm-coluna-mes small { font-size: .72rem; color: var(--tinta-suave); text-transform: capitalize; }
.dm-col-a { background: var(--marca-clara); }
.dm-col-b { background: var(--ok); }
.dm-legenda-linha { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .76rem; color: var(--tinta-suave); margin-top: .6rem; }
.dm-legenda-linha i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .25rem; vertical-align: -1px; }

.dm-barra-linha { display: flex; align-items: center; gap: .6rem; padding: .22rem 0; }
.dm-barra-rotulo { flex: 0 0 34%; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-barra-trilho { flex: 1; display: block; height: 14px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.dm-barra, .dm-barra-pilha { display: flex; height: 100%; border-radius: 4px; overflow: hidden; min-width: 2px; }
.dm-barra-pilha i { display: block; height: 100%; }
.dm-barra-valor { flex: 0 0 2.4rem; text-align: right; font-size: .85rem; }

.dm-tabela { font-size: .82rem; }
.dm-tabela thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); background: #f6f8fa; white-space: nowrap; }
.dm-celula-longa { min-width: 240px; }
.dm-grupo th { background: color-mix(in srgb, var(--cor) 10%, #fff) !important; border-left: 4px solid var(--cor); font-size: .8rem; }
.dm-grupo i { color: var(--cor); font-size: .6rem; vertical-align: 1px; }
.dm-situacao { font-size: .74rem; font-weight: 600; color: var(--tinta-suave); }
.dm-situacao.ruim { color: var(--perigo); }
.dm-situacao.alerta { color: var(--alerta); }
.dm-secao-alerta { border-left: 4px solid var(--perigo); }
.dm-tabela-previa { font-size: .8rem; }

@media print {
  .dm-relatorio, .dm-relatorio * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dm-kpis { grid-template-columns: repeat(4, 1fr); }
  .dm-relatorio .col-lg-5 { width: 42%; } .dm-relatorio .col-lg-7 { width: 58%; }
  .dm-relatorio .col-lg-6 { width: 50%; }
  .dm-lista-completa, .dm-tabela tr { break-inside: auto; }
  .dm-relatorio a { text-decoration: none; }
}

/* ---------------------------------------------------------- Calendario --- */
.calendario { font-size: .76rem; border-collapse: separate; border-spacing: 0; }
.calendario th, .calendario td { border: 1px solid var(--linha); text-align: center; padding: 2px; min-width: 32px; }
.calendario thead th { background: #f7f9fb; color: var(--tinta-suave); position: sticky; top: 0; z-index: 3; }
.calendario td.fds, .calendario th.fds { background: #f4f6f9; }
.calendario td.feriado, .calendario th.feriado { background: #fdeceb; }
.calendario td.hoje, .calendario th.hoje { box-shadow: inset 0 0 0 2px var(--marca-clara); }
.calendario .pessoa {
  text-align: left; white-space: nowrap; position: sticky; left: 0;
  background: var(--papel); z-index: 2; padding: 3px 10px; min-width: 190px;
}
.calendario .marca-dia {
  display: block; border-radius: 4px; font-size: .66rem; padding: 2px 0; font-weight: 600;
  color: #1f2733;
}
.calendario .marca-dia:hover { text-decoration: none; filter: brightness(.94); }

.etiqueta-turno {
  display: inline-block; font-size: .7rem; font-weight: 650;
  border-radius: 999px; padding: .12rem .55rem; white-space: nowrap;
  background: #eef2f7; color: #33445c;
}
.turno-adm        { background: #dbe7f6; color: #1a3a5f; }
.turno-manha      { background: #d6f0e2; color: #10603d; }
.turno-tarde      { background: #fdefc8; color: #7a5303; }
.turno-noite      { background: #e6ddf7; color: #45307a; }
.turno-sobreaviso { background: #fbdedb; color: #8f2c1f; }

/* ------------------------------------------------------------ Diversos --- */
.badge-venc { min-width: 84px; }
.badge { font-weight: 600; letter-spacing: .01em; }
.btn { font-weight: 550; }
.btn-primary { background: var(--marca); border-color: var(--marca); }
.btn-primary:hover, .btn-primary:focus { background: var(--marca-clara); border-color: var(--marca-clara); }
.btn-outline-primary { color: var(--marca); border-color: var(--marca); }
.btn-outline-primary:hover { background: var(--marca); border-color: var(--marca); }
.alert { border: 0; border-left: 4px solid; border-radius: var(--raio-p); font-size: .875rem; }
.alert-success { border-left-color: var(--ok); }
.alert-danger  { border-left-color: var(--perigo); }
.alert-warning { border-left-color: var(--alerta); }
.alert-info    { border-left-color: var(--info); }

.pre-visualizacao-logo {
  border: 1px dashed #cfd7e2; border-radius: var(--raio-p);
  background: #fbfcfd; padding: 1rem; text-align: center;
}
.pre-visualizacao-logo img { max-height: 90px; max-width: 100%; object-fit: contain; }

@media print {
  .barra-lateral, .navbar-topo, .rodape, .nao-imprimir, .barra-acao { display: none !important; }
  .conteudo { margin: 0; padding: 0; }
  body { padding-top: 0; background: #fff; font-size: .8rem; }
  .cartao { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  a { color: inherit; }
}

/* ------------------------------------------------ Quadro de inspetores --- */
.card-inspetor .linha-quadro {
  display: flex; align-items: baseline; gap: .5rem;
  margin-top: .45rem; flex-wrap: wrap;
}
.card-inspetor .rotulo-quadro {
  flex: 0 0 5.2rem; font-size: .7rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: #8a95a5;
}
.card-inspetor .detalhe-qualif { margin-top: .6rem; font-size: .78rem; }
.card-inspetor .detalhe-qualif summary { cursor: pointer; color: #6b7790; }
.card-inspetor .detalhe-qualif ul li { padding: .15rem 0; border-bottom: 1px dashed #e8ecf2; }

.caixa-selecao {
  max-height: 280px; overflow-y: auto;
  border: 1px solid #dde3ec; border-radius: var(--raio-p);
  padding: .4rem .6rem; background: #fbfcfd;
}
.caixa-selecao label { cursor: pointer; border-bottom: 1px dashed #e8ecf2; }
.caixa-selecao label:last-child { border-bottom: 0; }
.caixa-selecao label:hover { background: #f2f6fb; }

/* ------------------------------------------------- Mapa de alocacao (dashboard) -- */
/* Uma caixa por escopo / area / turno; dentro dela, um card por inspetor.
   As caixas sao grade fluida para caber de 1 a N sem quebrar o ritmo da pagina. */
.mapa-alocacao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  align-items: start;
}

.mapa-caixa {
  background: #eef1f5;
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: .55rem;
  min-height: 130px;
  transition: border-color .12s ease, background .12s ease;
}
.mapa-caixa.pendente { background: #fdf5e8; }
.mapa-caixa.alvo     { border-color: var(--marca-clara); background: var(--marca-suave); }
.mapa-caixa.recusado { border-color: var(--perigo); }

.mapa-caixa-topo {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .1rem .15rem .5rem;
}
.mapa-caixa-titulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--tinta-suave); margin: 0;
}
.mapa-caixa-topo small { font-size: .7rem; }

.mapa-lista { display: flex; flex-direction: column; gap: .4rem; min-height: 42px; }

.mapa-vazio {
  margin: .35rem .15rem 0; font-size: .76rem; color: #98a2b3; font-style: italic;
}

.mapa-card {
  position: relative;
  display: flex; gap: .55rem; align-items: flex-start;
  background: var(--papel);
  border-radius: var(--raio-p);
  padding: .5rem .6rem;
  box-shadow: var(--sombra);
  border-left: 3px solid transparent;
}
.mapa-card[draggable="true"] { cursor: grab; }
.mapa-card[draggable="true"]:active { cursor: grabbing; }
.mapa-card.arrastando { opacity: .4; }
.mapa-card.noturno    { border-left-color: #6a4bb0; background: #fbf9ff; }
.mapa-card.incompleto { border-left-color: var(--alerta); }
.mapa-card.gravando   { outline: 2px solid var(--marca-clara); outline-offset: -2px; }
.mapa-card.falhou     { outline: 2px solid var(--perigo); outline-offset: -2px; }

.mapa-card-corpo { min-width: 0; flex: 1; }
.mapa-card-nome  { font-weight: 600; font-size: .84rem; display: block; line-height: 1.2; color: var(--tinta); }
.mapa-card-nome:hover { color: var(--marca-clara); }
.mapa-card-funcao {
  display: block; font-size: .71rem; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mapa-card-tags { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .25rem; }
.mapa-card-tags .tag-area,
.mapa-card-tags .tag-escopo {
  font-size: .66rem; padding: .05rem .4rem; border-radius: 20px;
  border: 1px solid #cfe0f5; background: #e7f0fb; color: #1a3a5f; white-space: nowrap;
}
.mapa-card-tags .tag-escopo { border-color: #dde4ec; background: #eef2f7; color: #3b4a5e; }
.mapa-card-tags .tag-area.vazia { border-color: #f3c4bf; background: #fbdedb; color: #8f2c1f; }
.mapa-card-tags .etiqueta-turno { font-size: .66rem; }

.mapa-card-alerta { display: block; margin-top: .25rem; font-size: .69rem; color: #8f2c1f; }

.mapa-card-editar {
  position: absolute; top: .3rem; right: .35rem;
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #98a2b3; font-size: .78rem; opacity: 0;
  transition: opacity .12s ease;
}
.mapa-card:hover .mapa-card-editar { opacity: 1; }
.mapa-card-editar:hover { background: var(--marca-suave); color: var(--marca); text-decoration: none; }

/* ---- Retrato do inspetor, com anel de semaforo da qualificacao ---------- */
.avatar-inspetor {
  --lado: 44px;
  position: relative; flex: 0 0 var(--lado);
  width: var(--lado); height: var(--lado); border-radius: 50%;
  background: #dbe3ee; color: var(--marca);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--lado) * .34);
  overflow: hidden; border: 2px solid #cbd5e1;
}
.avatar-inspetor img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.avatar-inspetor.semaforo-verde    { border-color: var(--ok); }
.avatar-inspetor.semaforo-amarelo  { border-color: var(--alerta); }
.avatar-inspetor.semaforo-vermelho { border-color: var(--perigo); }
.avatar-inspetor.semaforo-azul     { border-color: var(--info); }
.avatar-inspetor.semaforo-cinza    { border-color: #cbd5e1; }

/* ---- Aviso flutuante do arraste ---------------------------------------- */
.toast-arraste {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1080;
  max-width: 340px; padding: .6rem .9rem;
  border-radius: var(--raio-p); box-shadow: var(--sombra-f);
  background: var(--marca); color: #fff; font-size: .84rem;
}
.toast-arraste.erro { background: var(--perigo); }

/* Medidores com tom de risco na barra de cobertura. */
.medidor span.perigo { background: var(--perigo); }
.medidor span.alerta { background: var(--alerta); }
.barra.roxa { background: #6a4bb0; }
.ponto.roxo     { background: #6a4bb0; }
.ponto.vermelho { background: var(--perigo); }

@media print {
  .mapa-alocacao { grid-template-columns: repeat(2, 1fr); }
  .mapa-caixa    { break-inside: avoid; page-break-inside: avoid; }
  .mapa-card     { break-inside: avoid; page-break-inside: avoid; }
}

/* ---- Reordenacao vertical dentro da caixa ------------------------------- */
/* O card some da posicao antiga durante o arraste (vira um vazio tracejado) e
   o preview ao vivo mostra onde ele vai cair — sem isso o gestor arrasta no
   escuro e so descobre a posicao depois de soltar. */
.mapa-card.arrastando {
  opacity: .35;
  background: repeating-linear-gradient(45deg, #f4f6f9, #f4f6f9 6px, #e9edf3 6px, #e9edf3 12px);
  box-shadow: none;
}
.mapa-card.arrastando * { visibility: hidden; }

/* Alca de arraste: o cursor diz que o card inteiro pega. */
.mapa-card[draggable="true"] .avatar-inspetor { cursor: inherit; }

.mapa-lista > .mapa-card { transition: transform .12s ease; }

/* ------------------------------------------------------- Venda / ocupacao -- */
/* Sem venda e a unica situacao que grita: e a que custa e nao fatura. As duas
   formas de venda ficam discretas — informam, nao alarmam. */
.selo-venda {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .2rem; padding: .08rem .45rem;
  font-size: .68rem; font-weight: 600; border-radius: 20px;
  border: 1px solid transparent; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.selo-venda i { font-size: .72rem; }
.selo-as        { background: #e2f2ea; border-color: #bfe3d1; color: #10603d; }
.selo-rotina    { background: #e7f0fb; border-color: #cfe0f5; color: #1a3a5f; }
.selo-sem_venda { background: #fbdedb; border-color: #f0b6ae; color: #8f2c1f; }

/* O card inteiro precisa se distinguir de longe, nao so o selo. */
.mapa-card.sem-venda { border-left-color: var(--perigo); background: #fffaf9; }
.mapa-card.sem-venda.noturno { border-left-color: #6a4bb0; box-shadow: inset 3px 0 0 -0 var(--perigo), var(--sombra); }

.ponto.venda-as        { background: var(--ok); }
.ponto.venda-rotina    { background: var(--marca-clara); }
.ponto.venda-sem_venda { background: var(--perigo); }
.fatia.venda-as        { background: var(--ok); }
.fatia.venda-rotina    { background: var(--marca-clara); }
.fatia.venda-sem_venda { background: var(--perigo); }

/* Barra de duas partes: vendido embaixo, parado em cima — a leitura e a
   altura do vermelho, que e o que o gestor quer ver encolher. */
.barra-dupla {
  width: 60%; max-width: 34px; height: 100%;
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  border-radius: 6px 6px 0 0; overflow: hidden; background: #eef1f5;
}
.barra-dupla .parte { display: block; width: 100%; }
.barra-dupla .vendida { background: linear-gradient(180deg, var(--marca-clara), var(--marca)); }
.barra-dupla .parada  { background: var(--perigo); opacity: .85; }

.rotulo-bloco {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--tinta-suave); margin: 0 0 .4rem;
}
.lista-simples.borda, .lista-medidor.borda {
  border: 1px solid var(--linha); border-radius: var(--raio-p);
}
.lista-medidor.borda { padding: .6rem .75rem; }

/* Fita diaria da ficha: um quadradinho por dia fechado. O que se le e a
   sequencia de vermelho, nao o valor de cada dia. */
.fita-venda { display: flex; flex-wrap: wrap; gap: 2px; }
.dia-venda {
  width: 11px; height: 18px; border-radius: 2px; background: #e4e8ee;
}
.dia-as        { background: var(--ok); }
.dia-rotina    { background: var(--marca-clara); }
.dia-sem_venda { background: var(--perigo); }

/* ---------------------------------------------- Plantao de inspetores -- */
/* Calendario de mes de verdade (semanas em linha): a pergunta do coordenador
   e "quem vem no sabado", entao a celula e o DIA, e dentro dela as duas
   pilhas — nao a matriz pessoa x dia da escala antiga. */
.calendario-plantao {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--linha);
  border-top: 1px solid var(--linha);
}
.cab-semana {
  background: #f7f9fb; padding: .4rem; text-align: center;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--tinta-suave);
}
.cab-semana.fds { background: #eef1f5; }

.dia-plantao {
  background: var(--papel); min-height: 118px; padding: .35rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.dia-plantao.vazio-grade { background: #fafbfc; }
.dia-plantao.passado     { opacity: .72; }
.dia-plantao.hoje        { box-shadow: inset 0 0 0 2px var(--marca-clara); }
.dia-plantao.tipo-sabado  { background: #f5f8fc; }
.dia-plantao.tipo-domingo { background: #f2f6fc; }
.dia-plantao.tipo-feriado { background: #fdf4f3; }

.dia-cabecalho { display: flex; align-items: center; gap: .3rem; }
.dia-numero { font-weight: 700; font-size: .82rem; color: var(--tinta); }
.dia-feriado {
  font-size: .62rem; color: #8f2c1f; background: #fbdedb;
  border-radius: 20px; padding: 0 .35rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dia-add {
  margin-left: auto; width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: #98a2b3; font-size: .7rem; flex: 0 0 20px;
}
.dia-add:hover { background: var(--marca-suave); color: var(--marca); text-decoration: none; }
.dia-sem-ninguem { margin: auto 0 .1rem; font-size: .66rem; color: #b6bfcc; font-style: italic; }

.pilha { border-radius: 6px; padding: .2rem .25rem; }
.pilha-dia   { background: #fdf8e9; }
.pilha-noite { background: #f1edfb; }
.pilha-rotulo {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .15rem;
}
.pilha-noite .pilha-rotulo { color: #5b45a0; }
.pilha-chips { display: flex; flex-wrap: wrap; gap: .2rem; }

.chip-plantao {
  display: inline-flex; align-items: center; gap: .2rem;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: 20px; padding: .05rem .35rem .05rem .05rem;
  font-size: .66rem; color: var(--tinta); max-width: 100%;
}
a.chip-plantao:hover { border-color: var(--marca-clara); text-decoration: none; }
.chip-plantao.status-cancelado { opacity: .5; text-decoration: line-through; }
.chip-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-escopo {
  font-size: .58rem; background: #eef2f7; border-radius: 20px; padding: 0 .3rem;
  color: #3b4a5e; white-space: nowrap;
}
.chip-anexo, .chip-obs { font-size: .58rem; color: var(--tinta-suave); }

/* O anel da foto e a situacao do plantao: da para varrer o mes so pelas
   bordas, sem abrir dia nenhum. */
.avatar-plantao {
  --lado: 34px;
  position: relative; flex: 0 0 var(--lado);
  width: var(--lado); height: var(--lado); border-radius: 50%;
  background: #dbe3ee; color: var(--marca);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--lado) * .34);
  overflow: hidden; border: 2px solid #cbd5e1;
}
.avatar-plantao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-plantao.anel-planejado      { border-color: var(--marca-clara); }
.avatar-plantao.anel-confirmado     { border-color: var(--ok); }
.avatar-plantao.anel-nao_compareceu { border-color: var(--perigo); }
.avatar-plantao.anel-cancelado      { border-color: #b6bfcc; }

.amostra {
  display: inline-block; width: .9rem; height: .9rem; border-radius: 3px;
  border: 1px solid var(--linha); vertical-align: -2px;
}
.amostra.tipo-sabado  { background: #f5f8fc; }
.amostra.tipo-domingo { background: #f2f6fc; }
.amostra.tipo-feriado { background: #fdf4f3; }
.amostra-ponto.tipo-util    { background: #98a2b3; }
.amostra-ponto.tipo-sabado  { background: var(--marca-clara); }
.amostra-ponto.tipo-domingo { background: #6a4bb0; }
.amostra-ponto.tipo-feriado { background: var(--perigo); }

.ponto.status-planejado      { background: var(--marca-clara); }
.ponto.status-confirmado     { background: var(--ok); }
.ponto.status-nao_compareceu { background: var(--perigo); }
.ponto.status-cancelado      { background: #b6bfcc; }

.status-badge.status-planejado      { background: #dbe7f6; color: #1a3a5f; }
.status-badge.status-confirmado     { background: #d6f0e2; color: #10603d; }
.status-badge.status-nao_compareceu { background: #fbdedb; color: #8f2c1f; }
.status-badge.status-cancelado      { background: #eef1f5; color: #667085; }

.tipo-badge.tipo-util    { background: #eef1f5; color: #3b4a5e; }
.tipo-badge.tipo-sabado  { background: #dbe7f6; color: #1a3a5f; }
.tipo-badge.tipo-domingo { background: #e6ddf7; color: #45307a; }
.tipo-badge.tipo-feriado { background: #fbdedb; color: #8f2c1f; }

.etiqueta-periodo {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 20px;
}
.etiqueta-periodo.per-dia   { background: #fdf3d8; color: #7a5303; }
.etiqueta-periodo.per-noite { background: #e6ddf7; color: #45307a; }

/* ---- Atalhos dos proximos fins de semana e feriados -------------------- */
.atalho-plantao {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: .4rem .7rem .4rem .5rem; color: var(--tinta); min-width: 210px;
}
.atalho-plantao:hover { border-color: var(--marca-clara); text-decoration: none; box-shadow: var(--sombra); }
.atalho-plantao.coberto { border-left: 4px solid var(--ok); }
.atalho-plantao:not(.coberto) { border-left: 4px solid var(--alerta); }
.atalho-dia {
  font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--marca);
  min-width: 1.8rem; text-align: center;
}
.atalho-texto { display: flex; flex-direction: column; line-height: 1.2; }
.atalho-texto small { font-size: .68rem; color: var(--tinta-suave); }
.atalho-plantao.tipo-feriado .atalho-dia { color: var(--perigo); }

/* ---- Montar o plantao do dia ------------------------------------------ */
.pilha-cartao.pilha-dia   { border-top: 3px solid #e8b93c; }
.pilha-cartao.pilha-noite { border-top: 3px solid #6a4bb0; }

.grade-inspetores { display: flex; flex-direction: column; gap: .5rem; }

.inspetor-opcao {
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  transition: border-color .12s ease, background .12s ease;
}
.inspetor-opcao.marcado { border-color: var(--marca-clara); background: var(--marca-suave); }

.opcao-cabecalho {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; cursor: pointer; margin: 0;
}
.opcao-cabecalho input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.opcao-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.opcao-texto strong { font-size: .84rem; }
.opcao-texto small  { font-size: .7rem; color: var(--tinta-suave); }

.opcao-detalhe {
  border-top: 1px dashed var(--linha); padding: .6rem;
  background: var(--papel); border-radius: 0 0 var(--raio-p) var(--raio-p);
}

.lista-anexos { list-style: none; margin: 0; padding: 0; font-size: .74rem; }
.lista-anexos li { padding: .15rem 0; border-bottom: 1px dashed #e8ecf2; }
.lista-anexos li:last-child { border-bottom: 0; }
.lista-anexos small { margin-left: .4rem; }

/* No celular a grade de 7 colunas vira ilegivel: cai para duas e some o
   cabecalho de semana, que ali nao ajuda ninguem. */
@media (max-width: 991.98px) {
  .calendario-plantao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cab-semana { display: none; }
  .dia-plantao.vazio-grade { display: none; }
  .dia-plantao { min-height: 90px; }
}

@media print {
  .calendario-plantao { grid-template-columns: repeat(7, 1fr); }
  .dia-plantao { break-inside: avoid; page-break-inside: avoid; }
}

/* ------------------------------------------------ Montagem do informe -- */
/* Modelo pronto: um clique gera a peca inteira. Os quatro cobrem o que a
   coordenacao pede na pratica; o formulario abaixo existe para o resto. */
.modelo-informe {
  display: flex; gap: .6rem; align-items: flex-start; height: 100%;
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: .6rem .7rem; color: var(--tinta);
}
.modelo-informe:hover {
  border-color: var(--marca-clara); text-decoration: none;
  box-shadow: var(--sombra); background: var(--marca-suave);
}
.modelo-informe strong { display: block; font-size: .86rem; line-height: 1.2; }
.modelo-informe small  { display: block; font-size: .71rem; color: var(--tinta-suave); margin-top: .15rem; }
.modelo-icone {
  flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: var(--raio-p);
  background: var(--marca-suave); color: var(--marca);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* As duas caixas de selecao do informe sao longas: rolam em vez de empurrar
   o botao de gerar para fora da tela. */
.caixa-selecao { max-height: 210px; overflow-y: auto; }

.atalho-periodo { border: 0; cursor: pointer; font: inherit; }
.atalho-periodo:hover { background: var(--marca-suave); }

/* Botao de informe na celula do dia, ao lado do lapis. */
.dia-add.dia-informe:hover { background: #fbdedb; color: var(--perigo); }

/* ------------------------------------------------ Treinamentos SST -- */
/* Mesmas cores de vencimento do resto do sistema: vermelho vencido,
   ambar critico, azul a programar, verde valido. */
.selo-sst {
  display: inline-block; font-size: .7rem; font-weight: 600;
  padding: .08rem .5rem; border-radius: 20px; white-space: nowrap;
}
.st-vencido   { background: #fbdedb; color: #8f2c1f; }
.st-critico   { background: #fdefc8; color: #7a5303; }
.st-programar { background: #dbe7f6; color: #1a3a5f; }
.st-valido    { background: #d6f0e2; color: #10603d; }
.st-sem       { background: #eef1f5; color: #667085; }
.st-nada      { background: transparent; color: #c5ccd6; }

.borda-perigo { border-left: 4px solid var(--perigo); }

/* Matriz: primeira coluna presa, cabecalhos girados para caberem muitas
   colunas sem a tabela ficar com 3 metros de largura. */
.matriz-sst-rolagem { max-height: 72vh; }
.matriz-sst { border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.matriz-sst th, .matriz-sst td { border-bottom: 1px solid var(--linha); border-right: 1px solid var(--linha); }
.matriz-sst thead th {
  position: sticky; top: 0; z-index: 2; background: #f7f9fb;
  height: 150px; vertical-align: bottom; padding: .3rem .15rem; min-width: 46px;
}
.matriz-sst thead th span {
  display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; font-weight: 600; color: var(--tinta);
}
.matriz-sst .fixa {
  position: sticky; left: 0; z-index: 1; background: var(--papel);
  min-width: 240px; padding: .35rem .6rem; text-align: left;
}
.matriz-sst thead .fixa { z-index: 3; vertical-align: bottom; }
.sst-celula { text-align: center; font-weight: 600; padding: .3rem .2rem; cursor: help; white-space: nowrap; }

@media print {
  .matriz-sst thead th { height: 120px; }
  .matriz-sst .fixa { position: static; }
}

/* ---- Painel de vencimentos: origem de cada linha ---------------------- */
/* A origem diz onde corrigir a data: qualidade (producao), treinamentos ou
   o cadastro local. Cores distintas para a coluna ser lida de relance. */
.origem-qualificacao { background: #dbe7f6; color: #1a3a5f; }
.origem-treinamento  { background: #e6ddf7; color: #45307a; }
.origem-local        { background: #eef1f5; color: #3b4a5e; }
.kpi.ativo { box-shadow: 0 0 0 2px var(--marca-clara); }

/* ------------------------------------------------ Ficha do inspetor -- */
/* Cabecalho responde "quem e e se esta apto" antes de qualquer rolagem:
   foto e identificacao a esquerda, e quatro indicadores clicaveis que levam
   direto para a aba do assunto. */
.ficha-cabecalho { overflow: hidden; }
.ficha-identidade {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 1rem 1.1rem;
}
.ficha-foto {
  position: relative; flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
  background: #dbe3ee; color: var(--marca); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.8rem; border: 3px solid var(--marca-suave);
}
.ficha-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha-dados { flex: 1; min-width: 220px; }
.ficha-funcao { color: var(--tinta-suave); font-size: .88rem; margin-bottom: .35rem; }
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; }
.ficha-acoes { display: flex; gap: .4rem; align-items: flex-start; margin-left: auto; }

.ficha-indicadores {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linha); background: #fafbfd;
}
.indicador {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
  padding: .7rem 1.1rem; color: var(--tinta); border-right: 1px solid var(--linha);
}
.indicador:last-child { border-right: 0; }
.indicador:hover { background: var(--marca-suave); text-decoration: none; }
.indicador-rotulo {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--tinta-suave);
}
.indicador small { color: var(--tinta-suave); font-size: .72rem; }

/* Lista rotulo : valor, usada em Alocacao e Venda. */
.ficha-lista {
  display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem;
  margin: 0; padding: .9rem 1.1rem; align-items: baseline;
}
.ficha-lista dt { font-size: .74rem; color: var(--tinta-suave); font-weight: 600; }
.ficha-lista dd { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }

/* Historico de treinamentos: separador por ano e turmas que nao contam
   para a validade (ausencia, turma futura) em tom apagado. */
.tabela-historico .linha-ano td {
  background: #eef2f7; color: var(--marca); font-weight: 700; font-size: .75rem;
  letter-spacing: .06em; padding: .25rem .6rem;
}
.tabela-historico tr.nao-conta td { color: #98a2b3; }
.tabela-historico tr.nao-conta strong { font-weight: 600; }

@media (max-width: 767.98px) {
  .ficha-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicador:nth-child(2) { border-right: 0; }
  .indicador:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
  .ficha-acoes { margin-left: 0; }
}