/* =============================================================
   Calendário novo — AÇÕES (etapa 2, 30/09/2026): peek, editor "Entrego em", folha
   inferior no celular, balão navy, marcas de arrasto. Prefixo .kal- (contrato §1);
   tokens copiados do guia (leitor-estilo.md §1.3): cor por SITUAÇÃO, obra em texto teal.
   Fica ao lado de calendario.css (do CORE); os tokens aqui vivem nos próprios elementos
   flutuantes, para não brigar com o :root do calendario.css.

   ESCOPO (conserto de 01/10): este arquivo carrega DEPOIS do calendario.css e divide com
   ele vários nomes de classe (.kal-g, .kal-chip, .kal-tit, .kal-mais, .kal-vazio, .kal-sd,
   .kal-lib…). Por isso TODO seletor daqui começa em .kal-peek ou .kal-balao — nada casa
   na grade, no painel ou na lista de Tipos, sem exceção. O escopo.js confere isso a cada
   rodada.
   ============================================================= */

.kal-peek, .kal-balao {
  --kal-navy: #002F49; --kal-teal: #005E82; --kal-verde: #2F8F5B; --kal-verde2: #276221;
  --kal-ambar: #C08A28; --kal-verm: #9C0006; --kal-afz: #7F9BB8;
  --kal-mut: #5F7485; --kal-mut2: #93A3AF; --kal-nevoa: #F5F8FA; --kal-papel: #FFFFFF;
  --kal-filete: #D2DAE1; --kal-filete2: #E3E9ED; --kal-hover: #F4F7F9;
  --kal-serif: 'Cormorant Garamond', Georgia, serif;
  --kal-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --kal-mono: 'JetBrains Mono', ui-monospace, monospace;
  --kal-sombra: 0 1px 2px rgba(0,47,73,.06), 0 8px 24px -8px rgba(0,47,73,.18);
  font-family: var(--kal-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--kal-navy);
  letter-spacing: normal;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.kal-peek *, .kal-balao * { box-sizing: border-box; }
.kal-peek button { font-family: inherit; font-variant-numeric: inherit; }
.kal-peek [title]:not(button):not(input) { cursor: help; }

/* ---------- peek: cartão flutuante de 372 px ---------- */
.kal-peek {
  position: fixed;
  z-index: 990;
  width: 372px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  background: var(--kal-papel);
  border: 1px solid var(--kal-filete);
  border-radius: 6px;
  box-shadow: var(--kal-sombra);
  padding: 14px 18px 16px;
  outline: none;
  scrollbar-width: thin;
}
.kal-peek:focus-visible { box-shadow: var(--kal-sombra), 0 0 0 2px rgba(0,94,130,.28); }
.kal-peek .kal-peek-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kal-peek .kal-tipo {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--kal-mut); display: block; min-width: 0; line-height: 1.4;
}
.kal-peek .kal-tipo b { color: var(--kal-navy); font-weight: 700; }
.kal-peek .kal-x {
  margin-left: auto; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: transparent; color: var(--kal-mut); font-size: 16px; line-height: 1;
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--kal-filete); padding: 0;
  transition: background .15s, color .15s;
}
.kal-peek .kal-x:hover { background: var(--kal-navy); color: #fff; box-shadow: none; }

/* glifos dos tipos, SÓ dentro do peek (os da concha são do calendario.css e não podem ser
   tocados daqui: sem o prefixo, "Marcos-chave" virava bolinha navy e "liberada" ficava com
   cara de combinado). As medidas que o calendario.css dava de tabela ao glifo do peek
   (largura do "previsto", borda da "reunião" e do "documento") ficam escritas aqui. */
.kal-peek .kal-g { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--kal-navy); background: var(--kal-navy); vertical-align: 0; margin-right: 7px; }
.kal-peek .kal-g::before { content: none; }   /* o ◆/◇ em texto é da concha; aqui o glifo é desenhado */
.kal-peek .kal-g.comb { background: var(--kal-navy); border-color: var(--kal-navy); }
.kal-peek .kal-g.digi { background: transparent; border-color: var(--kal-ambar); }
.kal-peek .kal-g.auto { background: transparent; border-color: var(--kal-ambar); border-style: dashed; }
.kal-peek .kal-g.prev { background: transparent; border: 1.5px dashed var(--kal-afz); border-radius: 2px; width: 11px; }
.kal-peek .kal-g.marco { background: var(--kal-navy); border-color: var(--kal-navy); border-radius: 1px; transform: rotate(45deg) scale(.85); }
.kal-peek .kal-g.conc { background: var(--kal-verde); border-color: var(--kal-verde); }
.kal-peek .kal-g.rot { background: transparent; border-color: var(--kal-mut2); }
.kal-peek .kal-g.reun { background: rgba(0,47,73,.12); border: 0 none rgba(0,47,73,.12); border-radius: 1px; width: 12px; height: 6px; }
.kal-peek .kal-g.doc { background: transparent; border: 1px solid var(--kal-navy); border-radius: 1px; width: 7px; height: 9px; }
.kal-peek .kal-g.sem { background: transparent; border-color: var(--kal-mut2); border-style: dotted; }

/* a linha da Minha semana, em cartão */
.kal-peek .kal-obra { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--kal-teal); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.kal-peek .kal-obra small { letter-spacing: .04em; text-transform: none; font-weight: 500; color: var(--kal-mut2); font-size: 11.5px; margin-left: 8px; }
.kal-peek .kal-tit {
  display: inline; background: none; border: 0; padding: 0; margin: 4px 0 0; text-align: left;
  font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--kal-navy); cursor: pointer; border-radius: 0; letter-spacing: normal;
}
.kal-peek .kal-tit:hover { text-decoration: underline; text-decoration-color: rgba(0,47,73,.35); text-underline-offset: 3px; }
.kal-peek .kal-tit.peq { font-size: 13px; font-weight: 500; margin: 0; }
.kal-peek .kal-tit .com { font-weight: 500; color: var(--kal-mut); font-size: 12.5px; margin-left: 6px; }
.kal-peek .kal-meta { margin-top: 6px; font-size: 12.5px; color: var(--kal-mut); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kal-peek .kal-meta b { color: var(--kal-navy); font-weight: 600; }
.kal-peek .kal-meta .v { color: var(--kal-ambar); font-weight: 600; }
.kal-peek .kal-meta .vm { color: var(--kal-verm); }
.kal-peek .kal-meta .verde { color: var(--kal-verde2); font-weight: 600; }
.kal-peek .kal-imp { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; }
.kal-peek .kal-lib { color: var(--kal-teal); }
.kal-peek .kal-lib b { font-weight: 600; }
.kal-peek .kal-sd { display: inline-block; font-size: 11px; color: var(--kal-mut); border: 1px dashed var(--kal-mut2); padding: 0 6px; border-radius: 2px; margin-left: 4px; line-height: 16px; vertical-align: 1px; }
.kal-peek .kal-cit { margin-top: 10px; padding: 8px 10px; background: var(--kal-nevoa); border-left: 2px solid var(--kal-filete); font-size: 12.5px; color: var(--kal-navy); line-height: 1.4; }
.kal-peek .kal-cit .quem { color: var(--kal-mut); margin-left: 6px; white-space: nowrap; }
.kal-peek .kal-nota { margin-top: 6px; font-size: 12px; color: var(--kal-mut2); line-height: 1.4; }
.kal-peek .kal-vazio { font-size: 12.5px; color: var(--kal-mut2); padding: 10px 0; }
.kal-peek .kal-sub-h { margin-top: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--kal-mut); font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--kal-filete2); }
.kal-peek .kal-ant { margin-top: 12px; font-size: 13px; }

/* ações: caixa navy (CONCLUÍ) + ação em texto teal (Entrego em), como .sm-bt / .sm-lk */
.kal-peek .kal-acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kal-filete2); }
.kal-peek .kal-bt {
  border: 1px solid var(--kal-navy); background: #fff; color: var(--kal-navy); font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 0; cursor: pointer; line-height: 1.2;
  transition: background .12s, color .12s; margin-left: auto;
}
.kal-peek .kal-bt:hover:not(:disabled) { background: var(--kal-navy); color: #fff; }
.kal-peek .kal-bt.cheio { background: var(--kal-navy); color: #fff; margin-left: 0; }
.kal-peek .kal-bt.cheio:hover:not(:disabled) { background: #00496A; }
.kal-peek .kal-lk {
  font-size: 12.5px; color: var(--kal-teal); text-decoration: underline; text-decoration-color: rgba(0,94,130,.35); text-underline-offset: 3px;
  cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; font-weight: 500; letter-spacing: normal; text-transform: none;
}
.kal-peek .kal-lk:hover:not(:disabled) { text-decoration-color: var(--kal-teal); }
.kal-peek .kal-bt:disabled, .kal-peek .kal-lk:disabled, .kal-peek .kal-lk2:disabled, .kal-peek .kal-chip:disabled { opacity: .45; cursor: progress; }
/* links de navegação: abrir na obra · Gantt · Fluxo · semana de Fulano · + sub-tarefa */
.kal-peek .kal-links { margin-top: 10px; font-size: 12px; color: var(--kal-mut2); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.kal-peek .kal-links .sep { color: var(--kal-mut2); }
.kal-peek .kal-lk2 {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; border: 0; padding: 0 0 1px; font-size: 12px; font-weight: 500;
  color: var(--kal-teal); cursor: pointer; border-radius: 0; letter-spacing: normal; transition: background-size .2s;
}
.kal-peek .kal-lk2:hover:not(:disabled) { background-size: 100% 1px; }

/* ---------- editor "Entrego em" (o mesmo da Minha semana) ---------- */
.kal-peek .kal-editor { background: var(--kal-nevoa); border-left: 2px solid var(--kal-teal); padding: 12px 14px; margin-top: 12px; }
.kal-peek .kal-editor .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kal-peek .kal-editor .lbl { font-size: 12px; font-weight: 700; color: var(--kal-navy); margin-right: 6px; }
.kal-peek .kal-chip {
  border: 1px solid var(--kal-filete); background: #fff; padding: 4px 9px; font-size: 12px; color: var(--kal-navy); cursor: pointer;
  border-radius: 0; line-height: 1.3; letter-spacing: normal; text-transform: none; font-weight: 500; white-space: nowrap;
}
.kal-peek .kal-chip.on { border-color: var(--kal-navy); box-shadow: inset 0 0 0 1px var(--kal-navy); font-weight: 700; }
.kal-peek .kal-chip.outra { color: var(--kal-teal); }
.kal-peek .kal-editor .pad { font-size: 12px; color: var(--kal-mut2); margin-left: auto; white-space: nowrap; }
.kal-peek .kal-avisos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.kal-peek .kal-avisos:empty { display: none; }   /* o bloco existe sempre: o campo "outra data…" troca só o conteúdo dele */
.kal-peek .kal-aviso { font-size: 12px; color: var(--kal-ambar); font-weight: 600; }
.kal-peek .kal-aviso.navy { color: var(--kal-navy); font-weight: 500; }
.kal-peek .kal-editor .l2 { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.kal-peek .kal-editor input[type=text] {
  flex: 1; min-width: 120px; border: 0; border-bottom: 1px solid var(--kal-mut2); background: transparent; font: inherit; font-size: 13px;
  padding: 6px 2px; color: var(--kal-navy); border-radius: 0; outline: none; box-shadow: none;
}
.kal-peek .kal-editor input[type=text]:focus { border-bottom-color: var(--kal-navy); }
.kal-peek .kal-editor input::placeholder { color: var(--kal-mut2); }
.kal-peek .kal-editor input[type=date] { border: 1px solid var(--kal-filete); background: #fff; font-family: var(--kal-mono); font-size: 12px; font-weight: 500; padding: 4px 8px; color: var(--kal-navy); border-radius: 0; }
.kal-peek .kal-editor .kal-nota { margin-top: 8px; }

/* ---------- peek de previsão / marco / concluídas: lista sem ações ---------- */
.kal-peek .kal-prev-obra { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--kal-filete2); }
.kal-peek .kal-prev-obra .n { margin-left: auto; font-family: var(--kal-serif); font-size: 18px; font-weight: 500; color: var(--kal-navy); line-height: 1; }
.kal-peek .kal-prev-t { padding: 6px 0; border-bottom: 1px solid var(--kal-filete2); font-size: 13px; line-height: 1.35; }
.kal-peek .kal-prev-t:last-child { border-bottom: 0; }
.kal-peek .kal-prev-t .t { display: block; color: var(--kal-navy); }
.kal-peek .kal-prev-t.trav .t, .kal-peek .kal-prev-t.trav .kal-tit { font-weight: 500; color: var(--kal-mut); }
.kal-peek .kal-prev-t .m { display: block; font-size: 12px; color: var(--kal-mut); margin-top: 1px; }
.kal-peek .kal-esp { font-weight: 500; color: var(--kal-navy); }
.kal-peek .kal-prev-t .kal-obra { margin-right: 6px; }

/* ---------- lista do dia vazio: combinar uma sem data para aquele dia ---------- */
.kal-peek .kal-li { padding: 9px 0; border-bottom: 1px solid var(--kal-filete2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; }
.kal-peek .kal-li .kal-obra { grid-column: 1; }
.kal-peek .kal-li .kal-tit { grid-column: 1; }
.kal-peek .kal-li .m { grid-column: 1; font-size: 12px; color: var(--kal-mut); }
.kal-peek .kal-li .kal-lk { grid-column: 2; grid-row: 1 / span 3; align-self: center; white-space: nowrap; }
.kal-peek .kal-li .kal-editor { grid-column: 1 / 3; }
.kal-peek .kal-mais { padding: 10px 0 0; font-size: 12.5px; }

/* ---------- arrasto ---------- */
/* Sem regra aqui, de propósito: o anel do dia-alvo (teal / âmbar) e a marca em arrasto são
   pintados pelo calendario-acoes.js no próprio elemento (pintaAlvo / marcaArrastando); a
   marca fantasma (.kal-fantasma) e o cursor de arrastar são do calendario.css. */

/* ---------- balão navy dos chips de previsão (o do Gantt/Painel) ---------- */
.kal-balao {
  position: fixed; z-index: 9998; display: none; pointer-events: none;
  background: #002F49; color: #fff; padding: 8px 10px; border-radius: 6px; max-width: 300px;
  font-size: 12px; line-height: 1.35; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.kal-balao.on { display: block; }
.kal-balao .tt { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.kal-balao .ob { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #C5D3DE; margin-top: 5px; }
.kal-balao .sub { color: #E7EEF3; opacity: .92; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-balao .sub.fim { margin-top: 5px; color: #C5D3DE; font-style: italic; opacity: .85; }

/* (o toast com Desfazer usa o .toast / .toast-undo do portal, sem regra própria aqui) */

/* ---------- celular: o peek vira folha inferior ---------- */
@media (max-width: 760px) {
  .kal-peek, .kal-peek.kal-folha {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto; max-width: none; max-height: 72vh;
    border-radius: 12px 12px 0 0; border-bottom: 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px -12px rgba(0,47,73,.35);
  }
  .kal-peek::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--kal-filete); margin: -8px auto 12px; }
  .kal-peek .kal-tit { font-size: 15px; }
  .kal-peek .kal-acoes { gap: 10px; }
  .kal-peek .kal-editor .l2 { flex-wrap: wrap; }
  .kal-peek .kal-editor input[type=text] { flex: 1 1 100%; }
  .kal-peek .kal-editor .pad { margin-left: 0; width: 100%; }
  .kal-peek .kal-li { grid-template-columns: 1fr; }
  .kal-peek .kal-li .kal-lk { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  .kal-peek .kal-li .kal-editor { grid-column: 1; }
  .kal-balao { display: none !important; }
}
@media (hover: none) {
  .kal-peek .kal-x { width: 32px; height: 32px; }
}
/* palavra longa (URL colada num título ou no motivo) não estoura o peek nem a folha */
.kal-peek .kal-tit, .kal-peek .kal-meta, .kal-peek .kal-cit, .kal-peek .kal-li { overflow-wrap: anywhere; min-width: 0; }
/* folha inferior: links com altura de dedo */
@media (max-width: 760px) {
  .kal-peek .kal-lk, .kal-peek .kal-lk2 { display: inline-block; padding-top: 7px; padding-bottom: 7px; }
}
@media print {
  .kal-peek, .kal-balao { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .kal-peek *, .kal-peek .kal-bt, .kal-peek .kal-x, .kal-peek .kal-lk2 { transition: none !important; }
}