@import url(../base/variables.css);
@import url(../base/font.css);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--font-primary);
  background: var(--bg-black);/* radial-gradient(#2c2f42, #161824); */
  min-height: var(--vh-full, 100vh);
  overflow-x: hidden;
}
a {
  text-decoration: none;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: 26px;
  margin-right: 8px;
}

@media screen and (min-width: 480px) {
  .logo img {
    height: 28px;
    margin-right: 12px;
  }
}

@media screen and (min-width: 766px) {
  .logo img {
    height: 26px;
    margin-right: 16px;
  }
}

.name-tag {
  margin-left: 10px;
  display: none;
}
/* HOT siempre visible */
.name-tag.content-text {
  display: inline-block !important;
}

.name-user {
  display: none;
}

.user-flag {
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* Elements SVG - Responsive sizes (Iconos principales más grandes) */
.header svg {
  fill: var(--text-white);
  height: 28px;
  min-width: 28px;
  width: 28px;
}

/* Pantallas muy pequeñas (< 360px) */
@media screen and (max-width: 359px) {
  .header svg {
    height: 26px;
    min-width: 26px;
    width: 26px;
  }
  .nav-links ul li {
    margin-right: 0;
  }
  .nav-links a {
    padding: 3px;
  }
  /* Ocultar texto en pantallas muy pequeñas, mostrar solo iconos */
  .nav-links .name-tag:not(.content-text) {
    display: none;
  }
}

@media screen and (min-width: 360px) {
  .header svg {
    height: 30px;
    min-width: 30px;
    width: 30px;
  }
}

@media screen and (min-width: 480px) {
  .header svg {
    height: 36px;
    min-width: 36px;
    width: 36px;
  }
}

@media screen and (min-width: 766px) {
  .header svg {
    height: 32px;
    min-width: 32px;
    width: 32px;
  }
}

/* Iconos de navegación (emojis) - Responsive */
.nav-links .icons {
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 359px) {
  .nav-links .icons {
    font-size: 24px;
  }
}

@media screen and (min-width: 360px) {
  .nav-links .icons {
    font-size: 28px;
  }
}

@media screen and (min-width: 480px) {
  .nav-links .icons {
    font-size: 32px;
  }
}

@media screen and (min-width: 766px) {
  .nav-links .icons {
    font-size: 28px;
  }
}

/* =====================================================
   ENLACES CON EFECTOS - Tamaños reducidos y coordinados
   ===================================================== */

/* HOT (🍑) - Reducido */
.content-nav-link .content-icon {
  font-size: 22px;
}

@media screen and (min-width: 360px) {
  .content-nav-link .content-icon {
    font-size: 24px;
  }
}

@media screen and (min-width: 480px) {
  .content-nav-link .content-icon {
    font-size: 26px;
  }
}

@media screen and (min-width: 766px) {
  .content-nav-link .content-icon {
    font-size: 24px;
  }
}

/* Sorteos (🎲) - Reducido */
.sorteos-nav-link .sorteos-icon {
  font-size: 22px;
  margin-right: 2px;
}

@media screen and (min-width: 360px) {
  .sorteos-nav-link .sorteos-icon {
    font-size: 24px;
  }
}

@media screen and (min-width: 480px) {
  .sorteos-nav-link .sorteos-icon {
    font-size: 26px;
  }
}

@media screen and (min-width: 766px) {
  .sorteos-nav-link .sorteos-icon {
    font-size: 24px;
  }
}

/* Publicar (🔥) - Reducido */
.publish-nav-link .publish-icon {
  font-size: 22px;
}

@media screen and (min-width: 360px) {
  .publish-nav-link .publish-icon {
    font-size: 24px;
  }
}

@media screen and (min-width: 480px) {
  .publish-nav-link .publish-icon {
    font-size: 26px;
  }
}

@media screen and (min-width: 766px) {
  .publish-nav-link .publish-icon {
    font-size: 24px;
  }
}

/* Ajustes específicos para cada elemento del nav */
/* Espaciado uniforme entre elementos del nav */
.nav-links ul li:has(.publish-nav-link) {
  margin-left: 0;
}

@media screen and (min-width: 360px) {
  .nav-links ul li:has(.publish-nav-link) {
    margin-left: 0;
  }
}

@media screen and (min-width: 480px) {
  .nav-links ul li {
    margin-right: 2px;
  }
  .nav-links ul li:has(.publish-nav-link) {
    margin-left: 2px;
  }
}

@media screen and (min-width: 766px) {
  .nav-links ul li {
    margin-right: 8px;
  }
  .nav-links ul li:has(.publish-nav-link) {
    margin-left: 4px;
  }
}

/* Forzar visibilidad de todos los elementos en tablets */
@media screen and (max-width: 768px) and (min-width: 480px) {
  .nav-links ul {
    justify-content: flex-start;
  }
  .nav-links ul li {
    flex-shrink: 0;
  }
}

/* Logo más pequeño en móviles */
.logo img {
  height: 22px;
  margin-right: 4px;
}

@media screen and (min-width: 360px) {
  .logo img {
    height: 24px;
    margin-right: 6px;
  }
}

@media screen and (min-width: 480px) {
  .logo img {
    height: 28px;
    margin-right: 12px;
  }
}

@media screen and (min-width: 766px) {
  .logo img {
    height: 26px;
    margin-right: 16px;
  }
}
.options-overlay a span svg {
  width: 20px !important;
  height: 20px !important;
}
/* ------------------------------------------------------------------------------------------------------------- */
/* Header */
.header {
  display: flex;
  /* El área segura se suma al padding en vez de desplazar la barra: el fondo
     tiene que seguir llegando hasta el borde para que la barra de estado del
     teléfono no se vea sobre el contenido que pasa por debajo al hacer scroll.
     Los insets laterales cuentan para el móvil en horizontal, donde el recorte
     de la cámara se come una franja del lado. */
  padding: calc(4px + var(--safe-top, 0px)) calc(6px + var(--safe-right, 0px)) 4px
           calc(6px + var(--safe-left, 0px));
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  background: var(--bg-dark-soft);
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: calc(56px + var(--safe-top, 0px));
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

/* Notificaciones */
.notification-bell-container {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background 0.2s;
}

.notification-bell-container:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notification-bell {
  font-size: 20px;
  color: var(--text-white);
}

.notification-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ff4444;
  color: white;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-dark-soft);
}

/* Dropdown de notificaciones */
.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  background: var(--bg-dark-gray);
  border: 1px solid var(--border-gray);
  border-radius: 12px;
  margin-top: 10px;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  z-index: 1001;
  overflow: hidden;
}

.notification-dropdown--active {
  display: flex;
}

.notification-header {
  padding: 15px;
  border-bottom: 1px solid var(--border-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-header h3 {
  font-size: 16px;
  margin: 0;
  color: white;
}

.mark-all-read {
  min-height: var(--tap-min-compact, 40px);
  padding-inline: 8px;
  background: transparent;
  border: none;
  color: var(--primary-red);
  font-size: 12px;
  cursor: pointer;
}

/* Aviso de push bloqueado dentro de la campana — ver _checkPushBlockedNotice
   en header.js. Ámbar (advertencia), no rojo: es un estado del navegador que
   el usuario puede revertir, no un error. Duplicado a propósito de las mismas
   reglas en components/notifications.css, que no se carga en todas las
   páginas con campana (ver esa hoja para el porqué). */
.notif-push-alert {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 15px;
  background: rgba(255, 193, 7, 0.07);
  border-bottom: 1px solid var(--border-gray);
}

.notif-push-alert__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.notif-push-alert__ico {
  color: #ffc107;
  font-size: 15px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.notif-push-alert__msg {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #d7dbe6;
}

.notif-push-alert__btn {
  align-self: flex-start;
  background: rgba(255, 193, 7, 0.14);
  color: #ffe9a8;
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.notif-push-alert__btn:hover { background: rgba(255, 193, 7, 0.22); }
.notif-push-alert__btn:disabled { opacity: 0.6; cursor: default; }

.notif-push-alert__steps {
  margin: 0;
  padding-left: 18px;
}

.notif-push-alert__steps li {
  font-size: 12px;
  line-height: 1.5;
  color: #9aa0b4;
}

.notif-push-alert__steps b { color: #fff; }

.notification-list {
  max-height: 350px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
  text-decoration: none;
}

.notification-item:hover {
  background: rgba(255,255,255,0.03);
}

.notification-item--unread {
  background: rgba(255, 68, 68, 0.05);
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.1);
}

.notification-icon--high { background: rgba(255, 68, 68, 0.2); color: #ff4444; }
.notification-icon--medium { background: rgba(255, 187, 51, 0.2); color: #ffbb33; }
.notification-icon--low { background: rgba(0, 200, 81, 0.2); color: #00c851; }

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0 0 4px 0;
}

.notification-message {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.notification-time {
  font-size: 11px;
  color: #6b7280;
}

.notification-empty {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
}

.notification-empty i {
  font-size: 32px;
  margin-bottom: 10px;
}

.notification-footer {
  padding: 12px;
  text-align: center;
  border-top: 1px solid var(--border-gray);
}

.view-all-notifications {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
}

.view-all-notifications:hover {
  color: white;
}

/* ============================================
   Tonos por tipo de notificación en la campana.
   Duplicado a propósito de components/notifications.css: ese archivo solo se
   carga en notificaciones.html, pero la campana (con estas mismas clases,
   asignadas por getToneClass() en header.js) se renderiza en TODAS las
   páginas. Sin esto, el dropdown se veía sin colorear — "roto" — en
   cualquier página que no fuera el historial.
   ============================================ */

.notification-item[class*="--tone-"] {
  border-left: 3px solid transparent;
  position: relative;
}

.notification-item--tone-ok {
  border-left-color: #25d366;
  background: linear-gradient(100deg, rgba(37, 211, 102, 0.10), rgba(37, 211, 102, 0) 60%);
}
.notification-item--tone-ok .notification-icon {
  background: rgba(37, 211, 102, 0.14);
  color: #25d366;
  box-shadow: 0 0 14px rgba(37, 211, 102, 0.22);
}
.notification-item--tone-ok .notification-title { color: #eafff2; }

.notification-item--tone-closed {
  border-left-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
}
.notification-item--tone-closed .notification-icon {
  background: rgba(255, 255, 255, 0.06);
  color: #9aa0b4;
  box-shadow: none;
}
.notification-item--tone-closed .notification-title { color: #d7dbe6; }

.notification-item--tone-action {
  border-left-color: #e63950;
  background: linear-gradient(100deg, rgba(230, 57, 80, 0.12), rgba(230, 57, 80, 0) 60%);
}
.notification-item--tone-action .notification-icon {
  background: rgba(230, 57, 80, 0.16);
  color: #ff6b81;
  box-shadow: 0 0 14px rgba(230, 57, 80, 0.25);
}
.notification-item--tone-action .notification-title { color: #ffe9ec; }

.notification-item--unread[class*="--tone-"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
      transparent 20%,
      rgba(255, 255, 255, 0.07) 45%,
      transparent 70%);
  transform: translateX(-100%);
  animation: notif-sheen 1.6s cubic-bezier(0.25, 0.8, 0.3, 1) 0.25s 1;
}

@keyframes notif-sheen {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .notification-item--unread[class*="--tone-"]::after { animation: none; }
}

@media screen and (min-width: 360px) {
  .header {
    padding: 4px 8px;
  }
}

@media screen and (min-width: 480px) {
  .header {
    padding: 6px 14px;
    min-height: 60px;
  }
}

@media screen and (min-width: 766px) {
  .header {
    padding: 5px 12px;
    min-height: 56px;
  }
}
.nav-links li {
  list-style: none;
}
.nav-links {
  flex-grow: 1;
  overflow: visible;
}
.nav-links ul {
  display: flex;
  white-space: nowrap;
  align-items: center;
  justify-content: flex-start;
}
.nav-links ul li {
  margin-right: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Los enlaces de la barra superior medían 30x30 (el tamaño del icono más 2px
   de padding). El header ya reserva 56px de alto, así que llevar la zona
   sensible a 44px no mueve nada en vertical: el icono se queda donde está y
   solo crece el área que responde al dedo.

   El ancho sí compite: el mínimo se queda en 38px por debajo de 360px, donde
   conviven logo, inicio, búsqueda, HOT, el dado y el avatar. Medido, el precio
   de esto es que la pastilla de HOT pasa de 49px de ancho a 43 (320px) y 45
   (360px); su texto ocupa 33, así que sigue entrando holgado. El emoji montado
   sobre el texto de esa pastilla es de su diseño y ya era así antes. */
.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2px;
  min-height: var(--tap-min, 44px);
  min-width: 38px;
  -webkit-tap-highlight-color: transparent;
}

@media screen and (min-width: 360px) {
  .nav-links a {
    padding: 3px;
    min-width: var(--tap-min, 44px);
  }
}

@media screen and (min-width: 480px) {
  .nav-links a {
    padding: 4px;
  }
}

@media screen and (min-width: 766px) {
  .nav-links a {
    padding: 6px;
  }
}
.nav-links ul li a {
  font-size: 10px;
  margin-right: 0;
  display: flex;
  color: var(--text-white);
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 360px) {
  .nav-links ul li a {
    font-size: 11px;
    letter-spacing: 0.15em;
  }
}
.acort-links {
  display: grid;
}
.acort-menu {
  transition: 5s ease;
}
.nav-links p:after {
  bottom: -5px;
  /* bottom: 0; */
  content: "";
  display: block;
  border-radius: 10px;
  height: 2px;
  left: 0;
  position: relative;
  background: var(--text-white);
  transition: 0.2s ease 0s, left 0.2s ease 0s;
  width: 0;
  opacity: 0;
}
.nav-links a:hover p:after {
  opacity: 1;
  width: 100%;
  left: 0;
}
/* .nav-links p:hover:after {
  opacity: 1;
  width: 100%;
  left: 0;
} */
.acort-links {
  font-size: 12px;
  padding: 10px 15px;
  border: 1px solid var(--border-gray);
}
.acort-links a {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.acort-menu:hover .acort-links {
  position: fixed;
  z-index: 1;
  display: block;
  background: var(--bg-dark-gray);
}
.acort-name {
  margin-left: 10px;
}

/* Name Perfil */
@media screen and (min-width: 180px) {
  .name-tag {
    display: none;
  }
  /* HOT siempre visible */
  .name-tag.content-text {
    display: inline-block !important;
  }
  .hidden-p {
    display: none;
  }
  .acort-links {
    display: none;
  }
  .nav-links ul li {
    margin-right: 2px;
  }
  .acort-menu {
    display: initial;
  }
  .name-user {
    display: none;
  }
  .name-user:has(.user-flag) {
    display: inline;
  }
  .img-user {
    width: 28px !important;
    height: 28px !important;
  }
}

@media screen and (min-width: 480px) {
  .nav-links ul li {
    margin-right: 6px;
  }
  .user-flag {
    font-size: 24px;
  }
  .img-user {
    width: 32px !important;
    height: 32px !important;
  }
}

/* "Regístrate para recibir 🔔" — el reclamo del visitante sin sesión.
   Su umbral es 840px y NO los 766 del resto del bloque de abajo, aunque parezca
   que van juntos: a 766 se destapan a la vez las etiquetas del nav (INICIO,
   BUSQUEDA), este texto y una separación mayor entre elementos, pero el
   conjunto no cabe hasta bastante después. Medido, el texto necesita 230px para
   ir en una línea y por debajo de ~834 solo dispone de 201: envolvía a dos
   líneas y el header pasaba de 56px de alto a 76 — justo en 768, que es el iPad
   vertical. 840 deja margen sobre esa medida.

   `nowrap` es la garantía de que no vuelva a partirse: el umbral depende del
   ancho que ocupe este texto concreto, y basta con reescribirlo, traducirlo o
   que cargue otra fuente para que la cuenta cambie. Si algún día no cabe,
   preferimos que se recorte a que empuje el header a dos alturas. */
@media screen and (min-width: 840px) {
  .name-user {
    display: inline;
    white-space: nowrap;
  }
}

@media screen and (min-width: 766px) {
  .name-tag {
    display: inline;
  }
  .hidden-p {
    display: inline;
  }
  .nav-links ul li {
    margin-right: 16px;
  }
  .acort-menu {
    display: none;
  }
  .img-user {
    width: 30px !important;
    height: 30px !important;
  }
}
/* ------------------------------------------------------------------------------------------------------------- */
/* Profile */
.profile {
  position: relative;
  display: inline-flex;
  margin: 0;
  margin-left: auto;
  height: auto;
  transition: height 0.4s ease-in-out;
  cursor: pointer;
  z-index: 1000;
  align-items: center;
}
.profile:not([class*="ai-theme-"]):hover {
  display: inline-block;
}
.avatar {
  border-radius: 50%;
  height: 28px;
  width: 28px;
}

@media screen and (min-width: 480px) {
  .avatar {
    height: 32px;
    width: 32px;
  }
}

@media screen and (min-width: 766px) {
  .avatar {
    height: 30px;
    width: 30px;
  }
}
.profile-selected {
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.profile-selected .avatar {
  margin: 4px 8px;
}
.profile:not([class*="ai-theme-"]):hover p {
  display: inline;
}
.profile p {
  color: var(--text-white);
}
.profile:not([class*="ai-theme-"]):hover {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 90%;
  border: 1px solid var(--border-gray);
  border-radius: 0 0 8px 8px;
  background: var(--bg-dark-gray);
  height: auto;
  animation-name: viewprofiles;
  animation-duration: 0.3s;
}

@keyframes viewprofiles {
  0% {
    top: -50px;
    opacity: 0%;
  }
  50% {
    opacity: 55%;
  }
  100% {
    top: 0px;
    opacity: 100%;
  }
}
.profile:not([class*="ai-theme-"]):hover .profile-selected {
  border-bottom: 1px solid var(--border-gray);
}
/* Profile Nav */
.profile-nav {
  display: none;

  margin-top: 6px;
  margin-right: 10px;
  margin-left: 6px;
}
.profile:not([class*="ai-theme-"]):hover .profile-nav {
  display: block;
}.profile-nav-profiles p {
  color: var(--text-white);
  margin-left: 5px;
  font-size: 14px;
  align-items: center;
}
.header li {
  list-style: none;
}
.profile-nav-profiles li {
  display: flex;
  align-items: center;
}
.profile-nav-profiles img {
  margin-top: 15px;
  margin-left: 15px;
}
.profile-nav-options li {
  margin: 15px;
}
/* -------------  Menu sesion -------------*/
.register-btn {
  background-color: var(--primary-red);
  color: var(--text-white);
  padding: 6px 30px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.login-section {
  font-size: 16px;
  color: var(--text-gray-light);
  margin-bottom: 10px;
}

.login-section a {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-gold);
  text-decoration: none;
}

.login-section a:hover {
  text-decoration: underline;
}
/*-----------------------------------------*/

.plus-perfil {
  margin-top: 15px;
  margin-left: 15px;
  padding: 12px;
  border-radius: 50px;
  background: var(--border-gray);
}
.plus-perfil svg {
  display: block;
  margin: auto;
  justify-content: center;
}
.plus-perfil:hover {
  background: rgb(102, 102, 102);
}

/* Contenedor del enlace de sorteos - centrado verticalmente */
.nav-links ul li:has(.sorteos-nav-link) {
    display: flex;
    align-items: center;
    align-self: center;
    position: relative;
    margin-right: -4px;
}

.nav-links ul li:has(.sorteos-nav-link):hover {
    z-index: 100;
}

/* Reducir espacio entre sorteos y publicar */
.nav-links ul li:has(.sorteos-nav-link) + li {
    margin-left: -4px;
}

/* Ajustar padding de los 3 enlaces con efectos para estar coordinados.
   32px era el alto de la fila del header; estos tres viven además dentro del
   panel desplegable, donde no los alcanza el mínimo de `.nav-links a` y donde
   hay sitio de sobra en vertical. */
.content-nav-link {
    padding: 4px 6px !important;
    min-height: var(--tap-min-compact, 40px);
}


.sorteos-nav-link {
    padding: 4px 6px !important;
    min-height: var(--tap-min-compact, 40px);
}

.publish-nav-link {
    padding: 4px 6px !important;
    min-height: var(--tap-min-compact, 40px);
}

/* Sorteos Nav Link - MEGA DESTACADO con efecto de EUFORIA EXTREMA */
.sorteos-nav-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(0);
    margin: 0 !important;
    align-self: center;
    overflow: visible !important;
    isolation: isolate;
}

/* Fondo brillante - SOLO EN HOVER */
.sorteos-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ff0000 0%, #ff6b35 25%, #ffd700 50%, #ff6b35 75%, #ff0000 100%);
    background-size: 400% 400%;
    border-radius: 50px;
    z-index: -1;
    opacity: 0;
    transform: scale(0.8);
    animation: mega-glow 3s ease infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efecto de borde brillante - SOLO EN HOVER */
.sorteos-nav-link::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(45deg, #ff0000, #ffd700, #ff6b35, #ff0000, #ffd700, #ff6b35);
    background-size: 500% 500%;
    border-radius: 54px;
    z-index: -2;
    opacity: 0;
    transform: scale(0.9);
    animation: mega-border-shine 2s linear infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Estado normal - LLAMATIVO SIN GLOW DE FONDO */
.sorteos-nav-link .sorteos-icon {
    font-size: 24px;
    margin-right: 3px;
    animation: mega-dice-bounce 0.6s ease-in-out infinite;
    filter: none;
    transition: all 0.3s;
    line-height: 1;
}

.sorteos-nav-link .sorteos-text {
    background: linear-gradient(90deg, #ff0000, #ffd700, #ff6b35, #ffd700, #ff0000);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: mega-text-shine 1.5s linear infinite;
    position: relative;
    line-height: 1;
    margin: 0;
}

/* Texto de HOT (content-text) - Coordinado con sorteos */
.content-nav-link .content-text {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* Texto de Publicar - Coordinado */
.publish-nav-link .publish-text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* HOVER - EFECTO DE TRIUNFO Y CELEBRACION DE GANADOR */
.sorteos-nav-link:hover {
    transform: translateY(-5px) scale(1.2);
}

/* Activar fondo de celebracion con expansion */
.sorteos-nav-link:hover::before {
    opacity: 0.9;
    transform: scale(1);
    background: linear-gradient(135deg, #ffd700 0%, #ff6b35 20%, #ff0000 40%, #ff6b35 60%, #ffd700 80%, #ff0000 100%);
    background-size: 500% 500%;
    animation: celebration-bg 0.5s ease infinite;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.8), 0 0 100px rgba(255, 0, 0, 0.6);
}

/* Activar borde brillante con expansion */
.sorteos-nav-link:hover::after {
    opacity: 1;
    transform: scale(1);
    inset: -8px;
    background: conic-gradient(from 0deg, #ff0000, #ffd700, #ff6b35, #ff0000, #ffd700, #ff6b35, #ff0000);
    animation: celebration-spin 0.8s linear infinite;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 0, 0, 0.5);
}

/* Efecto de rotacion intensa del dado con glow */
.sorteos-nav-link:hover .sorteos-icon {
    animation: winner-spin-celebration 0.4s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) 
            drop-shadow(0 0 60px rgba(255, 0, 0, 0.9)) 
            drop-shadow(0 0 90px rgba(255, 107, 53, 0.8));
}

/* Texto brillante tipo jackpot */
.sorteos-nav-link:hover .sorteos-text {
    background: linear-gradient(90deg, #fff, #ffd700, #fff, #ff6b35, #ffd700, #fff);
    background-size: 400% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: winner-text-shine 0.4s linear infinite;
}

/* ============================================
   EFECTOS DE CELEBRACION AL HOVER
   ============================================ */

/* Contenedor de partículas de confeti */
.sorteos-nav-link {
    overflow: visible;
}

/* Crear partículas de confeti usando múltiples pseudo-elementos */
.sorteos-nav-link:hover .confetti-particle,
.sorteos-nav-link:hover::before,
.sorteos-nav-link:hover::after {
    animation-play-state: running;
}

/* Efecto de explosión de luz alrededor del enlace */
.sorteos-nav-link:hover .celebration-burst {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, rgba(255,0,0,0.2) 30%, transparent 70%);
    border-radius: 50%;
    animation: burst-pulse 0.6s ease-in-out infinite;
    pointer-events: none;
    z-index: -3;
}

@keyframes burst-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.3); 
        opacity: 1;
    }
}

/* Destellos de luz alrededor */
.sorteos-nav-link .sparkle-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}

.sorteos-nav-link:hover .sparkle-effect::before,
.sorteos-nav-link:hover .sparkle-effect::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd700 0%, transparent 70%);
    animation: sparkle-float 1s ease-in-out infinite;
}

.sorteos-nav-link:hover .sparkle-effect::before {
    width: 20px;
    height: 20px;
    top: -10px;
    left: -5px;
    animation-delay: 0s;
}

.sorteos-nav-link:hover .sparkle-effect::after {
    width: 15px;
    height: 15px;
    bottom: -5px;
    right: -5px;
    animation-delay: 0.5s;
}

@keyframes sparkle-float {
    0%, 100% { 
        transform: scale(0) rotate(0deg); 
        opacity: 0;
    }
    50% { 
        transform: scale(1.5) rotate(180deg); 
        opacity: 1;
    }
}

/* Rayos de luz estilo victoria */
.sorteos-nav-link .victory-rays {
    position: absolute;
    inset: -50px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.3) 10deg,
        transparent 20deg,
        rgba(255, 0, 0, 0.3) 30deg,
        transparent 40deg,
        rgba(255, 215, 0, 0.3) 50deg,
        transparent 60deg,
        rgba(255, 0, 0, 0.3) 70deg,
        transparent 80deg,
        rgba(255, 215, 0, 0.3) 90deg,
        transparent 100deg,
        rgba(255, 0, 0, 0.3) 110deg,
        transparent 120deg,
        rgba(255, 215, 0, 0.3) 130deg,
        transparent 140deg,
        rgba(255, 0, 0, 0.3) 150deg,
        transparent 160deg,
        rgba(255, 215, 0, 0.3) 170deg,
        transparent 180deg,
        rgba(255, 0, 0, 0.3) 190deg,
        transparent 200deg,
        rgba(255, 215, 0, 0.3) 210deg,
        transparent 220deg,
        rgba(255, 0, 0, 0.3) 230deg,
        transparent 240deg,
        rgba(255, 215, 0, 0.3) 250deg,
        transparent 260deg,
        rgba(255, 0, 0, 0.3) 270deg,
        transparent 280deg,
        rgba(255, 215, 0, 0.3) 290deg,
        transparent 300deg,
        rgba(255, 0, 0, 0.3) 310deg,
        transparent 320deg,
        rgba(255, 215, 0, 0.3) 330deg,
        transparent 340deg,
        rgba(255, 0, 0, 0.3) 350deg,
        transparent 360deg
    );
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: -4;
}

.sorteos-nav-link:hover .victory-rays {
    opacity: 1;
    animation: rays-spin 4s linear infinite;
}

@keyframes rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Efecto de trofeo/flor de lis que aparece */
.sorteos-nav-link .trophy-appear {
    position: absolute;
    font-size: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    z-index: -1;
}

.sorteos-nav-link:hover .trophy-appear {
    font-size: 3rem;
    opacity: 0.3;
    animation: trophy-pop 0.6s ease-out;
}

@keyframes trophy-pop {
    0% { 
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 0.3;
    }
}

/* Partículas de confeti animadas */
.sorteos-nav-link .confetti-burst {
    position: absolute;
    inset: -30px;
    pointer-events: none;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.3s;
}

.sorteos-nav-link:hover .confetti-burst {
    opacity: 1;
}

.sorteos-nav-link .confetti-burst::before,
.sorteos-nav-link .confetti-burst::after {
    content: '🎉';
    position: absolute;
    font-size: 1.5rem;
    animation: confetti-pop 0.8s ease-out infinite;
}

.sorteos-nav-link .confetti-burst::before {
    top: -10px;
    left: 10%;
    animation-delay: 0s;
}

.sorteos-nav-link .confetti-burst::after {
    top: -5px;
    right: 10%;
    animation-delay: 0.4s;
}

@keyframes confetti-pop {
    0% { 
        transform: translateY(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
        transform: translateY(-20px) scale(1) rotate(45deg);
    }
    100% { 
        transform: translateY(-50px) scale(0.5) rotate(90deg);
        opacity: 0;
    }
}

/* Onda expansiva tipo fuego artificial */
.sorteos-nav-link .firework-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -5;
}

.sorteos-nav-link:hover .firework-ring::before,
.sorteos-nav-link:hover .firework-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid transparent;
    animation: firework-expand 1.5s ease-out infinite;
}

.sorteos-nav-link:hover .firework-ring::before {
    border-color: rgba(255, 215, 0, 0.6);
    animation-delay: 0s;
}

.sorteos-nav-link:hover .firework-ring::after {
    border-color: rgba(255, 0, 0, 0.4);
    animation-delay: 0.5s;
}

@keyframes firework-expand {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

/* Efecto de brillo deslumbrante */
.sorteos-nav-link:hover .dazzle-effect {
    position: absolute;
    inset: -10px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 215, 0, 0.5) 20%,
        rgba(255, 0, 0, 0.3) 40%,
        transparent 70%
    );
    border-radius: 50px;
    animation: dazzle-pulse 0.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

@keyframes dazzle-pulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Animaciones */

/* Normal - rebote suave sin glow */
@keyframes mega-dice-bounce {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% { 
        transform: translateY(-4px) rotate(-10deg);
    }
    50% { 
        transform: translateY(0) rotate(0deg);
    }
    75% { 
        transform: translateY(-2px) rotate(8deg);
    }
}

/* Hover - Celebracion de ganador con rotacion intensa */
@keyframes winner-spin-celebration {
    0% { 
        transform: rotate(0deg) scale(1.3);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.9));
    }
    10% { 
        transform: rotate(36deg) scale(1.5);
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1)) drop-shadow(0 0 100px rgba(255, 0, 0, 1));
    }
    20% { 
        transform: rotate(72deg) scale(1.3);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.9));
    }
    30% { 
        transform: rotate(108deg) scale(1.5);
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1)) drop-shadow(0 0 100px rgba(255, 0, 0, 1));
    }
    40% { 
        transform: rotate(144deg) scale(1.3);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.9));
    }
    50% { 
        transform: rotate(180deg) scale(1.5);
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1)) drop-shadow(0 0 100px rgba(255, 0, 0, 1));
    }
    60% { 
        transform: rotate(216deg) scale(1.3);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.9));
    }
    70% { 
        transform: rotate(252deg) scale(1.5);
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1)) drop-shadow(0 0 100px rgba(255, 0, 0, 1));
    }
    80% { 
        transform: rotate(288deg) scale(1.3);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.9));
    }
    90% { 
        transform: rotate(324deg) scale(1.5);
        filter: drop-shadow(0 0 50px rgba(255, 215, 0, 1)) drop-shadow(0 0 100px rgba(255, 0, 0, 1));
    }
    100% { 
        transform: rotate(360deg) scale(1.3);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.9));
    }
}

/* Fondo de celebracion - efecto jackpot */
@keyframes celebration-bg {
    0% { 
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }
    25% { 
        background-position: 50% 50%;
        filter: brightness(1.3) saturate(1.2);
    }
    50% { 
        background-position: 100% 50%;
        filter: brightness(1.5) saturate(1.4);
    }
    75% { 
        background-position: 50% 50%;
        filter: brightness(1.3) saturate(1.2);
    }
    100% { 
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }
}

/* Borde giratorio tipo trofeo */
@keyframes celebration-spin {
    0% { 
        transform: rotate(0deg);
        filter: hue-rotate(0deg) brightness(1);
    }
    50% { 
        filter: hue-rotate(30deg) brightness(1.2);
    }
    100% { 
        transform: rotate(360deg);
        filter: hue-rotate(0deg) brightness(1);
    }
}

/* Texto brillante de ganador */
@keyframes winner-text-shine {
    0% { background-position: 0% center; }
    50% { background-position: 200% center; }
    100% { background-position: 400% center; }
}

@keyframes mega-text-shine {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

@keyframes mega-glow {
    0%, 100% { 
        background-position: 0% 50%;
    }
    50% { 
        background-position: 100% 50%;
    }
}

@keyframes mega-border-shine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Efecto de "nuevo" o "hot" badge */
.sorteos-nav-link .sorteos-text::after {
    content: 'HOT';
    position: absolute;
    top: -16px;
    right: -28px;
    background: linear-gradient(135deg, #ff0000, #ff6b35);
    color: white;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 15px;
    animation: hot-badge-idle 1.5s ease-in-out infinite;
    -webkit-text-fill-color: white;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: all 0.3s;
}

/* HOVER - Badge se activa con celebracion */
.sorteos-nav-link:hover .sorteos-text::after {
    animation: hot-badge-celebration 0.4s ease-in-out infinite;
    background: linear-gradient(135deg, #ffd700, #ff0000);
    transform: scale(1.3);
    box-shadow: 0 6px 25px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 215, 0, 0.8);
}

@keyframes hot-badge-idle {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 0, 0, 0.5);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 4px 15px rgba(255, 0, 0, 0.7);
    }
}

@keyframes hot-badge-celebration {
    0%, 100% { 
        transform: scale(1.3) rotate(-5deg);
        box-shadow: 0 6px 25px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 215, 0, 0.8);
    }
    50% { 
        transform: scale(1.5) rotate(5deg);
        box-shadow: 0 8px 35px rgba(255, 0, 0, 1), 0 0 50px rgba(255, 215, 0, 1);
    }
}

/* Responsive - Enlaces con efectos (coordinados) */
@media screen and (max-width: 359px) {
    .content-nav-link,
    .sorteos-nav-link,
    .publish-nav-link {
        padding: 4px 5px !important;
        min-height: 30px;
    }
    .content-nav-link .content-icon,
    .sorteos-nav-link .sorteos-icon,
    .publish-nav-link .publish-icon {
        font-size: 20px;
    }
    .sorteos-nav-link .sorteos-icon {
        margin-right: 0;
    }
    .sorteos-nav-link .sorteos-text {
        display: none !important;
    }
}

@media screen and (min-width: 480px) {
    .content-nav-link,
    .sorteos-nav-link,
    .publish-nav-link {
        padding: 6px 8px !important;
        min-height: 36px;
    }
    .content-nav-link .content-icon,
    .sorteos-nav-link .sorteos-icon,
    .publish-nav-link .publish-icon {
        font-size: 24px;
    }
    .sorteos-nav-link .sorteos-icon {
        margin-right: 3px;
    }
    .sorteos-nav-link .sorteos-text {
        font-size: 13px;
        letter-spacing: 0.5px;
    }
}

@media screen and (min-width: 766px) {
    .content-nav-link,
    .sorteos-nav-link,
    .publish-nav-link {
        padding: 6px 10px !important;
        min-height: 38px;
    }
    .content-nav-link .content-icon,
    .sorteos-nav-link .sorteos-icon,
    .publish-nav-link .publish-icon {
        font-size: 26px;
    }
    .sorteos-nav-link .sorteos-icon {
        margin-right: 4px;
    }
    .sorteos-nav-link .sorteos-text {
        font-size: 14px;
    }
}

/* Sorteo Modal Styles */
.sorteo-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    padding: 20px;
}

.sorteo-modal-overlay.active {
    display: flex;
    animation: sorteoModalFadeIn 0.3s ease;
}

@keyframes sorteoModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sorteo-modal-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 0 0 2px rgba(255, 0, 0, 0.4),
        0 0 0 8px rgba(255, 0, 0, 0.1),
        0 25px 80px rgba(0, 0, 0, 0.95),
        0 0 100px rgba(255, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: sorteoModalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 12px;
}

@keyframes sorteoModalSlideIn {
    from { 
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sorteo-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 20px rgba(255, 0, 0, 0.6),
        0 0 30px rgba(255, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    pointer-events: auto;
}

.sorteo-modal-close:hover {
    background: linear-gradient(135deg, #ff3333 0%, #ff0000 100%);
    transform: scale(1.15);
    box-shadow: 
        0 6px 30px rgba(255, 0, 0, 0.7),
        0 0 50px rgba(255, 0, 0, 0.5);
}

.sorteo-modal-close svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 2.5;
}

.sorteo-modal-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    border-radius: 12px;
    box-shadow: 
        inset 0 0 80px rgba(255, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* Asegurar que el iframe ocupe todo el espacio */
.sorteo-modal-content iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border: none !important;
    display: block !important;
}

/* Borde brillante animado alrededor del contenido */
.sorteo-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff0000, #ffd700, #ff0000, transparent);
    background-size: 200% 100%;
    animation: modal-top-glow 2s linear infinite;
    z-index: 10;
}

@keyframes modal-top-glow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes dice-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-15deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(15deg); }
}

/* El contenido del sorteo se carga en un iframe */

/* Scrollbar personalizada para el modal */
.sorteo-modal-content {
    scrollbar-width: thin;
    scrollbar-color: #ff0000 #1a1a1a;
}

@supports selector(::-webkit-scrollbar) {
    .sorteo-modal-content::-webkit-scrollbar { width: 8px; }
    .sorteo-modal-content::-webkit-scrollbar-track { background: #1a1a1a; }
    .sorteo-modal-content::-webkit-scrollbar-thumb { background: #ff0000; border-radius: 4px; }
}

/* Loading y Error states */
.sorteo-loading,
.sorteo-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: white;
    font-size: 1.2rem;
    text-align: center;
    padding: 3rem;
    background: linear-gradient(145deg, #0a0a0a 0%, #000 100%);
}

.sorteo-error a {
    color: #ff0000;
    text-decoration: underline;
    margin-top: 1rem;
}

.sorteo-link-direct {
    display: inline-block;
    margin-top: 1rem;
    padding: 14px 32px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 25px rgba(255, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.sorteo-link-direct:hover {
    background: linear-gradient(135deg, #ff3333 0%, #ff0000 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 35px rgba(255, 0, 0, 0.6);
    transform: scale(1.05);
}

/* Animación de carga */
.sorteo-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid #333;
    border-top-color: #ff0000;
    border-radius: 50%;
    margin-top: 1rem;
    animation: sorteoSpin 1s linear infinite;
}

@keyframes sorteoSpin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .sorteo-modal-overlay {
        padding: 10px;
        align-items: center;
    }
    
    .sorteo-modal-container {
        height: 85vh;
        max-height: 700px;
        border-radius: 16px;
        padding: 8px;
        width: 100%;
        max-width: 600px;
    }
    
    .sorteo-modal-close {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
        z-index: 10002;
    }
    
    .sorteo-modal-close svg {
        width: 20px;
        height: 20px;
    }
    
    .sorteo-modal-content {
        border-radius: 10px;
    }
    
    .sorteo-loading,
    .sorteo-error {
        padding: 2rem;
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .sorteo-modal-overlay {
        padding: 8px;
        align-items: center;
    }
    
    .sorteo-modal-container {
        height: 80vh;
        max-height: 600px;
        max-width: 100%;
        width: 100%;
        border-radius: 12px;
        padding: 6px;
    }
    
    .sorteo-modal-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        z-index: 10002;
    }
    
    .sorteo-modal-content {
        border-radius: 8px;
    }
}

@media (max-width: 320px) {
    .sorteo-modal-overlay {
        padding: 6px;
    }
    
    .sorteo-modal-container {
        height: 85vh;
        border-radius: 10px;
        padding: 4px;
    }
    
    .sorteo-modal-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
    }
}

/* =====================================================
   NAV TOGGLE — sorteos + publicar
   ===================================================== */

/* Flecha: oculta por defecto, visible al abrir */
.net-arrow {
    position: absolute;
    color: rgba(255, 200, 70, 0.95);
    opacity: 0;
    transform: rotate(0deg) scale(0.6);
    transition: opacity 0.2s ease, transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Abierto: ocultar emojis, mostrar flecha apuntando arriba */
.nav-extra-toggle.net--open .nav-extra-toggle__emojis {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.nav-extra-toggle.net--open .net-arrow {
    opacity: 1;
    transform: rotate(180deg) scale(1);
}

/* Ocultar badge HOT dentro del panel expandido */
.nav-extra-panel .sorteos-nav-link .sorteos-text::after {
    display: none;
}

/* Panel desplegable */
.nav-extra-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg-dark-soft);
    border-top: 1px solid rgba(255, 90, 30, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    /* Estado cerrado */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
        max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 999;
}

/* Estado abierto */
.nav-extra-panel--open {
    max-height: 120px;
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-extra-panel__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 10px 16px 14px;
}

/* ⚠️ Con la entrada "instalar" el panel pasa a tener TRES elementos y dejan de
   caber en una fila: medido, los tres suman 364px de contenido, así que con los
   32px de separación originales el primero se salía por la izquierda (x=-18 a
   360px, x=-3 a 390px) — `nowrap` no envuelve, desborda, y `justify-content:
   center` reparte el desborde a los dos lados. Se aprieta la separación y se
   PERMITE envolver como red de seguridad: en los anchos donde ni así caben, la
   tercera cae a una segunda fila en vez de salirse de la pantalla.
   ⚠️ El corte es 480px y no 400: con la separación original hacen falta
   364 + 2x32 = 428px, así que a 412px (un Pixel) el primero seguía saliéndose
   por la izquierda (x=-8). El umbral tiene que cubrir el ANCHO QUE EL CONTENIDO
   NECESITA, no el tamaño de un teléfono concreto.
   ⚠️ Y con la envoltura hay que subir el techo del panel abierto: son 120px
   pensados para una sola fila y la segunda quedaría cortada bajo su
   `overflow: hidden`, sin ningún síntoma salvo un elemento que no se puede
   pulsar. Dos filas de 40px más el padding caben en 160. */
@media (max-width: 480px) {
    .nav-extra-panel__items {
        gap: 10px;
        padding: 10px 8px 14px;
        flex-wrap: wrap;
    }
    .nav-extra-panel--open { max-height: 180px; }
}

/* Instalar app — el camino fijo que también existe SIN sesión.
   Sobrio a propósito: los otros dos gritan (fuego, confeti) porque venden algo;
   este es utilidad, y compitiendo en brillo solo restaría atención a los dos. */
.install-nav-link {
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 6px !important;
    min-height: var(--tap-min-compact, 40px);
    border-radius: 50px;
    color: #d5d8e2;
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease;
}
.install-nav-link:hover,
.install-nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); }
.install-nav-link .install-icon { display: inline-flex; align-items: center; }
.install-nav-link .install-text { margin: 0; }
/* ⚠️ `.header svg { fill: var(--text-white) }` gana a un atributo de presentación
   `fill="none"` del propio SVG (CSS siempre gana), así que sin esto el icono de
   contorno sale relleno de blanco: una mancha, no un dibujo. */
.header .install-nav-link .install-icon svg { fill: none; }

/* ============================================================
   Botón "instalar" de la BARRA del header
   ============================================================
   El relevo del banner. La invitación de abajo sale UNA vez al día y luego
   calla —para que descartarla por error no cueste la instalación—, así que a
   partir de ahí este botón es el único aviso visible: el del menú del avatar no
   existe sin sesión y el del panel de extras está plegado tras un toque.

   Late a propósito, y por eso puede permitírselo: **solo se pinta cuando de
   verdad se puede instalar**. Quien ya tiene la app, y quien usa un navegador
   que no instala, no ve nada aquí — no es un adorno permanente compitiendo con
   el resto del header, es un aviso que se apaga solo cuando deja de aplicar.

   El movimiento es suave e intermitente a propósito: tres segundos y medio de
   ciclo, con el guiño de la flecha ocupando solo un 15% de él. Un latido rápido
   se lee como una alerta y se aprende a ignorar; este tiene que seguir ahí
   dentro de una semana sin cansar. */
.nav-install-li {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 2px;
}

.nav-install-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(230, 57, 80, .5);
    background: rgba(230, 57, 80, .1);
    color: #ff9aa8;
    cursor: pointer;
    outline: none;
    /* Visible: el halo vive fuera de la caja del botón. */
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, background-color .2s ease,
                border-color .2s ease, color .2s ease;
    animation: pb-navinstall-pulse 3.4s ease-in-out infinite;
    /* ⚠️ Contexto de apilamiento PROPIO, y no es cosmético: el halo va con
       `z-index: -1` para quedar detrás del icono, y sin este contexto ese -1
       sube al del `.header` — o sea, **detrás del fondo del header**, donde no
       se ve absolutamente nada. El botón latía sin halo y no había ningún
       síntoma salvo que se notaba menos de lo previsto. */
    z-index: 0;
}

/* Área táctil: 34x34 → 34x44, extendida SOLO en vertical, igual que el toggle
   de extras. En horizontal no hay hueco que repartir —los vecinos están a 2px—
   y un pseudo más ancho haría que pulsar aquí activara el botón de al lado. */
/* ⚠️ SIN z-index negativo, al revés que el pseudo del toggle de extras. Con -1
   el área táctil se pinta detrás del fondo del header y `elementFromPoint`
   devuelve el header: el dedo a 21px del centro NO acertaba el botón, aunque la
   caja estuviera declarada. Medido — es lo que destapó el bloque [J]. Encima del
   icono no molesta: es transparente y pertenece al mismo botón, así que
   `elementFromPoint` sigue devolviendo el botón. */
.nav-install-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    translate: 0 -50%;
    height: var(--tap-min, 44px);
}

.nav-install-halo {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 57, 80, .3) 0%, transparent 68%);
    animation: pb-navinstall-halo 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* ⚠️ Doble clase para ganarle a `.header svg`, que fija fill blanco y 28px de
   lado. Con un solo nivel de especificidad el icono salía relleno y más grande
   que el círculo que lo contiene. */
.header .nav-install-ico {
    width: 19px;
    min-width: 19px;
    height: 19px;
    fill: none;
}

.nav-install-arrow {
    animation: pb-navinstall-nudge 3.4s ease-in-out infinite;
}

.nav-install-btn:hover,
.nav-install-btn:focus-visible {
    transform: scale(1.1);
    background: rgba(230, 57, 80, .2);
    border-color: rgba(255, 130, 150, .95);
    color: #fff;
    box-shadow: 0 0 18px rgba(230, 57, 80, .45);
    /* Con el puntero encima el latido sobra: ya tiene la atención. */
    animation-play-state: paused;
}
.nav-install-btn:hover .nav-install-halo,
.nav-install-btn:focus-visible .nav-install-halo,
.nav-install-btn:hover .nav-install-arrow,
.nav-install-btn:focus-visible .nav-install-arrow { animation-play-state: paused; }

.nav-install-btn:active { transform: scale(.94); }

@keyframes pb-navinstall-pulse {
    0%, 100% { border-color: rgba(230, 57, 80, .45); box-shadow: 0 0 6px rgba(230, 57, 80, .16); }
    50%      { border-color: rgba(255, 125, 145, .85); box-shadow: 0 0 15px rgba(230, 57, 80, .42); }
}

@keyframes pb-navinstall-halo {
    0%, 100% { opacity: .3; transform: scale(.86); }
    50%      { opacity: .95; transform: scale(1.14); }
}

/* El guiño: la flecha cae un pelo dentro del teléfono, que es el gesto que el
   botón representa. Va al final del ciclo y dura poco — un rebote continuo
   sería un juguete, no una invitación.
   ⚠️ Las unidades son las del viewBox (24), no píxeles de pantalla: el icono se
   pinta a 19px, así que estos 2 valen ~1,6px reales. Escribirlo en px haría que
   el recorrido cambiara con cada tamaño del icono. */
@keyframes pb-navinstall-nudge {
    0%, 62%, 100% { transform: translateY(0); }
    72%           { transform: translateY(2px); }
    82%           { transform: translateY(0); }
}

/* A 320-359px conviven logo, inicio, búsqueda, HOT, esto, el toggle y el
   avatar: el círculo baja a 30px para no empujar a nadie fuera de pantalla.
   El área táctil vertical no cambia. */
@media screen and (max-width: 359px) {
    .nav-install-btn { width: 30px; height: 30px; }
    .header .nav-install-ico { width: 17px; min-width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-install-btn,
    .nav-install-halo,
    .nav-install-arrow { animation: none; }
    /* Sin latido sigue teniendo que destacar: se deja el halo encendido a
       media luz en vez de apagarlo, que lo dejaría indistinguible del resto. */
    .nav-install-halo { opacity: .6; }
}

/* Contenedor del toggle en el nav */
.nav-extra-toggle-li {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 2px;
}

/* Botón toggle */
.nav-extra-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 32px;
    /* La píldora mide 32px de alto a propósito (comparte fila con los iconos
       del header). El área táctil se extiende con el pseudo-elemento de más
       abajo en vez de agrandarla, para no romper la proporción del óvalo ni
       el encaje de los emojis. */
    border-radius: 16px;
    border: 1.5px solid rgba(255, 100, 50, 0.45);
    background: rgba(255, 70, 30, 0.07);
    cursor: pointer;
    padding: 0;
    outline: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: visible;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    animation: net-glow-pulse 3s ease-in-out infinite;
}

@keyframes net-glow-pulse {
    0%, 100% {
        border-color: rgba(255, 80, 30, 0.45);
        box-shadow: 0 0 7px rgba(255, 80, 30, 0.18);
    }
    45% {
        border-color: rgba(255, 180, 30, 0.7);
        box-shadow: 0 0 14px rgba(255, 170, 30, 0.3);
    }
    75% {
        border-color: rgba(255, 50, 80, 0.55);
        box-shadow: 0 0 10px rgba(255, 50, 80, 0.22);
    }
}

/* Wrapper superpuesto: emojis y flecha ocupan el mismo espacio */
.net-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 22px;
    z-index: 1;
}

.nav-extra-toggle__emojis {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
    transition: opacity 0.2s ease, transform 0.22s ease;
}

.net-emoji {
    font-size: 12px;
    filter: saturate(0.75) brightness(0.88);
    transition: filter 0.2s ease;
}

/* Halo de luz detrás del botón */
.net-glow {
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    background: radial-gradient(ellipse, rgba(255, 120, 30, 0.12) 0%, transparent 70%);
    animation: net-halo 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes net-halo {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* Hover */
/* Área táctil del toggle: 58x32 → 58x44. Va con z-index negativo para quedar
   por debajo de los emojis y la flecha, que son hijos posicionados. */
.nav-extra-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    translate: 0 -50%;
    height: var(--tap-min, 44px);
    z-index: -1;
}

.nav-extra-toggle:hover {
    transform: scale(1.1);
    background: rgba(255, 80, 30, 0.14);
    border-color: rgba(255, 150, 40, 0.8);
    box-shadow: 0 0 20px rgba(255, 110, 30, 0.38);
    animation-play-state: paused;
}

.nav-extra-toggle:hover .net-emoji {
    filter: saturate(1.3) brightness(1.1);
}

/* Estado abierto */
.nav-extra-toggle.net--open {
    background: rgba(255, 80, 30, 0.15);
    border-color: rgba(255, 140, 40, 0.85);
    box-shadow: 0 0 18px rgba(255, 110, 30, 0.35);
    animation-play-state: paused;
}

/* ============================================
   FIX FOUC — fallback crítico mientras ai-avatar.css carga
   ============================================
   ai-avatar.css se carga de forma no bloqueante (media="print" ->
   onload="this.media='all'") para no retrasar el first paint. Pero
   .ai-user-menu (el dropdown de usuario) depende ENTERAMENTE de esa
   hoja para estar oculto/posicionado — sin ella, se renderiza como
   bloque visible normal, incluyendo los iconos de rol de 512x512px
   sin comprimir, hasta que el CSS real aplica. header.css sí es
   síncrono en todas las páginas que usan el header, así que estas
   reglas mínimas (solo el estado oculto y el tamaño base del avatar)
   viven aquí como red de seguridad; ai-avatar.css las sobreescribe
   por completo en cuanto termina de cargar (llega después en el
   cascade). El resto de la hoja (animaciones, glow, modales) sigue
   async sin cambios. */
.ai-user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    max-width: calc(100vw - 20px);
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ...y el estado ABIERTO. Sin esta regla, pulsar el avatar durante los
   milisegundos en que ai-avatar.css aún no aplica marcaba el menú como abierto
   pero invisible: el siguiente toque lo cerraba (es un toggle), así que había
   que tocar dos veces para verlo — y con red lenta, varias. Aquí solo va lo
   imprescindible para que sea usable y legible desde el primer toque; la
   animación, el glow y el resto del pulido siguen en ai-avatar.css, que gana
   por !important en cuanto carga. */
.ai-user-menu--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ai-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}