/* Shared pieces for every layout (sizes are the screen layout's; pocket.css re-sizes them). Written
   for Chromium 56 (2018 TVs): flexbox with margins, no grid, no gap, no :focus-visible/:is/:where/:has,
   no inset, aspect-ratio, clamp, min(), max(), backdrop-filter, dvh, or env() outside @supports. Only
   transform and opacity animate. Colours come from the theme tokens (tokens.css).
   Focus is one language: the Foco fill with its text. The Sel style (Señal fill, or a ring where white
   is the focus) marks what is selected at rest. */
html { font-size: 16px; background: var(--sala); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--sala); color: var(--tiza); font: 500 1.75rem/1.35 var(--f-text);
  -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus { outline: none; }
.ic { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.125em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-idle, .is-idle * { cursor: none !important; }

/* ------------------------------------------------------------ wordmark and band */
.wordmark { display: inline-flex; align-items: center;
  font: 900 2.25rem/1 var(--f-cond); letter-spacing: -.005em; white-space: nowrap; color: var(--tiza); }
.wordmark__tv { margin-left: .375rem; padding: .125rem .4375rem .1875rem; border-radius: .4375rem;
  background: var(--senal); color: var(--senal-texto); font-size: .78em; }
.bars { display: flex; height: 6px; }
.bars i { flex: 1; }
.bars i:nth-child(1) { background: var(--bar-1); } .bars i:nth-child(2) { background: var(--bar-2); }
.bars i:nth-child(3) { background: var(--bar-3); } .bars i:nth-child(4) { background: var(--bar-4); }
.bars i:nth-child(5) { background: var(--bar-5); } .bars i:nth-child(6) { background: var(--bar-6); }
.bars i:nth-child(7) { background: var(--bar-7); }

/* ----------------------------------------------------------------- numbers */
.num { font-family: var(--f-cond); font-weight: 900; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -.01em; white-space: nowrap; display: inline-flex; overflow: hidden; }
.num .d { display: inline-block; }
.num .d--up { animation: roll-up 180ms var(--ease-in); }
.num .d--down { animation: roll-down 180ms var(--ease-in); }
@keyframes roll-up { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes roll-down { from { transform: translateY(-55%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------- logo plates */
.plate { position: relative; overflow: hidden; border-radius: .625rem; background: var(--placa); flex: none; }
.plate .logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* In Claro a light or white plate would melt into the page: a hairline keeps every plate a plate. */
[data-theme="claro"] .plate:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(20, 32, 42, .18); pointer-events: none; }
.mono { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  font: 900 3.25rem/1 var(--f-cond); letter-spacing: .02em; color: rgba(241, 241, 243, .94); }
/* Monogram tints: SMPTE bar hues, darkened to sit under white letters (the same in every theme). */
.t-0 { background: #233A63; } .t-1 { background: #17505A; } .t-2 { background: #5E2324; }
.t-3 { background: #22512F; } .t-4 { background: #34404F; } .t-5 { background: #55284F; }
.t-6 { background: #5A4319; } .t-7 { background: #5B5418; } .t-8 { background: #1B4B55; }
.t-9 { background: #2C4A22; } .t-10 { background: #2A3560; } .t-11 { background: #3A3D46; }
.plate__tally { position: absolute; top: .5rem; left: .5rem; width: .875rem; height: .875rem; border-radius: 50%;
  background: var(--aire); box-shadow: 0 0 0 .1875rem rgba(22, 35, 44, .85); }
.plate__bar { position: absolute; left: 0; right: 0; bottom: 0; height: .3125rem; background: rgba(22, 35, 44, .6); }
.plate__bar i { display: block; height: 100%; background: var(--senal); }

/* ------------------------------------------------- badges, tallies and pills */
.badge { display: inline-flex; align-items: center;
  height: 2.25rem; padding: 0 .5rem; border-radius: .375rem; border: .125rem solid var(--linea-fuerte);
  color: var(--tiza); font: 700 1.5rem/1 var(--f-cond); white-space: nowrap; flex: none; }
.tally { display: inline-flex; align-items: center;
  height: 2.25rem; padding: 0 .75rem 0 .625rem; border-radius: 1.125rem; background: var(--aire); color: var(--aire-texto);
  font: 700 1.5rem/1 var(--f-text); white-space: nowrap; flex: none; }
.tally i { width: .625rem; height: .625rem; border-radius: 50%; background: var(--aire-texto); margin-right: .5rem; flex: none; }
.tally--quiet { background: rgba(var(--tiza-rgb), .14); color: var(--tiza); }
.tally--quiet i { background: var(--aire); }
.pill { display: inline-block; padding: 0 .4375rem; margin-right: .5rem; border-radius: .375rem;
  background: rgba(var(--tiza-rgb), .14); color: var(--tiza); font: 700 1.5rem/1.875rem var(--f-cond);
  vertical-align: .0625rem; white-space: nowrap; }
.pill--live { background: var(--aire); color: var(--aire-texto); }
.pill--live:before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--aire-texto); margin-right: .375rem; vertical-align: .125rem; }
.fav-mark { color: var(--estrella); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center;
  justify-content: center; height: 4.5rem; padding: 0 2.25rem; margin-right: 1.25rem;
  border-radius: 2.25rem; font: 700 2rem/1 var(--f-cond); white-space: nowrap; background: var(--control); color: var(--tiza);
  transition: background-color var(--t-focus), color var(--t-focus), transform var(--t-focus) var(--ease-in); }
.btn .ic { margin-right: .75rem; font-size: 2rem; }
.btn--main { background: var(--sel-fondo); color: var(--sel-texto); box-shadow: inset 0 0 0 .1875rem var(--sel-borde); }
.btn.is-on .ic { color: var(--estrella); }
.btn.is-focus, .kbd .btn:focus, .ptr .btn:hover { background: var(--foco); color: var(--foco-texto); box-shadow: none; transform: scale(1.04); }
.btn.is-focus.is-on .ic, .ptr .btn.is-on:hover .ic { color: var(--estrella-foco); }
.btn[disabled] { opacity: .5; cursor: default; }
/* Icon-only round buttons (Buscar, Ajustes, Marcar): their name is in aria-label and title. */
.ibtn { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--control); color: var(--tiza); font-size: 1.75rem;
  transition: background-color var(--t-focus), color var(--t-focus), transform var(--t-focus) var(--ease-in); }
.ibtn.is-focus, .ptr .ibtn:hover { background: var(--foco); color: var(--foco-texto); transform: scale(1.08); }
.ibtn.is-on { background: var(--sel-fondo); color: var(--sel-texto); box-shadow: inset 0 0 0 .1875rem var(--sel-borde); }

/* ----------------------------------------------------------------- chips */
.chip { display: inline-flex; align-items: center; height: 3.5rem; padding: 0 1.5rem; margin-right: .75rem; border-radius: 1.75rem;
  background: var(--control); color: var(--tiza); font: 600 1.625rem/1 var(--f-cond); white-space: nowrap; flex: none;
  transition: background-color var(--t-focus), color var(--t-focus), transform var(--t-focus) var(--ease-in); }
.chip .ic { font-size: 1.625rem; margin-right: .5rem; }
.chip__n { margin-left: .625rem; color: var(--humo); font-variant-numeric: tabular-nums; }
.chip__sw { width: .875rem; height: .875rem; border-radius: .1875rem; margin-right: .625rem; box-shadow: 0 0 0 .125rem var(--linea-fuerte); flex: none; }
.chip__live { display: inline-flex; align-items: center; margin-left: .625rem; padding: 0 .5rem; height: 1.875rem; border-radius: .9375rem;
  background: var(--aire); color: var(--aire-texto); font-size: 1.5rem; }
.chip__live:before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--aire-texto); margin-right: .375rem; }
.chip.is-sel { background: var(--sel-fondo); color: var(--sel-texto); box-shadow: inset 0 0 0 .1875rem var(--sel-borde); }
.chip.is-sel .chip__n { color: var(--sel-suave); }
.chip.is-open { background: var(--control-alta); }
.chip--sub { height: 3rem; padding: 0 1.125rem; font-size: 1.5rem; background: transparent; box-shadow: inset 0 0 0 .125rem var(--linea); }
.chip.is-focus, .ptr .chip:hover { background: var(--foco); color: var(--foco-texto); box-shadow: none; transform: scale(1.06); }
.chip.is-focus .chip__n, .ptr .chip:hover .chip__n { color: var(--foco-suave); opacity: 1; }
.chip.is-focus .fav-mark, .ptr .chip:hover .fav-mark { color: var(--estrella-foco); }
.chips__sep { width: .125rem; height: 2rem; background: var(--linea); margin: 0 1rem 0 .25rem; flex: none; }

/* ------------------------------------------------------------ keys (hints) */
.hints { display: none; color: var(--humo); font-size: 1.5rem; }
.kbd .hints { display: flex; flex-wrap: wrap; }
.hint { display: inline-flex; align-items: center; margin-right: 2rem; white-space: nowrap; }
.key { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.25rem; padding: 0 .5rem; margin-right: .625rem; border-radius: .5rem;
  border: .125rem solid var(--linea-fuerte); color: var(--tiza); font: 700 1.5rem/1 var(--f-cond); }
.key .ic { font-size: 1.5rem; }
.key + .key { margin-left: -.25rem; }
.key--after { margin: 0 .625rem 0 .5rem; }

/* ------------------------------------------------------------------ toast */
.toast { position: absolute; top: 3.375rem; left: 50%; transform: translate(-50%, -1rem);
  display: flex; align-items: center; max-width: 80%;
  padding: 1rem 1.75rem; border-radius: 1.75rem; background: var(--foco); color: var(--foco-texto); font: 700 1.75rem/1.2 var(--f-cond);
  box-shadow: 0 1rem 2.5rem var(--sombra); opacity: 0; visibility: hidden; z-index: 30;
  transition: opacity var(--t-out), transform var(--t-out), visibility 0s linear var(--t-out); }
.toast .ic { margin-right: .625rem; flex: none; }
.toast .fav-mark { color: var(--estrella-foco); }
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--t-in), transform var(--t-in) var(--ease-in); }

/* ---------------------------------------------------------------- spinner */
.spinner { position: absolute; top: 50%; left: 50%; width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem;
  border-radius: 50%; border: .375rem solid rgba(var(--tiza-rgb), .18); border-top-color: var(--tiza);
  animation: spin 900ms linear infinite; pointer-events: none; z-index: 2; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- switches, fields */
.switch { position: relative; width: 4.5rem; height: 2.5rem; border-radius: 1.25rem; background: var(--interruptor); flex: none; transition: background-color var(--t-focus); }
.switch i { position: absolute; top: .3125rem; left: .3125rem; width: 1.875rem; height: 1.875rem; border-radius: 50%;
  background: var(--humo);
  transition: transform var(--t-focus) var(--ease-in), background-color var(--t-focus); }
.is-on > .switch, .switch.is-on { background: var(--senal); }
.is-on > .switch i, .switch.is-on i { transform: translateX(2rem); background: var(--senal-texto); }
.field { display: block; margin-bottom: 1.5rem; }
.field__label { display: block; margin-bottom: .625rem; font: 600 1.75rem/1.1 var(--f-cond); color: var(--humo); }
.field__box { display: flex; align-items: center; height: 5rem; border-radius: 1.25rem;
  background: var(--control); box-shadow: inset 0 0 0 .125rem var(--linea); transition: box-shadow var(--t-focus), background-color var(--t-focus); }
.field__box input { flex: 1; min-width: 0; height: 100%; padding: 0 1.5rem; border: 0; background: none;
  font: 500 2rem/1 var(--f-text); color: var(--tiza); }
.field__box input::-webkit-input-placeholder { color: var(--pista); }
.field__box.is-focus { background: var(--foco); box-shadow: none; }
.field__box.is-focus input { color: var(--foco-texto); }
.field__box.is-focus .field__eye { color: var(--foco-texto); }
.field__eye { width: 4.5rem; height: 100%; display: flex; align-items: center;
  justify-content: center; color: var(--humo); font-size: 2rem; border-radius: 0 1.25rem 1.25rem 0; flex: none; }
.ptr .field__eye:hover { background: rgba(var(--tiza-rgb), .1); }
.kbd .field__eye:focus { background: var(--foco); color: var(--foco-texto); }  /* the one focus language */
.error-box { display: flex; align-items: flex-start; margin: 0 0 1.25rem; padding: 1rem 1.25rem;
  border-radius: 1rem; background: rgba(var(--aire-rgb), .16); box-shadow: inset .3125rem 0 0 var(--aire); color: var(--tiza); font-size: 1.625rem; }

/* ------------------------------------------------- theme swatches (Ajustes) */
/* Each swatch carries data-theme: it draws itself with its own theme's tokens. */
.themes { display: flex; flex-wrap: wrap; margin-right: -1rem; }
.theme { position: relative; display: block; width: 11.75rem; margin: 0 1rem 1rem 0; padding: .375rem; border-radius: 1.125rem; text-align: left;
  background: transparent; transition: background-color var(--t-focus), color var(--t-focus), transform var(--t-focus) var(--ease-in); }
.theme__sw { position: relative; display: block; height: 6.25rem; border-radius: .75rem; overflow: hidden; background: var(--sala);
  box-shadow: inset 0 0 0 .125rem rgba(var(--tiza-rgb), .2); }
.theme__row { position: absolute; left: .875rem; right: .875rem; height: 1.375rem; border-radius: .375rem; }
.theme__row--a { top: .875rem; background: var(--foco); }
.theme__row--b { top: 2.75rem; right: 3.25rem; background: rgba(var(--tiza-rgb), .35); }
.theme__row--c { top: 4.375rem; right: 4.75rem; height: .875rem; background: rgba(var(--tiza-rgb), .2); }
.theme__dot { position: absolute; right: .875rem; bottom: .875rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--senal); }
.theme__name { display: flex; align-items: center; height: 2.75rem; padding: 0 .375rem; font: 700 1.625rem/1 var(--f-cond); white-space: nowrap; }
/* The chosen theme: a check on its swatch (not only a colour ring). */
.theme__on { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--senal); color: var(--senal-texto); box-shadow: 0 0 0 .1875rem var(--sala-alta); font-size: 1.25rem; }
.theme.is-on .theme__sw { box-shadow: inset 0 0 0 .1875rem var(--senal), inset 0 0 0 .375rem var(--sala); }
.theme.is-focus, .ptr .theme:hover { background: var(--foco); color: var(--foco-texto); transform: scale(1.04); }

/* ------------------------------------------------------- the wheel («ruleta») */
/* wheel.js places every row with one transform (along the arc, scaled down with distance) and its
   opacity; the selected row sits on the pointer in the vertical centre, filled. Sizes per layout. */
.wheel { position: absolute; overflow: hidden; touch-action: none; -ms-touch-action: none; }
.wheel__rows { position: absolute; top: 0; bottom: 0; right: 0; }
.wheel__rim { position: absolute; border-radius: 50%; border: .1875rem solid transparent; border-left-color: var(--linea);
  pointer-events: none; }
.wheel__pointer { position: absolute; top: 50%; width: 0; height: 0; border-style: solid; border-color: transparent;
  border-left-color: var(--senal); pointer-events: none; }
.wrow { position: absolute; left: 0; top: 50%; display: flex; align-items: center; border-radius: 1.25rem; color: var(--tiza);
  cursor: pointer; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; will-change: transform, opacity;
  transition: transform var(--t-wheel) var(--ease-in), opacity var(--t-wheel) linear, background-color var(--t-focus), color var(--t-focus); }
.wheel.is-fast .wrow { transition-duration: 90ms, 90ms, var(--t-focus), var(--t-focus); transition-timing-function: linear; }
.wheel.is-drag .wrow { transition: background-color var(--t-focus), color var(--t-focus); }
/* A row that comes into the wheel fades in where it lands. */
.wrow.is-in { animation: wrow-in var(--t-wheel) linear; }
@keyframes wrow-in { from { opacity: 0; } }
.wrow__num { flex: none; justify-content: flex-end; text-align: right; }
.wrow__txt { flex: 1; min-width: 0; }
.wrow__name { display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.wrow__name > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wrow__name .badge, .wrow__name .fav-mark { flex: none; }
/* A name too long for one line takes two (smaller) on the selected row: a game shows both teams. */
.wrow.is-sel.is-long .wrow__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.wrow__l2 { color: var(--humo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow__l2 b { color: var(--tiza); font-weight: 700; }
.wrow__l2 .ahora { display: none; }
/* The first channel of the list: where the wheel wraps around. */
.wrow.is-first:before { content: ''; position: absolute; left: 0; right: 0; top: -.4rem; height: .125rem; border-radius: .0625rem;
  background: var(--linea); }
.ptr .wrow:hover { background: rgba(var(--tiza-rgb), .07); }
/* Selected: the focus fill (always with a mouse or a finger; with keys, while the wheel has the focus). */
.wrow.is-sel, .ptr .wrow.is-sel:hover { background: var(--foco); color: var(--foco-texto); box-shadow: 0 .75rem 2rem var(--sombra); }
.wrow.is-sel .wrow__l2, .wrow.is-sel .wrow__l2 b { color: var(--foco-suave); }
.wrow.is-sel .wrow__l2 b { color: var(--foco-texto); }
.wrow.is-sel .badge { border-color: var(--foco-suave); color: var(--foco-texto); }
.wrow.is-sel .fav-mark { color: var(--estrella-foco); }
.wrow.is-sel .pill { background: rgba(0, 0, 0, .1); color: var(--foco-texto); }
.wrow.is-sel .pill--live { background: var(--aire); color: var(--aire-texto); }
.kbd .wheel.no-zone .wrow.is-sel { background: var(--sel-fondo); color: var(--sel-texto); box-shadow: inset 0 0 0 .1875rem var(--sel-borde); }
.kbd .wheel.no-zone .wrow.is-sel .wrow__l2, .kbd .wheel.no-zone .wrow.is-sel .wrow__l2 b { color: var(--sel-texto); }
.kbd .wheel.no-zone .wrow.is-sel .badge { border-color: var(--sel-texto); color: var(--sel-texto); }
.wheel__empty { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); color: var(--humo); }
.wheel__empty b { display: block; color: var(--tiza); font: 700 2.25rem/1.15 var(--f-cond); margin-bottom: .375rem; }
.wheel__count { position: absolute; color: var(--humo); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }

/* ------------------------------------------------------------ reduced motion */
.calm *, .calm *:before, .calm *:after { animation-duration: 1ms !important;
  animation-iteration-count: 1 !important; }
.calm .spinner { animation: spin 900ms linear infinite !important; }
.calm .is-focus, .calm .btn:hover, .calm .btn:focus { transform: none !important; }
.calm .wrow { transition-property: opacity, background-color, color !important; }