/* =====================================================================
   Royal Canin · Credenciamento — tokens e base
   Tokens extraídos do design system de royalcanin.com/br
   ===================================================================== */

@font-face { font-family: "DIN Pro"; src: url(../assets/dinpro-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DIN Pro"; src: url(../assets/dinpro-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DIN Pro"; src: url(../assets/dinpro-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DIN Pro Cond"; src: url(../assets/dinpro-cond-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DIN Pro Cond"; src: url(../assets/dinpro-cond-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DIN Pro Cond"; src: url(../assets/dinpro-cond-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --rc-50: #fbe5e8; --rc-100: #f9ccd1; --rc-200: #f399a3; --rc-300: #ee6676; --rc-400: #e83348;
  --rc-500: #e2001a; --rc-600: #b50015; --rc-700: #880010; --rc-800: #5a000a; --rc-900: #2d0005;
  --grey-100: #f6f6f6; --grey-200: #d7d7d7; --grey-300: #bbb; --grey-400: #9d9d9d; --grey-500: #767676;
  --grey-600: #666; --grey-700: #444; --grey-800: #333; --grey-900: #1c1c1c;
  --gold: #e2ae49; --gold-light: #f9efdb;
  --green: #008845; --green-light: #e6f3ec; --orange: #d9722e; --orange-light: #fef4e7;
  --focus: #1769ff;

  --font: "DIN Pro", "Helvetica Neue", Arial, sans-serif;
  --font-cond: "DIN Pro Cond", "DIN Pro", Arial Narrow, sans-serif;

  --r-s: 4px; --r-m: 8px; --r-l: 16px; --r-xl: 32px; --r-full: 360px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
  --shadow-2: 0 12px 32px -8px rgba(45,0,5,.25), 0 4px 12px rgba(0,0,0,.06);
  --shadow-3: 0 40px 80px -24px rgba(45,0,5,.45);
  --ease: cubic-bezier(.81,.23,.23,.76); /* curva usada no header do site */
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--grey-900); background: #fff;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }

/* Botões no padrão do site: pill, DIN Medium, vermelho */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 28px; border-radius: var(--r-full);
  border: 2px solid transparent; font-weight: 500; font-size: 1rem; letter-spacing: .01em;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease-out), box-shadow .25s;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--rc-500); color: #fff; box-shadow: 0 8px 20px -8px rgba(226,0,26,.6); }
.btn-primary:hover { background: var(--rc-600); }
.btn-outline { background: #fff; color: var(--rc-500); border-color: var(--rc-500); }
.btn-outline:hover { background: var(--rc-50); }
.btn-ghost { background: transparent; color: var(--grey-800); }
.btn-ghost:hover { background: var(--grey-100); }
.btn-white { background: #fff; color: var(--rc-500); }
.btn-lg { --h: 60px; font-size: 1.125rem; padding: 0 36px; }
.btn-sm { --h: 38px; padding: 0 16px; font-size: .875rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  background: var(--rc-50); color: var(--rc-600);
}

[hidden] { display: none !important; }
.avatar {
  display: grid; place-items: center; border-radius: 50%; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--rc-400), var(--rc-600)); color: #fff; text-transform: uppercase;
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Toast */
.toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 999; display: grid; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--r-full);
  background: var(--grey-900); color: #fff; font-size: .9375rem; box-shadow: var(--shadow-2);
}
.toast .icon { color: #5fd39a; }

/* =====================================================================
   Impressão de credenciais
   ===================================================================== */
#print-root { display: none; }
@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  #print-root img { display: block; }
  #print-root.fmt-badge img { width: 90mm; height: 120mm; page-break-after: always; break-after: page; }
  #print-root.fmt-a4 { display: grid !important; grid-template-columns: repeat(2, 90mm); gap: 6mm 8mm; justify-content: center; padding-top: 10mm; }
  #print-root.fmt-a4 img { width: 90mm; height: 120mm; break-inside: avoid; }
  #print-root.fmt-a4 img:nth-child(4n) { break-after: page; }
}