/* Painel GBlue.
   Cores tiradas do logótipo: o azul-marinho do contorno, o azul das letras e
   o vermelho do G. O vermelho fica reservado para o que precisa de atenção. */
:root {
  --tinta: #0e1b4d;
  --tinta-suave: #4a5578;
  --azul: #0a6fd0;
  --azul-escuro: #07539c;
  --vermelho: #c8102e;
  --ambar: #8a5a00;
  --verde: #1b6e45;
  --papel: #f4f6fa;
  --branco: #fff;
  --linha: #d8deea;
  --fundo-vermelho: #fdecee;
  --fundo-ambar: #fff3d1;
  --fundo-verde: #e4f4eb;
  --raio: 6px;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 1rem/1.5 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--azul-escuro); text-underline-offset: 2px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 2px; }
code { font: 0.9em ui-monospace, "Cascadia Mono", Consolas, monospace; background: #e7ebf3; padding: 0.05em 0.35em; border-radius: 4px; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
p { margin: 0 0 0.75rem; }

/* ---------------------------------------------------------------- barra */
.barra {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  background: var(--tinta); color: var(--branco);
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
}
.marca { display: flex; align-items: center; gap: 0.6rem; color: var(--branco); text-decoration: none; font-weight: 600; }
.marca img { display: block; }
.barra nav { display: flex; gap: 0.25rem; flex: 1; }
.barra nav a { color: #c9d3ee; text-decoration: none; padding: 0.35rem 0.75rem; border-radius: var(--raio); white-space: nowrap; }
.barra nav a:hover { color: var(--branco); background: rgba(255, 255, 255, 0.08); }
.barra nav a[aria-current="page"] { color: var(--branco); background: rgba(255, 255, 255, 0.16); }
.sair { display: flex; align-items: center; gap: 0.9rem; margin: 0; color: #c9d3ee; font-size: 0.9rem; }
.sair button { background: none; border: 1px solid rgba(255, 255, 255, 0.35); color: var(--branco); padding: 0.3rem 0.7rem; }
.sair button:hover { background: rgba(255, 255, 255, 0.12); }
.barra :focus-visible { outline-color: #8cc8ff; }

main { max-width: 72rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem; }
footer { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 2rem; color: var(--tinta-suave); font-size: 0.8rem; }

/* ---------------------------------------------------------------- peças comuns */
button, .botao {
  font: inherit; cursor: pointer; display: inline-block; text-decoration: none;
  padding: 0.5rem 1rem; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--branco); color: var(--tinta);
}
button:hover, .botao:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.principal { background: var(--azul); border-color: var(--azul); color: var(--branco); font-weight: 600; }
.principal:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); color: var(--branco); }

.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.resumo { color: var(--tinta-suave); margin: 0; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.resumo strong { color: var(--vermelho); }
.caminho { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--tinta-suave); }
.menor { display: block; font-size: 0.85rem; color: var(--tinta-suave); font-weight: 400; }
.num { text-align: right; white-space: nowrap; }

.aviso, .nota, .erro { padding: 0.7rem 1rem; border-radius: var(--raio); border-left: 4px solid; max-width: 46rem; }
.aviso { background: var(--fundo-verde); border-color: var(--verde); }
.nota { background: #e9eef8; border-color: var(--tinta-suave); color: var(--tinta); font-size: 0.95rem; }
.erro { background: var(--fundo-vermelho); border-color: var(--vermelho); }

.estado { display: inline-block; font-size: 0.85rem; font-weight: 600; padding: 0.1rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.e-ativo { background: var(--fundo-verde); color: var(--verde); }
.e-suspenso { background: var(--fundo-vermelho); color: var(--vermelho); }
.e-erro { background: var(--vermelho); color: var(--branco); }
.e-a_provisionar { background: #e7ebf3; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- lista de clientes */
.procura { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.procura label { position: absolute; left: -999rem; }
.procura input { flex: 0 1 22rem; }

.lista { width: 100%; border-collapse: collapse; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.lista th, .lista td { text-align: left; padding: 0.8rem 1rem; vertical-align: top; }
.lista thead th { font-size: 0.85rem; font-weight: 600; color: var(--tinta-suave); border-bottom: 1px solid var(--linha); background: #fafbfd; }
.lista .num { text-align: right; }
.lista tbody tr + tr > * { border-top: 1px solid var(--linha); }
.lista tbody th { font-weight: 600; border-left: 5px solid transparent; }
.lista tbody th a { text-decoration: none; }
.lista tbody th a:hover { text-decoration: underline; }
.data { display: block; }
.prazo { display: block; font-size: 0.85rem; color: var(--tinta-suave); }

/* A cor diz o que fazer: verde, nada; âmbar, tratar da renovação; vermelho, já passou. */
.lista tbody tr.r-expirada th, .lista tbody tr.r-hoje th { border-left-color: var(--vermelho); }
.lista tbody tr.r-alerta th { border-left-color: #e0a100; }
.lista tbody tr.r-em_dia th { border-left-color: #6fc394; }
.lista tbody tr.r-sem_data th { border-left-color: var(--linha); }
.r-expirada .prazo, .r-hoje .prazo { color: var(--vermelho); font-weight: 600; }
.r-alerta .prazo { color: var(--ambar); font-weight: 600; }

.vazio { background: var(--branco); border: 1px dashed var(--linha); border-radius: var(--raio); padding: 2rem; max-width: 46rem; }

/* ---------------------------------------------------------------- ficha */
.duas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; margin-top: 1.5rem; }
section { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
dl { display: grid; grid-template-columns: 11rem 1fr; gap: 0.4rem 1rem; margin: 0; }
dt { color: var(--tinta-suave); }
dd { margin: 0; overflow-wrap: anywhere; }
.notas, .texto { white-space: pre-wrap; margin: 0; max-width: 46rem; }

.renovacao { border-left: 6px solid var(--linha); }
.renovacao .grande { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
.renovacao .prazo { font-size: 1rem; margin: 0.2rem 0 0; }
.renovacao.r-expirada, .renovacao.r-hoje { border-left-color: var(--vermelho); background: var(--fundo-vermelho); }
.renovacao.r-alerta { border-left-color: #e0a100; background: var(--fundo-ambar); }
.renovacao.r-em_dia { border-left-color: #6fc394; }

.historico ol { list-style: none; margin: 0; padding: 0; }
.historico li { position: relative; padding: 0 0 1rem 1.25rem; border-left: 2px solid var(--linha); }
.historico li:last-child { padding-bottom: 0; }
.historico li::before { content: ""; position: absolute; left: -6px; top: 0.4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.historico p { margin: 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.historico .que { font-weight: 600; font-size: 1rem; }

/* ---------------------------------------------------------------- formulários */
label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="search"], select, textarea {
  font: inherit; color: inherit; width: 100%;
  padding: 0.5rem 0.65rem; border: 1px solid #aab4cb; border-radius: var(--raio); background: var(--branco);
}
input:disabled { background: #eef1f6; color: var(--tinta-suave); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--vermelho); border-width: 2px; }
.ajuda { font-size: 0.85rem; color: var(--tinta-suave); margin: 0.25rem 0 0; }
.erro-campo { font-size: 0.9rem; color: var(--vermelho); font-weight: 600; margin: 0.25rem 0 0; }

.ficha fieldset { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); margin: 0 0 1rem; padding: 1rem 1.25rem 1.25rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.ficha legend { font-weight: 700; padding: 0 0.4rem; }
.campo.largo { grid-column: span 2; }
.campo.inteiro { grid-column: 1 / -1; }
.escolha { display: grid; grid-template-columns: auto 1fr; gap: 0 0.6rem; align-items: start; }
.escolha input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; }
.escolha label { margin: 0; }
.escolha .ajuda { grid-column: 2; }
.acoes { display: flex; gap: 1.25rem; align-items: center; margin-top: 1.25rem; }

.estreito { max-width: 24rem; }
.estreito label { margin-top: 0.9rem; }
.estreito button { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- entrada */
.entrada main { display: grid; place-items: center; min-height: 100vh; padding-top: 1rem; padding-bottom: 1rem; }
.porta { width: 100%; max-width: 23rem; background: var(--branco); border: 1px solid var(--linha); border-top: 6px solid var(--tinta); border-radius: var(--raio); padding: 2rem 1.75rem; }
.porta img { display: block; margin-bottom: 1.25rem; }
.porta h1 { font-size: 1.35rem; margin-bottom: 1.25rem; }
.porta label { margin-top: 0.9rem; }
.porta button { width: 100%; margin-top: 1.5rem; padding: 0.65rem; }
.porta .erro { margin-bottom: 0; font-size: 0.92rem; }

/* ---------------------------------------------------------------- ecrãs estreitos */
@media (max-width: 52rem) {
  .duas { grid-template-columns: 1fr; }
  .ficha fieldset { grid-template-columns: 1fr 1fr; }
  dl { grid-template-columns: 1fr; gap: 0 1rem; }
  dd { margin-bottom: 0.5rem; }
  .lista thead { position: absolute; left: -999rem; }
  .lista, .lista tbody, .lista tr, .lista th, .lista td { display: block; }
  .lista tbody tr + tr > * { border-top: 0; }
  .lista tbody tr + tr { border-top: 1px solid var(--linha); }
  .lista td { padding-top: 0; padding-left: calc(1rem + 5px); }
  .lista .num { text-align: left; }
  .lista td:empty { display: none; }
}
@media (max-width: 30rem) {
  .ficha fieldset { grid-template-columns: 1fr; }
  .campo.largo { grid-column: auto; }
}