/* ============================================================================
   RAIO-X v2 (2026-04) — refinamentos visuais não-invasivos sobre raio-x.css
   Estratégia: overlay após raio-x.css, preserva CSS base e testes Playwright.
   ========================================================================== */

/* ─── Tokens do design system RAIO-X 2026 ──────────────────────────────── */
:root {
  /* Cores do plano com gradientes de marca */
  --rx2-bronze-grad: linear-gradient(135deg, #D99970 0%, #A15828 100%);
  --rx2-prata-grad: linear-gradient(135deg, #B9C1CF 0%, #6C7584 100%);
  --rx2-ouro-grad: linear-gradient(135deg, #F0C564 0%, #9B6D1F 100%);
  --rx2-diamante-grad: linear-gradient(135deg, #7EA0FF 0%, #2A4FB8 100%);

  /* Semáforo de risco */
  --rx2-risk-ok: #0A7C4A;
  --rx2-risk-warn: #C27C00;
  --rx2-risk-danger: #DC2626;

  /* Tipografia de placas e códigos */
  --rx2-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, SFMono-Regular, "Consolas", monospace;

  /* Elevations */
  --rx2-shadow-soft: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -16px rgb(15 23 42 / .22);
  --rx2-shadow-strong: 0 24px 48px -16px rgb(15 23 42 / .24);
}

/* ─── Hero da aba RAIO-X: mais impacto visual ─────────────────────────── */
.kva-hero--report {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.kva-hero--report::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at center, rgba(15, 118, 110, .14), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* ─── Cards de plano — borda animada no Diamante, gradiente no ícone ──── */
.kva-plan-card {
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s;
  will-change: transform;
}

.kva-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rx2-shadow-strong);
}

.kva-plan-card--bronze .kva-plan-card__icon { background: var(--rx2-bronze-grad); color: #fff; }
.kva-plan-card--prata .kva-plan-card__icon { background: var(--rx2-prata-grad); color: #fff; }
.kva-plan-card--ouro .kva-plan-card__icon { background: var(--rx2-ouro-grad); color: #fff; }
.kva-plan-card--diamante .kva-plan-card__icon { background: var(--rx2-diamante-grad); color: #fff; }

/* Diamante: borda conic-gradient animada (premium, único card com esta tratativa) */
.kva-plan-card--diamante {
  position: relative;
}

.kva-plan-card--diamante::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--rx2-angle, 0deg), transparent 0deg, #2A4FB8 90deg, transparent 180deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: rx2-rotate 7s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@property --rx2-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rx2-rotate {
  to { --rx2-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .kva-plan-card { transition: none; }
  .kva-plan-card:hover { transform: none; }
  .kva-plan-card--diamante::after { animation: none; }
}

/* ─── Badges de popularidade ─────────────────────────────────────────── */
.kva-plan-card--diamante .kva-plan-card__title::after {
  content: "Mais completo";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(42, 79, 184, .08);
  color: #2A4FB8;
  vertical-align: middle;
}

.kva-plan-card--ouro .kva-plan-card__title::after {
  content: "Melhor custo";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(194, 124, 0, .1);
  color: #9B6D1F;
  vertical-align: middle;
}

/* ─── Input de placa: estilo mercosul — monospace + tracking ──────────── */
.rx-search-card__input,
#kva-vehicle-plate-input,
#kva-vehicle-plate-consumption-input {
  font-family: var(--rx2-font-mono);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rx-search-card {
  position: relative;
}

.rx-search-card:focus-within {
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .14);
  border-color: #0F766E;
}

/* ─── Semáforo de risco no resultado ─────────────────────────────────── */
.kva-risk-traffic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 124, 74, .08);
  color: var(--rx2-risk-ok);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.kva-risk-traffic--warn {
  background: rgba(194, 124, 0, .1);
  color: var(--rx2-risk-warn);
}

.kva-risk-traffic--danger {
  background: rgba(220, 38, 38, .08);
  color: var(--rx2-risk-danger);
}

.kva-risk-traffic::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 0 4px currentColor;
}

/* ─── Botão CTA com gradiente de plano ───────────────────────────────── */
.kva-plan-card--bronze .kva-plan-card__cta { background: var(--rx2-bronze-grad); color: #fff; border-color: transparent; }
.kva-plan-card--prata .kva-plan-card__cta { background: var(--rx2-prata-grad); color: #fff; border-color: transparent; }
.kva-plan-card--ouro .kva-plan-card__cta { background: var(--rx2-ouro-grad); color: #fff; border-color: transparent; }
.kva-plan-card--diamante .kva-plan-card__cta { background: var(--rx2-diamante-grad); color: #fff; border-color: transparent; }

.kva-plan-card__cta {
  transition: filter .18s, transform .18s;
}

.kva-plan-card__cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ─── Partial watermark (quando IsPartial = true) ─────────────────────── */
.kva-result[data-partial="true"]::before {
  content: "CONSULTA PARCIAL";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
  background: rgba(194, 124, 0, .14);
  color: var(--rx2-risk-warn);
  pointer-events: none;
}

.kva-result {
  position: relative;
}

/* ─── Tipagem monospace em placa/protocolo visíveis ───────────────────── */
.kva-result__meta code,
.kva-history-item__plate,
.rx-search-card__input {
  font-family: var(--rx2-font-mono);
}

/* ─── Botão "PDF oficial" distinto do "PDF Kavo" ──────────────────────── */
.kva-pdf-button-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.kva-pdf-button-group .kva-pdf-btn--primary {
  background: #0F766E;
  color: #fff;
}

.kva-pdf-button-group .kva-pdf-btn--secondary {
  background: #fff;
  color: #0F766E;
  border: 1px solid #0F766E;
}

/* ─── Scroll-snap na galeria de imagens ──────────────────────────────── */
.kva-gallery-scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}

.kva-gallery-scroller > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Raio-X report generation queue */
.rx-report-queue {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1050;
  width: min(360px, calc(100vw - 32px));
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
  overflow: hidden;
}

.rx-report-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, .1);
}

.rx-report-queue__head strong {
  color: #0F172A;
  font-size: 13px;
  font-weight: 800;
}

.rx-report-queue__list {
  display: grid;
  gap: 0;
  max-height: min(320px, 50vh);
  overflow-y: auto;
}

.rx-report-queue__item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(15, 23, 42, .08);
  background: #fff;
}

.rx-report-queue__item:first-child {
  border-top: 0;
}

.rx-report-queue__item.is-ready {
  border-left: 3px solid #0F766E;
}

.rx-report-queue__item.is-failed {
  border-left: 3px solid #DC2626;
}

.rx-report-queue__meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.rx-report-queue__meta strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rx-report-queue__meta span,
.rx-report-queue__meta small {
  color: #64748B;
  font-size: 12px;
}

.rx-report-queue__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rx-report-queue__btn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(15, 118, 110, .35);
  border-radius: 6px;
  background: #fff;
  color: #0F766E;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.rx-report-queue__btn:hover {
  border-color: #0F766E;
  background: rgba(15, 118, 110, .08);
}

.rx-report-queue__btn--support,
.rx-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rx-report-queue__btn--support {
  border-color: rgba(22, 163, 74, .38);
  color: #15803D;
}

.rx-error--action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rx-error--action > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rx-error--action strong {
  color: #991B1B;
  font-size: 13px;
  font-weight: 900;
}

.rx-support-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(22, 163, 74, .34);
  border-radius: 6px;
  background: #fff;
  color: #15803D;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.rx-generation-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240, 253, 250, .96), rgba(255, 255, 255, .98));
}

.rx-generation-card__visual {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0F766E;
  color: #fff;
}

.rx-generation-card__scan {
  position: absolute;
  inset: 0;
  transform: translateY(-100%);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .58), transparent);
  animation: rxScan 1.65s ease-in-out infinite;
}

.rx-generation-card__copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rx-generation-card__copy strong {
  order: -2;
  color: #0F172A;
  font-size: 14px;
  font-weight: 900;
}

.rx-generation-card__copy span {
  color: #0F766E;
  font-size: 12px;
  font-weight: 900;
}

.rx-generation-card__copy span:last-of-type:not(:first-of-type) {
  display: none;
}

.rx-generation-card__copy small {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.rx-generation-card__bar {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 118, 110, .12);
}

.rx-generation-card__bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: #0F766E;
  animation: rxProgress 1.8s ease-in-out infinite;
}

@keyframes rxScan {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

@keyframes rxProgress {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .rx-generation-card__scan,
  .rx-generation-card__bar span {
    animation: none;
  }
}

@media (max-width: 640px) {
  .rx-report-queue {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }
}