/* casca.css — tokens do MEF (fonte: app/src/styles.css e app/DESIGN.md) + barra da casca.
 * Injetada pelo nginx em todo portal de mef.emfoco.med.br/<area>/. Ajuste fino por área em /_casca/areas/<area>.css. */

/* Nunito Sans variável, a MESMA do app (app/public/fonts), servida pela casca: todo portal com a mesma letra. */
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/_casca/fontes/nunito-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/_casca/fontes/nunito-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --mef-font-sans: "Avenir Next", "Nunito Sans", Avenir, "Century Gothic", ui-sans-serif, system-ui, sans-serif;
  --mef-brand-teal: oklch(0.5711 0.0866 217.13);
  --mef-brand-turquesa: oklch(0.7193 0.1197 188.58);
  --mef-brand-azul: oklch(0.3517 0.0756 236.53);
  --mef-brand-magenta: oklch(0.5609 0.2247 6.14);
  --mef-background: oklch(0.9878 0.0021 228.78);
  --mef-foreground: oklch(0.3523 0 0);
  --mef-muted-foreground: oklch(0.5230 0.0260 225);
  --mef-card: oklch(1 0 0);
  --mef-secondary: oklch(0.9545 0.0114 217.54);
  --mef-sidebar-accent: oklch(0.4100 0.0700 233);
  --mef-border: oklch(0.9160 0.0110 220);
  --mef-radius: 0.625rem;
  --mef-radius-cartao: calc(var(--mef-radius) + 4px);   /* rounded-xl do Card do app */
  --mef-sombra-cartao: 0 1px 3px rgb(0 0 0 / .06);      /* "shadow" do Card do app: quase nada */
  --mef-casca-altura: 48px;
  /* nomes que o DESIGN.md manda (--brand-teal etc.) para portais que já os leem */
  --brand-teal: var(--mef-brand-teal);
  --brand-turquesa: var(--mef-brand-turquesa);
  --brand-azul: var(--mef-brand-azul);
  --brand-magenta: var(--mef-brand-magenta);
}
/* a letra vale em toda página da área (também nas públicas); campos e botões herdam */
body { font-family: var(--mef-font-sans); }
button, input, select, textarea { font-family: inherit; }
html.mef-com-casca body { color: var(--mef-foreground); background: var(--mef-background); }

#mef-casca {
  position: sticky; top: 0; z-index: 2147483000;
  display: flex; align-items: center; gap: 12px;
  height: var(--mef-casca-altura); padding: 0 16px; box-sizing: border-box;
  background: var(--mef-brand-azul); color: #fff;
  font: 500 14px/1 var(--mef-font-sans);
  -webkit-font-smoothing: antialiased;
}
#mef-casca a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
#mef-casca a:hover { text-decoration: underline; text-underline-offset: 3px; }
#mef-casca a:focus-visible { outline: 2px solid var(--mef-brand-turquesa); outline-offset: 2px; border-radius: 4px; }
#mef-casca .mef-casca-marca { flex: none; gap: 8px; font-weight: 700; min-width: 44px; }
#mef-casca .mef-casca-marca img { height: 24px; width: auto; }
#mef-casca .mef-casca-trilha { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; }
#mef-casca .mef-casca-trilha li { display: flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
#mef-casca .mef-casca-trilha li::before { content: "›"; margin: 0 8px; opacity: .6; }
#mef-casca .mef-casca-trilha li[aria-current] { opacity: 1; font-weight: 600; display: block; line-height: var(--mef-casca-altura); }
/* "Voltar ao MEF": pílula de 34px à vista, alvo de toque de 44px */
#mef-casca .mef-casca-voltar {
  position: relative; flex: none; min-height: 34px; padding: 0 12px; font-weight: 600;
  border: 1px solid rgb(255 255 255 / .35); border-radius: var(--mef-radius);
}
#mef-casca .mef-casca-voltar::after { content: ""; position: absolute; inset: -5px -2px; }
#mef-casca .mef-casca-voltar:hover { background: rgb(255 255 255 / .1); text-decoration: none; }
@media (max-width: 520px) {
  #mef-casca { gap: 8px; padding: 0 12px; }
  /* celular: MEF › Área › Tela (some só o degrau do meio) */
  #mef-casca .mef-casca-marca span, #mef-casca .mef-casca-trilha li:not(:first-child):not(:last-child) { display: none; }
  #mef-casca .mef-casca-trilha li::before { margin: 0 6px; }
  #mef-casca .mef-casca-trilha li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media print { #mef-casca { display: none; } }