/* Mapas Mentais do Elilson — o visual. Cores em variáveis: claro por padrão, escuro quando o aparelho pede. */
:root {
  --fundo: #f4f3ef; --superficie: #ffffff; --superficie-2: #f8f7f4; --texto: #1f2328; --apagado: #6b7280;
  --borda: #e2e0da; --borda-forte: #c9c6be; --destaque: #4f46e5; --destaque-claro: #eef0ff;
  --ligacao: #8b5cf6; --mencao: #0891b2; --galho: #b9b5ab; --ponto-grade: #d9d6cf;
  --feito: #16a34a; --feito-fundo: #ecfdf3; --fazendo: #d97706; --fazendo-fundo: #fff7e6;
  --travado: #dc2626; --travado-fundo: #fef1f1; --centro: #1f2328; --centro-texto: #ffffff; --afazer: #2563eb;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05); --sombra-forte: 0 8px 30px rgba(0,0,0,.16);
  --raio: 10px; --barra: 52px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #131416; --superficie: #1d1f23; --superficie-2: #24272c; --texto: #e7e7e5; --apagado: #9aa0a8;
    --borda: #30343a; --borda-forte: #444a52; --destaque: #8b8cff; --destaque-claro: #262850;
    --ligacao: #a78bfa; --mencao: #22d3ee; --galho: #4b5059; --ponto-grade: #26292e;
    --feito: #4ade80; --feito-fundo: #14261b; --fazendo: #fbbf24; --fazendo-fundo: #2b2310;
    --travado: #f87171; --travado-fundo: #2d1616; --centro: #e7e7e5; --centro-texto: #131416; --afazer: #60a5fa;
    --sombra: 0 1px 2px rgba(0,0,0,.4); --sombra-forte: 0 8px 30px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--destaque); }
.carregando { padding: 40px; color: var(--apagado); text-align: center; }
.esconde { display: none !important; }

/* ── botões */
.bt { border: 1px solid var(--borda); background: var(--superficie); border-radius: 8px; padding: 7px 12px; line-height: 1.2;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.bt:hover { border-color: var(--borda-forte); }
.bt:disabled { opacity: .45; cursor: default; }
.bt.principal { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.bt.perigo { color: var(--travado); }
.bt.ativo { background: var(--destaque-claro); border-color: var(--destaque); color: var(--destaque); }
.bt.so-icone { padding: 7px 10px; }
.grupo { display: inline-flex; }
.grupo .bt { border-radius: 0; margin-left: -1px; }
.grupo .bt:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.grupo .bt:last-child { border-radius: 0 8px 8px 0; }

/* ── entrar */
.entrar { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.entrar form { width: 100%; max-width: 360px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
  padding: 28px 24px; box-shadow: var(--sombra); display: grid; gap: 14px; }
.entrar h1 { margin: 0; font-size: 22px; }
.entrar p { margin: 0; color: var(--apagado); }
.campo { width: 100%; border: 1px solid var(--borda-forte); background: var(--superficie); border-radius: 8px; padding: 10px 12px; }
.campo:focus { outline: 2px solid var(--destaque); outline-offset: -1px; border-color: transparent; }
.msg-erro { color: var(--travado); min-height: 1.2em; font-size: 14px; }

/* ── início (lista de mapas) */
.inicio { max-width: 1080px; margin: 0 auto; padding: 22px 16px 60px; }
.inicio header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.inicio h1 { margin: 0; font-size: 24px; flex: 1; min-width: 180px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.acoes .campo { flex: 1; min-width: 180px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; box-shadow: var(--sombra);
  display: grid; gap: 8px; cursor: pointer; position: relative; text-align: left; }
.cartao:hover { border-color: var(--borda-forte); }
.cartao h3 { margin: 0; font-size: 16px; padding-right: 30px; overflow-wrap: anywhere; }
.cartao .info { color: var(--apagado); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.cartao .menu { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; padding: 4px 8px; border-radius: 6px;
  color: var(--apagado); font-size: 18px; line-height: 1; }
.cartao .menu:hover { background: var(--superficie-2); }
.barra-progresso { height: 6px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; display: flex; }
.barra-progresso span { display: block; height: 100%; }
.barra-progresso .f { background: var(--feito); } .barra-progresso .a { background: var(--fazendo); } .barra-progresso .t { background: var(--travado); }
.vazio { color: var(--apagado); padding: 30px 0; text-align: center; }
details.lixeira { margin-top: 28px; color: var(--apagado); }
details.lixeira summary { cursor: pointer; }
details.lixeira li { margin: 6px 0; display: flex; gap: 10px; align-items: center; }

/* ── editor */
.editor { position: fixed; inset: 0; display: grid; grid-template-rows: var(--barra) 1fr; grid-template-columns: 1fr 340px; }
.editor.sem-painel { grid-template-columns: 1fr 0; }
.barra-topo { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--superficie);
  border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.barra-topo::-webkit-scrollbar { display: none; }
.barra-topo h1 { font-size: 16px; margin: 0 4px; white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; cursor: text;
  padding: 4px 6px; border-radius: 6px; flex: 0 0 auto; }
.barra-topo h1:hover { background: var(--superficie-2); }
.barra-topo > .bt, .barra-topo > .grupo { flex: 0 0 auto; }
.estado { font-size: 12.5px; color: var(--apagado); white-space: nowrap; }
.barra-topo .estado { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.estado.ruim { color: var(--travado); }
.espaco { flex: 1; min-width: 8px; }
.selo-leitura { font-size: 12px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 99px; padding: 3px 10px; color: var(--apagado); white-space: nowrap; }

.palco { position: relative; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background-color: var(--fundo); background-image: radial-gradient(var(--ponto-grade) 1.2px, transparent 1.2px); }
.palco.arrastando { cursor: grabbing; }
.mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.linhas { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.linhas path { fill: none; }
.linhas .galho { stroke: var(--galho); stroke-width: 2; }
.linhas .ligacao { stroke: var(--ligacao); stroke-width: 2; stroke-dasharray: 7 5; }
.linhas .ligacao.sel { stroke-width: 3.5; stroke-dasharray: none; }
.linhas .mencao { stroke: var(--mencao); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; }
.linhas .toque { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.linhas .temporaria { stroke: var(--ligacao); stroke-width: 2; stroke-dasharray: 7 5; }
.rotulo { position: absolute; transform: translate(-50%, -50%); background: var(--superficie); color: var(--ligacao); border: 1px solid var(--ligacao);
  border-radius: 99px; font-size: 12px; padding: 1px 8px; white-space: nowrap; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.no { position: absolute; left: 0; top: 0; width: max-content; min-width: 120px; max-width: 300px; padding: 9px 13px 10px; background: var(--superficie);
  border: 1.5px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); cursor: pointer; overflow-wrap: anywhere; }
.no.oculto { visibility: hidden; pointer-events: none; }
.no .tit { font-weight: 600; white-space: pre-wrap; }
.no .corpo { color: var(--apagado); font-size: 13px; margin-top: 3px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no.raiz { max-width: 360px; min-width: 160px; background: var(--centro); color: var(--centro-texto); border-color: var(--centro); padding: 13px 18px; font-size: 18px; }
.no.raiz .corpo { color: inherit; opacity: .75; font-size: 13.5px; }
.no.sel { outline: 2px solid var(--destaque); outline-offset: 6px; }
.no.alvo { outline: 3px dashed var(--ligacao); outline-offset: 6px; }
.no.arrastado { opacity: .85; z-index: 5; }
/* status = só o anel de fora do cartão; o recheio fica livre para a cor de destaque */
.no.st-afazer { box-shadow: 0 0 0 3px var(--afazer), var(--sombra); }
.no.st-fazendo { box-shadow: 0 0 0 3px var(--fazendo), var(--sombra); }
.no.st-feito { box-shadow: 0 0 0 3px var(--feito), var(--sombra); }
.no.st-travado { box-shadow: 0 0 0 3px var(--travado), var(--sombra); }
/* cor de destaque: o cartão inteiro pintado, com a letra branca e forte (como o centro do mapa) */
.no[class*="cor-"] { color: #fff; border-color: transparent; }
.no[class*="cor-"] .tit { font-weight: 800; font-size: 16px; letter-spacing: .01em; }
.no[class*="cor-"] .corpo { color: inherit; opacity: .88; }
.no[class*="cor-"] .wl, .no[class*="cor-"] a { color: inherit; }
.no.cor-vermelho, .amostra.c-vermelho { background: #dc2626; }
.no.cor-laranja, .amostra.c-laranja { background: #ea580c; }
.no.cor-amarelo, .amostra.c-amarelo { background: #eab308; }
.no.cor-verde, .amostra.c-verde { background: #16a34a; }
.no.cor-azul, .amostra.c-azul { background: #2563eb; }
.no.cor-roxo, .amostra.c-roxo { background: #7c3aed; }
.no.cor-rosa, .amostra.c-rosa { background: #db2777; }
.no.cor-cinza, .amostra.c-cinza { background: #475569; }
.no.cor-preto, .amostra.c-preto { background: #1f2328; }
.no.cor-amarelo { color: #1f2328; }
.no.anexo { width: 240px; max-width: 240px; min-width: 0; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 2px 8px; padding: 8px 10px;
  background: var(--superficie-2); border-style: dashed; }
.no.anexo .ic { grid-row: span 2; font-size: 20px; text-align: center; }
.no.anexo .tit { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no.anexo .corpo { margin: 0; font-size: 12px; -webkit-line-clamp: 1; }
.no .wl { color: var(--mencao); text-decoration: underline dotted; cursor: pointer; }
.no.raiz .wl { color: inherit; }
.no textarea.ed { display: block; width: 260px; min-height: 24px; border: 0; outline: 0; background: transparent; resize: none; padding: 0; margin: 0;
  font-weight: 600; line-height: 1.4; overflow: hidden; }
.no.raiz textarea.ed { width: 300px; }
.dobra { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--borda-forte); background: var(--superficie);
  color: var(--apagado); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0; line-height: 1; z-index: 2; }
.dobra.cheia { width: auto; min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--destaque); border-color: var(--destaque); color: #fff; }
.dir-horizontal .dobra, .dir-livre .dobra { right: -12px; top: 50%; transform: translateY(-50%); }
.dir-vertical .dobra { bottom: -12px; left: 50%; transform: translateX(-50%); }
.pega { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--ligacao); border: 2px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--ligacao); opacity: 0; transition: opacity .12s; cursor: crosshair; z-index: 3; touch-action: none; }
.dir-horizontal .pega, .dir-livre .pega { right: -8px; bottom: -8px; }
.dir-vertical .pega { right: -8px; top: 50%; transform: translateY(-50%); }
.no:hover .pega, .no.sel .pega { opacity: 1; }
.leitura .pega { display: none; }

/* ── painel da direita */
.painel { background: var(--superficie); border-left: 1px solid var(--borda); overflow-y: auto; padding: 14px 16px 90px; display: flex; flex-direction: column; gap: 14px; }
.painel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); margin: 0 0 6px; }
.painel textarea.campo { min-height: 96px; resize: vertical; line-height: 1.45; }
.painel .linha { display: flex; gap: 6px; flex-wrap: wrap; }
.painel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.painel li.item { display: flex; align-items: center; gap: 8px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.painel li.item span.t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel { overflow-x: hidden; }
.painel section { min-width: 0; }
.painel ul { grid-template-columns: minmax(0, 1fr); }      /* nome comprido corta com "…" em vez de passar da borda */
.painel li.item { min-width: 0; }
.painel li.item button { border: 0; background: transparent; color: var(--apagado); padding: 2px 6px; border-radius: 6px; }
.painel li.item button:hover { background: var(--borda); }
.painel .nada { color: var(--apagado); font-size: 13.5px; }
.status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
/* cada botão de status já mostra a cor dele (a borda); o marcado fica pintado, com a letra branca */
.status .bt { justify-content: center; font-size: 13px; padding: 7px 4px; border-width: 2px; color: var(--texto); font-weight: 600; }
.status .s-afazer { border-color: var(--afazer); } .status .s-fazendo { border-color: var(--fazendo); }
.status .s-feito { border-color: var(--feito); } .status .s-travado { border-color: var(--travado); }
.status .bt.ativo { color: #fff; }
.status .s-afazer.ativo { background: var(--afazer); } .status .s-fazendo.ativo { background: var(--fazendo); }
.status .s-feito.ativo { background: var(--feito); } .status .s-travado.ativo { background: var(--travado); }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.amostra { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda-forte); padding: 0; }
.amostra.ativa { box-shadow: 0 0 0 3px var(--destaque); }
.amostra.sem-cor { background: linear-gradient(135deg, var(--superficie) 44%, var(--travado) 44%, var(--travado) 56%, var(--superficie) 56%); }
.numero-grande { font-size: 28px; font-weight: 700; }
.atalhos { font-size: 13px; color: var(--apagado); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.atalhos kbd { font: 12px ui-monospace, monospace; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.dica { font-size: 13px; color: var(--apagado); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; border: 1px solid var(--borda); border-radius: 99px; padding: 3px 10px; background: var(--superficie-2); cursor: pointer; }

/* ── janelas, avisos */
.fundo-modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-forte); width: 100%; max-width: 460px; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden; }
.modal.larga { max-width: 760px; }
.modal header { padding: 16px 18px 6px; display: flex; align-items: center; gap: 10px; }
.modal header h2 { margin: 0; font-size: 17px; flex: 1; }
.modal .conteudo { padding: 8px 18px 14px; overflow-y: auto; display: grid; gap: 10px; }
.modal footer { padding: 12px 18px 16px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--borda); }
.lista-notas { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.lista-notas button { text-align: left; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 8px 10px; display: grid; }
.lista-notas button:hover { background: var(--superficie-2); border-color: var(--borda); }
.lista-notas small { color: var(--apagado); }
.nota-lida { line-height: 1.55; }
.nota-lida h2, .nota-lida h3, .nota-lida h4 { margin: 18px 0 6px; }
.nota-lida table { border-collapse: collapse; font-size: 13.5px; display: block; overflow-x: auto; }
.nota-lida td, .nota-lida th { border: 1px solid var(--borda); padding: 4px 8px; vertical-align: top; }
.nota-lida pre { background: var(--superficie-2); padding: 10px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.nota-lida code { background: var(--superficie-2); border-radius: 4px; padding: 0 4px; font-size: 13px; }
.nota-lida .wl { color: var(--mencao); cursor: pointer; text-decoration: underline dotted; }
.nota-lida ul { padding-left: 20px; }
.avisos { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--centro); color: var(--centro-texto); border-radius: 10px; padding: 10px 14px; box-shadow: var(--sombra-forte); display: flex; gap: 12px; align-items: center; font-size: 14px; }
.toast button { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 7px; padding: 3px 10px; }
.faixa { position: fixed; top: calc(var(--barra) + 8px); left: 50%; transform: translateX(-50%); z-index: 40; background: var(--fazendo-fundo);
  border: 1px solid var(--fazendo); border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--sombra-forte); max-width: calc(100vw - 32px); }

/* ── celular */
@media (max-width: 760px) {
  .editor, .editor.sem-painel { grid-template-columns: 1fr; grid-template-rows: var(--barra) 1fr auto; }
  .painel { border-left: 0; border-top: 1px solid var(--borda); max-height: 42vh; padding-bottom: 24px; }
  .editor.sem-painel .painel { display: none; }
  .barra-topo h1 { max-width: 46vw; font-size: 15px; }
  .barra-topo .estado { max-width: 22vw; }
  .barra-topo { gap: 6px; padding: 0 8px; }
  .avisos { bottom: calc(42vh + 12px); }
  .so-largo { display: none !important; }
}
@media (min-width: 761px) { .so-celular { display: none !important; } }