/* =============================================
   PLANOS DE AÇÃO — estilos específicos
   ============================================= */

/* ─── Cards de status — linha 1 (maiores) ─── */
.pstat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--pstat-color, #94a3b8);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  transition: box-shadow .2s, transform .2s;
}
.pstat-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.pstat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: var(--pstat-bg, #f1f5f9);
  color: var(--pstat-color, #64748b);
}

.pstat-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--pstat-color, #1e293b);
}

.pstat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.pstat-slate { --pstat-color: #64748b;         --pstat-bg: #f1f5f9; }
.pstat-red   { --pstat-color: var(--danger);   --pstat-bg: var(--danger-bg); }
.pstat-amber { --pstat-color: #d97706;         --pstat-bg: #fffbeb; }
.pstat-green { --pstat-color: var(--success);  --pstat-bg: var(--success-bg); }

/* ─── Cards de insight — linha 2 (menores) ── */
.sstat-card {
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  transition: box-shadow .2s;
}
.sstat-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }

.sstat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.sstat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.sstat-label {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.sstat-hint {
  font-size: 10px;
  font-weight: 400;
  opacity: .7;
  text-transform: none;
  letter-spacing: 0;
}

.sstat-red   { background: var(--danger-bg);   border: 1px solid var(--danger-border);  color: #b91c1c; }
.sstat-red   .sstat-icon { background: var(--danger-bg-soft); }
.sstat-blue  { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.sstat-blue  .sstat-icon { background: #dbeafe; }
.sstat-green { background: var(--success-bg);  border: 1px solid var(--success-border); color: var(--success); }
.sstat-green .sstat-icon { background: var(--success-bg-soft); }

/* ─── Barra de filtros ───────────────────── */
.plano-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.plano-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.plano-filter-status { flex: 1 1 0; min-width: 0; }

.plano-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.plano-status-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}

.plano-status-tab {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.plano-status-tab:hover:not(.active) {
  border-color: var(--blue-primary);
  color: var(--blue-primary);
}

.plano-status-tab.active  { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; }
.tab-parado.active        { background: #dc2626; border-color: #dc2626; }
.tab-andamento.active     { background: #d97706; border-color: #d97706; }
.tab-finalizado.active    { background: #16a34a; border-color: #16a34a; }
.tab-vencido.active       { background: #7c3aed; border-color: #7c3aed; }

.plano-filter-select {
  width: 160px;
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-primary);
  background: #fff;
  outline: none;
  transition: border-color .2s;
}
.plano-filter-select:focus { border-color: var(--blue-primary); }

/* ─── Seletor de modo (Todos / Meus Planos) ── */
.plano-modo-switcher {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
}
.plano-modo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
}
.plano-modo-btn:hover:not(.plano-modo-active) {
  color: var(--text-primary);
  background: rgba(255,255,255,.7);
}
.plano-modo-active {
  background: #fff;
  color: var(--blue-primary);
  box-shadow: 0 1px 5px rgba(0,0,0,.1);
}

/* ─── Filtro de status (dentro do card) ──────── */
.pa-status-filter-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0 12px;
  flex-wrap: wrap;
}
.pa-sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.pa-sf-btn:hover:not(.pa-sf-active) {
  color: var(--text-primary, #1e293b);
  background: rgba(0,0,0,.03);
}
.pa-sf-active {
  color: var(--blue-primary, #3b82f6);
  border-bottom-color: var(--blue-primary, #3b82f6);
  font-weight: 600;
}
.pa-sf-parado.pa-sf-active   { color: #dc2626; border-bottom-color: #dc2626; }
.pa-sf-andamento.pa-sf-active { color: #d97706; border-bottom-color: #d97706; }
.pa-sf-finalizado.pa-sf-active{ color: #16a34a; border-bottom-color: #16a34a; }

/* ─── Sub-seletor (Responsável / Solicitante) ─ */
.plano-sub-switcher {
  display: inline-flex;
  background: #e8f0fe;
  border: 1px solid #93bff5;
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}
.plano-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--blue-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.plano-sub-btn:hover:not(.plano-sub-active) {
  background: rgba(255,255,255,.6);
  color: #1557b0;
}
.plano-sub-active {
  background: #fff;
  color: var(--blue-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

@media (max-width: 768px) {
  .plano-filter-bar  { flex-direction: column; align-items: stretch; }
  .plano-status-tabs { flex-wrap: wrap; }
  .plano-filter-select { width: 100%; }
  .pa-plan-row-res   { display: none; }
}

@media (max-width: 575px) {
  /* KPI primários */
  .pstat-card  { padding: 14px 16px; gap: 12px; }
  .pstat-num   { font-size: 22px; }
  .pstat-icon  { width: 40px; height: 40px; font-size: 17px; }
  .pstat-label { font-size: 10px; }

  /* KPI secundários */
  .sstat-card { padding: 12px 14px; gap: 10px; }
  .sstat-num  { font-size: 18px; }
  .sstat-icon { width: 32px; height: 32px; font-size: 14px; }

  /* Tabela por responsável */
  .plano-table-sm th { font-size: 10px; padding: 8px 10px; }
  .plano-table-sm td { font-size: 11px; padding: 8px 10px; }
  .pa-cnt { font-size: 11px; min-width: 24px; padding: 2px 7px; }
  .col-rank { display: none; }

  /* Accordion de planos */
  .pa-group-header  { padding: 11px 14px; gap: 8px; }
  .pa-group-badges  { display: none; }
  .pa-group-total   { font-size: 11px; }
  .pa-plan-row      { padding: 9px 12px; gap: 8px; }
  .pa-plan-row-prazo { display: none; }
  .pa-plan-detail   { padding: 12px 12px 14px 30px; }
  .pa-sub-item      { padding: 8px 10px; gap: 8px; }
  .pa-sub-oq        { font-size: 12px; }
  .pa-sub-field     { font-size: 11px; }

  /* Barra de busca */
  .plano-search-input       { width: 180px; }
  .plano-search-input:focus { width: 200px; }
}

/* ─── Tabela geral ────────────────────────── */
.plano-table-wrap { overflow-x: auto; }

.plano-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.plano-table th {
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  white-space: nowrap;
}

.plano-table td {
  padding: 13px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid #f8fafc;
  vertical-align: top;
}

.plano-table tbody tr:last-child td { border-bottom: none; }
.plano-table tbody tr:hover td      { background: #f8fafc; }

.col-center { text-align: center !important; }

/* ─── Linha vencida ──────────────────────── */
.row-vencido td            { background: #fff8f8; }
.row-vencido:hover td      { background: #fef2f2 !important; }

/* ─── Visibilidade controlada por classe ─── */
.pa-hidden { display: none !important; }

/* ─── Accordion de planos ────────────────── */
.pa-group { border-bottom: 1px solid #f1f5f9; }
.pa-group:last-child { border-bottom: none; }

.pa-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  border-left: 3px solid transparent;
}
.pa-group-header:hover  { background: #f8fafc; }
.pa-group-open          { background: #f8fafc; }
.pa-group-has-venc .pa-group-header { border-left-color: #94a3b8; }

.pa-group-chevron {
  flex-shrink: 0;
  width: 14px;
  color: var(--text-muted);
  font-size: 11px;
  transition: transform .2s;
}
.pa-group-open .pa-group-chevron { transform: rotate(90deg); }

.pa-group-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
}

.pa-group-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pa-gbadge {
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pa-gbadge-parado { background: #fef2f2; color: #dc2626; }
.pa-gbadge-and    { background: #fffbeb; color: #d97706; }
.pa-gbadge-fin    { background: #f0fdf4; color: #16a34a; }
.pa-gbadge-venc   { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }

.pa-group-total {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Lista de planos dentro do grupo */
.pa-group-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pa-plan-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.pa-plan-item.is-vencido-item {
  border-color: #cbd5e1;
  background: #f8fafc;
}

/* Linha compacta (sempre visível) */
.pa-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  border-left: 3px solid transparent;
}
.pa-plan-row:hover              { background: #f8fafc; }
.pa-plan-row.pa-plan-row-open  { background: #eff6ff; border-left-color: var(--blue-primary); }
.pa-plan-row.is-vencido        { border-left-color: #94a3b8; }
.pa-plan-row.is-vencido.pa-plan-row-open { border-left-color: #64748b; background: #f1f5f9; }

.pa-plan-chevron {
  flex-shrink: 0;
  width: 14px;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .2s;
}
.pa-plan-row-open .pa-plan-chevron { transform: rotate(90deg); }

.pa-plan-row-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pa-plan-row-res {
  flex: 0 0 200px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pa-plan-row-prazo {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.pa-row-vencido { color: #64748b !important; font-weight: 600; }

/* Painel de detalhe expandido */
.pa-plan-detail {
  padding: 14px 16px 16px 46px;
  background: #f8fafc;
  border-top: 1px solid #e8edf5;
}
.pa-plan-item.is-vencido-item .pa-plan-detail { background: #f1f5f9; }

.pa-detail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.pa-detail-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.pa-detail-cmt { font-style: italic; color: var(--text-muted); }

.pa-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.pa-detail-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pa-detail-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
}
.pa-detail-field-label i { font-size: 10px; }

.pa-detail-field-val {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.pa-detail-vencido { color: #64748b !important; font-weight: 700; }

/* ─── Badge de contagem de ações por assunto ─ */
.pa-ass-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ─── Sub-itens (planos individuais) ────────── */
.pa-sub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pa-sub-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e8edf5;
  border-left: 3px solid #e2e8f0;
  border-radius: 8px;
}
.pa-sub-item.pa-sub-vencido {
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.pa-sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.pa-sub-oq {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pa-sub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.pa-sub-field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}
.pa-sub-field i        { font-size: 10px; }
.pa-sub-field-venc     { color: #64748b !important; font-weight: 600; }
.pa-sub-field-cmt      { font-style: italic; }

/* ─── Tabela compacta (por responsável) ──── */
.plano-table-sm th {
  padding: 9px 14px;
  font-size: 10px;
}
.plano-table-sm td {
  padding: 9px 14px;
  font-size: 12px;
}

/* ─── Rank e paginação (por responsável) ─── */
.col-rank {
  width: 36px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.pessoa-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
}

.pessoa-pag-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.pessoa-pag-btn:hover:not(:disabled) {
  border-color: var(--blue-primary);
  color: var(--blue-primary);
}
.pessoa-pag-btn:disabled { opacity: .35; cursor: default; }

#pessoa-page-info {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 100px;
  text-align: center;
}

/* ─── Tabela "Por pessoa" ────────────────── */
.plano-pessoa-nome {
  font-weight: 600;
  color: var(--text-primary);
}

.pa-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.pa-cnt-parado    { background: #fef2f2; color: #dc2626; }
.pa-cnt-andamento { background: #fffbeb; color: #d97706; }
.pa-cnt-total     { background: #f1f5f9; color: var(--text-primary); }

/* ─── Barra de busca da tabela ──────────── */
.plano-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.plano-search-wrap > .fa-magnifying-glass {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}

.plano-search-input {
  width: 260px;
  padding: 8px 36px 8px 34px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-primary);
  background: #f8fafc;
  outline: none;
  transition: border-color .2s, background .2s, width .25s;
}
.plano-search-input:focus {
  border-color: var(--blue-primary);
  background: #fff;
  width: 320px;
}
.plano-search-input::placeholder { color: var(--text-muted); }

.plano-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s;
}
.plano-search-clear:hover { color: #dc2626; }

/* ─── Destaque de busca ──────────────────── */
mark.plano-hl {
  background: #fef08a;
  color: #713f12;
  border-radius: 2px;
  padding: 0 2px;
}

/* ─── Estados vazios ─────────────────────── */
.plano-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 36px 20px;
}