@layer vsg-universal {
/* Section polish pack: news, raids, roster, manage-guild */

.nw-wrapper,
.rd-wrapper,
.roster-wrapper,
.mg-wrapper {
  width: min(100%, 1400px);
  margin: 0 0 40px 0;
}

/* Every content section shares the exact left-aligned rail used by the two
   guild banners. A few legacy views used a 90% width or auto-centering,
   which made their header and internal cards drift from thisWeekWowBanner. */
.nw-wrapper,
.rd-wrapper,
.rd-details-wrapper,
.roster-wrapper,
.mg-wrapper,
.gd-wrapper,
.cal-wrapper,
.wt-wrapper,
.cons-wrapper {
  width: min(100%, var(--vsg-banner-max-width, 1400px));
  max-width: var(--vsg-banner-max-width, 1400px);
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.nw-wrapper,
.rd-wrapper,
.rd-details-wrapper,
.roster-wrapper,
.mg-wrapper,
.gd-wrapper,
.cal-wrapper,
.wt-wrapper,
.cons-wrapper {
  overflow-x: clip;
}

.nw-wrapper > *,
.rd-wrapper > *,
.rd-details-wrapper > *,
.roster-wrapper > *,
.mg-wrapper > *,
.gd-wrapper > *,
.cal-wrapper > *,
.wt-wrapper > *,
.cons-wrapper > * {
  min-width: 0;
  max-width: 100%;
}

.wt-wrapper #storePurchaseSection .card {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.nw-wrapper .nw-hero-grid,
.nw-wrapper .nw-list,
.nw-wrapper .nw-list-item,
.mg-wrapper #mgConsumablesView,
.mg-wrapper .mg-cons-editor {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.rd-wrapper .universal-top-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
}

.rd-wrapper .universal-top-actions {
  display: flex;
  /* Los tres filtros son una sola barra de herramientas. Si el ancho se
     reduce, conserva la fila y permite desplazamiento horizontal en vez de
     convertir cada selector en una línea distinta. */
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.rd-wrapper .rd-filter-control {
  flex: 0 0 auto;
  min-width: 148px;
}

.rd-wrapper .rd-filter-search { width: clamp(190px, 20vw, 270px); }
.rd-wrapper .rd-filter-select { width: clamp(148px, 14vw, 210px); }

@media (max-width: 900px) {
  /* Historial de Raids en su propia fila arriba, filtros en una fila
     aparte debajo — antes los filtros compartían fila con el título
     (nowrap + scroll horizontal), lo que los dejaba angostos y con parte
     fuera de vista. Acá pasan a su propia fila y se achican: buscador
     arriba a ancho completo, los dos selects comparten la fila siguiente. */
  .rd-wrapper .universal-top-header { grid-template-columns: minmax(0, 1fr); }
  .rd-wrapper .universal-top-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: visible;
    gap: 6px;
  }
  .rd-wrapper .rd-filter-control {
    min-width: 0;
    padding: 7px 10px;
    font-size: .8rem;
  }
  .rd-wrapper .rd-filter-search { flex: 1 1 100%; width: 100%; }
  .rd-wrapper .rd-filter-select { flex: 1 1 calc(50% - 3px); width: auto; }
}

.acc-logout-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(420px, calc(95vw - 44px));
}

.acc-logout-confirm-icon {
  display: none !important;
}

.acc-logout-confirm strong { color: #f8fafc; font-size: 1rem; }
.acc-logout-confirm p { margin: 6px 0 0; color: #9fb0c6; font-size: .84rem; line-height: 1.5; }
.acc-logout-confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.acc-logout-confirm-actions .btn-primary { border-color: rgba(251, 113, 133, .58); background: linear-gradient(135deg, #be123c, #e11d48); }
.acc-captcha-host.captcha-load-error,
.auth-recaptcha.captcha-load-error { display: grid; min-height: 76px; place-items: center; color: #fbbf24; font-size: .78rem; line-height: 1.45; text-align: center; }

.nw-list-item,
.rc-panel,
.mg-raid-card,
.mg-player-row,
.ast-block,
.mg-season-panel {
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.28);
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1), border-color 220ms cubic-bezier(0.22,1,0.36,1), box-shadow 220ms cubic-bezier(0.22,1,0.36,1);
}

.nw-list-item:hover,
.rc-panel:hover,
.mg-raid-card:hover,
.mg-player-row:hover,
.mg-season-panel:hover {
  transform: translate3d(0, -2px, 0);
}

.nw-li-content,
.rc-header,
.rc-stats-bar,
.rc-roster-row,
.mg-raid-acc-body,
.mg-player-row,
.mg-sp-body {
  padding: clamp(12px, 1.1vw, 22px);
}

.nw-li-title,
.rc-title,
.raid-acc-title,
.mg-main-title {
  line-height: 1.2;
  letter-spacing: 0.2px;
}

/* Categorizacion visual consistente */
.rc-badge,
.mg-sp-badge,
.mg-pr-stat,
.ast-role-title,
.nw-li-meta {
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Tablas y datos */
.table-responsive,
.table-responsive-wrapper {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  overflow: auto;
  background: rgba(2, 6, 23, 0.2);
}

.data-table th,
.data-table td {
  padding: clamp(9px, 0.75vw, 13px) clamp(10px, 0.85vw, 14px);
}

/* Botoneria uniforme */
.rc-btn,
.mg-tab-btn,
.roster-tab-btn,
.btn-read-more {
  min-height: 38px;
  border-radius: 10px;
}

/* Animaciones ligeras */
.nw-li-img,
.roster-tab-icon,
.rc-top-icon,
.mg-pr-class-icon {
  transform: translateZ(0);
}

/* Responsive refinado */
@media (max-width: 1280px) {
  .rc-tops-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rc-roster-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .nw-list-item {
    flex-direction: column;
  }
  .nw-li-img-wrapper {
    width: 100%;
    max-height: 220px;
  }
  .rc-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mg-player-row {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .rc-tops-row,
  .rc-roster-row,
  .ast-player-list,
  .mg-expansions-grid {
    grid-template-columns: 1fr;
  }
  .roster-tabs-head,
  .mg-tabs,
  .rc-header-actions {
    flex-wrap: wrap;
  }
  .roster-tab-btn,
  .mg-tab-btn,
  .rc-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Roster: los 3 tabs van uno junto al otro (ver roster.css), no apilados al
   100% de ancho uno por fila como el resto de las secciones arriba. Se
   sobreescribe acá mismo, en vsg-universal, con selector más específico (2
   clases contra 1 en ambas reglas de arriba). */
@media (max-width: 900px) {
  /* !important necesario: el botón también lleva la clase .btn-outline, y
     `.btn-outline { padding: 8px 16px; }` (global.css, vsg-universal, SIN
     !important) le seguía ganando al padding de roster.css con !important
     — normal de vsg-universal contra important de vsg-sections, esta
     página igual la gana vsg-universal. Con eso, aunque min-height bajara,
     el padding de 8px16px seguía inflando la altura real del botón. */
  .roster-tabs-head .roster-tab-btn {
    width: auto !important;
    min-height: 24px !important;
    padding: 3px 5px !important;
  }
}

/* Escala tipográfica transversal: una jerarquía para todas las secciones. */
.content-container :is(.universal-top-title, .nw-reader-title, .mg-main-title, .wt-main-title) {
  font-size: var(--type-page-title);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.content-container :is(.nw-section-heading h2, .pg-overview-header h3, .attendance-title, .roster-section-title, .mg-section-title, .wt-panel-title, .cm-header h3, .rc-title) {
  font-size: var(--type-section-title);
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.content-container :is(.nw-li-title, .raid-acc-title, .guide-card-title) {
  font-size: var(--type-card-title);
  line-height: 1.2;
}

.content-container :is(.pg-kicker, .at-kicker, .nw-kicker, .section-kicker, .universal-kicker) {
  font-size: var(--type-kicker);
  line-height: 1.25;
}
}