/* ══════════════════════════════════════════════════════════════
   AMBIENTES (Pós-vendas · Inspeção · RNC · MASP · Configurações)
   Só usa as variáveis do :root (--azul, --azul-mid, --azul-light,
   --grad-azul, --ouro, --brd, --txt-muted…), então acompanha o tema
   da empresa trocado por aplicarTema().
══════════════════════════════════════════════════════════════ */

/* ── Botão da gaveta (mesmo visual dos botões busca/mensagens) ── */
.mod-gaveta-btn{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:40px;height:40px;border-radius:10px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:background .15s,border-color .15s
}
.mod-gaveta-btn:hover{background:rgba(255,255,255,.22);border-color:var(--ouro)}
@media(max-width:768px){.mod-gaveta-btn{width:34px;height:34px;font-size:14px}.topbar-left{gap:10px}}

/* ── Gaveta lateral ── */
.mod-gaveta-fundo{position:fixed;inset:0;background:rgba(2,43,91,.45);z-index:8000;opacity:0;pointer-events:none;transition:opacity .2s}
.mod-gaveta-fundo.aberta{opacity:1;pointer-events:auto}
.mod-gaveta{
  position:fixed;top:0;left:0;bottom:0;width:290px;max-width:86vw;z-index:8001;
  background:white;box-shadow:var(--shadow-lg, 0 12px 40px rgba(0,0,0,.2));
  transform:translateX(-102%);transition:transform .22s ease;display:flex;flex-direction:column
}
.mod-gaveta.aberta{transform:translateX(0)}
.mod-gaveta-topo{background:var(--grad-azul);color:white;padding:18px 18px 16px;border-bottom:3px solid var(--ouro);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mod-gaveta-topo small{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;opacity:.75}
.mod-gaveta-topo strong{display:block;font-size:16px;font-weight:800;margin-top:2px}
.mod-gaveta-topo span{display:block;font-size:12px;opacity:.85;margin-top:2px}
.mod-gaveta-x{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;width:32px;height:32px;border-radius:9px;cursor:pointer;flex-shrink:0}
.mod-gaveta-x:hover{background:rgba(255,255,255,.22)}
.mod-gaveta-lista{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:4px}
.mod-gaveta-rotulo{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-muted);padding:6px 10px 4px}
.mod-gaveta-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:12px;border:1.5px solid transparent;
  background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--txt);text-align:left;transition:background .15s,border-color .15s
}
.mod-gaveta-item:hover{background:var(--azul-light)}
.mod-gaveta-item.ativo{background:var(--azul-light);border-color:var(--azul);color:var(--azul);font-weight:800}
.mod-gaveta-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:var(--azul-light);color:var(--azul)}
.mod-gaveta-item.ativo .mod-gaveta-ico{background:var(--grad-azul);color:white}
.mod-gaveta-item .mc-tag{margin-left:auto;white-space:nowrap}
.mod-gaveta-rodape{border-top:1px solid var(--brd);padding:10px}

/* ── Contêineres de ambiente ── */
.mod-ambiente[hidden]{display:none!important}

/* Selo "Em construção" (base: .mc-tag/.tag-admin já existentes) */
.mod-tag-obra{display:inline-flex;align-items:center;gap:4px}

/* ── Cartões da tela de boas-vindas (base: .home-modules/.hm-card) ── */
.mod-card-ambiente{position:relative}
.mod-card-ambiente .hm-icon{background:var(--azul-light);color:var(--azul)}
.mod-card-ambiente .mc-tag{position:absolute;top:18px;right:18px}

/* ── Tela "Em construção" (base: .cad-card/.cad-empty) ── */
.mod-obra{max-width:560px;margin:30px auto;text-align:center;background:white;border-radius:20px;padding:40px 28px;border:2px solid var(--brd);box-shadow:var(--shadow-md, var(--shadow))}
.mod-obra-ico{width:72px;height:72px;border-radius:20px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:30px;background:var(--grad-azul);color:white}
.mod-obra h2{font-size:21px;font-weight:800;color:var(--azul);margin-bottom:6px}
.mod-obra p{font-size:13px;color:var(--txt-muted);line-height:1.6;margin-bottom:20px}
.mod-obra .btn-save{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border:none;cursor:pointer;font-size:13px;font-weight:700}

/* ── Caixas de ambientes no modal de usuário ── */
#usrModulos{display:flex;flex-direction:column;gap:7px;border:1.5px solid var(--brd);border-radius:10px;padding:10px}
#usrModulos .mod-chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--txt);text-transform:none;letter-spacing:normal;margin:0;cursor:pointer}
#usrModulos .mod-chk input{width:16px;height:16px;min-height:0;padding:0;margin:0;flex-shrink:0;cursor:pointer}
#usrModulos .mod-chk i{color:var(--azul);width:16px;text-align:center}
#usrModulos .mod-chk.sub{padding-left:26px;font-weight:600;font-size:12px}
#usrModulos .mod-chk.sub.desligado{opacity:.45;cursor:not-allowed}
.mod-chk-aviso{font-size:12px;color:var(--txt-muted);background:var(--azul-light);border-radius:8px;padding:8px 10px}

/* ── Impressão: gaveta e botão nunca saem no papel ── */
@media print{.mod-gaveta-btn,.mod-gaveta,.mod-gaveta-fundo{display:none!important}}

/* ══════════════════════════════════════════════════════════════
   CONFIGURAÇÕES — lista de áreas à esquerda + área à direita
   (estilo das configurações do GitHub). Itens com o mesmo visual
   dos itens da gaveta (.mod-gaveta-item).
══════════════════════════════════════════════════════════════ */
.cfg-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}
.cfg-nav{position:sticky;top:84px;background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:3px}
.cfg-nav-grupo{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-muted);padding:10px 10px 4px}
.cfg-nav-grupo:first-child{padding-top:4px}
.cfg-nav-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;border:1.5px solid transparent;
  background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--txt);text-align:left;transition:background .15s,border-color .15s
}
.cfg-nav-item i{width:18px;text-align:center;color:var(--azul);flex-shrink:0}
.cfg-nav-item:hover{background:var(--azul-light)}
.cfg-nav-item.active{background:var(--azul-light);border-color:var(--azul);color:var(--azul);font-weight:800}
.cfg-area{min-width:0}

/* Visão geral */
.cfg-secao-tit{font-size:16px;font-weight:700;color:var(--azul);margin-bottom:3px}
.cfg-secao-tit i{margin-right:8px}
.cfg-secao-sub{font-size:12px;color:var(--txt-muted);margin-bottom:18px;line-height:1.5}
.cfg-aviso{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius);padding:14px 16px;margin-bottom:18px;font-size:13px;line-height:1.5;border:1.5px solid}
.cfg-aviso i{font-size:18px;margin-top:1px}
.cfg-aviso.ok{background:var(--verde-bg);border-color:var(--verde-brd);color:var(--verde)}
.cfg-aviso.alerta{background:#FFF8E1;border-color:var(--ouro);color:var(--ouro-dark)}
.cfg-aviso.critico{background:var(--verm-bg);border-color:var(--verm-brd);color:var(--vermelho)}
.cfg-aviso div{color:var(--txt)}
.cfg-uso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px}
.cfg-uso-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;border-left:4px solid var(--verde)}
.cfg-uso-card.alerta{border-left-color:var(--ouro)}
.cfg-uso-card.critico{border-left-color:var(--vermelho)}
.cfg-uso-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--azul)}
.cfg-uso-topo i{margin-right:6px}
.cfg-uso-topo strong{font-size:20px;font-weight:800}
.cfg-uso-barra{height:10px;border-radius:99px;background:var(--cinza-bg);overflow:hidden;margin:10px 0 6px}
.cfg-uso-barra div{height:100%;border-radius:99px;background:var(--grad-verde)}
.cfg-uso-card.alerta .cfg-uso-barra div{background:var(--grad-ouro)}
.cfg-uso-card.critico .cfg-uso-barra div{background:var(--grad-verm)}
.cfg-uso-rodape{font-size:12px;color:var(--txt-muted)}
.cfg-tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;background:var(--azul-light);color:var(--azul)}
.cfg-tag.publico{background:#FFF8E1;color:var(--ouro-dark)}
.cfg-total td{background:var(--cinza-card)}
.cfg-bloco{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:20px}
.cfg-bloco-tit{font-size:13px;font-weight:700;color:var(--azul);margin-bottom:6px}
.cfg-bloco-tit i{margin-right:7px}
.cfg-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.cfg-form label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:var(--txt-muted);text-transform:uppercase;letter-spacing:.3px}
.cfg-form input{width:150px;padding:9px 11px;border:1.5px solid var(--brd);border-radius:10px;font:inherit;font-size:13px;color:var(--txt);background:white}
.cfg-form input:focus{outline:none;border-color:var(--azul)}
.cfg-form .btn-save{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer}
.cfg-rodape-info{font-size:11px;color:var(--txt-muted)}
.cfg-rodape-info i{margin-right:4px}

/* Tablet/celular: a lista vira uma faixa rolável no topo (sempre visível) */
@media(max-width:900px){
  .cfg-layout{grid-template-columns:1fr;gap:14px}
  .cfg-nav{position:static;flex-direction:row;overflow-x:auto;padding:6px;gap:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .cfg-nav-grupo{display:none!important}
  .cfg-nav-item{width:auto;white-space:nowrap;flex-shrink:0}
  .cfg-form input{width:130px}
}
@media print{.cfg-nav{display:none!important}.cfg-layout{display:block}}

/* Selo de aviso no cartão e na gaveta (número de pendências do ambiente) */
.mod-aviso{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--vermelho);color:white;font-size:11px;font-weight:800}
.mod-gaveta-item .mod-aviso{margin-left:auto}

/* ══════════════ (Etapa 6) SININHO — avisos de todos os ambientes ══════════════ */
.mod-sino{position:relative;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px}
/* Etapa 8: mesmo tamanho dos botões vizinhos (mensagens/busca) */
.topbar-right .mod-sino{width:40px;height:40px}
@media(max-width:768px){.topbar-right .mod-sino{width:34px;height:34px;font-size:14px}}
.mod-sino[hidden]{display:none}
.mod-sino:hover{background:rgba(255,255,255,.2)}
.mod-sino-n{position:absolute;top:-6px;right:-6px;background:var(--vermelho);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.mod-sino-n[hidden]{display:none}
.mod-sino-painel{position:fixed;top:64px;right:12px;z-index:3000;width:340px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:white;border:1.5px solid var(--brd);border-radius:14px;box-shadow:0 12px 40px rgba(2,43,91,.22);padding:6px 0}
.mod-sino-painel[hidden]{display:none}
.mod-sino-cab{font-weight:800;color:var(--azul);padding:8px 14px 6px;display:flex;gap:8px;align-items:center;border-bottom:1.5px solid var(--brd)}
.mod-sino-amb{padding:6px 0;border-bottom:1px solid var(--brd)}
.mod-sino-amb:last-child{border-bottom:none}
.mod-sino-amb-tit{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--txt-muted);padding:4px 14px;display:flex;gap:6px;align-items:center}
.mod-sino-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:8px 14px;font:inherit;font-size:13px;color:var(--txt);text-align:left;cursor:pointer}
.mod-sino-item:hover,.mod-sino-item:focus-visible{background:var(--azul-light)}
.mod-sino-item > i:first-child{width:16px;text-align:center;color:var(--azul-mid)}
.mod-sino-item span{flex:1}
.mod-sino-seta{font-size:10px;color:var(--txt-muted)}
.mod-sino-vazio{padding:16px 14px;color:var(--txt-muted);font-size:13px;display:flex;gap:8px;align-items:center}
.mod-sino-vazio i{color:var(--verde)}
@media print{ .mod-sino,.mod-sino-painel{display:none!important} }

/* Ambiente Linha Contínua · MES: ícone e cor próprios (verde-azulado), no cartão e na gaveta */
.mod-card-ambiente[onclick*="'apontamento'"] .hm-icon,.mod-gaveta-item[onclick*="'apontamento'"] .mod-gaveta-ico,.mod-ico-mes,
a.hm-card.hm-mes .hm-icon{background:linear-gradient(135deg,#0E7490,#155E75);color:#fff}
.mod-gaveta-item.ativo[onclick*="'apontamento'"]{border-color:#0E7490}
/* Atalho "Apontador MES": sem sublinhado, mesmo visual dos cartões */
a.hm-card.hm-mes,a.hm-card.hm-mes:hover,a.hm-card.hm-mes:visited{text-decoration:none;color:inherit}
a.hm-card.hm-mes .hm-title{color:var(--azul)}
a.hm-card.hm-mes .hm-desc{color:var(--txt-muted)}
.hm-mes-tag{background:#ECFEFF;color:#0E7490;display:inline-flex;align-items:center;gap:5px}
.mod-gaveta-inicio{margin-bottom:6px}
a.mod-gaveta-item,a.mod-gaveta-item:hover,a.mod-gaveta-item:visited{text-decoration:none;color:inherit}

/* ── Tabelas sem rolagem para o lado: letra menor, quebra de linha nos textos e ações só com ícone ── */
.hist-table{width:100%;font-size:12.5px}
.hist-table th{font-size:10.5px;padding:8px 6px;white-space:normal;line-height:1.2;letter-spacing:.2px}
.hist-table td{padding:6px 6px;line-height:1.3}
.hist-table td,.hist-table th{word-break:normal;overflow-wrap:anywhere}
.hist-table td.ap-n,.hist-table td.pv-acoes{white-space:nowrap;overflow-wrap:normal}
.hist-table .pv-chip,.hist-table .pv-badge{font-size:10.5px;padding:1px 7px}
@media (max-width:1600px){
  .hist-table{font-size:11.5px}
  .hist-table th{font-size:9.5px;padding:7px 5px}
  .hist-table td{padding:5px 5px}
  .hist-table .pv-acoes .pv-btn-sec,.hist-table .pv-acoes .btn-del,.hist-table .pv-acoes button{font-size:0;padding:6px 8px;min-width:32px}
  .hist-table .pv-acoes .pv-btn-sec i,.hist-table .pv-acoes button i{font-size:13px}
}
@media (max-width:1100px){ .hist-table{font-size:11px} .hist-table th{font-size:9px} }