@font-face {
font-family: 'Clario';
src: url('../fonts/Clario-Regular.otf') format('woff2'),
url('../fonts/Clario-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'Clario medium';
src: url('../fonts/Clario-Medium.otf') format('woff2'),
url('../fonts/Clario-Medium.ttf') format('truetype');
}

@font-face {
font-family: 'SourceSans3';
src: url('../fonts/SourceSans3-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'SourceSans3-bold';
src: url('../fonts/SourceSans3-Bold.ttf') format('truetype');
}

:root{   
  --top-bg: #123021; 
  --top-fg: #ffffff; 
  --top-container: 1440px;
  --top-fg: #ffffff; 
  --bg:#ffffff; 
  --text:#111827; 
  --muted:#6b7280; 
  --border:#8a8a8a; 
  --surface:#fafafa;
  --page-container: 1440px;
  --color-ok:#22c55e; --color-degraded:#f59e0b; 
  --color-partial:#f97316; 
  --color-down:#ef4444; 
  --color-maint:#2563eb;
  --chip:#f3f4f6; 
  --chip-border:#d1d5db;
  --container:1120px; 
  --radius:10px; 
  --space-1:4px; 
  --space-2:8px; 
  --space-3:12px; 
  --space-4:16px; 
  --space-5:24px; 
  --space-6:32px; 
  --space-7:48px; 
  --tab-accent:#d64000; /* cor do sublinhado da aba ativa */
  --tab-text:#111827;   /* texto da aba ativa */
  --tab-muted:#212223;  /* texto das abas inativas */
  --rule:#d2d2d2;       /* linha cinza sob a barra de abas */
  --focus:#2563eb;      /* cor do contorno de foco */
  --button-green:#123021;
  --button-border: #1d4b34; /* verde do botão / --green-600:#155e49; --focus:#2563eb; / foco azul nos itens */ 
  --text:#111827; 
  --border:#d1d5db; 
  --panel:#ffffff; 
  --shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12); 
  --text-heavy: #212223;
  --text-strong: #d2d2d2;
  --text-subtle: #666666;
  --color-date-list: #054688;
  --links: #0062c4;
  --border-focus: #0065ff;
  --overlay: rgba(0,0,0,.55);
  --radius: 1rem;
  --speed: .22s;
  --border-stronger: #8a8a8a;
}

/* Reset mínimo */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:"Clario","Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; } img,svg{display:inline-block}

.topbar{
  background: var(--top-bg);
  color: var(--top-fg);
  height: 56px; 
  padding: 8px 32px; 
  margin: 0;
}

.topbar__inner{
  max-width: var(--top-container); 
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Tipografia/cores dentro do topo */
.brand{
  display:flex; 
  align-items:center; 
  gap:16px;
  color: var(--top-fg)
}

.brand__name, .product, .divider{
  color: var(--top-fg);
  font-family: 'Clario medium';
  font-size: 19px;
}

.brand__mark{
  width:194px; 
  height:26px; 
}

/* Container principal */ 
.container{
  width: auto;
  max-width: var(--page-container); 
  margin:0 auto; 
  padding: 24px 28px 0;
  box-sizing: border-box;
}

.container > { 
  margin: 0 
} 

.container > * + { 
  margin-top: 24px 
}

.page-header{ 
  display:flex;
  align-items:center; 
}

/* Títulos */ 
h1, h2, h3{ 
  color:var(--text-heavy);
}

.page-title{ 
  font-size: 32px; 
  line-height: 1.25; 
  margin: 0;
} 

.alert_bar  {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: 'SourceSans3';
    color:var(--text-heavy);
    margin-top: 24px;
    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.16);
}

.alert_bar.warning  {
    background-color: #fff8e5;
    border: solid 1px #ab3300;
}

.alert_bar > .left-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.alert_bar > .right-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.subtitle{
  font-size:28px; 
  margin:24px 0 16px;
}

h3{ 
  font-size: 20px; 
  line-height: 1.3; 
  color:var(--text-heavy);
  margin: 0 0 24px 0;
}

h4{
  font-size: 1rem;
  color:var(--text-heavy);
  margin: 0;
}

.col-title-bar  {
  display: flex;
  flex-direction: row;
}

.col-title-bar h3{
  display: flex;
  flex-grow: 1;
  padding-left: 12px;
  
}

.toolbar{
  display:flex; 
  margin-left:auto;
} 

button {
  font-family: 'Clario';
  font-size: 1rem;
  font-weight: normal;
  border-radius:4px;
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.16);
  cursor:pointer
}

.primary{
  border:1px solid var(--button-border);
  background:var(--button-green);
  color:#f7f7f7;
  padding:8px 16px;
}

.secondary{ 
  border: 1px solid var(--button-border); 
  background: #ffffff; 
  color: var(--button-border); 
  padding: 8px 16px; 
  position: relative;
 }

 .secondary .badge{ 
    font-family: 'SourceSans3';
    position: absolute; 
    left: 77px; 
    top: -3px; 
    width: 16px; 
    height: 16px; 
    background: #ab3300; 
    border: 1px solid #ffffff;
    box-shadow: 0 0 0 1px #ffffff;
    border-radius: 50%; 
    pointer-events: none; 
    overflow: hidden;    
 }

 .secondary .badge::before{ 
  content: "4"; 
  position: absolute;
  inset: 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 14px; 
  line-height: 1;
  color: #fff8e5; 
  white-space: nowrap;
}

/* Botão com select */
.ddl{ 
  position:relative; 
  margin-right: 1rem;
}

.ddl__button{ 
  display:inline-flex; 
  align-items:center; 
  gap:.5rem; 
  cursor:pointer; 
} 

.ddl__button:focus-visible{ 
  /* outline:3px solid #a7f3d0; 
  outline-offset:2px;  */
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0065FF;
} 

.ddl__button[aria-expanded="true"] .ddl__chevron{ 
  transform:rotate(180deg); 
} 

.ddl__chevron{ 
  transition:transform .15s ease; 
}

/* Lista flutuante */ 
.ddl__list{ 
  position:absolute; 
  padding-inline-start: 0;
  inset-inline-start:-35px; 
  top:calc(100% + .5rem); 
  min-width:320px !important; 
  max-width:450px !important;
  background:var(--panel); 
  border:1px solid var(--border); 
  border-radius:8px; 
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.16);  
  margin:0; 
  list-style:none; 
  z-index:10; 
  padding: .25rem;
}

/* Opções */ 
.ddl__option{ 
  min-height: 40px;
  height: auto;
  padding: .5rem .75rem; 
  cursor:pointer; 
  outline:0; 
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
} 

.ddl__option a{ 
  font-family: 'SourceSans3';
  font-size: 1rem;
  text-decoration: none;
  color:var(--text-heavy);
  display: block;
  width: 100%;
}

.ddl__option:hover{ 
  background:#f3f4f6; 
} 

/* "foco"/item ativo com aro azul como na imagem */ 

.ddl__option.is-active{ 
  box-shadow:0 0 0 3px var(--border-focus) inset; 
  border-radius:4px; 
} 

.ddl__option[aria-selected="true"]{ 
  background:#fff; 
}

/* Acessível para usuários que preferem menos animação */ 
@media (prefers-reduced-motion:no-preference){ 
  .ddl__chevron{ 
    transition:transform .15s ease; 
  } 
}

/* Ajuste responsivo básico */ 
@media (max-width:768px){ 
  .ddl__button{ 
    width:100%; 
  } 

  .ddl__list{ 
    min-width:280px !important;
    max-width:calc(100vw - 2rem) !important;
    left: 0;
    right: auto;
  } 
}

/* Agrupamento de botões */
.btn-group{
  display:inline-flex; 
  gap:0;
  border-radius: 4px;
} 

button.subbtn:first-of-type{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;  
}

button.subbtn:last-of-type{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;  
}

.btn-group > button{
  position: relative;
}

.btn-group > button:hover,
.btn-group > button:focus{
  z-index: 1;
}

.btn-webhelp{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-maint{
  border-radius: 0;
}
.btn-report{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

 .btn-alertas{
  margin-right:16px
}

.chip{ 
  appearance:none; 
  border:1px solid var(--chip-border); 
  background:var(--chip); 
  border-radius:999px; 
  padding:8px 14px; 
  font-weight:600; 
  color:#1f2937; 
  cursor:pointer; 
} 

.chip--emph{
  background:#e9f2ff; 
  border-color:#bfdbfe; 
  color:#1e40af
} 

.i{
  width:18px; 
  height:18px; 
  vertical-align:middle
} 

.i--caret{
  color:#6b7280; 
  margin-right:6px
}

.tree{ 
  display:block; 
  margin:0 } 
  
  .tree + .tree{ 
    margin-top:12px 
  }

.tree__caret{ 
  display:inline-block; 
  transition: transform .2s ease; 
  color:#6b7280; 
} 

.tree__label  {
  display: flex;
  flex-grow: 2;
  width: 100%;
}

.tree__label img.status{
  margin-right: 8px;
  margin-top: 4px;
}

.tree__leaf img.status{
  margin-right: 8px;
}

.tree__label span, .tree__leaf span {
  display: flex;
  flex-grow: 1;
}

.tree__parent{ 
  height: 40px;
  list-style:none; 
  cursor:pointer; 
  display:flex; 
  font-family: 'SourceSans3';
  align-items:center; 
  gap:8px; 
  padding:10px 0 10px 12px; 
  background:#fff; 
  color:var(--text-heavy);
  border-radius:8px; 
} 
  
.tree__parent::-webkit-details-marker{ 
  display:none; 
  gap: 16px;
}

.tree__parent::before{ 
  background-image: url("../img/caret-icon.png");
  background-repeat: no-repeat;
  content:""; 
  width:16px; 
  height:16px; 
  margin-right:4px; 
  margin-top: 4px;
  flex:0 0 10px;
}

.tree[open] .tree__parent::before{ 
  transform: rotate(90deg); 
 }

.tree__group{ 
  list-style:none; 
  margin:0; 
  padding:0 0 0 22px; 
} 
  
.tree__leaf {
  height: 40px;
  list-style:none; 
  cursor:pointer; 
  display:flex; 
  font-family: 'SourceSans3';
  align-items:center; 
  padding:10px 0 10px 12px; 
  background:#fff; 
  color:var(--text-heavy);
  border-radius:8px; 
  position:relative; 
}

.tree__leaf::before{ 
  gap:16px;
}

.grid{ 
  display: flex; 
  flex-direction: row
}

.col:first-child{ 
  width: 100%;
} 

.col:last-child{ 
  width: 100%;
}

.divider{
  width: 1px;
  margin: 0 12px;
  background-color: #e5e5e5;

}

section li{
  font-family: 'SourceSans3';
}

/* Abas */

/* Container das abas */
/* .tabs{
  margin:24px auto;
} */

.tabs { 
  display:flex; 
  gap:8px; 
  margin:24px auto;
} 

section.tabs{
  flex-direction: column;
}

/* Barra de abas com a linha cinza em toda a largura */
.tablist{
  width: 100%;
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--rule);
  margin: 0 0 2rem 0;
}

/* Botões das abas */
.tab{
  font-family: 'SourceSans3';
  font-weight: bold;;
  height: 40px;
  appearance:none;
  background:none;
  border:0;
  margin:0;
  padding:8px 16px; /* espaço para o sublinhado encostar na linha cinza */
  color:var(--tab-muted);
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  box-shadow: none;
}

/* Estado selecionado/ativo */
.tab[aria-selected="true"]{
  color:var(--tab-text);
}

/* Sublinhado apenas na aba ativa */
.tab::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;        /* encosta na borda inferior (linha cinza) */
  height:4px;
  width:100%;
  background:transparent;
}
.tab[aria-selected="true"]::after{
  background:var(--tab-accent);
}

/* Foco visível e acessível */
.tab:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:3px;
}

/* Estado disabled (se usar) */
.tab[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

/* Painéis de conteúdo */
.tabpanel{
  display: none;
  padding:0 28px;
  /* padding:16px 0; */
  line-height:1.5;
}

.tabpanel[data-active="true"] {
  display:block; 
} 

 /* Botões internos do painel */

.subbtn { 
  cursor:pointer; 
} 

.subbtn[aria-pressed="true"] { 
  background:var(--button-green); 
  border-color:var(--button-green); 
  color:var(--bg); 
} 

.tabpanel h2 {
  margin: 0 0 24px 0;
}

.tabpanel .btn-group{
  margin-bottom: 24px;
}

section.content  button {
  text-align: left;
  text-decoration: underline;
  font-size: 1.25rem;
  width: 100%;
  margin:0;
}

section.content  p {
  font-family: 'SourceSans3';
  width: 100%;
  margin: 16px 0 8px 0;
}

section.content  p.scheduling-date {
  color: var(--color-date-list);
  float: right;
  margin: 0 0 8px 0;
  line-height: 1;
}

section.content  p.posting-date {
  color: var(--text-subtle);
  margin: 0;
}

section.content a{
  font-size: 20px;
  text-decoration: underline;
  color: var(--text-heavy);
  width: 100%;
}

section.content img{
  border: solid 2px var(--border-stronger);
}


/* Ocultação dos painéis não ativos */
.is-hidden{ 
  display:none; 
}

/* O atributo hidden já esconde nativamente; manter ambos garante compatibilidade */
[hidden]{ 
  display:none !important; 
}

/* Preferência do usuário por menos animação */
@media (prefers-reduced-motion:no-preference){
  .tab{ transition:color .15s ease; }
  .tab::after{ transition:background-color .15s ease; }
}

/* Responsivo: permite quebra das abas em múltiplas linhas */

 @media (max-width: 767px) { 
  .grid{ 
    grid-template-columns: 1fr; 
  } 

  @media (max-width:520px){
  .tablist{ 
    flex-wrap:wrap; 
    gap:16px; }
}
  
  .col:first-child{ 
    padding-right: 0; 
  }
  
  .col:last-child{
     padding-left: 0; 
     border-left: none; 
    } 
  }

/* Linhas de status */ 
.row{
  display:flex;
  align-items:center;
  gap:10px; 
  padding:10px 12px;
  border:1px solid transparent;
  background:transparent;
} 
  
.row:hover{
    background:#f9fafb;
} 

.row.is-open{
  background:#fff
} 

.row__label{
  font-weight:600
  } 
  
.status{
  display:inline-flex; 
  color:var(--color-ok)
} 

.info{
  display:inline-flex; 
  color:#2563eb; 
  margin-right:2px
}

/* Separador e legenda */ 
hr {
  border:0; 
  border-top:1px solid var(--text-strong); 
  margin:24px 0
} 

.legend{
  font-family: 'SourceSans3';
  display:flex; 
  justify-content: center;
  flex-wrap:wrap; 
  height: 24px;
  gap:24px; 
  color:var(--text-heavy);
  font-size: 1rem; 
  margin-bottom: 4rem;;
} 


.legend__item{
  display:inline-flex; 
  align-items:center; 
  gap:8px;
} 

/* Rodapé */ 
.footer{
  border-top:1px solid var(--border); 
  margin-top:32px; 
  background:#f2f2f2;
  padding: 20px 0;
  max-height: 114px;
  display: flex;
  justify-content: center;
} 

.footer-container{
  width: 1440px;
  display:flex; 
  padding: 0 32px;
  flex-direction: column;
  justify-content: center; 
  gap:16px; 
}

.footer-top{
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
}
  
.footer-logo{
  display:flex; 
  align-items:center; 
  gap:8px; 
  color:#374151
} 

.footer-links{
  display: flex;
  gap: 12px;
}

.footer-links a{
  color:var(--links); 
  font-family: 'SourceSans3';
  font-size: 14px;
  text-decoration:underline;
}  

.footer-links a:hover{
  text-decoration:underline;
} 

.footer-bottom{
  width: 100%;
  height: 2rem;;
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap:16px; 
  color: var(--text-subtle);
}

.footer-social{
  height: 19px;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

/* Janela modal */

button.btn-abrir-modal  {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
}

dialog {
  border: 0; 
  padding: 2rem 1.5rem;  
  border-radius: var(--radius);
  max-width: min(700px);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  transform: translateY(8px) scale(.98);
  transition: transform var(--speed);
}
dialog[open] { 
  transform: translateY(0) scale(1); 
}

dialog::backdrop { 
  background: var(--overlay); 
}

/* Layout interno */
dialog > form > .content, dialog > div { 
  width: auto;
  background:#fff; 
  border-radius: var(--radius); 
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

dialog > .modal-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  margin: 0 0 4px 0;
}

dialog > .modal-top > h2{
  height: 34px;
  margin: 0;
}

dialog > h4 {
  height: auto;
  min-height: 19px;
  margin: 0 0 1.5rem 0;
}

.modal-scheduling-date  {
  font-family: 'SourceSans3'
}

.modal-posting-date  {
  font-family: 'SourceSans3'
}

dialog > form > .modal-content >.modal-scheduling-date {
  margin: 0 0 .5rem 0;
  color: var(--color-date-list)
}

dialog > form > .modal-content > p, dialog > form > p{
  margin: 0;
  font-family: 'SourceSans3';
}

dialog > form > .modal-content > p span.bold, dialog > form > p span.bold{
  margin: 0;
  font-family: 'SourceSans3-bold';
}

dialog > form > .modal-content > p.modal-posting-date, dialog > form > p.modal-posting-date  {
  margin: .5rem 0 0 0;
  color: var(--text-subtle);
}

dialog > form > .modal-range  {
  font-family: 'SourceSans3';
  margin: 0;
}
dialog > form > .modal-range > p  {
  font-family: 'SourceSans3';
  margin: 0;
}
dialog > form > .modal-range  > p > span.bold {
  font-family: 'SourceSans3-bold';
}

.menu, menu { 
  display:flex; 
  gap:.5rem; 
  justify-content:flex-end; 
  margin:24px 0 0 0; 
}

.modal-close {
  background: transparent; 
  border: 0; 
  font-size: 1.5rem; 
  line-height: 1; 
  cursor: pointer;
  padding: 0;
  box-shadow: none;
}

/* Reduz movimento para quem prefere */
@media (prefers-reduced-motion: reduce) {
  dialog { 
    transition: none; 
    transform: none; 
  }
}

/* Status Badges - Para páginas Admin Bootstrap */
.status-badge {
  font-size: 0.85rem;
  padding: 0.35rem 0.65rem;
  font-weight: 500;
}

.status-operational {
  background-color: #22c55e !important;
  color: white !important;
}

.status-degraded {
  background-color: #f59e0b !important;
  color: #212529 !important;
}

.status-partial_outage {
  background-color: #f97316 !important;
  color: white !important;
}

.status-major_outage {
  background-color: #ef4444 !important;
  color: white !important;
}

.status-maintenance {
  background-color: #2563eb !important;
  color: white !important;
}