/* =========================
   GERAL E CORES BASE
   ========================= */
:root{
  --cor-primaria:#e31b23;
  --cor-primaria-hover:#b3181c;
  --cor-fundo:#f4f7fa;
  --cor-texto:#222;
  --cor-texto-claro:#555;
  --cor-borda:#ddd;
  --cor-sucesso:#28a745;
  --cor-aviso:#ffc107;
  --cor-perigo:#dc3545;
  --sombra-card:0 4px 15px rgba(0,0,0,.07);

  /* chips/badges */
  --chip-bg:#eef2ff;
  --chip-fg:#3f3d56;
  --chip-all-bg:#e7fbe4;
  --chip-all-fg:#1b5e20;
  --badge-id-bg:#f1f5f9;
  --badge-id-fg:#334155;
}

body{
  margin:0; padding:0; background:var(--cor-fundo);
  font-family:'Roboto',Arial,sans-serif; min-height:100vh;
  color:var(--cor-texto);
  display:flex; flex-direction:column;
}

/* ===== Cabeçalho ===== */
.header{ width:100%; background:#fff; border-bottom:3px solid var(--cor-primaria); display:flex; align-items:center; justify-content:space-between; padding:0 2vw; box-shadow:var(--sombra-card); position:sticky; top:0; z-index:1000; height:72px; box-sizing:border-box; gap:20px; }
.header-left{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo{height:105px;}
.empresa-nome{font-size:1.2rem;font-weight:700;color:var(--cor-texto);letter-spacing:1px;}
.nav{display:flex;align-items:center;gap:10px;justify-content:center;flex-grow:1;}
.nav-link{ text-decoration:none;color:var(--cor-texto-claro);font-size:1rem;font-weight:500;padding:8px 16px;border-radius:6px;transition:all .2s;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.nav-link.active,.nav-link:hover{background:#fde6e7;color:var(--cor-primaria);}
.header-user{display:flex;align-items:center;gap:15px;flex-shrink:0;}
.user-link{display:flex;align-items:center;gap:15px;text-decoration:none;padding:5px 10px;border-radius:6px;transition:all .2s;}
.user-link.active,.user-link:hover{background-color:#f8f9fa;}
.logout{background:transparent;border:none;cursor:pointer;}

/* ===== Avatares ===== */
.avatar{ position:relative; border-radius:50%; width:40px;height:40px; box-sizing:border-box; background-color:#bdbdbd; border:2px solid #bdbdbd; background-repeat:no-repeat; background-position:center; background-size:70%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='%23ffffff'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6' fill='%23ffffff'/%3E%3C/svg%3E"); }
.avatar::after{ content:""; position:absolute;right:-2px;bottom:-2px; width:18px;height:18px;border-radius:50%; background:#fff;border:2px solid #ccc; background-repeat:no-repeat;background-position:center;background-size:80%; }
.avatar-seguranca{background-color:#fff8e1;border-color:#ffd54f;}
.avatar-seguranca::after{ border-color:#ffd54f; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13c0-4.418 3.582-8 8-8s8 3.582 8 8v2H5v-2z' fill='%23ffb300'/%3E%3Cpath d='M9 11h8' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.avatar-medicina{background-color:#fdecea;border-color:#e31b23;}
.avatar-medicina::after{ border-color:#e31b23; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10' y='5' width='4' height='14' rx='1' fill='%23e31b23'/%3E%3Crect x='5' y='10' width='14' height='4' rx='1' fill='%23e31b23'/%3E%3C/svg%3E"); }
.avatar-admin{background-color:#ede7f6;border-color:#7e57c2;}
.avatar-admin::after{ border-color:#7e57c2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 16.9 6.7 20l1-5.8L3.5 9.2l5.9-.9L12 3z' fill='%237e57c2'/%3E%3C/svg%3E"); }
.avatar.avatar-sm{width:32px;height:32px;}
.avatar.avatar-sm::after{width:16px;height:16px;}
.avatar.avatar-lg{width:48px;height:48px;}
.avatar.avatar-lg::after{width:20px;height:20px;}
/* ALTERAÇÃO: avatar extra grande para o topo da Minha Conta */
.avatar.avatar-xl{width:64px;height:64px;}      /* novo */
.avatar.avatar-xl::after{width:22px;height:22px;}/* novo */

/* =========================================================
   LOGIN — RESTAURADO (layout antigo)
   ========================================================= */
.login-body{
  background:linear-gradient(135deg,#ededed 0%,#f9f9f9 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-container{ text-align:center; width:100%; }
.login-box{
  background:#fff;
  padding:40px;
  border-radius:12px;
  box-shadow:var(--sombra-card);
  max-width:400px;
  width:90%;
  margin:0 auto;
  box-sizing:border-box;
}
.login-logo{max-width:180px;margin-bottom:20px;}
.login-box h2{margin-bottom:10px;color:var(--cor-texto);}
.login-box p{margin-bottom:30px;color:var(--cor-texto-claro);}
.input-group{ text-align:left; margin-bottom:20px; }
.login-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:6px;
  background:var(--cor-primaria);
  color:#fff;
  font-size:1.1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
.login-btn:hover{ background:var(--cor-primaria-hover); }

/* =========================
   Inputs/Form (globais)
   ========================= */
.input-group label,.form-group-header label{display:block;margin-bottom:8px;font-weight:500;color:var(--cor-texto-claro);}
input[type="text"],input[type="password"],input[type="date"],select,textarea{
  width:100%;padding:12px;border:1px solid var(--cor-borda);border-radius:6px;box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s;background-color:#fff;font-family:'Roboto',sans-serif;font-size:1rem;
}
input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--cor-primaria);box-shadow:0 0 0 3px rgba(227,27,35,.1);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:1em;padding-right:40px;
}

/* =========================
   Conteúdo / Cards
   ========================= */
main{flex:1;max-width:1100px;width:100%;margin:38px auto 0 auto;padding:0 2vw 32px 2vw;box-sizing:border-box;}
/* ALTERAÇÃO: título centralizado para Minha Conta */
main h1{font-size:2rem;font-weight:700;margin:10px 0 14px;color:var(--cor-texto);letter-spacing:.5px;text-align:center;} /* novo */

.subtitle{font-size:1rem;color:var(--cor-texto-claro);margin-top:-10px;margin-bottom:40px;}
.cards-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;}
.card{background:#fff;border-radius:12px;box-shadow:var(--sombra-card);display:flex;flex-direction:column;overflow:hidden;transition:transform .2s, box-shadow .2s;}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.1);}
.card-content{padding:25px;display:flex;flex-direction:column;flex-grow:1;}
.card-title{font-size:1.3rem;font-weight:700;color:var(--cor-primaria);margin:0 0 12px;display:flex;align-items:center;gap:10px;}
.card-desc{font-size:1rem;color:var(--cor-texto-claro);margin-bottom:25px;flex-grow:1;}
.card-btn{padding:12px 25px;border:none;border-radius:6px;background:var(--cor-primaria);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;transition:background .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.card-btn:hover{background:var(--cor-primaria-hover);}

/* =========================
   Formulários (padrão)
   ========================= */
.user-form fieldset,.checklist-form fieldset{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:25px;margin-bottom:30px;}
.user-form legend,.checklist-form legend{font-size:1.4rem;font-weight:700;color:var(--cor-primaria);padding:0 10px;margin-left:10px;}
.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.user-form .form-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap;}
.cancelar-edicao{display:inline-flex;align-items:center;gap:8px;font-size:1rem;padding:12px 25px;border:1.5px solid var(--cor-borda);border-radius:6px;background:#fff;color:var(--cor-texto-claro);font-weight:600;cursor:pointer;transition:border .2s,color .2s,background .2s;box-shadow:none;}
.cancelar-edicao:hover{border:1.5px solid var(--cor-primaria);color:var(--cor-primaria);background:#f4f7fa;}

/* =========================
   Tabelas / Ações
   ========================= */
.table-container{background:#fff;border-radius:8px;overflow-x:auto;padding:20px;box-shadow:var(--sombra-card);margin-top:40px;}
table{width:100%;border-collapse:collapse;table-layout:auto;}
th,td{padding:15px;text-align:left;border-bottom:1px solid #eee;white-space:nowrap;}
tbody tr:hover{background-color:#f8f9fa;}
.action-buttons{display:flex;gap:10px;}

/* Botões padrão */
.action-btn{
  display:inline-flex;align-items:center;gap:6px;font-weight:500;
  text-decoration:none;padding:8px 14px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:all .2s;background:#fff;color:#374151;border-color:#e5e7eb;
}
.action-btn.edit{ background:#3b82f6; border-color:#3b82f6; color:#fff; }
.action-btn.edit:hover{ background:#2563eb; border-color:#2563eb; }
.action-btn.delete{ background:#dc2626; border-color:#dc2626; color:#fff; }
.action-btn.delete:hover{ background:#b91c1c; border-color:#b91c1c; }

/* PADRONIZAÇÃO GLOBAL DE ÍCONES NOS BOTÕES — evita variações entre telas */
.action-btn i,
.action-btn svg{ width:18px; height:18px; flex-shrink:0; } /* NOVO */

/* ===== Chips ===== */
.tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--chip-bg);color:var(--chip-fg);font-size:.85rem;line-height:1;white-space:nowrap;}
.tag-nenhum{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgb(247,147,147);font-size:.85rem;line-height:1;white-space:nowrap;}

/* ===== Badge de ID ===== */
.badge-id{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;border-radius:999px;
  padding:0 10px;background:var(--badge-id-bg);color:var(--badge-id-fg);
  font-weight:700;border:1px solid #e2e8f0;
}

/* =========================
   AJUSTES DESKTOP IMPORTANTE (Perguntas)
   ========================= */
.card-list thead th:first-child{width:1%;}
.card-list thead th:last-child{width:1%;}
.card-list tbody td:last-child{white-space:nowrap;}
.card-list tbody td:nth-child(2){max-width:0;width:55%;}

/* =========================
   CARD-LIST (mobile) — base
   ========================= */
@media (max-width:900px){
  .table-container{padding:12px;}
  .card-list, .card-list thead{display:block;}
  .card-list thead{position:absolute;left:-9999px;top:-9999px;}
  .card-list tbody{display:block;}

  .card-list tbody tr{
    display:flex;
    flex-direction:column;
    gap:8px;
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:12px;
    box-shadow:var(--sombra-card);
    margin:12px 0;
    padding:14px 12px;
  }
  .card-list tbody tr:hover{background:#fff;}
  .card-list td{display:block;border:none;border-bottom:none;padding:0;white-space:normal;}

  .card-list td[data-role="title"]{
    font-weight:700;color:#111827;font-size:1rem;line-height:1.35;margin-top:2px;
  }

  .card-list td[data-role="meta"]{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  }

  .card-list td[data-role="actions"]{
    display:flex;justify-content:center;gap:10px;margin-top:6px;padding-top:8px;border-top:1px solid #f1f5f9;
  }
}

/* =========================
   LABELS NOS CARDS (Usuários – mobile)
   ========================= */
.meta-item{display:inline-flex;gap:6px;align-items:center;}
.meta-k{display:none;font-weight:600;color:#6b7280;}
@media (max-width:900px){
  .card-list td[data-role="meta"] .meta-k{display:inline;}
}

/* =========================
   Centralização específica – SETORES (mobile)
   ========================= */
@media (max-width:900px){
  .card-list.setores-cards tbody tr{ align-items:center; text-align:center; }
  .card-list.setores-cards td[data-role="title"]{ align-self:center; }
}

/* Padronização título Painel igual Histórico */
.page-title {
  text-align:center;
  margin:10px 0 14px;   /* igual ao main h1 global */
}

/* Ajuste do container Painel */
.cards-area.painel{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas no desktop */
  gap: 16px;
  align-items: stretch;
  justify-items: center; /* centraliza os cards dentro das colunas */
  margin-top:12px;
}

/* largura máxima saudável dos cards dentro do painel */
.cards-area.painel .card{
  width:100%;
  max-width:520px; /* evita cards “largos demais” em telas muito grandes */
}

/* Mobile-first: 1 coluna no celular/tablet */
@media (max-width: 900px){
  .cards-area.painel{
    grid-template-columns: 1fr;  /* 1 coluna */
  }
}

/* =========================
   Centralização específica – USUÁRIOS (mobile)
   ========================= */
@media (max-width:900px){
  /* Nome completo separado do resto */
  .card-list.usuarios-cards td[data-role="title"] {
    display:block;
    width:100%;
    font-weight:700;
    font-size:1.1rem;
    color:#111;
    margin-bottom:10px;  /* espaço entre nome e "Usuário:" */
    text-align:center;
  }

  /* Metadados em bloco abaixo do nome */
  .card-list.usuarios-cards td[data-role="meta"] {
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:6px;
  }

  /* Ações centralizadas no fim */
  .card-list.usuarios-cards td[data-role="actions"] {
    justify-content:center;
    margin-top:10px;
  }
}


/* =========================
   MULTISELECT
   ========================= */
.multiselect .toolbar{display:flex;gap:10px;align-items:center;}
.multiselect .toolbar .search{flex:1;}
.multiselect .options{max-height:220px;overflow:auto;}
@media (max-width:768px){
  .multiselect .toolbar{flex-direction:column;align-items:stretch;}
  .multiselect .options{max-height:320px;}
  .multiselect .options label{padding:8px 10px;}
}

/* =========================
   MODAL GENÉRICO
   ========================= */
.modal-bg{position:fixed;z-index:9999;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;}
.modal-box{background:#fff;border-radius:10px;padding:30px 25px;max-width:340px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.18);}
.modal-box h3{margin-top:0;color:#e31b23;}
.modal-actions{ display:flex; gap:12px; justify-content:center; margin-top:18px; }

.btn{padding:8px 24px;border:none;border-radius:5px;cursor:pointer;font-size:1rem;}
.btn-cancelar{background:#eee;color:#444;margin-right:10px;}
.btn-excluir{background:#e31b23;color:#fff;}
.btn-excluir:hover{background:#b3181c;}

/* =========================
   FLASH MESSAGES
   ========================= */
.flash-stack{max-width:480px;width:92%;margin:10px auto 0;}
.alert{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:8px;border:1px solid #e7e7e7;background:#fff;color:#333;
  box-shadow:0 6px 18px rgba(0,0,0,.06);margin:8px 0;transition:transform .2s, opacity .2s;
}
.alert .alert-close{appearance:none;background:transparent;border:0;font-size:20px;line-height:1;color:#666;cursor:pointer;}
.alert .alert-close:hover{color:#222;}
.alert-success{border-color:#d4edda;background:#f1fbf3;color:#225c2f;}
.alert-info{border-color:#bee5eb;background:#eef9ff;color:#0c5460;}
.alert-danger{border-color:#f5c6cb;background:#fff1f1;color:#842029;}
.alert-warning{border-color:#ffeeba;background:#fff8e1;color:#7a5200;}
.alert-hide{opacity:0;transform:translateY(-6px);}

/* =========================
   EXTRAS
   ========================= */
.nav-link-admin{font-weight:700;}
.header-user .admin-chip{
  display:none;background:#fde6e7;color:var(--cor-primaria);font-weight:800;border:1px solid var(--cor-primaria);
  border-radius:999px;padding:4px 10px;font-size:.8rem;letter-spacing:.3px;
}
.header-user.is-admin .admin-chip{display:inline-flex;}
.card.card-admin{border-left:4px solid var(--cor-primaria);}

/* =========================
   FOOTER
   ========================= */
footer{text-align:center;color:#aaa;font-size:.9rem;padding:20px;margin-top:auto;}

/* =========================
   RESPONSIVIDADE GLOBAL
   ========================= */
.mobile-nav{display:none;}
@media (max-width:1024px){
  .header{gap:15px;}
  .empresa-nome{display:none;}
  .desktop-nav .nav-text{display:none;}
  .desktop-nav .nav-link{padding:8px;}
  main{padding-bottom:40px;}
}
@media (max-width:768px){
  body:not(.login-body){padding-bottom:70px;}
  .header{justify-content:center;}
  .logo{height:90px;}
  .desktop-nav,.header-user{display:none;}
  .mobile-nav{ display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--cor-borda); padding:5px 0;justify-content:space-around;z-index:999;height:65px; }
  .mobile-nav .nav-link{flex-direction:column;font-size:.8rem;gap:4px;padding:8px 5px;flex-grow:1;}
  .mobile-nav .nav-text{display:block;font-size:.75rem;}
  .mobile-nav .nav-avatar{width:28px;height:28px;border-width:1px;}
  main{margin-top:28px;}
  main h1{font-size:1.8rem;}
  .filter-bar{flex-direction:column;align-items:stretch;gap:15px;}
  .profile-content{padding:16px;}
  .user-form fieldset{padding:14px 12px;}
  .user-form .input-grid{grid-template-columns:1fr;}
  .user-form .form-actions .card-btn{width:100%;min-width:0;}
}
.profile-content .user-form fieldset { background:transparent; }

/* ======= ALTERAÇÃO: Header da Minha Conta (centralizado) ======= */
.profile-header{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center;
  background:#fff; border:1px solid #e0e0e0; border-radius:12px;
  padding:18px 16px; margin:0 auto 16px auto; max-width:560px;
  box-shadow:var(--sombra-card);
}
.profile-header .ph-name{ font-size:1.05rem; font-weight:700; color:#111; }
.profile-header .ph-meta{ display:flex; gap:8px; align-items:center; justify-content:center; color:#6b7280; font-size:.92rem; }
.profile-card{
  background:#fff; border:1px solid #e0e0e0; border-radius:12px;
  padding:16px; box-shadow:var(--sombra-card); max-width:860px; margin:0 auto;
}

/* Notas como pílulas */
.score-badge{ display:inline-block; min-width:56px; text-align:center; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.9rem; line-height:1; border:1px solid transparent; }
.score-good{   background:rgba(40,167,69,.12);  color:#1e7e34;  border-color:rgba(40,167,69,.35);}
.score-regular{background:rgba(255,193,7,.14); color:#7a5200;  border-color:rgba(255,193,7,.35);}
.score-bad{    background:rgba(220,53,69,.12); color:#842029;  border-color:rgba(220,53,69,.35);}
@media (max-width:620px){
  td[data-label="Nota Geral"] .score-badge{ margin-left:auto; }
}

/* ==== FIX: perguntas no mobile virando "uma palavra por linha" ==== */
@media (max-width:900px){
  .card-list tbody tr{ align-items:stretch; }
  .card-list td[data-role="title"]{
    display:block; width:100%; max-width:unset !important;
    word-break:normal; overflow-wrap:break-word; white-space:normal;
  }
  .card-list td[data-role="meta"]{ max-width:unset; }
}

/* =========================================
   ⚙️ HISTÓRICO — BARRA DE FILTROS
   ========================================= */
.filter-bar{
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
  padding:16px;
  box-shadow:var(--sombra-card);
  margin-top:12px;
}
.filter-group{min-width:220px; flex:1;}
.filter-group label{display:block;margin:0 0 6px 2px;font-weight:600;color:#6b7280;}

.filter-actions{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.filter-btn,.export-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:8px;border:1px solid var(--cor-primaria);
  background:var(--cor-primaria);color:#fff;font-weight:700;cursor:pointer;
  text-decoration:none;transition:background .2s, border-color .2s, transform .05s;
}
.filter-btn:hover,.export-btn:hover{ background:var(--cor-primaria-hover); border-color:var(--cor-primaria-hover); }
.filter-btn:active,.export-btn:active{ transform:translateY(1px); }

/* =========================================================
   ✅ CHECKLIST — ESTILO MOBILE‑FIRST
   ========================================================= */
.checklist-form fieldset{
  padding:18px 14px;
  border-radius:12px;
  border:1px solid #e6e9ef;
  background:#fff;
}
.checklist-form legend{
  font-size:1.05rem;
  font-weight:800;
  color:#d21c23;
  padding:0 6px;
  margin-left:6px;
}

/* pergunta / resposta */
.question-item{margin:12px 0 14px 0;}
.question-title{margin:0 0 8px 0; font-weight:700; color:#111827; font-size:1rem; line-height:1.35;}
.answer-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:4px 0 8px 0;}
.answer-row label{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid #e6e9ef;border-radius:999px;cursor:pointer;background:#fafafa;}
.answer-row input[type="radio"]{accent-color:#e31b23;}

/* nota */
.note-row{display:flex;align-items:center;gap:10px;margin:2px 0 6px 0;}
.note-row.disabled{opacity:.45;}
.note-row strong{font-size:.95rem;color:#374151;}
.note-options{display:inline-flex;gap:10px;}
.note-options label{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px dashed #e5e7eb;border-radius:999px;background:#fff;}
.note-options input[type="radio"]{accent-color:#e31b23;}

/* comentário da seção */
.checklist-form .comment{ min-height:56px; resize:vertical; }

/* botão de evidência + input escondido */
.evidence-section{margin-top:10px;}
.evidence-section[hidden]{display:none !important;}
.evidence-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:10px;border:1px solid var(--cor-primaria);
  background:var(--cor-primaria);color:#fff;font-weight:800;cursor:pointer;
  text-decoration:none;user-select:none;
}
.evidence-btn:hover{background:var(--cor-primaria-hover);border-color:var(--cor-primaria-hover);}
.evidence-input{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* thumbnails */
.thumbnail-preview{ display:flex;flex-wrap:wrap;gap:10px;margin-top:10px; }
.thumb-wrap{
  position:relative; width:120px; height:90px;
  border:1px solid #e6e9ef; border-radius:12px; overflow:hidden; background:#f7f8fb;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.del-btn{
  position:absolute; top:6px; right:6px;
  width:30px;height:30px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center;
}
.del-btn:hover{ background:rgba(0,0,0,.7); }
.zoom-icon{
  position:absolute; left:6px; bottom:6px; display:inline-flex; align-items:center; justify-content:center;
  width:26px;height:26px;border-radius:999px;background:rgba(0,0,0,.45);
}

/* placeholder do container dinâmico */
#form-dynamic .placeholder{
  display:flex; align-items:center; justify-content:center;
  color:#6b7280; background:#fff; border:1px dashed #dfe3ea; border-radius:10px;
  min-height:120px; margin-top:10px;
}

/* ===== Modais do checklist ===== */
.cl-modal-bg{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.65); backdrop-filter:blur(0.5px);
  align-items:center; justify-content:center;
}
.cl-modal-box{
  background:#fff; border-radius:14px; padding:18px; max-width:90vw; box-shadow:0 18px 42px rgba(0,0,0,.35);
}
.cl-modal-box h3{ margin:0 0 6px 0; color:#e31b23; }
.cl-modal-box .btn.btn-ok{
  background:#e31b23; color:#fff; border-radius:10px; padding:10px 20px; font-weight:800; border:none; cursor:pointer;
}

/* === Modal de imagens === */
.cl-modal-bg.cl-modal-img{ display:none; align-items:center; justify-content:center; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.85); z-index:10000; }
.cl-modal-bg.cl-modal-img .cl-modal-box{ background:transparent; box-shadow:none; padding:0; display:flex; align-items:center; justify-content:center; max-width:95vw; max-height:95vh; }
.cl-modal-bg.cl-modal-img img{ max-width:95vw; max-height:95vh; width:auto; height:auto; margin:auto; display:block; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
#img-modal-src{max-width:96vw; max-height:85vh; display:block; border-radius:12px;}

/* ===== Mobile refinado ===== */
@media (max-width:768px){
  .checklist-form fieldset{ padding:14px 10px; }
  .question-title{ font-size:.98rem; }
  .answer-row label{ padding:7px 10px; }
  .note-row strong{ font-size:.9rem; }
  .note-options label{ padding:5px 9px; }

  .thumb-wrap{ width:80px; height:64px; border-radius:10px; }
  .del-btn{ width:24px; height:24px; top:5px; right:5px; }
  .zoom-icon{ width:22px; height:22px; left:5px; bottom:5px; }
}

/* telas muito estreitas */
@media (max-width:380px){
  .answer-row{ gap:8px; }
  .answer-row label{ padding:6px 8px; font-size:.92rem; }
  .note-options{ gap:8px; }
}

/* garante que nada “vaze” no iOS */
*{ max-width:100%; box-sizing:border-box; }

    /* ---------- Filtros ---------- */
    .filter-bar{
      display:grid; gap:12px; grid-template-columns:1fr; align-items:end;
      margin-bottom:14px;
    }
    .filter-group label{ font-weight:600; color:#475569; margin-bottom:6px; display:block; }
    .filter-group input[type="date"], .filter-group select{
      width:100%; height:42px; padding:0 10px;
      border:1px solid var(--cor-borda, #e5e7eb); border-radius:10px; background:#fff;
    }
    @media (min-width:480px){ .filter-bar{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (min-width:900px){ .filter-bar{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
    .filter-actions{
      grid-column:1/-1; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:2px;
    }
    @media (max-width:480px){
      .filter-actions .filter-btn, .filter-actions .export-btn{ flex:1; justify-content:center; }
    }

    /* ---------- Desktop/Tablet: TABELA ---------- */
    .results-desktop{
      background:#fff; border:1px solid #eaeaea; border-radius:14px;
      box-shadow:var(--sombra-card, 0 4px 15px rgba(0,0,0,.06));
      overflow:hidden;
    }
    .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table.historico{
      width:100%; min-width:700px; border-collapse:separate; border-spacing:0; font-size:14.5px;
    }
    table.historico thead th{
      position:sticky; top:0; z-index:1; background:#f9fafb; border-bottom:2px solid #e5e7eb;
      text-align:left; padding:12px 14px; font-weight:700; color:#334155;
    }
    table.historico tbody td{
      padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; color:#1f2937;
      word-break:break-word;
    }

    /* ESCOPADO: impede que o estilo de botões do Histórico vaze para outras telas */
    .results-desktop .action-buttons{ display:flex; gap:8px; flex-wrap:wrap; }           /* ESCOPADO */
    .results-desktop .action-btn{
      display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px;
      text-decoration:none; border:1px solid #ef4444; background:#ef4444; color:#fff; font-weight:700;
    }                                                                                   /* ESCOPADO */
    .results-desktop .action-btn i{ width:18px; height:18px; }                          /* ESCOPADO */

    .score-badge{
      display:inline-block; padding:4px 8px; border-radius:999px; font-weight:700;
      background:#f3f4f6; border:1px solid #e5e7eb;
    }

    /* ---------- Mobile: LISTA/ACCORDION ---------- */
    .results-mobile{ display:none; }
    @media (max-width:768px){
      .results-desktop{ display:none; }
      .results-mobile{ display:block; }
    }
    .mlist{
      display:flex; flex-direction:column; gap:12px;
    }
    .mlist-item{
      background:#fff; border:1px solid #eaeaea; border-radius:14px; box-shadow:0 4px 15px rgba(0,0,0,.06);
      padding:12px;
    }
    .mlist-row{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .mlist-main{
      display:flex; flex-direction:column; gap:2px;
    }
    .mlist-title{ font-weight:700; color:#111827; }
    .mlist-sub{ font-size:.92rem; color:#4b5563; }
    .mlist-note{ font-size:.92rem; font-weight:700; }
    .mlist-note .score-badge{ margin-left:6px; }

    details.mlist-details{
      margin-top:10px; border-top:1px dashed #e5e7eb; padding-top:10px;
    }
    details.mlist-details summary{
      list-style:none; cursor:pointer; font-weight:700; color:#374151; display:flex; align-items:center; gap:8px;
    }
    details.mlist-details summary::-webkit-details-marker{ display:none; }
    .mlist-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

    /* ---------- Paginação ---------- */
    .pagination{
      display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; flex-wrap:wrap;
    }
    .pagination .page-btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:8px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
      cursor:pointer; text-decoration:none; font-weight:700;
    }
    .pagination .page-btn[disabled]{ opacity:.45; cursor:not-allowed; }
    .pagination .page-btn.is-current{
      background:var(--cor-primaria, #e31b23); color:#fff; border-color:var(--cor-primaria, #e31b23);
    }
    .pagination .page-info{ color:#666; font-size:.92rem; padding:6px 8px; }

/* ==== FIX: usuários sobrepondo "Usuário:" no mobile ==== */
@media (max-width:900px){
  /* remove a compressão da 2ª coluna que era para desktop */
  .card-list tbody td,
  .card-list tbody td:nth-child(2){
    max-width: unset !important;
    width: auto !important;
  }

  /* mantém a organização dos cards de usuários */
  .card-list.usuarios-cards tbody tr{ 
    align-items: center; 
    text-align: center; 
  }
  .card-list.usuarios-cards td[data-role="title"]{
    display: block; width: 100%;
    font-weight: 700; font-size: 1.1rem; color:#111;
    margin-bottom: 10px;
  }
  .card-list.usuarios-cards td[data-role="meta"]{
    display: block; width: 100%; 
    text-align: center; margin-bottom: 6px;
  }
  .card-list.usuarios-cards td[data-role="actions"]{
    justify-content: center; margin-top: 10px;
  }
}

/* =========================
   Desktop – Setores (coluna ações à direita de verdade)
   ========================= */
/* SUBSTITUI o antigo bloco "Desktop – Tabela de Setores (ajuste final)" */
@media (min-width:901px){

  /* 1) desfaz regras globais de largura que ferram esta tabela */
  .card-list.setores-cards tbody td:nth-child(2){
    max-width: unset !important;
    width: auto !important;
  }

  /* 2) força o layout desejado por coluna */
  .card-list.setores-cards thead th:first-child,
  .card-list.setores-cards tbody td:first-child{
    width: 100%;              /* Setor ocupa o restante */
  }

  .card-list.setores-cards thead th:last-child,
  .card-list.setores-cards tbody td:last-child{
    width: 1%;                /* Ações mínima (encosta na direita) */
    white-space: nowrap;
  }

  /* 3) alinha os botões realmente no fim da célula */
  .card-list.setores-cards td[data-role="actions"]{
    display: flex;
    align-items: center;
    justify-content: flex-end; /* final da coluna */
    gap: 10px;
    flex-wrap: nowrap;
  }

  /* 4) padroniza botões e remove margem do <form> */
  .card-list.setores-cards td[data-role="actions"] .action-btn{
    min-width: 110px;
    text-align: center;
  }
  .card-list.setores-cards td[data-role="actions"] form{
    margin: 0;
  }
}

/* ============ CADASTROS (escopo local) ============ */
/* ALTERAÇÃO: centraliza SOMENTE nesta página, sem afetar o resto do site */
.page-cadastros h1{
  text-align:center;
}

.page-cadastros .subtitle{
  text-align:center;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  /* mantém o espaçamento já usado globalmente */
  margin-top:-10px;
  margin-bottom:40px;
}

/* ===== Ajuste para perguntas longas ===== */
.card-list td[data-role="title"] {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 480px; /* largura máxima só para não estourar */
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.results-meta {
  font-size: .9rem;
  color: #6b7280; /* texto suave */
  white-space: nowrap;
  margin-right: 16px; /* <<< NOVO: espaço da borda lateral */
}

.results-meta strong {
  color: var(--cor-primaria); /* ou #111827, conforme sua identidade */
}

/* ==== FIX: Quebra de linha correta no Nome da Categoria ==== */
.card-list.categorias-cards td[data-role="title"] {
  white-space: normal !important;   /* permite quebrar */
  word-break: normal;               /* não força quebrar cada sílaba */
  overflow-wrap: break-word;        /* quebra apenas se precisar */
}

/* ===== CATEGORIAS (desktop): largura correta das colunas ===== */
@media (min-width: 901px) {
  /* 1) desfaz a “compressão” herdada da 2ª coluna (criada para Perguntas) */
  .card-list.categorias-cards tbody td:nth-child(2) {
    max-width: unset !important;
    width: auto !important;
  }

  /* 2) dá largura à 1ª coluna (Nome) e mantém Ações estreita à direita */
  .card-list.categorias-cards thead th:first-child,
  .card-list.categorias-cards tbody td:first-child {
    width: 55% !important;   /* ajuste fino: 55–65% conforme gosto */
  }

  .card-list.categorias-cards thead th:last-child,
  .card-list.categorias-cards tbody td:last-child {
    width: 1%;
    white-space: nowrap;
  }
}

/* Quebra de linha elegante no Nome (sem “sílabas isoladas”) */
.card-list.categorias-cards td[data-role="title"] {
  white-space: normal !important;
  word-break: normal;        /* evita quebrar no meio de cada palavra */
  overflow-wrap: break-word; /* quebra apenas quando necessário */
}

/* ====== CATEGORIAS: corrigir coluna de Ações (desktop) ====== */
@media (min-width: 901px) {
  /* dá largura fixa suficiente à coluna de ações */
  .card-list.categorias-cards thead th:last-child,
  .card-list.categorias-cards tbody td:last-child{
    width: 220px !important;   /* pode reduzir p/ 180–200 se preferir */
    white-space: nowrap;
  }

  /* garante layout flex correto dos botões e evita “quebrar” */
  .card-list.categorias-cards td[data-role="actions"]{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .card-list.categorias-cards td[data-role="actions"] .action-btn{
    min-width: 110px;          /* mantém rótulo visível (“Editar/Excluir”) */
    text-align: center;
  }
  .card-list.categorias-cards td[data-role="actions"] form{ margin: 0; }
}

/* mantém a quebra do Nome da categoria elegante (já aplicado) */
.card-list.categorias-cards td[data-role="title"]{
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
}

/* FIX: Setores — liberar a 2ª coluna "E-mails (qtd.)" e manter ações à direita */
.card-list.setores-cards thead th:first-child,
.card-list.setores-cards thead th:last-child{ width:auto !important; }
.card-list.setores-cards tbody td:nth-child(2){
  max-width:none !important;
  width:auto !important;
  white-space:nowrap;
  display:table-cell !important;
}
.card-list.setores-cards td[data-role="actions"]{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap;
}

/* ===== Setores: controla larguras via COLGROUP (mais forte que nth-child) ===== */
.card-list.setores-cards { table-layout: fixed; }

.card-list.setores-cards col.col-setor { width: auto !important; }
.card-list.setores-cards col.col-qtd   { width: 160px !important; }   /* quantidade */
.card-list.setores-cards col.col-acoes { width: 220px !important; }   /* botões */

/* alinhamentos e não quebrar a contagem */
.card-list.setores-cards thead th:nth-child(2),
.card-list.setores-cards tbody td:nth-child(2) {
  white-space: nowrap !important;
  text-align: center;
}

/* ações à direita, sem empurrar as outras colunas */
.card-list.setores-cards td[data-role="actions"]{
  display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap;
}

.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

.status-sent {
  background-color: #16a34a; /* verde */
}

.status-pending {
  background-color: #f59e0b; /* amarelo/laranja */
  color: #111;
}

.status-failed {
  background-color: #dc2626; /* vermelho */
}

/* ======= HISTÓRICO — Paginação ======= */
.pagination-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:10px; padding:10px 12px;
  background:#fff; border:1px solid var(--cor-borda); border-radius:10px;
  box-shadow: var(--sombra-card);
}
.pagination{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.pagination .page-link{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px; padding:8px 12px; border-radius:8px;
  text-decoration:none; font-weight:600; font-size:.95rem; line-height:1;
  background:#fff; color:#374151; border:1px solid #e5e7eb; cursor:pointer;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.pagination .page-link:hover{ background:#f8fafc; border-color:#d1d5db; }
.pagination .page-link:active{ transform: translateY(1px); }
.pagination .page-link.disabled{
  pointer-events:none; opacity:.55; background:#f9fafb; color:#9ca3af; border-color:#e5e7eb;
}
.page-info{
  font-weight:600; color:#4b5563; margin:0 4px; white-space:nowrap;
}

.results-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:#6b7280; font-size:.95rem;
}
.results-meta strong{ color:#111827; }
.results-meta .jumpers{ display:flex; gap:8px; }
.results-meta .jumpers .page-link{
  min-height:32px; padding:6px 10px; font-weight:600;
}

/* Compacta bem em telas menores */
@media (max-width: 720px){
  .pagination-bar{
    flex-direction:column; align-items:stretch; gap:10px; padding:10px;
  }
  .pagination{ justify-content:center; }
  .results-meta{ justify-content:center; }
}

/* Foco acessível */
.pagination .page-link:focus-visible{
  outline:3px solid rgba(227,27,35,.25);
  outline-offset:2px;
  border-color: var(--cor-primaria);
}

/* Avatar com iniciais do usuário */
.avatar-inicial {
  background-color:#e31b23;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem;
  border-radius:50%; width:34px; height:34px;
}

/* === Painel de Acompanhamento (matriz) === */
.filtros { margin: 8px 0 16px; }
.filtros-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.filtros-row label { display: flex; flex-direction: column; font-size: .9rem; color: #334155; }
.filtros-row input, .filtros-row select {
  padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; min-width: 160px;
}
.filtros .btn-primario { background: var(--cor-primaria, #e31b23); color: #fff; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; }

.painel-matriz-wrapper { overflow-x: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.painel-matriz { width: 100%; border-collapse: separate; border-spacing: 0; }
.painel-matriz thead th { position: sticky; top: 0; background: #f8fafc; z-index: 1; }

.painel-matriz th, .painel-matriz td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.painel-matriz td.col-setor { font-weight: 600; color: #0f172a; }

.flag-cell { min-width: 72px; text-align: center; }
.flag-empty { color: #cbd5e1; }

.badges { display: inline-flex; align-items: center; gap: 6px; }
.badge-iniciais {
  width: 32px; height: 32px; border-radius: 8px;
  background: #0f172a; color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; letter-spacing: .5px;
}
.badge-extra {
  font-size: .8rem; color: #0f172a; background: #e2e8f0;
  border-radius: 999px; padding: 2px 6px; font-weight: 700;
}

/* Overlay de iniciais nas miniaturas de evidência */
.thumb {
  position: relative;
  display: inline-block;
}
.thumb > img { display: block; border-radius: 8px; }
.thumb .thumb-badge {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(15,23,42,.9); color: #fff; font-weight: 700;
  border-radius: 999px; padding: 4px 8px; font-size: .75rem; letter-spacing:.5px;
  pointer-events: none;
}

/* Avatares na matriz do painel */
.flag-cell { min-width: 72px; text-align: center; }
.flag-empty { color: #cbd5e1; }

.avatars { display: inline-flex; align-items: center; gap: 6px; }
.avatar-img, .avatar-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; object-fit: cover;
}
.avatar-circle { background: #0f172a; color: #fff; font-size: .85rem; letter-spacing: .5px; }
.badge-extra {
  font-size: .8rem; color: #0f172a; background: #e2e8f0;
  border-radius: 999px; padding: 2px 6px; font-weight: 700;
}

/* Cabeçalhos clicáveis do histórico */
.th-sort {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.th-sort:hover { opacity: .8; }
.th-sort.active { font-weight: 700; }
.th-sort .arrow { font-size: .8rem; opacity: .7; }

/* === Ações no mobile (histórico) === */
.action-buttons-mobile{
  display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;
}
.action-buttons-mobile .action-btn{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; font-weight:600;
}
.action-buttons-mobile .action-btn.edit{ background:#f1f5f9; }
.action-buttons-mobile .action-btn.delete{ background:#fee2e2; border-color:#fecaca; }
.action-buttons-mobile .action-btn i{ width:18px; height:18px; }

/* === Modal de confirmação (centrado) === */
.modal-bg{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:1000;
}
.modal-bg.show{ display:flex; }
.modal-box{
  background:#fff; border-radius:12px; padding:16px; width:90%; max-width:420px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }

/* ===== Evidências (1, 2 ou 3) alinhadas e centralizadas ===== */
.evid-grid{
  display:grid; gap:10px; align-items:center; justify-items:center;
}
.evid-grid.ev-1{ grid-template-columns: 1fr; }
.evid-grid.ev-2{ grid-template-columns: 1fr 1fr; }
.evid-grid.ev-3{ grid-template-columns: 1fr 1fr 1fr; }

.evid-box{ width:100%; display:flex; align-items:center; justify-content:center; }
img.evid{
  width:100%; max-width: 180px; height:130px; object-fit:cover; /* preenche sem distorcer */
  border-radius:4px;
}

/* ===== Ações (PDF / Editar / Excluir) – visual unificado ===== */
.action-buttons, .results-mobile .action-buttons.mobile{
  display:flex; gap:8px; flex-wrap:wrap;
}

.action-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px; border-radius:10px;
  font-weight:700; letter-spacing:.2px; cursor:pointer; user-select:none;
  border:1px solid transparent; transition:filter .15s ease, transform .02s ease;
  background:#ef4444; color:#fff;  /* vermelho base */
}
.action-btn i{ width:18px; height:18px; }

/* Hover/active acessível (não “estoura” o vermelho) */
.action-btn:hover{ filter:brightness(.95); }
.action-btn:active{ transform:translateY(1px); }

/* Variações por tipo (se quiser mudar depois, estão aqui) */
.action-btn.edit{ background:#ef4444; }     /* mantém vermelho para os 3, como pediu */
.action-btn.delete{ background:#ef4444; }
.action-btn.pdf{ background:#ef4444; }

/* Mobile: mesma base, ocupando mais área de toque */
.results-mobile .action-btn{ flex:1; }

.footer-logo-inline {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 2px;
  border-radius: 4px;
  object-fit: contain;
}

/* Chips de data e lista de outros dias (mobile do Painel) */
.date-chip{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#1f2937;
  font-weight:700;
  font-size:.85rem;
  border:1px solid #e5e7eb;
}

.days-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.day-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px dashed #e5e7eb;
  border-radius:10px;
  background:#fafafa;
}
.day-flag .avatars .avatar-img,
.day-flag .avatars .avatar-circle{
  width:28px; height:28px;
}

/* ===== Painel de Acompanhamento — Mobile: tabela rolável ===== */
.results-mobile{ display:none; }

/* Ativar versão mobile e esconder desktop em telas pequenas */
@media (max-width: 900px){
  .results-desktop{ display:none; }
  .results-mobile{ display:block; }
}

/* Contêiner com rolagem horizontal suave (touch) e dica visual */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
  position:relative;
  background:#fff;
}

/* leve “sombra” lateral indicando que dá pra rolar */
.hint-scroll::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:18px;
  pointer-events:none;
  background:linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0));
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

/* Tabela mais compacta no mobile */
.painel-matriz-mobile{
  border-collapse:separate;
  border-spacing:0;
  min-width: 640px; /* garante colunas com largura mínima para rolar */
}

.painel-matriz-mobile thead th,
.painel-matriz-mobile tbody td{
  padding:10px 12px;
  font-size:0.95rem;
  white-space:nowrap;
}

/* Colunas de dias mais estreitas para caber melhor */
.painel-matriz-mobile thead th:not(.sticky-col-left),
.painel-matriz-mobile tbody td.flag-cell{
  min-width:86px;
  text-align:center;
}

/* 1ª coluna (Setor) fixa na esquerda para manter o contexto */
.sticky-col-left{
  position:sticky;
  left:0;
  z-index:2;
  background:#fff;            /* cobre o conteúdo que passa atrás */
  box-shadow: 4px 0 0 rgba(0,0,0,0.03); /* separador visual */
  max-width:260px;
  min-width:200px;
  text-align:left !important;
}

/* Cabeçalho “gruda” no topo quando a lista é comprida */
.painel-matriz-mobile thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
}

/* Avatares menores no mobile */
.painel-matriz-mobile .avatars .avatar-img,
.painel-matriz-mobile .avatars .avatar-circle{
  width:28px; height:28px;
}
.painel-matriz-mobile .badge-extra{
  font-size:.8rem;
  line-height:20px;
  min-width:20px;
  height:20px;
}

/* Célula vazia */
.flag-empty{
  color:#9ca3af;
  font-weight:600;
}

/* ===== Hint de rolagem horizontal (mobile) ===== */
.scroll-hint{
  position:absolute;
  right:8px;
  bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:rgba(17,24,39,.85);     /* cinza-900 com transparência */
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  backdrop-filter:blur(2px);
  pointer-events:none;                /* não intercepta toques */
  transform:translateX(0);
  opacity:1;
  transition:opacity .25s ease, transform .25s ease;
  animation: hint-nudge 1.4s ease-in-out 0s 3; /* 3 “cutucadas” */
}
.scroll-hint svg{
  width:18px; height:18px;
  stroke-width:2.5;
}

@keyframes hint-nudge{
  0%,100% { transform: translateX(0); }
  40%     { transform: translateX(-10px); }
  70%     { transform: translateX(0); }
}

/* estado escondido */
.scroll-hint.hide{
  opacity:0;
  transform:translateX(8px);
}

/* só mostrar o hint em telas pequenas */
@media (min-width: 901px){
  .scroll-hint{ display:none; }
}

/* reforço visual de que há mais conteúdo à direita */
.hint-scroll::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:22px;
  pointer-events:none;
  background:linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0));
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

/* Avatares empilhados (até 3) + badge extra */
.avatars{
  display:flex;
  align-items:center;
}

.avatar-stack{
  display:flex;
  align-items:center;
  position:relative;
}

.avatar-item{
  width:32px;
  height:32px;
  border-radius:999px;
  border:2px solid #fff;          /* borda para destacar sobre a célula */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:.85rem;
  background:#111827;             /* fallback para .avatar-circle */
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

/* imagens respeitam o mesmo tamanho da “bolacha” */
.avatar-img{
  width:32px;
  height:32px;
  border-radius:999px;
  object-fit:cover;
}

/* empilhamento com leve overlap */
.avatar-item + .avatar-item{
  margin-left:-8px;
}

/* badge de contagem extra (+N) no mesmo estilo da pilha */
.badge-extra{
  min-width:32px;
  padding:0 6px;                  /* mantém largura próxima dos 32px */
  background:#0f172a;             /* azul-escuro */
  color:#fff;
  line-height:28px;
  font-size:.85rem;
  border-radius:999px;
}

/* versão compacta no mobile do painel */
.painel-matriz-mobile .avatar-item{ width:28px; height:28px; font-size:.8rem; }
.painel-matriz-mobile .avatar-img{ width:28px; height:28px; }
.painel-matriz-mobile .badge-extra{ min-width:28px; line-height:24px; }

/* CATEGORIAS: destaque visual para o tipo */
.tag-tipo {
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
}

.tipo-seguranca {
  background: #dcfce7;   /* verde claro */
  color: #166534;        /* verde escuro */
  border: 1px solid #bbf7d0;
}

.tipo-ergonomia {
  background: #e0f2fe;   /* azul claro */
  color: #0369a1;        /* azul escuro */
  border: 1px solid #bae6fd;
}

/* ícones menores dentro da tag */
.tag-tipo i, .tag-tipo svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* MOBILE: faz o tipo ocupar a linha superior com mais destaque */
@media (max-width: 900px) {
  .card-list.categorias-cards td[data-role="meta"].col-tipo {
    order: -1;
    margin-bottom: 4px;
  }
  .card-list.categorias-cards td[data-role="meta"].col-tipo .tag-tipo {
    font-size: 1rem;
    padding: 8px 14px;
  }
}

.fa-solid {
  font-size: 1.15em;
  margin-right: 4px;
  vertical-align: middle;
  color: inherit;
}