/* Layout para el tema NXP - solo se carga cuando theme()==='nxp' (ver login.blade.php). Vuelve
   a la estructura simple ORIGINAL (tarjeta + imagen de fondo a pantalla completa, sin recortarla
   en un panel chico con bordes propios - pedido explícito: "sería como el mismo original que
   tenemos y solo los íconos"), con dos agregados nomás: el rail de íconos flotando a la
   izquierda, y el brillo de borde en la tarjeta (ver .nxp-card-frame más abajo). Reusa las
   variables de public/assets/css/themes/nxp.css (--accent, --neon, --neon2, --card, --stroke,
   etc.) y las clases base .oasis-card/.oasis-title/.oasis-btn/.oasis-field de login-5.css. El
   panel derecho NO se dibuja con CSS: es una sola imagen (banner que se sube desde FAdmin, misma
   tabla `configs`/key "login_background" que ya usaba el layout simple) mostrada con el mismo
   carrusel JS existente (#login-bg, ver login-scripts.blade.php). */

body.nxp-layout{
  margin: 0;
  overflow-x: hidden;
  /* Recolorea las tarjetas de póster reusadas de oasis-catalog.css (.cat-card, .cat-badge-*,
     .cat-trailer-preview) al violeta de este tema - esas variables por default caen a un fallback
     cyan/azulado (ver :root en oasis-catalog.css) porque ese archivo solo lee el acento de marca
     bajo el selector body.oasis-catalog, que este body no tiene. */
  --cat-bg1: var(--bg1);
  --cat-bg2: var(--bg2);
  --cat-card: var(--card2);
  --cat-stroke: var(--stroke);
  --cat-stroke2: var(--stroke2);
  --cat-text: var(--text);
  --cat-muted: var(--muted);
  --cat-accent: var(--accent);
}

/* Fondo de TODA la página (rail, tarjeta y slider quedan arriba, no sobre negro plano) - se
   apenas oscurece (no se difumina casi nada) para que el patrón de la imagen se aprecie bien,
   solo lo justo para que el texto/tarjeta encima sigan legibles. position:fixed = no se mueve si
   el contenido hace scroll (ej. tarjeta con aviso largo). */
.nxp-page-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(.8);
}
.nxp-page-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg1);
  mix-blend-mode: multiply;
  opacity: .3;
}

.nxp-wrap{
  position: relative;
  z-index: 1; /* arriba de .nxp-page-bg */
  display: flex;
  align-items: stretch;
  height: 100vh;
}

/* Agrupa login+slider y los centra en el espacio que queda a la derecha del rail (el rail no
   entra acá, se queda siempre pegado al borde izquierdo). Antes el hueco sobrante quedaba TODO
   apilado a la derecha del slider - ahora se reparte parejo a los dos lados del grupo. */
.nxp-content{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* ===== Rail de categorías - ahora con su propio panel oscuro translúcido (antes quedaba
   "suelto" directo sobre la imagen de fondo) - mismo criterio visual que la tarjeta de login
   (--card2/--stroke). align-self:center = el panel se ajusta a su contenido (no estira a los
   100vh de la fila), quedando centrado con aire arriba/abajo, como en el ejemplo marcado. ===== */
.nxp-rail{
  flex: 0 0 90px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 26px 10px;
  background: var(--card2);
  border: 1px solid var(--stroke);
  border-radius: 26px;
  backdrop-filter: blur(6px);
  overflow: hidden; /* por si el texto de abajo mide más ancho que la columna */
}
.nxp-rail-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
  width: 100%;
  padding: 4px 2px;
}
.nxp-rail-item[data-preview]{ cursor: pointer; } /* ítems clickeables: Películas/Series */
.nxp-rail-item[data-preview]:focus-visible{ outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.nxp-rail-item-active{ color: var(--neon2); } /* marca cuál categoría está mostrando la grilla ahora */
.nxp-rail-item i{ font-size: 19px; }
.nxp-rail-item span{ font-size: 9px; letter-spacing: .02em; line-height: 1.2; }
.nxp-rail-item:hover{ color: var(--text); }
.nxp-rail-tag{
  font-style: italic;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  margin-top: 6px;
}

/* ===== Columna de login - misma estructura que el layout original (.user-login-5
   .login-container): centrada, con su propio scroll si el contenido no entra, SIN recortar la
   tarjeta a un alto fijo. ===== */
.nxp-login-col{
  flex: 0 0 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  overflow-y: auto;
}
.nxp-card.oasis-card{
  max-width: 640px !important;
  width: 100%;
  height: 720px; /* mismo alto fijo que .nxp-hero (el slider) - subido de 640 a 720 porque con
                     el aviso "CANALES UPDATES" + precios no entraba todo sin scrollear */
  /* SIN display:flex acá - con flex-direction:column y contenido más alto que 640px, flexbox
     COMPRIME cada hijo (el aviso, el cuadro de precios) para que quepan, en vez de solo activar
     el scroll - eso causaba el texto superpuesto/cortado. Como bloque normal, overflow-y:auto
     simplemente scrollea sin tocar el tamaño de nada adentro. */
  overflow-y: auto;
  padding: 34px !important;
  scrollbar-width: none;      /* Firefox - oculta la barra, el scroll sigue funcionando */
  -ms-overflow-style: none;   /* viejo Edge/IE */
}
.nxp-card.oasis-card::-webkit-scrollbar{ display: none; } /* Chrome/Edge/Safari */
.nxp-logo{
  max-width: 170px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 30%, transparent));
}
.nxp-subtitle{
  color: var(--muted);
  font-size: 13px;
  margin: -4px 0 16px;
}

/* ===== Brillo de borde de la tarjeta (referencia pasada por el usuario) - trazo de gradiente
   parcial (no la vuelta completa) sobre 2 esquinas, con blur para que "brille" en vez de verse
   como un borde sólido. Va en un wrapper propio (.nxp-card-frame), no en .oasis-card::before/
   ::after directamente, porque esos 2 pseudo-elementos ya los usa login-5.css para el efecto
   aurora/rayo interno de la tarjeta (ver login-5.css "LUCES PRO") - así no hay que pisar ese
   efecto, se suman los dos. */
.nxp-card-frame{
  position: relative;
  width: 100%;
  max-width: 640px;
}
.nxp-card-frame::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  padding: 1.5px;
  background: conic-gradient(from 220deg at 12% 4%,
    transparent 0deg,
    var(--neon2) 34deg,
    var(--accent) 78deg,
    transparent 150deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--neon2) 65%, transparent));
  opacity: .9;
  pointer-events: none;
  z-index: 4;
}
.nxp-prices{
  margin-top: 14px;
  background: var(--card2);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.nxp-prices-title{
  color: var(--neon2);
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.nxp-prices p{ margin: 2px 0; }

/* Inputs/botón un poco más grandes acá adentro (sensación "profesional" del mockup) - solo para
   nxp, no toca .oasis-field/.oasis-btn compartidos con oasis/gamba/oro/dual. */
.nxp-card .oasis-field .form-control{ height: 48px !important; font-size: 14px; }
.nxp-card .oasis-btn{ height: 48px !important; font-size: 14px; }
.nxp-card .form-group{ margin-bottom: 10px !important; }

/* Todo lo demás de la tarjeta un poco más compacto (título, aviso "CANALES UPDATES", footer) -
   esto es lo que evita que la tarjeta se vuelva más alta que el panel de imagen cuando hay un
   aviso largo cargado (contenido real, variable, no controlado por este diseño). */
.nxp-card .oasis-title{ margin-top: 6px !important; margin-bottom: 2px !important; font-size: 22px !important; }
.nxp-card .oasis-alert.alert-warning{ padding: 14px 16px !important; font-size: 11.5px; line-height: 1.45; }
.nxp-card .oasis-alert h4{ font-size: 12px; margin-bottom: 6px !important; color: var(--neon2) !important; }
/* El texto venía muy transparente (--notice-text, ~72% opacidad) y se perdía sobre el fondo
   oscuro - acá adentro se sube a un blanco casi sólido para que se lea bien. */
.nxp-card .oasis-alert.alert-warning p{ color: var(--text) !important; opacity: .95; }
.nxp-card .login-footer{ margin-top: 12px; }
.nxp-card .login-footer p{ margin: 8px 0 0; font-size: 11px; }

/* ===== Panel derecho: el slider, ahora más CHICO - un recuadro flotando sobre el fondo de toda
   la página (.nxp-page-bg, mismas imágenes de `configs`/"login_background"), no pegado a los
   bordes del viewport. */
.nxp-hero-wrap{
  flex: 0 0 auto; /* NO flex:1 - así no se estira a ocupar todo el espacio sobrante; el grupo
                      login+slider (.nxp-content, más arriba) es el que se centra como conjunto */
  display: flex;
  align-items: center;
  padding: 40px;
  min-width: 0;
}
.nxp-hero{
  width: 760px; /* fijo, no 100% - .nxp-hero-wrap ahora se achica a su contenido (flex:0 0 auto),
                    así que un ancho porcentual acá colapsaría a 0 */
  max-width: 100%;
  height: 720px; /* mismo valor fijo que .nxp-card - ver más arriba */
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 40px color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid var(--stroke);
}
.nxp-hero .login-bg{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Vidriera de pósters (click en "Películas" del rail) - se superpone AL slider, mismo
   tamaño exacto, ver login-scripts.blade.php para el fetch/toggle. Las tarjetas en sí (.cat-card
   adentro de .cat-grid) son las de oasis-catalog.css, sin tocar - acá solo el contenedor. ===== */
.nxp-hero-grid{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--cat-card);
  overflow-y: auto;
  padding: 14px;
  scrollbar-width: none;      /* Firefox - oculta la barra, el scroll sigue funcionando si
                                  hiciera falta con un catálogo real más grande */
  -ms-overflow-style: none;   /* viejo Edge/IE */
}
.nxp-hero-grid::-webkit-scrollbar{ display: none; } /* Chrome/Edge/Safari */
.nxp-hero-grid[hidden]{ display: none; }
.nxp-hero-grid .cat-grid{ gap: 10px; }
.nxp-hero-grid .cat-grid .cat-card{ flex-basis: 128px; max-width: 132px; } /* 5 x 132 + 4 gaps
                                       de 10 + padding 14x2 ≈ 728px, entra en los 760 del panel;
                                       el alto de 3 filas también entra en los 720px sin scroll */
/* Estado de carga/vacío (mientras llega el fetch, o si el catálogo no tiene pósters todavía) */
.nxp-hero-grid-msg{
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 40px 20px;
}

/* ===== "Deportes" - tarjetas de TEXTO genérico (sin logos/nombres de canales reales, ver
   login-scripts.blade.php LOCAL_CONTENT), layout de 2 columnas en vez de la grilla angosta de
   pósters. ===== */
#nxpHeroGridItems.nxp-hero-grid-local{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 12 tarjetas / 3 columnas = 4 filas parejas */
  gap: 12px;
  align-content: start;
  height: 100%;
}
.nxp-sport-tile{
  background: var(--cat-stroke2, var(--card2));
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
}
.nxp-sport-tile i{
  font-size: 26px;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}
.nxp-sport-tile-title{
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.nxp-sport-tile-subtitle{
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}
/* Botón "×" para volver al slider - flotando arriba a la derecha de la grilla */
.nxp-hero-grid-close{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--card2);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* ===== Responsive ===== */
@media (max-width: 1300px){
  .nxp-login-col{ flex-basis: 560px; }
  .nxp-hero{ width: 620px; }
}

@media (max-width: 991px){
  .nxp-wrap{ flex-direction: column; }
  .nxp-rail{ display: none; } /* oculto entero en mobile, igual que el template original -
                                  es decorativo, no navegación real, no vale la pena la fila
                                  horizontal en una pantalla chica */
  .nxp-hero-wrap{ display: none; } /* decorativo - se prioriza el login en pantallas chicas */
  .nxp-login-col{ flex-basis: auto; }
}