/* Casca comum Quantum Care: topo, rodapé, procedência e estados de acesso.
   Usada igual em quantumcare.info, portal.quantumcare.info e dados.quantumcare.info.
   Carrega depois de tokens/fontes.css, tokens/organic-base.css e tokens/quantum-care.css.
   Nenhum HEX e nenhum espaçamento fora de --space-*: todo valor vem do sistema.
   Prefixo casca- em tudo, para não colidir com o CSS próprio de cada site. */

/* ---------- ícone ---------- */
.casca-icone{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- topo ---------- */
.casca-topo{background:var(--qc-superficie);border-bottom:1px solid var(--qc-divisor);
  font-family:var(--font-body);color:var(--qc-texto);position:relative;z-index:10}
.casca-topo a{color:inherit;text-decoration:none}
.casca-topo-interno{max-width:1200px;margin:0 auto;padding:var(--space-3) var(--space-6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}

.casca-marca{display:flex;flex-direction:column;gap:0;flex:1 1 0;min-width:0}
.casca-marca b{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:24px;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.casca-marca span{font-size:12px;color:var(--qc-texto-secundario)}

.casca-menu-botao{display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--qc-borda-essencial);
  border-radius:999px;background:var(--qc-superficie-alta);color:var(--qc-texto);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.casca-menu-botao:hover{background:var(--color-accent-200);color:var(--color-accent-900)}
.casca-menu-botao[hidden]{display:none}

.casca-menu{flex:1 1 100%;display:flex;flex-direction:column;gap:var(--space-3)}
.casca-topo[data-casca-js] .casca-menu[data-fechado]{display:none}

.casca-destinos,.casca-local,.casca-acoes{display:flex;flex-direction:column;gap:var(--space-1)}
.casca-destinos a,.casca-local a,.casca-acao{display:flex;align-items:center;gap:var(--space-2);
  min-height:44px;padding:var(--space-2) var(--space-4);border-radius:999px;
  font-size:14px;font-weight:600}
.casca-destinos a:hover,.casca-local a:hover,.casca-acao:hover{background:var(--color-accent-200);color:var(--color-accent-900)}
.casca-destinos a[aria-current]{background:var(--qc-acao);color:var(--qc-sobre-acao)}
.casca-local{border-top:1px solid var(--qc-divisor);padding-top:var(--space-3)}
.casca-local a{font-weight:400}
.casca-local a[aria-current=page]{font-weight:700;background:var(--qc-superficie-alta);
  box-shadow:inset 0 0 0 1px var(--qc-borda-essencial)}
.casca-acoes{border-top:1px solid var(--qc-divisor);padding-top:var(--space-3)}
a.casca-acao,button.casca-acao{color:var(--qc-texto);text-decoration:none;background:transparent}
.casca-acao.casca-acao--principal{background:var(--qc-acao);color:var(--qc-sobre-acao);justify-content:center}
.casca-acao.casca-acao--principal:hover{background:var(--qc-acao-hover);color:var(--qc-sobre-acao)}
.casca-acao--secundaria{box-shadow:inset 0 0 0 1px var(--qc-borda-essencial);justify-content:center}

@media (max-width:479px){
  .casca-topo-interno,.casca-rodape-interno{padding-inline:var(--space-4)}
  .casca-marca b{font-size:22px}
}

/* Sem JavaScript o botão fica oculto (atributo hidden) e o menu aparece inteiro, empilhado. */
@media (min-width:960px){
  .casca-topo-interno{flex-wrap:nowrap;display:grid;align-items:center;column-gap:var(--space-6);
    grid-template-columns:auto 1fr auto}
  .casca-marca{flex:0 0 auto}
  .casca-menu-botao{display:none}
  .casca-menu,.casca-topo[data-casca-js] .casca-menu[data-fechado]{display:contents}
  .casca-marca{grid-column:1;grid-row:1}
  .casca-destinos{grid-column:2;grid-row:1;flex-direction:row;justify-self:start}
  .casca-acoes{grid-column:3;grid-row:1;flex-direction:row;border-top:0;padding-top:0;gap:var(--space-2)}
  .casca-local{grid-column:1 / -1;grid-row:2;flex-direction:row;flex-wrap:wrap;
    margin-top:var(--space-2);padding-top:var(--space-2)}
  .casca-local a{min-height:36px;padding:var(--space-1) var(--space-3)}
}

/* ---------- rodapé ---------- */
.casca-rodape{background:var(--qc-superficie);border-radius:calc(var(--radius-lg)*2) calc(var(--radius-lg)*2) 0 0;
  margin-top:var(--space-8);font-family:var(--font-body);color:var(--qc-texto)}
.casca-rodape-interno{max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6);
  display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:flex-start}
.casca-rodape-logo{width:224px;height:auto;flex:0 0 auto}
.casca-rodape-texto{flex:1 1 320px;display:flex;flex-direction:column;gap:var(--space-2);
  font-size:14px;max-width:62ch}
.casca-rodape-texto p{margin:0}
.casca-rodape-titulo{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:20px;line-height:1.2}
.casca-rodape-nota{color:var(--qc-texto-secundario);font-size:13px}
.casca-rodape-nav{flex:0 1 240px;display:flex;flex-direction:column;gap:var(--space-1);font-size:14px}
.casca-rodape-nav a{color:var(--qc-link);font-weight:600;min-height:32px;display:inline-flex;align-items:center}
.casca-rodape-nav h2{font-family:var(--font-body);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--qc-texto-secundario);margin:0 0 var(--space-1)}

/* ---------- procedência ---------- */
.casca-procedencia{display:flex;gap:var(--space-1) var(--space-4);flex-wrap:wrap;font-size:12px;
  color:var(--qc-texto-secundario);margin:0}
.casca-procedencia b{color:var(--qc-texto);font-weight:700}

/* ---------- estados de acesso e de carga ---------- */
.casca-estado{background:var(--qc-superficie);border-radius:var(--radius-lg);
  padding:var(--space-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);
  font-family:var(--font-body);color:var(--qc-texto)}
.casca-estado--bloqueado{border:1px dashed var(--qc-borda-essencial)}
.casca-estado-cabeca{display:flex;align-items:flex-start;gap:var(--space-3)}
.casca-estado-cabeca .casca-icone{width:22px;height:22px;margin-top:2px;color:var(--qc-identificacao)}
.casca-estado--falha .casca-estado-cabeca .casca-icone{color:var(--qc-erro)}
.casca-estado-titulo{font-weight:700;font-size:15px;margin:0}
.casca-estado p{margin:0;max-width:62ch}
.casca-estado-texto{color:var(--qc-texto-secundario);font-size:14px}
.casca-estado-indicador{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:20px;line-height:1.25}
.casca-estado-acoes{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.casca-estado .casca-acao{display:inline-flex}
.casca-estado a.casca-link{color:var(--qc-link);font-weight:600;font-size:14px}
.casca-rodape-nav a{text-decoration:none}
button.casca-acao{border:0;font:inherit;font-size:14px;font-weight:600;cursor:pointer}

.casca-carga{width:100%;max-width:420px;height:8px;border-radius:999px;background:var(--qc-superficie-alta);
  overflow:hidden;position:relative}
.casca-carga::after{content:"";position:absolute;inset:0;width:40%;border-radius:999px;
  background:var(--color-accent-2-500);animation:casca-carga 1.4s ease-in-out infinite}
@keyframes casca-carga{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){
  .casca-carga::after{animation:none;width:100%;opacity:.45}
}

/* ---------- foco ---------- */
.casca-topo :focus-visible,.casca-rodape :focus-visible,.casca-estado :focus-visible{
  outline:2px solid var(--qc-foco);outline-offset:2px}