/* MiFlix — estilos generales (paleta y comportamiento tipo Netflix) */
:root {
  --fondo: #141414;
  --panel: #181818;
  --panel2: #232323;
  --texto: #eaeaea;
  --texto2: #a0a0a0;
  --acento: #e50914;
  --radio: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
.oculto { display: none !important; }

/* ------------------------------------------------ barra superior */
#barra {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4%;
  background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,0));
  transition: background .3s;
}
#barra.solida { background: var(--fondo); }
#logo {
  color: var(--acento); font-weight: 900; font-size: 1.6rem;
  letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
#barra nav { display: flex; align-items: center; gap: 10px; }
#buscar {
  width: 210px; padding: 7px 12px; border: 1px solid #555; border-radius: var(--radio);
  background: rgba(0,0,0,.65); color: var(--texto); font-size: .9rem; outline: none;
}
#buscar:focus { border-color: #999; }
#btn-escanear, #btn-perfil {
  border: 1px solid #555; background: rgba(0,0,0,.5); color: var(--texto);
  border-radius: var(--radio); padding: 6px 11px; font-size: 1rem;
}
#btn-perfil { font-weight: 700; }
#btn-escanear:hover, #btn-perfil:hover { border-color: #aaa; }
#btn-escanear.girando { animation: girar 1.2s linear infinite; pointer-events: none; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------ perfiles */
#pantalla-perfiles {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 34px; padding: 20px;
}
#pantalla-perfiles h1 { font-size: 2.2rem; font-weight: 500; margin: 0; }
#lista-perfiles { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.perfil-avatar {
  width: 96px; height: 96px; border-radius: 8px; border: 3px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 800; color: #fff;
  background: var(--acento); transition: border-color .15s, transform .15s;
}
.perfil-avatar:hover, .perfil-avatar:focus-visible { border-color: #fff; transform: scale(1.06); }
.perfil-nombre { display: block; text-align: center; margin-top: 8px; color: var(--texto2); }
#form-perfil { display: flex; gap: 8px; }
#nuevo-perfil {
  padding: 10px 14px; border: 1px solid #555; border-radius: var(--radio);
  background: #0b0b0b; color: var(--texto); width: 240px;
}
#form-perfil button {
  padding: 10px 18px; border: 1px solid #888; border-radius: var(--radio);
  background: transparent; color: var(--texto2); font-weight: 600;
}
#form-perfil button:hover { color: #fff; border-color: #fff; }

/* ------------------------------------------------ hero */
#hero {
  position: relative; min-height: 56vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center 20%; background-color: #202020;
}
#hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,.95) 0%, rgba(20,20,20,.5) 45%, rgba(20,20,20,.15) 75%),
              linear-gradient(0deg, var(--fondo) 0%, rgba(20,20,20,0) 45%);
}
#hero .hero-contenido { position: relative; padding: 90px 4% 34px; max-width: 640px; }
#hero .hero-titulo { font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 900; margin: 0 0 10px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
#hero .hero-meta { display: flex; gap: 12px; align-items: center; color: var(--texto2); font-size: .95rem; margin-bottom: 10px; }
#hero .hero-meta .nota { color: #46d369; font-weight: 700; }
#hero .hero-sinopsis { color: #ddd; font-size: 1rem; line-height: 1.45; margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: var(--radio); padding: 10px 24px;
  font-size: 1.05rem; font-weight: 700; margin-right: 10px;
}
.btn-hero.primario { background: #fff; color: #000; }
.btn-hero.primario:hover { background: rgba(255,255,255,.82); }
.btn-hero.secundario { background: rgba(109,109,110,.7); color: #fff; }
.btn-hero.secundario:hover { background: rgba(109,109,110,.5); }

/* ------------------------------------------------ filas */
#filas { padding-bottom: 40px; }
body.sin-hero #filas { padding-top: 84px; }
.fila { margin: 26px 0; position: relative; }
.fila > h2 { margin: 0 4% 10px; font-size: 1.25rem; font-weight: 700; }
.fila-items {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 4%;
  scroll-behavior: smooth; scrollbar-width: none;
}
.fila-items::-webkit-scrollbar { display: none; }
.flecha {
  position: absolute; top: 46px; bottom: 8px; width: 42px; z-index: 5;
  border: 0; background: rgba(20,20,20,.65); color: #fff; font-size: 1.6rem;
  opacity: 0; transition: opacity .2s;
}
.fila:hover .flecha { opacity: 1; }
.flecha:hover { background: rgba(20,20,20,.9); }
.flecha.izq { left: 0; }
.flecha.der { right: 0; }

.tarjeta {
  position: relative; flex: 0 0 auto; width: 158px; aspect-ratio: 2 / 3;
  padding: 0; border: 0; border-radius: var(--radio); background: var(--panel2);
  transition: transform .18s ease; overflow: visible;
}
.tarjeta img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); display: block; }
.tarjeta:hover, .tarjeta:focus-visible { transform: scale(1.08); z-index: 6; }
.tarjeta:focus-visible { outline: 3px solid #fff; }
.tarjeta .titulo-tarjeta {
  position: absolute; inset: auto 0 0 0; padding: 20px 8px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  color: #fff; font-size: .8rem; font-weight: 600; text-align: left;
  border-radius: 0 0 var(--radio) var(--radio); opacity: 0; transition: opacity .15s;
  white-space: normal; line-height: 1.25;
}
.tarjeta:hover .titulo-tarjeta { opacity: 1; }
.tarjeta .progreso {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px;
  background: rgba(255,255,255,.35); border-radius: 2px;
}
.tarjeta .progreso > span { display: block; height: 100%; background: var(--acento); border-radius: 2px; }
.tarjeta.no-reproducible::after {
  content: "convertir a MP4"; position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,.8); color: #ffb84d; font-size: .62rem; font-weight: 700;
  padding: 3px 6px; border-radius: 3px; border: 1px solid #ffb84d;
}
.tarjeta-skel { width: 158px; aspect-ratio: 2/3; flex: 0 0 auto; border-radius: var(--radio); background: var(--panel2); animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .45; } }

/* ------------------------------------------------ resultados de búsqueda */
#resultados { padding: 90px 4% 40px; }
#resultados h2 { font-size: 1.25rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.grid .tarjeta { width: 100%; }

/* ------------------------------------------------ modal de detalle */
#modal { position: fixed; inset: 0; z-index: 60; overflow-y: auto; }
#modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.72); }
#modal-caja {
  position: relative; max-width: 820px; margin: 4vh auto 40px;
  background: var(--panel); border-radius: 8px; overflow: hidden; z-index: 2;
  box-shadow: 0 12px 48px rgba(0,0,0,.8);
}
.detalle-cabecera { position: relative; aspect-ratio: 16/7; background-size: cover; background-position: center 25%; background-color: #262626; }
.detalle-cabecera::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--panel) 0%, rgba(24,24,24,0) 60%); }
.detalle-cuerpo { padding: 18px 28px 28px; }
.detalle-cuerpo h2 { margin: 0 0 6px; font-size: 1.7rem; }
.detalle-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--texto2); margin-bottom: 12px; }
.detalle-meta .nota { color: #46d369; font-weight: 700; }
.detalle-meta .chip { border: 1px solid #666; padding: 1px 8px; border-radius: 3px; font-size: .8rem; }
.detalle-sinopsis { line-height: 1.5; color: #ddd; margin: 0 0 18px; }
.detalle-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.btn-detalle {
  border: 0; border-radius: var(--radio); padding: 9px 22px;
  font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
}
.btn-detalle.primario { background: #fff; color: #000; }
.btn-detalle.primario:hover { background: rgba(255,255,255,.8); }
.btn-detalle.secundario { background: var(--panel2); color: var(--texto); border: 1px solid #555; }
.btn-detalle.secundario:hover { border-color: #aaa; }
.btn-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(20,20,20,.85); color: #fff; font-size: 1.2rem;
}
.btn-cerrar:hover { background: #000; }

.sel-temporada {
  margin: 14px 0 6px; padding: 8px 12px; border-radius: var(--radio);
  background: var(--panel2); color: var(--texto); border: 1px solid #555; font-size: .95rem;
}
.lista-eps { list-style: none; margin: 8px 0 0; padding: 0; }
.lista-eps li { border-top: 1px solid #333; }
.ep-btn {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: none; border: 0; color: var(--texto); padding: 12px 4px;
}
.ep-btn:hover { background: var(--panel2); }
.ep-num { font-size: 1.3rem; color: var(--texto2); width: 36px; text-align: center; flex: 0 0 auto; }
.ep-info { flex: 1; min-width: 0; }
.ep-titulo { font-weight: 600; }
.ep-sub { color: var(--texto2); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-barra { width: 70px; height: 3px; background: #444; border-radius: 2px; flex: 0 0 auto; }
.ep-barra > span { display: block; height: 100%; background: var(--acento); border-radius: 2px; }
.ep-visto { color: #46d369; flex: 0 0 auto; }

/* ------------------------------------------------ varios */
#vacio { padding: 120px 6% 40px; text-align: center; color: var(--texto2); }
#vacio code { background: var(--panel2); padding: 2px 6px; border-radius: 4px; }
#pie { text-align: center; color: #555; font-size: .8rem; padding: 30px 0 16px; }

#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: rgba(30,30,30,.95); border: 1px solid #444; color: #fff;
  padding: 10px 20px; border-radius: 6px; z-index: 90; font-size: .95rem;
  max-width: 80vw;
}

@media (max-width: 640px) {
  .tarjeta { width: 112px; }
  .tarjeta-skel { width: 112px; }
  #hero { min-height: 44vh; }
  #hero .hero-contenido { padding: 80px 5% 24px; }
  #buscar { width: 130px; }
  .detalle-cuerpo { padding: 14px 18px 22px; }
}