/* Nekon HUB v28.03 · Centro de notificaciones premium responsive
   Diseño oscuro con detalles dorados, pensado para desktop, tablet y móvil. */

:root{
  --nekon-notif-gold:#e7c77c;
  --nekon-notif-gold-strong:#f3d993;
  --nekon-notif-gold-soft:rgba(231,199,124,.16);
  --nekon-notif-gold-line:rgba(231,199,124,.38);
  --nekon-notif-bg:#0a0b0e;
  --nekon-notif-panel:#111318;
  --nekon-notif-panel-2:#17191f;
  --nekon-notif-text:#f7f3ea;
  --nekon-notif-muted:#b8b1a5;
}

html.notification-center-open{overflow:hidden!important}

.notification-center-dialog{
  width:min(1040px,calc(100vw - 56px))!important;
  height:min(760px,calc(100dvh - 56px))!important;
  max-width:none!important;
  max-height:none!important;
  margin:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.notification-center-dialog::backdrop{
  background:rgba(2,3,5,.82)!important;
  backdrop-filter:blur(14px) saturate(.9)!important;
  -webkit-backdrop-filter:blur(14px) saturate(.9)!important;
}
.notification-center-shell{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  border:1px solid var(--nekon-notif-gold-line)!important;
  border-radius:30px!important;
  color:var(--nekon-notif-text)!important;
  background:
    radial-gradient(circle at 15% 0%,rgba(231,199,124,.085),transparent 26rem),
    radial-gradient(circle at 93% 9%,rgba(190,141,73,.055),transparent 24rem),
    linear-gradient(155deg,rgba(18,20,25,.995),rgba(7,8,11,.995))!important;
  box-shadow:
    0 36px 110px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(0,0,0,.32)!important;
}
.notification-center-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.36;
  background:
    linear-gradient(116deg,transparent 0 31%,rgba(232,197,124,.035) 31.4%,transparent 32.1%),
    linear-gradient(31deg,transparent 0 72%,rgba(232,197,124,.025) 72.3%,transparent 73%),
    radial-gradient(circle at 38% 78%,rgba(255,255,255,.018),transparent 18rem);
}
.notification-center-shell>*{position:relative;z-index:1}

.notification-center-topbar{
  min-height:108px!important;
  padding:20px 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
  border-bottom:1px solid rgba(231,199,124,.20)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))!important;
}
.notification-center-title{display:flex!important;align-items:center!important;gap:16px!important;min-width:0!important}
.notification-center-title__icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  border:1px solid rgba(231,199,124,.50)!important;
  border-radius:18px!important;
  color:var(--nekon-notif-gold-strong)!important;
  background:linear-gradient(145deg,rgba(231,199,124,.10),rgba(255,255,255,.012))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.22)!important;
}
.notification-center-title__icon svg{width:29px!important;height:29px!important;stroke-width:1.55!important}
.notification-center-title small{display:none!important}
.notification-center-title h2{
  margin:0!important;
  color:#f2dca5!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(1.8rem,2.5vw,2.35rem)!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:-.025em!important;
  text-shadow:0 1px 18px rgba(231,199,124,.06)!important;
}
.notification-center-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;min-width:0!important}
.notification-push-state{display:flex!important;align-items:center!important;gap:10px!important}
.notification-push-state>span{display:none!important}
.notification-push-state button{
  min-height:46px!important;
  padding:0 20px!important;
  border:1px solid rgba(231,199,124,.48)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(231,199,124,.07),rgba(255,255,255,.015))!important;
  color:#f3d995!important;
  box-shadow:none!important;
  font-size:.76rem!important;
  font-weight:900!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
.notification-push-state button:hover{transform:translateY(-1px)!important;border-color:rgba(243,217,147,.72)!important;background:rgba(231,199,124,.11)!important}
.notification-push-state button[data-enabled="true"]{background:rgba(231,199,124,.055)!important;color:#f3d995!important;border-color:rgba(231,199,124,.38)!important}
.notification-center-close{
  display:grid!important;
  place-items:center!important;
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  border:1px solid rgba(231,199,124,.42)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.018)!important;
  color:#efd28c!important;
  font-size:2rem!important;
  font-weight:300!important;
  line-height:1!important;
  box-shadow:none!important;
}
.notification-center-close:hover{background:rgba(231,199,124,.09)!important}

.notification-feedback{
  margin:0!important;
  padding:10px 24px!important;
  border:0!important;
  border-bottom:1px solid rgba(231,199,124,.14)!important;
  background:rgba(231,199,124,.05)!important;
  color:#ead7ac!important;
  font-size:.78rem!important;
  text-align:center!important;
}
.notification-feedback[data-error="true"]{color:#ffb7b7!important;background:rgba(255,84,84,.075)!important}

.notification-center-body{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.notification-center-sidebar{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  background:transparent!important;
}
.notification-center-detail{display:none!important}
.notification-list-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  min-height:110px!important;
  padding:22px 28px 20px!important;
  border:0!important;
  border-bottom:1px solid rgba(231,199,124,.13)!important;
  background:transparent!important;
}
.notification-list-heading>div{display:flex!important;align-items:baseline!important;gap:14px!important;min-width:0!important}
.notification-list-heading strong{
  color:#fff!important;
  font-size:1.45rem!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
}
.notification-list-heading span{color:#e5cc91!important;font-size:.92rem!important;font-weight:500!important}
.notification-list-heading b{color:inherit!important;font-size:inherit!important}
.notification-list-heading button{
  min-height:46px!important;
  padding:0 22px!important;
  border:1px solid rgba(231,199,124,.42)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.018)!important;
  color:#f0d28a!important;
  font-size:.78rem!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.notification-list-heading button:hover{background:rgba(231,199,124,.08)!important}

.notification-center-sidebar .notifications-list{
  display:grid!important;
  grid-auto-rows:max-content!important;
  align-content:start!important;
  gap:14px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:20px 28px 34px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(231,199,124,.42) transparent!important;
}
.notification-center-sidebar .notifications-list::-webkit-scrollbar{width:7px}
.notification-center-sidebar .notifications-list::-webkit-scrollbar-track{background:transparent}
.notification-center-sidebar .notifications-list::-webkit-scrollbar-thumb{background:rgba(231,199,124,.36);border-radius:999px}

.notification-accordion-item{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  min-height:0!important;
  border:1px solid rgba(231,199,124,.34)!important;
  border-radius:20px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),
    rgba(16,18,22,.92)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.notification-accordion-item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background:linear-gradient(100deg,rgba(231,199,124,.025),transparent 26%,transparent 74%,rgba(231,199,124,.02));
}
.notification-accordion-item:hover{transform:translateY(-1px)!important;border-color:rgba(243,217,147,.52)!important}
.notification-accordion-item.is-unread::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  background:linear-gradient(180deg,#f5dc99,#ba8747)!important;
  box-shadow:0 0 20px rgba(231,199,124,.27)!important;
}
.notification-accordion-item.is-open{border-color:rgba(243,217,147,.56)!important;box-shadow:0 16px 42px rgba(0,0,0,.26),0 0 0 1px rgba(231,199,124,.045)!important}
.notification-list-item{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto auto auto!important;
  align-items:center!important;
  gap:15px!important;
  width:100%!important;
  min-height:96px!important;
  padding:17px 18px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--nekon-notif-text)!important;
  text-align:left!important;
}
.notification-list-item__icon{
  display:grid!important;
  place-items:center!important;
  width:54px!important;
  height:54px!important;
  border:1px solid rgba(231,199,124,.40)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(231,199,124,.075),rgba(255,255,255,.008))!important;
  color:#f0d28a!important;
  font-size:1.55rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.notification-list-item__content{display:block!important;min-width:0!important}
.notification-list-item__line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-bottom:5px!important}
.notification-list-item__line small{
  overflow:hidden!important;
  color:#e8cb88!important;
  font-size:.66rem!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  line-height:1.2!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.notification-list-item__line time{
  flex:0 0 auto!important;
  color:#e4c883!important;
  font-size:.73rem!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
.notification-list-item__content strong{
  display:block!important;
  margin:0 0 4px!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:1rem!important;
  font-weight:900!important;
  line-height:1.25!important;
  letter-spacing:-.012em!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.notification-list-item__content>span:last-child{
  display:block!important;
  overflow:hidden!important;
  color:#aaa59d!important;
  font-size:.77rem!important;
  line-height:1.4!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.notification-list-item__thumb{
  width:64px!important;
  height:52px!important;
  overflow:hidden!important;
  border:1px solid rgba(231,199,124,.22)!important;
  border-radius:13px!important;
  background:#090a0d!important;
}
.notification-list-item__thumb img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.notification-unread-dot{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#f0ce7e!important;
  box-shadow:0 0 0 5px rgba(231,199,124,.07),0 0 16px rgba(231,199,124,.24)!important;
}
.notification-list-item__chevron{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border:1px solid rgba(231,199,124,.32)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.012)!important;
  color:#e9cd8a!important;
  font-size:1rem!important;
  transition:transform .18s ease,background .18s ease!important;
}
.notification-accordion-item.is-open .notification-list-item__chevron{transform:rotate(180deg)!important;background:rgba(231,199,124,.07)!important;color:#f5dc99!important}

.notification-inline-detail{
  position:relative!important;
  z-index:1!important;
  margin:0 16px 16px!important;
  padding:18px!important;
  overflow:visible!important;
  border:1px solid rgba(231,199,124,.15)!important;
  border-radius:16px!important;
  background:rgba(4,5,7,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.notification-inline-detail__header{display:grid!important;gap:4px!important;margin-bottom:14px!important;padding-bottom:13px!important;border-bottom:1px solid rgba(231,199,124,.12)!important}
.notification-inline-detail__header span{color:#e3c57e!important;font-size:.64rem!important;font-weight:900!important;letter-spacing:.11em!important}
.notification-inline-detail__header strong{color:#fff!important;font-size:1.08rem!important;line-height:1.25!important}
.notification-inline-detail .notification-detail-card__image-button{margin:0 0 16px!important;border:1px solid rgba(231,199,124,.18)!important;border-radius:14px!important;background:#08090c!important;box-shadow:0 10px 24px rgba(0,0,0,.18)!important}
.notification-inline-detail .notification-detail-card__message{margin:0!important;padding:0!important;color:#d9d4ca!important;font-size:.86rem!important;line-height:1.7!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}
.notification-inline-detail .notification-detail-card__message strong{color:#fff5dc!important}
.notification-inline-detail__footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-top:17px!important;padding-top:13px!important;border-top:1px solid rgba(231,199,124,.12)!important}
.notification-inline-detail__date{color:#918c83!important;font-size:.68rem!important}
.notification-inline-detail .notification-detail-card__action{
  min-height:40px!important;
  margin:0!important;
  padding:0 15px!important;
  border:1px solid rgba(231,199,124,.36)!important;
  border-radius:12px!important;
  background:rgba(231,199,124,.075)!important;
  color:#f1d38b!important;
  box-shadow:none!important;
  font-size:.72rem!important;
  font-weight:850!important;
}

.notification-empty{
  min-height:230px!important;
  margin:0!important;
  padding:42px 24px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:8px!important;
  border:1px dashed rgba(231,199,124,.22)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.01)!important;
  text-align:center!important;
}
.notification-empty>span{color:#e6c981!important;font-size:1.8rem!important}
.notification-empty h2,.notification-empty h3{margin:0!important;color:#f7f1e4!important;font-size:1rem!important}
.notification-empty p{margin:0!important;color:#9c978e!important;font-size:.8rem!important}

/* Categorías: conservan identidad sin romper el acabado premium. */
.notification-category--accounts .notification-list-item__icon,
.notification-category--agencies .notification-list-item__icon{color:#9adfd1!important;border-color:rgba(126,208,191,.30)!important;background:rgba(126,208,191,.055)!important}
.notification-category--premium_accounts .notification-list-item__icon,
.notification-category--prizes .notification-list-item__icon{color:#f1d181!important;border-color:rgba(231,199,124,.40)!important;background:rgba(231,199,124,.07)!important}

/* Tablet */
@media (max-width:1024px){
  .notification-center-dialog{width:min(920px,calc(100vw - 34px))!important;height:min(760px,calc(100dvh - 34px))!important}
  .notification-center-topbar{min-height:98px!important;padding:17px 19px!important}
  .notification-center-title__icon{width:54px!important;height:54px!important;flex-basis:54px!important}
  .notification-center-title h2{font-size:1.85rem!important}
  .notification-list-heading{min-height:96px!important;padding:18px 20px!important}
  .notification-center-sidebar .notifications-list{padding:16px 20px 28px!important}
  .notification-list-item{grid-template-columns:52px minmax(0,1fr) auto auto auto!important;min-height:90px!important;padding:15px!important;gap:13px!important}
  .notification-list-item__icon{width:50px!important;height:50px!important}
}

/* Teléfono / PWA */
@media (max-width:720px){
  .notification-center-dialog{
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
  }
  .notification-center-shell{
    width:100%!important;
    height:100%!important;
    border-width:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .notification-center-topbar{
    min-height:102px!important;
    padding:calc(13px + env(safe-area-inset-top)) 14px 13px!important;
    gap:10px!important;
  }
  .notification-center-title{gap:11px!important;min-width:0!important}
  .notification-center-title__icon{width:47px!important;height:47px!important;flex-basis:47px!important;border-radius:14px!important}
  .notification-center-title__icon svg{width:23px!important;height:23px!important}
  .notification-center-title h2{font-size:1.55rem!important;white-space:nowrap!important}
  .notification-center-actions{gap:8px!important}
  .notification-push-state button{
    min-height:38px!important;
    max-width:154px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    font-size:.61rem!important;
    line-height:1.1!important;
    white-space:normal!important;
  }
  .notification-center-close{width:40px!important;height:40px!important;flex-basis:40px!important;font-size:1.7rem!important}
  .notification-feedback{padding:9px 14px!important;font-size:.72rem!important}
  .notification-list-heading{
    grid-template-columns:1fr auto!important;
    min-height:auto!important;
    padding:17px 15px 15px!important;
    gap:12px!important;
  }
  .notification-list-heading>div{gap:10px!important}
  .notification-list-heading strong{font-size:1.23rem!important}
  .notification-list-heading span{font-size:.80rem!important}
  .notification-list-heading button{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:42px!important;
    padding:0 14px!important;
    font-size:.72rem!important;
  }
  .notification-center-sidebar .notifications-list{
    gap:11px!important;
    padding:13px 12px calc(24px + env(safe-area-inset-bottom))!important;
  }
  .notification-accordion-item{border-radius:17px!important}
  .notification-list-item{
    grid-template-columns:46px minmax(0,1fr) auto!important;
    min-height:82px!important;
    padding:13px 12px!important;
    gap:10px!important;
  }
  .notification-list-item__icon{width:44px!important;height:44px!important;border-radius:13px!important;font-size:1.3rem!important}
  .notification-list-item__thumb{display:none!important}
  .notification-unread-dot{position:absolute!important;top:12px!important;right:12px!important;width:7px!important;height:7px!important}
  .notification-list-item__line{gap:8px!important;margin-bottom:4px!important}
  .notification-list-item__line small{font-size:.58rem!important;letter-spacing:.075em!important}
  .notification-list-item__line time{font-size:.62rem!important}
  .notification-list-item__content strong{font-size:.88rem!important;white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important}
  .notification-list-item__content>span:last-child{font-size:.69rem!important;white-space:nowrap!important}
  .notification-list-item__chevron{width:30px!important;height:30px!important}
  .notification-inline-detail{margin:0 10px 10px!important;padding:14px!important;border-radius:14px!important}
  .notification-inline-detail__header strong{font-size:.98rem!important}
  .notification-inline-detail .notification-detail-card__message{font-size:.80rem!important;line-height:1.62!important}
  .notification-inline-detail__footer{align-items:stretch!important;flex-direction:column!important;gap:10px!important}
  .notification-inline-detail .notification-detail-card__action{width:100%!important}
}

/* Teléfonos compactos */
@media (max-width:390px){
  .notification-center-topbar{padding-left:11px!important;padding-right:11px!important}
  .notification-center-title{gap:9px!important}
  .notification-center-title__icon{width:42px!important;height:42px!important;flex-basis:42px!important}
  .notification-center-title h2{font-size:1.33rem!important}
  .notification-push-state button{max-width:128px!important;padding:0 7px!important;font-size:.56rem!important}
  .notification-center-close{width:36px!important;height:36px!important;flex-basis:36px!important}
  .notification-list-heading{padding-left:12px!important;padding-right:12px!important}
  .notification-center-sidebar .notifications-list{padding-left:10px!important;padding-right:10px!important}
}

/* Tema claro: mantiene el lujo sin sacrificar legibilidad. */
html[data-theme="light"] .notification-center-dialog::backdrop{background:rgba(25,22,18,.32)!important}
html[data-theme="light"] .notification-center-shell{
  color:#221d16!important;
  border-color:rgba(137,101,43,.35)!important;
  background:
    radial-gradient(circle at 16% 0%,rgba(194,149,71,.10),transparent 26rem),
    linear-gradient(155deg,rgba(255,253,249,.995),rgba(244,239,230,.995))!important;
  box-shadow:0 28px 80px rgba(53,42,24,.22)!important;
}
html[data-theme="light"] .notification-center-title h2{color:#6e5123!important}
html[data-theme="light"] .notification-list-heading strong{color:#282016!important}
html[data-theme="light"] .notification-accordion-item{background:rgba(255,255,255,.72)!important;box-shadow:0 8px 24px rgba(74,54,23,.07)!important}
html[data-theme="light"] .notification-list-item{color:#272018!important}
html[data-theme="light"] .notification-list-item__content strong{color:#251e16!important}
html[data-theme="light"] .notification-list-item__content>span:last-child{color:#746c61!important}
html[data-theme="light"] .notification-inline-detail{background:rgba(255,255,255,.52)!important}
html[data-theme="light"] .notification-inline-detail__header strong{color:#261f17!important}
html[data-theme="light"] .notification-inline-detail .notification-detail-card__message{color:#5b5248!important}
html[data-theme="light"] .notification-inline-detail .notification-detail-card__message strong{color:#211b14!important}
html[data-theme="light"] .notification-empty h2,
html[data-theme="light"] .notification-empty h3{color:#2a2118!important}

/* =========================================================
   V28.03 · Ajuste final del centro de notificaciones
   - Cabecera más compacta
   - Acciones alineadas
   - Solo título en la tarjeta cerrada
   - Mensaje completo únicamente al expandir
   - Flecha centrada por CSS
   - Responsive estable en móvil/tablet/escritorio
   ========================================================= */
.notification-center-dialog{
  width:min(900px,calc(100vw - 40px))!important;
  height:min(680px,calc(100dvh - 40px))!important;
}
.notification-center-shell{
  border-radius:26px!important;
}
.notification-center-topbar{
  min-height:84px!important;
  padding:14px 18px!important;
  gap:14px!important;
}
.notification-center-title{gap:12px!important}
.notification-center-title__icon{
  width:48px!important;
  height:48px!important;
  flex-basis:48px!important;
  border-radius:15px!important;
}
.notification-center-title__icon svg{width:24px!important;height:24px!important}
.notification-center-title h2{font-size:1.75rem!important}
.notification-center-actions{gap:8px!important;flex:0 0 auto!important}
.notification-push-state{gap:0!important}
.notification-push-state button{
  min-height:36px!important;
  height:36px!important;
  padding:0 13px!important;
  border-radius:12px!important;
  font-size:.68rem!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.notification-center-close{
  width:38px!important;
  height:38px!important;
  flex-basis:38px!important;
  font-size:1.55rem!important;
}
.notification-feedback{padding:8px 18px!important;font-size:.7rem!important}

.notification-list-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:58px!important;
  padding:10px 18px!important;
  gap:12px!important;
}
.notification-list-heading>div{
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
.notification-list-heading strong{font-size:1.18rem!important}
.notification-list-heading span{font-size:.76rem!important;white-space:nowrap!important}
.notification-list-heading button{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:190px!important;
  min-width:0!important;
  min-height:34px!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  font-size:.64rem!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.notification-center-sidebar .notifications-list{
  gap:10px!important;
  padding:14px 18px 24px!important;
}
.notification-accordion-item{border-radius:16px!important}
.notification-list-item{
  grid-template-columns:46px minmax(0,1fr) 8px 34px!important;
  min-height:70px!important;
  padding:11px 13px!important;
  gap:11px!important;
}
.notification-list-item__icon{
  width:44px!important;
  height:44px!important;
  border-radius:13px!important;
  font-size:1.25rem!important;
}
.notification-list-item__content{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}
.notification-list-item__content strong{
  margin:0!important;
  color:#fff!important;
  font-size:.92rem!important;
  line-height:1.28!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
.notification-list-item__line,
.notification-list-item__content>span:last-child,
.notification-list-item__thumb{display:none!important}
.notification-unread-dot{
  position:static!important;
  justify-self:center!important;
  align-self:center!important;
  width:7px!important;
  height:7px!important;
}
.notification-list-item__chevron{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  justify-self:end!important;
  width:32px!important;
  height:32px!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
  transform:none!important;
}
.notification-list-item__chevron::before{
  content:""!important;
  display:block!important;
  width:8px!important;
  height:8px!important;
  margin-top:-4px!important;
  border-right:2px solid currentColor!important;
  border-bottom:2px solid currentColor!important;
  transform:rotate(45deg)!important;
  transform-origin:center!important;
  transition:transform .18s ease,margin .18s ease!important;
}
.notification-accordion-item.is-open .notification-list-item__chevron{
  transform:none!important;
}
.notification-accordion-item.is-open .notification-list-item__chevron::before{
  margin-top:4px!important;
  transform:rotate(225deg)!important;
}
.notification-inline-detail{
  margin:0 12px 12px!important;
  padding:15px!important;
  border-radius:14px!important;
}
.notification-inline-detail__header{margin-bottom:12px!important;padding-bottom:10px!important}
.notification-inline-detail__header strong{font-size:1rem!important}
.notification-inline-detail .notification-detail-card__message{font-size:.82rem!important;line-height:1.6!important}
.notification-inline-detail__footer{margin-top:14px!important;padding-top:11px!important}

@media (max-width:760px){
  .notification-center-dialog{
    width:calc(100vw - 18px)!important;
    height:calc(100dvh - 18px)!important;
    max-height:calc(100dvh - 18px)!important;
  }
  .notification-center-shell{border-radius:22px!important}
  .notification-center-topbar{
    min-height:72px!important;
    padding:10px 11px!important;
    gap:8px!important;
  }
  .notification-center-title{gap:9px!important;min-width:0!important}
  .notification-center-title__icon{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
    border-radius:12px!important;
  }
  .notification-center-title__icon svg{width:20px!important;height:20px!important}
  .notification-center-title h2{font-size:1.25rem!important;white-space:nowrap!important}
  .notification-center-actions{gap:6px!important}
  .notification-push-state button{
    min-height:32px!important;
    height:32px!important;
    max-width:94px!important;
    padding:0 9px!important;
    border-radius:10px!important;
    font-size:.59rem!important;
  }
  .notification-center-close{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
    font-size:1.42rem!important;
  }
  .notification-list-heading{
    min-height:52px!important;
    padding:8px 11px!important;
    gap:8px!important;
  }
  .notification-list-heading>div{gap:7px!important}
  .notification-list-heading strong{font-size:1.05rem!important}
  .notification-list-heading span{font-size:.68rem!important}
  .notification-list-heading button{
    width:auto!important;
    max-width:154px!important;
    min-height:31px!important;
    height:31px!important;
    padding:0 8px!important;
    font-size:.56rem!important;
    border-radius:10px!important;
  }
  .notification-center-sidebar .notifications-list{
    gap:8px!important;
    padding:10px 9px calc(18px + env(safe-area-inset-bottom))!important;
  }
  .notification-list-item{
    grid-template-columns:40px minmax(0,1fr) 7px 30px!important;
    min-height:62px!important;
    padding:9px 9px!important;
    gap:8px!important;
  }
  .notification-list-item__icon{
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
    font-size:1.08rem!important;
  }
  .notification-list-item__content strong{
    font-size:.82rem!important;
    line-height:1.24!important;
    -webkit-line-clamp:2!important;
  }
  .notification-list-item__chevron{
    width:28px!important;
    height:28px!important;
  }
  .notification-list-item__chevron::before{width:7px!important;height:7px!important;border-width:0 2px 2px 0!important}
  .notification-inline-detail{margin:0 8px 8px!important;padding:12px!important}
  .notification-inline-detail__header span{font-size:.56rem!important}
  .notification-inline-detail__header strong{font-size:.9rem!important}
  .notification-inline-detail .notification-detail-card__message{font-size:.76rem!important;line-height:1.55!important}
  .notification-inline-detail__footer{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}
}

@media (max-width:390px){
  .notification-center-title h2{font-size:1.12rem!important}
  .notification-push-state button{max-width:86px!important;font-size:.55rem!important;padding:0 7px!important}
  .notification-list-heading button{max-width:142px!important;font-size:.53rem!important;padding:0 7px!important}
  .notification-list-heading strong{font-size:.98rem!important}
  .notification-list-heading span{font-size:.63rem!important}
}


/* =========================================================
   V28.04 · Separación móvil entre control push y cerrar
   Mantiene ambos controles compactos, pero evita que queden
   visualmente pegados en teléfono/PWA.
   ========================================================= */
@media (max-width:760px){
  .notification-center-actions{
    gap:11px!important;
  }
  .notification-push-state{
    margin-right:1px!important;
  }
}
@media (max-width:390px){
  .notification-center-actions{
    gap:9px!important;
  }
}