/* Hallmark · macrostructure: Workbench · genre: modern-minimal · theme: Cobalt · enrichment: none · nav: N9 · footer: Ft2 · audience: cliente · use: verificar ticket · tone: utilitario · pre-emit critique: P5 H5 E4 S5 R5 V4 · contrast: static-pass · slop: static-pass · visual-QA: pending */
:root {
    --color-paper: oklch(98.5% 0.004 250);
    --color-surface: oklch(99.2% 0.003 250);
    --color-surface-muted: oklch(96.5% 0.008 250);
    --color-ink: oklch(24% 0.02 258);
    --color-ink-2: oklch(34% 0.018 257);
    --color-muted: oklch(52% 0.014 256);
    --color-rule: oklch(89% 0.012 252);
    --color-rule-strong: oklch(78% 0.018 252);
    --color-accent: oklch(58% 0.20 256);
    --color-accent-ink: oklch(98% 0.006 250);
    --color-valid: oklch(48% 0.15 145);
    --color-valid-ink: oklch(29% 0.09 145);
    --color-valid-paper: oklch(95% 0.035 145);
    --color-valid-rule: oklch(78% 0.075 145);
    --color-invalid: oklch(54% 0.19 28);
    --color-invalid-ink: oklch(34% 0.13 28);
    --color-invalid-paper: oklch(96% 0.032 28);
    --color-invalid-rule: oklch(80% 0.09 28);
    --color-legacy: oklch(62% 0.13 75);
    --color-legacy-ink: oklch(37% 0.09 70);
    --color-legacy-paper: oklch(96% 0.04 80);
    --color-legacy-rule: oklch(81% 0.09 78);
    --color-paid-paper: oklch(93% 0.045 88);
    --color-paid-ink: oklch(37% 0.09 73);
    --color-focus: oklch(58% 0.20 256);
    --shadow-panel: 0 1px 2px oklch(24% 0.02 258 / 0.05);
    --font-display: "Space Grotesk", "Trebuchet MS", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Lucida Console", monospace;
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.5625rem;
    --text-xl: 1.953rem;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-long: 420ms;
    --rule-thin: 1px;
    --radius-control: 0.375rem;
    --radius-panel: 0.625rem;
    --page-gutter: var(--space-md);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.verification-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.public-nav, .verification-main, .public-footer { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline-start: max(var(--page-gutter), env(safe-area-inset-left)); padding-inline-end: max(var(--page-gutter), env(safe-area-inset-right)); }
.public-nav { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: var(--rule-thin) solid var(--color-rule); }
.public-nav__brand { min-width: 0; display: flex; align-items: center; gap: var(--space-sm); }
.public-nav__signal { flex: 0 0 auto; width: var(--space-xs); height: var(--space-xs); background: var(--color-accent); border-radius: var(--radius-control); }
.public-nav__brand div { min-width: 0; display: grid; line-height: 1.15; }
.public-nav__brand strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; overflow-wrap: anywhere; }
.public-nav__brand span:last-child { display: none; color: var(--color-muted); font-size: var(--text-xs); }
.public-nav__ticket { flex: 0 0 auto; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.verification-main { display: grid; align-content: start; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-xl); }
.verification-status { --status-color: var(--color-valid); --status-ink: var(--color-valid-ink); --status-paper: var(--color-valid-paper); --status-rule: var(--color-valid-rule); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm) var(--space-md); padding: var(--space-lg); color: var(--status-ink); background: var(--status-paper); border: var(--rule-thin) solid var(--status-rule); border-radius: var(--radius-panel); }
.verification-status--invalid { --status-color: var(--color-invalid); --status-ink: var(--color-invalid-ink); --status-paper: var(--color-invalid-paper); --status-rule: var(--color-invalid-rule); }
.verification-status--legacy { --status-color: var(--color-legacy); --status-ink: var(--color-legacy-ink); --status-paper: var(--color-legacy-paper); --status-rule: var(--color-legacy-rule); }
.verification-status__icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--status-color); border: var(--rule-thin) solid var(--status-rule); border-radius: var(--radius-panel); }
.verification-status__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.verification-status__copy { min-width: 0; }
.verification-status h1 { margin: 0; color: var(--status-ink); font-family: var(--font-display); font-size: clamp(var(--text-lg), 6vw, var(--text-xl)); font-style: normal; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; overflow-wrap: anywhere; }
.verification-status p { max-width: 58ch; margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
.verification-status__meta { grid-column: 1 / -1; display: grid; gap: var(--space-sm); margin: var(--space-sm) 0 0; padding-top: var(--space-md); border-top: var(--rule-thin) solid var(--status-rule); }
.verification-status__meta div { min-width: 0; }
.verification-status__meta dt, .ticket-panel__owner span, .ticket-panel__totals span { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.verification-status__meta dd { margin: var(--space-2xs) 0 0; color: var(--status-ink); font-size: var(--text-sm); font-weight: 600; }
.verification-status__signature { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.ticket-panel { min-width: 0; background: var(--color-surface); border: var(--rule-thin) solid var(--color-rule-strong); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.ticket-panel__header { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.ticket-panel__logo { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.ticket-panel__heading { min-width: 0; }
.ticket-panel__heading p { margin: 0 0 var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); }
.ticket-panel h2 { min-width: 0; margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(var(--text-md), 5vw, var(--text-lg)); font-style: normal; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; overflow-wrap: anywhere; }
.ticket-panel time { display: block; margin-top: var(--space-xs); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ticket-panel__id { grid-column: 1 / -1; color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.ticket-panel__owner { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); background: var(--color-surface-muted); border-bottom: var(--rule-thin) solid var(--color-rule); }
.ticket-panel__owner strong { color: var(--color-ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
.play-table-wrap { min-width: 0; padding: var(--space-md) var(--space-lg) 0; }
.play-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.play-table caption { padding: 0 0 var(--space-sm); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; text-align: start; }
.play-table colgroup, .play-table thead { display: none; }
.play-table tbody { display: grid; }
.play-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--rule-thin) solid var(--color-rule); }
.play-table__number { width: 22%; }
.play-table__amount { width: 36%; }
.play-table__prize { width: 42%; }
.play-table th, .play-table td { padding: var(--space-sm) var(--space-xs); text-align: start; }
.play-table th { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.025em; }
.play-table td { min-width: 0; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); font-size: clamp(0.78rem, 3.6vw, var(--text-sm)); overflow-wrap: anywhere; }
.play-table td::before { content: attr(data-label); color: var(--color-muted); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.025em; }
.play-table th:first-child, .play-table td:first-child { padding-inline-start: 0; }
.play-table th:last-child, .play-table td:last-child { padding-inline-end: 0; }
.play-table td strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-base); }
.ticket-panel__totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); padding: var(--space-lg); }
.ticket-panel__totals div { min-width: 0; display: grid; gap: var(--space-2xs); }
.ticket-panel__totals strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.ticket-panel__paid { margin: 0 var(--space-lg) var(--space-lg); padding: var(--space-sm) var(--space-md); color: var(--color-paid-ink); background: var(--color-paid-paper); border: var(--rule-thin) solid var(--color-legacy-rule); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.public-footer { display: grid; gap: var(--space-xs); padding-block: var(--space-lg) max(var(--space-lg), env(safe-area-inset-bottom)); color: var(--color-muted); border-top: var(--rule-thin) solid var(--color-rule); font-size: var(--text-xs); }
.public-footer span:first-child { color: var(--color-ink); font-family: var(--font-display); font-weight: 700; }

@media (min-width: 40rem) {
    :root { --page-gutter: var(--space-xl); }
    .public-nav__brand span:last-child { display: block; }
    .verification-status__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ticket-panel__header { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ticket-panel__id { grid-column: auto; }
    .ticket-panel__owner, .public-footer { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
    .public-footer span:last-child { text-align: end; }
    .play-table colgroup { display: table-column-group; }
    .play-table thead { display: table-header-group; }
    .play-table tbody { display: table-row-group; }
    .play-table tr { display: table-row; border-bottom: 0; }
    .play-table th, .play-table td { display: table-cell; border-bottom: var(--rule-thin) solid var(--color-rule); text-align: end; white-space: nowrap; }
    .play-table td::before { display: none; }
    .play-table th:first-child, .play-table td:first-child { text-align: start; }
}

@media (min-width: 60rem) {
    .verification-main { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
    .verification-status { position: sticky; top: var(--space-lg); padding: var(--space-xl); }
    .verification-status__meta { grid-template-columns: minmax(0, 1fr); }
    .ticket-panel__header, .ticket-panel__owner, .play-table-wrap, .ticket-panel__totals { padding-inline: var(--space-xl); }
    .ticket-panel__paid { margin-inline: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}