/* ==========================================================
   INFRAESTRUTURA COMPUTACIONAL — LCC-UFMG

   Layout institucional
   Referência visual: página Sobre o LCC

   ========================================================== */


/* ==========================================================
   1. VARIÁVEIS E CONFIGURAÇÕES GERAIS
   ========================================================== */

.infraestrutura-page {

    --infra-primary: #17365d;
    --infra-blue: #1351a3;
    --infra-blue-hover: #0c397a;

    --infra-text: #374151;
    --infra-text-dark: #1f2937;
    --infra-text-muted: #526174;

    --infra-border: #d9e2ef;
    --infra-border-light: #e6edf5;

    --infra-table-header: #f3f7fd;

    --infra-background: #ffffff;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    background: var(--infra-background);

    color: var(--infra-text);

    font-size: 0.95rem;

    line-height: 1.55;

    overflow-wrap: break-word;

}


.infraestrutura-page,
.infraestrutura-page *,
.infraestrutura-page *::before,
.infraestrutura-page *::after {

    box-sizing: border-box;

}


/* ==========================================================
   2. CONTAINER PRINCIPAL
   ========================================================== */

.infraestrutura-container {

    width: 82%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 0;

}


/* ==========================================================
   3. BREADCRUMB
   ========================================================== */

.infraestrutura-breadcrumb {

    margin: 0;

    padding: 14px 0 8px;

    font-size: 0.78rem;

    line-height: 1.5;

}


.infraestrutura-breadcrumb ol {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.35rem;

    margin: 0;

    padding: 0;

    list-style: none;

}


.infraestrutura-breadcrumb li {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    color: var(--infra-text-dark);

}


.infraestrutura-breadcrumb li + li::before {

    content: "›";

    margin-right: 0.1rem;

    color: var(--infra-text-muted);

    font-size: 1rem;

}


.infraestrutura-breadcrumb a {

    color: var(--infra-blue);

    text-decoration: none;

}


.infraestrutura-breadcrumb a:hover {

    color: var(--infra-blue-hover);

    text-decoration: underline;

}


.infraestrutura-breadcrumb li[aria-current="page"] {

    color: var(--infra-text-dark);

}


/* ==========================================================
   4. CABEÇALHO DA PÁGINA
   ========================================================== */

.infraestrutura-page-header {

    margin: 0;

    padding: 6px 0 12px;

}


.infraestrutura-page-header h1 {

    margin: 0;

    padding: 0;

    color: var(--infra-primary);

    font-size: clamp(1.8rem, 3vw, 2.1rem);

    font-weight: 700;

    letter-spacing: -0.025em;

    line-height: 1.25;

}


/* ==========================================================
   5. SEÇÕES DE CONTEÚDO
   ========================================================== */

.infraestrutura-section {

    position: relative;

    width: 100%;

    margin: 0 0 20px;

    padding: 0;

    background: transparent;

    border: 0;

    box-shadow: none;

}


.infraestrutura-section:last-child {

    margin-bottom: 24px;

}


/* ==========================================================
   6. TÍTULOS DAS SEÇÕES
   ========================================================== */

.infraestrutura-section > h2 {

    position: relative;

    display: block;

    margin: 0 0 10px;

    padding: 0 0 11px;

    color: var(--infra-primary);

    font-size: clamp(1.2rem, 2vw, 1.35rem);

    font-weight: 700;

    letter-spacing: -0.015em;

    line-height: 1.35;

    background: transparent;

    border: 0;

}


/* Traço azul abaixo dos títulos */

.infraestrutura-section > h2::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    display: block;

    width: 24px;

    height: 2px;

    background: var(--infra-blue);

    border-radius: 1px;

}


/* ==========================================================
   7. SUBTÍTULOS
   ========================================================== */

.infraestrutura-section h3 {

    margin: 16px 0 9px;

    padding: 0;

    color: var(--infra-primary);

    font-size: 1.05rem;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: -0.01em;

}


.infraestrutura-section h3:first-of-type {

    margin-top: 14px;

}


/* ==========================================================
   8. PARÁGRAFOS
   ========================================================== */

.infraestrutura-section p {

    margin: 0 0 8px;

    padding: 0;

    color: var(--infra-text);

    font-size: 0.95rem;

    font-weight: 400;

    line-height: 1.55;

    text-align: left;

}


.infraestrutura-section p:last-child {

    margin-bottom: 0;

}


/* ==========================================================
   9. TABELAS — CONTAINER
   ========================================================== */

.infraestrutura-table-wrapper {

    display: block;

    width: 100%;

    max-width: 100%;

    margin: 10px 0 0;

    padding: 0;

    overflow-x: auto;

    overflow-y: hidden;

    background: #ffffff;

    border: 1px solid var(--infra-border);

    border-radius: 4px;

    box-shadow: none;

    -webkit-overflow-scrolling: touch;

}


/* ==========================================================
   10. TABELAS — ESTRUTURA
   ========================================================== */

.infraestrutura-table {

    width: 100%;

    margin: 0;

    padding: 0;

    border-collapse: collapse;

    border-spacing: 0;

    table-layout: auto;

    background: #ffffff;

    color: var(--infra-text);

    font-size: 0.86rem;

    line-height: 1.4;

}


/* Cabeçalho */

.infraestrutura-table thead {

    background: var(--infra-table-header);

}


.infraestrutura-table thead tr {

    background: var(--infra-table-header);

}


.infraestrutura-table thead th {

    padding: 9px 13px;

    color: var(--infra-text-dark);

    background: var(--infra-table-header);

    font-size: 0.83rem;

    font-weight: 700;

    line-height: 1.4;

    text-align: left;

    vertical-align: middle;

    border: 0;

    border-bottom: 1px solid var(--infra-border);

}


/* Células */

.infraestrutura-table tbody th,
.infraestrutura-table tbody td {

    padding: 8px 13px;

    color: var(--infra-text);

    background: #ffffff;

    font-size: 0.85rem;

    font-weight: 400;

    line-height: 1.45;

    text-align: left;

    vertical-align: middle;

    border: 0;

    border-bottom: 1px solid var(--infra-border);

}


/* Linhas divisórias verticais */

.infraestrutura-table th + th,
.infraestrutura-table th + td,
.infraestrutura-table td + th,
.infraestrutura-table td + td {

    border-left: 1px solid var(--infra-border);

}


/* Remove borda inferior da última linha */

.infraestrutura-table tbody tr:last-child th,
.infraestrutura-table tbody tr:last-child td {

    border-bottom: 0;

}


/* Primeira coluna */

.infraestrutura-table tbody th[scope="row"] {

    font-weight: 400;

}


/* Evita cores herdadas de estilos antigos */

.infraestrutura-table tbody tr:nth-child(odd),
.infraestrutura-table tbody tr:nth-child(even) {

    background: #ffffff;

}


/* Destaque discreto ao passar o mouse */

.infraestrutura-table tbody tr:hover th,
.infraestrutura-table tbody tr:hover td {

    background: #f7faff;

}


/* Alinhamento de números */

.infraestrutura-table td {

    font-variant-numeric: tabular-nums;

}


/* ==========================================================
   11. AJUSTES DAS TABELAS DE CPU E GPU
   ========================================================== */

/* Tabela de configuração da CPU */

#processamento-cpu .infraestrutura-table {

    width: 100%;

}


/* Tabelas GPU */

#processamento-gpu .infraestrutura-table {

    width: 100%;

}


/* Tabela de quatro colunas */

#processamento-gpu
.infraestrutura-table-wrapper:last-child
.infraestrutura-table {

    min-width: 580px;

}


/* Largura da coluna fabricante */

#processamento-gpu
.infraestrutura-table-wrapper:last-child
.infraestrutura-table
th:first-child {

    width: 23%;

}


/* Modelo */

#processamento-gpu
.infraestrutura-table-wrapper:last-child
.infraestrutura-table
th:nth-child(2) {

    width: 27%;

}


/* Quantidade */

#processamento-gpu
.infraestrutura-table-wrapper:last-child
.infraestrutura-table
th:nth-child(3) {

    width: 22%;

}


/* Memória por GPU */

#processamento-gpu
.infraestrutura-table-wrapper:last-child
.infraestrutura-table
th:nth-child(4) {

    width: 28%;

}


/* ==========================================================
   12. LISTAS
   ========================================================== */

.infraestrutura-section ul {

    margin: 7px 0 12px;

    padding-left: 26px;

    list-style: disc;

}


.infraestrutura-section ul li {

    margin: 2px 0;

    padding: 0;

    color: var(--infra-text);

    font-size: 0.93rem;

    line-height: 1.5;

}


.infraestrutura-section ul li::marker {

    color: var(--infra-primary);

}


/* ==========================================================
   13. LINKS
   ========================================================== */

.infraestrutura-page a {

    color: var(--infra-blue);

    text-decoration: none;

    text-underline-offset: 2px;

}


.infraestrutura-page a:hover {

    color: var(--infra-blue-hover);

    text-decoration: underline;

}


.infraestrutura-page a:visited {

    color: var(--infra-blue);

}


/* ==========================================================
   14. ACESSO RÁPIDO
   ========================================================== */

.infraestrutura-quick-links {

    margin-top: 22px;

    margin-bottom: 28px;

    padding: 0;

    background: transparent;

    border: 0;

    box-shadow: none;

}


.infraestrutura-quick-links ul {

    margin: 0;

    padding-left: 26px;

}


.infraestrutura-quick-links li {

    margin: 2px 0;

    padding: 0;

}


.infraestrutura-quick-links a {

    display: inline;

    padding: 0;

    color: var(--infra-blue);

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    font-weight: 400;

    text-decoration: none;

}


.infraestrutura-quick-links a:hover {

    color: var(--infra-blue-hover);

    background: transparent;

    text-decoration: underline;

}


/* ==========================================================
   15. ACESSIBILIDADE
   ========================================================== */

/* Foco visível */

.infraestrutura-page a:focus-visible,
.infraestrutura-page
.infraestrutura-table-wrapper:focus-visible {

    outline: 3px solid #ffbf47;

    outline-offset: 3px;

}


/* Região de tabela acessível */

.infraestrutura-table-wrapper:focus {

    scroll-behavior: auto;

}


/* Legenda acessível */

.infraestrutura-visually-hidden {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;

}


/* ==========================================================
   16. AJUSTES PARA TELAS INTERMEDIÁRIAS
   ========================================================== */

@media (max-width: 1100px) {

    .infraestrutura-container {

        width: 82%;

        max-width: 100%;

    }

}


/* ==========================================================
   17. TABLETS
   ========================================================== */

@media (max-width: 900px) {

    .infraestrutura-container {

        width: calc(100% - 48px);

    }

    .infraestrutura-page-header h1 {

        font-size: 1.85rem;

    }

    .infraestrutura-section > h2 {

        font-size: 1.25rem;

    }

    .infraestrutura-section {

        margin-bottom: 20px;

    }

    .infraestrutura-table thead th,
    .infraestrutura-table tbody th,
    .infraestrutura-table tbody td {

        padding: 9px 11px;

    }

}


/* ==========================================================
   18. CELULARES
   ========================================================== */

@media (max-width: 600px) {

    .infraestrutura-page {

        font-size: 0.92rem;

    }

    .infraestrutura-container {

        width: calc(100% - 32px);

        max-width: 100%;

    }

    .infraestrutura-breadcrumb {

        padding: 12px 0 8px;

        font-size: 0.76rem;

    }

    .infraestrutura-page-header {

        padding: 4px 0 14px;

    }

    .infraestrutura-page-header h1 {

        font-size: 1.7rem;

        line-height: 1.3;

    }

    .infraestrutura-section {

        margin-bottom: 24px;

    }

    .infraestrutura-section > h2 {

        font-size: 1.2rem;

        padding-bottom: 10px;

        margin-bottom: 12px;

    }

    .infraestrutura-section h3 {

        font-size: 1rem;

        margin-top: 16px;

    }

    .infraestrutura-section p {

        font-size: 0.91rem;

        line-height: 1.6;

        margin-bottom: 10px;

    }

    .infraestrutura-section ul {

        padding-left: 22px;

    }

    .infraestrutura-section ul li {

        font-size: 0.91rem;

    }

    /* Tabelas */

    .infraestrutura-table-wrapper {

        margin-top: 10px;

        border-radius: 4px;

    }

    .infraestrutura-table {

        font-size: 0.81rem;

    }

    .infraestrutura-table thead th,
    .infraestrutura-table tbody th,
    .infraestrutura-table tbody td {

        padding: 9px 10px;

        font-size: 0.81rem;

        line-height: 1.45;

    }

    /* Permite quebra do texto nas tabelas */

    .infraestrutura-table th,
    .infraestrutura-table td {

        overflow-wrap: anywhere;

        white-space: normal;

    }

    /* GPU: rolagem horizontal */

    #processamento-gpu
    .infraestrutura-table-wrapper:last-child {

        overflow-x: auto;

    }

    #processamento-gpu
    .infraestrutura-table-wrapper:last-child
    .infraestrutura-table {

        min-width: 580px;

    }

    .infraestrutura-quick-links {

        margin-top: 24px;

        margin-bottom: 30px;

    }

}


/* ==========================================================
   19. CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 380px) {

    .infraestrutura-container {

        width: calc(100% - 24px);

    }

    .infraestrutura-page-header h1 {

        font-size: 1.55rem;

    }

    .infraestrutura-table thead th,
    .infraestrutura-table tbody th,
    .infraestrutura-table tbody td {

        padding: 8px;

        font-size: 0.78rem;

    }

}


/* ==========================================================
   20. REDUÇÃO DE MOVIMENTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .infraestrutura-page *,
    .infraestrutura-page *::before,
    .infraestrutura-page *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}


/* ==========================================================
   21. IMPRESSÃO
   ========================================================== */

@media print {

    .infraestrutura-page {

        width: 100%;

        color: #000000;

        background: #ffffff;

        font-size: 10pt;

        overflow: visible;

    }

    .infraestrutura-container {

        width: 100%;

        max-width: none;

        margin: 0;

        padding: 0;

    }

    .infraestrutura-breadcrumb,
    .infraestrutura-quick-links {

        display: none;

    }

    .infraestrutura-page-header h1,
    .infraestrutura-section > h2,
    .infraestrutura-section h3 {

        color: #000000;

    }

    .infraestrutura-section {

        break-inside: auto;

    }

    .infraestrutura-table-wrapper {

        overflow: visible;

        border: 1px solid #999999;

    }

    .infraestrutura-table {

        width: 100%;

        min-width: 0 !important;

        border-collapse: collapse;

    }

    .infraestrutura-table th,
    .infraestrutura-table td {

        border-color: #999999 !important;

        color: #000000 !important;

    }

    .infraestrutura-table thead th {

        background: #eeeeee !important;

    }

    .infraestrutura-table thead {

        display: table-header-group;

    }

    .infraestrutura-table tr {

        break-inside: avoid;

    }

    .infraestrutura-page a {

        color: #000000;

        text-decoration: underline;

    }

}