/* Fase 2 — identidade visual da Daima.
   Layout inspirado no BotConversa (sidebar + Kanban + cards arredondados),
   paleta trocada para o azul de azulejo português. Verde reservado ao WhatsApp. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme: light;
  --bg:#F1F3F4;
  --surface:#FFFFFF;
  --surface-2:#EAF0F3;
  --ink:#16232E;
  --ink-muted:#51616D;
  --ink-faint:#8695A0;
  --line:#DCE3E5;
  --accent:#1D5C8A;
  --accent-deep:#123A57;
  --accent-soft:#DCE9F1;
  --good:#2F7A5C;
  --good-soft:#DCEEE5;
  --warn:#B5541B;
  --warn-soft:#F5E3D6;
  --crit:#9E2B2B;
  --crit-soft:#F5DCDC;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(18,58,87,0.06), 0 6px 20px rgba(18,58,87,0.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1620; --surface:#16212B; --surface-2:#1B2833;
    --ink:#E8EDF0; --ink-muted:#9FB0BC; --ink-faint:#6C7D89;
    --line:#2A3A47; --accent:#5FA8D3; --accent-deep:#8FCBEC; --accent-soft:#1D3A4C;
    --good:#5FBF95; --good-soft:#1C3329; --warn:#E08A52; --warn-soft:#3A2A1E;
    --crit:#E27676; --crit-soft:#3A2020;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1620; --surface:#16212B; --surface-2:#1B2833;
  --ink:#E8EDF0; --ink-muted:#9FB0BC; --ink-faint:#6C7D89;
  --line:#2A3A47; --accent:#5FA8D3; --accent-deep:#8FCBEC; --accent-soft:#1D3A4C;
  --good:#5FBF95; --good-soft:#1C3329; --warn:#E08A52; --warn-soft:#3A2A1E;
  --crit:#E27676; --crit-soft:#3A2020;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:14px; line-height:1.55;
}
h1,h2,h3,.brand,.nav a,.btn,button{ font-family:'Plus Jakarta Sans', 'IBM Plex Sans', sans-serif; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* Shell */
.shell{ display:flex; height:100vh; }
.sidebar{
  width:230px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line);
  padding:20px 14px; display:flex; flex-direction:column; gap:22px; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:9px; padding:0 8px; font-weight:800; font-size:19px; color:var(--accent-deep); }
.brand .dot{ width:10px; height:10px; border-radius:99px; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:var(--ink-muted); text-decoration:none; font-size:13.5px; font-weight:500;
  border-left:3px solid transparent;
}
.nav a svg{ width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.8; }
.nav a:hover{ background:var(--surface-2); color:var(--ink); }
.nav a.active{ background:var(--accent-soft); color:var(--accent-deep); border-left-color:var(--accent); font-weight:600; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; height:100vh; overflow:hidden; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; border-bottom:1px solid var(--line); background:var(--surface); flex-shrink:0;
}
.topbar h1{ font-size:18px; font-weight:700; margin:0; }
.topbar .sub{ color:var(--ink-faint); font-size:12.5px; font-family:'IBM Plex Mono',monospace; margin-top:2px; }
.content{ padding:26px 28px; flex:1; overflow-y:auto; }

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:0.02em; padding:4px 10px; border-radius:99px;
  background:var(--surface-2); color:var(--ink-muted); white-space:nowrap;
}
.pill.accent{ background:var(--accent-soft); color:var(--accent-deep); }
.pill.good{ background:var(--good-soft); color:var(--good); }
.pill.warn{ background:var(--warn-soft); color:var(--warn); }
.pill.crit{ background:var(--crit-soft); color:var(--crit); }
.pill.wa{ background:var(--good-soft); color:var(--good); }
.pill.wa::before{ content:"●"; font-size:8px; }

/* Cards / blocks */
.block{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:18px; box-shadow:var(--shadow);
}
.block .label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--ink-faint); display:block; margin-bottom:12px;
}
.row{ display:flex; gap:18px; }
.col{ flex:1; min-width:0; }

/* Stat tiles */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:18px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.stat .n{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat .l{ font-size:12px; color:var(--ink-muted); margin-top:2px; }
.stat.warn .n{ color:var(--warn); }
.stat.crit .n{ color:var(--crit); }

/* Kanban */
.kanban{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; }
.kanban-col{ width:250px; flex-shrink:0; background:var(--surface-2); border-radius:var(--radius); padding:12px; }
.kanban-col h3{ font-size:12.5px; margin:0 0 10px; padding:0 4px; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:11px 12px; margin-bottom:9px; box-shadow:var(--shadow);
}
.card[draggable="true"]:active{ cursor:grabbing; }
.card.arrastando{ opacity:0.4; }
.kanban-col.pode-soltar{ background:var(--accent-soft); outline:2px dashed var(--accent); outline-offset:-2px; }
.card .name{ font-weight:600; font-size:13.5px; color:var(--ink); }
.card .name a:hover, td a:hover{ text-decoration:underline; }
.card-row{ display:flex; gap:10px; align-items:flex-start; }
.card-row > .avatar{ margin-top:1px; }
.card-row > .card-body{ min-width:0; flex:1; }

.avatar{
  border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0; font-family:'Plus Jakarta Sans','IBM Plex Sans',sans-serif;
  letter-spacing:-0.02em;
}
.row-com-avatar{ display:flex; align-items:center; gap:10px; }

.badge-notif{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; margin-left:auto;
  background:var(--crit); color:#fff; border-radius:99px;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:700;
}
@keyframes piscar{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.piscando{ animation:piscar 1.1s ease-in-out infinite; }

.callout{ padding:12px 16px; border-radius:9px; font-size:13.5px; border:1px solid transparent; }
.callout.good{ background:var(--good-soft); color:var(--good); border-color:var(--good); }
.callout.crit{ background:var(--crit-soft); color:var(--crit); border-color:var(--crit); }
.card .preview{ font-size:12px; color:var(--ink-muted); margin-top:3px; }

/* Checklist */
.checklist-item{ display:flex; align-items:center; gap:9px; padding:6px 2px; font-size:13.5px; }
.checklist-item input{ width:16px; height:16px; accent-color:var(--accent); }

/* Table */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:13px; }
th{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); font-weight:500; }
td.num{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
td.trunc{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabela-scroll{ max-height:158px; overflow-y:auto; }
.tabela-scroll table{ margin:0; }
.tabela-scroll thead th{ position:sticky; top:0; background:var(--surface); z-index:1; }
.busca-tabela{
  padding:7px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink); font-family:inherit; font-size:12.5px; max-width:220px;
}

/* Buttons / forms */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius:9px; border:none; background:var(--accent); color:#fff;
  font-weight:600; font-size:13.5px; cursor:pointer;
}
.btn:hover{ background:var(--accent-deep); }
.btn.ghost{ background:var(--surface-2); color:var(--ink); }
.btn.icon{ width:32px; height:32px; padding:0; flex-shrink:0; }
.btn.icon svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:12px; color:var(--ink-muted); margin-bottom:5px; font-weight:500; }
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:13.5px;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }

/* Login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:36px 34px; width:340px; box-shadow:var(--shadow);
}
.login-card .brand{ margin-bottom:4px; padding:0; justify-content:flex-start; }
.login-card p.sub{ font-size:13px; color:var(--ink-muted); margin:0 0 22px; }

/* Timeline / etapas do processo */
.steps{ display:flex; flex-direction:column; }
.step{ display:flex; gap:12px; padding:10px 0; }
.step .dot{ width:20px; height:20px; border-radius:99px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.step.done .dot{ background:var(--good); color:#fff; }
.step.active .dot{ background:var(--accent); color:#fff; }
.step.pending .dot{ background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--line); }
.step .txt{ padding-top:1px; }
.step .txt .t{ font-weight:600; font-size:13.5px; }
.step .txt .s{ font-size:11.5px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; }

/* Chat */
.chat-shell{ display:flex; flex:1; min-height:0; }
.chat-list{ width:270px; border-right:1px solid var(--line); background:var(--surface); overflow-y:auto; padding:10px; }
.chat-list .card{ cursor:pointer; }
.chat-list .card.active{ border-color:var(--accent); background:var(--accent-soft); }
.chat-conv{ flex:1; display:flex; flex-direction:column; background:var(--bg); min-width:0; }
.chat-messages{ flex:1; padding:22px; overflow-y:auto; display:flex; flex-direction:column; }
.msg{ max-width:65%; padding:9px 13px; border-radius:12px; margin-bottom:9px; font-size:13.5px; background:var(--surface); border:1px solid var(--line); }
.msg.out{ margin-left:auto; background:var(--good-soft); border-color:transparent; color:var(--ink); }
.chat-input{ border-top:1px solid var(--line); padding:14px 18px; display:flex; gap:8px; align-items:center; background:var(--surface); }
.chat-input input[type="text"]{ flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:99px; font-family:inherit; font-size:13.5px; }
.icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.icon-btn:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.icon-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.icon-btn.gravando{ background:var(--crit-soft); color:var(--crit); border-color:var(--crit); animation:pulsar 1.1s infinite; }
@keyframes pulsar{ 0%,100%{ box-shadow:0 0 0 0 rgba(158,43,43,0.35);} 50%{ box-shadow:0 0 0 6px rgba(158,43,43,0);} }

.msg img{ display:block; max-width:220px; border-radius:8px; }
.msg audio{ width:230px; height:34px; }
.msg.sticker{ background:transparent; border:none; box-shadow:none; padding:0; font-size:52px; line-height:1; }

.sticker-picker{
  position:absolute; bottom:64px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:10px; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; z-index:60;
}
.sticker-picker button{ background:none; border:none; font-size:22px; cursor:pointer; padding:5px; border-radius:6px; }
.sticker-picker button:hover{ background:var(--surface-2); }
.sticker-picker[hidden]{ display:none; }
.crm-panel{ width:270px; border-left:1px solid var(--line); padding:18px; overflow-y:auto; background:var(--surface); }
.crm-panel .label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); display:block; margin-bottom:14px; }

/* CRM do Chat — estilo "Front/Help Scout": sem caixas em cada campo, ícone +
   linha fina separando, ao invés de um <select> com borda por campo. */
.crm-secao-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); }
.crm-linha{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); position:relative; }
.crm-linha:last-of-type{ border-bottom:none; }
.crm-linha svg{ width:15px; height:15px; stroke:var(--ink-faint); fill:none; stroke-width:1.8; flex-shrink:0; }
.crm-select-flat{
  border:none; background:none; padding:2px 16px 2px 0; margin:0; font-family:inherit; font-size:12.5px;
  color:var(--ink); flex:1; min-width:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
}
.crm-select-flat:focus{ outline:none; color:var(--accent); }
.crm-select-flat option{ color:var(--ink); background:var(--surface); }
.crm-linha::after{ content:"▾"; position:absolute; right:0; font-size:9px; color:var(--ink-faint); pointer-events:none; }
.crm-panel .btn{ border-radius:99px; }
.crm-menu-item{ display:flex; align-items:center; gap:8px; padding:7px 6px; border-radius:6px; cursor:pointer; font-size:12.5px; }
.crm-menu-item:hover{ background:var(--surface-2); }
.crm-select-trigger{
  flex:1; min-width:0; font-size:12.5px; color:var(--ink); cursor:pointer;
  padding:2px 16px 2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.crm-select-menu{ top:100%; margin-top:4px; padding:6px; max-height:220px; overflow-y:auto; }

/* Botão flutuante de suporte via WhatsApp */
.fab-suporte{
  position:fixed; right:24px; bottom:24px; width:52px; height:52px; border-radius:50%;
  background:var(--good); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); text-decoration:none; z-index:80;
}
.fab-suporte svg{ width:26px; height:26px; }
.fab-suporte:hover{ filter:brightness(1.06); }

/* Toolbar de listagem (busca + adicionar) */
.toolbar{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.toolbar input[type="search"]{
  flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:13.5px;
}
.periodo-custom-row{ display:inline-flex; gap:6px; align-items:center; }
.periodo-custom-row[hidden]{ display:none; }
.toolbar select{
  width:150px; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:13px; flex-shrink:0;
  text-align:left; text-align-last:left; -moz-text-align-last:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.list-row{ cursor:pointer; }
.list-row:hover td{ background:var(--surface-2); }

/* Modal simples */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,25,35,0.45); display:flex;
  align-items:center; justify-content:center; z-index:100;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  background:var(--surface); border-radius:var(--radius); padding:24px 26px; width:380px;
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.modal h2{ font-size:16px; margin:0 0 16px; }
.modal .actions{ display:flex; gap:10px; margin-top:18px; }
.modal .actions .btn{ flex:1; }
.modal.modal-lg{ width:640px; max-width:92vw; max-height:88vh; overflow-y:auto; }
.link-mini{ font-size:12px; color:var(--accent); text-decoration:none; font-weight:600; }
.link-mini:hover{ text-decoration:underline; }

.busca-resultados{
  position:absolute; top:100%; left:0; right:0; z-index:20; margin-top:4px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  box-shadow:var(--shadow); max-height:200px; overflow-y:auto;
}
.busca-resultados[hidden]{ display:none; }
.busca-resultados .item{ padding:8px 12px; font-size:13px; cursor:pointer; }
.busca-resultados .item:hover{ background:var(--surface-2); }
.acoes-flex{ display:flex; gap:10px; margin-bottom:18px; }
#acoes-email[hidden]{ display:none; }

/* Abas do perfil do cliente */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto; }
.tabs button{
  background:none; border:none; padding:11px 14px; font-size:13.5px; font-weight:500;
  color:var(--ink-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
  font-family:'Plus Jakarta Sans','IBM Plex Sans',sans-serif;
}
.tabs button:hover{ color:var(--ink); }
.tabs button.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tab-panel[hidden]{ display:none; }

.form-section{ padding:16px 0; border-bottom:1px solid var(--line); }
.form-section:last-child{ border-bottom:none; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }

.empty-state{ text-align:center; padding:50px 20px; color:var(--ink-muted); }
.empty-state h3{ font-size:15px; color:var(--ink); margin:0 0 6px; font-family:'Plus Jakarta Sans',sans-serif; }
.empty-state p{ font-size:13px; max-width:44ch; margin:0 auto 16px; }

.avatar-upload{
  width:64px; height:64px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint); cursor:pointer;
}
.avatar-upload svg{ width:22px; height:22px; }

/* Etiquetas */
.tag-chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; margin:0 5px 5px 0;
}
.tag-chip button{ background:none; border:none; cursor:pointer; color:inherit; font-size:12px; line-height:1; padding:0; opacity:0.65; }
.tag-chip button:hover{ opacity:1; }
.tag-add-row{ display:flex; gap:8px; margin-top:8px; }
.tag-add-row select{ flex:1; min-width:0; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font-size:12.5px; }
.tag-add-row input[type="text"]{ flex:1; min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:12.5px; background:var(--surface); color:var(--ink); }
.tag-add-row input[type="color"]{ flex-shrink:0; }
.tag-add-row .btn{ flex-shrink:0; }
.tag-list{ max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; margin-bottom:14px; }
.tag-list-row{ display:flex; align-items:center; gap:9px; padding:8px 12px; border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; }
.tag-list-row:last-child{ border-bottom:none; }
.tag-list-row:hover{ background:var(--surface-2); }
.tag-list-row .swatch{ width:10px; height:10px; border-radius:2px; flex-shrink:0; }

.popover-etiquetas{
  position:fixed; width:270px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); z-index:90; padding:14px;
}
.popover-etiquetas input[type="search"]{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  margin-bottom:8px; font-family:inherit; background:var(--surface); color:var(--ink);
}
.popover-etiquetas .tag-list{ max-height:190px; margin-bottom:0; }
.popover-etiquetas .tag-list-row{ justify-content:space-between; }
.popover-etiquetas .gerenciar-link{
  display:block; text-align:center; margin-top:10px; font-size:12px;
  color:var(--accent); cursor:pointer; background:none; border:none; width:100%; font-family:inherit;
}