* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--color-background); color: var(--color-white); font: var(--size-body) var(--font-sans); }
body { min-height: var(--size-screen-height); }
button, input, select { color: inherit; font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--color-muted); }
.eyebrow { color: var(--color-primary); font-size: var(--size-small); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); }
.brand-logo { width: clamp(var(--size-logo-min), var(--size-logo-fluid), var(--size-logo-max)); height: auto; object-fit: contain; }
.player-body { overflow: hidden; }
.pairing-view { display: flex; min-height: var(--size-screen-height); flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); text-align: center; background: radial-gradient(ellipse at center, var(--color-panel-raised), var(--color-background) var(--size-gradient-focus)); }
.pairing-view h1 { margin: 0; font-family: var(--font-display); font-size: var(--size-title); }
.pair-code { min-width: min(var(--size-pair-fluid), var(--size-pair-max)); padding: var(--space-3) var(--space-4); color: var(--color-white); font-family: var(--font-display); font-size: var(--size-code); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-code); text-shadow: var(--shadow-red); }
.pair-code.skeleton { border-radius: var(--radius-card); background: var(--color-panel-raised); }
.skeleton-line { display: block; width: var(--size-skeleton-width); height: var(--space-4); margin: auto; border-radius: var(--radius); background: var(--color-border); animation: pulse var(--duration-skeleton) ease-in-out infinite; }
.stage { position: fixed; inset: 0; display: grid; place-items: center; background: var(--color-background); }
.media { display: block; width: var(--size-full); height: var(--size-full); object-fit: contain; }
.empty-playback { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4); color: var(--color-muted); text-align: center; }
.offline-badge { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: var(--space-1) var(--space-2); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-panel); color: var(--color-white); }
.portal-body { background: radial-gradient(ellipse at top left, var(--color-brand-wash), transparent var(--size-gradient-edge)), var(--color-background); }
.topbar { display: flex; align-items: center; justify-content: space-between; width: min(100%, var(--content-width)); margin: auto; padding: var(--space-3) var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-white); font-family: var(--font-display); font-weight: 800; text-decoration: none; }
.brand img { width: var(--size-control); height: var(--size-control); object-fit: contain; }
.brand small { display: block; color: var(--color-muted); font: var(--weight-bold) var(--size-small) var(--font-sans); letter-spacing: var(--tracking-brand); }
.portal-main { width: min(100%, var(--content-width)); margin: auto; padding: var(--space-3) var(--space-4) var(--space-6); }
.login-panel { max-width: var(--size-wide-card); margin: var(--space-6) auto; }
.welcome { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); margin-block: var(--space-5); }
h1, h2 { margin: 0; font-family: var(--font-display); }
.welcome h1, .login-panel h1 { font-size: var(--size-title); }
.welcome p { margin-block: var(--space-1); }
.layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-content-card-min)), var(--size-grid-one))); gap: var(--space-3); align-items: start; }
.panel { padding: var(--space-4); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-card); background: linear-gradient(160deg, var(--color-panel-glass-start), var(--color-panel-glass-end)); box-shadow: var(--shadow-elevated); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.section-heading h2 { font-size: clamp(var(--size-text-tight), var(--size-text-fluid-min), var(--size-text-large)); }
.count { display: grid; width: var(--size-control); aspect-ratio: 1; place-items: center; border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--color-white); }
.stack { display: grid; gap: var(--space-1); }
.stack label { margin-top: var(--space-1); font-weight: 700; }
input, select { width: 100%; min-height: var(--size-control); padding: var(--space-1) var(--space-2); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius); background: var(--color-background); }
input:focus-visible, select:focus-visible, button:focus-visible { outline: var(--size-focus) solid var(--color-primary); outline-offset: var(--size-focus); }
input[type=file] { padding: var(--space-1); }
.button { display: inline-flex; min-height: var(--size-control); align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: var(--size-hairline) solid transparent; border-radius: var(--radius); font-weight: var(--weight-bold); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.button:hover { transform: translateY(var(--offset-hover)); }
.button:disabled { cursor: wait; opacity: 0.65; }
.button.primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-red); }
.button.secondary { border-color: var(--color-border); background: var(--color-panel-raised); }
.button.danger { border-color: var(--color-danger-border); background: transparent; color: var(--color-danger); }
.button.small { min-height: var(--space-4); padding: var(--space-1); }
.message { min-height: var(--size-small); margin: var(--space-1) 0 0; color: var(--color-success); }
.message.error { color: var(--color-danger); }
.collection { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.list-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-glass); }
.list-card span { color: var(--color-muted); font-size: var(--size-small); }
.screen-card > div { display: grid; gap: var(--space-1); }
.screen-card select { max-width: var(--size-panel-small-max); }
.empty-state { padding: var(--space-3); border: var(--size-hairline) dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted); text-align: center; }
.file-list { display: grid; gap: var(--space-1); }
.file-row { display: grid; grid-template-columns: minmax(0, var(--size-grid-one)) auto auto; align-items: center; gap: var(--space-1); padding: var(--space-1); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius); }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); }
.file-row input { width: var(--size-duration-control); min-height: var(--space-4); }
.row-actions { display: flex; gap: var(--space-1); }
.toast { position: fixed; right: var(--space-3); bottom: var(--space-3); max-width: var(--size-toast-max); padding: var(--space-2) var(--space-3); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius); background: var(--color-panel-raised); box-shadow: var(--shadow-elevated); }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: var(--duration-reduced) !important; transition-duration: var(--duration-reduced) !important; } }
/* Multi-cliente: barra de alcance, pestañas, estados y tarjetas (solo tokens de tokens.css). */
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.user-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--color-silver); font-size: var(--size-small); }
.welcome { flex-wrap: wrap; }
.scope-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.client-picker { display: grid; gap: var(--space-1); min-width: min(var(--size-full), var(--size-content-card-min)); }
.client-picker label { color: var(--color-muted); font-size: var(--size-small); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-1); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-glass); width: fit-content; max-width: var(--size-full); }
.tab { min-height: var(--size-control); padding: var(--space-1) var(--space-3); border: var(--size-hairline) solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font-weight: var(--weight-bold); transition: background var(--transition-fast), color var(--transition-fast); }
.tab:hover { color: var(--color-white); }
.tab[aria-current] { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-red); }
.pill { display: inline-flex; align-items: center; padding: var(--size-zero) var(--space-1); border: var(--size-hairline) solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-silver); font-family: var(--font-sans); font-size: var(--size-small); font-weight: var(--weight-bold); white-space: nowrap; }
.list-card .pill { color: var(--color-silver); }
.pill.brand { border-color: var(--color-danger-border); background: var(--color-brand-soft); color: var(--color-white); }
.list-card .pill.success, .pill.success { border-color: var(--color-border); color: var(--color-success); }
.list-card .pill.danger, .pill.danger { border-color: var(--color-danger-border); color: var(--color-danger); }
.list-card { flex-wrap: wrap; }
.card-main { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 var(--size-panel-small-max); }
.card-main strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.client-card.selected { border-color: var(--color-danger-border); background: var(--color-brand-wash); }
.screen-card.is-revoked { opacity: var(--opacity-skeleton); }
.skeleton-card { min-height: var(--size-control); }
.skeleton-card .skeleton-line { margin: var(--size-zero); }
.login-panel .skeleton-line + .skeleton-line { margin-top: var(--space-2); width: var(--size-full); }
select:disabled { cursor: not-allowed; opacity: var(--opacity-skeleton); }