@import url("../../elastic/styles/styles.min.css");

/* =====================================================================
   Skin Instituto Sorocabano (base: Elastic)
   Azul institucional + laranja de destaque
   ===================================================================== */

:root {
	--sb-navy: #0d2f6b;
	--sb-navy-2: #1a4c9c;
	--sb-blue: #1a56b8;
	--sb-blue-soft: #e8f0fd;
	--sb-blue-softer: #f3f7fe;
	--sb-orange: #f47b20;
	--sb-orange-2: #fb923c;
	--sb-text: #1c2b45;
	--sb-muted: #66748c;
	--sb-line: #e3e8f0;
	--sb-bg: #f4f7fb;
	--sb-header-h: 64px;
}

html.sb-skin body { color: var(--sb-text); }
html.sb-skin body:not(.task-login) { background: var(--sb-bg); }

/* ---------- Topo (somente telas largas) ---------- */
@media screen and (min-width: 1200px) {
	html.sb-skin:not(.iframe) #layout {
		padding-top: var(--sb-header-h);
		box-sizing: border-box;
	}
	html.sb-skin #layout-menu {
		position: fixed;
		top: 0; left: 0; right: 0;
		height: var(--sb-header-h);
		width: auto !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20px 0 28px;
		background: linear-gradient(90deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%) !important;
		border: 0 !important;
		box-shadow: 0 2px 10px rgba(13, 47, 107, .25);
		z-index: 200;
	}
	html.sb-skin #layout-menu .popover-header {
		display: flex !important;
		align-items: center;
		height: 100%;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
	}
	html.sb-skin #layout-menu .popover-header .cancel { display: none !important; }

	html.sb-skin #taskmenu {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		height: 100%;
		margin-left: auto;
		padding: 0 !important;
		gap: 2px;
		overflow: visible !important;
	}
	html.sb-skin #taskmenu .action-buttons,
	html.sb-skin #taskmenu .special-buttons {
		display: flex !important;
		flex-direction: row;
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		width: auto !important;
	}
	html.sb-skin #taskmenu .special-buttons { margin-left: 8px !important; padding-left: 8px !important; border-left: 1px solid rgba(255,255,255,.22) !important; }
	html.sb-skin #taskmenu a {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		gap: 7px;
		width: auto !important;
		height: 40px !important;
		padding: 0 12px !important;
		margin: 0 !important;
		border-radius: 10px;
		color: rgba(255,255,255,.88) !important;
		background: transparent !important;
		font-size: 14px;
		line-height: 1;
		text-decoration: none;
		border: 0 !important;
	}
	html.sb-skin #taskmenu a:before {
		font-size: 17px !important;
		margin: 0 !important;
		width: auto !important;
		height: auto !important;
		line-height: 1 !important;
		color: inherit !important;
	}
	html.sb-skin #taskmenu a .inner {
		display: inline !important;
		position: static !important;
		font-size: 14px !important;
		color: inherit !important;
		overflow: visible !important;
		height: auto !important;
		width: auto !important;
		line-height: 1 !important;
		white-space: nowrap;
	}
	html.sb-skin #taskmenu a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
	html.sb-skin #taskmenu a.selected { background: rgba(255,255,255,.18) !important; color: #fff !important; }
	html.sb-skin #taskmenu a.selected:after { display: none !important; }
	html.sb-skin #taskmenu a.about { display: none !important; }
	/* na tela de e-mails o botao laranja da barra lateral substitui o "Escrever" */
	html.sb-skin body.task-mail.action-none #taskmenu a.compose { display: none !important; }
	html.sb-skin #taskmenu a.compose {
		background: var(--sb-orange) !important;
		color: #fff !important;
		margin-right: 6px !important;
	}

	html.sb-skin .sb-user { display: flex; align-items: center; margin-left: 12px; }

	/* Busca no centro do topo */
	html.sb-skin body.task-mail #layout-list > .searchbar {
		position: fixed !important;
		top: 12px !important;
		left: 50% !important;
		transform: translateX(-50%);
		width: min(520px, 34vw) !important;
		height: 40px !important;
		margin: 0 !important;
		z-index: 210;
		background: rgba(255,255,255,.14) !important;
		border: 1px solid rgba(255,255,255,.22) !important;
		border-radius: 10px !important;
		display: flex !important;
		align-items: center;
		box-shadow: none !important;
	}
	html.sb-skin body.task-mail #layout-list > .searchbar input {
		background: transparent !important;
		color: #fff !important;
		border: 0 !important;
		box-shadow: none !important;
		height: 38px !important;
	}
	html.sb-skin body.task-mail #layout-list > .searchbar input::placeholder { color: rgba(255,255,255,.7) !important; }
	html.sb-skin body.task-mail #layout-list > .searchbar a.button,
	html.sb-skin body.task-mail #layout-list > .searchbar a.button:before,
	html.sb-skin body.task-mail #layout-list > .searchbar .unread { color: rgba(255,255,255,.85) !important; }
	html.sb-skin body.task-mail #layout-list > .searchbar:focus-within {
		background: #fff !important;
		border-color: #fff !important;
	}
	html.sb-skin body.task-mail #layout-list > .searchbar:focus-within input { color: var(--sb-text) !important; }
	html.sb-skin body.task-mail #layout-list > .searchbar:focus-within a.button,
	html.sb-skin body.task-mail #layout-list > .searchbar:focus-within a.button:before { color: var(--sb-muted) !important; }
	html.sb-skin #searchmenu { position: fixed !important; top: 58px !important; z-index: 220 !important; }
}

/* Marca */
html.sb-skin .sb-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff !important;
	text-decoration: none !important;
	white-space: nowrap;
}
html.sb-skin .sb-brand-icon { width: 40px; height: 30px; }
html.sb-skin .sb-brand-name { font-size: 22px; font-weight: 300; letter-spacing: .2px; }
html.sb-skin .sb-brand-name strong { font-weight: 700; }
@media screen and (max-width: 1199px) {
	html.sb-skin #layout-menu .sb-brand { padding: 14px 16px; background: var(--sb-navy); }
	html.sb-skin #layout-menu .sb-brand-name { font-size: 16px; }
	html.sb-skin .sb-user { display: none; }
}

/* Avatares */
html.sb-skin .sb-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	user-select: none;
}
html.sb-skin .sb-avatar-user {
	width: 38px; height: 38px; font-size: 14px;
	background: #fff !important; color: var(--sb-navy);
	box-shadow: 0 0 0 2px rgba(255,255,255,.35);
}
html.sb-skin .sb-avatar-lg { width: 48px; height: 48px; font-size: 19px; }

/* ---------- Barra lateral (pastas) ---------- */
html.sb-skin body.task-mail #layout-sidebar {
	background: #fff !important;
	border-right: 1px solid var(--sb-line) !important;
	position: relative;
}
html.sb-skin body.task-mail #layout-sidebar > .header {
	display: none;
}
@media screen and (max-width: 1199px) {
	html.sb-skin body.task-mail #layout-sidebar > .header { display: flex; }
}
html.sb-skin .sb-compose-wrap { padding: 20px 16px 14px; }
html.sb-skin a.sb-compose {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	border-radius: 10px;
	background: var(--sb-orange);
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(244, 123, 32, .32);
	transition: filter .15s ease, transform .08s ease;
}
html.sb-skin a.sb-compose:before {
	content: "";
	width: 18px; height: 18px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}
html.sb-skin a.sb-compose:hover { filter: brightness(1.06); }
html.sb-skin a.sb-compose:active { transform: translateY(1px); }

html.sb-skin #folderlist-content { padding: 0 10px; }
html.sb-skin #mailboxlist li.mailbox > a,
html.sb-skin #mailboxlist li.mailbox > div > a {
	border-radius: 10px;
	color: var(--sb-text) !important;
	font-size: 15px;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
html.sb-skin #mailboxlist li.mailbox > a:before,
html.sb-skin #mailboxlist li.mailbox > div > a:before { color: #42526b !important; }
html.sb-skin #mailboxlist li.mailbox,
html.sb-skin #mailboxlist li.mailbox > div { border: 0 !important; background: transparent !important; }
html.sb-skin #mailboxlist li.mailbox:hover > a { background: var(--sb-blue-softer) !important; }
html.sb-skin #mailboxlist li.mailbox.selected > a,
html.sb-skin #mailboxlist li.mailbox.selected > div > a {
	background: var(--sb-blue-soft) !important;
	color: var(--sb-blue) !important;
	font-weight: 600;
}
html.sb-skin #mailboxlist li.mailbox.selected > a:before { color: var(--sb-blue) !important; }
html.sb-skin #mailboxlist .unreadcount {
	background: var(--sb-blue) !important;
	color: #fff !important;
	border-radius: 999px !important;
	min-width: 22px;
	padding: 0 7px !important;
	font-weight: 600;
	text-align: center;
}
html.sb-skin #mailboxlist li.mailbox.selected .unreadcount { background: var(--sb-blue) !important; color: #fff !important; }

html.sb-skin body.task-mail #layout-sidebar > .footer {
	position: relative;
	border: 0 !important;
	background: transparent !important;
	min-height: 200px;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
html.sb-skin .sb-illustration {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 200px;
	background: no-repeat left bottom / 100% auto url("../images/escola.svg");
	pointer-events: none;
}
html.sb-skin #quotadisplay { position: relative; z-index: 1; margin: 0 16px 8px; }
@media screen and (max-height: 700px) {
	html.sb-skin body.task-mail #layout-sidebar > .footer { min-height: 0; }
	html.sb-skin .sb-illustration { display: none; }
}

/* ---------- Lista de mensagens ---------- */
html.sb-skin body.task-mail #layout-list {
	background: #fff !important;
	border-right: 1px solid var(--sb-line) !important;
}
html.sb-skin #messagelist-header {
	position: relative;
	background: #fff !important;
	border-bottom: 0 !important;
	height: 64px !important;
	padding-left: 22px !important;
}
html.sb-skin #messagelist-header .header-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--sb-text) !important;
	text-align: left !important;
}
html.sb-skin .sb-unread-info {
	font-size: 13px;
	color: var(--sb-muted);
	white-space: nowrap;
	margin: 0 6px 0 12px;
	align-self: center;
}
@media screen and (max-width: 1599px) { html.sb-skin .sb-unread-info { display: none; } }

html.sb-skin .sb-filters {
	display: flex;
	gap: 6px;
	padding: 0 18px 12px;
	background: #fff;
	border-bottom: 1px solid var(--sb-line);
	flex-wrap: wrap;
}
html.sb-skin .sb-filters button {
	border: 0;
	background: transparent;
	color: var(--sb-muted);
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
}
html.sb-skin .sb-filters button:hover { background: var(--sb-blue-softer); color: var(--sb-text); }
html.sb-skin .sb-filters button.active { background: var(--sb-blue-soft); color: var(--sb-blue); font-weight: 600; }

html.sb-skin #messagelist tr td { border-bottom: 1px solid #edf1f6 !important; }
html.sb-skin #messagelist tbody tr td.subject {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}
html.sb-skin #messagelist tbody tr.sb-has-avatar td.subject {
	position: relative;
	padding-left: 64px !important;
}
html.sb-skin #messagelist tbody tr td.subject > .sb-avatar {
	position: absolute;
	left: 12px;
	top: 50%;
	margin-top: -20px;
}
html.sb-skin #messagelist tbody tr td.subject .fromto { color: #3a4a63; font-size: 14px; }
html.sb-skin #messagelist tbody tr td.subject span.subject { font-size: 15px; color: #3a4a63; }
html.sb-skin #messagelist tbody tr.unread td.subject span.subject,
html.sb-skin #messagelist tbody tr.unread td.subject span.subject a { color: var(--sb-text) !important; font-weight: 700; }
html.sb-skin #messagelist tbody tr td.subject .date { color: var(--sb-muted); font-size: 13px; }
html.sb-skin #messagelist tbody tr.unread td.subject .date { color: var(--sb-text); }
html.sb-skin #messagelist tbody tr:hover td { background: var(--sb-blue-softer) !important; }
html.sb-skin #messagelist tbody tr.selected td,
html.sb-skin #messagelist tbody tr.focused.selected td {
	background: var(--sb-blue-soft) !important;
	color: var(--sb-text) !important;
}
html.sb-skin #messagelist tbody tr.selected td a,
html.sb-skin #messagelist tbody tr.selected td span { color: inherit !important; }
/* ponto laranja para nao lidas */
html.sb-skin #messagelist tbody tr.unread td.flags span.msgicon.status:before,
html.sb-skin #messagelist tbody tr.unread td.flags span.msgicon.unread:before,
html.sb-skin #messagelist tbody tr.unread td.subject span.msgicon.status:before {
	content: "" !important;
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--sb-orange);
}
html.sb-skin #messagelist tbody tr.selected { box-shadow: inset 3px 0 0 var(--sb-blue); }

/* ---------- Leitura da mensagem ---------- */
html.sb-skin body.task-mail #layout-content { background: #fff !important; }
html.sb-skin body.task-mail #layout-content > .header {
	background: #fff !important;
	border-bottom: 1px solid var(--sb-line) !important;
	height: 64px !important;
}
@media screen and (min-width: 1200px) {
	html.sb-skin #layout-content .header .toolbar a.button,
	html.sb-skin #layout-content .header .toolbar > a,
	html.sb-skin #layout-content .header .toolbar .dropbutton > a {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center;
		gap: 7px;
		min-width: 0 !important;
		padding: 0 10px !important;
		height: 40px;
		border-radius: 8px;
		color: #33425a !important;
	}
	html.sb-skin #layout-content .header .toolbar a.button:before,
	html.sb-skin #layout-content .header .toolbar > a:before {
		margin: 0 !important;
		font-size: 16px !important;
		height: auto !important;
		line-height: 1 !important;
	}
	html.sb-skin #layout-content .header .toolbar a .inner {
		font-size: 14px !important;
		line-height: 1 !important;
		display: inline !important;
	}
	html.sb-skin #layout-content .header .toolbar a:not(.disabled):hover { background: var(--sb-blue-softer) !important; }
}

/* Conteudo da mensagem (dentro do iframe) */
html.sb-skin.iframe body.task-mail { background: #fff !important; }
html.sb-skin #message-header { padding: 22px 28px 8px !important; border-bottom: 0 !important; background: #fff !important; }
html.sb-skin #message-header h2.subject {
	font-size: 25px !important;
	font-weight: 700 !important;
	color: var(--sb-text) !important;
	margin-bottom: 18px !important;
	line-height: 1.25;
}
html.sb-skin #message-header.sb-with-avatar { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: start; }
html.sb-skin #message-header.sb-with-avatar > * { grid-column: 1 / -1; }
html.sb-skin #message-header.sb-with-avatar > .sb-avatar { grid-column: 1; }
html.sb-skin #message-header.sb-with-avatar > .sb-avatar + * { grid-column: 2; }
html.sb-skin #message-header .header a.rcmContactAddress,
html.sb-skin #message-header .header .rcmContactAddress { font-weight: 600; color: var(--sb-text) !important; }
html.sb-skin #message-header .header-links a,
html.sb-skin #message-header .header .date { color: var(--sb-muted) !important; }
html.sb-skin #message-content,
html.sb-skin #messagebody { font-size: 15.5px; line-height: 1.6; color: var(--sb-text); }
html.sb-skin #messagebody { padding: 8px 28px 20px !important; }

html.sb-skin #attachment-list { padding: 4px 28px 24px !important; border-top: 1px solid var(--sb-line) !important; margin-top: 8px; }
html.sb-skin #attachment-list li {
	background: var(--sb-blue-softer) !important;
	border: 1px solid var(--sb-line) !important;
	border-radius: 10px !important;
	padding: 6px 10px !important;
}

/* ---------- Outras telas: botoes primarios em azul ---------- */
html.sb-skin .btn-primary,
html.sb-skin button.mainaction,
html.sb-skin .formbuttons .btn-primary {
	background-color: var(--sb-blue) !important;
	border-color: var(--sb-blue) !important;
}
html.sb-skin .btn-primary:hover { background-color: var(--sb-navy-2) !important; }
html.sb-skin body.task-mail.action-compose .formbuttons button.send,
html.sb-skin body.task-mail.action-compose #layout-content .header a.send {
	background: var(--sb-orange) !important;
	border-color: var(--sb-orange) !important;
	color: #fff !important;
}
html.sb-skin a, html.sb-skin .listing li.selected > a { }
html.sb-skin .listing li.selected,
html.sb-skin .listing tr.selected td { background-color: var(--sb-blue-soft) !important; }

/* ================= Tela de login ================= */
html.sb-skin body.task-login {
	background:
		radial-gradient(900px 520px at 85% 110%, rgba(244,123,32,.30) 0%, rgba(244,123,32,0) 60%),
		linear-gradient(160deg, #0d2f6b 0%, #1a4c9c 60%, #2563c4 100%) !important;
	color: var(--sb-text) !important;
}
html.sb-skin body.task-login #layout {
	align-items: center !important;
	justify-content: center !important;
	min-height: 100vh;
	background: transparent !important;
}
html.sb-skin body.task-login #layout-content {
	flex: 0 0 auto !important;
	height: auto !important;
	width: 100%;
	max-width: 420px;
	margin: 0 16px;
	padding: 40px 34px 26px !important;
	background: #fff !important;
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(5, 20, 50, .45);
	overflow: visible !important;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}
html.sb-skin body.task-login #logo,
html.sb-skin body.task-login #login-form {
	position: static !important;
	top: 0 !important;
	left: 0 !important;
}
html.sb-skin body.task-login #logo {
	display: block;
	width: 300px;
	max-width: 100%;
	max-height: none !important;
	height: auto;
	margin: 0 auto 30px;
}
html.sb-skin body.task-login #login-form { width: 100% !important; max-width: none !important; margin: 0 !important; }
html.sb-skin body.task-login #login-form table,
html.sb-skin body.task-login #login-form tbody { width: 100%; }
html.sb-skin body.task-login #login-form tr.form-group { display: block; margin-bottom: 14px; }
html.sb-skin body.task-login td.input.input-group { border-radius: 10px; }
html.sb-skin body.task-login td.input.input-group:focus-within { box-shadow: 0 0 0 3px rgba(26,86,184,.18); }
html.sb-skin body.task-login .input-group-text.icon {
	background: var(--sb-blue-softer) !important;
	border: 1px solid #d5deeb !important;
	border-right: 0 !important;
	border-radius: 10px 0 0 10px !important;
	color: var(--sb-muted) !important;
}
html.sb-skin body.task-login td.input.input-group .form-control {
	border: 1px solid #d5deeb !important;
	border-left: 0 !important;
	border-radius: 0 10px 10px 0 !important;
	box-shadow: none !important;
	height: 44px;
}
html.sb-skin body.task-login td.input.input-group:focus-within .input-group-text.icon,
html.sb-skin body.task-login td.input.input-group:focus-within .form-control { border-color: var(--sb-blue) !important; }
html.sb-skin body.task-login .formbuttons { margin-top: 18px; }
html.sb-skin body.task-login button.mainaction,
html.sb-skin body.task-login .formbuttons .btn-primary {
	width: 100%;
	height: 46px;
	border: 0 !important;
	border-radius: 10px !important;
	color: #fff !important;
	font-weight: 600;
	letter-spacing: .3px;
	background: var(--sb-orange) !important;
	box-shadow: 0 10px 24px rgba(244,123,32,.32);
}
html.sb-skin body.task-login button.mainaction:hover { filter: brightness(1.06); }
html.sb-skin body.task-login #login-footer { color: var(--sb-muted) !important; font-size: 12px; margin-top: 20px; text-align: center; }

/* ================= Ajustes (rodada 2) ================= */
@media screen and (min-width: 1200px) {
	html.sb-skin #layout-menu .popover-header { flex: 0 0 auto; width: auto !important; }
	html.sb-skin #layout-menu .popover-header .sb-brand { display: flex !important; }
	html.sb-skin #taskmenu a,
	html.sb-skin #taskmenu a .inner { max-width: none !important; min-width: 0 !important; text-overflow: clip !important; }
	html.sb-skin #taskmenu a.logout:focus,
	html.sb-skin #taskmenu a:focus { background: rgba(255,255,255,.12) !important; outline: 0; }

	/* cabecalho da lista: titulo a esquerda, icones discretos a direita */
	html.sb-skin #messagelist-header { display: flex !important; align-items: center; }
	html.sb-skin #messagelist-header .header-title {
		display: block !important;
		flex: 1 1 auto;
		margin: 0 !important;
		padding: 0 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	html.sb-skin #messagelist-header .toolbar { order: 3; height: auto !important; display: flex !important; }
	html.sb-skin #messagelist-header .sb-unread-info { order: 2; }
	html.sb-skin #messagelist-header .toolbar a,
	html.sb-skin #messagelist-header > a.refresh {
		width: 34px !important; min-width: 0 !important; height: 34px !important;
		padding: 0 !important; border-radius: 8px;
		display: inline-flex !important; align-items: center; justify-content: center;
		color: var(--sb-muted) !important;
	}
	html.sb-skin #messagelist-header .toolbar a .inner,
	html.sb-skin #messagelist-header > a.refresh .inner { display: none !important; }
	html.sb-skin #messagelist-header .toolbar a:before,
	html.sb-skin #messagelist-header > a.refresh:before { margin: 0 !important; font-size: 15px !important; line-height: 1 !important; height: auto !important; }
	html.sb-skin #messagelist-header .toolbar a:hover,
	html.sb-skin #messagelist-header > a.refresh:hover { background: var(--sb-blue-softer) !important; color: var(--sb-text) !important; }
	html.sb-skin #messagelist-header > a.refresh { order: 4; }

	/* barra de acoes da leitura: icone + texto em linha, sem cortes */
	html.sb-skin #layout-content .header .toolbar a,
	html.sb-skin #layout-content .header .toolbar a .inner {
		max-width: none !important;
		width: auto !important;
		text-overflow: clip !important;
		overflow: visible !important;
	}
	html.sb-skin #layout-content .header .toolbar .dropbutton { display: inline-flex !important; align-items: center; }
	html.sb-skin #layout-content .header .toolbar .dropbutton a.dropdown { display: none !important; }
	html.sb-skin #layout-content .header .toolbar a.compose { display: none !important; }
	html.sb-skin #layout-content .header .toolbar a.more .inner { display: none !important; }
}

/* linhas da lista: remetente + hora / assunto + ponto laranja */
html.sb-skin #messagelist tbody tr td.subject span.subject { position: relative; padding-right: 22px; display: block; }
html.sb-skin #messagelist tbody tr td.subject span.subject span.msgicon.status {
	position: absolute !important;
	right: 4px; top: 50%;
	margin: -5px 0 0 !important;
	width: 10px !important; height: 10px !important;
	font-size: 0 !important;
}
html.sb-skin #messagelist tbody tr td.subject span.subject span.msgicon.status:before { content: none !important; }
html.sb-skin #messagelist tbody tr.unread td.subject span.subject span.msgicon.status {
	background: var(--sb-orange);
	border-radius: 50%;
}
html.sb-skin #messagelist tbody tr td.subject span.subject span.msgicon.status.replied,
html.sb-skin #messagelist tbody tr td.subject span.subject span.msgicon.status.forwarded { background: transparent; }
html.sb-skin #messagelist tbody tr td.subject .fromto { display: block; padding-right: 0; }
html.sb-skin #messagelist tbody tr.selected { box-shadow: none; }
html.sb-skin #messagelist tbody tr td.selection { width: 0 !important; padding: 0 !important; }

/* ================= Ajustes (rodada 3) ================= */
html.sb-skin #messagelist tbody tr td.subject .fromto { padding-left: 0 !important; margin-left: 0 !important; }
html.sb-skin #message-header .contactphoto,
html.sb-skin #message-header #contactphoto { display: none !important; }
html.sb-skin #message-header.sb-with-avatar > .sb-avatar { grid-row: 2; align-self: center; }

@media screen and (min-width: 1200px) {
	html.sb-skin #layout-content > .header { padding: 0 16px !important; }
	html.sb-skin #layout-content > .header .toolbar { display: flex !important; align-items: center; height: 100%; }
	html.sb-skin #layout-content > .header .toolbar li { display: flex; align-items: center; }
	html.sb-skin #layout-content > .header .toolbar li > a,
	html.sb-skin #layout-content > .header .toolbar li .dropbutton > a:not(.dropdown) {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px;
		height: 40px !important;
		min-width: 0 !important;
		max-width: none !important;
		width: auto !important;
		padding: 0 12px !important;
		margin: 0 2px !important;
		border-radius: 8px;
		color: #33425a !important;
		line-height: 1 !important;
	}
	html.sb-skin #layout-content > .header .toolbar li > a:before,
	html.sb-skin #layout-content > .header .toolbar li .dropbutton > a:before {
		position: static !important;
		display: inline-block !important;
		margin: 0 !important;
		font-size: 15px !important;
		height: auto !important;
		width: auto !important;
		line-height: 1 !important;
	}
	html.sb-skin #layout-content > .header .toolbar li > a .inner,
	html.sb-skin #layout-content > .header .toolbar li .dropbutton > a .inner {
		display: inline !important;
		position: static !important;
		font-size: 14px !important;
		line-height: 1 !important;
		max-width: none !important;
		overflow: visible !important;
		white-space: nowrap;
	}
	html.sb-skin #layout-content > .header .toolbar li > a.disabled { opacity: .45; }
	html.sb-skin #layout-content > .header .toolbar li > a:not(.disabled):hover,
	html.sb-skin #layout-content > .header .toolbar li .dropbutton > a:not(.disabled):hover { background: var(--sb-blue-softer) !important; }
	html.sb-skin #layout-content > .header .toolbar li > a.more { margin-left: auto !important; }
	html.sb-skin #layout-content > .header .toolbar li > a.more .inner { display: none !important; }
}

/* ================= Ajustes (rodada 4) ================= */
html.sb-skin #messagelist tbody tr td.subject span.subject,
html.sb-skin #messagelist tbody tr td.subject .fromto { overflow: clip !important; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (min-width: 1200px) {
	html.sb-skin body.task-mail.action-none #layout-sidebar { flex: 0 0 250px !important; width: 250px !important; max-width: none !important; }
	html.sb-skin body.task-mail.action-none #layout-list { flex: 0 0 410px !important; width: 410px !important; max-width: none !important; }
	html.sb-skin body.task-mail.action-none #layout-content { flex: 1 1 auto !important; min-width: 0 !important; }
	html.sb-skin #layout-content > .header .toolbar { overflow: hidden; flex-wrap: nowrap; }
	html.sb-skin #layout-content > .header .toolbar li > a.select,
	html.sb-skin #layout-content > .header .toolbar li > a.options,
	html.sb-skin #layout-content > .header .toolbar li > a.threads { display: none !important; }
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
	html.sb-skin body.task-mail.action-none #layout-sidebar { flex-basis: 220px !important; width: 220px !important; }
	html.sb-skin body.task-mail.action-none #layout-list { flex-basis: 350px !important; width: 350px !important; }
	html.sb-skin #layout-content > .header .toolbar li > a .inner { display: none !important; }
}

/* ================= Armazenamento (plugin sb_armazenamento) ================= */
html.sb-skin .sb-storage {
	position: relative;
	z-index: 2;
	margin: 8px 14px auto;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(13,47,107,.06);
	font-size: 13px;
	color: var(--sb-muted);
}
html.sb-skin .sb-storage-title { font-weight: 600; color: var(--sb-text); margin-bottom: 8px; }
html.sb-skin .sb-storage-bar { height: 7px; border-radius: 99px; background: #e8edf5; overflow: hidden; }
html.sb-skin .sb-storage-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--sb-blue); transition: width .4s ease; }
html.sb-skin .sb-storage.alerta .sb-storage-bar span { background: var(--sb-orange); }
html.sb-skin .sb-storage.critico .sb-storage-bar span { background: #dc2626; }
html.sb-skin .sb-storage.critico .resta { color: #dc2626; font-weight: 600; }
html.sb-skin .sb-storage.sem-limite .sb-storage-bar { display: none; }
html.sb-skin .sb-storage-text { margin-top: 7px; line-height: 1.35; }
html.sb-skin .sb-storage-text strong { color: var(--sb-text); }
html.sb-skin body.task-mail #layout-sidebar > .footer { min-height: 290px; justify-content: flex-start; }
html.sb-skin body.task-mail #layout-sidebar > .footer .sb-illustration { height: 190px; }
@media screen and (max-height: 760px) {
	html.sb-skin body.task-mail #layout-sidebar > .footer { min-height: 0; }
	html.sb-skin body.task-mail #layout-sidebar > .footer .sb-illustration { display: none; }
	html.sb-skin .sb-storage { margin-bottom: 12px; }
}

/* Armazenamento: acima do desenho, texto sem corte */
html.sb-skin body.task-mail #layout-sidebar > .footer {
	min-height: 0 !important;
	padding: 0 0 185px !important;
	overflow: visible !important;
}
html.sb-skin .sb-storage { margin: 0 14px 6px !important; }
html.sb-skin .sb-storage,
html.sb-skin .sb-storage * {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}
html.sb-skin .sb-storage-text .resta { display: block; margin-top: 2px; }
@media screen and (max-height: 760px) {
	html.sb-skin body.task-mail #layout-sidebar > .footer { padding-bottom: 8px !important; }
}

/* Armazenamento e desenho empilhados (sem sobreposicao) */
html.sb-skin body.task-mail #layout-sidebar > .footer {
	height: auto !important;
	max-height: none !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	flex: 0 0 auto !important;
}
html.sb-skin body.task-mail #layout-sidebar > .footer .sb-storage { order: 1; margin: 0 14px 4px !important; }
html.sb-skin body.task-mail #layout-sidebar > .footer .sb-illustration {
	order: 2;
	position: static !important;
	display: block !important;
	width: 100%;
	height: 175px !important;
	flex: 0 0 175px;
	background-position: left bottom;
	background-size: 100% auto;
}
html.sb-skin body.task-mail #layout-sidebar > .footer #quotadisplay { order: 0; }
@media screen and (max-height: 700px) {
	html.sb-skin body.task-mail #layout-sidebar > .footer .sb-illustration { display: none !important; }
	html.sb-skin body.task-mail #layout-sidebar > .footer .sb-storage { margin-bottom: 12px !important; }
}

/* ================= Celular e tablet (< 1200px) ================= */
@media screen and (max-width: 1199px) {
	/* cabecalhos dos paineis no azul institucional */
	html.sb-skin:not(.iframe) #layout-sidebar > .header,
	html.sb-skin:not(.iframe) #layout-list > .header,
	html.sb-skin:not(.iframe) #layout-content > .header {
		background: linear-gradient(90deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%) !important;
		border-bottom: 0 !important;
		color: #fff !important;
	}
	html.sb-skin:not(.iframe) #layout-sidebar > .header *,
	html.sb-skin:not(.iframe) #layout-list > .header *,
	html.sb-skin:not(.iframe) #layout-content > .header *,
	html.sb-skin:not(.iframe) #layout-sidebar > .header a:before,
	html.sb-skin:not(.iframe) #layout-list > .header a:before,
	html.sb-skin:not(.iframe) #layout-content > .header a:before,
	html.sb-skin:not(.iframe) #layout-list > .header .header-title:before {
		color: #fff !important;
	}
	html.sb-skin #messagelist-header { height: 58px !important; padding-left: 0 !important; }
	html.sb-skin #messagelist-header .header-title { font-size: 19px !important; }
	html.sb-skin #layout-list .searchbar { background: #fff !important; border-bottom: 1px solid var(--sb-line) !important; }

	/* abas de filtro numa linha, com rolagem lateral */
	html.sb-skin .sb-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 10px 12px;
		gap: 4px;
	}
	html.sb-skin .sb-filters::-webkit-scrollbar { display: none; }
	html.sb-skin .sb-filters button { flex: 0 0 auto; white-space: nowrap; padding: 6px 12px; }

	/* menu lateral (hamburguer): marca dentro do cabecalho, X visivel */
	html.sb-skin #layout-menu .popover-header {
		display: flex !important;
		align-items: center;
		gap: 8px;
		height: 58px;
		padding: 0 6px 0 14px !important;
		background: linear-gradient(90deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%) !important;
	}
	html.sb-skin #layout-menu .popover-header .sb-brand {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		gap: 10px;
	}
	html.sb-skin #layout-menu .sb-brand-icon { width: 30px; height: 24px; flex: 0 0 auto; }
	html.sb-skin #layout-menu .sb-brand-name { font-size: 15px !important; overflow: hidden; text-overflow: ellipsis; }
	html.sb-skin #layout-menu .popover-header .cancel { display: inline-flex !important; flex: 0 0 auto; position: static !important; color: #fff !important; }
	html.sb-skin #layout-menu .popover-header .cancel:before { color: #fff !important; }
	html.sb-skin #taskmenu a.selected { color: var(--sb-blue) !important; background: var(--sb-blue-soft) !important; }
	html.sb-skin #taskmenu a.compose { color: var(--sb-orange) !important; }
	html.sb-skin #taskmenu a.compose:before { color: var(--sb-orange) !important; }

	/* painel de pastas */
	html.sb-skin .sb-compose-wrap { padding: 14px 14px 10px; }
	html.sb-skin body.task-mail #layout-sidebar > .footer .sb-illustration {
		height: 130px !important;
		flex-basis: 130px;
		background-size: auto 100% !important;
		background-position: left bottom !important;
	}

	/* botao flutuante de escrever e envio em laranja */
	html.sb-skin .floating-action-buttons a,
	html.sb-skin .floating-action-buttons a.button {
		background: var(--sb-orange) !important;
		color: #fff !important;
		box-shadow: 0 6px 16px rgba(244,123,32,.4) !important;
	}
	html.sb-skin body.action-compose #layout-content > .footer a.send,
	html.sb-skin body.action-compose .formbuttons a.send,
	html.sb-skin body.action-compose #layout-content > .footer a.send:before { color: var(--sb-orange) !important; }

	/* leitura: margens menores */
	html.sb-skin #message-header { padding: 16px 16px 6px !important; }
	html.sb-skin #message-header h2.subject { font-size: 21px !important; margin-bottom: 12px !important; }
	html.sb-skin #messagebody { padding: 6px 16px 16px !important; }
	html.sb-skin #attachment-list { padding: 4px 16px 16px !important; }
}
@media screen and (max-width: 480px) {
	html.sb-skin .sb-avatar { width: 36px; height: 36px; font-size: 14px; }
	html.sb-skin #messagelist tbody tr.sb-has-avatar td.subject { padding-left: 58px !important; }
	html.sb-skin #messagelist tbody tr td.subject > .sb-avatar { left: 10px; margin-top: -18px; }
	html.sb-skin .sb-avatar-lg { width: 42px; height: 42px; font-size: 17px; }
	html.sb-skin #message-header.sb-with-avatar { grid-template-columns: 42px 1fr; column-gap: 10px; }
}
@media screen and (max-width: 1199px) {
	html.sb-skin #layout-menu .sb-brand { overflow: hidden; }
	html.sb-skin #layout-menu .sb-brand-name {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 14px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	html.sb-skin #layout-menu .popover-header .cancel { min-width: 40px; justify-content: center; }
}
@media screen and (max-width: 1199px) {
	html.sb-skin #layout-menu .popover-header .sb-brand {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		height: auto !important;
		width: auto !important;
		line-height: 1.2 !important;
	}
	html.sb-skin #layout-menu .popover-header .sb-brand-icon { display: block; margin: 0 !important; }
}

/* Tablet: barra de icones lateral no azul institucional */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	html.sb-skin #layout-menu:not(.popover) {
		background: linear-gradient(180deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%) !important;
	}
	html.sb-skin #layout-menu:not(.popover) #taskmenu a,
	html.sb-skin #layout-menu:not(.popover) #taskmenu a:before,
	html.sb-skin #layout-menu:not(.popover) .popover-header,
	html.sb-skin #layout-menu:not(.popover) .popover-header * { color: rgba(255,255,255,.85) !important; background-color: transparent !important; }
	html.sb-skin #layout-menu:not(.popover) #taskmenu a.selected { background: rgba(255,255,255,.18) !important; }
	html.sb-skin #layout-menu:not(.popover) #taskmenu a.selected,
	html.sb-skin #layout-menu:not(.popover) #taskmenu a.selected:before { color: #fff !important; }
	html.sb-skin #layout-menu:not(.popover) #taskmenu a.compose:before { color: var(--sb-orange-2) !important; }
}

/* Menu do botao Assinatura (escrever e-mail) */
html.sb-skin .sb-sig-menu {
	position: absolute;
	z-index: 3000;
	min-width: 220px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(13,47,107,.18);
}
html.sb-skin .sb-sig-menu[hidden] { display: none; }
html.sb-skin .sb-sig-title { padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--sb-muted); text-transform: uppercase; letter-spacing: .4px; }
html.sb-skin .sb-sig-menu button {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--sb-text);
	cursor: pointer;
}
html.sb-skin .sb-sig-menu button:hover:not([disabled]),
html.sb-skin .sb-sig-menu button:focus { background: var(--sb-blue-soft); color: var(--sb-blue); outline: 0; }
html.sb-skin .sb-sig-menu button.atual { font-weight: 600; }
html.sb-skin .sb-sig-menu button.atual:after { content: " ✓"; color: var(--sb-blue); }
html.sb-skin .sb-sig-menu button[disabled] { color: #a3adbd; cursor: default; }
@media screen and (max-width: 1199px) {
	html.sb-skin:not(.iframe) body.task-mail #layout-content > .header,
	html.sb-skin:not(.iframe) body #layout-content > .header {
		background: linear-gradient(90deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%) !important;
		border-bottom: 0 !important;
	}
}

/* ================= Busca do topo sem sobreposicao ================= */
@media screen and (min-width: 1200px) {
	html.sb-skin {
		--sb-search-left: 400px;
		--sb-menu-w: 560px;
	}
	html.sb-skin body.task-mail #layout-list > .searchbar {
		left: var(--sb-search-left) !important;
		transform: none !important;
		width: clamp(180px, calc(100vw - var(--sb-search-left) - var(--sb-menu-w)), 560px) !important;
	}
	html.sb-skin body.task-mail #layout-list > .searchbar input { flex: 1 1 auto; min-width: 0; }
	html.sb-skin body.task-mail #layout-list > .searchbar a.button {
		flex: 0 0 auto;
		position: static !important;
		width: 34px !important;
		height: 34px !important;
		margin: 0 2px !important;
		border-radius: 8px;
		background: transparent !important;
	}
	html.sb-skin body.task-mail #layout-list > .searchbar a.button:hover { background: rgba(255,255,255,.14) !important; }
	html.sb-skin body.task-mail #layout-list > .searchbar:focus-within a.button:hover { background: var(--sb-blue-softer) !important; }

	/* opcoes da busca: cartao logo abaixo da barra */
	html.sb-skin body.task-mail #searchmenu {
		position: fixed !important;
		top: 58px !important;
		left: var(--sb-search-left) !important;
		right: auto !important;
		bottom: auto !important;
		width: clamp(300px, calc(100vw - var(--sb-search-left) - var(--sb-menu-w)), 560px) !important;
		min-width: 300px;
		height: auto !important;
		max-height: calc(100vh - 80px) !important;
		overflow-y: auto !important;
		margin: 0 !important;
		padding: 14px 16px !important;
		background: #fff !important;
		border: 1px solid var(--sb-line) !important;
		border-radius: 12px !important;
		box-shadow: 0 16px 40px rgba(13,47,107,.22) !important;
		z-index: 230 !important;
	}
	html.sb-skin body.task-mail #searchmenu .formcontent { padding: 0 !important; }
	html.sb-skin body.task-mail #searchmenu .proplist { margin: 0 0 10px !important; padding: 0 !important; }
	html.sb-skin body.task-mail #searchmenu .proplist li { padding: 4px 0 !important; }
	html.sb-skin body.task-mail #searchmenu .input-group { margin-bottom: 8px; flex-wrap: nowrap; }
	html.sb-skin body.task-mail #searchmenu .input-group-prepend .input-group-text { min-width: 92px; }
	html.sb-skin body.task-mail #searchmenu .formbuttons { margin-top: 10px; padding: 0 !important; text-align: right; }
}
/* telas medias: menu do topo so com icones para caber a busca */
@media screen and (min-width: 1200px) and (max-width: 1499px) {
	html.sb-skin { --sb-menu-w: 330px; }
	html.sb-skin #taskmenu a .inner { display: none !important; }
	html.sb-skin #taskmenu a { padding: 0 11px !important; }
	html.sb-skin .sb-brand-name { font-size: 20px; }
	html.sb-skin { --sb-search-left: 370px; }
}
@media screen and (min-width: 1200px) and (max-width: 1499px) {
	html.sb-skin body.task-mail.action-none #layout-sidebar { flex-basis: 220px !important; width: 220px !important; }
	html.sb-skin body.task-mail.action-none #layout-list { flex-basis: 380px !important; width: 380px !important; }
	html.sb-skin #messagelist-header { padding-left: 16px !important; }
	html.sb-skin #messagelist-header .header-title { font-size: 19px !important; }
}
@media screen and (min-width: 1200px) {
	html.sb-skin .sb-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	html.sb-skin .sb-filters::-webkit-scrollbar { display: none; }
	html.sb-skin .sb-filters button { flex: 0 0 auto; white-space: nowrap; }
}

/* Sugestoes de destinatario (campo Para/Cc/Cco): texto legivel */
html.sb-skin #rcmKSearchpane {
	background: #fff !important;
	border: 1px solid var(--sb-line) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 28px rgba(13,47,107,.18) !important;
	padding: 4px !important;
	overflow: hidden;
}
html.sb-skin #rcmKSearchpane > ul > li {
	padding: 8px 10px !important;
	border-radius: 8px;
	color: var(--sb-text) !important;
	background: transparent !important;
}
html.sb-skin #rcmKSearchpane > ul > li *,
html.sb-skin #rcmKSearchpane > ul > li:before { color: inherit !important; }
html.sb-skin #rcmKSearchpane > ul > li span.field:first-child { font-weight: 600; }
html.sb-skin #rcmKSearchpane > ul > li span.field + span.field { color: var(--sb-muted) !important; font-size: .9rem !important; }
html.sb-skin #rcmKSearchpane > ul > li:hover { background: var(--sb-blue-softer) !important; }
html.sb-skin #rcmKSearchpane > ul > li.selected {
	background: var(--sb-blue-soft) !important;
	color: var(--sb-blue) !important;
	box-shadow: inset 3px 0 0 var(--sb-blue);
}
html.sb-skin #rcmKSearchpane > ul > li.selected span.field + span.field { color: #3d5a8a !important; }
html.sb-skin #rcmKSearchpane > ul > li b,
html.sb-skin #rcmKSearchpane > ul > li strong { color: var(--sb-blue) !important; }

/* Escrever e-mail: barra com texto (Salvar, Anexar, Assinatura...) em qualquer largura */
@media screen and (min-width: 1200px) {
	html.sb-skin body.action-compose #layout-content > .header .toolbar li > a .inner { display: inline !important; }
}