.div-centralizada {
  max-width: 500px;
  margin: 0 auto;
}

.iti__flag {background-image: url("../img/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {background-image: url("../img/flags@2x.png");}
  }


.classic-header {
    padding: 5px 5px 5px 0px;
    background-color: lightyellow;
    font-weight: bold;

}

.classic-foto {

  max-height: 40px;
  border-radius: 50%;
}

.avatar {
    /* Tamanho do avatar */
    width: 40px;
    height: 40px;
    
    /* Fundo e texto */
    background-color: #099bdd; /* Cor de fundo personalizável */
    color: white;
    
    /* Formato circular */
    border-radius: 50%;
    
    /* Centralização das iniciais */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Estilo do texto */
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}


.circle-char{
width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #adb8ef;
    color: #ffffff;
    line-height: 1;
    user-select: none;
}


.ret-1 {
  display: inline-block;
  padding: 4px 8px 4px 8px;
  border-radius: 6px;       /* arredondamento */
  background: #227e9e;      /* cor de fundo */
  color: #ffffff;           /* cor do texto */
  white-space: nowrap;
}

.ret-2 {
  display: inline-block;
  padding: 4px 8px 4px 8px;
  border-radius: 6px;       /* arredondamento */
  background: #508223;      /* cor de fundo */
  color: #ffffff;           /* cor do texto */
  white-space: nowrap;
}

.ret-3 {
  display: inline-block;
  padding: 4px 8px 4px 8px;
  border-radius: 6px;       /* arredondamento */
  background: #058db6;      /* cor de fundo */
  color: #ffffff;           /* cor do texto */
  white-space: nowrap;
}


/*Relatorio Celula Grade  */
/* Badges de status */
.rel-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
}
.rel-rascunho {
    background: #fff3cd;
    color: #856404;
}
.rel-enviado {
    background: #d4edda;
    color: #155724;
}
.rel-aprovado {
    background: #cce5ff;
    color: #004085;
}

.rpt-mini-grid{
  border-collapse: collapse;
  width: 100%;
}
.rpt-mini-grid td{
  padding: 4px;
  vertical-align: top;
  white-space: nowrap; /* remova se quiser quebrar linha */
}




/* ============================================
   PWA  Avisos
   ============================================ */

/* Container */
#avisos-container .t-Report-report {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

/* Remove table styling do Classic Report */
#avisos-container table.t-Report-report {
    display: flex;
    flex-direction: column;
    border: none;
}
#avisos-container .t-Report-report tr {
    display: block;
}
#avisos-container .t-Report-report td {
    display: block;
    padding: 0;
    border: none;
}

/* Card */
.aviso-card {
    background: var(--ut-component-background-color, #fff);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-left: 4px solid var(--ut-component-border-color, #e0e0e0);
    cursor: default;
    transition: box-shadow 0.2s;
}

/* Card clicável (com ação) */
.aviso-card[data-acao-tipo]:not([data-acao-tipo=""]) {
    cursor: pointer;
}
.aviso-card[data-acao-tipo]:not([data-acao-tipo=""]):active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    opacity: 0.95;
}

/* Borda por prioridade */
.aviso-urgente { border-left-color: var(--ut-palette-danger, #e04040); }
.aviso-normal  { border-left-color: var(--ut-palette-primary, #3a7ce1); }
.aviso-baixa   { border-left-color: var(--ut-palette-warning, #e0a020); }
.aviso-info    { border-left-color: var(--ut-component-border-color, #ccc); }

/* Banner */
.aviso-banner {
    width: 100%;
    overflow: hidden;
    background: var(--ut-component-border-color, #f0f0f0);
}
.aviso-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Body */
.aviso-body {
    padding: 12px 14px;
}

/* Header: badge + pin + data */
.aviso-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.aviso-data {
    margin-left: auto;
    color: var(--ut-text-muted, #888);
    font-size: 11px;
}

.aviso-pin {
    color: var(--ut-palette-primary, #3a7ce1);
    font-size: 12px;
}

/* Badge de prioridade */
.aviso-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.aviso-badge-urgente {
    background: var(--ut-palette-danger-shade, #fde8e8);
    color: var(--ut-palette-danger, #c53030);
}
.aviso-badge-normal {
    background: var(--ut-palette-primary-shade, #e8f0fe);
    color: var(--ut-palette-primary, #2d5fad);
}
.aviso-badge-baixa {
    background: var(--ut-palette-warning-shade, #fef3cd);
    color: var(--ut-palette-warning-text, #856404);
}

/* Titulo */
.aviso-titulo {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ut-text-title, #222);
}

/* Mensagem (HTML do Rich Text) */
.aviso-mensagem {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ut-text-body, #555);
    /* Limitar altura com "ver mais" via JS se necessário */
    max-height: 120px;
    overflow: hidden;
    position: relative;
}
.aviso-mensagem.expandido {
    max-height: none;
}
.aviso-mensagem:not(.expandido)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(transparent, var(--ut-component-background-color, #fff));
}

/* Limpar estilos do Rich Text dentro do card */
.aviso-mensagem p { margin: 0 0 4px 0; }
.aviso-mensagem h1,.aviso-mensagem h2,.aviso-mensagem h3 { font-size: 14px; margin: 4px 0; }
.aviso-mensagem img { max-width: 100%; height: auto; }

/* Botão de ação */
.aviso-acao {
    margin-top: 10px;
}
.aviso-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: var(--ut-palette-primary, #3a7ce1);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}
.aviso-btn:active {
    opacity: 0.85;
}

/* Estado vazio */
.aviso-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--ut-text-muted, #999);
    text-align: center;
}
.aviso-vazio .fa {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
}
.aviso-vazio p {
    margin: 0;
    font-size: 14px;
}


@media (max-width: 640px) {
    .mobile-half.col {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }
}