/* inicio.css :: tela Início (js/inicio.js). Classes com prefixo ini-; o topo, o alerta e os primeiros passos usam home-* e in-* (app.css e nuvem.css) */

/* linhas de cartões: pendências + aguardando o cliente; agenda + link do portal */
.ini-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.ini-linha.ini-l1 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.ini-linha.um, .ini-linha.ini-l1.um { grid-template-columns: minmax(0, 1fr); }
.ini-linha > .sc { min-width: 0; }
@media (max-width: 1180px) { .ini-linha, .ini-linha.ini-l1 { grid-template-columns: minmax(0, 1fr); } }

.ini-carregando { margin: 0; font-size: 13px; color: var(--muted); }
.ini-resumo { margin: 0 0 12px; font-size: 13.5px; color: var(--body); }
.ini-resumo strong { color: var(--navy-800); }
.ini-nada { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.ini-acoes { margin-top: 14px; }
.ini-acoes .btn-g .av-ic { width: 15px; height: 15px; }
.ini-lk-mais { background: none; border: none; padding: 4px 2px; margin-top: 6px; color: var(--navy-700); font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 600; text-decoration: underline; cursor: pointer; text-align: left; }
.ini-lk-mais:hover { color: var(--orange); }

/* primeiro passo de uma tela que a pessoa não acessa */
.ini-sem-acesso { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--muted); }

/* estado vazio */
.ini-vazio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ini-vazio > .av-ic { width: 48px; height: 48px; flex: 0 0 auto; }
.ini-vazio p { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 13.5px; color: var(--body); }
.ini-vazio p strong { display: block; color: var(--ink); margin-bottom: 2px; }
.ini-vazio .btn { flex: 0 0 auto; }
.ini-vazio-p > .av-ic { width: 40px; height: 40px; }

/* pendências */
.ini-h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; font-family: var(--font-ui); font-size: 13px;
  font-weight: 700; color: var(--navy-800); text-transform: uppercase; letter-spacing: .06em; }
.ini-h3 .av-ic { width: 16px; height: 16px; color: var(--orange); }
.ini-h3-eq { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.ini-n { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 20px; background: var(--navy-100); color: var(--navy-700);
  font-size: 11.5px; font-weight: 700; text-align: center; letter-spacing: 0; text-transform: none; }
.ini-badge { display: inline-block; padding: 1px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.ini-badge-atr { background: #FDECEC; color: #B42318; }
.ini-badge-hoje { background: var(--orange-light); color: #9A4A12; }
.ini-cargo-meu { margin: -4px 0 8px; font-size: 12.5px; color: var(--muted); }
.ini-tars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ini-tar { --cor: #9CA3AF; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-left: 4px solid var(--cor); border-radius: 10px; background: var(--bg-surface); text-align: left;
  font-family: var(--font-ui); color: var(--body); cursor: pointer; }
.ini-tar:hover { background: var(--bg-zebra); }
.ini-tar-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ini-tar-t strong { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.ini-tar-t small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ini-prazo { font-size: 11.5px; font-weight: 700; color: var(--cor); text-align: right; }
.ini-p-atr { --cor: #B42318; background: #FFFBFA; }
.ini-p-hoje { --cor: var(--orange); }
.ini-p-prox { --cor: var(--navy-600); }
.ini-p-sem .ini-prazo { color: var(--muted); font-weight: 600; }
.ini-cargos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ini-cargo { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-zebra); }
.ini-cargo h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.ini-cargo .ini-tar { grid-template-columns: minmax(0, 1fr); }
.ini-cargo .ini-prazo { text-align: left; }

/* aguardando o cliente */
.ini-esps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ini-esp { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-surface); text-align: left; font-family: var(--font-ui); color: var(--body); cursor: pointer; }
.ini-esp:hover { background: var(--bg-zebra); }
.ini-esp > .av-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--orange); }
.ini-esp-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ini-esp-t strong { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.ini-esp-t small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ini-esp-t small:empty { display: none; }
.ini-alerta-txt { color: #9A4A12; font-weight: 600; }

/* agenda com clientes (cores dos tipos iguais às da Agenda) */
.ini-ags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ini-ag { --cor: var(--muted); display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px;
  border: 1px solid var(--border); border-left: 4px solid var(--cor); border-radius: 10px; background: var(--bg-surface); text-align: left;
  font-family: var(--font-ui); color: var(--body); cursor: pointer; }
.ini-ag:hover { background: var(--bg-zebra); }
.ini-ag-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 2px; border-radius: 8px;
  background: var(--navy-100); color: var(--navy-800); text-align: center; }
.ini-ag-d b { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ini-ag-d strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ini-ag-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ini-ag-t strong { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.ini-ag-t small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ini-ag .ini-end { color: var(--body); }
.ini-ag.hoje { border-color: var(--orange-border); background: #FFF8F2; }
.ini-ag.hoje .ini-ag-d { background: var(--orange); color: #fff; }
.ini-ag.hoje .ini-ag-d b { color: #fff; }
.ini-t-medicao { --cor: #E27526; }
.ini-t-visita_tecnica { --cor: #213470; }
.ini-t-reuniao_cliente { --cor: #0E7490; }
.ini-t-vistoria { --cor: #15803D; }
.ini-t-entrega_instalacao { --cor: #9A4A12; }

/* link do portal do cliente */
.ini-pls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ini-pl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.ini-pl:first-child { border-top: none; padding-top: 0; }
.ini-pl-t { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ini-pl-t strong { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.ini-pl-t small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ini-pl-a { display: flex; flex-wrap: wrap; gap: 6px; }
.ini-pl-a .btn-g { padding: 7px 12px; }
.ini-pl-a .av-ic { width: 15px; height: 15px; }
.ini-pl.sem .ini-pl-t strong { color: var(--body); }
.ini-zap { border-color: #25D366; color: #0B6B35; }
.ini-zap:hover { background: #E9FBF0; }

/* atalhos por setor */
.ini-atalhos { margin: 8px 0 22px; }
.ini-setores { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.ini-setor { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); box-shadow: var(--sh-card); }
.ini-setor header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; padding: 0 8px; }
.ini-setor header img { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 5px 8px rgba(12,21,37,.22)); }
.ini-setor h3 { margin: 0; min-width: 0; font-family: var(--font-title); font-size: 18px; line-height: 1.2; color: var(--ink); overflow-wrap: break-word; }
.ini-setor-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ini-lk { display: block; padding: 6px 8px; border-radius: 6px; color: var(--navy-700); font-size: 13.5px; font-weight: 600; text-decoration: none; overflow-wrap: break-word; }
.ini-lk:hover, .ini-lk:focus-visible { background: var(--navy-100); color: var(--orange); }
.ini-sub { margin: 8px 8px 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ini-setor-l.aberto > li:first-child.ini-sub { margin-top: 0; }
.ini-setor .ini-lk-mais { margin-top: auto; padding: 10px 8px 2px; align-self: flex-start; }
@media (max-width: 520px) {
  /* celular: ícone ao lado do nome do setor, para o cartão ficar mais baixo */
  .ini-setor header { flex-direction: row; align-items: center; gap: 12px; }
}
.ini-soltos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ini-solto { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-surface); box-shadow: var(--sh-card); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ini-solto img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.ini-solto:hover { border-color: var(--orange-border); color: var(--orange); }

/* celular */
@media (max-width: 520px) {
  .ini-tar { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
  .ini-prazo { text-align: left; }
  .ini-ag { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .ini-vazio .btn { width: 100%; }
  .ini-pl-a { width: 100%; }
  .ini-pl-a .btn { flex: 1 1 auto; }
  .ini-soltos .ini-solto { flex: 1 1 150px; }
}