/* ==========================================================
   styles.css — Gerador de Propostas iTpraTi
   Secções: 1) variáveis  2) base  3) layout responsivo
            4) formulário  5) documento A4  6) impressão
   ========================================================== */

/* 1) VARIÁVEIS — para mudar a paleta altera apenas estes valores */
:root {
  --azul-escuro: #082B49;
  --azul: #087CA5;
  --turquesa: #39B8C9;
  --azul-claro: #DFF7F8;
  --texto: #14283a;
  --borda: #b9d3dc;
  --erro: #b3261e;
  --raio: 8px;
}

/* 2) BASE */
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--texto); background: #eef5f7;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }
[hidden] { display: none !important; }

.topo { background: var(--azul-escuro); color: #fff; padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; }
.wordmark { font-size: 1.7rem; font-weight: 700; letter-spacing: -.5px; }
.wordmark span { color: var(--turquesa); }
.topo h1 { font-size: 1.1rem; margin: 0; font-weight: 600; }
.topo p { margin: 0; opacity: .85; font-size: .9rem; }
.versao { margin-left: auto; font-size: .75rem; opacity: .6; }

/* 3) LAYOUT — uma coluna em telemóvel; duas colunas a partir de 1000px */
.grelha { display: grid; gap: 20px; padding: 16px; max-width: 1500px; margin: 0 auto; }
@media (min-width: 1000px) {
  .grelha { grid-template-columns: minmax(380px, 5fr) 6fr; align-items: start; }
  .painel-doc { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
}

/* 4) FORMULÁRIO */
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-bottom: 16px; }
.cartao h2 { margin: 0 0 12px; font-size: 1.05rem; color: var(--azul-escuro); }
.campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.largo { grid-column: 1 / -1; }
label, legend { font-weight: 600; font-size: .88rem; color: var(--azul-escuro); }
.obrig { color: var(--erro); }
input, select, textarea {
  font: inherit; padding: 10px; min-height: 44px; /* 44px = área de toque adequada */
  border: 1px solid var(--borda); border-radius: 6px; background: #fff; width: 100%;
}
textarea { min-height: 76px; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--erro); }
.erro { color: var(--erro); font-size: .8rem; min-height: 0; }
fieldset.grupo { border: 1px solid var(--borda); border-radius: 6px; padding: 8px 12px; }
fieldset.grupo label { display: flex; gap: 8px; align-items: center; font-weight: 400; min-height: 36px; }
fieldset.grupo input { width: auto; min-height: 0; }
.ajuda { font-size: .8rem; color: #4a6577; }

.botoes { display: flex; flex-wrap: wrap; gap: 8px; }
button {
  font: inherit; font-weight: 600; min-height: 44px; padding: 0 16px; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--azul); background: #fff; color: var(--azul);
}
button.primario { background: var(--azul); color: #fff; }
button:hover { filter: brightness(.95); }

.resultados { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 12px; }
.resultado { background: var(--azul-claro); border-radius: 6px; padding: 10px; }
.resultado b { display: block; font-size: 1.05rem; color: var(--azul-escuro); }
.resultado small { color: #3b5566; }
.link-gerado { word-break: break-all; background: var(--azul-claro); padding: 8px; border-radius: 6px; font-size: .85rem; margin: 6px 0; }
.aviso { background: #fff8e1; border: 1px solid #e6cf7a; padding: 10px; border-radius: 6px; font-size: .85rem; margin-top: 10px; }
table.comp { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.comp th, table.comp td { border: 1px solid var(--borda); padding: 6px; text-align: left; vertical-align: top; }
table.comp th { background: var(--azul-claro); }
.tabela-scroll { overflow-x: auto; }

#estado-msg { min-height: 1.4em; font-size: .9rem; font-weight: 600; color: var(--azul); }

/* 5) DOCUMENTO A4 — representação da carta */
.folha {
  background: #fff; width: 100%; max-width: 794px; /* ~21cm */ margin: 0 auto;
  padding: 40px 48px; border: 1px solid var(--borda); box-shadow: 0 2px 10px rgba(8,43,73,.12);
  font: 11.5pt/1.55 Georgia, "Times New Roman", serif; color: #111;
}
.folha .cabecalho { border-bottom: 3px solid var(--turquesa); padding-bottom: 8px; margin-bottom: 22px; font-family: system-ui, Arial, sans-serif; }
.folha .cabecalho .wordmark { color: var(--azul-escuro); font-size: 1.6rem; }
.folha .cabecalho small { display: block; color: var(--azul); }
#carta { outline: none; min-height: 300px; }
#carta p { margin: 0 0 12px; white-space: pre-line; break-inside: avoid; }
#carta:focus { background: #fbfeff; box-shadow: inset 0 0 0 2px var(--azul-claro); }
.vazio { color: #6a8190; font-style: italic; }
@media (max-width: 600px) { .folha { padding: 20px 16px; } }

/* 6) IMPRESSÃO — mostra apenas a carta, em A4 */
@page { size: A4; margin: 18mm; }
@media print {
  body { background: #fff; }
  .nao-imprimir, .topo { display: none !important; }
  .grelha { display: block; padding: 0; }
  .painel-doc { position: static; max-height: none; overflow: visible; }
  .folha { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .cabecalho { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}