/* Elos Ideias — visual leve, pensado para uso rápido no celular. */
:root{
  --verde:#2f6f6b;
  --verde-escuro:#245854;
  --creme:#f6f3ee;
  --papel:#ffffff;
  --texto:#22302f;
  --suave:#6c7b79;
  --borda:#e2ddd4;
  --perigo:#b4453a;
  --raio:12px;
  --sombra:0 1px 3px rgba(34,48,47,.08), 0 6px 20px rgba(34,48,47,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--creme); color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%; overscroll-behavior:none;
}
button,input,select,textarea{font:inherit;color:inherit}
.oculto{display:none !important}
.espaco{flex:1}

/* ---------------- botões ---------------- */
.btn{
  border:1px solid transparent; border-radius:var(--raio); padding:10px 16px;
  background:transparent; cursor:pointer; font-weight:600; transition:.15s;
}
.btn-primario{background:var(--verde); color:#fff}
.btn-primario:hover{background:var(--verde-escuro)}
.btn-fantasma{border-color:var(--borda); background:var(--papel)}
.btn-fantasma:hover{border-color:var(--verde)}
.btn-bloco{width:100%}
.btn.perigo,.btn-icone.perigo{color:var(--perigo)}
.btn-icone{
  border:0; background:transparent; cursor:pointer; font-size:18px;
  width:38px; height:38px; border-radius:10px; line-height:1;
}
.btn-icone:hover{background:rgba(0,0,0,.06)}
.erro{color:var(--perigo); min-height:20px; margin:8px 0 0; font-size:14px}
.dica{color:var(--suave); font-size:13px}

/* ---------------- login ---------------- */
.tela-login{min-height:100dvh; display:grid; place-items:center; padding:20px}
.cartao-login{
  width:100%; max-width:380px; background:var(--papel); padding:28px;
  border-radius:18px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:14px;
}
.marca{display:flex; gap:12px; align-items:center; margin-bottom:6px}
.marca-icone{font-size:26px}
.marca h1{margin:0; font-size:21px}
.marca p{margin:2px 0 0; color:var(--suave); font-size:13px}
.cartao-login label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--suave); font-weight:600}
input,select,textarea{
  border:1px solid var(--borda); border-radius:10px; padding:11px 12px;
  background:var(--papel); width:100%; font-weight:400; color:var(--texto);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde); outline-offset:-1px; border-color:transparent}

/* ---------------- estrutura ---------------- */
.app{height:100dvh; display:flex; flex-direction:column}
.topo{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--verde); color:#fff;
}
.topo .btn-icone{color:#fff}
.topo .btn-icone:hover{background:rgba(255,255,255,.18)}
.topo-titulo{font-size:16px; letter-spacing:.2px}

.abas{
  display:flex; gap:6px; padding:8px 12px; overflow-x:auto; background:var(--papel);
  border-bottom:1px solid var(--borda); scrollbar-width:none;
}
.abas::-webkit-scrollbar{display:none}
.aba{
  flex:0 0 auto; border:1px solid var(--borda); background:var(--creme);
  border-radius:999px; padding:7px 14px; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:6px; font-size:14px;
}
.aba .contador{
  background:rgba(0,0,0,.08); border-radius:999px; padding:0 7px; font-size:11px; font-weight:700;
}
.aba.ativa{color:#fff; border-color:transparent; font-weight:600}
.aba.ativa .contador{background:rgba(255,255,255,.25)}
.aba-nova{border-style:dashed; color:var(--suave)}

.corpo{flex:1; display:flex; min-height:0}

/* lista de ideias */
.painel-lista{
  width:320px; flex:0 0 320px; border-right:1px solid var(--borda);
  background:var(--papel); display:flex; flex-direction:column; min-height:0;
}
.painel-topo{padding:12px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--borda)}
.painel-rodape{padding:10px 12px; border-top:1px solid var(--borda)}
.lista-ideias{flex:1; overflow-y:auto; padding:8px}
.cartao-ideia{
  border:1px solid var(--borda); border-radius:var(--raio); padding:11px 12px;
  margin-bottom:8px; cursor:pointer; background:var(--papel); transition:.15s;
}
.cartao-ideia:hover{border-color:var(--verde)}
.cartao-ideia.ativa{border-color:var(--verde); background:#f2f7f6}
.cartao-ideia h3{margin:0 0 4px; font-size:15px; line-height:1.3}
.cartao-ideia p{margin:0; font-size:13px; color:var(--suave); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cartao-rodape{display:flex; gap:8px; align-items:center; margin-top:7px; font-size:11px; color:var(--suave)}
.selo{border-radius:999px; padding:2px 8px; background:var(--creme); border:1px solid var(--borda); font-weight:600}
.selo.pronta{background:#e7f3ec; border-color:#bcdcc7; color:#2c6b43}
.selo.construindo{background:#e9f0f8; border-color:#c4d6ea; color:#2b5580}
.selo.pausada{background:#f6efe3; border-color:#e4d3b4; color:#7a5c22}

/* editor */
.painel-editor{flex:1; min-width:0; display:flex; flex-direction:column}
.vazio{flex:1; display:grid; place-content:center; text-align:center; color:var(--suave); gap:8px}
.vazio span{font-size:44px}
.editor{flex:1; display:flex; flex-direction:column; min-height:0}
.editor-topo{display:flex; align-items:center; gap:8px; padding:12px 16px 4px}
.titulo-input{border:0; font-size:20px; font-weight:700; padding:6px 0; background:transparent}
.titulo-input:focus{outline:0; border-bottom:2px solid var(--verde)}
.salvo{font-size:12px; color:var(--suave); white-space:nowrap; opacity:0; transition:.3s}
.salvo.visivel{opacity:1}
.editor-meta{display:flex; gap:8px; padding:0 16px 10px}
.editor-meta select{max-width:190px}

.guias{display:flex; gap:4px; padding:0 12px; border-bottom:1px solid var(--borda); overflow-x:auto; scrollbar-width:none}
.guias::-webkit-scrollbar{display:none}
.guia{
  border:0; background:transparent; padding:10px 12px; cursor:pointer;
  border-bottom:3px solid transparent; white-space:nowrap; color:var(--suave); font-weight:600;
}
.guia.ativa{color:var(--verde); border-bottom-color:var(--verde)}
.painel-guia{flex:1; min-height:0; display:flex; flex-direction:column; padding:12px 16px 16px}

/* anotação + voz */
.barra-voz{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.btn-voz{border:1px solid var(--borda); background:var(--papel)}
.btn-voz.gravando{background:var(--perigo); color:#fff; border-color:transparent; animation:pulsa 1.2s infinite}
@keyframes pulsa{50%{opacity:.65}}
#ideia-texto{flex:1; resize:none; line-height:1.6; min-height:220px}

/* mapa mental */
.ferramentas{display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.ferr{
  border:1px solid var(--borda); background:var(--papel); border-radius:10px;
  width:40px; height:40px; cursor:pointer; font-size:17px;
}
.ferr.ativa{background:var(--verde); color:#fff; border-color:transparent}
.ferr.perigo{color:var(--perigo)}
.divisor{width:1px; height:26px; background:var(--borda); margin:0 4px}
#cor-mapa{width:40px; height:40px; padding:3px; border-radius:10px}
.palco{
  flex:1; min-height:300px; border:1px solid var(--borda); border-radius:var(--raio);
  background:var(--papel);
  background-image:radial-gradient(circle, #dcd6cb 1px, transparent 1px);
  background-size:22px 22px;
  overflow:hidden; position:relative; touch-action:none; cursor:grab;
}
.palco.desenhando{cursor:crosshair}
#svg-mapa{width:100%; height:100%; display:block}
.no-caixa{
  fill:var(--papel); stroke-width:2; rx:10;
}
.no-caixa.selecionado{stroke-dasharray:5 3}
.no-texto{font-size:13px; fill:var(--texto); pointer-events:none; user-select:none}
.dica-mapa{margin:8px 0 0}

/* arquivos */
.area-upload{
  border:2px dashed var(--borda); border-radius:var(--raio); padding:26px; text-align:center;
  cursor:pointer; display:flex; flex-direction:column; gap:6px; background:var(--papel);
}
.area-upload:hover{border-color:var(--verde)}
.area-upload small{color:var(--suave)}
.grade-anexos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:12px; overflow-y:auto}
.anexo{border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; background:var(--papel); position:relative}
.anexo img{width:100%; height:110px; object-fit:cover; display:block; background:var(--creme)}
.anexo .doc{height:110px; display:grid; place-content:center; font-size:34px; background:var(--creme)}
.anexo .nome{padding:7px 8px; font-size:12px; word-break:break-word}
.anexo .fechar{position:absolute; top:6px; right:6px; background:rgba(0,0,0,.6); color:#fff; border:0; border-radius:50%; width:24px; height:24px; cursor:pointer}

/* IA */
.acoes-ia{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.resultado-ia{
  flex:1; overflow-y:auto; background:var(--papel); border:1px solid var(--borda);
  border-radius:var(--raio); padding:16px; white-space:pre-wrap; line-height:1.65;
}
.resultado-ia:empty::before{content:"Escolha uma ação acima. A IA lê sua anotação, o mapa e os nomes dos arquivos."; color:var(--suave)}
.resultado-ia h3{margin:14px 0 6px; font-size:16px}
.resultado-ia strong{color:var(--verde-escuro)}
.rodape-ia{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

/* modal */
.modal{position:fixed; inset:0; background:rgba(20,28,27,.45); display:grid; place-items:center; padding:16px; z-index:50}
.modal-cartao{
  background:var(--papel); border-radius:16px; padding:22px; width:100%; max-width:440px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--sombra); max-height:90dvh; overflow-y:auto;
}
.modal-cartao h2{margin:0; font-size:18px}
.modal-cartao label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--suave); font-weight:600}
.linha{display:flex; gap:10px}
.linha .curto{flex:1}
.modal-botoes{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px}

/* aviso flutuante */
.aviso{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--texto); color:#fff; padding:11px 18px; border-radius:999px;
  box-shadow:var(--sombra); z-index:60; font-size:14px; max-width:90vw; text-align:center;
}

/* ---------------- celular ---------------- */
.so-mobile{display:none}
@media (max-width:820px){
  .so-mobile{display:inline-block}
  .painel-lista{width:100%; flex:1 1 auto; border-right:0}
  .corpo.vendo-editor .painel-lista{display:none}
  .corpo:not(.vendo-editor) .painel-editor{display:none}
  .editor-meta{flex-direction:column}
  .editor-meta select{max-width:none}
  .painel-guia{padding:10px 12px 14px}
  .palco{min-height:52dvh}
  .grade-anexos{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@media (min-width:821px){ #btn-voltar{display:none} }