/* =========================================================================
   Perfiles (web) — selección, administración, edición, cuenta y menú usuario.
   Archivo propio: NO editar main.min.css. Usa los tokens de color del proyecto
   (--clr-primary, --clr-secondary, --clr-green-*) definidos en main.min.css.
   Prefijo de clases: .lp-
   ========================================================================= */

:root {
  --lp-bg: var(--clr-green-new-bg, hsl(163 48% 12%));
  --lp-surface: var(--clr-green-new-100, hsl(170 100% 14%));
  --lp-surface-2: var(--clr-green-300, hsl(168 100% 22%));
  --lp-tile: var(--clr-green-600, hsl(165 100% 34%));
  --lp-accent: var(--clr-primary, hsl(47 100% 50%));
  --lp-accent-fg: hsl(0 0% 0%);
  --lp-fg: hsl(0 0% 100%);
  --lp-fg-muted: hsl(0 0% 100% / .68);
  --lp-line: hsl(0 0% 100% / .14);
  --lp-danger: hsl(0 72% 58%);
  --lp-radius: 12px;
  --lp-ease: .2s cubic-bezier(.4, 0, .2, 1);
  --lp-font: var(--g-font-family, "Poppins", system-ui, sans-serif);
}

.lp-page *,
.lp-page *::before,
.lp-page *::after,
.lp-account,
.lp-account *,
.lp-usermenu,
.lp-usermenu * {
  box-sizing: border-box;
}

/* ---------- Layout de perfiles (pantalla completa, sin header/footer) ---------- */

.lp-page {
  display: block;
  min-block-size: 100dvh;
  margin: 0;
  background-color: var(--lp-bg);
  color: var(--lp-fg);
  font-family: var(--lp-font);
  font-size: 16px;
}

.lp-topbar {
  display: flex;
  align-items: center;
  padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 56px);
}

.lp-topbar__logo {
  display: inline-flex;
  color: var(--lp-accent);
}

.lp-topbar__logo svg {
  inline-size: clamp(36px, 4vw, 54px);
  block-size: auto;
}

.lp-main {
  display: grid;
  place-items: center;
  min-block-size: calc(100dvh - 140px);
  padding: 0 16px 64px;
}

/* ---------- Tipografía y utilidades ---------- */

.lp-title {
  margin: 0 0 clamp(20px, 3vw, 36px);
  font-family: var(--lp-font);
  font-size: clamp(26px, 3.6vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--lp-fg);
}

.lp-title--left { text-align: start; }

.lp-subtitle {
  margin: -16px 0 24px;
  color: var(--lp-fg-muted);
  font-size: 15px;
}

.lp-icon {
  inline-size: 1.2em;
  block-size: 1.2em;
  flex-shrink: 0;
}

.lp-alert {
  margin: 0 auto 24px;
  max-inline-size: 560px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  border: 1px solid transparent;
}

.lp-alert--error {
  background: hsl(0 70% 50% / .16);
  border-color: hsl(0 70% 60% / .5);
  color: hsl(0 100% 88%);
}

.lp-alert--ok {
  background: hsl(165 100% 41% / .16);
  border-color: hsl(165 100% 41% / .5);
  color: hsl(165 100% 88%);
}

/* ---------- Botones ---------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 48px;
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: var(--lp-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lp-ease), color var(--lp-ease), border-color var(--lp-ease), transform var(--lp-ease);
}

.lp-btn:active { transform: scale(.98); }

.lp-btn--primary {
  background-color: var(--lp-accent);
  color: var(--lp-accent-fg);
}

.lp-btn--primary:hover { filter: brightness(1.06); }

.lp-btn--outline {
  background: transparent;
  border-color: var(--lp-fg-muted);
  color: var(--lp-fg-muted);
}

.lp-btn--outline:hover {
  border-color: var(--lp-fg);
  color: var(--lp-fg);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--lp-fg-muted);
}

.lp-btn--ghost:hover { color: var(--lp-danger); }

.lp-btn--danger {
  background-color: var(--lp-danger);
  color: var(--lp-fg);
}

.lp-btn--danger:hover { filter: brightness(1.08); }

.lp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--lp-fg-muted);
  font: 500 14px/1.2 var(--lp-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lp-link:hover { color: var(--lp-fg); }

.lp-iconbtn {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lp-fg);
  cursor: pointer;
}

.lp-iconbtn:hover { background: var(--lp-line); }

.lp-btn:focus-visible,
.lp-link:focus-visible,
.lp-iconbtn:focus-visible,
.lp-input:focus-visible {
  outline: 3px solid var(--lp-accent);
  outline-offset: 3px;
}

/* ---------- Avatar ---------- */

.lp-avatar {
  --size: 40px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--lp-tile);
  color: var(--lp-fg);
}

.lp-avatar__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.lp-avatar__initial {
  font-family: var(--lp-font);
  font-weight: 700;
  font-size: calc(var(--size) * .42);
  line-height: 1;
  color: var(--lp-fg);
}

.lp-avatar--sm { --size: 32px; }
.lp-avatar--md { --size: 44px; }
.lp-avatar--lg { --size: clamp(76px, 9vw, 112px); }
.lp-avatar--xl { --size: clamp(96px, 11vw, 168px); }

.lp-avatar--add {
  background: transparent;
  border: 2px dashed var(--lp-fg-muted);
  color: var(--lp-fg-muted);
  transition: color var(--lp-ease), border-color var(--lp-ease), background-color var(--lp-ease);
}

.lp-avatar--add .lp-icon {
  inline-size: 38%;
  block-size: 38%;
}

/* ---------- ¿Quién está viendo? / Administrar perfiles ---------- */

.lp-gate {
  inline-size: 100%;
  max-inline-size: 1100px;
  text-align: center;
}

.lp-profiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 36px);
  margin: 0 0 clamp(32px, 5vw, 56px);
  padding: 0;
  list-style: none;
}

.lp-profiles__item form { margin: 0; }

.lp-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lp-fg-muted);
  font-family: var(--lp-font);
  text-decoration: none;
  cursor: pointer;
}

.lp-profile__frame {
  position: relative;
  display: inline-grid;
  border-radius: 50%;
  outline: 3px solid transparent;
  outline-offset: 4px;
  transition: outline-color var(--lp-ease), transform var(--lp-ease);
}

.lp-profile__name {
  max-inline-size: clamp(96px, 11vw, 168px);
  overflow: hidden;
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--lp-ease);
}

.lp-profile:hover,
.lp-profile:focus-visible { color: var(--lp-fg); outline: none; }

.lp-profile:hover .lp-profile__frame,
.lp-profile:focus-visible .lp-profile__frame {
  outline-color: var(--lp-accent);
  transform: scale(1.04);
}

.lp-profile.is-current .lp-profile__frame { outline-color: var(--lp-fg-muted); }

.lp-profile--add:hover .lp-avatar--add,
.lp-profile--add:focus-visible .lp-avatar--add {
  border-color: var(--lp-fg);
  color: var(--lp-fg);
  background: var(--lp-line);
}

/* Modo administrar: lápiz sobre el avatar */
.lp-profile__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: hsl(0 0% 0% / .5);
  color: var(--lp-fg);
}

.lp-profile__overlay .lp-icon {
  inline-size: 30%;
  block-size: 30%;
}

.lp-gate__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lp-gate__actions .lp-btn { min-inline-size: 220px; }

/* ---------- Editar / agregar perfil ---------- */

.lp-edit {
  inline-size: 100%;
  max-inline-size: 720px;
}

.lp-edit__form {
  border-block: 1px solid var(--lp-line);
  padding-block: 28px;
}

.lp-edit__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 40px);
}

.lp-edit__avatar {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.lp-edit__avatar:disabled { cursor: default; }

.lp-edit__avatar:focus-visible {
  outline: 3px solid var(--lp-accent);
  outline-offset: 4px;
}

.lp-edit__badge {
  position: absolute;
  inset-block-end: 4%;
  inset-inline-end: 4%;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--lp-fg);
  color: var(--lp-surface);
  box-shadow: 0 2px 8px hsl(0 0% 0% / .35);
}

.lp-edit__badge .lp-icon { inline-size: 18px; block-size: 18px; }

.lp-edit__fields {
  flex: 1;
  min-inline-size: 0;
}

.lp-edit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}

.lp-edit__actions .lp-btn--ghost { margin-inline-start: auto; }

/* ---------- Formularios ---------- */

.lp-label {
  display: block;
  margin-block-end: 8px;
  color: var(--lp-fg-muted);
  font-size: 14px;
  font-weight: 500;
}

.lp-input {
  display: block;
  inline-size: 100%;
  min-block-size: 46px;
  padding: 10px 14px;
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  background-color: var(--lp-surface);
  color: var(--lp-fg);
  font: 400 16px/1.3 var(--lp-font);
  box-sizing: border-box;
  transition: border-color var(--lp-ease);
}

.lp-input::placeholder { color: var(--lp-fg-muted); }

.lp-input:hover { border-color: var(--lp-fg-muted); }

.lp-input:focus { border-color: var(--lp-accent); outline: none; }

.lp-input[readonly] {
  opacity: .7;
  cursor: not-allowed;
}

select.lp-input { appearance: auto; }

.lp-input[type="date"] { color-scheme: dark; }

.lp-hint {
  margin: 8px 0 0;
  color: var(--lp-fg-muted);
  font-size: 13px;
}

/* ---------- Selector de avatar ---------- */

.lp-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  background-color: var(--lp-bg);
  padding: clamp(16px, 4vw, 48px);
}

.lp-picker[hidden] { display: none; }

.lp-picker__inner {
  max-inline-size: 1100px;
  margin-inline: auto;
}

.lp-picker__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 24px;
}

.lp-picker__head .lp-title { margin: 0; }

.lp-picker__group { margin-block-end: 32px; }

.lp-picker__group-title {
  margin: 0 0 14px;
  color: var(--lp-fg);
  font: 600 18px/1.3 var(--lp-font);
}

.lp-picker__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-picker__option {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 4px;
  transition: outline-color var(--lp-ease), transform var(--lp-ease);
}

.lp-picker__option:hover,
.lp-picker__option:focus-visible {
  outline-color: var(--lp-fg);
  transform: scale(1.05);
}

.lp-picker__option.is-selected { outline-color: var(--lp-accent); }

.lp-picker__check {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: none;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--lp-accent);
  color: var(--lp-accent-fg);
}

.lp-picker__check .lp-icon { inline-size: 16px; block-size: 16px; }

.lp-picker__option.is-selected .lp-picker__check { display: grid; }

/* ---------- Diálogo eliminar ---------- */

.lp-dialog {
  /* El reset de main.min.css quita el margin:auto nativo: se centra explícitamente */
  position: fixed;
  inset: 0;
  margin: auto;
  block-size: fit-content;
  max-block-size: calc(100dvh - 32px);
  inline-size: min(440px, calc(100vw - 32px));
  max-inline-size: none;
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-surface);
  color: var(--lp-fg);
}

.lp-dialog::backdrop { background: hsl(0 0% 0% / .65); }

.lp-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px 24px;
  text-align: center;
}

.lp-dialog__title {
  margin: 8px 0 0;
  font: 600 20px/1.3 var(--lp-font);
}

.lp-dialog__text {
  margin: 0;
  color: var(--lp-fg-muted);
  font-size: 14px;
}

.lp-dialog__label {
  align-self: stretch;
  margin: 8px 0 0;
  text-align: start;
}

.lp-dialog__body .lp-input { background-color: var(--lp-bg); }

.lp-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
}

.lp-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 12px;
}

/* ---------- Página Cuenta (usa el layout principal) ---------- */

.lp-account {
  max-inline-size: 760px;
  margin-block: 8px 48px;
  color: var(--lp-fg);
  font-family: var(--lp-font);
  font-size: 16px;
}

.lp-account .lp-alert { margin-inline: 0; max-inline-size: none; text-align: start; }

.lp-account__form {
  display: grid;
  gap: 20px;
}

.lp-card {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background-color: var(--lp-surface);
}

.lp-card .lp-input { background-color: var(--lp-bg); }

.lp-account > .lp-card--danger { margin-block-start: 40px; }

.lp-card--danger { border-color: hsl(0 72% 58% / .45); }

.lp-card__text {
  margin: 0 0 16px;
  color: var(--lp-fg-muted);
  font-size: 14px;
  line-height: 1.5;
}

.lp-btn--danger-outline {
  background: transparent;
  border-color: var(--lp-danger);
  color: var(--lp-danger);
}

.lp-btn--danger-outline:hover {
  background-color: var(--lp-danger);
  color: var(--lp-fg);
}

.lp-card__title {
  margin: 0 0 16px;
  font: 600 18px/1.3 var(--lp-font);
}

.lp-card > .lp-hint { margin: -8px 0 16px; }

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 20px;
}

.lp-field { min-inline-size: 0; }

.lp-account__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.lp-account__actions .lp-link { margin-inline-start: auto; }

/* ---------- Menú de usuario en el header ---------- */

/* Cuenta habilitada (clase puesta en <head> según cookies): se reemplaza el link
   Login/Cerrar sesión del sitio por el menú de usuario */
html.lp-on .main-header__login { display: none !important; }

.lp-usermenu[hidden] { display: none !important; }

/* Mientras se arma el menú se reserva el espacio del avatar (evita saltos) */
html.lp-on .lp-usermenu:empty {
  display: inline-block !important;
  inline-size: 56px;
  block-size: 40px;
}

.lp-usermenu {
  position: relative;
  font-family: var(--lp-font);
}

.lp-usermenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--lp-fg);
  cursor: pointer;
}

.lp-usermenu__toggle:focus-visible {
  outline: 3px solid var(--lp-accent);
  outline-offset: 2px;
}

.lp-usermenu__caret {
  display: inline-flex;
  transition: transform var(--lp-ease);
}

.lp-usermenu__caret .lp-icon { inline-size: 18px; block-size: 18px; }

.lp-usermenu.is-open .lp-usermenu__caret { transform: rotate(180deg); }

.lp-usermenu__panel {
  /* fixed: el header tiene overflow:hidden en móvil y recortaba el panel.
     top/right se calculan en profiles.js */
  position: fixed;
  inset-block-start: 72px;
  inset-inline-end: 12px;
  z-index: 1001;
  max-block-size: calc(100dvh - 90px);
  overflow-y: auto;
  inline-size: 260px;
  max-inline-size: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background-color: var(--lp-surface);
  box-shadow: 0 16px 40px hsl(0 0% 0% / .45);
  color: var(--lp-fg);
  font-size: 14px;
  text-align: start;
}

.lp-usermenu__panel[hidden] { display: none; }

.lp-usermenu__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
  border-block-end: 1px solid var(--lp-line);
  margin-block-end: 6px;
}

.lp-usermenu__who {
  display: grid;
  min-inline-size: 0;
  line-height: 1.3;
}

.lp-usermenu__who strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-usermenu__who span {
  overflow: hidden;
  color: var(--lp-fg-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-usermenu__label {
  margin: 6px 8px 4px;
  color: var(--lp-fg-muted);
  font-size: 12px;
  font-weight: 500;
}

.lp-usermenu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-usermenu__list form { margin: 0; }

.lp-usermenu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  min-block-size: 40px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--lp-fg);
  font: 500 14px/1.2 var(--lp-font);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.lp-usermenu__item > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-usermenu__item .lp-icon {
  inline-size: 20px;
  block-size: 20px;
  margin-inline: 6px;
  color: var(--lp-fg-muted);
}

.lp-usermenu__item:hover,
.lp-usermenu__item:focus-visible {
  background-color: var(--lp-surface-2);
  outline: none;
}

.lp-usermenu__item--logout { color: var(--lp-fg-muted); }

.lp-usermenu__sep {
  margin: 6px 0;
  border: 0;
  border-block-start: 1px solid var(--lp-line);
}

/* ---------- Favoritos: botón corazón en la ficha del programa ---------- */
/* Ocupa el lugar de la paginación del carrusel (abajo a la derecha), que no se usa.
   Mismos offsets que .swiper-pagination de main.min.css (que lleva zoom .8). */

.lp-fav[hidden] { display: none !important; }

/* Solo se oculta la paginación cuando el corazón está visible (cuentas habilitadas) */
.overlay-card-carousel:has(.lp-fav:not([hidden])) .overlay-card-carousel__pagination { display: none; }

.lp-fav {
  --pg-x: calc(3.5rem * .8);
  --pg-y: calc(3.13rem * .8);
  --pg-bullet: calc(1.38rem * .8);
  position: absolute;
  inset-block-end: max(10px, calc(var(--pg-y) + var(--pg-bullet) / 2 - 20px));
  inset-inline-end: var(--pg-x);
  z-index: 10;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1.5px solid hsl(0 0% 100% / .7);
  border-radius: 50%;
  background-color: hsl(0 0% 0% / .45);
  color: hsl(0 0% 100%);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}

.lp-fav .lp-icon {
  inline-size: 20px;
  block-size: 20px;
  transition: fill .2s;
}

@media screen and (width <= 767px) {
  .lp-fav {
    --pg-x: calc(1.5rem * .8);
    --pg-y: calc(1.5rem * .8);
    --pg-bullet: calc(1.25rem * .8);
    inline-size: 36px;
    block-size: 36px;
  }
}

.lp-fav:hover {
  border-color: hsl(0 0% 100%);
  background-color: hsl(0 0% 0% / .65);
  transform: scale(1.08);
}

.lp-fav:focus-visible {
  outline: 3px solid var(--clr-primary, hsl(47 100% 50%));
  outline-offset: 3px;
}

.lp-fav.is-active {
  border-color: var(--clr-primary, hsl(47 100% 50%));
  color: var(--clr-primary, hsl(47 100% 50%));
}

.lp-fav.is-active .lp-icon { fill: currentColor; }

.lp-fav.is-busy { pointer-events: none; opacity: .7; }

.lp-fav.is-pop .lp-icon { animation: lp-pop .35s ease; }

@keyframes lp-pop {
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.lp-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 2000;
  max-inline-size: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--lp-surface);
  border: 1px solid var(--lp-line);
  box-shadow: 0 10px 30px hsl(0 0% 0% / .4);
  color: var(--lp-fg);
  font: 500 14px/1.3 var(--lp-font);
  opacity: 0;
  transition: opacity .2s, translate .2s;
  pointer-events: none;
}

.lp-toast.is-visible {
  opacity: 1;
  translate: -50% -6px;
}

/* ---------- Vincular TV ---------- */

.lp-tv {
  max-inline-size: 560px;
  margin-block: 24px 64px;
  color: var(--lp-fg);
  font-family: var(--lp-font);
  font-size: 16px;
}

.lp-tv,
.lp-tv * { box-sizing: border-box; }

.lp-tv__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 5vw, 44px);
  text-align: center;
}

.lp-tv__icon {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  margin-block-end: 16px;
  border-radius: 50%;
  background-color: var(--lp-bg);
  color: var(--lp-accent);
}

.lp-tv__icon .lp-icon { inline-size: 34px; block-size: 34px; }

.lp-tv__icon.is-success {
  background-color: var(--lp-accent);
  color: var(--lp-accent-fg);
}

.lp-tv__title {
  margin: 0 0 8px;
  font: 600 clamp(24px, 3vw, 32px)/1.2 var(--lp-font);
}

.lp-tv__text {
  margin: 0 0 24px;
  max-inline-size: 420px;
  color: var(--lp-fg-muted);
  font-size: 15px;
  line-height: 1.5;
}

.lp-tv .lp-alert { margin-inline: 0; inline-size: 100%; }

.lp-tv__form {
  inline-size: 100%;
  max-inline-size: 360px;
  text-align: start;
}

.lp-tv__label { text-align: center; }

.lp-tv__code {
  min-block-size: 64px;
  background-color: var(--lp-bg);
  border-width: 2px;
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 600;
  letter-spacing: .35em;
  text-align: center;
  /* compensa el letter-spacing del último carácter para centrar */
  padding-inline-start: calc(14px + .35em);
}

.lp-tv__code::placeholder {
  color: hsl(0 0% 100% / .22);
  font-weight: 500;
}

.lp-tv__form .lp-hint { text-align: center; }

.lp-tv__submit {
  inline-size: 100%;
  margin-block-start: 20px;
}

.lp-tv__steps {
  inline-size: 100%;
  max-inline-size: 420px;
  margin: 32px 0 0;
  padding: 20px 0 0 22px;
  border-block-start: 1px solid var(--lp-line);
  color: var(--lp-fg-muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: start;
}

.lp-tv__steps li + li { margin-block-start: 6px; }

.lp-tv__steps strong { color: var(--lp-fg); }

.lp-tv__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---------- Mis favoritos (listado) ---------- */

.lp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-block-start: 40px;
  font-family: var(--lp-font);
}

.lp-pager__info {
  color: var(--lp-fg-muted);
  font-size: 14px;
}

.lp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 64px 16px;
  text-align: center;
  font-family: var(--lp-font);
}

.lp-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  margin-block-end: 6px;
  border-radius: 50%;
  background: var(--lp-surface);
  color: var(--lp-accent);
}

.lp-empty__icon .lp-icon { inline-size: 28px; block-size: 28px; }

.lp-empty__title {
  margin: 0;
  color: var(--lp-fg);
  font-size: 20px;
  font-weight: 600;
}

.lp-empty__text {
  margin: 0 0 12px;
  color: var(--lp-fg-muted);
  font-size: 15px;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .lp-profiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    max-inline-size: 360px;
    margin-inline: auto;
  }

  .lp-profile__name {
    max-inline-size: 140px;
    white-space: normal;
    text-align: center;
  }

  .lp-edit__body {
    flex-direction: column;
    align-items: center;
  }

  .lp-edit__fields { inline-size: 100%; }

  .lp-edit__actions .lp-btn { flex: 1 1 100%; }

  .lp-edit__actions .lp-btn--ghost { margin-inline-start: 0; }

  .lp-account__actions .lp-btn { flex: 1 1 100%; }

  .lp-account__actions .lp-link { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-page *,
  .lp-usermenu * {
    transition: none !important;
  }
}