/* intereses.css — Elegir intereses tocando tarjetas (como Netflix) */

.int-capa {
  position: fixed; inset: 0; z-index: 260; display: grid; place-items: center;
  background: color-mix(in srgb, #0d1020 55%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: int-entra .22s ease both;
}
.int-capa.saliendo { animation: int-sale .2s ease both; }
@keyframes int-entra { from { opacity: 0; } }
@keyframes int-sale { to { opacity: 0; } }

.int-caja {
  width: min(720px, 100%); height: min(860px, 100%);
  display: flex; flex-direction: column; background: var(--panel); color: var(--txt);
  border-radius: 24px; overflow: hidden; box-shadow: var(--sh-lg);
}
@media (max-width: 760px) { .int-caja { border-radius: 0; width: 100%; height: 100%; } }

.int-cab { padding: max(22px, env(safe-area-inset-top)) 22px 10px; }
.int-cab h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; }
.int-cab p { margin: 0; color: var(--mut); font-size: 14.5px; line-height: 1.4; }

.int-lista { flex: 1; overflow-y: auto; padding: 4px 22px 16px; overscroll-behavior: contain; }
.int-tema h4 { margin: 18px 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.int-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.int-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 15px;
  border-radius: 999px; border: 1.5px solid var(--line-2, var(--line)); background: var(--campo, transparent);
  color: var(--txt); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.int-chip span { font-size: 18px; line-height: 1; }
.int-chip:hover { border-color: var(--azul); }
.int-chip.on { background: var(--azul, #315bea); border-color: var(--azul, #315bea); color: #fff; }
.int-chip.pop { animation: int-pop .28s ease; }
@keyframes int-pop { 50% { transform: scale(1.08); } }

.int-pie {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  background: var(--panel);
}
.int-pie .btn { flex: 1; margin: 0; }
.int-pie .btn:disabled { opacity: .5; cursor: default; }
.int-despues { border: 0; background: none; color: var(--mut); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 10px 6px; }

/* Dentro de "Editar perfil" */
.int-en-hoja { padding: 0; max-height: 46vh; border: 1px solid var(--line); border-radius: 14px; padding: 0 12px 12px; }
.int-en-hoja .int-chip { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
.int-en-hoja .int-tema h4 { margin: 14px 0 8px; }
.ep-int-cuenta { font-weight: 500; color: var(--mut); }

@media (prefers-reduced-motion: reduce) {
  .int-capa, .int-capa.saliendo, .int-chip.pop { animation: none; }
}