@charset "UTF-8";
/* ================================
   UI-ALERT SYSTEM v2.0
   ================================
   - Suporte a temas dark/light
   - Responsividade (ultra-wide, desktop, mobile)
   - 4 variações de botões (success, danger, warning, info)
   ================================ */
/*! 
 * Responsividade — Breakpoints + media() + mq/mq-set
 * Versão: 1.1.0
 * Data: 2025-09-19
 * Autor: Herbert
 * Licença: Interna (projeto)
 * 
 * Descrição:
 *  - Mapa de breakpoints semânticos ($breakpoints).
 *  - Função media($alias) → "only screen and (...)".
 *  - Mixin mq($prop, $pairs...) [robusto]: 
 *      * aceita pares em formato flexível (com/sem parênteses, múltiplos pares),
 *      * agrupa <alias> + <valor(es)>,
 *      * define BASE **desktop-first**:
 *          - se existir `desktop`, usa como base;
 *          - senão, se existir `ultra-wide`, usa como base;
 *          - senão, usa o 1º alias informado,
 *      * emite @media para cada alias informado ≠ base.
 *  - Mixin mq-set($map): aplica várias propriedades de uma vez usando mq.
 *
 * Requisitos:
 *  - Compilador: Dart Sass recomendado.
 *  - SCSS: uso de funções de lista e strings (append, nth, length, type-of).
 *
 * Convenções:
 *  - Desktop-first: valor base é sempre uma faixa desktop (idealmente `desktop`).
 *  - Alias principais de layout:
 *      • mobile      → telefones
 *      • tablet-*    → tablets por faixa/orientação
 *      • desktop     → monitores "normais"
 *      • ultra-wide  → monitores muito largos
 *  - Para valores com vírgulas (gradients, múltiplos box-shadows): prefira variável ou unquote("...").
 *
 * Erros comuns (mensagens emitidas):
 *  - token 'X' não é um alias conhecido → alias não existe em $breakpoints.
 *  - nenhum valor para alias 'X' → faltou o valor após o alias.
 *  - tokens vazios após normalização → include sem pares válidos.
 *
 * Links internos:
 *  - DOCUMENTAÇÃO DE USO: ver wiki do projeto (Seção: Responsividade).
 */
.toolbar {
  display: flex;
  justify-content: flex-start;
  /* em tablet-sm centraliza */
  justify-content: center;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px;
}
@media only screen and (max-width: 1023px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 599px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 1023px) {
  .card-list {
    gap: 16px;
  }
}
@media only screen and (max-width: 599px) {
  .card-list {
    gap: 12px;
  }
}
@media only screen and (max-width: 1023px) {
  .card-list {
    padding: 18px;
  }
}
@media only screen and (max-width: 599px) {
  .card-list {
    padding: 12px;
  }
}

.panel {
  max-width: 80%;
  min-width: 60%;
}
@media only screen and (max-width: 1023px) {
  .panel {
    max-width: 760px;
  }
}
@media only screen and (max-width: 833px) {
  .panel {
    max-width: 72ch;
  }
}
@media only screen and (max-width: 819px) {
  .panel {
    max-width: 92%;
  }
}
@media only screen and (max-width: 599px) {
  .panel {
    max-width: 100%;
  }
}
@media only screen and (max-width: 1023px) {
  .panel {
    min-width: 70%;
  }
}
@media only screen and (max-width: 833px) {
  .panel {
    min-width: fit-content(72ch);
  }
}
@media only screen and (max-width: 819px) {
  .panel {
    min-width: 90%;
  }
}
@media only screen and (max-width: 599px) {
  .panel {
    min-width: 100%;
  }
}

.box {
  padding: 24px 32px;
  transform: translateX(0) translateY(0);
}
@media only screen and (max-width: 1023px) {
  .box {
    padding: 18px 24px;
  }
}
@media only screen and (max-width: 599px) {
  .box {
    padding: 12px 16px;
  }
}
@media only screen and (max-width: 599px) {
  .box {
    transform: translateX(-8px) translateY(0);
  }
}

.modal {
  min-height: 75vh;
  max-height: 92vh;
}
@media only screen and (max-width: 1023px) {
  .modal {
    min-height: 75vh;
  }
}
@media only screen and (max-width: 833px) {
  .modal {
    min-height: -moz-fit-content;
    min-height: fit-content;
  }
}
@media only screen and (max-width: 819px) {
  .modal {
    min-height: -moz-fit-content;
    min-height: fit-content;
  }
}
@media only screen and (max-width: 599px) {
  .modal {
    min-height: 100%;
  }
}
@media only screen and (max-width: 1023px) {
  .modal {
    max-height: 90vh;
  }
}
@media only screen and (max-width: 833px) {
  .modal {
    max-height: 88vh;
  }
}
@media only screen and (max-width: 819px) {
  .modal {
    max-height: 92vh;
  }
}
@media only screen and (max-width: 599px) {
  .modal {
    max-height: 100vh;
  }
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
@media only screen and (max-width: 1023px) {
  .header-actions {
    flex-direction: row;
  }
}
@media only screen and (max-width: 599px) {
  .header-actions {
    flex-direction: column;
  }
}
@media only screen and (max-width: 1023px) {
  .header-actions {
    align-items: center;
  }
}
@media only screen and (max-width: 599px) {
  .header-actions {
    align-items: stretch;
  }
}
@media only screen and (max-width: 1023px) {
  .header-actions {
    justify-content: center;
  }
}
@media only screen and (max-width: 599px) {
  .header-actions {
    justify-content: center;
  }
}
@media only screen and (max-width: 1023px) {
  .header-actions {
    gap: 10px;
  }
}
@media only screen and (max-width: 599px) {
  .header-actions {
    gap: 8px;
  }
}

.hero-banner {
  height: 60vh;
}
@media only screen and (orientation: portrait) {
  .hero-banner {
    height: 40vh;
  }
}
@media only screen and (max-width: 599px) {
  .hero-banner {
    height: 36vh;
  }
}

.panel-debug {
  min-width: 70%;
}
@media only screen and (width: 1366px) {
  .panel-debug {
    min-width: 60%;
  }
}

.panel-prod {
  min-width: 60%;
}
@media only screen and (max-width: 1023px) {
  .panel-prod {
    min-width: 70%;
  }
}
@media only screen and (max-width: 819px) {
  .panel-prod {
    min-width: 90%;
  }
}
@media only screen and (max-width: 599px) {
  .panel-prod {
    min-width: 100%;
  }
}

.title {
  font-size: 2.25rem;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem);
}
@media only screen and (max-width: 1023px) {
  .title {
    font-size: 1.9rem;
  }
}
@media only screen and (max-width: 599px) {
  .title {
    font-size: 1.6rem;
  }
}

.badge--desktop {
  display: inline-flex;
  display: none;
}

.badge--mobile {
  display: none;
  display: inline-flex;
}

.layout {
  display: grid;
  grid-template-areas: "aside main";
  grid-template-columns: 280px 1fr;
  grid-template-areas: main aside;
}
@media only screen and (max-width: 1023px) {
  .layout {
    grid-template-columns: 240px 1fr;
  }
}
@media only screen and (max-width: 599px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

/* ================================
   WRAPPER (Backdrop overlay)
   ================================ */
.wrapper-ui-message.ocultar {
  display: none !important;
}

alert-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  /* ================================
     CONTAINER PRINCIPAL
     ================================ */
}
@media (prefers-color-scheme: dark) {
  alert-wrapper {
    background-color: rgba(0, 0, 0, 0.75);
  }
}
alert-wrapper alert-box {
  width: 520px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
  /* ================================
     HEADER - Ícone + Título + Fechar
     ================================ */
  /* ================================
     MAIN - Conteúdo / Descrição
     ================================ */
  /* ================================
     FOOTER - Botões de Ação
     ================================ */
  /* ================================
     ESTILOS POR TIPO DE ALERTA
     ================================ */
  /* TYPE: INFO (Azul) */
  /* TYPE: SUCCESS (Verde) */
  /* TYPE: WARNING (Amarelo/Laranja) */
  /* TYPE: DANGER (Vermelho) */
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box {
    width: 560px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box {
    width: 95%;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box {
    background: #1e1e1e;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}
alert-wrapper alert-box alert-box-header {
  padding: 20px 24px 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-header {
    padding: 24px 28px 18px 28px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-header {
    padding: 16px 20px 14px 20px;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-header {
    border-bottom: 1px solid #2a2a2a;
  }
}
alert-wrapper alert-box alert-box-header .alert-icon {
  width: 28px;
  height: 28px;
  font-size: 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-header .alert-icon {
    width: 32px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-header .alert-icon {
    width: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-header .alert-icon {
    height: 32px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-header .alert-icon {
    height: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-header .alert-icon {
    font-size: 20px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-header .alert-icon {
    font-size: 16px;
  }
}
alert-wrapper alert-box alert-box-header .alert-title {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-header .alert-title {
    font-size: 16px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-header .alert-title {
    font-size: 14px;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-header .alert-title {
    color: #e5e5e5;
  }
}
alert-wrapper alert-box alert-box-header .alert-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s;
  color: #333;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-header .alert-close {
    color: #ccc;
  }
}
alert-wrapper alert-box alert-box-header .alert-close:hover {
  opacity: 1;
}
alert-wrapper alert-box alert-box-header .alert-close:focus {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
alert-wrapper alert-box alert-box-main {
  padding: 16px 24px;
  flex: 1;
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-main {
    padding: 20px 28px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-main {
    padding: 14px 20px;
  }
}
alert-wrapper alert-box alert-box-main .alert-desc {
  font-size: 14px;
  color: #444;
  line-height: 1.5;
  margin: 0;
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-main .alert-desc {
    font-size: 15px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-main .alert-desc {
    font-size: 13px;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-main .alert-desc {
    color: #b8b8b8;
  }
}
alert-wrapper alert-box alert-box-main .ui-message-list {
  margin: 8px 0 0 20px;
  padding: 0;
}
alert-wrapper alert-box alert-box-main .ui-message-list li {
  margin-bottom: 4px;
  color: #444;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-main .ui-message-list li {
    color: #b8b8b8;
  }
}
alert-wrapper alert-box alert-box-footer {
  padding: 12px 24px 20px 24px;
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-footer {
    padding: 16px 28px 24px 28px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-footer {
    padding: 12px 20px 18px 20px;
  }
}
alert-wrapper alert-box alert-box-footer .alert-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  /* ================================
     ESTILOS BASE DOS BOTÕES
     ================================ */
}
alert-wrapper alert-box alert-box-footer .alert-actions .btn {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  background: #f5f5f5;
  color: #333;
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-footer .alert-actions .btn {
    padding: 10px 20px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-footer .alert-actions .btn {
    padding: 8px 14px;
  }
}
@media only screen and (min-width: 1600px) {
  alert-wrapper alert-box alert-box-footer .alert-actions .btn {
    font-size: 15px;
  }
}
@media only screen and (max-width: 599px) {
  alert-wrapper alert-box alert-box-footer .alert-actions .btn {
    font-size: 13px;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-footer .alert-actions .btn {
    background: #2a2a2a;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-footer .alert-actions .btn {
    color: #e5e5e5;
  }
}
alert-wrapper alert-box alert-box-footer .alert-actions .btn:hover {
  background: #e5e5e5;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box alert-box-footer .alert-actions .btn:hover {
    background: #3a3a3a;
  }
}
alert-wrapper alert-box alert-box-footer .alert-actions .btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
alert-wrapper alert-box.type-info .alert-icon {
  background: #e7f0ff !important;
  color: #005ad6;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-info .alert-icon {
    background: #1a2942 !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-info .alert-icon {
    color: #5b9fff;
  }
}
alert-wrapper alert-box.type-info .btn-primary-info {
  background: #005ad6 !important;
  color: #fff !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-info .btn-primary-info {
    background: #0066ff !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-info .btn-primary-info {
    color: #fff !important;
  }
}
alert-wrapper alert-box.type-info .btn-primary-info:hover {
  background: #004bb5 !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-info .btn-primary-info:hover {
    background: #0052cc !important;
  }
}
alert-wrapper alert-box.type-info .btn-primary-info:focus {
  outline: 2px solid #005ad6 !important;
  outline-offset: 2px !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-info .btn-primary-info:focus {
    outline: 2px solid #5b9fff !important;
  }
}
alert-wrapper alert-box.type-success .alert-icon {
  background: #dff7df !important;
  color: #009c2c !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-success .alert-icon {
    background: #1a3d1f !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-success .alert-icon {
    color: #4ade80 !important;
  }
}
alert-wrapper alert-box.type-success .btn-primary-success {
  background: #009c2c !important;
  color: #fff !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-success .btn-primary-success {
    background: #16a34a !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-success .btn-primary-success {
    color: #fff !important;
  }
}
alert-wrapper alert-box.type-success .btn-primary-success:hover {
  background: #008024 !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-success .btn-primary-success:hover {
    background: #15803d !important;
  }
}
alert-wrapper alert-box.type-success .btn-primary-success:focus {
  outline: 2px solid #009c2c !important;
  outline-offset: 2px !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-success .btn-primary-success:focus {
    outline: 2px solid #4ade80 !important;
  }
}
alert-wrapper alert-box.type-warning .alert-icon {
  background: #fff4d6 !important;
  color: #c28a00 !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-warning .alert-icon {
    background: #3d3310 !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-warning .alert-icon {
    color: #fbbf24 !important;
  }
}
alert-wrapper alert-box.type-warning .btn-primary-warning {
  background: #ffc200 !important;
  color: #000 !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-warning .btn-primary-warning {
    background: #f59e0b !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-warning .btn-primary-warning {
    color: #000 !important;
  }
}
alert-wrapper alert-box.type-warning .btn-primary-warning:hover {
  background: #e6af00 !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-warning .btn-primary-warning:hover {
    background: #d97706 !important;
  }
}
alert-wrapper alert-box.type-warning .btn-primary-warning:focus {
  outline: 2px solid #c28a00 !important;
  outline-offset: 2px !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-warning .btn-primary-warning:focus {
    outline: 2px solid #fbbf24 !important;
  }
}
alert-wrapper alert-box.type-danger .alert-icon {
  background: #ffe4e4 !important;
  color: #d10000 !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-danger .alert-icon {
    background: #3d1a1a !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-danger .alert-icon {
    color: #f87171 !important;
  }
}
alert-wrapper alert-box.type-danger .btn-primary-danger {
  background: #d10000 !important;
  color: #fff !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-danger .btn-primary-danger {
    background: #dc2626 !important;
  }
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-danger .btn-primary-danger {
    color: #fff !important;
  }
}
alert-wrapper alert-box.type-danger .btn-primary-danger:hover {
  background: #b00000 !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-danger .btn-primary-danger:hover {
    background: #b91c1c !important;
  }
}
alert-wrapper alert-box.type-danger .btn-primary-danger:focus {
  outline: 2px solid #d10000 !important;
  outline-offset: 2px !important;
}
@media (prefers-color-scheme: dark) {
  alert-wrapper alert-box.type-danger .btn-primary-danger:focus {
    outline: 2px solid #f87171 !important;
  }
}

/* ================================
   ANIMAÇÃO
   ================================ */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}/*# sourceMappingURL=ui.alert.css.map */