/* =========================================================
   niblok · LAYOUT GLOBAL V3
   Ancho, cabeceras y botoneras unificados.
   ========================================================= */

:root {
  --niblok-panel-max-width: 2100px;
  --niblok-panel-gutter: clamp(.78rem, 1.25vw, 1.65rem);
  --niblok-panel-block-gap: 1rem;
  --niblok-panel-action-height: 34px;
}

html {
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  body.is-panel-route {
    overflow-y: scroll;
  }
}

/* El main no limita el contenido: lo hace el shell de cada vista. */
body.is-panel-route .site-main.panel-content-shell {
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Shell explícito de las vistas principales. */
body.is-panel-route .site-main .panel-bp-shell {
  width: 100% !important;
  max-width: var(--niblok-panel-max-width) !important;
  margin-inline: auto !important;
  padding:
    1.5rem
    var(--niblok-panel-gutter)
    1.5rem !important;
  box-sizing: border-box !important;
}

/*
 * Cubre también formularios y detalles que todavía usan directamente
 * .container o .container-fluid sin panel-bp-shell.
 */
body.is-panel-route .site-main > :is(.container, .container-fluid) {
  width: 100% !important;
  max-width: var(--niblok-panel-max-width) !important;
  margin-inline: auto !important;
  padding-left: var(--niblok-panel-gutter) !important;
  padding-right: var(--niblok-panel-gutter) !important;
  box-sizing: border-box !important;
}

/*
 * Equipos y Dispositivos conservaban row + col-xxl-10.
 * Se neutraliza únicamente el primer nivel para que ocupen exactamente
 * el mismo ancho que Sesiones, Players y Planificación.
 */
body.is-panel-route .site-main .panel-bp-shell > .row {
  --bs-gutter-x: 0;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.is-panel-route .site-main .panel-bp-shell > .row > [class*="col-"] {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Wrapper decorativo del Panel. */
body.is-panel-route .site-main > .team-dashboard-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Neutraliza helpers antiguos que competían con el shell global. */
body.is-panel-route .site-main .niblok-panel-content-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

body.is-panel-route .site-main .club-page.panel-bp-shell,
body.is-panel-route .site-main .players-page-shell.panel-bp-shell,
body.is-panel-route .site-main .planning-wrap.panel-bp-shell,
body.is-panel-route .site-main .sessions-panel-wrap.panel-bp-shell,
body.is-panel-route .site-main .live-wrap.panel-bp-shell,
body.is-panel-route .site-main .work-page-shell.panel-bp-shell {
  max-width: var(--niblok-panel-max-width) !important;
  margin-inline: auto !important;
  padding-left: var(--niblok-panel-gutter) !important;
  padding-right: var(--niblok-panel-gutter) !important;
}

/* =========================================================
   CABECERAS
   ========================================================= */

body.is-panel-route .site-main :is(
  .sessions-club-header,
  .panel-page-header
) {
  width: 100%;
  min-width: 0;
  margin-bottom: var(--niblok-panel-block-gap) !important;
}

/*
 * Cabeceras antiguas de detalles/formularios que aún usan utilidades
 * Bootstrap reciben el mismo espaciado sin reescribir la plantilla.
 */
body.is-panel-route .site-main .panel-bp-shell > :is(
  .d-flex.flex-column.flex-md-row.align-items-md-center.justify-content-between.mb-3
),
body.is-panel-route .site-main .panel-bp-shell > .row > [class*="col-"] > :is(
  .d-flex.flex-column.flex-md-row.align-items-md-center.justify-content-between.mb-3
) {
  gap: 1.25rem;
  align-items: flex-start !important;
  margin-bottom: var(--niblok-panel-block-gap) !important;
}

/* Live mantiene selector de sesión, pero ocupa el mismo bloque. */
body.is-panel-route .site-main .live-header.panel-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: end;
  gap: 1.25rem;
}

body.is-panel-route .site-main .live-header.panel-page-header form,
body.is-panel-route .site-main .live-header.panel-page-header select {
  width: 100%;
  min-width: 0;
}

/* Club conserva su composición especial; la navegación queda arriba-derecha. */
body.is-panel-route .site-main .club-topbar.panel-page-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: var(--niblok-panel-action-height);
  margin-bottom: .15rem;
}

/* =========================================================
   ACCIONES PRINCIPALES
   ========================================================= */

/*
 * Igualamos la escala a la cabecera de Planificación.
 * La excepción es Plan Individual, deliberadamente más destacado.
 */
body.is-panel-route .site-main :is(
  .sessions-club-actions,
  .panel-page-actions,
  .panel-page-toolbar
) .btn-action:not(.btn-action--individual-plan) {
  min-height: var(--niblok-panel-action-height) !important;
  padding: .25rem .78rem !important;
  border-radius: 999px !important;
  font-size: .7rem !important;
  line-height: 1 !important;
  letter-spacing: .05em;
  white-space: nowrap;
}

body.is-panel-route .site-main :is(
  .sessions-club-actions,
  .panel-page-actions,
  .panel-page-toolbar
) .btn-action:not(.btn-action--individual-plan) i {
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1;
}

/*
 * Herramientas secundarias: siempre en un nivel separado de la cabecera,
 * como Calendario/Macro/Meso/Micro en Planificación.
 */
body.is-panel-route .site-main .panel-page-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  width: 100%;
  margin: -.2rem 0 1rem !important;
}

body.is-panel-route .site-main .planning-toolbar.panel-page-toolbar {
  justify-content: flex-end;
}

body.is-panel-route .site-main .players-page-toolbar {
  justify-content: flex-end;
}

/* =========================================================
   EMPTY STATES
   ========================================================= */

body.is-panel-route .site-main .panel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 265px;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

body.is-panel-route .site-main .panel-empty-state__action {
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 100%;
}

body.is-panel-route .site-main .panel-empty-state__action .btn-action {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  align-self: center;
}

/* Mensajes flash alineados con todas las vistas. */
body.is-panel-route .panel-flash-shell {
  width: 100%;
  max-width: var(--niblok-panel-max-width) !important;
  margin-inline: auto !important;
  padding-left: var(--niblok-panel-gutter) !important;
  padding-right: var(--niblok-panel-gutter) !important;
  box-sizing: border-box;
}

/* Límites interiores opcionales sin alterar la alineación exterior. */
body.is-panel-route .panel-form-inner {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

body.is-panel-route .panel-detail-inner {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
}

@media (max-width: 767.98px) {
  :root {
    --niblok-panel-gutter: .72rem;
  }

  body.is-panel-route .site-main {
    overflow-x: clip;
  }

  body.is-panel-route .site-main .live-header.panel-page-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.is-panel-route .site-main .panel-page-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0 !important;
  }

  body.is-panel-route .site-main .panel-page-toolbar .btn-action {
    width: 100%;
    min-width: 0;
  }

  body.is-panel-route .site-main .club-topbar.panel-page-actions {
    width: 100%;
  }
}

@media (max-width: 420px) {
  body.is-panel-route .site-main .panel-page-toolbar {
    grid-template-columns: 1fr;
  }
}

@media print {
  html {
    scrollbar-gutter: auto;
  }

  body.is-panel-route .site-main .panel-bp-shell,
  body.is-panel-route .site-main > :is(.container, .container-fluid),
  body.is-panel-route .panel-flash-shell {
    max-width: none !important;
    padding-inline: 0 !important;
  }
}


/* =========================================================
   Identidad del club · nombre + escudo
   ========================================================= */
.club-name-lockup {
  --club-brand-blue: currentColor;
  display:inline-flex;
  align-items:center;
  gap:.46rem;
  max-width:100%;
  min-width:0;
  color:inherit;
  vertical-align:middle;
}

.club-name-lockup__text {
  min-width:0;
  color:inherit;
  overflow-wrap:anywhere;
}

.club-crest {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:32px;
  height:32px;
  overflow:hidden;
  border:2px solid currentColor;
  border-radius:50%;
  color:inherit;
  background:#f8feff;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.9),
    0 0 10px rgba(0,234,255,.34);
  font-family:var(--font-display,"Archivo",sans-serif);
  font-size:.55rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.015em;
}

.club-crest img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:2px;
  border-radius:50%;
  background:#f8feff;
}

.club-crest > span {
  color:currentColor;
}

.club-name-lockup--xl .club-crest {
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:.62rem;
}

.club-name-lockup--header .club-crest {
  width:32px;
  height:32px;
  border-radius:50%;
}

.club-name-lockup--sm .club-crest {
  width:25px;
  height:25px;
  border-width:1.5px;
  border-radius:50%;
  font-size:.47rem;
}

.club-name-lockup--xs .club-crest {
  width:20px;
  height:20px;
  border-width:1.5px;
  border-radius:50%;
  font-size:.42rem;
}

.club-name-lockup--meta {
  gap:.38rem;
}

.club-name-lockup--crest-only {
  line-height:1;
}

.panel-club-brand-line,
.live-club-brand,
.work-club-brand,
.me-player-club-brand {
  display:flex;
  align-items:center;
  margin:.28rem 0 .45rem;
  color:var(--bs-info,#00eaff);
}

.sessions-club-header h2.text-info .club-name-lockup,
.panel-club-brand-line .club-name-lockup,
.live-club-brand .club-name-lockup,
.work-club-brand .club-name-lockup,
.me-player-club-brand .club-name-lockup {
  color:inherit;
}

.live-club-brand,
.work-club-brand,
.me-player-club-brand {
  font-family:var(--font-display,"Archivo",sans-serif);
  font-size:clamp(1rem,1.3vw,1.25rem);
  font-weight:800;
}

@media(max-width:767.98px){
  .club-name-lockup {
    gap:.4rem;
  }

  .club-name-lockup--xl .club-crest {
    width:36px;
    height:36px;
  }

  .club-name-lockup--header .club-crest {
    width:29px;
    height:29px;
  }
}

@media print {
  .club-crest {
    border-color:#00a9d6;
    box-shadow:none;
  }
}

/* =========================================================
   NIBLOK · JERARQUÍA VISUAL GLOBAL V4
   Cabeceras de bloque, tablas y formularios con contraste operativo.
   ========================================================= */
:root {
  --niblok-block-bg: linear-gradient(110deg, rgba(0, 190, 215, .22), rgba(5, 19, 27, .98) 46%, rgba(255, 54, 102, .10));
  --niblok-block-border: rgba(54, 231, 245, .34);
  --niblok-block-accent: #36e7f5;
  --niblok-block-title: #f4feff;
  --niblok-block-copy: rgba(222, 249, 252, .72);
}

body.is-panel-route .site-main :is(.section-card, .panel-card, .team-panel, .card.bg-dark) {
  border-color: rgba(54, 231, 245, .18) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .025);
}

/* Cabeceras de secciones de sesión y otros bloques que usan Bootstrap. */
body.is-panel-route .site-main .section-card > .section-title,
body.is-panel-route .site-main .card > .card-header,
body.is-panel-route .site-main .pcd-section-header,
body.is-panel-route .site-main .panel-block-header {
  position: relative;
  border: 1px solid var(--niblok-block-border) !important;
  border-left: 4px solid var(--niblok-block-accent) !important;
  border-radius: 14px !important;
  background: var(--niblok-block-bg) !important;
  color: var(--niblok-block-title) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.16);
}

body.is-panel-route .site-main .section-card > .section-title {
  padding: .82rem .95rem !important;
}

body.is-panel-route .site-main .card > .card-header {
  padding: .72rem .9rem !important;
}

body.is-panel-route .site-main :is(.section-title, .card-header, .pcd-section-header, .panel-block-header) :is(h1,h2,h3,h4,h5,h6),
body.is-panel-route .site-main :is(.section-title, .card-header, .pcd-section-header, .panel-block-header) > span {
  color: var(--niblok-block-title) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.36);
}

body.is-panel-route .site-main :is(.section-title, .card-header, .panel-block-header) :is(.muted, .text-muted, small, p) {
  color: var(--niblok-block-copy) !important;
}

/* Tablas: la cabecera debe distinguirse inmediatamente de los datos. */
body.is-panel-route .site-main table thead th {
  background: linear-gradient(180deg, rgba(7, 49, 61, .98), rgba(4, 25, 34, .98)) !important;
  color: #eaffff !important;
  border-color: rgba(54, 231, 245, .24) !important;
  font-weight: 800 !important;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-size: .68rem;
}

body.is-panel-route .site-main table tbody tr:hover > * {
  background-color: rgba(54, 231, 245, .045) !important;
}

/* Etiquetas y ayudas de formulario: visibles sin competir con el dato. */
body.is-panel-route .site-main :is(.form-label, label:not(.btn):not(.form-check-label)) {
  color: rgba(238, 253, 255, .88);
}

body.is-panel-route .site-main :is(.form-text, .text-secondary, .muted) {
  color: rgba(216, 245, 248, .62) !important;
}

body.is-panel-route .site-main :is(input, select, textarea).form-control,
body.is-panel-route .site-main select.form-select {
  border-color: rgba(54, 231, 245, .24);
}

body.is-panel-route .site-main :is(input, select, textarea).form-control:focus,
body.is-panel-route .site-main select.form-select:focus {
  border-color: rgba(54, 231, 245, .72);
  box-shadow: 0 0 0 .2rem rgba(54, 231, 245, .10);
}

/* Resúmenes desplegables operativos. */
body.is-panel-route .site-main details > summary.panel-summary,
body.is-panel-route .site-main .attendance-panel > summary {
  background: linear-gradient(100deg, rgba(0, 193, 218, .14), rgba(5, 18, 25, .94));
  border-bottom: 1px solid rgba(54, 231, 245, .16);
}

@media (max-width: 720px) {
  body.is-panel-route .site-main .section-card > .section-title,
  body.is-panel-route .site-main .card > .card-header {
    padding: .72rem .75rem !important;
  }

  body.is-panel-route .site-main table thead th {
    font-size: .62rem;
  }
}

/* Cabeceras semánticas que no usan .card-header pero aparecen en módulos clave. */
body.is-panel-route .site-main :is(
  .dashboard-section-head,
  .performance-summary-head,
  .pp-section-head,
  .team-assignment-head,
  .work-monitoring-head,
  .players-card-header,
  .club-card-header
) {
  padding: .72rem .85rem !important;
  border: 1px solid rgba(54, 231, 245, .24) !important;
  border-left: 4px solid #36e7f5 !important;
  border-radius: 14px !important;
  background: linear-gradient(110deg, rgba(0,190,215,.16), rgba(5,18,25,.96) 52%, rgba(255,54,102,.06)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

body.is-panel-route .site-main :is(
  .dashboard-section-head,
  .performance-summary-head,
  .pp-section-head,
  .team-assignment-head,
  .work-monitoring-head,
  .players-card-header,
  .club-card-header
) :is(h1,h2,h3,h4,h5,h6) {
  color: #f4feff !important;
}

body.is-panel-route .site-main :is(
  .dashboard-section-head,
  .performance-summary-head,
  .pp-section-head,
  .team-assignment-head,
  .work-monitoring-head,
  .players-card-header,
  .club-card-header
) :is(p,small,.muted,.text-muted) {
  color: rgba(222,249,252,.68) !important;
}