.infobox {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.h2-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.image-caption {
      margin-top: 5px;
    font-size: 14px;
    color: #444;
    text-align: center;
}

.infobox-item-image {
    max-width: 64px;
    max-height: 64px;
    image-rendering: pixelated; /* Melhora a visualização de pixel art */
}

.infobox-title {
    text-align: center;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.infobox-data table {
    width: 100%;
    border-collapse: collapse;
}

.infobox-data th, .infobox-data td {
    padding: 0.4rem;
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
}

.infobox-data th {
    font-weight: bold;
    width: 40%;
}

.infobox-data tr:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

.infobox-data td code {
    background-color: #e0e0e0;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 90%;
    border-radius: 3px;
    font-family: monospace;
}



/* Alert and Tip Boxes */
.alert-box, .tip-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    border-left-width: 5px;
    border-left-style: solid;
}
.alert-warning {
    background-color: #fffbeb;
    border-color: #fbbd23;
    color: #92400e;
}
.tip-box {
    background-color: #f0f5ff;
    border-color: var(--secondary-color);
    color: var(--primary-color);
}
.alert-icon, .tip-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0.2rem;
}
.tip-icon {
     filter: invert(24%) sepia(34%) saturate(2250%) hue-rotate(214deg) brightness(95%) contrast(88%);
}
.alert-box h4, .tip-box h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: bold;
    color: inherit;
}
.alert-box p, .tip-box p {
    margin: 0;
    line-height: 1.5;
}

/* Custom List */
.custom-list {
    list-style: none;
    padding-left: 1rem;
}
.custom-list li {
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1.5rem;
}
.custom-list li::before {
    content: '➤';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color);
    font-weight: bold;
}
.custom-list span {
    font-weight: bold;
}

/* Table Scroll Wrapper */
.table-scroll-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}


/* ===== ESTILOS GERAIS DAS TABELAS ===== */
.data-table {
    border-collapse: collapse;
   
    font-size: 0.95rem;
    width: 100%; /* Remove em mobile */
}

.data-table th, 
.data-table td {
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    text-align: center;
}

.data-table thead {
    background-color: var(--header-footer-bg);
}

.data-table th {
    font-weight: bold;
    text-align: center;
}

.data-table tbody tr:nth-child(odd) {
    background-color: #fcfcff;
}

.data-table tbody tr:hover {
    background-color: #f0f0f5;
}

.data-table td:not(:first-child) {
    text-align: center;
}



/* ===== CONTAINER DE ROLAGEM ===== */
.table-scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
    border-radius: 4px;
}

/* ===== MOBILE (<768px) ===== */
@media (max-width: 768px) {
    
   .td-perseu {
    text-align: left !important;
    max-width: 250px;
}

    
    .data-table {
        width: 100%;
    }
    
    /* Limita visualização inicial a ~4 colunas */
    .data-table[data-columns="2"] {
        min-width: calc(100% * 2 / 4);
    }
    .data-table[data-columns="6"] {
        min-width: 150%; /* Ajuste conforme necessário para ~4 colunas */
    }
    
    .data-table th, 
    .data-table td {
        min-width: 120px; /* Largura mínima para cada célula */
        white-space: nowrap; /* Impede quebra de texto */
    }
    
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
    /* Remove o margin-right que causa estouro */
    margin: 0 auto;
    /* Limita a largura ao viewport */
    max-width: 90vw;
    /* Sombra para indicar mais conteúdo */
    background: 
      linear-gradient(to right, #fff 70%, rgba(255,255,255,0)),
      linear-gradient(to left, #fff 70%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.1), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.1), transparent);
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: left top, right top, left top, right top;
    background-attachment: scroll;
  }

  /* Estilo da barra de rolagem (opcional) */
  .table-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .table-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  .table-scroll-wrapper table {
  min-width: 600px; /* ou o que for necessário */
  width: max-content;
}
}