/* ===================================================================
   C&S Portal — porta cinematográfica + inbox estilo Gmail (C&S)
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,600&family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600&display=swap');

/* CLIENTE NATIVO C&S no ar: esconde TODA a UI do SnappyMail (lutar com o tema dele acabou).
   O #ces-mailapp (cliente do InnovaSphere) cobre a tela; o login (#V-Login) NUNCA é escondido. */
/* 08/11 (UX-N03): TODO elemento flutuante novo anexado ao body precisa de class="inn-flutua" ou entra aqui; senao nasce invisivel
   (cicatriz: #ispm-toast, aviso de Notas e Desfazer nunca apareceram). */
/* esconde o SnappyMail nativo, MAS preserva o app + login + a CENA (a paisagem #ces-bg e as
   partículas #ces-particles são filhas do <body id=rl-app> — precisam estar nas exceções!) */
/* 08/11 (saida do SnappyMail, residuo web): era 'esconde TODO filho do body menos as excecoes' (aviso novo nascia invisivel, UX-N03).
   Agora esconde SO o que se nomeia: a casca do login (#rl-content com #V-Login), #rl-popups, .accountPlace e o rodape do login (.ces-chain). */
html.ces-nativeapp #rl-app > #rl-content,html.ces-nativeapp #rl-app > #rl-popups,html.ces-nativeapp #rl-app > .accountPlace,html.ces-nativeapp #rl-app > .ces-chain{display:none!important}
/* a CENA (paisagem + partículas) fica VISÍVEL atrás do app nativo — a beleza de antes */
html.ces-nativeapp #ces-bg,html.ces-nativeapp #ces-particles{display:block!important;z-index:0}
html.ces-nativeapp #ces-bg .ces-veil{background:linear-gradient(120deg,rgba(7,10,20,.46) 0%,rgba(11,15,30,.34) 46%,rgba(16,20,42,.26) 100%)}
html.ces-nativeapp #rl-left,html.ces-nativeapp #rl-right,html.ces-nativeapp .b-toolbar,
html.ces-nativeapp .b-message-list,html.ces-nativeapp .b-message-view{display:none!important}
html.ces-nativeapp #ces-mailapp{display:block!important}
:root{
  --ces-navy:#0B0F1E; --ces-navy2:#10162C; --ces-panel:#121835;
  --ces-peri:#8B92C8; --ces-peri-br:#AEB4E4; --ces-teal:#79CFC8;
  --ces-cream:#F3F4FB; --ces-gold:#D2AE64; --ces-gold-d:#C4A35A;
  --ces-muted:#AEB2CE; --ces-line:rgba(255,255,255,.12);

  /* variáveis nativas do SnappyMail (independem do tema CeS — resiliência) */
  color-scheme:dark;
  --main-color:#EFE7D6; --main-bg-color:#0B0F1E;
  --main-bg-image:radial-gradient(1100px 640px at 72% -12%,#16203f 0%,#0B0F1E 60%,#070A14 100%);
  --loading-color:#C4A35A;
  --login-color:#EFE7D6; --login-bg-color:rgba(13,18,38,.78); --login-border-radius:18px;
  --dropdown-menu-color:#EFE7D6; --dropdown-menu-bg-color:#121733;
  --dropdown-menu-hover-bg-color:#79CFC8; --dropdown-menu-hover-color:#0B0F1E;
  --folders-color:#D7DCF0; --folders-selected-color:#fff; --folders-selected-bg-color:rgba(210,174,100,.18);
  --folders-hover-bg-color:rgba(139,146,200,.12); --folders-focused-bg-color:rgba(210,174,100,.22);
  --settings-menu-color:#D7DCF0; --settings-menu-selected-bg-color:rgba(210,174,100,.18);
  --message-list-toolbar-bg-color:#10162C;
}

/* =========================================================
   1) PORTA DE ENTRADA  (somente quando body.ces-login)
   ========================================================= */
/* paisagem SEMPRE no fundo (login + inbox = continuidade) */
#ces-bg{position:fixed;inset:0;z-index:0;overflow:hidden;display:block}
#ces-particles{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
/* partículas azuis no login E no app nativo (a beleza vive nas duas telas) */
body.ces-login #ces-particles,html.ces-nativeapp #ces-particles{display:block}
#ces-bg .ces-img{position:absolute;inset:-7%;
  background:center 42%/cover no-repeat;
  will-change:transform;filter:saturate(.98)}
/* ken-burns animando no login E no app nativo */
/* 09/11 peso do login: a foto (397 KB) so e pedida com a caixa montada; no login ela ja ficava escondida (telas-clara.css)
   mas o #ces-bg nasce antes do login aparecer e o navegador baixava a foto mesmo assim */
html.ces-nativeapp #ces-bg .ces-img{background-image:url('ces-bg.jpg')}
body.ces-login #ces-bg .ces-img,html.ces-nativeapp #ces-bg .ces-img{animation:cesKen 28s ease-in-out infinite alternate}
@keyframes cesKen{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.17) translate(-2.4%,-1.8%)}}
/* véu: leve no login (foto RECONHECÍVEL); mais escuro no inbox (paisagem insinuada) */
#ces-bg .ces-veil{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,11,22,.50),rgba(11,15,30,.60))}
body.ces-login #ces-bg .ces-veil{background:linear-gradient(120deg,rgba(7,10,20,.58) 0%,rgba(11,15,30,.46) 46%,rgba(16,20,42,.38) 100%)}

/* #rl-content = palco full-bleed */
body.ces-login #rl-content{position:fixed!important;inset:0!important;z-index:2!important;display:block!important}
/* #V-Login = card de vidro flutuante, CENTRADO via fixed+transform (à prova do layout do SnappyMail) */
body.ces-login #V-Login{
  position:fixed!important;top:50%!important;left:50%!important;
  /* CVO 07/07: card centrado usava max-height 100vh-44px + chain fixo bottom:24 → o rodapé de
     empresas SOBREPUNHA "Esqueci minha senha"/legal na base (mobile). Agora usa 100dvh (respeita a
     barra do navegador mobile) e RESERVA a faixa do chain via padding-bottom, matando sobreposição
     e o scroll que encostava no rodapé. */
  height:auto!important;min-height:0!important;max-height:calc(100dvh - 20px)!important;overflow-y:auto!important;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:0!important;width:min(414px,94vw)!important;
  background:rgba(16,20,42,.26)!important;
  -webkit-backdrop-filter:blur(40px) saturate(170%);backdrop-filter:blur(40px) saturate(170%);
  border:1px solid rgba(255,255,255,.20)!important;border-radius:22px!important;
  box-shadow:0 60px 130px -30px rgba(0,0,0,.92), 0 2px 0 rgba(255,255,255,.12) inset!important;
  /* CVO 07/07: bottom 1.65rem→64px RESERVA a faixa do chain fixo (bottom:24 + altura) — o último
     conteúdo (Esqueci-senha/legal) para acima do rodapé, sem sobreposição ao rolar até o fim. */
  padding:1.5rem 1.55rem 64px!important;
  animation:cesFloat 7.5s ease-in-out infinite}
@keyframes cesFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 9px))}}
body.ces-login #V-Login *{font-family:'Inter',system-ui,sans-serif}
body.ces-login #V-Login h1,body.ces-login #V-Login .title{display:none!important}

.ces-brand{display:flex;align-items:center;gap:.6rem;justify-content:center;margin:.1rem 0 .55rem}
/* CVO 10/07: MONOGRAMA oficial C&S no login (ces) — simbolo do timbrado + texto "C&S ENGENHARIA" */
.ces-mark-img{height:50px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.26))}
@media (max-width:480px){.ces-mark-img{height:42px}}
.ces-brand .nm{font-family:'Poppins';font-weight:600;font-size:.94rem;letter-spacing:.05em;color:#fff;line-height:1.05}
.ces-brand .nm b{color:var(--ces-peri-br)}
.ces-brand .sb{font-family:'Poppins';font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ces-teal)}
.ces-h1{font-family:'Cormorant Garamond';font-weight:600;font-size:1.65rem;line-height:1.06;text-align:center;color:#fff;margin:.1rem 0}
.ces-h1 em{font-style:italic;color:var(--ces-peri-br)}
.ces-sub{text-align:center;color:var(--ces-muted);font-size:.83rem;margin:.1rem 0 1rem}

body.ces-login #V-Login input:not([type=checkbox]){
  background:rgba(255,255,255,.05)!important;border:1.4px solid var(--ces-line)!important;
  border-radius:12px!important;color:#fff!important;padding:.82rem .9rem!important;font-size:.95rem!important}
body.ces-login #V-Login input::placeholder{color:#7e83a6!important}
body.ces-login #V-Login input:focus{border-color:var(--ces-peri)!important;
  box-shadow:0 0 0 4px rgba(139,146,200,.16)!important;background:rgba(255,255,255,.09)!important}
body.ces-login #V-Login .buttonLogin,
body.ces-login #V-Login button[type=submit]{
  background:linear-gradient(180deg,var(--ces-gold),var(--ces-gold-d))!important;color:#0B0F1E!important;
  border:none!important;border-radius:12px!important;font-family:'Poppins'!important;font-weight:600!important;
  box-shadow:0 10px 26px rgba(196,163,90,.34)!important;padding:.85rem!important;letter-spacing:.02em}
.ces-tls{text-align:center;margin-top:.9rem;font-family:'Poppins';font-size:.66rem;color:var(--ces-teal);opacity:.85}

/* Google + métodos alternativos */
.ces-google{display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%;padding:.85rem;border:0;border-radius:13px;background:#fff;color:#1f2333;font-family:'Poppins';font-weight:600;font-size:.98rem;cursor:pointer;transition:.2s;box-shadow:0 12px 26px -12px rgba(0,0,0,.55);margin-bottom:.2rem}
.ces-google:hover{background:#f1f2f8;transform:translateY(-2px)}
.ces-sep{display:flex;align-items:center;gap:.7rem;margin:.85rem 0;color:#9098bd;font-family:'Poppins';font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.ces-sep::before,.ces-sep::after{content:"";flex:1;height:1px;background:var(--ces-line)}
.ces-more{display:flex;gap:.45rem;margin-top:.95rem}
.ces-more button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.28rem;padding:.6rem .22rem;border-radius:11px;border:1px solid var(--ces-line);background:rgba(255,255,255,.04);color:var(--ces-muted);font-family:'Poppins';font-size:.58rem;font-weight:500;cursor:pointer;transition:.2s}
.ces-more button:hover{color:#fff;border-color:var(--ces-teal);transform:translateY(-2px)}
.ces-more button svg{opacity:.92}
/* vitrine de métodos de login — elegante, minimalista, ícones (a pessoa decide) */
.ces-methods{display:flex;gap:.5rem;justify-content:center;margin-top:.95rem;flex-wrap:wrap}
.ces-m{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:64px;padding:.65rem .2rem;border-radius:15px;
  border:1px solid var(--ces-line);background:rgba(255,255,255,.045);color:var(--ces-muted);cursor:pointer;transition:.18s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ces-m:hover{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.1);transform:translateY(-2px);
  box-shadow:0 9px 20px -7px rgba(0,0,0,.55)}
.ces-m svg{flex:0 0 auto}
.ces-m span{font-family:'Poppins';font-size:.56rem;font-weight:500;letter-spacing:.02em;white-space:nowrap}

/* ===================== POPUPS NATIVOS -> VIDRO TRANSLUCIDO ===================== */
/* compor, criar pasta, lista de pastas, novo contato, busca, etc. (dialog id^=V-Popups) */
#rl-popups dialog, dialog[id^="V-Popups"]{
  background:rgba(11,15,30,.95)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  color:var(--ces-cream)!important;
  border:1px solid var(--ces-line)!important;
  border-radius:18px!important;
  box-shadow:0 36px 90px -24px rgba(0,0,0,.82)!important;
  overflow:hidden!important;
}
dialog[id^="V-Popups"]::backdrop{background:rgba(4,7,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* texto geral legivel dentro do popup */
dialog[id^="V-Popups"], dialog[id^="V-Popups"] label, dialog[id^="V-Popups"] legend,
dialog[id^="V-Popups"] td, dialog[id^="V-Popups"] th, dialog[id^="V-Popups"] h1,
dialog[id^="V-Popups"] h2, dialog[id^="V-Popups"] h3, dialog[id^="V-Popups"] p,
dialog[id^="V-Popups"] .e-title, dialog[id^="V-Popups"] li{color:var(--ces-cream)!important}
/* cabecalho do popup (barra de acoes) */
dialog[id^="V-Popups"] .b-toolbar, dialog[id^="V-Popups"] header,
dialog[id^="V-Popups"] .popup-header, dialog[id^="V-Popups"] .b-list-toolbar{
  background:rgba(7,11,22,.6)!important;border-bottom:1px solid var(--ces-line)!important}
/* corpos/areas brancas -> transparentes */
dialog[id^="V-Popups"] .b-content, dialog[id^="V-Popups"] .content,
dialog[id^="V-Popups"] section, dialog[id^="V-Popups"] .form,
dialog[id^="V-Popups"] .b-compose-body, dialog[id^="V-Popups"] .b-fields,
dialog[id^="V-Popups"] .b-header, dialog[id^="V-Popups"] table{background:transparent!important}
/* campos de formulario */
dialog[id^="V-Popups"] input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
dialog[id^="V-Popups"] textarea, dialog[id^="V-Popups"] select{
  background:rgba(255,255,255,.06)!important;border:1px solid var(--ces-line)!important;
  color:#fff!important;border-radius:10px!important}
dialog[id^="V-Popups"] input::placeholder, dialog[id^="V-Popups"] textarea::placeholder{color:rgba(243,244,251,.45)!important}
/* botoes internos -> vidro */
dialog[id^="V-Popups"] .btn{
  background:rgba(255,255,255,.06)!important;border:1px solid var(--ces-line)!important;
  color:var(--ces-cream)!important;border-radius:10px!important}
dialog[id^="V-Popups"] .btn:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
dialog[id^="V-Popups"] .btn.fontastic{color:var(--ces-peri-br)!important}
/* acoes primarias (Enviar/Salvar) douradas */
dialog[id^="V-Popups"] .buttonSend, dialog[id^="V-Popups"] .button-save{
  background:linear-gradient(135deg,var(--ces-gold),var(--ces-gold-d))!important;
  color:#191305!important;border-color:transparent!important;font-weight:600}
dialog[id^="V-Popups"] .buttonSend svg, dialog[id^="V-Popups"] .button-save svg{color:#191305!important}
/* canvas de escrita do compose: folha clara contida (WYSIWYG correto p/ o destinatario).
   CVO 10/07: texto legivel por padrao (preto no claro, nao preto no escuro). NAO forcar fonte
   branca — quebraria o e-mail no destinatario (Gmail fundo branco). Folha clara = legivel ao
   escrever E correto ao enviar. A barra tem Fonte/Cor do texto/Cor de fundo (HTML mode default). */
#V-PopupsCompose .b-editor, #V-PopupsCompose .squire-html, #V-PopupsCompose .squire-wysiwyg,
#V-PopupsCompose [contenteditable], #V-PopupsCompose iframe{
  background:#fbfbfd!important;color:#1a1a22!important;caret-color:#1a1a22!important;border-radius:0 0 14px 14px!important}
/* texto digitado herda o preto do container mesmo se algum reset deixar claro */
#V-PopupsCompose .squire-wysiwyg{color:#1a1a22!important}
#V-PopupsCompose .squire-wysiwyg a{color:#1558d6!important}
/* abas do compose */
dialog[id^="V-Popups"] .tabsList, dialog[id^="V-Popups"] [role=tablist]{border-bottom:1px solid var(--ces-line)!important}
/* scroll fino dentro dos popups */
dialog[id^="V-Popups"] *::-webkit-scrollbar{width:7px;height:7px}
dialog[id^="V-Popups"] *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}

/* ===================== SENHAS: abas, credencial, trocar, esqueci ===================== */
.ces-tabs{display:flex;gap:.4rem;margin:.2rem 0 1rem}
.ces-tab{flex:1;padding:.55rem;border-radius:10px;border:1px solid var(--ces-line);background:rgba(255,255,255,.04);color:var(--ces-muted);font-family:'Poppins';font-size:.8rem;font-weight:500;cursor:pointer;transition:.16s}
.ces-tab.on{background:rgba(210,174,100,.16);border-color:rgba(210,174,100,.5);color:var(--ces-gold)}
.ces-opt{color:var(--ces-muted);font-weight:400;font-size:.74rem}
.ces-cred{margin-top:.7rem;padding:.8rem .85rem;border-radius:12px;background:rgba(210,174,100,.1);border:1px solid rgba(210,174,100,.4)}
.ces-cred-lbl{font-size:.78rem;color:var(--ces-cream);margin-bottom:.45rem}
.ces-cred-row{display:flex;align-items:center;gap:.5rem}
.ces-cred-row code{flex:1;font-family:'SFMono-Regular',Consolas,monospace;font-size:1.05rem;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.28);padding:.45rem .6rem;border-radius:8px;user-select:all}
.ces-cred-row code.ces-cred-link{font-size:.64rem;letter-spacing:0;word-break:break-all;line-height:1.35}
.ces-cred-copy{padding:.45rem .7rem;border-radius:8px;border:1px solid rgba(210,174,100,.5);background:rgba(210,174,100,.2);color:var(--ces-gold);font-family:'Poppins';font-size:.74rem;font-weight:600;cursor:pointer;white-space:nowrap}
.ces-cred-copy:hover{background:rgba(210,174,100,.3)}
.ces-cred-hint{margin-top:.5rem;font-size:.7rem;color:var(--ces-muted);line-height:1.45}
.ces-chpw{display:flex;align-items:center;justify-content:center;gap:.4rem;width:calc(100% - 1.4rem);margin:.35rem .7rem;padding:.5rem;border-radius:10px;border:1px solid var(--ces-line);background:rgba(255,255,255,.04);color:var(--ces-muted);font-family:'Poppins';font-size:.74rem;font-weight:500;cursor:pointer;transition:.16s}
.ces-chpw:hover{background:rgba(255,255,255,.09);color:var(--ces-cream)}
.ces-forgot{text-align:center;margin-top:.6rem}
.ces-forgot-link{color:var(--ces-muted);font-size:.76rem;text-decoration:none;border-bottom:1px dotted rgba(174,178,206,.5);padding-bottom:1px}
.ces-forgot-link:hover{color:var(--ces-cream)}
.ces-forgot-box{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.3rem}
.ces-forgot-box input{flex:1;min-width:160px;padding:.5rem .7rem;border-radius:9px;border:1px solid var(--ces-line);background:rgba(255,255,255,.06);color:#fff;font-size:.8rem}
.ces-fg-send{padding:.5rem .9rem;border-radius:9px;border:1px solid rgba(210,174,100,.5);background:rgba(210,174,100,.2);color:var(--ces-gold);font-family:'Poppins';font-weight:600;font-size:.78rem;cursor:pointer}
.ces-fg-msg{flex-basis:100%;font-size:.74rem;color:var(--ces-muted);text-align:center;margin-top:.2rem}
.ces-fg-msg.ok{color:var(--ces-teal)}
.ces-notice{margin-top:.85rem;padding:.65rem .85rem;border-radius:10px;background:rgba(174,180,228,.12);border:1px solid var(--ces-line);color:var(--ces-cream);font-size:.79rem;text-align:center;display:none}
.ces-notice a{color:var(--ces-teal);font-weight:600}
/* ícones dos campos → direita (param de cobrir os caracteres) */
body.ces-login #V-Login .controls{position:relative}
body.ces-login #V-Login .controls .fontastic{left:auto!important;right:13px!important;opacity:.5;pointer-events:none}
body.ces-login #V-Login input:not([type=checkbox]){padding-left:.95rem!important;padding-right:2.4rem!important}
/* Apple ID — desabilitado, discreto */
.ces-apple{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;padding:.78rem;border-radius:13px;
  background:rgba(0,0,0,.5)!important;color:#fff!important;font-family:'Poppins';font-weight:600;font-size:.92rem;cursor:not-allowed;
  border:1px solid rgba(255,255,255,.14)!important;opacity:.6;margin-top:.5rem;transition:.2s}
.ces-apple:hover{opacity:.72}
.ces-apple .ces-soon{font-size:.5rem;font-weight:500;opacity:.75;letter-spacing:.06em;text-transform:uppercase;margin-left:.2rem}
.ces-credit{display:none!important}

/* logo C&S no topo da nav (estilo Gmail) */
.ces-navhead{display:flex;align-items:center;gap:.5rem;padding:.62rem .8rem .6rem;margin:0 0 .2rem;border-bottom:1px solid var(--ces-line)}
.ces-navhead svg{width:27px;height:27px;flex:0 0 auto}
.ces-navhead .ces-wm{font-family:'Poppins';font-weight:600;font-size:.82rem;letter-spacing:.04em;color:#fff;white-space:nowrap}
.ces-navhead .ces-wm b{color:var(--ces-peri-br)}
/* rodapé: cadeia de empresas, centralizado e discreto (login + inbox) */
/* CVO 07/07: no login, o card rola e o chain é fixed → conteúdo mid-scroll aparecia ATRÁS do texto do
   rodapé (sobreposição). Fix à prova de scroll: no login o chain vira faixa com fundo (fade→sólido) que
   OCULTA qualquer conteúdo atrás, ancorada no rodapé (bottom:0). O padding-bottom:64px do card garante
   que o último conteúdo (legal) para acima dela. */
.ces-chain{position:fixed;left:0;right:0;bottom:8px;z-index:6;text-align:center;
  font-family:'Poppins';font-size:.62rem;font-weight:500;letter-spacing:.04em;color:rgba(230,233,248,.42);pointer-events:none}
body.ces-login .ces-chain{bottom:0;padding:14px 10px 16px;
  background:linear-gradient(180deg,rgba(11,15,30,0) 0%,rgba(11,15,30,.72) 34%,rgba(11,15,30,.94) 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ces-chain i{font-style:normal;margin:0 .42rem;color:var(--ces-gold);opacity:.62}

/* ===== nav esquerda: sem scroll externo · 3 botões alinhados embaixo (glass+3D+cor+ícone) ===== */
#rl-left{display:flex!important;flex-direction:column!important;overflow:hidden!important}
#rl-left .b-folders{flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0}
#rl-left .b-footer{margin-top:auto!important;display:flex!important;justify-content:center!important;align-items:flex-end!important;gap:.6rem!important;
  padding:.4rem .6rem 7px!important;border-top:none!important}
#rl-left .b-footer .btn{width:48px;height:42px;border-radius:13px!important;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.055)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 5px 14px -4px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)!important;transition:.18s;font-size:1.05rem}
#rl-left .b-footer .btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)!important;
  box-shadow:0 10px 22px -5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)!important}
#rl-left .b-footer .toggleLeft{color:var(--ces-peri-br)!important}
#rl-left .b-footer .icon-folder-add{color:var(--ces-teal)!important}
#rl-left .b-footer .fontastic:not(.toggleLeft){color:var(--ces-gold)!important}

/* ===== legibilidade das CONFIGURAÇÕES (Lista de pastas etc.) ===== */
#V-SettingsPane{background:rgba(11,15,30,.93)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
#V-SettingsPane,#V-SettingsPane *{color:var(--ces-cream)!important}
#V-SettingsPane h1,#V-SettingsPane h2,#V-SettingsPane legend{color:#fff!important;opacity:1!important;font-weight:600}
#V-SettingsPane .btn{background:rgba(255,255,255,.07)!important;border:1px solid var(--ces-line)!important;border-radius:10px!important;color:var(--ces-cream)!important}
#V-SettingsPane .btn:hover{background:rgba(255,255,255,.13)!important;transform:translateY(-1px)}
#V-SettingsPane input:not([type=checkbox]){background:rgba(255,255,255,.06)!important;border:1px solid var(--ces-line)!important;color:#fff!important;border-radius:8px!important}

/* ===== Painel admin: botão "Nova conta" + modal (só raphael/abraao) ===== */
.ces-newacct{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.15rem .6rem .55rem;padding:.55rem;border-radius:11px;
  background:rgba(121,207,200,.13);border:1px solid rgba(121,207,200,.32)!important;color:var(--ces-teal)!important;
  font-family:'Poppins';font-weight:600;font-size:.78rem;cursor:pointer;transition:.18s;letter-spacing:.01em}
.ces-newacct:hover{background:rgba(121,207,200,.22);transform:translateY(-1px)}
.ces-newacct .ces-plus{font-size:1rem;line-height:1;font-weight:700}
.ces-modal{position:fixed;inset:0;z-index:99999;background:rgba(5,8,16,.62);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:20px}
.ces-modal-card{width:min(424px,94vw);background:rgba(16,20,42,.97);border:1px solid var(--ces-line);border-radius:18px;
  padding:1.6rem 1.6rem 1.5rem;box-shadow:0 50px 110px -30px rgba(0,0,0,.92);font-family:'Inter',system-ui,sans-serif}
.ces-modal-card h3{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-size:1.55rem;color:#fff;margin:0 0 .15rem}
.ces-modal-sub{color:var(--ces-muted);font-size:.74rem;margin:0 0 1.1rem}
.crm-mini{background:rgba(196,163,90,.12);border:1px solid rgba(196,163,90,.35);color:#D2AE64;border-radius:13px;padding:.28rem .7rem;font-size:.7rem;cursor:pointer;font-family:inherit;font-weight:600}
.crm-mini:hover{background:rgba(196,163,90,.22)}
.ces-crm-btn span{filter:saturate(1.1)}
.ces-modal-card label{display:block;color:var(--ces-cream);font-size:.73rem;margin:.7rem 0 .28rem;font-weight:500}
.ces-modal-card input,.ces-modal-card textarea,.ces-modal-card select{width:100%;box-sizing:border-box;padding:.7rem .85rem;border-radius:10px;border:1px solid var(--ces-line);
  background:rgba(255,255,255,.05);color:#fff;font-size:.9rem;font-family:'Inter'}
.ces-modal-card textarea{resize:vertical;min-height:60px}
.ces-modal-card select option{background:#10162C;color:#fff}
.ces-modal-card input:focus,.ces-modal-card textarea:focus,.ces-modal-card select:focus{outline:none;border-color:var(--ces-peri);box-shadow:0 0 0 3px rgba(139,146,200,.16);background:rgba(255,255,255,.08)}
.ces-modal-card input::placeholder,.ces-modal-card textarea::placeholder{color:#8990b3}
.ces-modal-email{display:flex;align-items:center;gap:.5rem}
.ces-modal-email input{flex:1}
.ces-modal-email span{color:var(--ces-muted);font-size:.82rem;white-space:nowrap}
/* login: campo localpart + sufixo @ces.eng.br fixo (só o nome antes do @) */
.ces-login-localwrap{position:relative;display:flex;align-items:center}
.ces-login-localwrap input{flex:1;padding-right:7.5rem!important}
.ces-login-suffix{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);
  color:var(--ces-gold,#D2AE64);font-size:.9rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:.92}
.ces-modal-msg{margin-top:.85rem;font-size:.8rem;min-height:1.1rem;color:var(--ces-muted)}
.ces-modal-msg.ok{color:var(--ces-teal);font-weight:600}.ces-modal-msg.err{color:#FF8A80;font-weight:600}
.ces-modal-actions{display:flex;gap:.6rem;margin-top:1.25rem;justify-content:flex-end}
.ces-modal-actions button{padding:.6rem 1.15rem;border-radius:10px;font-family:'Poppins';font-weight:600;font-size:.82rem;cursor:pointer;border:none;transition:.16s}
.ces-modal-actions .ca-cancel{background:rgba(255,255,255,.07);color:var(--ces-cream);border:1px solid var(--ces-line)!important}
.ces-modal-actions .ca-create{background:linear-gradient(180deg,var(--ces-gold),var(--ces-gold-d));color:#0B0F1E}
.ces-modal-actions .ca-create:hover{filter:brightness(1.06)}
.ces-modal-actions button:disabled{opacity:.5;cursor:wait}
.ces-modal-actions button.loading{opacity:.85;cursor:wait}
/* jornada da foto: dropzone + miniaturas + spinner (mobile-first, alvo do polegar generoso) */
/* CVO 13/06: botões câmera/anexo (foto direto da câmera no celular) */
.pt-lbl{font-size:.62rem;color:var(--ces-muted,#9aa0bf);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ponto-row input,.ponto-row select{background:rgba(255,255,255,.05);border:1px solid rgba(196,163,90,.2);border-radius:7px;color:var(--ces-cream,#F3F4FB);padding:6px 8px;font-size:.82rem;font-family:inherit}
.ces-cap-row{display:flex;gap:.5rem;margin:.5rem 0 .2rem}
.ces-cap-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem;border-radius:11px;cursor:pointer;
  font-size:.86rem;font-weight:600;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:.14s;border:1px solid rgba(210,174,100,.4)}
.ces-cap-btn#rdo-cam,.ces-cap-btn#pt-cam,.ces-cap-btn#mat-cam{background:linear-gradient(135deg,var(--ces-gold,#D2AE64),#B4924A);color:#1a1408;border-color:transparent}
.ces-cap-btn.ces-cap-alt{background:rgba(255,255,255,.05);color:var(--ces-cream,#F3F4FB)}
.ces-cap-btn:active{transform:scale(.97)}
.ces-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;
  border:1.5px dashed var(--ces-line);border-radius:14px;padding:1.15rem 1rem;margin:.35rem 0 .2rem;cursor:pointer;
  background:rgba(255,255,255,.025);transition:.16s;min-height:84px;-webkit-tap-highlight-color:transparent}
.ces-drop:active{transform:scale(.985)}
.ces-drop:hover{border-color:var(--ces-gold);background:rgba(212,174,100,.06)}
.ces-drop-ic{color:var(--ces-gold);opacity:.9;display:flex}
.ces-drop-ic svg{width:24px;height:24px}
.ces-drop-t{font-family:'Poppins';font-weight:600;font-size:.84rem;color:var(--ces-cream)}
.ces-drop-s{font-size:.66rem;color:var(--ces-muted)}
.ces-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.55rem 0 .1rem}
.ces-thumb{position:relative;width:70px;height:70px;border-radius:11px;overflow:hidden;border:1px solid var(--ces-line);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;flex-direction:column}
.ces-thumb img{width:100%;height:100%;object-fit:cover}
.ces-thumb-doc{font-family:'Poppins';font-weight:700;font-size:.72rem;color:var(--ces-gold);letter-spacing:.04em}
.ces-thumb-nm{position:absolute;bottom:0;left:0;right:0;font-size:.54rem;color:var(--ces-cream);background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);padding:8px 4px 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ces-thumb-x{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(8,12,24,.82);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent}
.ces-thumb-x:active{transform:scale(.88)}
.ces-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(11,15,30,.35);border-top-color:#0B0F1E;border-radius:50%;animation:cesSpin .7s linear infinite;vertical-align:-2px;margin-right:5px}
@keyframes cesSpin{to{transform:rotate(360deg)}}

/* =========================================================
   2) INBOX estilo Gmail (sempre, exceto na porta)
   ========================================================= */
#rl-app, .b-folders, .messageList, .b-toolbar, #rl-right, #rl-left, .b-message-view{
  font-family:'Inter',system-ui,sans-serif!important}

/* coluna esquerda / nav — vidro translúcido sobre a paisagem */
#rl-left{background:rgba(9,13,26,.55)!important;-webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%);
  border-right:1px solid var(--ces-line)!important;padding-top:.5rem;position:relative;z-index:1;overflow-x:hidden!important}

/* COMPOSE — pílula dourada estilo Gmail (mata o verde) */
a.buttonCompose,a.buttonCompose.btn-success{
  background:linear-gradient(180deg,var(--ces-gold),var(--ces-gold-d))!important;color:#0B0F1E!important;
  border:none!important;border-radius:999px!important;font-weight:600!important;font-size:.9rem!important;
  padding:.7rem 1.4rem!important;margin:.55rem .6rem .7rem!important;
  box-shadow:0 8px 22px rgba(196,163,90,.34)!important;min-height:46px;letter-spacing:.01em;transition:.2s}
a.buttonCompose:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* lista de pastas — linhas Gmail, seleção em pílula dourada */
.b-folders-system,.b-folders-user{padding:.15rem .4rem}
.b-folders li a,.b-folders-system li a{border-radius:0 999px 999px 0!important;padding:.5rem .8rem!important;
  color:var(--ces-cream)!important;font-weight:500;font-size:.88rem;transition:.15s}
.b-folders li a:hover{background:rgba(139,146,200,.12)!important}
.b-folders li.selected > a,.b-folders li a.selected,.b-folders .selected > .e-link{
  background:rgba(210,174,100,.18)!important;color:#fff!important;font-weight:700!important}
.b-folders .e-counter,.b-folders .badge{background:var(--ces-gold)!important;color:#0B0F1E!important;
  border-radius:999px!important;font-weight:700;font-size:.7rem;padding:.05rem .45rem}

/* busca — barra arredondada Gmail no topo da lista */
input.inputSearch,#folderSearchInput{
  background:rgba(255,255,255,.06)!important;border:1px solid var(--ces-line)!important;
  border-radius:999px!important;color:#fff!important;padding:.55rem 1rem!important}
input.inputSearch:focus{border-color:var(--ces-peri)!important;background:rgba(255,255,255,.1)!important;
  box-shadow:0 0 0 3px rgba(139,146,200,.14)!important}
input.inputSearch::placeholder,#folderSearchInput::placeholder{color:#8990b3!important}

/* toolbars vidro + botões que RESPIRAM e têm COR por função */
.b-toolbar,.b-footer,.thm-message-list-top-toolbar,.thm-message-list-bottom-toolbar{
  background:rgba(16,20,42,.55)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  background-image:none!important;border-color:var(--ces-line)!important;padding:.4rem .45rem!important}
.b-toolbar .btn:not(.buttonCompose),.top-toolbar .btn:not(.buttonCompose),.btn-toolbar .btn:not(.buttonCompose),.thm-message-list-top-toolbar .btn:not(.buttonCompose){
  border-radius:13px!important;margin:0 3px!important;padding:.42rem .56rem!important;min-width:38px;
  background:rgba(255,255,255,.07)!important;-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)!important;
  color:var(--ces-peri-br)!important;transition:.16s}
.b-toolbar .btn:not(.buttonCompose):hover,.top-toolbar .btn:not(.buttonCompose):hover,.btn-toolbar .btn:not(.buttonCompose):hover,.thm-message-list-top-toolbar .btn:not(.buttonCompose):hover{
  background:rgba(255,255,255,.14)!important;transform:translateY(-1px);
  box-shadow:0 8px 18px -4px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22)!important}
.b-toolbar .btn.disabled,.top-toolbar .btn.disabled{opacity:.5}
/* cores semânticas (classe adicionada via JS por título) */
#rl-app .ces-act-trash{color:#FF8A80!important}#rl-app .ces-act-trash:hover{background:rgba(255,138,128,.16)!important}
#rl-app .ces-act-spam{color:#FFC65A!important}#rl-app .ces-act-spam:hover{background:rgba(255,198,90,.16)!important}
#rl-app .ces-act-archive{color:#79CFC8!important}#rl-app .ces-act-archive:hover{background:rgba(121,207,200,.16)!important}
#rl-app .ces-act-move{color:#AEB4E4!important}#rl-app .ces-act-contacts{color:#AEB4E4!important}
#rl-app .ces-act-reload{color:#9FE0D8!important}#rl-app .ces-act-cfg{color:var(--ces-gold)!important}
#rl-app .ces-act-more{color:#C9CEEC!important}

/* rótulo da função embaixo de cada botão (pequeno; o tooltip continua via title=) */
.b-toolbar .btn[data-label],.top-toolbar .btn[data-label],.btn-toolbar .btn[data-label],#rl-left .b-footer .btn[data-label]{
  display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:2px!important;height:auto!important;min-height:48px;min-width:48px!important;padding:.32rem .4rem!important;line-height:1.05}
.b-toolbar .btn[data-label]::after,.top-toolbar .btn[data-label]::after,.btn-toolbar .btn[data-label]::after,#rl-left .b-footer .btn[data-label]::after{
  content:attr(data-label);font-family:'Poppins';font-size:.5rem;font-weight:500;letter-spacing:.01em;opacity:.92;white-space:nowrap;color:inherit}

/* coluna direita / lista — vidro translúcido (paisagem aparece) + respiro embaixo */
#rl-right{background:transparent!important;position:relative;z-index:1;overflow:hidden!important}
.messageList{background:rgba(11,15,30,.38)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  overflow-x:hidden!important;padding-bottom:38px!important}

/* LINHAS DE MENSAGEM estilo Gmail */
.messageListItem{
  border-bottom:1px solid rgba(255,255,255,.05)!important;padding:.62rem .8rem!important;
  border-radius:10px;margin:1px .35rem;transition:.12s;color:var(--ces-muted)}
.messageListItem:hover{background:rgba(139,146,200,.10)!important;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.messageListItem.selected,.messageListItem.focused{background:rgba(139,146,200,.16)!important}
.messageListItem .subject{color:var(--ces-cream)!important;font-weight:500}
.messageListItem .from,.messageListItem .sender{color:var(--ces-cream)!important}
.messageListItem .date{color:#8990b3!important;font-size:.78rem}
.messageListItem .preview,.messageListItem .snippet{color:#8990b3!important}
/* não-lidas: negrito e mais brilhante (Gmail) */
.messageListItem.unseen{color:#fff!important}
.messageListItem.unseen .subject,.messageListItem.unseen .from,.messageListItem.unseen .sender{
  color:#fff!important;font-weight:700!important}
.messageListItem.unseen::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--ces-gold)}
.messageListItem .flagParent .icon-star,.messageListItem .flagParent{color:var(--ces-gold)!important}

/* painel de leitura — bem translúcido (paisagem aparece), SEM barra de scroll */
#rl-right .b-message-view,.messageView,#V-MailMessageView{background:rgba(11,15,30,.30)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ces-cream)!important;overflow:hidden!important}
/* o corpo do e-mail rola internamente quando longo */
#V-MailMessageView .b-text,#V-MailMessageView .b-content,.b-message-view .b-content{overflow-y:auto!important;max-height:100%!important}
.b-message-view .subject,.messageView .subject{font-family:'Inter';font-weight:600;color:#fff!important}
.b-message-view .b-content,.messageView .b-text{color:var(--ces-cream)!important;line-height:1.6}

/* topbar/usuário */
#rl-app .b-toolbar .e-account,.topbar,#rl-top{background:var(--ces-navy2)!important}

/* scrollbars: finas, sutis, só quando precisa (natural/automático) */
*{scrollbar-width:thin;scrollbar-color:rgba(139,146,200,.30) transparent}
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-thumb{background:rgba(139,146,200,.26);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:rgba(139,146,200,.5)}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-corner{background:transparent}

/* ============================================================
   MOBILE (rl-mobile) — leitura na palma da mão, experiência app
   ============================================================ */
@media (max-width: 640px) {
  /* ═══ MENU = RAIL DE ÍCONES sempre visível (igual CRM Piçarras Hills), CVO 08/06 ═══
   * COLAPSADO (padrão) = trilho fino de 58px à esquerda, SÓ ÍCONES (sem texto).
   * EXPANDIDO (toque no ☰) = 84vw com ícone + rótulo. Nunca some pra fora da tela;
   * a seta confusa some — o trilho É o menu. */
  .rl-mobile #rl-left{
    position:fixed!important;top:0;left:0;bottom:0;width:58px;z-index:60;
    transform:none!important;transition:width .24s cubic-bezier(.4,0,.2,1);
    box-shadow:2px 0 18px rgba(0,0,0,.45);overflow:hidden!important;
    background:rgba(9,13,26,.985)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    padding-top:env(safe-area-inset-top)!important}
  /* expandido: a classe rl-left-panel-disabled SAI quando o usuário abre o painel */
  .rl-mobile:not(.rl-left-panel-disabled) #rl-left{width:84vw;max-width:320px;box-shadow:18px 0 55px rgba(0,0,0,.6)}
  /* a lista/mensagem começam DEPOIS do trilho (não ficam atrás dele) */
  .rl-mobile #rl-right{left:58px!important;right:0!important;width:calc(100% - 58px)!important}
  /* quando expande, um véu escurece a lista atrás */
  .rl-mobile:not(.rl-left-panel-disabled) #rl-right::before{
    content:"";position:fixed;inset:0;background:rgba(4,7,16,.5);z-index:55}

  /* PASTAS como ÍCONES: injeta um glifo por tipo de pasta; no trilho some o texto. */
  .rl-mobile #rl-left .b-folders li a,.rl-mobile #rl-left .b-folders-system li a,.rl-mobile #rl-left .e-link{
    display:flex!important;align-items:center;gap:.7rem;white-space:nowrap;overflow:hidden;
    padding:.7rem .9rem!important;border-radius:0 16px 16px 0!important;min-height:46px}
  .rl-mobile #rl-left .b-folders li a::before,.rl-mobile #rl-left .e-link::before{
    flex:0 0 24px;width:24px;text-align:center;font-size:1.15rem;line-height:1;opacity:.92}
  /* glifos por pasta (emoji = zero dependência de fonte de ícone) */
  .rl-mobile #rl-left li a::before{content:"📁"}
  .rl-mobile #rl-left li[data-name="INBOX" i] a::before,
  .rl-mobile #rl-left .b-folders-system li:nth-child(1) a::before{content:"📥"}
  .rl-mobile #rl-left .b-folders-system li:nth-child(2) a::before{content:"📤"}
  .rl-mobile #rl-left .b-folders-system li:nth-child(3) a::before{content:"📝"}
  .rl-mobile #rl-left .b-folders-system li:nth-child(4) a::before{content:"⚠️"}
  .rl-mobile #rl-left .b-folders-system li:nth-child(5) a::before{content:"🗑️"}
  /* COLAPSADO: esconde o TEXTO das pastas (sobra só o ícone, centralizado) */
  .rl-mobile.rl-left-panel-disabled #rl-left .b-folders li a,
  .rl-mobile.rl-left-panel-disabled #rl-left .e-link{justify-content:center;padding:.7rem 0!important}
  .rl-mobile.rl-left-panel-disabled #rl-left .b-folders li a > *:not(.flag-icon),
  .rl-mobile.rl-left-panel-disabled #rl-left .e-link .e-counter{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* esconde o texto-nó do Knockout (nó de texto solto) no colapsado via font-size 0 + ícone repõe */
  .rl-mobile.rl-left-panel-disabled #rl-left .b-folders li a{font-size:0!important}
  .rl-mobile.rl-left-panel-disabled #rl-left .b-folders li a::before{font-size:1.25rem!important}
  /* badge de não-lidas vira um pontinho no trilho colapsado */
  .rl-mobile.rl-left-panel-disabled #rl-left .e-counter,.rl-mobile.rl-left-panel-disabled #rl-left .badge{
    position:absolute!important;top:6px;right:8px;min-width:8px;height:8px;padding:0!important;border-radius:50%!important;
    font-size:0!important;background:var(--ces-gold,#D2AE64)!important}

  /* botões CUSTOM do plugin (RDO/Ponto/Materiais/Trocar senha/Nova obra/Contas) no rail:
     no COLAPSADO viram SÓ ÍCONE (o texto cortado some); centralizados, toque 44px.
     As ações também estão no FAB; aqui ficam como atalhos limpos no trilho. */
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-mat,
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-newacct,
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-chpw{
    width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;margin:4px auto!important;
    display:flex!important;align-items:center;justify-content:center;border-radius:13px!important;
    font-size:0!important;overflow:hidden}
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-mat svg,
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-newacct svg,
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-chpw svg{width:22px!important;height:22px!important;margin:0!important}
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-mat span,
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-newacct span,
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-chpw span{display:none!important}
  /* EXPANDIDO: voltam a mostrar ícone + rótulo, confortáveis */
  .rl-mobile:not(.rl-left-panel-disabled) #rl-left .ces-mat,
  .rl-mobile:not(.rl-left-panel-disabled) #rl-left .ces-newacct,
  .rl-mobile:not(.rl-left-panel-disabled) #rl-left .ces-chpw{
    width:auto!important;display:flex!important;align-items:center;gap:.6rem;justify-content:flex-start;
    padding:.6rem .9rem!important;font-size:.85rem!important}
  /* navhead C&S: no colapsado, só o selo (sem o texto "C&S Webmail" cortado) */
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-navhead{justify-content:center;padding:.6rem 0!important}
  .rl-mobile.rl-left-panel-disabled #rl-left .ces-navhead .ces-wm{display:none!important}

  /* "Nenhum contato encontrado" / autocomplete vazio de busca: nunca poluir a lista */
  .rl-mobile .inputosaurus-container .ui-autocomplete,
  .rl-mobile .b-search .ui-menu,.rl-mobile ul.ui-autocomplete:empty,
  .rl-mobile .autocomplete-suggestions,
  .rl-mobile [class*="suggestion"]:empty{display:none!important}
  .rl-mobile ul.ui-autocomplete .ui-menu-item:only-child a[class*="empty"],
  .rl-mobile .ui-autocomplete .no-results{display:none!important}
  /* rótulos dos botões somem no celular (só ícone -> respiro) */
  .rl-mobile .btn[data-label]::after{display:none!important}
  .rl-mobile .b-toolbar .btn,.rl-mobile .btn-toolbar .btn,.rl-mobile .top-toolbar .btn{
    padding:.55rem!important;min-width:44px;min-height:44px;border-radius:12px!important}
  /* linhas de e-mail: toque generoso, barra de cor discreta */
  .rl-mobile .messageList .e-item,.rl-mobile .messageListItem{
    padding:.72rem .85rem!important;min-height:64px;border-left-width:3px!important}
  .rl-mobile .messageList .e-item .subject,.rl-mobile .messageListItem .subject{font-size:.92rem}
  /* rodapé da cadeia some no inbox (espaço é ouro); fica no login */
  .rl-mobile body:not(.ces-login) .ces-chain{display:none}
  /* navhead C&S compacto + botões de senha confortáveis */
  .rl-mobile .ces-navhead{padding:.65rem .85rem}
  .rl-mobile .ces-newacct,.rl-mobile .ces-chpw{min-height:44px;font-size:.82rem}
  /* busca confortável */
  .rl-mobile .search-input,.rl-mobile input[type=search]{font-size:16px!important}
  /* cartão de login respira nas bordas da tela */
  .rl-mobile body.ces-login #V-Login{width:calc(100vw - 28px)!important;max-width:400px}

  /* ── INBOX mais CALMO: tira o "boxe" dourado, vira lista limpa estilo app ── */
  .rl-mobile .messageList .e-item,.rl-mobile .messageListItem{
    border:0!important;border-radius:0!important;margin:0!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
    padding:.8rem .9rem!important;min-height:66px}
  .rl-mobile .messageListItem.selected,.rl-mobile .messageListItem.focused{
    background:rgba(139,146,200,.14)!important}
  /* checkbox de seleção some no celular (toque abre; seleção é via long-press nativo) */
  .rl-mobile .messageListItem .checkboxMessage,.rl-mobile .messageListItem input[type=checkbox]{display:none!important}
  /* assunto e remetente com hierarquia clara */
  .rl-mobile .messageListItem .subject{font-size:.95rem!important;font-weight:600!important;line-height:1.25}
  .rl-mobile .messageListItem .date{font-size:.72rem!important}
  /* não-lida: SÓ negrito + barra dourada à esquerda. Mata o "boxe" escuro nativo do
     SnappyMail no assunto (que no celular fica gritando) — calma estilo Gmail. */
  .rl-mobile .messageListItem.unseen{border-left:3px solid var(--ces-gold)!important}
  .rl-mobile .messageListItem.unseen .subject,
  .rl-mobile .messageListItem.unseen .subjectParent,
  .rl-mobile .messageListItem.unseen span.subject{
    background:transparent!important;box-shadow:none!important;border-radius:0!important;
    padding-left:0!important;padding-right:0!important}

  /* ═══ LEITURA CONSERTADA (CVO 08/06) — classes REAIS deste SnappyMail 2.38 ═══
   * O caos branco-no-branco era .messageItemHeader + .bodySubHeader com bg #EEEEEE
   * (cinza claro) + duas empilhadas (overlap). Eu mirava .subjectParent/.b-header (NÃO existem
   * aqui). Agora: tudo navy sólido, texto claro, fluxo vertical sem sobreposição. */
  .rl-mobile #V-MailMessageView,.rl-mobile .messageView{
    background:#0B1020!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    display:flex!important;flex-direction:column!important;color:var(--ces-cream,#F7F3EC)!important}
  /* header do e-mail (assunto + remetente) e sub-header (data/para/tags/anexos): NAVY sólido */
  .rl-mobile .messageView .messageItemHeader,.rl-mobile #V-MailMessageView .messageItemHeader,
  .rl-mobile .messageView .bodySubHeader,.rl-mobile #V-MailMessageView .bodySubHeader{
    background:#0B1020!important;color:var(--ces-cream,#F7F3EC)!important;
    position:static!important;float:none!important;width:auto!important;height:auto!important;
    min-height:0!important;max-height:none!important;overflow:visible!important;
    box-shadow:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
    padding:.55rem .9rem!important;margin:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* texto dentro dos headers: claro e legível (era cinza-escuro sobre cinza-claro = fantasma) */
  .rl-mobile .messageView .messageItemHeader *,.rl-mobile .messageView .bodySubHeader *,
  .rl-mobile #V-MailMessageView .messageItemHeader *,.rl-mobile #V-MailMessageView .bodySubHeader *{
    color:var(--ces-cream,#F7F3EC)!important;background:transparent!important;text-shadow:none!important}
  /* o ASSUNTO salta */
  .rl-mobile .messageView .messageItemHeader .subject,.rl-mobile #V-MailMessageView .subject{
    font-family:'Inter',system-ui,sans-serif!important;font-weight:700!important;font-size:1.05rem!important;
    color:#fff!important;line-height:1.32!important;white-space:normal!important;overflow:visible!important;display:block!important}
  .rl-mobile .messageView .messageItemHeader a,.rl-mobile #V-MailMessageView .bodySubHeader a{color:#7FB5E6!important}
  /* corpo do e-mail: respiro de leitura */
  .rl-mobile .messageView .b-text,.rl-mobile #V-MailMessageView .b-text,
  .rl-mobile .messageView .bodyText,.rl-mobile #V-MailMessageView .bodyText{
    background:#0B1020!important;color:var(--ces-cream,#F7F3EC)!important;
    padding:.5rem .9rem 1.6rem!important;font-size:1rem!important;line-height:1.62!important;overflow-y:auto!important}

  /* ── BARRA DE AÇÃO da leitura (.top-toolbar): só os ESSENCIAIS, rotulados, grandes ── */
  .rl-mobile #V-MailMessageView .top-toolbar,.rl-mobile .messageView .top-toolbar{
    background:#0B1020!important;padding:.35rem .4rem!important;min-height:52px!important;
    display:flex!important;align-items:center;gap:.3rem!important;flex-wrap:nowrap!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* esconde tudo que NÃO é essencial na barra de leitura (lixo/spam/mover/tags/config/setas) */
  .rl-mobile #V-MailMessageView .top-toolbar .btn:not(.ces-essential):not(.toggleLeft),
  .rl-mobile .messageView .top-toolbar .btn:not(.ces-essential):not(.toggleLeft){display:none!important}
  /* essenciais (Responder/Resp.todos/Encaminhar): pílula com rótulo, toque 44px */
  .rl-mobile .ces-essential{
    display:inline-flex!important;align-items:center;justify-content:center;gap:.4rem!important;
    min-width:auto!important;height:44px!important;padding:0 1rem!important;margin:0 .15rem!important;
    border-radius:12px!important;background:rgba(210,174,100,.12)!important;
    border:1px solid rgba(210,174,100,.4)!important;color:var(--ces-gold,#D2AE64)!important;font-size:0!important}
  .rl-mobile .ces-essential[data-label]::after{
    content:attr(data-label)!important;font-size:.82rem!important;font-weight:600!important;color:inherit!important}
  /* Responder = ação primária (dourado cheio) */
  .rl-mobile .ces-essential.ces-act-reply{
    background:linear-gradient(135deg,var(--ces-gold,#D2AE64),#B4924A)!important;color:#1a1408!important;border:0!important}

  /* ── SPEED-DIAL DE CANTEIRO: tudo ao alcance do polegar (mobile é a forma principal) ── */
  /* container PASS-THROUGH (cicatriz 10/06: o bloco invisível de ~173x300 engolia taps — até o
     botão Desfazer do envio ficava morto). Só o botão principal e os itens abertos clicam. */
  .ces-dial{position:fixed!important;right:16px;bottom:calc(18px + env(safe-area-inset-bottom))!important;top:auto!important;left:auto!important;z-index:71;
    display:flex!important;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
  .ces-dial-main{width:60px!important;height:60px!important;flex:0 0 60px!important;border-radius:20px;border:0;cursor:pointer;pointer-events:auto;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--ces-gold,#D2AE64),#B4924A);color:#1a1408;
    box-shadow:0 12px 28px -6px rgba(210,174,100,.6),0 4px 12px rgba(0,0,0,.45);
    transition:transform .18s cubic-bezier(.4,0,.2,1)}
  .ces-dial.open .ces-dial-main{transform:rotate(45deg) scale(1.04)}
  .ces-dial-main svg{width:28px;height:28px}
  /* itens escondidos por padrão; "explodem" pra cima quando abre */
  .ces-dial-item{display:flex;align-items:center;gap:10px;border:0;cursor:pointer;background:transparent;
    padding:0;opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;
    transition:opacity .16s,transform .16s}
  .ces-dial.open .ces-dial-item{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .ces-dial-lbl{font-family:'Poppins','Inter',system-ui,sans-serif;font-size:.8rem;font-weight:600;color:#F7F3EC;
    background:rgba(11,16,32,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    padding:.5rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,.4)}
  .ces-dial-ic{width:48px;height:48px;flex:0 0 48px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    background:rgba(20,28,46,.96);border:1px solid rgba(210,174,100,.4);color:var(--ces-gold,#D2AE64);
    box-shadow:0 6px 18px rgba(0,0,0,.4)}
  .ces-dial-ic svg{width:22px;height:22px}
  .ces-dial-gl{font-size:20px;line-height:1;font-style:normal}
  #ces-dial-backdrop{position:fixed;inset:0;z-index:70;background:rgba(4,7,16,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  /* some quando a gaveta de pastas abre (evita sobreposição) */
  .rl-mobile:not(.rl-left-panel-disabled) .ces-dial{opacity:0;pointer-events:none}
  body.ces-login .ces-dial{display:none!important}

  /* ── JORNADA DA FOTO: file inputs viram zona de toque grande (câmera/galeria) no celular ── */
  .ces-modal input[type=file]{display:block;width:100%;padding:.85rem 1rem;border-radius:12px;
    border:1.5px dashed rgba(210,174,100,.5);background:rgba(210,174,100,.07);color:#D6CDB8;
    font-size:.92rem;min-height:52px;-webkit-appearance:none}
  .ces-modal input[type=file]::file-selector-button{margin-right:.7rem;padding:.5rem .9rem;border-radius:9px;
    border:0;background:linear-gradient(135deg,var(--ces-gold,#D2AE64),#B4924A);color:#1a1408;font-weight:600;font-size:.84rem}
  /* campos do modal: toque confortável (44px+) p/ 1 mão em obra */
  .ces-modal input,.ces-modal select,.ces-modal textarea{font-size:16px!important;min-height:46px}
  .ces-modal .ponto-row input,.ces-modal .ponto-row select{min-height:42px}
  .ces-modal-card{max-height:88vh;overflow-y:auto}
  .ces-modal-actions button{min-height:48px;font-size:.92rem}

  /* ═══════════════════════════════════════════════════════════════════════
   * TOPO LIMPO (CVO 08/06): "tela o mais limpa possível, sem poluição".
   * SnappyMail 2.38 empilha TODA a toolbar do desktop no topo mobile = caos.
   * Regra: na LISTA, topo = só ☰ (gaveta) + compor. Na LEITURA, topo = só
   * ← voltar + Responder + Encaminhar. Tudo o mais (excluir/spam/arquivar/
   * mover/marcar/pastas/ordenar) vai pra GAVETA (#rl-left), onde já estão as pastas.
   * ══════════════════════════════════════════════════════════════════════ */
  /* 1) ESCONDE os botões secundários da toolbar do topo no mobile.
        mantém: compose (FAB próprio cobre), toggleLeft (☰), e os essenciais. */
  .rl-mobile .b-toolbar .btn:not(.buttonCompose):not(.toggleLeft):not(.ces-essential):not(.ces-act-reload),
  .rl-mobile .btn-toolbar .btn:not(.buttonCompose):not(.toggleLeft):not(.ces-essential):not(.buttonContacts),
  .rl-mobile .top-toolbar .btn:not(.buttonCompose):not(.toggleLeft):not(.ces-essential){
    display:none!important}
  /* o seletor de ordenação / dropdowns de sistema poluindo o topo: fora no mobile */
  .rl-mobile .b-message-list-top .b-toolbar .e-sort,
  .rl-mobile .b-message-list-top select,
  .rl-mobile .checkboxCheckAll,.rl-mobile .b-toolbar .dropdown-toggle{display:none!important}
  /* 2) a faixa de busca "Nenhum contato" / autocomplete não fica gritando no topo */
  .rl-mobile .b-search .e-suggestions,.rl-mobile .inputosaurus-container .ui-menu,
  .rl-mobile .autocomplete-suggestions{display:none!important}
  .rl-mobile .b-search .inputosaurus-container{min-height:0!important}

  /* 3) ☰ (toggleLeft) bem visível e grande — é a casa de tudo agora */
  .rl-mobile .toggleLeft{display:inline-flex!important;align-items:center;justify-content:center;
    min-width:46px!important;min-height:46px!important;border-radius:13px!important;
    color:var(--ces-gold,#D2AE64)!important;font-size:1.25rem!important}
  .rl-mobile .toggleLeft[data-label]::after{display:none!important}

  /* 4) LEITURA: barra de ação enxuta — só os essenciais (Responder/Encaminhar/Resp.todos),
        rotulados, com toque generoso. O ← voltar é o próprio toggle de lista do SnappyMail. */
  .rl-mobile .b-message-view .ces-essential,.rl-mobile #V-MailMessageView .ces-essential{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-width:auto!important;height:42px!important;padding:0 .9rem!important;margin:.2rem .25rem!important;
    border-radius:11px!important;background:rgba(210,174,100,.12)!important;
    border:1px solid rgba(210,174,100,.35)!important;color:var(--ces-gold,#D2AE64)!important}
  .rl-mobile .b-message-view .ces-essential[data-label]::after,
  .rl-mobile #V-MailMessageView .ces-essential[data-label]::after{
    display:inline!important;content:attr(data-label)!important;font-size:.8rem!important;
    font-weight:600!important;margin-left:.4rem!important;color:var(--ces-gold,#D2AE64)!important}
  .rl-mobile .b-message-view .ces-act-reply,.rl-mobile #V-MailMessageView .ces-act-reply{
    background:linear-gradient(135deg,var(--ces-gold,#D2AE64),#B4924A)!important;color:#1a1408!important;border:0!important}
  .rl-mobile .b-message-view .ces-act-reply[data-label]::after{color:#1a1408!important}

  /* 5) LISTA mais limpa ainda: tipografia app, sem ruído visual */
  .rl-mobile .messageList{background:#0B1020!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important}
  .rl-mobile .messageListItem{background:transparent!important;box-shadow:none!important}
  .rl-mobile .messageListItem .flags,.rl-mobile .messageListItem .threads,
  .rl-mobile .messageListItem .b-flag-icon:not(.unseen){opacity:.5}
  /* topo da lista (faixa com seleção/ordenação) some — sobra título da pasta + ☰ + buscar */
  .rl-mobile .b-message-list-top{padding:.2rem .5rem!important;min-height:46px!important;background:#0B1020!important;border:0!important}

  /* 6) GAVETA (#rl-left) = casa das ações secundárias + pastas. Header da gaveta enxuto. */
  .rl-mobile #rl-left{padding-top:env(safe-area-inset-top)!important}
  .rl-mobile #rl-left .b-footer{flex-wrap:wrap!important;gap:.5rem!important;padding:.6rem!important}
}
/* desktop: sem speed-dial (as ações estão na sidebar) */
@media (min-width: 641px){ .ces-dial{display:none!important} }
/* iOS PWA standalone: respeita o notch (safe-area) */
@media (display-mode: standalone) {
  #rl-left,.ces-navhead{padding-top:calc(env(safe-area-inset-top) + .5rem)}
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* ============ Botão Instalar app + guia visual ============ */
.ces-install{display:inline-flex;align-items:center;gap:.4rem;color:var(--ces-gold)!important;
  border:1px solid rgba(210,174,100,.45)!important;background:rgba(210,174,100,.14)!important;
  border-radius:11px!important;padding:.4rem .7rem!important}
.ces-install:hover{background:rgba(210,174,100,.24)!important;color:#fff!important}
.ces-install-lbl{font-family:'Poppins';font-size:.78rem;font-weight:600;white-space:nowrap}
.rl-mobile .ces-install-lbl{display:none}
.ces-guide-card{max-width:430px}
.ces-guide-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.2rem}
.ces-guide-head h3{margin:0}
.ces-guide-intro{color:var(--ces-muted);font-size:.84rem;margin:.35rem 0 1.05rem;line-height:1.5}
.ces-steps{display:flex;flex-direction:column;gap:.85rem}
.ces-step{display:flex;gap:.7rem;align-items:flex-start}
.ces-step-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--ces-gold),var(--ces-gold-d));color:#191305;font-weight:700;
  font-family:'Poppins';font-size:.85rem;display:flex;align-items:center;justify-content:center}
.ces-step-b{flex:1;min-width:0}
.ces-step-b b{color:var(--ces-cream);font-size:.92rem}
.ces-step-d{color:var(--ces-muted);font-size:.8rem;line-height:1.45;margin-top:.15rem}
.ces-glyph{display:inline-flex;vertical-align:middle;padding:.12rem .32rem;border-radius:6px;
  background:rgba(255,255,255,.09);margin:0 .15rem}
.ces-glyph svg{vertical-align:middle}
.ces-step-mock{display:inline-flex;align-items:center;gap:.55rem;margin-top:.45rem;padding:.55rem .75rem;
  border-radius:11px;background:#f3f4f8;color:#1a1a22;font-size:.85rem;font-weight:500;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.ces-guide-switch{margin-top:1.1rem;text-align:center;color:var(--ces-muted);font-size:.78rem}
.ces-guide-switch a{color:var(--ces-teal);font-weight:600;text-decoration:none}

/* ============ Links legais (LGPD) ============ */
.ces-legal{margin-top:.7rem;text-align:center;font-size:.7rem;color:var(--ces-muted);line-height:1.5;max-width:340px;margin-left:auto;margin-right:auto}
.ces-legal a{color:var(--ces-teal);text-decoration:none;border-bottom:1px dotted rgba(121,207,200,.4)}
.ces-chain-legal{display:block;margin-top:.35rem;font-size:.92em;opacity:.9}
.ces-chain-legal a{color:var(--ces-teal);text-decoration:none}
.ces-chain-legal a:hover{text-decoration:underline}

/* ============ Solicitar materiais (dor do residente) ============ */
.ces-mat{display:flex;align-items:center;justify-content:center;gap:.45rem;width:calc(100% - 1.4rem);
  margin:.5rem .7rem .2rem;padding:.7rem;border-radius:12px;border:1px solid rgba(210,174,100,.5);
  background:linear-gradient(135deg,rgba(210,174,100,.22),rgba(210,174,100,.1));color:var(--ces-gold);
  font-family:'Poppins';font-size:.85rem;font-weight:600;cursor:pointer;transition:.16s}
.ces-mat:hover{background:linear-gradient(135deg,rgba(210,174,100,.34),rgba(210,174,100,.18));color:#fff}
.rl-mobile .ces-mat{min-height:46px}
.ces-mat-card{max-width:440px;max-height:86vh;overflow-y:auto}
.ces-sel{width:100%;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--ces-line);
  background:rgba(255,255,255,.06);color:#fff;font-size:.9rem}
.ces-sel option{background:#10162C;color:#fff}
#mat-itens{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.5rem}
.mat-row{display:flex;gap:.4rem;align-items:center}
.mat-row .mat-desc{flex:1;min-width:0}
.mat-row .mat-qtd{width:62px;flex:0 0 auto}
.mat-row .mat-un{width:54px;flex:0 0 auto}
.mat-row input{padding:.5rem .6rem;border-radius:9px;border:1px solid var(--ces-line);background:rgba(255,255,255,.06);color:#fff;font-size:.85rem}
.mat-del{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--ces-line);
  background:rgba(255,138,128,.12);color:#FF8A80;font-size:1.1rem;line-height:1;cursor:pointer}
.mat-del:hover{background:rgba(255,138,128,.24)}
.mat-add{margin-bottom:.4rem;padding:.4rem .8rem;border-radius:9px;border:1px dashed var(--ces-line);
  background:transparent;color:var(--ces-teal);font-family:'Poppins';font-size:.78rem;font-weight:600;cursor:pointer}
.mat-add:hover{background:rgba(121,207,200,.1)}
#ces-mat-modal textarea,#ces-mat-modal #mat-file{width:100%;padding:.55rem .7rem;border-radius:10px;
  border:1px solid var(--ces-line);background:rgba(255,255,255,.06);color:#fff;font-size:.85rem;font-family:inherit;box-sizing:border-box}
#ces-mat-modal #mat-file{padding:.5rem;color:var(--ces-muted)}
.mat-send{background:linear-gradient(135deg,var(--ces-gold),var(--ces-gold-d))!important;color:#191305!important;font-weight:600}