/* ==========================================================
   Tela de Emails — duas colunas (lista em seções + preview),
   no estilo do contract/new. Usada por Views/Email/Index.cshtml.
   As classes .secao-* vêm de classes-novas.css (reuso).
   ========================================================== */

body {
  background: #fff;
}

.emails-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #e3e3e3;
  background: #f7f7f7;
}

.emails-header h4 {
  margin: 0;
}

.emails-header-titulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.emails-header-count {
  color: #6b7280;
  font-size: 13px;
}

.emails-main {
  display: flex;
  align-items: flex-start;
}

/* ---- Coluna esquerda: lista em seções ---- */
.emails-list-panel {
  width: 38%;
  min-width: 320px;
  border-right: 1px solid #e3e3e3;
  height: calc(100vh - 63px);
  overflow-y: auto;
  position: sticky;
  top: 0;
  background: #fcfcfd;
}

.emails-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  color: #9aa0a6;
}

.emails-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: #202124;
  font-size: 14px;
}

.emails-secoes {
  padding: 16px;
}

/* Corpo da seção vira lista de linhas (sem padding interno) */
.emails-secao-corpo {
  padding: 0;
}

.emails-item {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f3f5;
  cursor: pointer;
  color: #202124;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emails-secao-corpo .emails-item:last-child {
  border-bottom: 0;
}

.emails-item:hover {
  background: #f8fafc;
}

.emails-item.is-active {
  background: #eef4ff;
  box-shadow: inset 3px 0 0 #2f6fed;
  font-weight: 600;
}

.emails-vazio-busca {
  padding: 24px 8px;
  text-align: center;
  color: #9aa0a6;
}

/* ---- Coluna direita: preview ---- */
.emails-preview-panel {
  width: 62%;
  height: calc(100vh - 63px);
  position: sticky;
  top: 0;
  overflow: hidden;
  background: #f5f5f5;
}

.emails-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f5f5f5;
}

.emails-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9aa0a6;
  text-align: center;
}

.emails-empty i {
  font-size: 44px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.emails-empty p {
  margin: 0;
}