/* -------- Base / Dark (mantive o modo escuro coerente com a paleta) -------- */
:root {
  /* Fundos e cabeçalho */
  --header-dark: #1E1F20;
  --background-funnil: #262728;
  --background-funnil-two: #212224;
  --background-header: linear-gradient(90deg, #1c1d1e 50%, #202327 100%);

  /* Tipografia */
  --text-main: #F7F5F2;         /* off-white quente */
  --text-muted: #C8C6C2;

  /* Cores-chave da paleta (imagem) */
  --primary: #D39460;           /* terracota principal */
  --primary-contrast: #FFFFFF;
  --highlight-main: #D39460;    /* alias p/ compat */
  --highlight-degrade: #C67F49; /* terracota mais escura */
  --highlight-alt: #8F9686;     /* oliva suave (ícones/bordas) */

  /* CTA (botão salmão/brick da imagem) */
  --accent-cta: #C55248;
  --accent-cta-strong: #A73E36;

  /* Superfícies */
  --box-bg: #242528;
  --card-bg: #202226;
  --card-border: #2B2D31;

  /* Inputs / modais */
  --input-bg: #191A1C;
  --input-border: #2B2C2E;
  --modal-bg: #191A1C;
  --modal-border: #242528;

  /* Sombras / divisórias */
  --shadow-base: 0 2px 8px #0003;
  --modal-shadow: 0 8px 32px 0 rgba(0,0,0,.55), 0 2px 6px 0 #00000026;
  --divider: #2A2C2F;

  /* Scroll */
  --scroll-track: rgba(255,255,255,.08);
  --scroll-thumb: var(--primary);
  --scroll-thumb-hover: #C67F49;

  /* Gradientes de botão */
  --btn-primary-grad: linear-gradient(90deg, var(--primary), var(--accent-cta) 70%);
  --btn-secondary-grad: linear-gradient(90deg, #2b3134 70%, #22282b 100%);

  /* Status */
  --success: #57C257;
  --info: #6B7E6A;             /* oliva mais escuro */

  /* Itens do seu sistema (mantidos, mas alinhados) */
  --surface-0: var(--background-funnil);
  --surface-1: var(--box-bg);
  --surface-2: var(--card-bg);
  --on-surface: var(--text-main);
  --on-surface-muted: var(--text-muted);

  /* Chats/containers (ajustados ao dark quente) */
  --texto-info-principal: #F7F5F2;
  --background-image: transparent;
  --container-pesquisa-chats: #1C1E20;
  --barra-lateral-chats: #161718;
  --border-inbox-chats: transparent;
  --container-leads-chats: #191A1C;
  --conteudo-chat: #2A2C2F;
  --color-chat-selecionado: #C55248;

  /* Inputs redes (mantive seu contraste) */
  --box-input-redes: #FFFFFF;
  --texto-redes: #111;
}

/* -------- Light Mode (o visual da imagem) -------- */
html[data-theme="light"] {
  /* Fundos em bege/areia da imagem */
  --header-dark: #FBFAF8;        /* quase branco quente */
  --background-funnil: #F6EFE6;  /* bege claro (áreas amplas) */
  --background-funnil-two: #EDE3D7;
  --background-header: #FFFFFF;

  /* Tipografia */
  --text-main: #2B2B2B;          /* cinza-escuro neutro */
  --text-muted: #6B6F75;         /* cinza médio frio */

  /* Superfícies */
  --box-bg: #FFFFFF;
  --card-bg: #FBFAF8;
  --card-border: #E2CDB8;        /* borda bege/terracota clara */

  /* Inputs / modais */
  --input-bg: #FFFFFF;
  --input-border: #D9C8B7;       /* bege quente */
  --modal-bg: #FFFFFF;
  --modal-border: #E8D8C8;

  /* Sombras / divisórias */
  --modal-shadow: 0 4px 28px 0 #D7C7B833, 0 1.5px 6px 0 #CBB9A813;
  --shadow-base: 0 2px 8px #D7C7B8;
  --divider: #E8D8C8;

  /* Paleta (mesmas cores do dark para consistência) */
  --primary: #D39460;            /* títulos/realces */
  --primary-contrast: #FFFFFF;
  --highlight-main: #D39460;
  --highlight-degrade: #C67F49;
  --highlight-alt: #8F9686;      /* ícones/bordas verdes-oliva */

  /* CTA */
  --accent-cta: #C55248;
  --accent-cta-strong: #A73E36;

  /* Scroll */
  --scroll-track: #F4EADB;
  --scroll-thumb: var(--primary);
  --scroll-thumb-hover: #C67F49;

  /* Gradientes de botão no claro */
  --btn-primary-grad: linear-gradient(90deg, var(--primary), var(--accent-cta) 70%);
  --btn-secondary-grad: linear-gradient(90deg, #C9CFBF 70%, #B5BBAF 100%);

  /* Seus campos auxiliares */
  --texto-info-principal: #1F2328;
  --background-image: #000;
  --container-pesquisa-chats: #EFE8DD;
  --barra-lateral-chats: #F4F0EA;
  --border-inbox-chats: #CBB9A8;
  --container-leads-chats: #F0EBE3;
  --conteudo-chat: #EDE6DC;
  --color-chat-selecionado: #C55248;

  --box-input-redes: #1F2328;
  --texto-redes: #FFFFFF;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

a {
    text-decoration: none;
}

.barra-lateral-esquerda {
    width: 100px;
    min-width: 100px;
    background: linear-gradient( 160deg, #3A2E29 70%,   /* marrom escuro quente */   #4B3B34 100%   /* terracota queimada mais fechada */
    );
    box-shadow: 2px 0 16px #0003;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 14px 0;
    height: 100vh;
    position: fixed;
    z-index: 9;
    transition: width 0.2s;
}
.sidebar-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-big {
    width: 100%;
}


.content-wrapper {
    /* desloca o conteúdo para a direita, igual à largura da sidebar */
    margin-left: 98px;     
    /* garante que fique acima do fundo, mas abaixo da sidebar (se precisar) */
    position: relative;
    z-index: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding-bottom: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.logout-btn{
    background: var(--accent-cta); 
    color: var(--primary-contrast); 
    border:none;
    padding:9px 24px; 
    border-radius:16px; 
    font-size:.95em; 
    font-weight:600; 
    cursor:pointer;
    transition: filter .15s ease, transform .05s ease;
    margin-top:8px; 
    box-shadow: 0 2px 10px color-mix(in oklab, var(--accent-cta) 40%, transparent);
}
.logout-btn:hover{
    filter: brightness(1.05) saturate(1.02); 
}
.logout-btn:active{
    transform: scale(.98); 
}

.theme-toggle{
    position: relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:1px solid var(--input-border);
    border-radius:8px;
    background:var(--surface-1);
    color:var(--on-surface);
    box-shadow:var(--shadow-base);
    cursor:pointer;
    transition:filter .2s, transform .05s;
}
.theme-toggle:hover{ filter:brightness(1.08); }
.theme-toggle:active{ transform:scale(.97); }
nav {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.sidebar-icone svg{
    width:45px; height:45px; display:block; margin:0 auto 3px auto;
    border-radius:12px;
    background: color-mix(in oklab, var(--card-bg) 85%, black 15%);
    border:1px solid var(--card-border);
    padding:8px;
    box-shadow: var(--shadow-base);
    /* cor do glyph do svg */
    fill: var(--text-main);
    color: var(--text-main);
}


/* Texto do item: menos branco chapado, mais quente */
.sidebar-texto{
    font-size:11px; 
    font-weight:700; 
    text-align:center; 
    letter-spacing:.04em;
    color: color-mix(in oklab, var(--text-main) 75%, var(--text-muted) 25%);
}

/* Link “neutro” de lista, sem aquele overlay preto/vermelho */
.sidebar-link{
    width:100%; padding:10px 0; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    gap:7px;
    border-radius:12px; 
    text-decoration:none; 
    position:relative;
    background: transparent;
    transition: background .18s ease, transform .06s ease;
}

/* Hover com glaze terracota + salmão translúcidos */
.sidebar-link:hover{
    background: linear-gradient(
      100deg,
      color-mix(in oklab, var(--primary) 22%, transparent) 0%,
      color-mix(in oklab, var(--accent-cta) 26%, transparent) 100%
    );
    transform: translateY(-1px);
}
.sidebar-link:focus-visible{
    outline: 2px solid color-mix(in oklab, var(--primary) 50%, var(--accent-cta) 50%);
    outline-offset: 2px;
    border-radius:12px;
}

/* Estado ativo: reforça CTA e linha guia na esquerda */
.sidebar-link.ativo{
    background: linear-gradient(
      100deg,
      color-mix(in oklab, var(--primary) 28%, transparent) 0%,
      color-mix(in oklab, var(--accent-cta) 38%, transparent) 100%
    );
}

.sidebar-link.ativo:before{
    content:""; 
    position:absolute; 
    left:0; 
    top:0; 
    bottom:0; 
    width:4px; 
    border-radius:4px 0 0 4px;
    background: var(--accent-cta);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-cta) 50%, black 50%) inset;
}