/* Central de Agentes, na linha da EvoluWill.
   Paleta, temas, topo e menu seguem o Hub (hub-evoluwill/assets/estilo.css): navy da marca,
   royal nas ações, ouro só como faísca. Claro é o padrão; navy e grafite são os noturnos. */
:root {
  --navy-900: #081735;      /* fundo da página */
  --navy-800: #0B1F44;      /* cartões, topo e menu */
  --navy-700: #12294F;      /* superfície de apoio */
  --navy-600: #1A355F;      /* preenchimentos */
  --linha: #1F3A66;
  --azul: #1D4ED8;          /* royal */
  --azul-claro: #2B5BE3;    /* cobalto */
  --texto: #E9EDF5;
  --texto-suave: #9AA3B2;
  --ouro: #F4C020;
  --verde: #22C55E;
  --verde-txt: #4ADE80;
  --vermelho-txt: #F87171;
  --roxo-txt: #C4B5FD;
  --amarelo-txt: #F4C020;
  --azul-txt: #9DB2F0;
  --fundo-verde: rgba(34,197,94,.16);
  --fundo-vermelho: rgba(239,68,68,.16);
  --fundo-roxo: rgba(139,92,246,.18);
  --fundo-azul: rgba(43,91,227,.22);
  --sobreposicao: rgba(8,23,53,.86);
  --sombra: none;
  --raio: 12px;
  --largura-menu: 248px;
  --altura-topo: 54px;
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
body.claro {
  --navy-900: #EEF1F6;
  --navy-800: #FFFFFF;
  --navy-700: #F5F7FB;
  --navy-600: #E3E8F2;
  --linha: #D8DFEC;
  --texto: #0A0C12;
  --texto-suave: #5C6779;
  --verde-txt: #15803D;
  --vermelho-txt: #DC2626;
  --roxo-txt: #6D28D9;
  --amarelo-txt: #8A6A00;
  --azul-txt: #1D4ED8;
  --fundo-verde: rgba(34,197,94,.14);
  --fundo-vermelho: rgba(239,68,68,.12);
  --fundo-roxo: rgba(139,92,246,.14);
  --fundo-azul: rgba(29,78,216,.10);
  --sobreposicao: rgba(10,12,18,.45);
  --sombra: 0 1px 2px rgba(21,35,65,.05);
  color-scheme: light;
}
body.grafite {
  --navy-900: #121417;
  --navy-800: #191C21;
  --navy-700: #212630;
  --navy-600: #2A303A;
  --linha: #333A45;
  --sobreposicao: rgba(10,12,18,.86);
}
body.grafite .menu { --navy-700: #2E343D; --navy-600: #39404B; --linha: #3A414C; background: #23272E; border-right-color: #3A414C; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--fonte); background: var(--navy-900); color: var(--texto); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ---------- topo ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; height: var(--altura-topo); background: var(--navy-800); border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 14px; padding: 0 22px; z-index: 50; }
.topo .marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topo .marca img { height: 30px; display: block; border-radius: 6px; }
.topo .marca .titulo { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .marca .titulo span { color: var(--texto-suave); font-weight: 500; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.botao-topo { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--navy-700); border: 1px solid var(--linha); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.botao-topo:hover { border-color: var(--azul-claro); }
.botao-topo.icone { width: 34px; padding: 0; justify-content: center; font-size: 15px; }
.iniciais { width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- menu lateral: um item por pessoa do time ---------- */
.menu { position: fixed; top: var(--altura-topo); bottom: 0; left: 0; width: var(--largura-menu); background: var(--navy-800); border-right: 1px solid var(--linha); padding: 16px 12px 20px; overflow-y: auto; z-index: 40; display: flex; flex-direction: column; }
.menu-grupo { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-suave); font-weight: 700; padding: 6px 12px 8px; }
.item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; text-align: left; margin-bottom: 2px; }
.item:hover { background: var(--navy-700); }
.item.ativo { background: var(--azul); color: #fff; font-weight: 600; }
.item .selo { margin-left: auto; background: var(--navy-600); font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 8px; }
.item.ativo .selo { background: rgba(255,255,255,.22); color: #fff; }
.item .iniciais { width: 26px; height: 26px; font-size: 11px; background: var(--navy-600); color: var(--texto); }
.item.ativo .iniciais { background: rgba(255,255,255,.22); color: #fff; }
.menu-rodape { margin-top: auto; padding: 14px 12px 2px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--texto-suave); }
.menu-rodape strong { display: block; color: var(--texto); font-size: 13px; margin-bottom: 8px; }

/* ---------- conteúdo ---------- */
.conteudo { margin-left: var(--largura-menu); margin-top: var(--altura-topo); padding: 18px 24px 48px; min-height: calc(100vh - var(--altura-topo)); }
.cabecalho { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.cabecalho h1 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.cabecalho p { color: var(--texto-suave); font-size: 12.5px; margin-top: 2px; }
.cabecalho .acoes { margin-left: auto; font-size: 12px; color: var(--texto-suave); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.botao { height: 33px; padding: 0 14px; border-radius: 10px; background: var(--azul); color: #fff; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.botao:hover { background: var(--azul-claro); }
.botao.vazio { background: transparent; border: 1px solid var(--linha); color: var(--texto); }
.botao.vazio:hover { border-color: var(--azul-claro); background: var(--navy-700); }
.botao.pequeno { height: 30px; padding: 0 11px; font-size: 12.5px; }
.botao:disabled, .botao:disabled:hover { opacity: .45; cursor: not-allowed; background: transparent; border-color: var(--linha); }

.cartao { background: var(--navy-800); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; background: var(--navy-600); color: var(--texto); white-space: nowrap; }
.vazio-msg { text-align: center; color: var(--texto-suave); padding: 50px 20px; }

/* ---------- card do agente (o desenho da Sala de Café) ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.agente { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--azul); }
.agente .cab { display: flex; align-items: center; gap: 12px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; background: color-mix(in srgb, var(--cor) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 35%, transparent); }
.agente .nome { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agente .apelido { font-size: 11px; font-weight: 500; color: var(--texto-suave); font-style: italic; }
.agente .atalho { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }
.agente .atalho code { background: var(--navy-700); border: 1px solid var(--linha); padding: 1px 7px; border-radius: 6px; color: var(--texto); font-weight: 600; }
.agente .funcao { font-size: 12.5px; font-weight: 600; color: var(--azul-txt); }
.estado { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 7px 10px; border-radius: 9px; background: var(--navy-700); }
.estado.ligado { background: var(--fundo-verde); color: var(--verde-txt); }
.estado.demanda { background: var(--fundo-roxo); color: var(--roxo-txt); }
.estado.desligado { color: var(--texto-suave); }
.estado.esperando { background: rgba(244,192,32,.16); color: var(--amarelo-txt, #8A6A00); }
.erro-ordem { color: var(--vermelho-txt); }
.etiqueta.verde { background: var(--fundo-verde); color: var(--verde-txt); }
.horario-item { align-items: flex-start; }
.escala { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.escala .dias { display: flex; flex-wrap: wrap; gap: 4px; }
.escala .dias label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 8px; border: 1px solid var(--linha); border-radius: 8px; cursor: pointer; background: var(--navy-700); }
.escala .dias label:has(input:checked) { border-color: var(--azul); background: var(--fundo-azul); color: var(--azul-txt); font-weight: 600; }
.escala .dias input { accent-color: var(--azul); }
.escala input[type=time] { background: var(--navy-700); border: 1px solid var(--linha); border-radius: 8px; padding: 5px 8px; color: var(--texto); }
.bolinha { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.desc { font-size: 13px; line-height: 1.5; }
.linha { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }
.linha strong { color: var(--texto); font-weight: 600; }
.linha code { background: var(--navy-700); border: 1px solid var(--linha); padding: 1px 6px; border-radius: 6px; color: var(--texto); overflow-wrap: anywhere; }
.skills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.skill { font-size: 11.5px; font-weight: 600; background: var(--fundo-azul); color: var(--azul-txt); border-radius: 20px; padding: 2px 4px 2px 10px; display: inline-flex; align-items: center; gap: 2px; }
.skill.so { padding-right: 10px; }
.skill.sumida { background: var(--fundo-vermelho); color: var(--vermelho-txt); }
.skill button { color: inherit; opacity: .6; font-size: 14px; line-height: 1; padding: 0 4px; }
.skill button:hover { opacity: 1; }
.add-skill { font-size: 11.5px; font-weight: 600; border: 1px dashed var(--texto-suave); border-radius: 20px; padding: 1px 10px; color: var(--texto-suave); }
.add-skill:hover { border-color: var(--azul-claro); color: var(--azul-txt); }
.resumo-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skill.herda { cursor: pointer; gap: 5px; }
.skill.herda input { accent-color: var(--azul); }
.botoes { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linha); display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- entrada ---------- */
.entrada-fundo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.entrada { width: min(360px, 100%); }
.entrada img { height: 34px; border-radius: 6px; margin-bottom: 16px; }
.entrada h1 { font-size: 19px; margin-bottom: 2px; }
.entrada p { color: var(--texto-suave); font-size: 13px; margin-bottom: 18px; }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.campo input, .campo textarea, .campo select, .busca-skill { background: var(--navy-700); border: 1px solid var(--linha); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 400; color: var(--texto); outline: none; }
.campo textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; resize: vertical; }
.campo textarea.normal { font-family: var(--fonte); font-size: 14px; }
.campo input:focus, .campo textarea:focus, .campo select:focus, .busca-skill:focus { border-color: var(--azul-claro); }
.campo input:disabled, .campo textarea:disabled, .campo select:disabled { opacity: .75; }
.erro { color: var(--vermelho-txt); font-size: 13px; margin: 6px 0; min-height: 1px; }

/* ---------- gaveta da ficha ---------- */
.fundo { position: fixed; inset: 0; background: var(--sobreposicao); z-index: 60; display: flex; justify-content: flex-end; }
.gaveta { width: min(720px, 100%); height: 100%; background: var(--navy-900); border-left: 1px solid var(--linha); overflow-y: auto; padding: 22px 26px 40px; }
.gaveta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gaveta h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; }
.gaveta h2 .avatar { width: 38px; height: 38px; font-size: 19px; }
.gaveta .sub { color: var(--texto-suave); font-size: 12px; margin: 6px 0 18px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.secao { font-size: 14px; font-weight: 700; margin: 22px 0 6px; }
.aviso { font-size: 12.5px; color: var(--texto-suave); background: var(--navy-700); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; }
.hist { display: flex; flex-direction: column; gap: 6px; }
.hist-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; padding: 9px 12px; background: var(--navy-800); border: 1px solid var(--linha); border-radius: 10px; }
.hist-item .quando { color: var(--texto-suave); font-size: 11.5px; }
.hist-item.desfeito { opacity: .55; }
.hist-item.desfeito .o-que { text-decoration: line-through; }

/* ---------- caixa da casa (nunca alert, confirm ou prompt) ---------- */
.caixa-fundo { position: fixed; inset: 0; background: var(--sobreposicao); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.caixa { background: var(--navy-800); border: 1px solid var(--linha); border-radius: 14px; padding: 20px; width: min(540px, 100%); max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.caixa h3 { font-size: 16px; }
.caixa .rodape { display: flex; justify-content: flex-end; gap: 8px; }
.lista-skills { overflow-y: auto; display: flex; flex-direction: column; gap: 5px; min-height: 120px; }
.opcao-skill { text-align: left; background: var(--navy-700); border: 1px solid var(--linha); border-radius: 10px; padding: 9px 12px; }
.opcao-skill:hover { border-color: var(--azul-claro); }
.opcao-skill strong { font-size: 13.5px; }
.opcao-skill .uso { font-size: 11.5px; color: var(--texto-suave); }
.opcao-skill span.d { font-size: 12px; color: var(--texto-suave); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.grupo-skill { position: sticky; top: 0; z-index: 1; background: var(--navy-800); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--texto-suave); padding: 10px 2px 4px; }
.opcao-skill.tem { opacity: .45; cursor: default; }

/* ---------- celular: o menu vira uma faixa rolável abaixo do topo ---------- */
@media (max-width: 520px) { .topo .marca .titulo { display: none; } }
@media (max-width: 860px) {
  .topo { padding: 0 16px; }
  .topo .marca .titulo span { display: none; }
  .menu { position: static; width: auto; margin-top: var(--altura-topo); flex-direction: row; align-items: center; gap: 6px; padding: 10px 16px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--linha); }
  .menu-grupo, .menu-rodape { display: none; }
  .item { width: auto; flex-shrink: 0; padding: 7px 12px; margin: 0; font-size: 13.5px; }
  .conteudo { margin: 0; padding: 16px 16px 48px; min-height: 0; }
  .grade { grid-template-columns: 1fr; }
  .duas { grid-template-columns: 1fr; }
  .gaveta { padding: 18px 16px 40px; }
}