/* Simulador de cadência multicanal: complementa nt.css (nt-calc, nt-campo, nt-calc-resultado, nt-botao). Mobile-first.
   Canais: e-mail = azul sólido, ligação = claro, LinkedIn = contorno azul, WhatsApp = cinza; a letra dentro do ponto
   (E, T, in, W) garante que a cor nunca é a única pista. */

.cm-ferramenta [hidden] { display: none !important; }

.cm-modelos { margin: 0 0 1rem; gap: .5rem; }
.cm-campos { margin-top: .2rem; }

.cm-grade-caixa {
  background: #1C1C1E; border: 1px solid var(--nt-borda, rgba(255, 255, 255, .05)); border-radius: 16px;
  padding: 1.1rem .9rem; margin: 0 0 1.4em;
}
.cm-grade-caixa .nt-ajuda { margin: 0 0 .8rem; }
.cm-grade-rolagem { max-width: 100%; overflow-x: auto; }

.nt-corpo table.cm-grade { width: 100%; border-collapse: separate; border-spacing: 4px 3px; margin: 0; font-size: .9rem; }
.cm-grade thead th {
  font: 500 .78rem var(--nt-fonte-titulo); letter-spacing: .03em; color: #95A5A6; text-align: center; padding: 0 0 .3rem;
}
.cm-grade thead th:first-child { text-align: left; }
.cm-grade tbody th { text-align: left; white-space: nowrap; padding-right: .3rem; font-weight: 400; }
.cm-dia-num { font-family: var(--nt-fonte-titulo); font-weight: 700; color: #ffffff; margin-right: .3rem; }
.cm-dia-sem { font-size: .8rem; color: #95A5A6; }
.cm-grade td { padding: 0; }
.cm-sexta th, .cm-sexta td { padding-bottom: 9px; }
.cm-sexta th { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14); }

.cm-celula {
  width: 100%; min-width: 44px; min-height: 40px; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: #101214; color: #5F6A6C;
  font: 700 .85rem var(--nt-fonte-titulo); display: grid; place-items: center;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cm-celula:hover { border-color: rgba(18, 150, 252, .6); color: #95A5A6; }
.cm-celula:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.cm-celula[aria-pressed="true"].cm-email { background: #1296FC; border-color: #1296FC; color: #04080D; }
.cm-celula[aria-pressed="true"].cm-ligacao { background: #ECEFF1; border-color: #ECEFF1; color: #04080D; }
.cm-celula[aria-pressed="true"].cm-linkedin { background: rgba(18, 150, 252, .14); border: 2px solid #1296FC; color: #ffffff; }
.cm-celula[aria-pressed="true"].cm-whatsapp { background: #95A5A6; border-color: #95A5A6; color: #04080D; }

/* resultado */
.cm-resultado { margin: 0 0 1.6em; }
.cm-resultado > h2 { margin-top: 1.2em; }
.nt-corpo .cm-status {
  margin: 0 0 1rem; padding: .7rem .95rem; border-radius: 10px;
  background: rgba(18, 150, 252, .08); border-left: 3px solid #1296FC; font-size: .95rem; line-height: 1.5;
}

.cm-linha-caixa {
  background: #1C1C1E; border: 1px solid var(--nt-borda, rgba(255, 255, 255, .05)); border-radius: 14px;
  padding: .8rem .8rem .9rem; margin: 0 0 1rem;
}
.nt-corpo .cm-legenda { margin: 0 0 .6rem; font-size: .8rem; color: #95A5A6; line-height: 2; }
.cm-legenda .cm-ponto { margin: 0 .15rem 0 .5rem; vertical-align: middle; }
.cm-legenda .cm-ponto:first-child { margin-left: 0; }

.cm-linha { overflow-x: auto; padding-bottom: .2rem; }
.cm-linha-cabeca, .cm-linha-fila {
  display: grid; grid-template-columns: 4.2rem repeat(var(--cm-dias, 15), minmax(15px, 1fr)); align-items: center;
  min-width: calc(4.2rem + var(--cm-dias, 15) * 15px);
}
.cm-linha-cabeca { font-size: .68rem; color: #5F6A6C; text-align: center; margin-bottom: .2rem; }
.cm-linha-cabeca .cm-linha-dia { color: #95A5A6; }
.cm-linha-rotulo { font-size: .74rem; color: #95A5A6; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .3rem; }
.cm-linha-fila { min-height: 24px; border-top: 1px solid rgba(255, 255, 255, .05); }
.cm-linha-celula, .cm-linha-dia { display: grid; place-items: center; height: 24px; }
.cm-nova-semana { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }

.cm-ponto {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font: 700 .58rem var(--nt-fonte-titulo); line-height: 1; letter-spacing: -.02em;
}
.cm-ponto.cm-email { background: #1296FC; color: #04080D; }
.cm-ponto.cm-ligacao { background: #ECEFF1; color: #04080D; }
.cm-ponto.cm-linkedin { background: #141619; border: 2px solid #1296FC; color: #ffffff; }
.cm-ponto.cm-whatsapp { background: #95A5A6; color: #04080D; }

.cm-linha-silencio .cm-linha-rotulo { color: #ECEFF1; }
.cm-silencio-barra {
  width: 100%; height: 6px;
  background: repeating-linear-gradient(90deg, #ECEFF1 0 4px, transparent 4px 7px);
}

.cm-numeros { margin: 0 0 .9rem; }
.nt-corpo .cm-intervalos, .nt-corpo .cm-semanas { margin: 0 0 .5rem; font-size: .9rem; color: #B8C2C4; line-height: 1.55; }
.nt-corpo .cm-semanas { margin-bottom: 1rem; }
.cm-resultado h3 { margin: 1.2em 0 .6em; }

.nt-corpo .cm-alertas { list-style: none; padding: 0; margin: 0 0 1rem; }
.nt-corpo .cm-alerta {
  margin: 0 0 .5rem; padding: .65rem .85rem; border-radius: 10px; background: #1C1C1E;
  border-left: 3px solid #5F6A6C; font-size: .93rem; line-height: 1.5;
}
.nt-corpo .cm-alerta-excesso { border-left-color: #ECEFF1; }
.nt-corpo .cm-alerta-silencio { border-left: 3px dashed #ECEFF1; }
.nt-corpo .cm-alerta-ok { border-left-color: #1296FC; }
.cm-alerta-selo {
  display: inline-block; margin-right: .25rem; padding: .05rem .5rem; border-radius: 999px;
  font: 500 .7rem var(--nt-fonte-titulo); letter-spacing: .06em; text-transform: uppercase; vertical-align: .1em;
  border: 1px solid #5F6A6C; color: #95A5A6;
}
.cm-alerta-excesso .cm-alerta-selo { border-color: #ECEFF1; color: #04080D; background: #ECEFF1; }
.cm-alerta-silencio .cm-alerta-selo { border: 1px dashed #ECEFF1; color: #ECEFF1; }
.cm-alerta-atencao .cm-alerta-selo { border-color: #ECEFF1; color: #ECEFF1; }
.cm-alerta-ok .cm-alerta-selo { border-color: #1296FC; color: #1296FC; background: rgba(18, 150, 252, .12); }

.cm-acoes { margin: 0 0 1.2rem; }
.cm-cta .nt-botoes { margin-top: .4rem; }

@media (min-width: 640px) {
  .cm-grade-caixa { padding: 1.2rem 1.25rem; }
  .cm-linha-cabeca, .cm-linha-fila { grid-template-columns: 5rem repeat(var(--cm-dias, 15), minmax(18px, 1fr)); }
  .cm-linha-caixa { padding: 1rem 1.1rem; }
}

@media (max-width: 380px) {
  .cm-celula { min-width: 40px; min-height: 38px; }
  .nt-corpo table.cm-grade { border-spacing: 3px 3px; }
}

@media print {
  .cm-controles, .cm-acoes, .cm-cta, .cm-grade-caixa .nt-ajuda { display: none !important; }
  .cm-grade-caixa, .cm-linha-caixa, .nt-corpo .cm-alerta { background: #ffffff; border-color: #cccccc; color: #111111; }
  .cm-dia-num { color: #111111; }
}