/* SECOM-ES design tokens. Load before application component CSS. */

:root {
  --secom-azul-1: #366C88;
  --secom-azul-2: #5081A0;
  --secom-azul-3: #365A6D;
  --secom-marsala-1: #9C5C6A;
  --secom-marsala-2: #B16C73;
  --secom-marsala-3: #7B4A55;
  --secom-cinza-1: #7B7B7A;
  --secom-cinza-2: #CFCFCF;
  --secom-cinza-3: #585857;
  --secom-sucesso: #28A058;
  --secom-advertencia: #E2DD2D;
  --secom-informacao: var(--secom-azul-1);
  --secom-erro: var(--secom-marsala-2);
  --secom-preto: #000000;
  --secom-branco: #FFFFFF;

  --secom-font-family: "Open Sans", sans-serif;
  --secom-weight-light: 300;
  --secom-weight-regular: 400;
  --secom-weight-semibold: 600;
  --secom-weight-bold: 700;
  --secom-weight-extrabold: 800;
  --secom-size-h1: 20pt;
  --secom-size-h2: 13pt;
  --secom-size-conteudo: 10pt;
  --secom-size-botao: 11pt;
  --secom-size-lista: 8pt;
  --secom-size-detalhe: 8pt;
  --secom-size-tags: 6pt;
  --secom-size-breadcrumb: 6pt;
  --secom-input-height: 35px;
  --secom-border-width: 1px;
  --secom-box-padding: 20px;
  --secom-pagination-size: 20px;
}

body {
  color: var(--secom-preto);
  font-family: var(--secom-font-family);
  font-size: var(--secom-size-conteudo);
  font-weight: var(--secom-weight-regular);
}
h1 { color: var(--secom-azul-2); font-size: var(--secom-size-h1); font-weight: var(--secom-weight-extrabold); }
h2 { color: var(--secom-cinza-2); font-size: var(--secom-size-h2); font-weight: var(--secom-weight-bold); }
a { color: var(--secom-marsala-2); font-size: var(--secom-size-conteudo); font-weight: var(--secom-weight-bold); text-decoration: none; }
a:hover { color: var(--secom-marsala-1); cursor: pointer; text-decoration: underline; }

.secom-tags { color: var(--secom-cinza-2); font-size: var(--secom-size-tags); font-weight: var(--secom-weight-bold); text-transform: uppercase; }
.secom-breadcrumb { padding-top: 4px; color: var(--secom-cinza-1); border-top: var(--secom-border-width) solid var(--secom-cinza-1); font-size: var(--secom-size-breadcrumb); }
.secom-separator { border: 0; border-top: var(--secom-border-width) solid var(--secom-cinza-1); }
.secom-separator--dashed { border-top-style: dashed; }

.secom-form-label { color: var(--secom-marsala-2); font-size: 13pt; font-weight: var(--secom-weight-bold); }
.secom-input { width: 100%; height: var(--secom-input-height); color: var(--secom-preto); border: var(--secom-border-width) solid var(--secom-cinza-1); font-size: var(--secom-size-conteudo); }
.secom-input::placeholder { color: var(--secom-cinza-2); }
.secom-input:focus { border-color: var(--secom-azul-1); outline: none; }
.secom-input--error { border-color: var(--secom-erro); }
.secom-input:disabled { color: var(--secom-cinza-1); }

.secom-btn { height: var(--secom-input-height); padding: 0 10px; color: var(--secom-branco); border: 0; cursor: pointer; font-size: var(--secom-size-botao); font-weight: var(--secom-weight-regular); }
.secom-btn--primario { background: var(--secom-azul-1); }
.secom-btn--primario:hover { background: var(--secom-azul-2); }
.secom-btn--secundario { background: var(--secom-marsala-1); }
.secom-btn--secundario:hover { background: var(--secom-marsala-2); }
.secom-btn--info { background: var(--secom-cinza-1); }
.secom-btn--info:hover { background: var(--secom-cinza-2); }

.secom-alert { display: flex; align-items: center; height: var(--secom-input-height); padding: 0 10px; color: var(--secom-branco); font-size: var(--secom-size-botao); }
.secom-alert--sucesso { background: var(--secom-sucesso); }
.secom-alert--advertencia { color: var(--secom-preto); background: var(--secom-advertencia); }
.secom-alert--informacao { background: var(--secom-informacao); }
.secom-alert--erro { background: var(--secom-erro); }

.secom-tab { padding: 6px 12px; font-size: 9pt; cursor: pointer; }
.secom-tab--ativa { color: var(--secom-cinza-2); background: var(--secom-branco); border: var(--secom-border-width) solid var(--secom-marsala-1); }
.secom-tab--inativa { color: var(--secom-branco); background: var(--secom-marsala-1); border: var(--secom-border-width) solid var(--secom-branco); }
.secom-accordion-titulo { color: var(--secom-marsala-2); font-size: 9pt; }
.secom-accordion-conteudo { padding-left: 10px; color: var(--secom-cinza-2); font-size: var(--secom-size-lista); }
.secom-page-item { display: inline-flex; width: var(--secom-pagination-size); height: var(--secom-pagination-size); align-items: center; justify-content: center; color: var(--secom-marsala-1); background: var(--secom-branco); border: var(--secom-border-width) solid var(--secom-cinza-1); font-size: 10pt; }
.secom-page-item:hover { color: var(--secom-branco); background: var(--secom-cinza-1); }
.secom-page-arrow { color: var(--secom-branco); background: var(--secom-marsala-1); }