/* base.css — Variáveis, temas e reset. Tudo que o resto herda.
   Parte de painel.css, dividido em 13/09/2026: um arquivo de 3.782 linhas
   não se navega. A ORDEM dos <link> no index.html importa (cascata). */

/* VirtusChat — painel do atendente
   Identidade própria (15/08/2026): layout "bento" de painéis flutuantes, abas em
   pílula, equalizador como indicador de presença e gradiente esmeralda→teal na
   bolha do atendente. O tema é onda sonora: o logo (3 barras) vira linguagem.
   O widget compartilha a paleta base — mudou aqui, confira lá. */

:root {
  /* grafite */
  --graf-950: #0c0e12;
  --graf-900: #12151b;
  --graf-800: #1a1e26;
  --graf-700: #242a34;
  --graf-borda: rgba(255, 255, 255, .08);
  --graf-texto: #e8eaed;
  --graf-texto-2: #8b93a1;
  /* esmeralda */
  --verde-700: #047857;
  --verde-600: #059669;
  --verde-500: #10b981;
  --verde-claro: #d1fae5;
  --verde-tinta: rgba(16, 185, 129, .1);
  --verde-texto: #34d399; /* verde legível sobre superfície escura */
  /* superfícies do tema PRETO (padrão): conversa e barra do cliente também escuras */
  --fundo: #0f1218;
  --superficie: #171b23;
  --borda: rgba(255, 255, 255, .09);
  --texto: #e8eaed;
  --texto-2: #9aa3b2;
  --texto-3: #6d7683;
  --sistema-bg: #232936;
  --alerta-tinta: rgba(220, 38, 38, .14);
  /* estado */
  --ambar-700: #b45309;
  --ambar-100: #fef3c7;
  --ambar-50: #fffbeb;  /* corpo do cartão de alerta; o 100 ficou no cabeçalho */
  --alerta: #dc2626;
  --sublinhado-erro: #f87171; /* ondulado da revisão: sobre fundo escuro */
  /* banner de descanso: o céu do topo veste o tema (cada bloco de tema
     redefine estas seis variáveis; nos claros o céu vira lusco-fusco) */
  --banner-ceu: linear-gradient(105deg, #070b22, #141b3f 45%, #1d2752 72%, #10152e);
  --banner-texto: #dfe6ff;
  --banner-chip: #ffd97a;
  --banner-chip-bg: rgba(255, 217, 122, .1);
  --banner-chip-borda: rgba(255, 217, 122, .35);
  --banner-sombra: 0 1px 8px rgba(10, 14, 40, .8);
  --banner-aurora-1: #3b4a8f;
  --banner-aurora-2: #1f4d6e;
  --nuvem-luz: #eef3ff;
  --nuvem-medio: #b9c9ea;
  --nuvem-borda: #9db0d8;
  --nuvem-fundo: #8093c0;
  --fonte-titulo: "Space Grotesk", "Inter", sans-serif;
  /* geometria e sombra */
  --r-s: 5px;
  --r-m: 7px;
  --r-l: 10px;
  --r-painel: 12px;   /* painéis do bento */
  --r-cartao: 9px;    /* cartões de lista e notificação */
  --r-avatar: 9px;    /* retângulo arredondado, não círculo nem squircle */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-2: 0 8px 24px rgba(0, 0, 0, .5);
}

/* tema claro (branco): grafite vira claro E as superfícies voltam ao original */
body.tema-claro {
  --graf-950: #ffffff;
  --graf-900: #f1f3f6;
  --graf-800: #e9edf2;
  --graf-700: #dfe3ea;
  --graf-borda: rgba(12, 14, 18, .1);
  --graf-texto: #16191f;
  --graf-texto-2: #5f6673;
  --fundo: #f5f6f8;
  --superficie: #ffffff;
  --borda: #e4e7eb;
  --texto: #16191f;
  --texto-2: #5f6673;
  --texto-3: #8a93a0;
  --sistema-bg: #e8eaee;
  --verde-tinta: #ecfdf5;
  --verde-texto: #047857;
  --alerta-tinta: #fef2f2;
  --sublinhado-erro: #dc2626;
  --sombra-1: 0 1px 2px rgba(12, 14, 18, .07);
  --sombra-2: 0 8px 24px rgba(12, 14, 18, .14);  --banner-ceu: linear-gradient(105deg, #dbe4fb, #e7ecfd 45%, #f2eefb 72%, #e3e9fc);
  --banner-texto: #26304d;
  --banner-chip: #7a4f00;
  --banner-chip-bg: rgba(245, 158, 11, .14);
  --banner-chip-borda: rgba(180, 83, 9, .35);
  --banner-sombra: none;
  --banner-aurora-1: #a9bdf0;
  --banner-aurora-2: #9fc9e4;
  --nuvem-luz: #ffffff;
  --nuvem-medio: #ffffff;
  --nuvem-borda: #d6e0f0;
  --nuvem-fundo: #b7c5da;

}
/* meia-noite: escuro azulado, mesmo verde de ação */
body[data-tema="meia-noite"] {
  --graf-950: #0a1120;
  --graf-900: #101a30;
  --graf-800: #17233d;
  --graf-700: #1f2f4f;
  --graf-borda: rgba(148, 180, 255, .1);
  --graf-texto: #e6ecf8;
  --graf-texto-2: #8fa0bd;
  --fundo: #0d1526;
  --superficie: #131e33;
  --borda: rgba(148, 180, 255, .12);
  --texto: #e6ecf8;
  --texto-2: #9dadc9;
  --texto-3: #6e7f9e;
  --sistema-bg: #1c2942;  --banner-ceu: linear-gradient(105deg, #050a1e, #101a3d 45%, #1a2a5c 72%, #0c1430);
  --banner-aurora-1: #3b4a8f;
  --banner-aurora-2: #2563a0;

}

/* floresta: escuro esverdeado — o tema que mais veste a marca */
body[data-tema="floresta"] {
  --graf-950: #081410;
  --graf-900: #0d1d17;
  --graf-800: #13291f;
  --graf-700: #1a3729;
  --graf-borda: rgba(134, 239, 172, .1);
  --graf-texto: #e7f3ec;
  --graf-texto-2: #8fae9d;
  --fundo: #0b1a13;
  --superficie: #11241a;
  --borda: rgba(134, 239, 172, .12);
  --texto: #e7f3ec;
  --texto-2: #9cb8a9;
  --texto-3: #6f8a7b;
  --sistema-bg: #1b3226;  --banner-ceu: linear-gradient(105deg, #03130d, #0a2418 45%, #113520 72%, #071a12);
  --banner-texto: #dcf3e6;
  --banner-chip: #ffe08a;
  --banner-sombra: 0 1px 8px rgba(3, 20, 13, .85);
  --banner-aurora-1: #2f7d55;
  --banner-aurora-2: #1f6b6e;
  --nuvem-luz: #e9f7ef;
  --nuvem-medio: #a9d5bd;
  --nuvem-borda: #8ab9a1;
  --nuvem-fundo: #5f8f77;

}

/* oceano: escuro petróleo — azul esverdeado, mais frio que meia-noite */
body[data-tema="oceano"] {
  --graf-950: #06171c;
  --graf-900: #0b2027;
  --graf-800: #102b34;
  --graf-700: #163943;
  --graf-borda: rgba(125, 211, 252, .1);
  --graf-texto: #e2f2f5;
  --graf-texto-2: #8fb2ba;
  --fundo: #071a20;
  --superficie: #0d242c;
  --borda: rgba(125, 211, 252, .12);
  --texto: #e2f2f5;
  --texto-2: #9dbfc7;
  --texto-3: #74959d;
  --sistema-bg: #14313a;  --banner-ceu: linear-gradient(105deg, #021019, #06232f 45%, #0b3646 72%, #04161f);
  --banner-texto: #d8eef4;
  --banner-chip: #ffe08a;
  --banner-sombra: 0 1px 8px rgba(2, 16, 25, .85);
  --banner-aurora-1: #1f6b8f;
  --banner-aurora-2: #1d7d84;
  --nuvem-luz: #e6f6fb;
  --nuvem-medio: #a3d0dd;
  --nuvem-borda: #86b6c6;
  --nuvem-fundo: #5f94a4;

}

/* café: escuro quente, o único de família marrom (fadiga de olho à noite) */
body[data-tema="cafe"] {
  --graf-950: #14100c;
  --graf-900: #1c1712;
  --graf-800: #262019;
  --graf-700: #33291f;
  --graf-borda: rgba(245, 222, 179, .1);
  --graf-texto: #f2e9df;
  --graf-texto-2: #b09a86;
  --fundo: #17120e;
  --superficie: #211a14;
  --borda: rgba(245, 222, 179, .12);
  --texto: #f2e9df;
  --texto-2: #bda995;
  --texto-3: #8e7b6a;
  --sistema-bg: #2d2419;  --banner-ceu: linear-gradient(105deg, #120c07, #241708 45%, #3a2712 72%, #17100a);
  --banner-texto: #f4e6d5;
  --banner-chip: #ffd08a;
  --banner-chip-bg: rgba(255, 208, 138, .12);
  --banner-chip-borda: rgba(255, 208, 138, .38);
  --banner-sombra: 0 1px 8px rgba(18, 12, 7, .85);
  --banner-aurora-1: #8a5a2b;
  --banner-aurora-2: #6b4a86;
  --nuvem-luz: #f9efe2;
  --nuvem-medio: #d9bf9f;
  --nuvem-borda: #bfa079;
  --nuvem-fundo: #9a7c5c;

}

/* retoques que as variáveis não cobrem */
body.tema-claro #trilho { border-right-color: var(--borda); }
body.tema-claro #lateral { border-right: 1px solid var(--borda); }
body.tema-claro .eq-avatar { color: var(--texto-2); }
body.tema-claro #filtro-periodo input { color-scheme: light; }
body.tema-claro #lista .nada svg ellipse:first-of-type { fill: rgba(12, 14, 18, .05); }
body.tema-claro #lista .nada svg [stroke="#3d4553"] { stroke: #b3bac6; }

/* névoa: claro com tom verde suave (também usa os retoques de tema claro) */
body[data-tema="nevoa"] {
  --graf-950: #f4faf7;
  --graf-900: #e8f2ec;
  --graf-800: #dcece3;
  --graf-700: #cfe3d8;
  --graf-borda: rgba(4, 120, 87, .13);
  --graf-texto: #14201a;
  --graf-texto-2: #5b6f64;
  --fundo: #eef5f0;
  --superficie: #ffffff;
  --borda: #d9e6de;
  --texto: #14201a;
  --texto-2: #55685d;
  --texto-3: #7d938a;
  --sistema-bg: #e2ece6;
  --verde-tinta: #e5f6ee;  --banner-ceu: linear-gradient(105deg, #dceee4, #e9f5ee 45%, #f1f8f3 72%, #e2f0e8);
  --banner-texto: #1f3a2c;
  --banner-chip: #7a5100;
  --banner-aurora-1: #a5d6bd;
  --banner-aurora-2: #9ccfd0;
  --nuvem-luz: #ffffff;
  --nuvem-medio: #ffffff;
  --nuvem-borda: #cfe3d8;
  --nuvem-fundo: #a9c8b8;

}

/* areia: claro quente (papel), para quem acha o branco puro duro à tarde */
body[data-tema="areia"] {
  --graf-950: #fdf8f0;
  --graf-900: #f5ece0;
  --graf-800: #ece0d0;
  --graf-700: #e0d1bd;
  --graf-borda: rgba(120, 83, 44, .14);
  --graf-texto: #22190f;
  --graf-texto-2: #6b5a45;
  --fundo: #f7f1e7;
  --superficie: #fffdf9;
  --borda: #e7dccc;
  --texto: #22190f;
  --texto-2: #675741;
  --texto-3: #8d7b64;
  --sistema-bg: #ece2d4;
  --verde-tinta: #e9f6ef;  --banner-ceu: linear-gradient(105deg, #f7e6cd, #fbefdc 45%, #fdf5e9 72%, #f5e4cb);
  --banner-texto: #3d2a12;
  --banner-chip: #8a4b05;
  --banner-chip-bg: rgba(217, 119, 6, .14);
  --banner-chip-borda: rgba(146, 64, 14, .35);
  --banner-aurora-1: #e8c79a;
  --banner-aurora-2: #d9b78c;
  --nuvem-luz: #fffdf9;
  --nuvem-medio: #ffffff;
  --nuvem-borda: #ecdcc3;
  --nuvem-fundo: #d3bb9a;

}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  height: 100vh;
  height: 100dvh; /* celular: 100vh mente quando a barra do navegador recolhe */
  overflow: hidden;
  font-size: 13.5px;
  -webkit-font-smoothing: antialiased;
}
.oculto { display: none !important; }
button { font-family: inherit; cursor: pointer; }
button:active { transform: scale(.985); }
:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; }
svg { flex-shrink: 0; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 130, 145, .3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 145, .5); }

.logotipo { width: 28px; height: 28px; display: block; }
.logotipo.grande { width: 52px; height: 52px; }

/* wordmark: "Virtus" pesado + "Chat" leve, mesma cor */
.wordmark { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -.02em; }
.wordmark span { font-weight: 400; }