/* Movies in Detail – UI Design Refresh (only CSS, no JS changes)
   Goal: uniform buttons, responsive grid, consistent inputs/cards, accessible focus,
   and good dark-mode contrast. */

/* ===== CSS Variables ===== */
:root {
  --container: 1000px;
  --gap: 12px;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,.10);

  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #0e1116;
  --muted: #616877;

  --primary: #1e66ff;
  --primary-700: #1553cf;
  --green: #28a745;
  --green-700: #1e7e34;
  --orange: #fd7e14;
  --orange-700: #c75a00;
  --danger: #e53935;
  --link: #0b63f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121316;
    --card: #1b1d22;
    --text: #eef1f6;
    --muted: #98a1b3;
    --shadow: 0 6px 24px rgba(0,0,0,.45);

    --primary: #2b84ff;
    --primary-700: #1f6bd9;
    --green: #33b861;
    --green-700: #249a4d;
    --orange: #ff8f2a;
    --orange-700: #e07010;
    --danger: #ff4d4a;
    --link: #8cbeff;
  }
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container */
body > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* ===== Header title ===== */
.titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 8px auto 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  color: var(--text);
}
.titulo img { width: 90px; height: auto; }

/* ===== Inputs ===== */
.entrada-con-borrar {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 10px auto 16px;
}
/* SOLO el buscador principal (con la X) */
.entrada-con-borrar input{
  width:100%;
  height:56px;                 /* alto fijo */
  line-height:56px;            /* centra el texto vertical */
  padding:0 56px 0 12px;       /* hueco a la derecha para la X */
  font-size:16px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
  box-shadow:var(--shadow);
  outline:none;
  box-sizing:border-box;
}

/* Input del juego (sin cambios de alto ni X) */
#userGuess{
  width:100%;
  padding:12px;
  font-size:16px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
  box-shadow:var(--shadow);
  outline:none;
}
.borrar-x{
  position:absolute; right:8px; top:42%;
  transform: translateY(-50% );     /* centrado vertical */
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#2f78ff; color:#cfe0ff; font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  user-select:none; -webkit-tap-highlight-color:transparent;
  touch-action: manipulation;
  z-index:2;
}
/* No se mueve al pulsar */
.borrar-x:active{ transform: translateY(-50%); }

/* Solo buscador (no afecta al #userGuess del juego) */
.entrada-con-borrar input{ padding-right:52px; }

/* Sugerencias dropdown */
#sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 240px;
  overflow: auto;
  z-index: 1000;
}
#sugerencias[aria-hidden="true"], #sugerencias:empty { display: none !important; }
#sugerencias li {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
#sugerencias li:hover { background: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark){
  #sugerencias li:hover { background: rgba(255,255,255,.06); }
}

/* Ayuda de botones */
#ayuda-botones {
  display: block;
  width: fit-content;
  max-width: 90vw;
  margin: 10px auto 14px;
  background: var(--card);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 14px;
  text-align: center;
}

.botones{ width:100%; justify-items:stretch; }
.botones button{ width:100%; }

/* ===== Buttons grid ===== */
.botones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap);
  margin: 12px auto 18px;
}
button {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 12px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .05s ease, background-color .15s ease;
}
button:hover { background: var(--primary-700); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button small { display: block; font-size: 11px; opacity: .95; }

/* Variantes por fila conservando semántica previa */
.fila2 button { background: var(--green); }
.fila2 button:hover { background: var(--green-700); }
.fila3 button { background: var(--orange); }
.fila3 button:hover { background: var(--orange-700); }

/* Botones especiales por id */
#btn-omni { background: #ff1f5a; }
#btn-omni:hover { background: #cc1a48; }

/* Estado “tocado” */
.boton-tocado { box-shadow: 0 0 0 3px rgba(30,102,255,.25); }

/* Focus visible accesible */
:focus-visible {
  outline: 3px solid rgba(30,102,255,.55);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ===== Resultados / cards ===== */
.resultado {
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  font-size: 16px;
}
.resultado a { color: var(--link); text-decoration: underline; }

/* ===== Top sections ===== */
.top5 {
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.top5 h2 { margin: 0 0 8px; font-size: 20px; }
.top-links { list-style: none; padding: 0; margin: 0; }
.top-links li { margin: 8px 0; display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; }
.top-links button { min-width: 120px; }

/* ===== Guess game image ===== */
#description img { display:block; margin:0 auto; max-width:50%; border-radius: 10px; cursor: pointer; aspect-ratio: 16/9; }
@media (max-width: 640px){ #description img { max-width: 100%; } }

.firma-con-video{
  width:100%;
  display:flex;
  justify-content:center;
}
.logo-firma{
  display:block;
  margin:8px auto 0;
  width:auto;
  height:80px; /* ya lo tenías */
}


/* ===== Modales ===== */
/* Ficha artística */
#modalFicha {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.90);
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  z-index: 5000;
  max-width: 640px;
  width: min(92vw, 640px);
  max-height: 86vh;
  overflow: auto;
  box-shadow: var(--shadow);
}
#modalFicha button.close-ficha {
  color: var(--danger);
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  float: right;
}

/* Watchmode / Where to watch */
.wm-overlay, .wtw-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.60);
  z-index: 9999;
  padding: 16px;
}
.wm-card, .wtw-sheet {
  width: min(92vw, 560px);
  max-height: 80vh;
  overflow: auto;
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.wm-card h3, .wtw-sheet h3 { margin: 0 0 10px; font-size: 18px; }
.wm-list, .wtw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wm-list li a, .wtw-list li a { text-decoration: underline; color: var(--link); }
.wm-actions, .wtw-actions { display: flex; justify-content: flex-end; margin-top: 12px; gap: 8px; }
.wm-close, .wtw-close {
  background: var(--danger);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}

/* ===== Misc ===== */
iframe#visor { width: 100%; border: none; margin-top: 20px; display: none; height: 0; }
#visor[src=""], #visor:empty { display: none; height: 0 !important; }

/* Tooltip/help animation reductions */
@media (prefers-reduced-motion: reduce) {
  button, .titulo, .logo-firma, .video-ayuda { transition: none !important; }
}

/* Small screens refinements */
@media (max-width: 480px) {
  body { padding: 12px; }
  .botones { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  button { padding: 10px; font-size: 14px; }
.titulo{ gap:4px; }
  .titulo img{ width:64px; }
}
.guess-title{
  display:inline-block;
  margin:12px auto;
  padding:10px 16px;
  border-radius:8px;
  background:#e6b800;      /* fondo cine */
  color:#000;
  font-size:1.2em;
  line-height:1.2;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
@media (prefers-color-scheme: dark){
  .guess-title{
    background:#ffd54d;    /* más contraste en dark */
    color:#111;
  }
}
/* alineado del bloque “guess” */
.guess-form{ text-align:center; }

/* === Fix “Top por plataforma” para que no rebose ni haga scroll X === */
.top-links{list-style:none;margin:0;padding:0}
.top-links li{
  display:grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr; /* nombre + 2 botones */
  gap:8px;
  align-items:stretch;
}
.top-links li button{
  width:100%;
  min-width:0;            /* evita desbordes */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis; /* por si el nombre es largo */
}

/* móvil */
@media (max-width:480px){
  .top-links li{
    grid-template-columns: 1fr .7fr .7fr;
    gap:8px;
  }
}

/* cinturón y tirantes: nunca scroll horizontal */
html,body{overflow-x:hidden}

/* — Ajuste fino del título — */
.titulo { gap: 4px; }                /* reduce hueco entre partes */
.titulo img + span { margin-left: -26px; }  /* acerca “etail” a la D */

@media (max-width:480px){
  .titulo { gap: 4px; }
  .titulo img + span { margin-left: -10px; }  /* un poco menos agresivo en móvil */
  .titulo img { width: 64px; }
}

/* Reserva de espacio para evitar saltos cuando aparece contenido */
#resultadosBusqueda .resultado{ min-height: 160px; }

#trakt-trending-movies,
#trakt-trending-shows{
  min-height: 7.2em;  /* ~5 líneas a 1.4 line-height */
}

#installPrompt {
  position: relative;
}

#installPrompt .install-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

#installPrompt .install-close:hover {
  color: #000;
}

/* Fija tamaño para h1 dentro de contenedores seccionales (evita API obsoleta) */
:where(section, article, nav, aside) h1 {
  font-size: 1.6em;   /* ajusta a tu diseño */
  line-height: 1.2;
  margin: 0.6em 0 0.4em;
}

h2.guess-title {
  font-size: 1.2em; /* 👈 tamaño explícito, evita el warning */
}

.barra-top10 {
  background: #ffd60a;
  color: #000;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  padding: 8px 0;
  margin: 30px auto 10px auto;
  width: 95%;
  max-width: 480px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.didyouknow{
  max-width: 800px;
  margin: 24px auto;
}
.didyouknow img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}

/* Logo + buscador en fila, responsive */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.topbar .titulo{ margin:0; }

/* El buscador ocupa el resto del ancho; relative para el dropdown absoluto */
.topbar .entrada-con-borrar{
  position:relative;
  flex:1 1 520px;
  max-width:900px;
}

/* El input se estira al 100% */
.topbar .entrada-con-borrar input{
  width:100%;
  box-sizing:border-box;
}

/* En móvil apila (logo arriba, buscador debajo) */
@media (max-width:700px){
  .topbar{ flex-direction:column; align-items:stretch; gap:12px; }
  .topbar .entrada-con-borrar{ flex-basis:auto; max-width:none; }
}

/* Stremio morado — sobrescribe el verde de .fila2 */
#btn-stremio{ background:#7B61FF; color:#fff; }
#btn-stremio:hover{ background:#6b53ff; }

/* 🎨 Colores por fila de botones */
.fila1 { --fila-color: var(--primary); --fila-hover: var(--primary-700); }
.fila2 { --fila-color: var(--green); --fila-hover: var(--green-700); }
.fila3 { --fila-color: var(--orange); --fila-hover: var(--orange-700); }
/* Puedes seguir con fila4, fila5... si haces más */

// Aplica a los botones dentro de cada fila
button.fila1,
.fila1 button {
  background: var(--fila-color);
}
button.fila1:hover,
.fila1 button:hover {
  background: var(--fila-hover);
}

button.fila2,
.fila2 button {
  background: var(--fila-color);
}
button.fila2:hover,
.fila2 button:hover {
  background: var(--fila-hover);
}

button.fila3,
.fila3 button {
  background: var(--fila-color);
}
button.fila3:hover,
.fila3 button:hover {
  background: var(--fila-hover);
}

/* 🟣 Excepción: botón de Stremio siempre morado */
#btn-stremio {
  background: #7B61FF;
}
#btn-stremio:hover {
  background: #6b53ff;
}