/* Skin Criarenet sobre o Larry (roundcube/larry).
   Só o que diverge: tokens da marca, cantos retos, Inter e logo.
   Na 1.7 a herança de skin resolve asset corretamente, então este
   arquivo importa o CSS do pai em vez de duplicá-lo. */
@import url('../larry/styles.min.css');

:root {
	--cn-primary: #113058;        /* navy da marca */
	--cn-primary-dark: #0E172D;   /* navy escuro (rodapé do site) */
	--cn-primary-alt: #10315A;    /* variação do navy */
	--cn-primary-light: #1d4a7e;  /* derivado p/ hover e topo de gradiente */
	--cn-accent: #F58322;         /* laranja da marca */
	--cn-accent-strong: #FE6101;  /* laranja forte (ação) */
	--cn-text: #24374f;           /* texto sobre fundo claro azulado */
	--cn-text-muted: #69788B;     /* texto secundário */
	--cn-text-soft: #8B9AAD;      /* texto terciário: desabilitado, metadado */
	--cn-text-on-dark: #b8c6d8;   /* texto secundário sobre o navy */
	--cn-border: #b9c9dc;         /* bordas de tabela/painel */
	--cn-bg-light: #E7ECEF;       /* fundo neutro da página */
	--cn-bg-blue: #D9E6F3;        /* fundo azulado de painel/lista */
	--cn-bg-blue-soft: #EAF0F6;   /* fundo azulado suave */
	--cn-bg-blue-strong: #C6D8EC; /* item selecionado em lista clara */
	/* mesmos valores em componentes rgb, para os rgba() de foco/realce */
	--cn-primary-rgb: 17, 48, 88;
	--cn-accent-rgb: 245, 131, 34;
}

/* Inter self-hosted, mesma fonte do painel-dotnet e do site. Sem CDN. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/inter-latin-400-normal.woff2) format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/inter-latin-600-normal.woff2) format('woff2');
}

/* ===========================================================================
   Tema Criarenet — chrome do webmail
   Sobrescreve o que o Larry entrega como textura/gradiente cinza. Todas as
   cores saem dos tokens --cn-* do bloco :root no topo deste arquivo.
   =========================================================================== */

/* barra fina do topo (usuário / sair / suporte) */
#topline {
	background: var(--cn-primary-dark);
	background-image: none;
	border-bottom: 1px solid var(--cn-primary-light);
	color: var(--cn-text-on-dark);
}

#topline a,
#topline .topleft a {
	color: var(--cn-text-on-dark);
}

#topline a:hover {
	color: var(--cn-accent);
}

#topline span.username {
	color: #fff;
}

/* barra de navegação com o logo e as tarefas */
/* navy chapado, sem gradiente */
#topnav {
	background: var(--cn-primary);
	background-image: none;
}

#taskbar a {
	color: var(--cn-text-on-dark);
}

#taskbar a:hover {
	color: #fff;
}

#taskbar a.button-selected {
	color: var(--cn-accent);
	background-color: var(--cn-primary-dark);
}

#taskbar a span.button-inner,
#topline a.button-logout,
#taskbar .button-logout {
	text-shadow: none;
}

/* cabeçalho de painel: navy com texto branco (o Larry usava azul-claro
   com texto escuro; o remap deixaria texto navy sobre fundo navy) */
.uibox .boxtitle,
.uibox .listing thead td {
	background: var(--cn-primary);
	color: #fff;
	text-shadow: none;
	border-bottom: 1px solid var(--cn-primary-dark);
}

.boxtitle {
	text-shadow: none;
}

/* linha selecionada em lista clara: navy sólido, sem gradiente ciano */
.records-table tr.selected td {
	background: var(--cn-primary);
	background-image: none;
}

/* caixa de login: navy da marca com faixa laranja no topo, mesma lógica do
   header do painel-dotnet. O logo é a versão branca. */
#login-form .box-inner {
	background: var(--cn-primary);
	background-image: none;
	border: 1px solid var(--cn-primary-dark);
	border-top: 4px solid var(--cn-accent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* mantém a sombra elíptica do Larry sob a caixa (images/login_shadow.png):
   dá a sensação de caixa flutuando, que se perdeu com os cantos retos */
#login-form .box-bottom {
	padding-top: 14px;
}

#login-form td.title {
	color: #fff;
	text-shadow: none;
}

#login-form input[type="text"],
#login-form input[type="password"] {
	border-color: var(--cn-border);
}

#login-form input.button {
	background: var(--cn-accent);
	background-image: none;
	border: 1px solid var(--cn-accent-strong);
	color: #fff;
	text-shadow: none;
}

#login-form input.button:hover,
#login-form input.button:focus {
	background: var(--cn-accent-strong);
	border-color: var(--cn-accent-strong);
}

#bottomline,
#bottomline a.support-link {
	color: var(--cn-text-muted);
}

#bottomline a.support-link:hover {
	color: var(--cn-accent-strong);
}

/* foco de campo no navy da marca, como no painel */
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--cn-primary);
	box-shadow: 0 0 0 2px rgba(var(--cn-primary-rgb), .22);
}

/* cabeçalho das listas: azul de apoio com o texto no navy, para dar
   definição sem pesar a tela */
.records-table thead td {
	background: var(--cn-bg-blue-strong);
	background-image: none;
	color: var(--cn-primary);
	border-left: 1px solid var(--cn-border);
	border-bottom: 1px solid var(--cn-border);
}

.records-table thead td a,
.records-table thead td span {
	color: var(--cn-primary);
}

/* lista de pastas e demais listas de apoio */
ul.listing li,
.listbox table.listing {
	background-color: var(--cn-bg-blue-soft);
}

.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
.listbox .tablink.selected > a,
.listing tbody tr.unfocused td,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a {
	color: var(--cn-primary);
	background-color: var(--cn-bg-blue-strong);
}

.listbox .listitem a,
.listbox .tablink a,
.listing tbody td,
.listing li a {
	text-shadow: none;
}

/* rodapé das caixas de lista */
.listbox .boxfooter {
	background: var(--cn-bg-blue);
	box-shadow: none;
	border-top: 1px solid var(--cn-border);
}

.boxfooter .listbutton {
	background: var(--cn-bg-blue-strong);
	border-right: 1px solid var(--cn-bg-blue-soft);
}

/* O logo usado no chrome é a versão branca (knockout) do logo da Criarenet,
   gerada de roundcube_logo_navy.png: o original é navy e sumiria sobre o
   navy da barra. Também limita a altura — o arquivo é 165x55 e estourava a
   barra de 46px. */
#toplogo {
	height: 34px;
	width: auto;
	padding-top: 6px;
}

/* Botões de formulário e de diálogo: o Larry deixa todos em degradê cinza.
   Secundário fica navy chapado, ação principal fica no laranja da marca —
   mesma lógica dos botões do painel-dotnet. */
.formbuttons input.button {
	color: #fff;
	text-shadow: none;
	border: 1px solid var(--cn-primary-light);
	background: var(--cn-primary);
	background-image: none;
	box-shadow: none;
}

.formbuttons input.button:hover,
.formbuttons input.button:focus {
	color: #fff;
	border-color: var(--cn-primary-light);
	background: var(--cn-primary-light);
	box-shadow: 0 0 0 2px rgba(var(--cn-primary-rgb), .22);
}

.formbuttons input.button:active {
	background: var(--cn-primary-dark);
	background-image: none;
}

input.button.mainaction {
	color: #fff;
	text-shadow: none;
	border: 1px solid var(--cn-accent-strong);
	background: var(--cn-accent);
	background-image: none;
	box-shadow: none;
}

input.button.mainaction:hover,
input.button.mainaction:focus {
	color: #fff;
	border-color: var(--cn-accent-strong);
	background: var(--cn-accent-strong);
	background-image: none;
	box-shadow: 0 0 0 2px rgba(var(--cn-accent-rgb), .30);
}

input.button.mainaction:active {
	background: var(--cn-accent-strong);
	background-image: none;
}

/* ===========================================================================
   Cantos retos e superfícies chapadas
   Gerado a partir do CSS do Larry: cada seletor abaixo é um que o Larry
   arredonda ou preenche com gradiente. Sobrescrever por seletor (em vez de
   um `* { border-radius: 0 !important }`) mantém a especificidade natural e
   não vaza para lugar nenhum.
   =========================================================================== */

/* --- sem cantos arredondados (41 seletores do Larry) --- */
input[type="text"], input[type="email"], input[type="password"], textarea,
button, input.button,
.formbuttons button, .formbuttons input.button, .oauthlogin .button,
a.button, .buttongroup,
.buttongroup a.button.first, .buttongroup a.button:first-child,
.buttongroup a.button.last, .buttongroup a.button:last-child,
#message.statusbar,
#messagestack div,
.uibox,
.uibox .boxfooter,
.uibox .boxfooter .listbutton:first-child,
#login-form .box-inner,
.dropbutton .dropbuttontip:focus, .toolbar a.button:focus,
a.menuselector,
a.menuselector .handle,
.popupmenu, #rcmKSearchpane,
.popupmenu.dropdown,
#rcmKSearchpane,
#rcmdraglayer,
.attachmentslist li a:focus, .attachmentslist li a.drop:focus,
#mailview-bottom,
#composeview-right #mailview-bottom,
#messagelistfooter,
.folderlist li.mailbox .unreadcount,
.messagelist thead th:first-child,
#messagecontframe,
#mailview-right #messageheader,
.moreheaderstoggle,
#all-headers,
#messageheader.previewheader #contactphoto,
#messageheader.previewheader #contactphoto img,
#messageheader #contactphoto,
#messageheader #contactphoto img,
#messagecontent .rightcol, #messagepreview .rightcol,
#composeheaders,
#composebodycontainer,
#composebody,
.widescreen #messagelistheader,
#contact-frame,
#preferences-frame,
img.skinthumbnail {
	border-radius: 0;
}

/* --- chapado: remove o gradiente e deixa a cor sólida que o Larry já declara
       na linha anterior de cada regra (6 seletores) --- */
button.mainaction:active, input.button.mainaction:active,
.buttongroup a.button:focus, .buttongroup a.button.selected:focus,
#message.statusbar,
#messagestack div,
#login-form .box-inner,
a.menuselector:active {
	background-image: none;
}


/* ===========================================================================
   Ajustes para o Larry mantido (github.com/roundcube/larry)
   Ele mudou em relação ao Larry de 2013: os botões viraram <button> com
   classe .mainaction (não mais input.button), e a sombra elíptica do login
   (images/login_shadow.png) foi removida do pacote.
   =========================================================================== */

/* corpo: Inter e fundo chapado da marca (o Larry usa uma textura cinza) */
body {
	font-family: 'Inter', "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: var(--cn-bg-light);
	background-image: none;
}

/* botões: secundário navy, ação principal no laranja da marca */
.formbuttons button,
.formbuttons input.button,
.oauthlogin .button {
	color: #fff;
	border: 1px solid var(--cn-primary-light);
	background: var(--cn-primary);
	background-image: none;
	box-shadow: none;
	text-shadow: none;
}

.formbuttons button:hover,
.formbuttons button:focus,
.formbuttons input.button:hover,
.formbuttons input.button:focus {
	color: #fff;
	border-color: var(--cn-primary-light);
	background: var(--cn-primary-light);
	box-shadow: 0 0 0 2px rgba(var(--cn-primary-rgb), .22);
}

button.mainaction,
input.button.mainaction {
	color: #fff;
	border: 1px solid var(--cn-accent-strong);
	background: var(--cn-accent);
	background-image: none;
	box-shadow: none;
	text-shadow: none;
}

button.mainaction:hover,
button.mainaction:focus,
input.button.mainaction:hover,
input.button.mainaction:focus {
	color: #fff;
	border-color: var(--cn-accent-strong);
	background: var(--cn-accent-strong);
	background-image: none;
	box-shadow: 0 0 0 2px rgba(var(--cn-accent-rgb), .30);
}

button.mainaction:active,
input.button.mainaction:active {
	background: var(--cn-accent-strong);
	background-image: none;
}

/* O botão do login tem regra própria com id (`#login-form .button`), que ganha
   de `button.mainaction` por especificidade — precisa de seletor com id também */
#login-form .button,
#login-form .button.mainaction {
	color: #fff;
	border-color: var(--cn-accent-strong);
	background-color: var(--cn-accent);
	background-image: none;
	text-shadow: none;
}

#login-form .button:hover,
#login-form .button:focus {
	color: #fff;
	border-color: var(--cn-accent-strong);
	background-color: var(--cn-accent-strong);
}

#login-form .button:active {
	color: #fff;
	background-color: var(--cn-accent-strong);
}

/* Sombra sob a caixa de login: é a elipse larga que o Larry de 2013 desenhava
   e que o Larry mantido removeu do pacote. A imagem original veio junto no
   skin (images/login_shadow.png) — box-shadow não reproduz esse espalhamento
   horizontal, que passa da largura da caixa. */
#login-form .box-bottom {
	background: url(images/login_shadow.png) top center no-repeat;
	margin-top: -3px;
	padding-top: 10px;
}
/* Remapeamento da paleta azul/ciana do Larry para os tokens da Criarenet.
   Gerado a partir do styles.css do proprio Larry: cada seletor abaixo usa uma cor
   da familia azul dele, trocada pelo token equivalente. Os !important sao
   preservados porque o Larry usa alguns (ex.: linha selecionada da lista). */

a {
	color: var(--cn-primary-light);
}

a:visited {
	color: var(--cn-primary);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, button:focus, input.button:focus, textarea:focus {
	border-color: var(--cn-primary);
}

input[type="text"]:required, input[type="email"]:required, input[type="password"]:required {
	border-color: var(--cn-primary);
}

.formbuttons button, .formbuttons input.button, .oauthlogin .button {
	border-color: var(--cn-border);
}

.formbuttons button:hover, .formbuttons button:focus, .formbuttons input.button:hover, .formbuttons input.button:focus, input.button.mainaction:hover, input.button.mainaction:focus {
	border-color: var(--cn-border);
}

button:focus, a.button:focus, input.button:focus {
	border-color: var(--cn-primary);
}

.listbox {
	background-color: var(--cn-bg-blue);
}

.boxtitle, .uibox .listing thead th, .uibox .listing thead td {
	border-bottom: var(--cn-border);
}

.uibox .boxtitle, .uibox .listing thead th, .uibox .listing thead td {
	background-color: var(--cn-bg-blue-strong);
	color: var(--cn-primary);
}

.listbox .listitem, .listbox .tablink, .listing tbody td, .listing li {
	border-bottom: var(--cn-border);
}

.listbox .listitem a, .listbox .listitem span, .listbox .tablink a, .listing tbody td, .listing li a {
	color: var(--cn-text);
}

.listing tbody td a {
	color: var(--cn-text);
}

.listing.focus tbody tr.focused > td:first-child {
	border-left: var(--cn-border);
}

.listbox .listitem.selected, .listbox .tablink.selected, .listbox .listitem.selected > a, .listbox .tablink.selected > a, .listing tbody tr.selected td, .listing li.selected, .listing li.selected > a {
	color: var(--cn-primary);
	background-color: var(--cn-bg-blue-strong);
}

ul.listing li {
	background-color: var(--cn-bg-blue);
}

ul.listing li ul {
	border-top: var(--cn-border);
}

.listbox table.listing {
	background-color: var(--cn-bg-blue);
}

.listbox .boxfooter {
	border-top: var(--cn-border);
	background-color: var(--cn-bg-blue);
}

.boxfooter .listbutton {
	background-color: var(--cn-bg-blue-strong);
}

.boxfooter .countdisplay {
	color: var(--cn-text-muted);
}

table.records-table {
	border: var(--cn-border);
}

.records-table thead th, .records-table thead td {
	color: var(--cn-text-muted);
	background-color: var(--cn-bg-blue);
	border-left: var(--cn-border);
}

.records-table thead th a, .records-table thead td a, .records-table thead th span, .records-table thead td span {
	color: var(--cn-text-muted);
}

.records-table tbody td {
	border-left: var(--cn-border);
}

.records-table.focus tbody tr.focused > td:first-child {
	border-left: var(--cn-primary);
}

.records-table tr.selected td {
	background-color: var(--cn-primary-light);
}

.records-table.focus tr.selected td {
	background-color: var(--cn-primary) !important;
}

.listsearchbox {
	background-color: var(--cn-bg-blue-strong);
}

a.menuselector:focus, a.menuselector.focus, a.iconbutton:focus, .pagenav a.button:focus {
	border-color: var(--cn-primary);
}

.googie_list td.googie_list_onhover, ul.toolbarmenu li a.active:hover, ul.toolbarmenu li a.active:focus, #rcmKSearchpane ul li.selected, #pagejump-selector ul li.selected, select.decorated option:hover, select.decorated option[selected='selected'] {
	background-color: var(--cn-primary);
}

.folderlist li.mailbox ul {
	border-top: var(--cn-border);
}

/* Linha selecionada da lista: o Larry usa `!important` em
   `.records-table.focus tr.selected td` (styles.min.css), então o tema só
   ganha repetindo o !important. Sem foco fica o navy claro, com foco o navy
   cheio — mesma semântica do original, nas cores da marca. */
.records-table tr.selected td {
	background-color: var(--cn-primary-light) !important;
	color: #fff !important;
}

.records-table.focus tr.selected td {
	background-color: var(--cn-primary) !important;
	color: #fff !important;
}

/* Cinzas de chrome nos tons da Criarenet.
   Os neutros do Larry (#666/#999/#eee/#f9f9f9) viram os cinzas AZULADOS da
   marca (--cn-text-muted #69788B, --cn-text-soft #8B9AAD, --cn-bg-light
   #E7ECEF). O #333 do texto principal fica como está: tanto o painel quanto
   o site usam neutro escuro para corpo de texto. Gerado do styles.css do Larry. */

button, input.button {
	background-color: var(--cn-bg-blue-soft);
}

label.disabled, button.disabled, a.button.disabled {
	color: var(--cn-text-soft);
}

a.button.pressed, a.button:active, button:active, input.button:active {
	background-color: var(--cn-bg-blue-soft);
}

#message div.loading, #message div.uploading, #message div.warning, #message div.error, #message div.notice, #message div.confirmation, #message-objects div.notice {
	color: var(--cn-text-muted);
}

.contentbox .boxtitle, body.iframe .boxtitle {
	background-color: var(--cn-bg-light);
}

.propform fieldset fieldset legend {
	color: var(--cn-text-muted);
}

.propform a.disabled {
	color: var(--cn-text-soft);
}

ul.proplist li, table.propform td {
	background-color: var(--cn-bg-light);
}

#login-form .button {
	background-color: var(--cn-bg-blue-soft);
}

.searchbox input, #quicksearchbar input {
	background-color: var(--cn-bg-light);
}

.toolbar a.button {
	color: var(--cn-text-muted);
}

a.menuselector {
	background-color: var(--cn-bg-light);
}

.googie_list td span, ul.toolbarmenu li a {
	color: var(--cn-text-muted);
}

.hint {
	color: var(--cn-text-soft);
}

.ui-dialog .propform .ui-tabs-panel {
	background-color: var(--cn-bg-light);
}

/* Ícones reagem ao hover como no painel-dotnet: mesma curva (.18s ease) e a
   mesma drop-shadow no navy da marca. O painel dá scale(1.15) porque lá o
   ícone é um <img> solto; aqui o ícone é sprite de fundo do próprio <a>, com
   o rótulo dentro da mesma caixa — escalar borraria o texto. Então o gesto é
   uma elevação de 1px com a sombra, que a drop-shadow desenha pelo alfa do
   sprite (contorna o ícone, não a caixa). Quem pediu menos movimento não vê
   nada disso. */
#messagetoolbar a.button,
#mailtoolbar a.button,
.toolbar a.button,
#taskbar a.button-inner,
#taskbar span.button-inner {
	transition: transform .18s ease, filter .18s ease;
}

#messagetoolbar a.button:hover,
#mailtoolbar a.button:hover,
.toolbar a.button:hover,
#taskbar a:hover .button-inner,
#taskbar a:hover span.button-inner {
	transform: translateY(-1px);
	filter: drop-shadow(0 2px 3px rgba(var(--cn-primary-rgb), .35));
}

/* Onde o ícone é imagem de verdade, o gesto é o mesmo do painel. */
#contacts-table td.contact img,
.contactphoto img,
.attachmentslist li a img,
.messageheaderbox img.contactphoto {
	transition: transform .18s ease, filter .18s ease;
}

#contacts-table td.contact a:hover img,
.attachmentslist li a:hover img {
	transform: scale(1.15);
	filter: drop-shadow(0 2px 3px rgba(var(--cn-primary-rgb), .35));
}

@media (prefers-reduced-motion: reduce) {
	#messagetoolbar a.button,
	#mailtoolbar a.button,
	.toolbar a.button,
	#taskbar a.button-inner,
	#taskbar span.button-inner,
	#contacts-table td.contact img,
	.attachmentslist li a img { transition: none; }

	#messagetoolbar a.button:hover,
	#mailtoolbar a.button:hover,
	.toolbar a.button:hover,
	#taskbar a:hover .button-inner,
	#taskbar a:hover span.button-inner,
	#contacts-table td.contact a:hover img,
	.attachmentslist li a:hover img { transform: none; filter: none; }
}

/* Bordas no cinza azulado da marca (--cn-border #b9c9dc).
   Os neutros do Larry (#ccc/#ddd/#dfdfdf/#b2b8bf/#ababab/#c6c6c6) eram a
   última cor fora da paleta na primeira coluna. Ficam de fora o branco, o
   #b00 de erro, o #ffdf0e de aviso e os escuros dos popups, que são escuros
   de propósito. Gerado do styles.css do Larry. */

a.button, .buttongroup {
	border-color: var(--cn-border);
}

a.button.disabled, input.button.disabled, input.button[disabled], button.disabled, button[disabled], button.disabled:hover, button[disabled]:hover, a.button.disabled:hover, input.button.disabled:hover, input.button[disabled]:hover {
	border-color: var(--cn-border);
}

#message.statusbar {
	border-top-color: var(--cn-border);
}

.uibox {
	border-color: var(--cn-border);
}

.records-table tbody td {
	border-bottom-color: var(--cn-border);
}

.searchbox input, #quicksearchbar input {
	border-color: var(--cn-border);
}

a.menuselector {
	border-color: var(--cn-border);
}

/* Dialogs no padrão do painel-dotnet (.pnlDialog / .pnlDialogHead /
   .pnlDialogFoot em wwwroot/skin/legado.css): head navy, corpo branco, borda
   de 2px no --cn-primary-light e canto reto.

   O tema de fábrica do jQuery UI vinha inteiro por herança do Larry
   (skins/larry/plugins/jqueryui/jquery-ui.css) e nunca tinha sido tocado:
   raio de 6px na caixa, 5px no head, 3px nos botões, cinzas neutros do
   widget e sombra cinza. Aquele arquivo usa !important no raio, então aqui
   também precisa.

   O head navy exige duas correções que o painel não tem: o Larry colore o
   texto do título por variante (aviso/erro/confirmação) em tons escuros,
   ilegíveis sobre navy — passam a branco, e a semântica fica no ícone do
   sprite; e o X de fechar é um glifo escuro de sprite, invertido para
   branco. */
.ui-dialog.ui-widget {
	border-radius: 0 !important;
	border: 2px solid var(--cn-primary-light) !important;
	background: #fff;
	padding: 0 !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35) !important;
}

.ui-dialog.ui-widget .ui-dialog-titlebar {
	border-radius: 0 !important;
	border: 0;
	background: var(--cn-primary);
	background-image: none;
	color: #fff;
	padding: 8px 12px;
	font-weight: bold;
}

.ui-dialog.ui-widget .ui-dialog-title,
.ui-dialog.error .ui-dialog-title,
.ui-dialog.warning .ui-dialog-title,
.ui-dialog.confirmation .ui-dialog-title {
	color: #fff;
	font-size: 1.1em;
}

/* O X de fechar fica como o Larry entrega: e um sprite circular proprio,
   desenhado para pousar sobre qualquer fundo. Inverter so o destaca do
   dialog — e por ser imagem, o canto reto nao se aplica a ele. */
.ui-dialog.ui-widget .ui-dialog-titlebar-close {
	border-radius: 0 !important;
}

.ui-dialog.ui-widget .ui-dialog-content {
	padding: 14px 12px;
	color: var(--cn-text);
}

.ui-dialog.ui-widget .ui-dialog-buttonpane {
	border-top: 1px solid var(--cn-border);
	padding: 8px 12px 12px;
	background: #fff;
}

.ui-dialog.ui-widget .ui-button {
	border-radius: 0 !important;
	border: 1px solid var(--cn-border);
	background: var(--cn-bg-light);
	background-image: none;
	color: var(--cn-primary);
	min-width: 80px;
}

.ui-dialog.ui-widget .ui-button:hover,
.ui-dialog.ui-widget .ui-button:focus {
	background: var(--cn-bg-blue);
	border-color: var(--cn-primary-light);
	color: var(--cn-primary);
}

.ui-dialog.ui-widget .ui-button.mainaction {
	background: var(--cn-accent);
	border-color: var(--cn-accent-strong);
	color: #fff;
}

.ui-dialog.ui-widget .ui-button.mainaction:hover {
	background: var(--cn-accent-strong);
	border-color: var(--cn-accent-strong);
	color: #fff;
}

.ui-widget-overlay.ui-widget-overlay {
	background: rgba(0, 0, 0, .45);
	background-image: none;
	opacity: 1;
}

/* Canto reto no resto da família jQuery UI — autocomplete de destinatário,
   calendário, abas e o seletor de pasta usam os mesmos .ui-corner-*. */
.ui-widget,
.ui-widget-content,
.ui-widget-header,
.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right,
.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-corner-br,
.ui-menu,
.ui-menu-item,
.ui-menu-item-wrapper,
.ui-autocomplete,
.ui-datepicker,
.ui-datepicker td a,
.ui-datepicker td span,
.ui-datepicker-header,
.ui-tabs,
.ui-tabs-nav li,
.ui-state-default,
.ui-state-hover,
.ui-state-active,
.ui-state-focus,
.ui-slider,
.ui-slider-handle,
.ui-progressbar,
.ui-progressbar-value,
.ui-selectmenu-button,
.ui-tooltip {
	border-radius: 0 !important;
}

/* Toast (#messagestack) chapado no navy da marca.

   BUG que isto corrige: o Larry pinta o toast com um linear-gradient de cinza
   escuro, e a passada de "zero gradiente" do skin tirou o gradiente sem pôr
   nada no lugar — o toast ficou com fundo TRANSPARENTE. Só que as cores de
   texto continuaram as que o Larry desenhou para caixa escura, então
   "Mensagem informativa" saía em #ebebeb sobre o fundo branco da página:
   ilegível.

   A saída é devolver a caixa escura, agora chapada no --cn-primary-dark (o
   mesmo navy da barra de topo). Assim o sprite messages_dark.png e as cores
   semânticas do texto — que foram desenhados para fundo escuro — voltam a
   funcionar como previsto, sem gradiente e sem canto arredondado. */
#messagestack div {
	background: var(--cn-primary-dark);
	background-image: none;
	border: 1px solid var(--cn-primary-light);
	border-radius: 0;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* O informativo é o único cujo tom do Larry (#ebebeb) some contra o navy;
   os demais (erro, aviso, confirmação) já contrastam. */
#messagestack div.notice,
#messagestack div.loading,
#messagestack div.uploading {
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Popups (menu da engrenagem de pastas, menu "Mais" da mensagem, autocomplete).
   
   Uma passada anterior tirou o arredondamento destes e remapeou o hover, mas
   deixou o FUNDO no #444 do Larry — e aí o texto, que já tinha virado o cinza
   azulado da marca, ficou lavado por cima de cinza neutro. Item desabilitado
   (#666 do Larry sobre #444) era o pior caso: quase ilegível.

   Aqui o popup passa a ser o navy escuro da marca, o mesmo do topo da tela, e
   os três estados voltam a se distinguir: item ativo em branco, desabilitado no
   cinza azulado claro, e o que está sob o cursor no navy claro.
   --------------------------------------------------------------------------- */

.popupmenu,
#rcmKSearchpane {
	background: var(--cn-primary-dark);
	box-shadow: 0 2px 6px 0 rgba(14, 23, 45, .45);
}

/* Separadores: o #5a5a5a do Larry desaparece no navy. O navy claro dá a linha
   sem virar uma faixa. */
.popupmenu > .buttons,
ul.toolbarmenu li,
#rcmKSearchpane ul li {
	border-top-color: var(--cn-primary-light);
}

/* Item DESABILITADO — no Larry é o <a> sem a classe .active. É o estado do
   print: "Imprimir a mensagem", "Mover para..." com nenhuma mensagem
   selecionada. Cinza azulado claro em vez de #666, que sumia. */
.googie_list td span,
ul.toolbarmenu li a {
	color: var(--cn-text-soft);
}

/* Item ATIVO, clicável. Branco, como no Larry. */
ul.toolbarmenu li a.active {
	color: #fff;
}

/* Sob o cursor: navy CLARO. O navy normal (--cn-primary) mal se separava do
   fundo escuro novo. */
.googie_list td.googie_list_onhover,
ul.toolbarmenu li a.active:hover,
ul.toolbarmenu li a.active:focus,
#rcmKSearchpane ul li.selected,
#pagejump-selector ul li.selected {
	background-color: var(--cn-primary-light);
}

/* Rótulo de grupo dentro do menu (o #bbb do Larry). */
ul.toolbarmenu li.separator label {
	color: var(--cn-text-soft);
}

/* Item desabilitado de menu ICONIZADO — o "Mais" da mensagem sem nada
   selecionado.
   
   Aqui o texto NÃO é pintado pela cor do <a>: o Larry envolve rótulo e ícone no
   mesmo `span.icon` e apaga os dois juntos com `opacity: .2`. Sobre o #444
   antigo isso ainda deixava um cinza legível; sobre o navy escuro o texto
   virava #3B4254 em cima de #0E172D — 1.75:1, some da tela. O menu parecia
   quebrado, não desabilitado.

   Aqui a cor do <a> NAO e a nossa: o Larry tem `ul.toolbarmenu li a.icon
   { color: #eee }`, especificidade (0,2,3) contra os (0,1,3) da regra de cima —
   ele ganha, e num menu iconizado a opacidade e o unico sinal de desligado que
   sobra. Medido no navegador: .55 sobre o navy da 5.15:1 no rotulo, e o item
   ativo fica em ~17:1. Tentar trocar isso por cor exigiria bater no `a.icon`
   tambem, e ai o icone voltaria a 100% — o que nao parece desligado. */
ul.toolbarmenu li span.icon,
#rcmKSearchpane ul li i.icon {
	opacity: .55;
}

/* Marca d'água da mesma ilustração no `messageerror.html`, que é onde a classe
   `.watermark` do Larry é de fato usada.

   ATENÇÃO: isto NÃO pinta o painel de leitura vazio. Aquele é um <iframe> com
   `src` vindo de `blankpage_url`, e a página que ele carrega traz o próprio
   <style> inline, fora do alcance de qualquer folha do skin — quem resolve lá é
   o `skins/criarenet/watermark.html`. A primeira versão desta regra só existia
   aqui e não mudou nada na tela. */
.watermark {
	background-image: url(images/watermark-criarenet.png);
	background-size: 260px auto;
}

/* ---------------------------------------------------------------------------
   Select e checkbox.

   Eram os dois últimos controles no visual do NAVEGADOR: `select` chegava com
   fundo #efefef e borda #767676 do Chrome, e o checkbox com o azul de sistema.
   Ficavam lado a lado com campos de texto já na moldura da marca — duas
   linguagens na mesma linha, e é o que mais salta na tela de compor.
   --------------------------------------------------------------------------- */

select:not(.decorated) {
	/* `appearance: none` tira o desenho do sistema, e aí a seta vira nossa. O
	   SVG vai embutido como data URI: o skin não pode depender de requisição
	   externa, e uma imagem a mais só para uma seta não se paga. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--cn-border);
	border-radius: 0;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23113058'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 7px center;
	/* espaço à direita para a seta não encostar no texto da opção mais longa */
	padding: 3px 24px 3px 6px;
	color: var(--cn-text);
}

/* A LISTA de opções é desenhada pelo SISTEMA, não pela página: moldura, sombra
   e cantos do popup não são acessíveis por CSS em nenhum navegador. O que dá
   para alcançar é a cor de cada `option` e, via `accent-color`, o realce da
   linha selecionada — que no Chrome vinha no azul de sistema. É o máximo
   possível sem trocar o <select> por um widget de JS, o que custaria o
   comportamento nativo de teclado e de leitor de tela. */
select {
	accent-color: var(--cn-primary);
}

select:not(.decorated) option {
	background-color: #fff;
	color: var(--cn-text);
}

select:not(.decorated):disabled {
	color: var(--cn-text-soft);
	background-color: var(--cn-bg-light);
}

/* Checkbox e radio no navy da marca. `accent-color` faz isso em uma linha e
   mantém o controle NATIVO — teclado, leitor de tela e estado indeterminado
   continuam funcionando, que é o que se perde ao redesenhar com ::before. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--cn-primary);
}

/* Faixa de opções do compor: o #333 do Larry ao lado dos rótulos navy lia como
   cinza sujo. */
#composeoptions,
#compose-attachments .hint {
	color: var(--cn-text-muted);
}

/* "Anexar um arquivo" tinha ganhado a borda da marca e ficado com o fundo
   #e6e6e6 e o texto #525252 do Larry: cinza sobre cinza dentro de uma coluna
   já cinza, com cara de desabilitado. */
#compose-attachments a.button,
#compose-attachments input.button,
#compose-attachments button {
	background: #fff;
	color: var(--cn-primary);
	border: 1px solid var(--cn-border);
	border-radius: 0;
	box-shadow: none;
}

#compose-attachments a.button:hover,
#compose-attachments input.button:hover,
#compose-attachments button:hover {
	background: var(--cn-bg-blue);
	border-color: var(--cn-primary-light);
}

/* Corpo da mensagem: o preto puro do Larry destoa de uma tela em que todo texto
   é --cn-text. O monoespaçado fica — é modo texto simples. */
#composebody {
	color: var(--cn-text);
}