/* Tela Inicio (app.js) e detalhes dos formularios de produto/cliente. */

/* Atalhos grandes: Emitir cupom / Emitir NF-e */
.inicio-atalhos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--e4); }
.inicio-atalhos .botao-card { text-decoration: none; }
@media (max-width: 760px) { .inicio-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* "Este mes": 4 blocos clicaveis */
.inicio-mes { margin-left: auto; font-weight: 600; text-transform: capitalize; }
.inicio-blocos { display: grid; gap: var(--e3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .inicio-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.inicio-bloco {
  display: flex; flex-direction: column; gap: 2px; padding: var(--e3) var(--e4); border: 1px solid var(--borda); border-left: 4px solid var(--borda-forte);
  border-radius: var(--raio-p); background: var(--cartao); color: inherit; text-decoration: none; transition: background 0.15s;
}
.inicio-bloco:hover, .inicio-bloco:focus-visible { background: var(--cartao-2); }
.inicio-bloco.ok { border-left-color: var(--ok); }
.inicio-bloco.erro { border-left-color: var(--erro); }
.inicio-bloco.aviso { border-left-color: var(--aviso); }
.inicio-bloco-titulo { font-size: var(--f12); font-weight: 700; color: var(--suave); }
.inicio-bloco-sub { font-size: var(--f12); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inicio-bloco .numero-grande { line-height: 1.2; }

/* Ultimas notas + coluna lateral (limite do MEI e cadastros) */
.inicio-colunas { display: grid; gap: 0 var(--e4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .inicio-colunas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.inicio-ver-todas { margin-left: auto; font-size: var(--f12); }
.inicio-ver-todas svg { width: 14px; height: 14px; }
.inicio-nota-direita { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.inicio-cadastros { display: grid; gap: 10px; margin-bottom: var(--e4); }
.inicio-cadastro { display: flex; align-items: center; gap: var(--e3); margin-bottom: 0; padding: 14px var(--e4); color: inherit; text-decoration: none; }
.inicio-cadastro:hover { background: var(--cartao-2); }
.inicio-cadastro > span:last-child svg, .inicio-cadastro > span:last-child { color: var(--suave); }
.inicio-cadastro-icone { width: 38px; height: 38px; border-radius: 50%; background: var(--cor-clara); color: var(--cor); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.inicio-cadastro-icone svg { width: 20px; height: 20px; }
.inicio-cadastro-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Formularios de produto/cliente: nota logo abaixo do titulo da secao */
.form > .form-nota { margin: calc(-1 * var(--e2)) 0 0; }
/* O bloco "Em processamento" usa a classe .aviso so para a cor da borda: anula o estilo de caixa de aviso. */
a.inicio-bloco.aviso { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: var(--e3) var(--e4); background: var(--cartao); color: inherit; font-weight: 400; border: 1px solid var(--borda); border-left: 4px solid var(--aviso); }
a.inicio-bloco.aviso:hover { background: var(--cartao-2); }