/* ============================================================
   LA CONTENT MANAGER · LG TV MODE
   Solo funciona cuando JS añade .lg-tv-mode al <html>.
   ============================================================ */


/* ------------------------------------------------------------
   FOCO GLOBAL PARA CONTROL REMOTO
   ------------------------------------------------------------ */

html.lg-tv-mode.lg-tv-remote-active
:is(
  a[href],
  button,
  input,
  select,
  textarea,
  [tabindex],
  [role="button"]
):focus {
  outline: 4px solid #c084fc !important;
  outline-offset: 4px !important;

  box-shadow:
    0 0 0 2px rgba(0,0,0,.85),
    0 0 0 7px rgba(192,132,252,.35),
    0 0 28px rgba(168,85,247,.35) !important;

  position: relative;
  z-index: 20;
}


/* ------------------------------------------------------------
   BOTONES MÁS CÓMODOS DESDE TV
   No hacemos gigantes los elementos.
   Solo aumentamos ligeramente el área interactiva.
   ------------------------------------------------------------ */

html.lg-tv-mode button,
html.lg-tv-mode [role="button"] {
  min-height: 42px;
}


/* ------------------------------------------------------------
   REDUCIR COSTE GPU
   webOS no necesita renderizar todos los blur del escritorio.
   ------------------------------------------------------------ */

html.lg-tv-mode * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* ------------------------------------------------------------
   ANIMACIONES
   Mantener sensación visual, pero mucho más ligera.
   ------------------------------------------------------------ */

html.lg-tv-mode *,
html.lg-tv-mode *::before,
html.lg-tv-mode *::after {
  animation-duration: .15s !important;
  animation-iteration-count: 1 !important;

  transition-duration: .12s !important;

  scroll-behavior: smooth;
}


/* ------------------------------------------------------------
   EVITAR TRANSFORMACIONES HOVER INNECESARIAS
   Magic Remote puede provocar estados hover.
   ------------------------------------------------------------ */

html.lg-tv-mode
:is(
  button,
  a,
  [role="button"],
  [tabindex]
):hover {
  transform: none;
}


/* ------------------------------------------------------------
   SCROLL
   ------------------------------------------------------------ */

html.lg-tv-mode {
  scroll-behavior: smooth;
}

html.lg-tv-mode body {
  overscroll-behavior: contain;
}


/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */

html.lg-tv-mode
:is(
  input,
  textarea,
  select
):focus {
  outline: 4px solid #c084fc !important;
  outline-offset: 3px !important;
}


/* ------------------------------------------------------------
   VIDEO / IMÁGENES
   ------------------------------------------------------------ */

html.lg-tv-mode img,
html.lg-tv-mode video {
  image-rendering: auto;
}


/* ------------------------------------------------------------
   MODALES
   Evita que queden fuera de una pantalla 16:9.
   ------------------------------------------------------------ */

html.lg-tv-mode
:is(
  [role="dialog"],
  .modal,
  .dialog
) {
  max-height: 92vh;
}


/* ------------------------------------------------------------
   SELECCIÓN VISIBLE
   ------------------------------------------------------------ */

html.lg-tv-mode.lg-tv-remote-active
button:focus-visible,

html.lg-tv-mode.lg-tv-remote-active
a:focus-visible,

html.lg-tv-mode.lg-tv-remote-active
[role="button"]:focus-visible {

  filter: brightness(1.12);

}