/* Paletas de Cores
-----------------------------------------------*/

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;

 color: black;
 text-align: left;
 text-decoration: none;
 font-weight: normal;
 font-size: inherit;
}

:root {
 --red-50: #ffebee;
 --red-900: #b71c1c;
 --red-a700: #d50000;

 --blue-50: #e3f2fd;
 --blue-900: #0d47a1;
 --blue-a700: #2962ff;

 --green-50: #e8f5e9;

 --gray-50: #fafafa;
 --gray-100: #f5f5f5;
 --gray-200: #eeeeee;
 --gray-300: #e0e0e0;
 --gray-400: #bdbdbd;

 --white: #ffffff;
}

html {
 scroll-behavior: smooth;
}

body {
 max-width: 384px;
 margin: 0 auto;

 background-color: var(--gray-50);
 font-family: arial;
}

main {
 margin: 16px;
}

/* Navegação "Padrão"
-----------------------------------------------*/

.logo {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;

 margin-top: 16px;
 margin-bottom: 16px;
}

.logo img {
 width: 64px;
}

.logo-text {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
}

.logo-text h1 {
 font-size: 32px;
}


.logo-text h2 {
 font-size: 12px;
}

.page-button-container {
 display: flex;
 flex-direction: column;
 gap: 16px;

 margin-bottom: 16px;
}

.green-page-button {
 display: flex;
 align-items: center;
 justify-content: center;

 padding: 8px 20px;
 background-color: var(--green-50);
 border-radius: 8px;
 width: 100%;
 
 text-align: center;
 font-size: 16px;
 font-weight: bold;
 text-transform: uppercase;
}

/* Coluna de Imagens "Padrão"
-----------------------------------------------*/

.images-column {
 display: flex;
 flex-direction: column;
 gap: 16px;

 margin-bottom: 16px;
}

.images-column img {
 border-radius: 16px;
}

.images-tags-container {
 display: flex;
 gap: 8px;

 width: 100%;
 overflow-x: auto;
}

.images-tags-container .tag {
 display: flex;
 padding: 8px 20px;
 background-color: var(--blue-50);
 border-radius: 4px;
 
 text-align: center;
 font-size: 16px;
 font-weight: bold;
 text-transform: uppercase;
}

/* Formatação "Padrão"
-----------------------------------------------*/

.subtitle {
 margin-bottom: 16px;
 padding: 12px 0px;
 border-bottom: 1px solid var(--gray-400);
}

.text {
 font-size: 14px;
 margin-bottom: 16px;
}

.external-link {
 display: inline;
}

.external-link span {
 font-size: 14px;
 vertical-align: middle;
}

/* Nota "Padrão"
-----------------------------------------------*/

.note-container {
 position: relative;

 margin-bottom: 16px;
 padding: 12px 16px;
 
 border-radius: 4px;
}

.note-title {
 font-weight: bold;
 margin-bottom: 8px;
}

.note-description {
 font-size: 14px;
}

.note-close-button span {
 position: absolute;
 top: 8px;
 right: 8px;
 cursor: pointer;
 font-size: 14px;
}

.note-container.red {
 background-color: var(--red-50);
}

.note-container.red::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 4px;
 height: 100%;
 background-color: var(--red-a700);
 border-top-left-radius: 8px;
 border-bottom-left-radius: 8px;
}

.note-container.blue {
 background-color: var(--blue-50);
}

.note-container.blue::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 4px;
 height: 100%;
 background-color: var(--blue-a700);
 border-top-left-radius: 8px;
 border-bottom-left-radius: 8px;
}

/* Referência "Padrão"
-----------------------------------------------*/

.reference-container {
 display: flex;
 align-items: flex-start;
 gap: 8px;

 font-size: 14px;

 margin-bottom: 16px;
}

.reference-source-container {
 flex: 1;
}

.reference-source {
 margin-bottom: 4px;
}

.reference-source-access {
 font-size: 12px;
}

.shortcut {
 display: inline;
}

.shortcut span {
 font-size: 14px;
 vertical-align: middle;
}

/* Tabela "Padrão"
-----------------------------------------------*/

.table-scroll-container {
 width: 100%;
 overflow-x: auto;
}

.table-container {
 width: 100%;
 font-size: 12px;
 margin-bottom: 16px;

 border-spacing: 0;
 border: 1px solid var(--gray-400);
 border-radius: 4px;
}

.table-container th, td {
 padding: 12px 16px;
 border-bottom: 1px solid var(--gray-400);
 border-right: 1px solid var(--gray-400);
}

.table-container tr:last-child th, .table-container tr:last-child td {
 border-bottom: none;
}
.table-container th:last-child, .table-container td:last-child {
border-right: none;
}


/* Criado em: 27 de Novembro de 2025
-----------------------------------------------*/