:root {
  /* Cores Principais */
  --cor-primaria: #284093;
  --cor-secundaria: #f7a02a;
  --cor-fundo-pagina: #fefefe;
  --cor-texto-principal: #222222;
  --cor-texto-menu: #fff;

  /* Cores de Links */
  --cor-link: #1a0dab;
  --cor-link-hover: #0652DD;

  /* Cores de Botões */
  --btn-primario-fundo: #284093;
  --btn-primario-texto: #ffffff;
  --btn-primario-hover-fundo: #1e2e64;

  --btn-secundario-fundo: var(--cor-secundaria);
  --btn-secundario-texto: #ffffff;
  /* --btn-secundario-hover-fundo: ; */

  /* Cores de Feedback */
  --feedback-sucesso-fundo: #d4edda;
  --feedback-sucesso-texto: #155724;
  --feedback-sucesso-borda: #c3e6cb;

  --feedback-erro-fundo: #f8d7da;
  --feedback-erro-texto: #721c24;
  --feedback-erro-borda: #f5c6cb;

  --feedback-aviso-fundo: #fff3cd;
  --feedback-aviso-texto: #856404;
  --feedback-aviso-borda: #ffeeba;

  /* Cores do Menu */
  --menu-fundo: var(--cor-padrao);
  --menu-texto-icone: #ffffff;
  --menu-texto-icone-ativo: var(--cor-secundaria);
  --menu-fundo-hover: rgba(255,255,255,0.1);
  --menu-fundo-ativo: rgba(255,255,255,0.2);

  /* Tipografia */
  --familia-fonte-titulos: 'Titulos', sans-serif;
  --familia-fonte-textos: 'Textos', sans-serif;
  /* --familia-fonte-mono: ; */
  --tamanho-fonte-base: 16px;
  --altura-linha-base: 1.6;
  --paragrafo-margin-bottom: 1rem;

  /* Layout */
  --border-radius-padrao: 6px;
  --box-shadow-padrao: 0 2px 10px rgba(0,0,0,0.1);
  --box-shadow-leve: 0 1px 4px rgba(0, 0, 0, 0.04); /* Exemplo de sombra mais leve */
  --largura-maxima-container: 1200px;

  /* Dimensões UI (Menu, Header) */
  --menu-expanded-width: 250px;
  --menu-collapsed-width: 60px;
  --topbar-height: 60px;
  --menu-state-width: var(--menu-expanded-width); /* Para ser atualizado por JS */


  /* Cores de UI adicionais */
  --cor-fundo-pagina-alternativo: #f8f9fa; /* Usado na seção de filtros */
  --cor-borda-suave: #e9ecef;
  --cor-borda-input: #ced4da;
  --cor-borda-hover: #adb5bd;
  --cor-fundo-elemento: #ffffff; /* Fundo para tags, inputs */
  --cor-fundo-hover: #e9ecef;   /* Hover para tags */
  --cor-texto-secundario: #495057; /* Texto para filtros, detalhes */
  --cor-texto-terciario: #6c757d;  /* Texto para tags dentro do card */
  --cor-fundo-card: #ffffff;
  --cor-borda-card: #e9ecef;
  --cor-borda-muito-suave: #f1f3f5; /* Para divisórias */

  /* RGB da cor primária para box-shadow com opacidade */
  --cor-primaria-rgb: 40, 64, 147;


  /* Variáveis legadas (para manter compatibilidade se usadas em outros lugares) */
  /* Removidas para evitar confusão, use as novas variáveis semânticas.
     Se precisar delas para compatibilidade urgente, adicione de volta:
  --cor-azul: var(--cor-primaria);
  --cor-laranja: var(--cor-secundaria);
  --cor-fundos: var(--cor-fundo-pagina);
  --cor-fontes: var(--cor-texto-principal);
  --primary-color: var(--cor-primaria);
  --secondary-color: var(--cor-secundaria);
  */
  
  --btn-success-fundo: var(--feedback-sucesso-fundo);
  --btn-success-texto: var(--feedback-sucesso-texto);
  --btn-success-borda: var(--feedback-sucesso-borda);
  --btn-success-hover-fundo: color-mix(in srgb, var(--feedback-sucesso-texto) 85%, black); /* Exemplo de hover */
  --btn-success-hover-texto: var(--btn-primario-texto); /* Branco geralmente */

  --btn-danger-fundo: var(--feedback-erro-fundo);
  --btn-danger-texto: var(--feedback-erro-texto);
  --btn-danger-borda: var(--feedback-erro-borda);
  --btn-danger-hover-fundo: color-mix(in srgb, var(--feedback-erro-texto) 85%, black);
  --btn-danger-hover-texto: var(--btn-primario-texto);

  --btn-warning-fundo: var(--feedback-aviso-fundo);
  --btn-warning-texto: var(--feedback-aviso-texto);
  --btn-warning-borda: var(--feedback-aviso-borda); /* Pode precisar de ajuste para ser mais forte */
  --btn-warning-hover-fundo: color-mix(in srgb, var(--feedback-aviso-texto) 85%, black);
  --btn-warning-hover-texto: var(--cor-fundo-pagina); /* Texto escuro em fundo de aviso */

  --btn-info-fundo: color-mix(in srgb, var(--cor-primaria) 15%, transparent); /* Fundo claro do primário */
  --btn-info-texto: var(--cor-primaria);
  --btn-info-borda: color-mix(in srgb, var(--cor-primaria) 30%, transparent);
  --btn-info-hover-fundo: var(--cor-primaria);
  --btn-info-hover-texto: var(--btn-primario-texto);
}

/* Importa as fontes */
@font-face {
  font-family: 'Titulos';
  src: url('/assets/fontes/Viga.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Textos';
  src: url('/assets/fontes/Nunito.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*
@font-face {
  font-family: 'Mono';
  src: url('') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/

/* Estilos Globais (Reset e Base) */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--tamanho-fonte-base);
  line-height: var(--altura-linha-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--familia-fonte-textos);
  background-color: var(--cor-fundo-pagina);
  color: var(--cor-texto-principal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--familia-fonte-titulos);
  color: var(--cor-primaria); /* Cor primária por padrão, pode ser sobrescrita por classes específicas */
  margin-bottom: 0.75rem;
  line-height: 1.3;
  font-weight: 600; /* Um peso padrão para títulos */
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; } /* Usado para títulos de página */
h3 { font-size: 1.5rem; } /* Usado para títulos de card e seções */
h4 { font-size: 1.2rem; }

p {
  margin-bottom: var(--paragrafo-margin-bottom);
}

a {
  color: var(--cor-link);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
a:hover, a:focus {
  color: var(--cor-primaria);
  text-decoration: none;
}

img, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Estilos para Elementos Comuns de UI */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em; /* Espaço entre ícone e texto, relativo ao font-size do botão */
  padding: 0.65rem 1.2rem;
  font-family: var(--familia-fonte-textos);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5; /* Boa prática para botões */
  border-radius: var(--border-radius-padrao);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important; /* Evita sublinhado se for um <a> com classe .btn */
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.btn:hover {
  transform: translateY(-1px); /* Leve elevação no hover */
  text-decoration: none !important;
}
.btn:active {
  transform: translateY(0px); /* Remove elevação no clique */
}
.btn:focus, .btn:focus-visible { /* Estilo de foco moderno */
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--cor-primaria-rgb), 0.35);
}

.btn-primary {
  background-color: var(--btn-primario-fundo);
  border-color: var(--btn-primario-fundo);
  color: var(--btn-primario-texto);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--btn-primario-hover-fundo);
  border-color: var(--btn-primario-hover-fundo);
  color: var(--btn-primario-texto);
}

.btn-secondary {
  background-color: var(--btn-secundario-fundo);
  color: var(--btn-secundario-texto);
  border-color: var(--btn-secundario-fundo);
}
.btn-secondary:hover, .btn-secondary:focus {
  /* Defina --btn-secundario-hover-fundo no branding.json se desejar comportamento de hover */
  background-color: var(--btn-secundario-hover-fundo, color-mix(in srgb, var(--btn-secundario-fundo) 85%, black)); /* Escurece um pouco como fallback */
  border-color: var(--btn-secundario-hover-fundo, color-mix(in srgb, var(--btn-secundario-fundo) 85%, black));
  color: var(--btn-secundario-texto);
}

/* Botões específicos para ações em cards da página de fornecedores */
.btn-email, .btn-whatsapp { /* Geralmente são primários */
    background-color: var(--btn-primario-fundo);
    color: var(--btn-primario-texto);
    border-color: var(--btn-primario-fundo);
}
.btn-email:hover, .btn-whatsapp:hover,
.btn-email:focus, .btn-whatsapp:focus {
    background-color: var(--btn-primario-hover-fundo);
    border-color: var(--btn-primario-hover-fundo);
    color: var(--btn-primario-texto);
}

.btn-extra { /* Botão "Site", "Ver Catálogo" */
    background-color: var(--cor-fundo-elemento);
    color: var(--cor-texto-secundario);
    border: 1px solid var(--cor-borda-input);
}
.btn-extra:hover, .btn-extra:focus {
    background-color: var(--cor-fundo-hover);
    border-color: var(--cor-borda-hover);
    color: var(--cor-texto-principal);
}

.btn-disabled, .btn[disabled] {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}


.form-group {
  margin-bottom: 1.2rem;
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--cor-texto-principal);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
  display: block; /* Garante que ocupe a largura total e não cause problemas de alinhamento */
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--familia-fonte-textos);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--altura-linha-base);
  color: var(--cor-texto-principal);
  background-color: var(--cor-fundo-elemento, #fff);
  background-clip: padding-box;
  border: 1px solid var(--cor-borda-input, #ced4da);
  appearance: none; /* Remove aparência nativa onde possível */
  border-radius: var(--border-radius-padrao);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input[type="text"]::placeholder, input[type="email"]::placeholder,
input[type="password"]::placeholder, input[type="search"]::placeholder,
input[type="tel"]::placeholder, input[type="url"]::placeholder,
input[type="number"]::placeholder, textarea::placeholder {
  color: var(--cor-texto-terciario, #6c757d);
  opacity: 1;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
input[type="tel"]:focus, input[type="url"]:focus,
input[type="number"]:focus, input[type="date"]:focus,
textarea:focus, select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.2rem rgba(var(--cor-primaria-rgb), 0.25);
  outline: 0;
}
input[type="file"] {
    padding: 0.4rem 0.5rem; /* Padding menor para inputs de arquivo */
}
input[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}

textarea {
  min-height: 100px;
  resize: vertical;
}
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px; /* Ajuste o tamanho da seta se necessário */
  padding-right: 2.5rem;
}
select[multiple] { /* Estilo para selects múltiplos */
    background-image: none; /* Remove a seta */
    min-height: 120px; /* Altura para melhor usabilidade */
    padding-right: 1rem; /* Restaura padding direito */
}


/* --- Component: Alerts (Extended) --- */
/* --- Component: Alerts (Corrected and Extended) --- */

.alert {
  position: relative; /* Para o botão de fechar */
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent; /* A cor da borda será definida por tipo */
  border-radius: var(--border-radius-padrao);
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, margin-bottom 0.3s ease-out; /* Para o dismiss */
}

/* Cores de fundo, texto e borda para cada tipo de alerta */
.alert-success {
  color: var(--feedback-sucesso-texto);
  background-color: var(--feedback-sucesso-fundo);
  border-color: var(--feedback-sucesso-borda);
}
.alert-danger, .alert-error { /* .alert-error como alias */
  color: var(--feedback-erro-texto);
  background-color: var(--feedback-erro-fundo);
  border-color: var(--feedback-erro-borda);
}
.alert-warning, .alert-aviso { /* .alert-aviso como alias */
  color: var(--feedback-aviso-texto);
  background-color: var(--feedback-aviso-fundo);
  border-color: var(--feedback-aviso-borda, color-mix(in srgb, var(--feedback-aviso-texto) 25%, transparent)); /* Mantém o fallback para a borda do warning */
}

/* Adicionando estilos para .alert-info e .alert-primary/.alert-secondary se você quiser usá-los */
/* Para .alert-info, podemos usar a cor primária ou definir novas cores no branding.json */
.alert-info {
  color: var(--cor-primaria); /* Ou defina --feedback-info-texto */
  background-color: color-mix(in srgb, var(--cor-primaria) 15%, transparent); /* Um fundo bem claro da cor primária */
  border-color: color-mix(in srgb, var(--cor-primaria) 30%, transparent); /* Uma borda clara da cor primária */
}
/* Exemplo se você definir no branding.json:
   "feedback": {
     ...
     "infoFundo": "#e0e7ff",
     "infoTexto": "#3f51b5",
     "infoBorda": "#c5cae9"
   }
   Então usaria:
   color: var(--feedback-info-texto);
   background-color: var(--feedback-info-fundo);
   border-color: var(--feedback-info-borda);
*/

/* Para .alert-primary e .alert-secondary (se usados como alertas contextuais) */
.alert-primary {
  color: var(--cor-primaria); /* Texto com a cor primária */
  background-color: color-mix(in srgb, var(--cor-primaria) 10%, var(--cor-fundo-pagina)); /* Fundo muito claro da cor primária */
  border-color: color-mix(in srgb, var(--cor-primaria) 25%, var(--cor-fundo-pagina)); /* Borda sutil */
}
.alert-secondary {
  color: var(--cor-secundaria); /* Texto com a cor secundária */
  background-color: color-mix(in srgb, var(--cor-secundaria) 10%, var(--cor-fundo-pagina));
  border-color: color-mix(in srgb, var(--cor-secundaria) 25%, var(--cor-fundo-pagina));
}


.alert-icon {
  font-size: 1.2em;
  flex-shrink: 0;
  margin-top: 0.1em;
  /* O ícone herdará a cor do texto do alerta (.alert-success, .alert-danger, etc.) */
}

.alert-content {
  flex-grow: 1;
}

.alert h4, .alert .alert-heading {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1em;
  font-weight: 600;
  /* O heading também herdará a cor do texto do alerta, o que geralmente é desejado */
  /* Se quiser uma cor diferente para o heading, pode-se definir aqui: */
  /* Ex: .alert-success .alert-heading { color: color-mix(in srgb, var(--feedback-sucesso-texto) 80%, black); } */
}

/* Botão de Fechar para Alertas (Dispensáveis) */
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem 1.25rem;
  color: inherit; /* Herda a cor do texto do alerta (importante!) */
  border: 0;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  opacity: 0.6;
  text-shadow: none;
}
.alert-dismissible .btn-close:hover,
.alert-dismissible .btn-close:focus {
  opacity: 1;
  text-decoration: none;
  outline: none;
}

.main-page-container {
  max-width: var(--largura-maxima-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* Estilo para o conteúdo principal quando o menu está presente */
#main-content {
  padding-top: calc(var(--topbar-height) + 20px); /* 20px de espaçamento abaixo do topbar */
  padding-bottom: 20px;
  padding-left: 20px; /* Espaçamento interno */
  padding-right: 20px;
  margin-left: var(--menu-state-width, var(--menu-expanded-width)); /* Controlado por JS */
  transition: margin-left 0.3s ease-in-out;
  min-height: calc(100vh - var(--topbar-height)); /* Ocupa pelo menos a altura da tela menos o topbar */
}
#main-content.no-menu { /* Classe para páginas sem o menu lateral */
    margin-left: 0;
}


/* Estilos específicos para tags de filtro (se não estiverem no CSS da página) */
.tag-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem; /* Espaçamento abaixo dos filtros */
}
.tag-filter input[type="checkbox"] {
    display: none;
}
.tag-filter label {
    display: inline-block;
    background-color: var(--cor-fundo-elemento);
    color: var(--cor-texto-secundario);
    padding: 0.4em 0.9em;
    border-radius: 15px; /* ou var(--border-radius-tag) */
    border: 1px solid var(--cor-borda-input);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.85rem;
    font-weight: 500;
    user-select: none; /* Evita seleção de texto ao clicar */
}
.tag-filter label:hover {
    background-color: var(--cor-fundo-hover);
    border-color: var(--cor-borda-hover);
}
.tag-filter input[type="checkbox"]:checked + label {
    background-color: var(--cor-primaria);
    color: var(--btn-primario-texto); /* Assumindo que a cor do texto é contrastante */
    border-color: var(--cor-primaria);
    font-weight: 600;
}


@media (max-width: 768px) {
  html {
    /* font-size: calc(var(--tamanho-fonte-base) * 0.9); */ /* Redução opcional */
  }
  #main-content {
      padding-left: 15px;
      padding-right: 15px;
      padding-top: calc(var(--topbar-height) + 15px);
  }
  .main-page-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .btn {
      padding: 0.6rem 1rem; /* Botões um pouco menores */
      font-size: 0.9rem;
  }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }
}

@media (max-width: 576px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  /* Outros ajustes para telas muito pequenas */
  .form-group input[type="text"], .form-group input[type="email"],
  .form-group input[type="password"], .form-group textarea, .form-group select {
      font-size: 0.95rem; /* Inputs um pouco menores */
      padding: 0.65rem 0.8rem;
  }
}

/* ==========================================================================
   Componente Universal de Upload de Arquivo (Drag and Drop)
   ========================================================================== */

.file-upload-area-wrapper {
    /* Use este wrapper se precisar controlar margens ou posicionamento
       em volta da área de upload e do nome do arquivo/preview. */
    margin-bottom: 1rem; /* Espaçamento abaixo do componente inteiro */
}

.file-upload-area {
    border: 2px dashed var(--cor-borda-input, #ced4da); /* Usa variável de borda de input */
    border-radius: var(--border-radius-padrao, 6px);   /* Usa variável de radius padrão */
    padding: 25px;                                     /* Espaçamento interno generoso */
    text-align: center;
    cursor: pointer;
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa); /* Fundo leve */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-bottom: 10px; /* Espaço entre a área de drop e o nome/preview do arquivo */
}

.file-upload-area:hover {
    background-color: var(--cor-fundo-hover, #e9ecef); /* Cor de hover sutil */
    border-color: var(--cor-primaria);                 /* Destaque com cor primária na borda */
}

/* Classe adicionada via JavaScript quando um arquivo está sendo arrastado sobre a área */
.file-upload-area.dragging {
    border-color: var(--cor-primaria);
    /* Mistura a cor primária com o fundo da página para um efeito de destaque suave */
    background-color: color-mix(in srgb, var(--cor-primaria) 15%, var(--cor-fundo-pagina-alternativo));
}

.file-upload-area p { /* Texto principal dentro da área de upload */
    margin-bottom: 0.5rem;
    color: var(--cor-texto-secundario, #495057); /* Cor de texto mais suave */
    font-size: 0.95rem;
    pointer-events: none; /* Para garantir que o clique na div seja registrado */
}

.file-upload-area p i.fas { /* Para o ícone FontAwesome (se você usar) */
    margin-right: 8px;
    font-size: 1.2em; /* Ícone um pouco maior */
    color: var(--cor-primaria); /* Ícone com a cor primária */
}

.file-upload-area .file-upload-instructions { /* Texto menor/auxiliar dentro da área */
    font-size: 0.85em;
    color: var(--cor-texto-terciario, #6c757d);
    pointer-events: none;
}

/* O input de arquivo real é escondido, a div .file-upload-area é usada para interação */
.file-upload-area input[type="file"] {
    display: none;
}

/* Estilo para exibir o nome do arquivo selecionado (ou o preview do arquivo atual) */
.file-preview-name-container {
    margin-top: 10px;
    font-size: 0.9em;
    padding: 8px 12px;
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa);
    border: 1px solid var(--cor-borda-suave, #e9ecef);
    border-radius: var(--border-radius-padrao);
    min-height: 40px; /* Para ter uma altura mesmo que vazio */
    display: flex;
    align-items: center;
}

.file-preview-name-container .file-name-display { /* Mostra o nome do arquivo selecionado */
    font-style: italic;
    color: var(--cor-texto-principal);
}

/* Estilo para o preview do arquivo/logo existente ao editar */
.file-preview-name-container .current-file-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%; /* Ocupa o espaço do container */
}

.file-preview-name-container .current-file-preview img { /* Para previews de imagem */
    max-width: 100px; /* Ajuste conforme necessidade */
    max-height: 40px; /* Ajuste conforme necessidade */
    border: 1px solid var(--cor-borda-suave);
    border-radius: calc(var(--border-radius-padrao) - 2px); /* Um pouco menor que o container */
    object-fit: contain;
}

.file-preview-name-container .current-file-preview .file-info {
    display: flex;
    flex-direction: column; /* Nome do arquivo e "manter" em linhas separadas */
    flex-grow: 1; /* Ocupa o espaço restante */
}

.file-preview-name-container .current-file-preview .file-info a {
    color: var(--cor-link);
    font-weight: 500;
    text-decoration: none;
}
.file-preview-name-container .current-file-preview .file-info a:hover {
    color: var(--cor-link-hover);
    text-decoration: underline;
}

.file-preview-name-container .current-file-preview .file-info .keep-file-notice {
    display: block;
    font-size: 0.9em; /* Menor que o nome do arquivo */
    color: var(--cor-texto-terciario);
    margin-top: 2px;
}

/* No final do style.php, antes das media queries ou em uma seção de componentes */

/* --- Component: Buttons (Extended) --- */

/* Botões de Contorno */
.btn-outline-primary {
  color: var(--cor-primaria);
  background-color: transparent;
  border-color: var(--cor-primaria);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  color: var(--btn-primario-texto); /* Geralmente branco */
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.btn-outline-secondary {
  color: var(--cor-secundaria);
  background-color: transparent;
  border-color: var(--cor-secundaria);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  color: var(--btn-secundario-texto); /* Geralmente branco */
  background-color: var(--cor-secundaria);
  border-color: var(--cor-secundaria);
}

/* Adicione .btn-outline-success, .btn-outline-danger, etc., usando suas cores de feedback */

.btn-outline-danger {
  color: var(--feedback-erro-texto);
  background-color: transparent;
  border-color: var(--feedback-erro-texto); 
}
.btn-outline-success {
  color: var(--feedback-sucesso-texto);
  background-color: transparent;
  border-color: var(--feedback-sucesso-borda); 
}
.btn-outline-success:hover, .btn-outline-success:focus {
  color: var(--btn-primario-texto); /* Ou uma cor que contraste bem com o fundo de sucesso */
  background-color: var(--feedback-sucesso-texto); /* Ou var(--feedback-sucesso-fundo) escurecido */
  border-color: var(--feedback-sucesso-texto);
}
/* ...e assim por diante para danger, warning, info ... */


/* Tamanhos de Botão */
.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  border-radius: calc(var(--border-radius-padrao) * 0.8); /* Raio proporcional */
}
.btn-lg {
  padding: 0.9rem 1.8rem;
  font-size: 1.1rem;
  border-radius: calc(var(--border-radius-padrao) * 1.2);
}

/* Botão de Bloco */
.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block { /* Espaçamento se houver múltiplos botões de bloco */
  margin-top: 0.5rem;
}

/* Botão de Link */
.btn-link {
  font-weight: normal;
  color: var(--cor-link);
  text-decoration: none; /* Ou underline, se preferir */
  background-color: transparent;
  border: none;
  padding-left: 0.2em; /* Ajuste fino */
  padding-right: 0.2em;
}
.btn-link:hover, .btn-link:focus {
  color: var(--cor-link-hover);
  text-decoration: underline;
  background-color: transparent; /* Garante que não haja fundo no hover */
  border: none;
  box-shadow: none; /* Remove sombra de foco se não desejado para links */
}
.btn-link:focus {
  /* Pode adicionar um outline sutil se o box-shadow for removido */
  outline: 1px dotted var(--cor-link-hover);
}

.btn i { /* Estilo genérico para ícones em botões */
    font-size: 1em; /* Herda do botão por padrão, pode ajustar */
    line-height: inherit; */
    margin-right: 0.5em; /* Já tem gap no .btn */
}

/* --- Component: Cards --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Para evitar que o conteúdo quebre o layout do card */
  word-wrap: break-word; /* Quebrar palavras longas */
  background-color: var(--cor-fundo-card, #fff);
  background-clip: border-box;
  border: 1px solid var(--cor-borda-card, rgba(0,0,0,.125));
  border-radius: var(--border-radius-padrao);
  box-shadow: var(--box-shadow-leve, 0 1px 3px rgba(0,0,0,0.05));
  margin-bottom: 1rem; /* Espaçamento padrão abaixo do card */
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0; /* Resetar margem se houver */
  background-color: var(--cor-fundo-pagina-alternativo, rgba(0,0,0,.03)); /* Fundo leve para o cabeçalho */
  border-bottom: 1px solid var(--cor-borda-card, rgba(0,0,0,.125));
}
.card-header:first-child { /* Arredondar cantos superiores se for o primeiro elemento */
  border-radius: calc(var(--border-radius-padrao) - 1px) calc(var(--border-radius-padrao) - 1px) 0 0;
}
.card-header + .card-body { /* Espaçamento se o header for seguido por um body */
    /* O padding do card-body já deve cuidar disso */
}
.card-title { /* Título dentro de .card-body ou .card-header */
  margin-bottom: 0.75rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cor-texto-principal); /* Ou var(--cor-primaria) */
}
.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
}

.card-body {
  flex: 1 1 auto; /* Permite que o card-body cresça e encolha conforme necessário */
  padding: 1.25rem;
}
.card-body p:last-child {
  margin-bottom: 0; /* Remover margem do último parágrafo no corpo do card */
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: var(--cor-fundo-pagina-alternativo, rgba(0,0,0,.03));
  border-top: 1px solid var(--cor-borda-card, rgba(0,0,0,.125));
}
.card-footer:last-child { /* Arredondar cantos inferiores se for o último elemento */
  border-radius: 0 0 calc(var(--border-radius-padrao) - 1px) calc(var(--border-radius-padrao) - 1px);
}
.card-footer .btn {
    margin-right: 0.5rem; /* Espaçamento entre botões no footer */
}
.card-footer .btn:last-child {
    margin-right: 0;
}

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(var(--border-radius-padrao) - 1px);
  border-top-right-radius: calc(var(--border-radius-padrao) - 1px);
}
.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(var(--border-radius-padrao) - 1px);
  border-bottom-left-radius: calc(var(--border-radius-padrao) - 1px);
}

/* Card com hover (opcional) */
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-padrao, 0 5px 15px rgba(0,0,0,0.1));
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2060; /* Abaixo do modal, mas acima de tudo */
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  display: none; /* Controlado por JS */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.modal-backdrop.show {
  display: block;
  opacity: 1;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2080; /* Acima do backdrop */
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto; /* Para scroll do modal se o conteúdo for grande */
  outline: 0; /* Remove outline padrão */
  display: none; /* Controlado por JS */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.modal.show {
  display: flex !important; 
  align-items: center; /* Centralizar verticalmente (pode precisar de ajuste) */
  justify-content: center; /* Centralizar horizontalmente */
  opacity: 1;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem; /* Margem padrão */
  pointer-events: none; /* Permite cliques "através" do modal se clicar fora do dialog */
  max-width: 500px; /* Largura padrão do modal */
  transform: translateY(-50px); /* Efeito de entrada */
  transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
  pointer-events: auto; /* Habilita eventos no dialog */
  transform: translateY(0);
}

/* Tamanhos de Modal (opcional) */
.modal-dialog.modal-sm { max-width: 300px; }
.modal-dialog.modal-lg { max-width: 800px; }
.modal-dialog.modal-xl { max-width: 1140px; }

/* Para modais com scroll interno no corpo */
.modal-dialog-scrollable {
  display: flex; /* Alterar para flex para o scroll funcionar bem */
  max-height: calc(100% - 1rem); /* Altura máxima, com pequena margem */
}
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem); /* Altura máxima do conteúdo */
  overflow: hidden; /* Previne scroll duplo */
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto; /* Scroll apenas no corpo */
}


.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%; /* Ocupar a largura do modal-dialog */
  pointer-events: auto; /* Habilita eventos no conteúdo */
  background-color: var(--cor-fundo-card, #fff);
  background-clip: padding-box;
  border: 1px solid var(--cor-borda-card, rgba(0,0,0,.2));
  border-radius: var(--border-radius-padrao);
  outline: 0;
  box-shadow: var(--box-shadow-padrao, 0 0.5rem 1rem rgba(0,0,0,.15));
}

.modal-header {
  display: flex;
  align-items: flex-start; /* Alinha o título e o botão de fechar */
  justify-content: space-between; /* Espaça o título do botão de fechar */
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--cor-borda-suave, #dee2e6);
  border-top-left-radius: calc(var(--border-radius-padrao) - 1px);
  border-top-right-radius: calc(var(--border-radius-padrao) - 1px);
}
.modal-title {
  margin-bottom: 0;
  line-height: var(--altura-linha-base);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cor-texto-principal);
}
.modal-header .btn-close { /* Estilo para o botão de fechar do modal, similar ao do alerta */
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto; /* Alinha à direita */
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  border:0;
}
.modal-header .btn-close:hover, .modal-header .btn-close:focus {
  opacity: .75;
  text-decoration: none;
  outline: none;
}


.modal-body {
  position: relative;
  flex: 1 1 auto; /* Permite que o corpo cresça */
  padding: 1rem;
  /* overflow-y: auto;  Adicionar se o modal não for -scrollable mas pode ter conteúdo longo */
}

.modal-footer {
  display: flex;
  flex-wrap: wrap; /* Para botões quebrarem linha se necessário */
  align-items: center; /* Alinhar botões verticalmente */
  justify-content: flex-end; /* Alinhar botões à direita por padrão */
  padding: 0.75rem;
  border-top: 1px solid var(--cor-borda-suave, #dee2e6);
  border-bottom-right-radius: calc(var(--border-radius-padrao) - 1px);
  border-bottom-left-radius: calc(var(--border-radius-padrao) - 1px);
}
.modal-footer > :not(:first-child) { margin-left: 0.25rem; }
.modal-footer > :not(:last-child) { margin-right: 0.25rem; }
/* Para alinhar botões do footer à esquerda:
.modal-footer { justify-content: flex-start; }
   Para centralizar:
.modal-footer { justify-content: center; }

.callout {
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--cor-borda-suave, #eee);
  border-left-width: .25rem; /* Borda esquerda mais grossa para destaque */
  border-radius: var(--border-radius-padrao);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.callout-icon { /* Opcional */
  font-size: 1.5em;
  margin-top: 0.1em;
  flex-shrink: 0;
}

.callout-content {
  flex-grow: 1;
}

.callout h4, .callout .callout-title {
  margin-top: 0;
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
}

/* --- Component: Callouts (com fundo leve) --- */
.callout {
  padding: 1.25rem;
  margin-bottom: 1rem;
  /* border: 1px solid transparent; Removido para dar prioridade à borda esquerda ou borda da cor do tipo */
  border-left-width: .30rem; /* Borda esquerda um pouco mais grossa */
  border-radius: var(--border-radius-padrao);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.callout-icon {
  font-size: 1.5em;
  margin-top: 0.1em;
  flex-shrink: 0;
}

.callout-content {
  flex-grow: 1;
}

.callout h4, .callout .callout-title {
  margin-top: 0;
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
}

/* Variações de cor para callouts */
.callout-info {
  border-left-color: var(--cor-primaria);
  background-color: color-mix(in srgb, var(--cor-primaria) 8%, transparent); /* Fundo bem leve */
  color: var(--cor-primaria); /* Define a cor do texto padrão para o callout */
}
.callout-info .callout-title { color: var(--cor-primaria); } /* Pode ser mais escuro: color-mix(in srgb, var(--cor-primaria) 80%, black) */

.callout-warning {
  border-left-color: var(--feedback-aviso-texto); /* Usar a cor do texto do aviso que é mais escura */
  background-color: var(--feedback-aviso-fundo); /* Usar o fundo do aviso que já é claro */
  color: var(--feedback-aviso-texto);
}
.callout-warning .callout-title { color: var(--feedback-aviso-texto); }

.callout-danger {
  border-left-color: var(--feedback-erro-texto);
  background-color: var(--feedback-erro-fundo);
  color: var(--feedback-erro-texto);
}
.callout-danger .callout-title { color: var(--feedback-erro-texto); }

/* Estilos Gerais para Blocos de Conteúdo */
.container-blocos-conteudo {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espaçamento entre blocos */
}

.bloco-conteudo {
    padding: 1rem 0; /* Espaçamento vertical interno para alguns blocos */
    /* border-bottom: 1px solid var(--cor-borda-muito-suave, #f1f3f5); /* Opcional: linha divisória suave */
    /* margin-bottom: 1.5rem; */ /* Removido em favor do gap no container */
}
.bloco-conteudo:last-child {
    /* border-bottom: none; */
    /* margin-bottom: 0; */
}

.bloco-erro, .bloco-nao-implementado, .bloco-info, .erro-parsedown {
    padding: 1rem;
    background-color: var(--feedback-aviso-fundo, #fff3cd);
    color: var(--feedback-aviso-texto, #856404);
    border: 1px solid var(--feedback-aviso-borda, #ffeeba);
    border-radius: var(--border-radius-padrao, 6px);
}
.erro-parsedown {
    background-color: var(--feedback-erro-fundo, #f8d7da);
    color: var(--feedback-erro-texto, #721c24);
    border-color: var(--feedback-erro-borda, #f5c6cb);
}
.bloco-info {
    background-color: var(--cor-fundo-pagina-alternativo, #e9ecef);
    color: var(--cor-texto-secundario, #495057);
    border-color: var(--cor-borda-suave, #ced4da);
}


/* Bloco: RichText/Markdown */
.bloco-richtext .bloco-richtext-content h1,
.bloco-richtext .bloco-richtext-content h2,
.bloco-richtext .bloco-richtext-content h3,
.bloco-richtext .bloco-richtext-content h4,
.bloco-richtext .bloco-richtext-content h5,
.bloco-richtext .bloco-richtext-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}
.bloco-richtext .bloco-richtext-content h1 { font-size: 2rem; color: var(--cor-primaria); }
.bloco-richtext .bloco-richtext-content h2 { font-size: 1.75rem; color: var(--cor-primaria); }
.bloco-richtext .bloco-richtext-content h3 { font-size: 1.5rem; }
.bloco-richtext .bloco-richtext-content h4 { font-size: 1.25rem; }
.bloco-richtext .bloco-richtext-content p {
    margin-bottom: 1em;
    line-height: var(--altura-linha-base, 1.6);
}
.bloco-richtext .bloco-richtext-content ul,
.bloco-richtext .bloco-richtext-content ol {
    margin-bottom: 1em;
    padding-left: 1.8em;
}
.bloco-richtext .bloco-richtext-content li {
    margin-bottom: 0.4em;
}
.bloco-richtext .bloco-richtext-content blockquote {
    border-left: 4px solid var(--cor-borda-input, #ced4da);
    padding-left: 1em;
    margin: 1.5em 0;
    color: var(--cor-texto-secundario, #495057);
    font-style: italic;
}
.bloco-richtext .bloco-richtext-content code { /* Código inline */
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa);
    padding: 0.2em 0.4em;
    border-radius: var(--border-radius-padrao, 3px);
    font-family: var(--familia-fonte-mono, monospace); /* Adicione --familia-fonte-mono ao seu :root */
    font-size: 0.9em;
}
.bloco-richtext .bloco-richtext-content pre code { /* Bloco de código (diferente do bloco-codigo) */
    display: block;
    padding: 1em;
    overflow-x: auto;
}
.bloco-richtext .bloco-richtext-content img { /* Imagens dentro do markdown */
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-padrao, 6px);
    margin: 1em 0;
}
.bloco-richtext .bloco-richtext-content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    border: 1px solid var(--cor-borda-input, #ced4da);
}
.bloco-richtext .bloco-richtext-content th,
.bloco-richtext .bloco-richtext-content td {
    padding: 0.75rem;
    border: 1px solid var(--cor-borda-input, #ced4da);
    text-align: left;
}
.bloco-richtext .bloco-richtext-content thead th {
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa);
    font-weight: 600;
}
.bloco-richtext .bloco-richtext-content tbody tr:nth-child(odd) {
    background-color: var(--cor-fundo-elemento, #fff);
}
.bloco-richtext .bloco-richtext-content tbody tr:nth-child(even) {
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa);
}


/* Bloco: Imagem */
.bloco-imagem .bloco-imagem-figure {
    margin: 0; /* Reset da margem padrão da figure */
    text-align: center; /* Centraliza a imagem se ela for menor que o container */
}
.bloco-imagem .bloco-imagem-figure img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-padrao, 6px);
    box-shadow: var(--box-shadow-leve, 0 1px 4px rgba(0,0,0,0.04));
    margin-bottom: 0.5rem; /* Espaço para a legenda */
}
.bloco-imagem .bloco-imagem-figure figcaption {
    font-size: 0.9em;
    color: var(--cor-texto-secundario, #6c757d);
    text-align: center;
    padding-top: 0.5rem;
}

/* Bloco: Vídeo */
.bloco-video .video-responsive {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #000; /* Fundo preto enquanto carrega */
    border-radius: var(--border-radius-padrao, 6px);
}
.bloco-video .video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.bloco-video video { /* Para vídeos diretos */
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-padrao, 6px);
}
.bloco-video .video-legenda {
    font-size: 0.9em;
    color: var(--cor-texto-secundario, #6c757d);
    text-align: center;
    padding-top: 0.75rem;
}


/* Bloco: Título */
.bloco-titulo {
    padding-bottom: 0; /* Títulos geralmente não precisam de padding inferior extra no bloco */
}
.bloco-titulo .bloco-titulo-tag {
    /* Estilos de h1-h6 já devem vir do global, mas pode adicionar específicos aqui */
    margin-top: 0; /* Reset margin-top se o bloco já tem espaçamento */
    margin-bottom: 0.5rem; /* Ou conforme o design */
    color: var(--cor-primaria); /* Garante a cor primária para títulos de bloco */
    padding-bottom: 0.25em;
    /* border-bottom: 2px solid var(--cor-secundaria); Opcional: linha abaixo do título */
}
.bloco-titulo .bloco-titulo-tag.h1 { font-size: 2.2rem; }
.bloco-titulo .bloco-titulo-tag.h2 { font-size: 1.9rem; }
.bloco-titulo .bloco-titulo-tag.h3 { font-size: 1.6rem; }


/* Bloco: Botão */
.bloco-botao {
    text-align: center; /* Centraliza o botão por padrão */
}
.bloco-botao .bloco-botao-link {
    /* Estilos de .btn já devem ser aplicados */
    margin: 0.5rem; /* Espaçamento se houver múltiplos botões no futuro */
    display: inline-flex; /* Garante que o ícone e texto alinhem bem */
    align-items: center;
    gap: 0.5em;
}
.bloco-botao .bloco-botao-link i {
    /* font-size: 1em; /* Opcional, herda do botão */
}


/* Bloco: Tabela (estilos para tabelas geradas por Parsedown) */
.bloco-tabela .bloco-tabela-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border: 1px solid var(--cor-borda-input, #ced4da);
    font-size: 0.95rem;
}
.bloco-tabela .bloco-tabela-content th,
.bloco-tabela .bloco-tabela-content td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--cor-borda-input, #ced4da);
    text-align: left;
    vertical-align: top;
}
.bloco-tabela .bloco-tabela-content thead th {
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa);
    font-weight: 600; /* Usar a variável do branding se tiver para peso de fonte */
    color: var(--cor-texto-principal);
}
.bloco-tabela .bloco-tabela-content tbody tr:nth-child(odd) {
    background-color: var(--cor-fundo-elemento, #fff);
}
.bloco-tabela .bloco-tabela-content tbody tr:nth-child(even) {
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa); /* Efeito zebra */
}


/* Bloco: Áudio */
.bloco-audio audio {
    width: 100%;
    margin-bottom: 0.5rem;
}
.bloco-audio .audio-legenda {
    font-size: 0.9em;
    color: var(--cor-texto-secundario, #6c757d);
    padding-top: 0.5rem;
}


/* Bloco: Código */
.bloco-codigo .bloco-codigo-pre {
    background-color: #2d2d2d; /* Fundo escuro para código (pode vir do tema de syntax highlight) */
    color: #f8f8f2; /* Texto claro */
    padding: 1em;
    border-radius: var(--border-radius-padrao, 6px);
    overflow-x: auto;
    font-family: var(--familia-fonte-mono, 'Courier New', Courier, monospace); /* Defina --familia-fonte-mono */
    font-size: 0.9em;
    line-height: 1.5;
    white-space: pre;
}
.bloco-codigo .bloco-codigo-pre code {
    background-color: transparent !important; /* Sobrescreve o code inline do richtext */
    padding: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
}
.bloco-codigo .bloco-codigo-renderizado {
    border: 1px dashed var(--cor-borda-input, #ced4da);
    padding: 1rem;
    margin-top: 0.5rem;
}


/* Bloco: Divider */
.bloco-conteudo.bloco-divider { /* Especificidade para o bloco divider */
    padding-top: 0;
    padding-bottom: 0;
}

.bloco-divider .bloco-divider-tag { /* Renomeando para usar uma classe no HR para consistência */
    border: none;
    height: 1px;
    background-color: var(--cor-borda-muito-suave, #f1f3f5); /* Cor ainda mais suave */
    margin: 2rem 0; /* Mantém o espaçamento vertical */
}
.bloco-divider.bloco-divider-tracejado {
    background: none;
    border-top: 2px dashed var(--cor-borda-suave, #e0e0e0);
}
.bloco-divider.bloco-divider-pontilhado {
    background: none;
    border-top: 2px dotted var(--cor-borda-suave, #e0e0e0);
}


/* Bloco: Embed */
.bloco-embed .bloco-embed-iframe {
    border-radius: var(--border-radius-padrao, 6px);
    box-shadow: var(--box-shadow-leve, 0 1px 4px rgba(0,0,0,0.04));
    background-color: #f0f0f0; /* Fundo enquanto carrega */
}

.bloco-destaque .bloco-destaque-box {
    display: flex;
    align-items: flex-start; /* Alinha ícone no topo se o texto tiver múltiplas linhas */
    gap: 0.8rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-padrao, 6px);
    border-left-width: 5px;
    border-left-style: solid;
    margin: 1rem 0; /* Para se destacar um pouco */
}

.bloco-destaque .bloco-destaque-icone {
    font-size: 1.3em; /* Tamanho do ícone */
    margin-top: 0.1em; /* Ajuste fino vertical do ícone */
    flex-shrink: 0;
}

.bloco-destaque .bloco-destaque-conteudo {
    flex-grow: 1;
    line-height: 1.5; /* Melhor legibilidade para frases de destaque */
}
.bloco-destaque .bloco-destaque-conteudo p:last-child {
    margin-bottom: 0; /* Remove margem do último parágrafo dentro do destaque, se Parsedown gerar <p> */
}


/* Estilos de fundo/cor para o bloco de destaque */
.bloco-destaque-padrao {
    background-color: var(--cor-fundo-pagina-alternativo, #f8f9fa);
    border-left-color: var(--cor-borda-input, #ced4da);
    color: var(--cor-texto-principal, #222);
}
.bloco-destaque-padrao .bloco-destaque-icone {
    color: var(--cor-texto-secundario, #495057);
}

.bloco-destaque-info { /* Similar ao callout-info ou alert-info */
    background-color: color-mix(in srgb, var(--cor-primaria) 8%, var(--cor-fundo-pagina));
    border-left-color: var(--cor-primaria);
    color: var(--cor-primaria);
}
.bloco-destaque-info .bloco-destaque-icone {
    color: var(--cor-primaria);
}

.bloco-destaque-aviso {
    background-color: var(--feedback-aviso-fundo, #fff3cd);
    border-left-color: var(--feedback-aviso-texto, #856404); /* Usar cor mais forte para a borda */
    color: var(--feedback-aviso-texto, #856404);
}
.bloco-destaque-aviso .bloco-destaque-icone {
    color: var(--feedback-aviso-texto, #856404);
}

.bloco-destaque-sucesso {
    background-color: var(--feedback-sucesso-fundo, #d4edda);
    border-left-color: var(--feedback-sucesso-texto, #155724);
    color: var(--feedback-sucesso-texto, #155724);
}
.bloco-destaque-sucesso .bloco-destaque-icone {
    color: var(--feedback-sucesso-texto, #155724);
}

.bloco-destaque-erro {
    background-color: var(--feedback-erro-fundo, #f8d7da);
    border-left-color: var(--feedback-erro-texto, #721c24);
    color: var(--feedback-erro-texto, #721c24);
}
.bloco-destaque-erro .bloco-destaque-icone {
    color: var(--feedback-erro-texto, #721c24);
}

.btn-success {
  background-color: var(--btn-success-fundo);
  color: var(--btn-success-texto);
  border-color: var(--btn-success-borda);
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--btn-success-hover-fundo);
  border-color: var(--btn-success-hover-fundo); /* Ou a cor do texto para maior contraste na borda */
  color: var(--btn-success-hover-texto);
}

.btn-danger {
  background-color: var(--btn-danger-fundo);
  color: var(--btn-danger-texto);
  border-color: var(--btn-danger-borda);
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--btn-danger-hover-fundo);
  border-color: var(--btn-danger-hover-fundo);
  color: var(--btn-danger-hover-texto);
}

.btn-warning {
  background-color: var(--btn-warning-fundo);
  color: var(--btn-warning-texto);
  border-color: var(--btn-warning-borda); /* A cor da borda pode precisar ser mais forte que a do alerta */
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--btn-warning-hover-fundo);
  border-color: var(--btn-warning-hover-fundo);
  color: var(--btn-warning-hover-texto); /* Pode precisar de ajuste para contraste */
}

.btn-info {
  background-color: var(--btn-info-fundo);
  color: var(--btn-info-texto);
  border-color: var(--btn-info-borda);
}
.btn-info:hover, .btn-info:focus {
  background-color: var(--btn-info-hover-fundo);
  border-color: var(--btn-info-hover-fundo);
  color: var(--btn-info-hover-texto);
}

 .widget-iframe {
        border: none; /* Remove a borda padrão do iframe */
        display: block; /* Remove espaço extra abaixo do iframe (comportamento inline) */
        background-color: transparent; /* Garante que o fundo do iframe seja transparente */
    }
    
       /* Estilos para o Iframe Loader e Shimmer */
        .iframe-loader-wrapper {
            position: relative;
            width: 100%; /* Ocupa a largura do .coluna-widget */
            /* A altura deve ser a mesma do iframe que será carregado */
            height: 560px; /* AJUSTE ESTA ALTURA para corresponder à altura do seu iframe/widget */
            background-color: #f0f0f0; /* Cor de fundo base para o placeholder */
            border-radius: var(--border-radius-padrao, 8px); /* Para combinar com o widget */
            overflow: hidden; 
        }

        .iframe-shimmer-placeholder {
            width: 100%;
            height: 100%;
            padding: 15px; /* Simula o padding do widget real */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 10px; /* Espaço entre as linhas do shimmer */
        }

        .shimmer-line {
            width: 90%;
            height: 20px; /* Altura padrão para linhas de texto */
            background: linear-gradient(to right,
                rgba(0,0,0,0.06) 8%,
                rgba(0,0,0,0.12) 18%,
                rgba(0,0,0,0.06) 33%
            );
            background-size: 1200px 100%; /* Largura da animação do gradiente, maior que o elemento */
            animation: shimmer-animation 1.8s infinite linear;
            border-radius: 4px;
        }
        .shimmer-line.title { width: 60%; height: 24px; margin-bottom: 15px; }
        .shimmer-line.text-short { width: 70%; height: 16px; }
        .shimmer-line.text-medium { width: 85%; height: 16px; }
        .shimmer-line.text-long { width: 95%; height: 16px; }
        .shimmer-line.circle { width: 100px; height: 100px; border-radius: 50%; margin: 20px auto; } /* Para simular um gráfico */


        @keyframes shimmer-animation {
            0% { background-position: -600px 0; } 
            100% { background-position: 600px 0; } 
        }