/*
Usar para os seguintes componentes:
    .card-custom { ... }
    .alert-info { ... }
    .badge-custom { ... }
    .pix-box { ... }
    .btn-outline-custom { ... }
*/

/**********************************************************/
/* Classe personalizada card-img-wrapper (home.html)      */
/**********************************************************/
.card-img-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 180px;
  overflow: hidden;
}

.card-img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain; /* use cover se quiser preencher */
}

/*************************************************************************************/
/* Classe personalizada (Marca) baseada na classe .btn                               */
/* Uso:                                                                              */
/*************************************************************************************/

.btn-dcon {
  background-color: var(--bs-primary);
  border-color: var(--bs-body-color);
  min-width: 110px; /* ajuste ao maior texto */

  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #442c2e69;
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-border-color:var(--bs-primary);
}

.btn-dcon:hover,
.btn-dcon:focus {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
}

.btn-dcon:active,
.btn-dcon.active {
  background-color: var(--bs-primary-active);
  border-color: var(--bs-primary-active);
}

/*************************************************************************************/
/* Classe personalizada (Marca) baseada na classe .btn-outline-primary do Bootstrap  */
/* Uso: base_md.html, posts_lista.html                                               */
/*************************************************************************************/
.btn-outline-dcon {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #442c2e69;
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color:var(--bs-primary);
  --bs-gradient: none;
}

/*************************************************************************************/
/* Classe personalizada (Marca) baseada na classe .icon do Bootstrap                 */
/* Uso:                                                                              */
/*************************************************************************************/
.icon-dcon {
    color: var(--bs-primary);
}

.code-dcon {
  background-color: #442c2e17;
  /*font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
  position: relative;*/
  border-radius: 4px;
  padding: 4px 6px 4px 6px;  /* topo | direita | baixo | esquerda */
  /*padding-right: 46px;   /* <-- adicione aqui também */
  /*overflow-x: auto;*/
  font-size: 0.95rem;
}



.CodeMirror {
    padding: 0;
}

.CodeMirror-scroll {
    padding-left: 8px; /* ajuste fino */
}

.CodeMirror-gutters {
    border-right: none;
}

/*.markdown-body li {
    background-color: #ffffff;
    color: #271d1d;
    font-weight: 600;
}*/

/*
.markdown-body-dcon .anchor {
    float: left;
    padding-right: var(--base-size-4);
    margin-left: -20px;
    line-height: 1;
}

.markdown-heading-dcon {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 2;
    margin-bottom: 2;

}

.markdown-heading-dcon .anchor {
    position: absolute;
    top: 50%;
    left: -28px;
    display: flex;
    width: 28px;
    height: 28px;
    margin: auto;
    border-radius: var(--borderRadius-medium);
    opacity: 0;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
}

.markdown-dcon h2, h3 {
    text-align: center;
}

.markdown-body-dcon p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}*/

.img-ampliavel {
  /*transition: transform 0.3s ease;*/
  cursor: zoom-in;
  display: block;
  margin: 0 auto;
  position: relative;
}

.img-ampliavel:active {
  /*transform: scale(1.5); /* Aumenta em 50% ao segurar o clique */
  /*z-index: 1000;
  position: relative;*/
}

.img-box{
    height: 260px;            /* ajuste conforme necessário */
    display:flex;
    align-items:flex-start;   /* topo dentro da caixa */
    justify-content:center;   /* centraliza horizontalmente */
  }

  .img-box img{
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

/* Várias imagens na mesma linha */
.imgs-linha {
  display: flex;
  justify-content: center; /* centraliza o conjunto */
  gap: 8px;               /* espaço entre as imagens */
}

.imgs-linha img {
  max-width: 600px;
  width: 75%;
  height: auto;
}

blockquote {
  border-left: 4px solid #6c757d;
  padding-left: 1rem;
  /*margin: 1.5rem 0;*/
  color: #555;
  background: #f8f9fa;
  width: 75%;
  padding-right: 2rem;
  margin-left: 40px;
}

/* Exemplo de uso
<div class="destaque dica">
  <p class="destaque titulo">Dica</p>
  <span>Existem diversos ambientes de desenvolvimento em nuvem </span>
  <span>Existem diversos ambientes de desenvolvimento em nuvem </span>
  <span>Existem diversos ambientes de desenvolvimento em nuvem </span>
  <br>
</div>
*/
.destaque {
  border-radius: 6px;
  margin: 0.1rem auto;      /* Centralizar horizontalmente */
  max-width: 700px;
  padding-top: 0.1rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
}

.destaque.titulo {
  font-size: 1.5em;
  font-style: italic;
  font-weight: 600;
  padding-top: 0.1rem;
  padding-right: 1rem;
  padding-bottom: 0.1rem;
  padding-left: 0rem;
  line-height: 1.7;
}

.destaque.dica {
  background: #d2e2e7; /*#e7f5ff;*/
  border-left: 6px solid #339af0;
}

.destaque.atencao {
  background: #d7cfb7; /*#fff3cd;*/
  border-left: 6px solid #f59f00;
}

.destaque.alerta {
  background: #d9cdcd; /*#ffe3e3;*/
  border-left: 6px solid #e03131;
}



/***********************************************************************************************/
/* O codehilite é uma extensão do python-markdown (markdown) que garante cores diferentes para
   o bloco de código.
   Foi definido no código app.py
   md = markdown.Markdown(extensions=['fenced_code', 'codehilite', 'tables', 'toc'])
*/
/***********************************************************************************************/
.codehilite pre {
  background-color: #442c2e17;
  /*color: #e2e8f0;            /* Texto branco azulado suave */
  border: 1px solid #442c2e17; /* Borda sutil para dar profundidade */
  position: relative; /* Necessário para o botão absoluto */
  padding: 14px;
  padding-right: 85px !important; /* Aumente para garantir espaço para o botão "Copiado!" */
  border-radius: 10px;
  overflow-x: auto;
}

/* Aplique o mesmo para o bloco de OUTPUT para manter a consistência */
.codehilite.is-output pre {
  background: #b5b3b3 !important;
  /*color: #111827 !important;*/
  padding-right: 65px !important;
}

/* garante que o <code> ocupe o bloco todo */
.codehilite code {
  display: block;
}

/* Paleta de Cores para Sintaxe (Harmonizada com #044463) */

/* Comentários: Cinza azulado para não distrair */
.codehilite .c1, .codehilite .cm { /*color: #6a737d;*/ font-style: italic; }

/* Palavras-chave: Ciano brilhante (combina bem com azuis escuros) */
.codehilite .k, .codehilite .kn, .codehilite .kp, .codehilite .ow {
    /*color: #79c0ff;*/
    font-weight: bold;
}

/* Strings: Verde suave para leitura confortável */
.codehilite .s, .codehilite .s2, .codehilite .sa { /*color: #7ee787;*/ }

/* Funções e Métodos: Roxo/Lavanda */
.codehilite .nf, .codehilite .fm { /*color: #d2a8ff;*/ }

/* Variáveis e Atributos: Branco ou Azul muito claro */
.codehilite .n, .codehilite .nv { /*color: #e6edf3;*/ }

/* Números e Booleanos: Laranja vibrante para destaque */
.codehilite .mi, .codehilite .mf, .codehilite .kc { /*color: #ffa657;*/ }

/* Operadores: Vermelho coral suave */
.codehilite .o { /*color: #ff7b72;*/ }

/* Built-ins (print, len, etc): Azul turquesa */
.codehilite .nb { /*color: #a5d6ff;*/ }

/***********************************************************************************************/



.file-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #f6c1d1, #d6a4f4);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}

.file-upload:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}


/**********************************************************/

/* Container de Cards estilo Pluralsight */
.card-resource {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-resource:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.card-resource .card-body {
    padding: 1.5rem;
}

.card-resource .category-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f05a28; /* Cor destaque */
    margin-bottom: 0.75rem;
    display: block;
}

.card-resource .card-title {
    color: #333;
    font-weight: 700;
    margin-bottom: 1rem;
}

.card-resource .card-text {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}


.pix-box {
    max-width: 520px;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 0.9rem;
}

.pix-box p {
    line-height: 1.5;
}

.pix-box strong {
    font-weight: 500;
}

@media (max-width: 768px) {
  .destaque {
    max-width: 90%;
  }
}