/*
  Aparência do painel administrativo.

  É a mesma do programa do laboratório (cliente/arka_cliente/tema.py): fundo
  claro, texto quase preto, um azul só para ação e para o que está
  selecionado, e cor de alerta só onde ela significa alguma coisa. Quem passa
  do programa para o painel não deve sentir que mudou de sistema.

  O Django desenha o painel inteiro a partir de variáveis de CSS (base.css e
  dark_mode.css). A maior parte do trabalho aqui é redefinir essas variáveis;
  o resto são os poucos lugares onde o Django usa cor fixa, caixa alta ou o
  azul-petróleo dele sem passar por variável.

  Este arquivo carrega depois dos do Django (bloco `extrastyle` de
  templates/admin/base_site.html), e por isso vence com a mesma
  especificidade.
*/

/* ------------------------------------------------------------------ cores */

:root,
html[data-theme="light"] {
  --arka-texto: #1d1d1f;
  --arka-texto-2: #6e6e73;
  --arka-fundo: #ffffff;
  --arka-superficie: #f5f5f7;
  --arka-realce: #ececee;
  --arka-borda: #d2d2d7;
  --arka-fio: #e5e5ea;
  --arka-acento: #0066cc;
  --arka-acento-escuro: #0052a3;
  --arka-acento-fundo: #e8f1fb;
  --arka-erro: #c0392b;
  --arka-erro-fundo: #fdeeec;
  --arka-atencao: #b26b00;
  --arka-atencao-fundo: #fdf5e8;
  --arka-sucesso: #1a7f37;
  --arka-sucesso-fundo: #eaf6ed;
  --arka-sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px rgba(0, 0, 0, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --arka-texto: #f5f5f7;
    --arka-texto-2: #a1a1a6;
    --arka-fundo: #1c1c1e;
    --arka-superficie: #242426;
    --arka-realce: #2e2e31;
    --arka-borda: #3a3a3c;
    --arka-fio: #2e2e31;
    --arka-acento: #4da3ff;
    --arka-acento-escuro: #7ab8ff;
    --arka-acento-fundo: #1d3350;
    --arka-erro: #ff6b5b;
    --arka-erro-fundo: #3b1f1c;
    --arka-atencao: #f0a33a;
    --arka-atencao-fundo: #3a2c14;
    --arka-sucesso: #4cc26b;
    --arka-sucesso-fundo: #163020;
    --arka-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  --arka-texto: #f5f5f7;
  --arka-texto-2: #a1a1a6;
  --arka-fundo: #1c1c1e;
  --arka-superficie: #242426;
  --arka-realce: #2e2e31;
  --arka-borda: #3a3a3c;
  --arka-fio: #2e2e31;
  --arka-acento: #4da3ff;
  --arka-acento-escuro: #7ab8ff;
  --arka-acento-fundo: #1d3350;
  --arka-erro: #ff6b5b;
  --arka-erro-fundo: #3b1f1c;
  --arka-atencao: #f0a33a;
  --arka-atencao-fundo: #3a2c14;
  --arka-sucesso: #4cc26b;
  --arka-sucesso-fundo: #163020;
  --arka-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* As variáveis do Django apontam para as de cima. Os três seletores repetem
   os do Django (`:root` no tema automático, e os dois forçados pelo botão de
   tema), para que esta definição vença em todos os casos. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --primary: var(--arka-acento);
  --secondary: var(--arka-acento);
  --accent: var(--arka-acento);
  --primary-fg: #fff;

  --body-fg: var(--arka-texto);
  --body-bg: var(--arka-fundo);
  --body-quiet-color: var(--arka-texto-2);
  --body-medium-color: var(--arka-texto);
  --body-loud-color: var(--arka-texto);

  --header-color: var(--arka-texto);
  --header-branding-color: var(--arka-texto);
  --header-bg: var(--arka-fundo);
  --header-link-color: var(--arka-texto);

  --breadcrumbs-fg: var(--arka-texto-2);
  --breadcrumbs-link-fg: var(--arka-acento);
  --breadcrumbs-bg: var(--arka-superficie);

  --link-fg: var(--arka-acento);
  --link-hover-color: var(--arka-acento-escuro);
  --link-selected-fg: var(--arka-acento-escuro);

  --hairline-color: var(--arka-fio);
  --border-color: var(--arka-borda);

  --error-fg: var(--arka-erro);
  --message-success-bg: var(--arka-sucesso-fundo);
  --message-warning-bg: var(--arka-atencao-fundo);
  --message-error-bg: var(--arka-erro-fundo);

  --darkened-bg: var(--arka-superficie);
  --selected-bg: var(--arka-acento-fundo);
  --selected-row: var(--arka-acento-fundo);

  --button-fg: #fff;
  --button-bg: var(--arka-acento);
  --button-hover-bg: var(--arka-acento-escuro);
  --default-button-bg: var(--arka-acento);
  --default-button-hover-bg: var(--arka-acento-escuro);
  --close-button-bg: var(--arka-texto-2);
  --close-button-hover-bg: var(--arka-texto);
  --delete-button-bg: var(--arka-erro);
  --delete-button-hover-bg: var(--arka-erro);

  --object-tools-fg: var(--arka-texto);
  --object-tools-bg: var(--arka-fundo);
  --object-tools-hover-bg: var(--arka-superficie);

  --font-family-primary: "Segoe UI", system-ui, -apple-system, Roboto,
    "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji", "Apple Color Emoji";
}

body {
  background: var(--arka-fundo);
  color: var(--arka-texto);
  font-size: 14px;
}

/* -------------------------------------------------------------- cabeçalho */

#header {
  background: var(--arka-fundo);
  color: var(--arka-texto);
  border-bottom: 1px solid var(--arka-borda);
  padding: 10px 28px;
  min-height: 60px;
  box-sizing: border-box;
}

#branding {
  display: flex;
  align-items: center;
  gap: 12px;
}

#site-name .arka-marca,
#site-name .arka-marca:link,
#site-name .arka-marca:visited {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--arka-texto);
  text-decoration: none;
}
#site-name .arka-marca:hover,
#site-name .arka-marca:focus { color: var(--arka-texto); text-decoration: none; }

.arka-simbolo {
  width: 36px;
  height: 36px;
  display: block;
}

.arka-nome {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
}

.arka-contexto {
  font-size: 13px;
  color: var(--arka-texto-2);
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--arka-borda);
  line-height: 20px;
  font-weight: 400;
}

/* O símbolo é traço escuro com fundo transparente; no tema escuro ele
   inverte, senão some no fundo. */
html[data-theme="dark"] .arka-simbolo { filter: invert(1) brightness(.95); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .arka-simbolo { filter: invert(1) brightness(.95); }
}

#user-tools {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--arka-texto-2);
  font-weight: 400;
}
#user-tools strong { color: var(--arka-texto); font-weight: 600; }
#user-tools a,
#user-tools a:link,
#user-tools a:visited,
#logout-form button {
  color: var(--arka-texto);
  border-bottom: 0;
  text-decoration: none;
  text-transform: none;
  font-size: 13px;
  letter-spacing: 0;
}
#user-tools a:hover,
#user-tools a:focus,
#logout-form button:hover,
#logout-form button:focus {
  color: var(--arka-acento);
  text-decoration: none;
}

.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
  fill: var(--arka-texto-2);
  color: var(--arka-fundo);
}
.theme-toggle:hover svg { fill: var(--arka-acento); }

/* ---------------------------------------------------- trilha de migalhas */

div.breadcrumbs {
  background: var(--arka-superficie);
  color: var(--arka-texto-2);
  border-bottom: 1px solid var(--arka-fio);
  padding: 10px 28px;
  font-size: 13px;
}
div.breadcrumbs a,
div.breadcrumbs a:link,
div.breadcrumbs a:visited { color: var(--arka-acento); }
div.breadcrumbs a:hover,
div.breadcrumbs a:focus { color: var(--arka-acento-escuro); }

/* --------------------------------------------------------- barra lateral */

.toggle-nav-sidebar {
  background: var(--arka-superficie);
  border-right: 1px solid var(--arka-borda);
  color: var(--arka-texto-2);
}
.toggle-nav-sidebar:hover,
.toggle-nav-sidebar:focus {
  background: var(--arka-realce);
  color: var(--arka-acento);
}

#nav-sidebar {
  box-sizing: border-box;
  background: var(--arka-superficie);
  border-right: 1px solid var(--arka-borda);
  padding: 14px 10px 28px;
}

#nav-filter {
  background: var(--arka-fundo);
  border: 1px solid var(--arka-borda);
  border-radius: 7px;
  padding: 7px 10px;
  margin: 0 0 14px;
  font-size: 13px;
}
#nav-filter:focus {
  border-color: var(--arka-acento);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arka-acento) 20%, transparent);
}

#nav-sidebar .module {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 14px;
}
#nav-sidebar .module caption,
#nav-sidebar .module caption.arka-grupo {
  background: transparent;
  color: var(--arka-texto-2);
  border: 0;
  padding: 6px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
#nav-sidebar .current-app caption.arka-grupo { color: var(--arka-texto); font-weight: 700; }
#nav-sidebar .module tr,
#nav-sidebar .module tr.current-model { background: transparent; }
#nav-sidebar .module th,
#nav-sidebar .module td {
  border: 0;
  padding: 0;
  background: transparent;
}
#nav-sidebar .module th a,
#nav-sidebar .module th > span {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--arka-texto);
  font-size: 13px;
}
#nav-sidebar .module tr:hover th a { background: var(--arka-realce); text-decoration: none; }
#nav-sidebar .module tr.current-model th a {
  background: var(--arka-acento-fundo);
  color: var(--arka-acento);
  font-weight: 600;
}
/* O "+ Adicionar" de cada linha: presente, mas sem disputar com o nome. */
#nav-sidebar .module td a.addlink {
  display: inline-block;
  font-size: 12px;
  color: var(--arka-texto-2);
  padding: 6px 8px;
  background: none;
  opacity: .8;
}
/* O ícone do Django é um "+" verde, a única cor da barra que não significa
   nada. Fica o sinal em texto, na cor da linha. */
#nav-sidebar .module td a.addlink::before { content: "+ "; }
#nav-sidebar .module tr:hover td a.addlink { opacity: 1; color: var(--arka-acento); }

/* ------------------------------------------------------------- conteúdo */

#content { padding: 24px 32px; }

#content h1,
.colM h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--arka-texto);
  margin: 0 0 18px;
}
#content h2 { color: var(--arka-texto); }

a:link, a:visited { color: var(--arka-acento); }
a:focus, a:hover { color: var(--arka-acento-escuro); }

/* Módulo: o cartão de borda fina do programa, e não a faixa azul do Django. */
.module {
  background: var(--arka-fundo);
  border: 1px solid var(--arka-borda);
  border-radius: 10px;
  overflow: hidden;
}
.module h2,
.module caption,
.inline-group h2,
fieldset .fieldset-heading {
  background: var(--arka-superficie);
  color: var(--arka-texto);
  border-bottom: 1px solid var(--arka-borda);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.module h2 a, .module caption a { color: var(--arka-texto); }

/* Formulário de cadastro */
fieldset.module { margin-bottom: 20px; }
.form-row {
  border-bottom: 1px solid var(--arka-fio);
  padding: 10px 14px;
}
.aligned label,
.aligned .flex-container > label {
  color: var(--arka-texto-2);
  font-size: 13px;
}
.aligned label.required,
label.required { color: var(--arka-texto); font-weight: 600; }
div.help, p.help, .help { color: var(--arka-texto-2); font-size: 12px; }
div.readonly { color: var(--arka-texto); }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], input[type=search], textarea, select,
.vTextField {
  border: 1px solid var(--arka-borda);
  border-radius: 7px;
  padding: 7px 10px;
  background: var(--arka-fundo);
  color: var(--arka-texto);
  font-size: 13px;
}
select { padding: 6px 8px; height: auto; }
input:focus, textarea:focus, select:focus {
  border-color: var(--arka-acento);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arka-acento) 20%, transparent);
}

/* ---------------------------------------------------------------- botões */

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  background: var(--arka-fundo);
  color: var(--arka-acento);
  border: 1px solid var(--arka-borda);
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  height: auto;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover,
.button:focus, input[type=submit]:focus, input[type=button]:focus,
a.button:hover, a.button:focus {
  background: var(--arka-superficie);
  color: var(--arka-acento-escuro);
  border-color: var(--arka-borda);
}
/* O botão principal da tela é o único cheio, como o "Primario" do programa. */
.button.default, input[type=submit].default, .submit-row input.default {
  background: var(--arka-acento);
  border-color: var(--arka-acento);
  color: #fff;
}
.button.default:hover, input[type=submit].default:hover,
.button.default:focus, input[type=submit].default:focus,
.submit-row input.default:hover, .submit-row input.default:focus {
  background: var(--arka-acento-escuro);
  border-color: var(--arka-acento-escuro);
  color: #fff;
}

.submit-row {
  background: var(--arka-superficie);
  border: 1px solid var(--arka-borda);
  border-radius: 10px;
  padding: 12px 14px;
}
.submit-row a.deletelink,
.submit-row a.deletelink:link,
.submit-row a.deletelink:visited,
a.deletelink {
  background: transparent;
  color: var(--arka-erro);
  border: 1px solid var(--arka-erro);
  border-radius: 7px;
  padding: 8px 16px;
  font-weight: 600;
  height: auto;
  line-height: 18px;
}
.submit-row a.deletelink:hover,
.submit-row a.deletelink:focus { background: var(--arka-erro-fundo); color: var(--arka-erro); }
.submit-row a.closelink,
.submit-row a.closelink:link,
.submit-row a.closelink:visited {
  background: var(--arka-fundo);
  color: var(--arka-texto);
  border: 1px solid var(--arka-borda);
  border-radius: 7px;
  padding: 8px 16px;
  height: auto;
  line-height: 18px;
}

/* Botões do alto da tela: "Adicionar produto", "Histórico". Eram pílulas
   cinzas em caixa alta. */
.object-tools a,
.object-tools a:link,
.object-tools a:visited {
  background-color: var(--arka-fundo);
  color: var(--arka-texto);
  border: 1px solid var(--arka-borda);
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.object-tools a:hover,
.object-tools a:focus {
  background-color: var(--arka-superficie);
  color: var(--arka-texto);
}
.object-tools a.addlink,
.object-tools a.addlink:link,
.object-tools a.addlink:visited {
  background-color: var(--arka-acento);
  border-color: var(--arka-acento);
  color: #fff;
  padding-right: 30px;
  background-position: right 10px center;
}
.object-tools a.addlink:hover,
.object-tools a.addlink:focus {
  background-color: var(--arka-acento-escuro);
  border-color: var(--arka-acento-escuro);
  color: #fff;
}

/* -------------------------------------------------------------- listagem */

#changelist .changelist-form-container { gap: 20px; }

#changelist #toolbar {
  background: var(--arka-superficie);
  border: 1px solid var(--arka-borda);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
#changelist #toolbar form input[type="text"] {
  border-radius: 7px;
  padding: 7px 10px;
  min-width: 280px;
}
/* "Buscar" e "Ir": o Django dá a eles um degradê cinza próprio, sem
   variável. Ficam como os outros botões secundários. */
#changelist #toolbar form input[type="submit"],
#changelist .actions .button {
  background: var(--arka-fundo);
  color: var(--arka-acento);
  border: 1px solid var(--arka-borda);
  border-radius: 7px;
  box-shadow: none;
  height: auto;
  line-height: 18px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}
#changelist #toolbar form input[type="submit"]:hover,
#changelist .actions .button:hover {
  background: var(--arka-superficie);
  color: var(--arka-acento-escuro);
}
#changelist .actions {
  background: transparent;
  border: 0;
  padding: 6px 2px 12px;
  color: var(--arka-texto-2);
  font-size: 13px;
}
#changelist .actions.selected { background: var(--arka-acento-fundo); border-radius: 8px; }

.results {
  border: 1px solid var(--arka-borda);
  border-radius: 10px;
  overflow: auto;
}
#changelist table { border: 0; }
thead th,
tfoot td,
#changelist table thead th {
  background: var(--arka-superficie);
  color: var(--arka-texto-2);
  border-top: 0;
  border-bottom: 1px solid var(--arka-borda);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
#changelist table thead th .text a,
#changelist table thead th .text span {
  padding: 10px 12px;
  color: var(--arka-texto-2);
}
table thead th.sorted { background: var(--arka-realce); }
#changelist table thead th.sorted .text a { color: var(--arka-texto); }
td, th {
  border-bottom: 1px solid var(--arka-fio);
  color: var(--arka-texto);
}
#result_list tbody td,
#result_list tbody th { padding: 10px 12px; font-size: 13px; vertical-align: middle; }
#result_list tbody tr:hover { background: var(--arka-superficie); }
#result_list tbody tr.selected { background: var(--arka-acento-fundo); }
#result_list tbody tr:last-child td,
#result_list tbody tr:last-child th { border-bottom: 0; }

p.paginator {
  border-top: 0;
  color: var(--arka-texto-2);
  font-size: 13px;
  padding-top: 12px;
}
.paginator a:link, .paginator a:visited {
  background: var(--arka-fundo);
  color: var(--arka-acento);
  border: 1px solid var(--arka-borda);
  border-radius: 6px;
  padding: 3px 9px;
}
.paginator a:hover, .paginator a:focus { background: var(--arka-superficie); }
.paginator .this-page {
  background: var(--arka-acento);
  color: #fff;
  border-radius: 6px;
  padding: 3px 9px;
}

/* Painel de filtros, à direita das listagens */
#changelist-filter {
  background: var(--arka-fundo);
  border: 1px solid var(--arka-borda);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}
#changelist-filter h2 {
  background: var(--arka-superficie);
  color: var(--arka-texto);
  border-bottom: 1px solid var(--arka-borda);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 14px;
}
#changelist-filter h3,
#changelist-filter summary {
  color: var(--arka-texto);
  font-size: 12px;
  font-weight: 600;
}
#changelist-filter details summary > * { color: var(--arka-texto); }
#changelist-filter li a,
#changelist-filter li a:link,
#changelist-filter li a:visited { color: var(--arka-texto-2); }
#changelist-filter li a:hover,
#changelist-filter li a:focus { color: var(--arka-acento); }
#changelist-filter li.selected {
  border-left: 3px solid var(--arka-acento);
  padding-left: 8px;
  margin-left: -11px;
}
#changelist-filter li.selected a,
#changelist-filter li.selected a:link,
#changelist-filter li.selected a:visited { color: var(--arka-acento); font-weight: 600; }
#changelist-filter #changelist-filter-extra-actions h3 a { color: var(--arka-acento); }

/* ------------------------------------------------------------- mensagens */

ul.messagelist { padding: 0 32px; margin-top: 18px; }
ul.messagelist li {
  border-radius: 8px;
  border-left: 3px solid var(--arka-sucesso);
  color: var(--arka-texto);
  font-size: 13px;
  margin-bottom: 8px;
}
ul.messagelist li.warning { border-left-color: var(--arka-atencao); }
ul.messagelist li.error { border-left-color: var(--arka-erro); }
ul.messagelist li.info,
ul.messagelist li.debug { border-left-color: var(--arka-acento); }

.errornote {
  background-color: var(--arka-erro-fundo);
  border: 0;
  border-left: 3px solid var(--arka-erro);
  border-radius: 8px;
  color: var(--arka-erro);
  font-size: 13px;
}
ul.errorlist li { color: var(--arka-erro); font-size: 12px; }

/* Ações recentes, na página inicial */
#content-related .module {
  background: var(--arka-fundo);
}
#content-related .module h2 {
  background: var(--arka-superficie);
  color: var(--arka-texto);
}

/* Cartões da página inicial (admin/painel_arka.html) */
body .arka-cartao { border-color: var(--arka-borda); }
body .arka-cartao[href]:hover {
  border-color: var(--arka-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arka-acento) 12%, transparent);
}
body .arka-lista { border-color: var(--arka-borda); }

/* --------------------------------------------------------- tela de entrada */

body.login {
  background: var(--arka-superficie);
}
.login #container {
  width: 400px;
  max-width: calc(100% - 32px);
  margin: 72px auto 40px;
  border: 1px solid var(--arka-borda);
  border-radius: 14px;
  box-shadow: var(--arka-sombra);
  background: var(--arka-fundo);
}
.login #header {
  background: transparent;
  border-bottom: 0;
  padding: 34px 32px 6px;
  justify-content: center;
}
.login #header { position: relative; }
.login #branding {
  width: 100%;
  justify-content: center;
}
.login #site-name .arka-marca,
.login #site-name .arka-marca:link,
.login #site-name .arka-marca:visited {
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.login .arka-simbolo { width: 92px; height: 92px; margin-bottom: 4px; }
.login .arka-nome { font-size: 26px; }
.login .arka-contexto {
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
  font-size: 13px;
}
.login #branding .theme-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
}
.login #content { padding: 18px 32px 30px; }
.login .form-row {
  border: 0;
  padding: 6px 0;
}
.login .form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--arka-texto);
  line-height: 1.8em;
}
.login .form-row #id_username,
.login .form-row #id_password { padding: 9px 12px; font-size: 14px; }
.login .submit-row {
  background: transparent;
  border: 0;
  padding: 16px 0 0;
}
.login .submit-row input {
  width: 100%;
  padding: 10px 16px;
  background: var(--arka-acento);
  border-color: var(--arka-acento);
  color: #fff;
  font-size: 14px;
}
.login .submit-row input:hover,
.login .submit-row input:focus {
  background: var(--arka-acento-escuro);
  border-color: var(--arka-acento-escuro);
  color: #fff;
}
.login .errornote { margin-top: 4px; }

/* ------------------------------------------------------------ tela menor */

@media (max-width: 1024px) {
  #header { padding: 10px 16px; }
  div.breadcrumbs { padding: 10px 16px; }
  #content { padding: 18px 16px; }
  ul.messagelist { padding: 0 16px; }
}
@media (max-width: 767px) {
  .arka-contexto { display: none; }
  .login .arka-contexto { display: block; }
}