/* ===================================================================
   Pantalla Home — elegante y minimalista: fondo casi negro, blanco/gris
   como paleta principal del "chrome" de la página (header, texto), y
   cada tarjeta de categoría lleva SU PROPIO color de acento (el mismo
   que ya usa esa categoría en el resto de la app) solo en el borde/glow/
   icono — nunca en el fondo general. Así el home no compite en color
   con ninguna categoría, pero cada una mantiene su identidad.
   =================================================================== */

/* Home no es una categoría con color propio — es blanco/negro/gris. Pero
   la barra de scroll, el botón de 3 puntos, el menú desplegable y sus
   hover (layout.css/style.css) leen las MISMAS variables que usan Movies/
   Series/Videogames/Books para pintarse (--acento, --panel-grad,
   --panel-borde-int, --panel-relieve...) — si solo se sobreescriben
   algunas, el resto se queda con el azul de Movies (valores default de
   :root) por debajo. Se redefine aquí el set COMPLETO de variables de
   color, con --panel-relieve/--panel-relieve-suave/--panel-sombra
   recalculándose solos porque ya están escritos como var(--panel-borde-
   int) en vez de un color fijo. Mismo criterio que .tema-series/.tema-
   kdramas/etc. en css/style.css, solo que en gris en vez de un color. */
html.fondo-home,
body.fondo-home {
  --bg: #050505;
  --superficie: #0e0e0e;
  --superficie-clara: #181818;

  --borde: #3a3a3a;
  --borde-suave: #262626;
  --borde-brillo: rgba(255, 255, 255, 0.25);

  --acento: #bfbfbf;
  --acento-suave: #e5e5e5;
  --acento-glow: rgba(229, 229, 229, 0.25);
  --acento-foto: #e5e5e5;

  --panel-borde-ext: #000000;
  --panel-borde-int: rgba(255, 255, 255, 0.18);

  --panel-grad: linear-gradient(180deg, #151515 0%, #030303 100%);
  --panel-grad-clara: linear-gradient(180deg, #1e1e1e 0%, #080808 100%);

  --acento-rgb: 191, 191, 191;
  --acento-suave-rgb: 229, 229, 229;
  --bg-rgb: 5, 5, 5;
  --superficie-rgb: 14, 14, 14;
  --borde-rgb: 58, 58, 58;
  --panel-borde-int-rgb: 255, 255, 255;
}

body.fondo-home {
  position: relative;
  background:
    radial-gradient(ellipse 1000px 500px at 50% -10%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(ellipse 900px 700px at 85% 100%, rgba(255, 255, 255, 0.04), transparent 65%),
    radial-gradient(ellipse 900px 700px at 10% 90%, rgba(255, 255, 255, 0.03), transparent 65%),
    #05050700;
  background-color: #050505;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Dos arcos de luz muy tenues cruzando dos esquinas opuestas, blanco y
   negro puro (nada de color) — mismo espíritu que el fondo de la
   referencia, sin competir con el color de identidad de cada tarjeta. */
body.fondo-home::before,
body.fondo-home::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 130vmax;
  height: 130vmax;
  border-radius: 50%;
  pointer-events: none;
}

body.fondo-home::before {
  top: -78vmax;
  left: -62vmax;
  background: conic-gradient(from 205deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.10) 7deg,
    rgba(255, 255, 255, 0.02) 14deg,
    transparent 22deg,
    transparent 360deg);
}

body.fondo-home::after {
  bottom: -78vmax;
  right: -62vmax;
  background: conic-gradient(from 25deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.08) 8deg,
    rgba(255, 255, 255, 0.02) 16deg,
    transparent 24deg,
    transparent 360deg);
}

.home-header,
.home-grid {
  position: relative;
  z-index: 1;
}

.home-header {
  padding: 2rem 2rem 2rem;
  text-align: center;
  position: relative;
}

/* ===================================================================
   Indicador de almacenamiento R2 — ahora vive DENTRO de la barra del
   buscador universal (.buscador-universal-barra), no del header — mismo
   look discreto de siempre, solo que ya no es "position: absolute"
   porque su lugar lo da el grid de la barra (ver más abajo). Datos 100%
   reales, ver worker.js (/almacenamiento-r2) y el script al final de
   index.html.
   =================================================================== */
.home-almacenamiento {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.home-almacenamiento:hover {
  opacity: 0.9;
}

.home-almacenamiento-icono {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #d0d0d0;
}

.home-almacenamiento-texto {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 88px;
}

.home-almacenamiento-texto span {
  font-family: system-ui, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.home-almacenamiento-barra {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.home-almacenamiento-barra-relleno {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  transition: width 0.4s ease;
}

@media (max-width: 560px) {
  .home-almacenamiento-texto { min-width: 0; }
}

/* ===================================================================
   Marca KEEPB — banner ancho (icons/keepb-banner.png: mismo diseño que
   el ícono que se instala en Android/Windows — 5 barras diagonales de
   color + el wordmark "KEEPB" — solo que en formato panel ancho para
   Home). El PNG ya trae sus propias esquinas redondeadas con fondo
   transparente alrededor, así que no se le agrega ni border-radius ni
   sombra de "tarjeta flotante" — se apoya directo sobre el fondo de la
   página (casi el mismo negro) para que se sienta parte de ella, no un
   ícono aparte pegado encima.
   =================================================================== */
.home-header-icono {
  display: block;
  width: min(560px, 92vw);
  height: auto;
  margin: 0 auto 1.2rem;
}

/* Modo Claro usa un archivo aparte (icons/keepb-banner-claro.png — mismas
   letras/barras, fondo negro removido) en vez del banner de Dark Mode —
   ver css/tema-claro.css para el swap. Oculta por defecto acá (Dark
   Mode, el caso normal); ambas imágenes viven siempre en el DOM
   (index.html) para no depender de JS. */
.home-header-icono-claro {
  display: none;
}

.home-header .home-tagline {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* Flexbox con wrap (no grid): así, sin importar cuántas tarjetas haya
   (5 hoy, o las que el usuario elija mostrar a futuro), cada fila se
   arma sola y "justify-content: center" centra SIEMPRE el contenido de
   cada fila — incluida la última si queda incompleta (ej. 3 arriba + 2
   abajo centradas bajo el conjunto de arriba, en vez de pegadas a la
   izquierda). No hay ninguna posición fija por cantidad de tarjetas. */
.home-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
}

/* Color de identidad por categoría — un solo lugar por variable, todo
   lo demás de la tarjeta (borde, glow, ícono, subrayado) lo deriva de
   aquí. Mismos hex que --acento/--acento-suave de cada .tema-X en
   css/style.css, para que Home combine exactamente con la categoría. */
.home-tarjeta-movies     { --color-cat: #1d4ed8; --color-cat-suave: #60a5fa; }
.home-tarjeta-series     { --color-cat: #16a34a; --color-cat-suave: #4ade80; }
.home-tarjeta-kdramas    { --color-cat: #ab00c0; --color-cat-suave: #d500ff; }
.home-tarjeta-videogames { --color-cat: #cc0000; --color-cat-suave: #ff3333; }
.home-tarjeta-books      { --color-cat: #c8763f; --color-cat-suave: #e8a366; }

.home-tarjeta {
  flex: 0 0 calc((100% - 2 * 1.5rem) / 3); /* 3 tarjetas por fila (ver .home-grid arriba) */
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
    #0a0a0a;
  border: 1px solid color-mix(in srgb, var(--color-cat) 55%, transparent);
  border-radius: 18px;
  padding: 2rem 1.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: #f0f0f0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6) inset,
    0 10px 30px rgba(0, 0, 0, 0.55);
}

/* Halo de color muy sutil detrás del ícono, propio de cada categoría —
   no tiñe toda la tarjeta, solo insinúa el color arriba. */
.home-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 140px 90px at 50% 0%, color-mix(in srgb, var(--color-cat) 35%, transparent), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.home-tarjeta:hover,
.home-tarjeta:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-cat-suave);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6) inset,
    0 14px 34px rgba(0, 0, 0, 0.6),
    0 0 26px color-mix(in srgb, var(--color-cat) 45%, transparent);
}

.home-icono {
  position: relative;
  z-index: 1;
  font-size: 2.1rem;
  line-height: 1;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-cat) 28%, #0a0a0a), #0a0a0a 70%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-cat) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--color-cat) 35%, transparent) inset,
    0 0 22px color-mix(in srgb, var(--color-cat) 25%, transparent);
}

.home-tarjeta span {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  color: #f5f5f5;
}

/* Subrayado corto del color de la categoría, como en la referencia. */
.home-tarjeta span::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 0.5rem auto 0;
  background: var(--color-cat-suave);
  border-radius: 2px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-cat-suave) 70%, transparent);
}

.home-tarjeta small {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.home-tarjeta.deshabilitada {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ===================================================================
   BUSCADOR UNIVERSAL — mismo input (.topbar-buscar, layout.css) que ya
   usa cada catálogo. Vive en su PROPIA barra arriba del todo (antes de
   .home-header), con z-index explícito por encima de .home-header/
   .home-grid (ambos z-index:1) — así el desplegable de resultados nunca
   vuelve a quedar tapado por las tarjetas de categoría. Los resultados
   reutilizan .badge-rating (layout.css) para la etiqueta de categoría,
   así queda igual al resto de la app.

   El indicador de almacenamiento (izquierda) y el menú de 3 puntos
   (derecha) — que antes vivían "position: absolute" dentro de
   .home-header — ahora son las columnas laterales de este mismo grid de
   3 columnas. Con las dos columnas de los costados en "1fr" (el mismo
   tamaño flexible cada una), la columna del medio (el buscador) queda
   SIEMPRE centrada en el ancho de la barra sin importar cuánto ocupe
   cada lado — a diferencia de un flex con justify-content:center, que
   se hubiera corrido hacia el lado más angosto.
   =================================================================== */
.buscador-universal-barra {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
}

.buscador-universal-barra .home-almacenamiento { justify-self: start; }
.buscador-universal-barra .menu-opciones { justify-self: end; }

.buscador-universal-envoltura {
  position: relative;
  width: min(560px, 90vw);
  justify-self: center;
}

.buscador-universal-input {
  /* .topbar-buscar (layout.css) trae "max-width: 500px" pensado para el
     buscador angosto de cada catálogo — sin este reset, el input queda
     más angosto que .buscador-universal-envoltura y se ve corrido a la
     izquierda en vez de centrado. */
  max-width: none;
  width: 100%;
  font-size: 0.95rem;
  padding: 0.85rem 1.2rem;
  text-align: center;
}

.buscador-universal-input:focus { text-align: left; }

.buscador-universal-resultados {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel-grad);
  border: 1px solid var(--panel-borde-ext);
  border-radius: 10px;
  box-shadow: var(--panel-relieve);
  z-index: 60;
  text-align: left;
}

.buscador-universal-resultados.abierto { display: block; }

.buscador-universal-fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.9rem;
  text-decoration: none;
  color: var(--texto);
  border-bottom: 1px solid var(--borde-suave);
  transition: background 0.15s ease;
}

.buscador-universal-fila:last-child { border-bottom: none; }
.buscador-universal-fila:hover { background: rgba(var(--acento-suave-rgb), 0.08); }

.buscador-universal-miniatura {
  width: 40px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--superficie-clara);
  box-shadow: inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.3);
}

.buscador-universal-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

.buscador-universal-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.buscador-universal-titulo {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buscador-universal-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--texto-tenue);
}

.buscador-universal-meta .badge-rating {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
}

.buscador-universal-mensaje {
  padding: 1.2rem;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 0.85rem;
}

.buscador-universal-mas {
  padding: 0.6rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--texto-tenue);
  border-top: 1px dashed var(--borde-suave);
}

@media (max-width: 640px) {
  /* Angosto: el grid de 3 columnas ya no tiene espacio para el
     buscador + almacenamiento + menú en una sola fila — pasa a 2 filas:
     el buscador arriba (ancho completo), almacenamiento y menú abajo,
     cada uno en su esquina (mismo lugar de siempre, solo apilado). */
  .buscador-universal-barra {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "buscar buscar" "almacenamiento menu";
    row-gap: 0.8rem;
  }
  .buscador-universal-envoltura { grid-area: buscar; justify-self: center; width: 100%; padding: 0 0.5rem; }
  .buscador-universal-barra .home-almacenamiento { grid-area: almacenamiento; }
  .buscador-universal-barra .menu-opciones { grid-area: menu; }

  /* Ya no caben 3 tarjetas de categoría cómodas en una fila — pasan a 2
     por fila (la última fila, completa o no, siempre queda centrada
     gracias a justify-content:center en .home-grid). */
  .home-tarjeta { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 420px) {
  /* Muy angosto (celular en vertical): una sola columna. */
  .home-tarjeta { flex-basis: 100%; }
}