/* assets/css/ndhe_app_2026.css
 * ---------------------------------------------------------------------------
 * Pacote visual profissional 2026 para o sistema NDHE/Estação Conhecimento.
 * Objetivo: dashboard profissional no computador e experiência de aplicativo
 * no celular, sem alterar regras de negócio ou consultas do sistema.
 * --------------------------------------------------------------------------- */

:root{
  --ndhe-bg: #f4faf7;
  --ndhe-bg-soft: #fbfdfb;
  --ndhe-surface: #ffffff;
  --ndhe-surface-soft: rgba(255,255,255,.92);
  --ndhe-text: #153b3b;
  --ndhe-muted: #5f7f7e;
  --ndhe-border: rgba(0,128,120,.16);
  --ndhe-border-strong: rgba(0,128,120,.28);
  --ndhe-primary: #007f78;
  --ndhe-primary-2: #16b8b0;
  --ndhe-primary-soft: rgba(0,127,120,.10);
  --ndhe-accent: #f4b000;
  --ndhe-accent-soft: rgba(244,176,0,.14);
  --ndhe-success: #0e9f6e;
  --ndhe-warning: #d99800;
  --ndhe-danger: #d14343;
  --ndhe-sidebar: #0c5c5f;
  --ndhe-sidebar-2: #063c40;
  --ndhe-shadow-sm: 0 8px 24px rgba(6,60,64,.08);
  --ndhe-shadow: 0 18px 48px rgba(6,60,64,.12);
  --ndhe-shadow-lg: 0 28px 80px rgba(6,60,64,.16);
  --ndhe-radius: 22px;
  --ndhe-radius-sm: 16px;
  --ndhe-topbar-height: 72px;
}

html{
  min-width: 320px;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body.ec-app-body,
body.ndhe-pro-shell{
  background:
    radial-gradient(900px circle at 0% -10%, rgba(244,176,0,.12), transparent 42%),
    radial-gradient(900px circle at 100% 0%, rgba(0,127,120,.12), transparent 38%),
    linear-gradient(180deg, #fcfffe 0%, var(--ndhe-bg) 100%) !important;
  color: var(--ndhe-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.ndhe-pro-shell::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(0,127,120,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,127,120,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 70%);
}

/* Área principal mais parecida com dashboard grande */
#ecMain{
  min-width: 0;
}

#ecMain > main.mx-auto,
#ecMain > footer > div{
  max-width: 1480px !important;
}

#ecMain > main.mx-auto{
  padding-top: 1.6rem !important;
}

/* Sidebar desktop */
#ecSidebar{
  width: 17.75rem !important;
  background:
    radial-gradient(280px circle at 8% 0%, rgba(244,176,0,.28), transparent 38%),
    radial-gradient(280px circle at 100% 12%, rgba(22,184,176,.18), transparent 45%),
    linear-gradient(180deg, var(--ndhe-sidebar) 0%, var(--ndhe-sidebar-2) 54%, #060b14 100%) !important;
  box-shadow: 20px 0 60px rgba(2,6,23,.24) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
}

@media (min-width: 768px){
  #ecMain{ margin-left: 17.75rem !important; }
  html.ec-collapsed #ecSidebar{ width: 5.25rem !important; }
  html.ec-collapsed #ecMain{ margin-left: 5.25rem !important; }
}

#ecSidebar a,
#ecSidebar button{
  -webkit-tap-highlight-color: transparent;
}

#ecSidebar .ec-sidebar-item{
  min-height: 50px;
  border: 1px solid transparent;
  color: rgba(226,232,240,.86) !important;
}

#ecSidebar .ec-sidebar-item:hover{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.10);
  transform: translateX(2px);
}

#ecSidebar .ec-sidebar-item[aria-current="page"]{
  background: linear-gradient(135deg, rgba(244,176,0,.22), rgba(0,127,120,.28)) !important;
  color:#fff !important;
  border-color: rgba(244,176,0,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(2,6,23,.16);
}

#ecSidebar .ec-sidebar-item > span:first-child{
  background: rgba(255,255,255,.08) !important;
  color: rgba(226,232,240,.92) !important;
}

#ecSidebar .ec-sidebar-item[aria-current="page"] > span:first-child{
  background: linear-gradient(135deg, var(--ndhe-accent), var(--ndhe-primary)) !important;
  color:#fff !important;
}

#ecSidebar .ec-sidebar-section{
  color: rgba(203,213,225,.55) !important;
  letter-spacing: .16em !important;
  font-size: .68rem !important;
}

#ecSidebar .ec-surface{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#ecSidebar .text-slate-900,
#ecSidebar .text-slate-700,
#ecSidebar .text-slate-600,
#ecSidebar .text-slate-500,
#ecSidebar .text-slate-400{
  color: rgba(226,232,240,.90) !important;
}

#ecSidebar .bg-slate-900,
#ecSidebar .bg-gradient-to-br{
  background: linear-gradient(135deg, var(--ndhe-accent), var(--ndhe-primary)) !important;
}

#ecSidebar .hover\:bg-slate-100:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Topbar */
header.sticky{
  min-height: var(--ndhe-topbar-height);
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(18px) saturate(1.12);
  border-bottom: 1px solid rgba(100,116,139,.16) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.055) !important;
}

header.sticky .h-16{
  min-height: var(--ndhe-topbar-height);
  height: var(--ndhe-topbar-height) !important;
}

#ecGlobalSearch{
  height: 48px;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#ecProfileMenu{
  border-radius: 20px !important;
  border: 1px solid var(--ndhe-border) !important;
  box-shadow: var(--ndhe-shadow-lg) !important;
}

/* Cabeçalho das páginas */
.app-page-header,
.ec-page-head{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px circle at 0% 0%, rgba(244,176,0,.14), transparent 44%),
    radial-gradient(380px circle at 100% 0%, rgba(0,127,120,.13), transparent 42%),
    rgba(255,255,255,.78) !important;
  border: 1px solid rgba(100,116,139,.16) !important;
  border-radius: 26px !important;
  padding: 1.25rem 1.35rem !important;
  margin-bottom: 1.35rem !important;
  box-shadow: var(--ndhe-shadow-sm) !important;
  backdrop-filter: blur(14px);
}

.app-page-header::before,
.ec-page-head::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.58), transparent 52%);
}

.app-page-header > *,
.ec-page-head > *{
  position: relative;
  z-index: 1;
}

.app-page-header h1,
.app-page-header .h4,
.ec-page-head h1,
.ec-page-head .h4{
  color: #0f172a !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

/* Cards, modais e blocos */
.card,
.modal-content,
.ec-card,
.ec-table-shell,
.alert,
.dropdown-menu,
.offcanvas,
.table-responsive,
.auth-card,
.auth-shell{
  border: 1px solid rgba(100,116,139,.17) !important;
  border-radius: var(--ndhe-radius) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: var(--ndhe-shadow-sm) !important;
  backdrop-filter: blur(14px);
}

.card{
  overflow: hidden;
}

.card:hover{
  box-shadow: var(--ndhe-shadow) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.78)) !important;
  border-color: rgba(100,116,139,.14) !important;
}

.card-body{
  position: relative;
}

/* KPIs */
#kpi-turmas,
.card.border-start{
  border-left: 0 !important;
}

.card.border-start::before,
#kpi-turmas::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 5px;
  background: linear-gradient(180deg, var(--ndhe-accent), var(--ndhe-primary));
  border-radius: 999px;
}

.display-5,
.ec-kpi-value,
.ec-box-value{
  letter-spacing: -.055em !important;
}

.icon-circle,
.rounded-circle.bg-primary-subtle,
.rounded-circle.bg-success-subtle,
.rounded-circle.bg-warning-subtle,
.rounded-3.bg-primary-subtle{
  border: 1px solid rgba(0,127,120,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 12px 24px rgba(15,23,42,.07);
}

/* Formulários */
.form-control,
.form-select,
.ec-input,
.input-group-text,
.form-floating > .form-control,
.form-floating > .form-select{
  border-radius: 16px !important;
  border-color: rgba(100,116,139,.22) !important;
  background-color: rgba(255,255,255,.94) !important;
  min-height: 46px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.form-control:focus,
.form-select:focus,
.ec-input:focus{
  border-color: rgba(0,127,120,.42) !important;
  box-shadow: 0 0 0 4px rgba(0,127,120,.12) !important;
}

.form-label,
.col-form-label{
  color: #334155;
  font-weight: 750;
}

/* Botões */
.btn{
  border-radius: 15px !important;
  font-weight: 780 !important;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn:hover,
.btn:focus{
  transform: translateY(-1px);
}

.btn-primary,
.btn-success{
  background: linear-gradient(135deg, var(--ndhe-primary), var(--ndhe-primary-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(0,127,120,.20) !important;
}

.btn-primary:hover,
.btn-success:hover{
  box-shadow: 0 18px 36px rgba(0,127,120,.25) !important;
}

.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(100,116,139,.20) !important;
  color: #334155 !important;
}

.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover{
  background: #fff !important;
  border-color: rgba(100,116,139,.30) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.08) !important;
}

.btn-danger{
  box-shadow: 0 14px 28px rgba(220,38,38,.18) !important;
}

.btn-sm{
  min-height: 38px;
  border-radius: 13px !important;
}

/* Badges */
.badge,
.ec-badge,
.ec-status,
.ec-perm-status-badge{
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .005em;
}

/* Tabelas desktop */
.table-responsive{
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,.35) transparent;
}

.table-responsive::-webkit-scrollbar{ width: 10px; height: 10px; }
.table-responsive::-webkit-scrollbar-thumb{ background: rgba(100,116,139,.32); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.table-responsive::-webkit-scrollbar-thumb:hover{ background: rgba(100,116,139,.50); border: 3px solid transparent; background-clip: padding-box; }

.table{
  --bs-table-bg: transparent;
  margin-bottom: 0 !important;
}

.table thead th,
.ec-table thead th{
  background: rgba(241,245,249,.96) !important;
  color: #475569 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(100,116,139,.18) !important;
  white-space: nowrap;
}

.table tbody td,
.table tbody th,
.ec-table tbody td{
  border-color: rgba(100,116,139,.12) !important;
  vertical-align: middle;
}

.table tbody tr:hover{
  background: rgba(0,127,120,.05) !important;
}

.table .btn-group{
  gap: .35rem;
}

.table .btn-group > .btn,
.table .btn-group > form > .btn{
  border-radius: 12px !important;
}

/* Chamada e relatórios continuam com rolagem horizontal, pois são planilhas */
.chamada-table-wrapper,
.ec-report-table-wrapper{
  border-radius: var(--ndhe-radius) !important;
}

.chamada-table-wrapper .table-responsive,
.ec-report-table-wrapper .table-responsive{
  overflow: auto !important;
}


/* Correção: evita que nomes de atividades fiquem quebrando letra por letra
   em telas intermediárias. A tabela passa a ter rolagem horizontal limpa
   em desktop/tablet e continua virando card no celular. */
.ec-dashboard-classes-scroll{
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.ec-dashboard-classes-table{
  min-width: 1040px;
  table-layout: auto;
}

.ec-dashboard-classes-table th:nth-child(1),
.ec-dashboard-classes-table td:nth-child(1){
  min-width: 250px;
}

.ec-dashboard-classes-table th:nth-child(2),
.ec-dashboard-classes-table td:nth-child(2){
  min-width: 230px;
  max-width: 320px;
}

.ec-dashboard-classes-table th:nth-child(3),
.ec-dashboard-classes-table td:nth-child(3){
  min-width: 110px;
}

.ec-dashboard-classes-table th:nth-child(4),
.ec-dashboard-classes-table td:nth-child(4){
  min-width: 95px;
}

.ec-dashboard-classes-table th:nth-child(5),
.ec-dashboard-classes-table td:nth-child(5){
  min-width: 160px;
}

.ec-dashboard-classes-table th:nth-child(6),
.ec-dashboard-classes-table td:nth-child(6){
  min-width: 230px;
  white-space: nowrap;
}

.ec-dashboard-classes-table td:nth-child(2) .d-flex{
  flex-wrap: wrap;
  align-items: center;
  min-width: 210px;
}

.ec-dashboard-classes-table .ec-activity-name{
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  line-height: 1.35;
  min-width: 150px;
  max-width: 220px;
}

.ec-dashboard-classes-table td:last-child .btn-group,
.ec-dashboard-classes-table td:last-child .d-flex{
  flex-wrap: nowrap;
}

/* Login */
.auth-bg{
  background:
    radial-gradient(900px circle at 12% 8%, rgba(244,176,0,.22), transparent 44%),
    radial-gradient(800px circle at 88% 16%, rgba(0,127,120,.22), transparent 44%),
    linear-gradient(135deg, #06393d 0%, #0b5457 48%, #052d30 100%) !important;
}

.auth-card,
.auth-shell{
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(2,6,23,.42) !important;
}

.auth-visual,
.auth-hero{
  background:
    radial-gradient(520px circle at 22% 18%, rgba(255,255,255,.18), transparent 48%),
    linear-gradient(145deg, var(--ndhe-accent) 0%, var(--ndhe-primary) 24%, var(--ndhe-primary-2) 100%) !important;
}

.auth-submit{
  min-height: 52px;
}

/* Área de suporte/chat */
.ec-support .ec-chat-bubble,
.ec-file-card,
.ec-attach-item,
.ec-attach-box{
  border-radius: 18px !important;
}

.ec-support .ec-chat-item.is-mine .ec-chat-bubble{
  background: linear-gradient(180deg, rgba(244,176,0,.12), rgba(0,127,120,.10)) !important;
}

/* Navegação inferior estilo aplicativo */
.ec-mobile-tabbar{
  display: none;
}

/* Ajustes para desktop menor */
@media (max-width: 1366px) and (min-width: 768px){
  #ecMain > main.mx-auto{
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }
  .row.g-4{ --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .card-body{ padding: 1rem; }
  .app-page-header,
  .ec-page-head{ padding: 1rem !important; }
}

/* Celular: visual de aplicativo */
@media (max-width: 767.98px){
  :root{
    --ndhe-topbar-height: 64px;
  }

  body.ndhe-pro-shell,
  body.ec-app-body{
    background: linear-gradient(180deg, #fbfdfb 0%, #eef7f3 100%) !important;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  body.ndhe-pro-shell::after{
    display:none;
  }
  .ec-dashboard-classes-table{
    min-width: 0 !important;
  }

  .ec-dashboard-classes-table th,
  .ec-dashboard-classes-table td{
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  .ec-dashboard-classes-table td:nth-child(2) .d-flex{
    min-width: 0 !important;
  }

  .ec-dashboard-classes-table .ec-activity-name{
    min-width: 0 !important;
    max-width: none !important;
  }


  #ecSidebar{
    width: min(88vw, 342px) !important;
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  #ecSidebarOverlay{
    backdrop-filter: blur(5px);
  }

  #ecMain > main.mx-auto{
    padding: .9rem .85rem 1rem !important;
  }

  header.sticky{
    min-height: 64px;
    border-bottom: 1px solid rgba(100,116,139,.13) !important;
  }

  header.sticky .h-16{
    min-height: 64px;
    height: 64px !important;
  }

  header.sticky .mx-auto{
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  .app-page-header,
  .ec-page-head{
    border-radius: 24px !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .app-page-header .d-flex,
  .ec-page-head .d-flex,
  .card-header .d-flex,
  .card-footer .d-flex{
    align-items: stretch !important;
  }

  .app-page-header .btn,
  .ec-page-head .btn,
  .card-header .btn,
  .card-footer .btn{
    min-height: 44px;
  }

  .row.g-4,
  .row.g-3,
  .row.g-2{
    --bs-gutter-x: .8rem;
    --bs-gutter-y: .8rem;
  }

  .card,
  .modal-content,
  .alert,
  .auth-card,
  .auth-shell{
    border-radius: 22px !important;
  }

  .card-header,
  .card-body,
  .card-footer,
  .modal-header,
  .modal-body,
  .modal-footer{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .btn,
  .form-control,
  .form-select,
  .ec-input,
  .input-group-text{
    min-height: 46px;
    font-size: .96rem;
  }

  .btn-group{
    gap: .4rem;
    flex-wrap: wrap;
  }

  .btn-group > .btn,
  .btn-group > form > .btn{
    border-radius: 14px !important;
  }

  footer{
    display:none;
  }

  .ec-mobile-tabbar{
    position: fixed;
    left: max(.7rem, env(safe-area-inset-left, .7rem));
    right: max(.7rem, env(safe-area-inset-right, .7rem));
    bottom: max(.65rem, env(safe-area-inset-bottom, .65rem));
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .28rem;
    padding: .45rem;
    border-radius: 24px;
    background: rgba(8,13,23,.90);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(2,6,23,.34);
    backdrop-filter: blur(18px) saturate(1.08);
  }

  .ec-mobile-tabbar a{
    text-decoration:none;
    color: rgba(226,232,240,.74);
    min-width: 0;
    min-height: 56px;
    border-radius: 18px;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap:.18rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
  }

  .ec-mobile-tabbar a i{
    font-size: 1.15rem;
    line-height: 1;
  }

  .ec-mobile-tabbar a.is-active{
    color:#fff;
    background: linear-gradient(135deg, rgba(244,176,0,.96), rgba(0,127,120,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(0,127,120,.20);
  }

  .ec-mobile-tabbar a span{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tabelas comuns viram cards no celular */
  .table-responsive.ec-mobile-cards{
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
  }

  .table-responsive.ec-mobile-cards > table{
    display: block;
  }

  .table-responsive.ec-mobile-cards > table > thead{
    display: none;
  }

  .table-responsive.ec-mobile-cards > table > tbody{
    display: grid;
    gap: .75rem;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr{
    display: block;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(100,116,139,.16);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(15,23,42,.07);
    overflow: hidden;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr.d-none,
  .table-responsive.ec-mobile-cards > table > tbody > tr[style*="display: none"]{
    display: none !important;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    padding: .78rem .95rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(100,116,139,.10) !important;
    text-align: right !important;
    white-space: normal !important;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td:last-child,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th:last-child{
    border-bottom: 0 !important;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td::before,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th::before{
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    color: #64748b;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td[data-label=""],
  .table-responsive.ec-mobile-cards > table > tbody > tr > th[data-label=""]{
    display:block;
    text-align:left !important;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td[data-label=""]::before,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th[data-label=""]::before{
    display:none;
  }

  .table-responsive.ec-mobile-cards td .d-flex,
  .table-responsive.ec-mobile-cards th .d-flex{
    justify-content: flex-end;
  }

  .table-responsive.ec-mobile-cards td .btn-group,
  .table-responsive.ec-mobile-cards th .btn-group{
    justify-content: flex-end;
  }

  .table-responsive.ec-mobile-cards td .btn-group .btn,
  .table-responsive.ec-mobile-cards td form .btn{
    min-width: 44px;
  }

  .chamada-table-wrapper .table-responsive,
  .chamada-table-wrapper,
  .ec-report-table-wrapper .table-responsive,
  .ec-report-table-wrapper{
    overflow: auto !important;
  }

  .chamada-table,
  .ec-report-table{
    display: table !important;
  }

  .chamada-table thead,
  .ec-report-table thead{
    display: table-header-group !important;
  }

  .chamada-table tbody,
  .ec-report-table tbody{
    display: table-row-group !important;
  }

  .chamada-table tr,
  .ec-report-table tr{
    display: table-row !important;
    box-shadow: none !important;
  }

  .chamada-table td,
  .chamada-table th,
  .ec-report-table td,
  .ec-report-table th{
    display: table-cell !important;
    text-align: inherit !important;
  }

  .chamada-table td::before,
  .chamada-table th::before,
  .ec-report-table td::before,
  .ec-report-table th::before{
    display:none !important;
  }
}

@media (max-width: 575.98px){
  .display-5{ font-size: 2.25rem; }
  .app-page-header > div:last-child,
  .ec-page-head > div:last-child{
    width: 100%;
  }
  .app-page-header > div:last-child .btn,
  .ec-page-head > div:last-child .btn{
    flex: 1 1 auto;
  }
  .card-header .d-flex,
  .card-footer .d-flex{
    flex-direction: column;
  }
  .card-header .d-flex > *,
  .card-footer .d-flex > *{
    width: 100%;
  }
  .search-box-modern{
    min-width: 0 !important;
    width: 100% !important;
  }
}



/* Identidade visual Estação Conhecimento */
a,
.text-primary{ color: var(--ndhe-primary); }

.text-muted{ color: var(--ndhe-muted) !important; }

.btn-warning{
  background: linear-gradient(135deg, #f6b100, #ffd054) !important;
  border-color: transparent !important;
  color: #4a3a00 !important;
  box-shadow: 0 14px 28px rgba(244,176,0,.22) !important;
}

.btn-warning:hover{
  box-shadow: 0 18px 36px rgba(244,176,0,.28) !important;
}

.badge.bg-warning,
.badge.text-bg-warning{
  background: linear-gradient(135deg, #f6b100, #ffd054) !important;
  color: #4a3a00 !important;
}

.badge.bg-success,
.badge.text-bg-success{
  background: linear-gradient(135deg, var(--ndhe-primary), var(--ndhe-primary-2)) !important;
}

#ecSidebar .bg-blue-600,
#ecSidebar .bg-blue-50,
#ecSidebar .ring-blue-100,
#ecSidebar .text-blue-700{
  background-color: transparent !important;
  color: inherit !important;
  --tw-ring-color: transparent !important;
}

#ecSidebar .ec-sidebar-item[aria-current="page"] span.bg-blue-600:last-child{
  background: var(--ndhe-accent) !important;
}

header.sticky .text-slate-900,
header.sticky .text-slate-700{
  color: var(--ndhe-text) !important;
}

#ecGlobalSearch:focus,
#ecGlobalSearch:focus-visible{
  border-color: rgba(0,127,120,.28) !important;
  box-shadow: 0 0 0 4px rgba(0,127,120,.08), 0 12px 28px rgba(6,60,64,.06) !important;
}

.table thead th,
.ec-table thead th{
  background: linear-gradient(180deg, rgba(245,250,248,.96), rgba(238,247,243,.94)) !important;
  color: #436665 !important;
}

.card-header,
.modal-header{
  position: relative;
}

.card-header::after,
.modal-header::after{
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ndhe-accent), var(--ndhe-primary), transparent 78%);
  opacity: .8;
}

.form-check-input:checked{
  background-color: var(--ndhe-primary) !important;
  border-color: var(--ndhe-primary) !important;
}

.pagination .page-link{
  color: var(--ndhe-primary) !important;
  border-radius: 12px !important;
  border-color: rgba(0,127,120,.16) !important;
}

.pagination .page-item.active .page-link{
  background: linear-gradient(135deg, var(--ndhe-primary), var(--ndhe-primary-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

@media (max-width: 767.98px){
  .ec-mobile-tabbar{
    background: rgba(7,49,52,.94);
    border: 1px solid rgba(255,255,255,.12);
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}