/* The login page. Landscape: the same 16:9 box as the app (rem = box width / 120), form on the left,
   six of the audience's own channels on the right, the colour-bar band along the bottom.
   Portrait: one column at 16 px (18 px from 600 px wide). The page follows the theme chosen on this
   device (theme.js in <head>). */
.login { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: var(--sala); }
.login .bars { position: absolute; left: 0; right: 0; bottom: 0; }
.login__side { position: absolute; top: 0; left: 0; bottom: 0; width: 52%; padding: 4.375rem 4rem 3.375rem 6rem; display: flex; flex-direction: column; }
.login__side .wordmark { font-size: 2.75rem; }
.login__form { margin: auto 0; max-width: 42rem; }
.login__title { margin: 0 0 1rem; font: 700 4.5rem/1.02 var(--f-cond); letter-spacing: -.01em; text-wrap: balance; }
.login__lead { margin: 0 0 2.25rem; color: var(--humo); font-size: 1.875rem; }
.login .field__box { height: 4.75rem; }
.login__submit { width: 100%; height: 4.75rem; margin: .5rem 0 0; font-size: 2.25rem; }
.login__help { margin: 2rem 0 0; color: var(--humo); font-size: 1.625rem; max-width: 38rem; }
.login__help b { color: var(--tiza); font-weight: 700; }
/* The grid ends on the 6rem safe line of a TV (overscan), like the rest of the page. */
.login__wall { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; padding-right: 6rem; display: flex; align-items: center; justify-content: flex-end; }
.login__grid { display: flex; flex-wrap: wrap; width: 50.5rem; }
.login__grid .plate { width: 16rem; height: 9rem; margin: 0 1.25rem 1.25rem 0; border-radius: .875rem; box-shadow: 0 1rem 2.5rem var(--sombra); }
.login__grid .plate:nth-child(3n) { margin-right: 0; }
.login__grid .plate:nth-child(2) { transform: translateY(2rem); }
.login__grid .plate:nth-child(5) { transform: translateY(2rem); }
.login__note { width: 100%; margin-top: 2.25rem; color: var(--humo); font-size: 1.625rem; }
.login__note b { color: var(--tiza); }
.kbd .login__submit:focus, .login__submit.is-focus { background: var(--foco); color: var(--foco-texto); box-shadow: none; }

@media (orientation: portrait) {
  html { font-size: 16px; }
  body { overflow-y: auto; font-size: 1.0625rem; }
  .login { position: relative; min-height: 100vh; padding-bottom: 2rem; }
  .login__side { position: static; width: auto; padding: 1.5rem 1.25rem 0; display: block; }
  .login__side .wordmark { font-size: 1.5rem; }
  .login__form { margin: 0; max-width: 34rem; }
  .login__title { font-size: 2.375rem; margin: 2rem 0 .5rem; }
  .login__lead { font-size: 1.0625rem; margin-bottom: 1.25rem; }
  .login__wall { position: static; width: auto; display: block; padding: 0 1.25rem; margin: 2.25rem 0 1.5rem; }
  .login__grid { width: 100%; max-width: 34rem; }
  .login__grid .plate { width: 31.5%; height: auto; padding-top: 17.7%; margin: 0 2.75% 2.75% 0; border-radius: .5rem; box-shadow: none; }
  .login__grid .plate:nth-child(2), .login__grid .plate:nth-child(5) { transform: none; }
  .login__note { display: none; }
  .field__label { font-size: 1.0625rem; margin-bottom: .4375rem; }
  .field { margin-bottom: 1rem; }
  .login .field__box { height: 3.25rem; border-radius: .875rem; }
  .field__box input { font-size: 1.125rem; padding: 0 1rem; }
  .field__eye { width: 3rem; font-size: 1.25rem; }
  .error-box { font-size: 1rem; }
  .login__submit { height: 3.25rem; font-size: 1.375rem; margin-right: 0; border-radius: 1.625rem; }
  .login__help { font-size: .9375rem; margin-top: 1.25rem; }
}
@media (orientation: portrait) and (min-width: 600px) { html { font-size: 18px; } }