/* ==========================================================================
   Nuevo diseño (Tabler + Bootstrap) — chasis de la aplicación.
   Se carga DESPUÉS de tabler.min.css y app.css para ganar en especificidad.
   Barra lateral fija en escritorio y panel deslizante (offcanvas) en móvil/tablet.
   Paleta de la federación (granate), no el azul de Tabler.
   ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tblr-primary: #7a1f2b;
  --tblr-primary-rgb: 122, 31, 43;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #7a1f2b;
  --tblr-link-color-rgb: 122, 31, 43;
  --app-sidebar-ancho: 15rem;
}

.btn-primary {
  --tblr-btn-bg: #7a1f2b; --tblr-btn-border-color: #7a1f2b;
  --tblr-btn-hover-bg: #5c1620; --tblr-btn-hover-border-color: #5c1620;
  --tblr-btn-active-bg: #5c1620; --tblr-btn-active-border-color: #5c1620;
}
.text-primary { color: #7a1f2b !important; }
.bg-primary, .text-bg-primary { background-color: #7a1f2b !important; }

html, body { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Maquetación: barra lateral + contenido
   -------------------------------------------------------------------------- */
.app-sidebar-panel {
  background: var(--tblr-bg-surface, #fff);
  border-right: 1px solid var(--tblr-border-color, #e6e7e9);
  width: var(--app-sidebar-ancho);
}

@media (min-width: 992px) {
  /* Escritorio: barra fija a la izquierda, el contenido se desplaza */
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--app-sidebar-ancho);
    z-index: 1030;
  }
  .app-sidebar-panel {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .page-wrapper {
    margin-left: var(--app-sidebar-ancho);
    transition: margin-left .15s ease;
  }
  /* Botón "contraer" de la barra superior: oculta la barra y expande el contenido */
  .sidebar-colapsada .app-sidebar { display: none; }
  .sidebar-colapsada .page-wrapper { margin-left: 0; }
}

@media (max-width: 991.98px) {
  /* Móvil/tablet: el contenido ocupa todo el ancho; la barra es un offcanvas */
  .page-wrapper { margin-left: 0 !important; }
  .app-sidebar-panel { width: min(20rem, 86vw); }
}

/* --------------------------------------------------------------------------
   Marca: logo arriba + título "Gestió Federació" + nombre completo debajo
   -------------------------------------------------------------------------- */
.app-sidebar .app-brand {
  gap: .35rem;
  max-width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.app-sidebar .app-brand .brand-logo { display: block; line-height: 0; }
.app-sidebar .app-brand .brand-logo img {
  width: auto;
  height: 3.5rem;
  max-width: calc(var(--app-sidebar-ancho) - 3rem);
  object-fit: contain;
}
.app-sidebar .app-brand .brand-text { display: block; width: 100%; min-width: 0; }
.app-sidebar .app-brand .brand-title {
  display: block;
  font-size: 1rem; font-weight: 700; line-height: 1.15; color: #7a1f2b;
}
.app-sidebar .app-brand .brand-full {
  display: block;
  font-size: .72rem; font-weight: 600; line-height: 1.2;
  color: var(--tblr-secondary, #6c7a91);
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  margin-top: .1rem;
}

/* --------------------------------------------------------------------------
   Navegación (menús y submenús en acordeón)
   -------------------------------------------------------------------------- */
.app-nav .nav-link {
  display: flex; align-items: center; gap: .6rem;
  border-radius: .5rem;
  padding: .5rem .65rem;
  color: var(--tblr-body-color, #1f2d3d);
  font-weight: 500;
}
.app-nav > .nav-item > .nav-link .nav-link-icon { width: 1.25rem; text-align: center; }
.app-nav .nav-link:hover { background: rgba(122, 31, 43, .06); color: #7a1f2b; }

/* Enlace de grupo (abre/cierra el submenú) */
.app-nav .nav-group-toggle { cursor: pointer; }
.app-nav .nav-chevron { font-size: .75rem; transition: transform .15s ease; }
.app-nav .nav-group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.app-nav .nav-group-toggle[aria-expanded="true"] { color: #7a1f2b; }

/* Submenú */
.app-subnav { list-style: none; margin: .1rem 0 .35rem; padding: 0 0 0 .35rem; }
.app-subnav .nav-link {
  gap: .5rem;
  padding: .4rem .6rem .4rem .75rem;
  font-size: .9rem; font-weight: 500;
  color: var(--tblr-secondary, #51607a);
  border-left: 2px solid transparent;
  border-radius: 0 .4rem .4rem 0;
  margin-left: .35rem;
}
.app-subnav .nav-link i { width: 1.1rem; text-align: center; font-size: .95rem; }
.app-subnav .nav-link:hover { background: rgba(122, 31, 43, .06); color: #7a1f2b; }

/* Ítem activo (menú o submenú) */
.app-nav .nav-link.active,
.app-subnav .nav-link.active {
  color: #7a1f2b; font-weight: 600;
  background: rgba(122, 31, 43, .10);
}
.app-subnav .nav-link.active { border-left-color: #7a1f2b; }

.app-sidebar .nav-section-title {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tblr-secondary, #6c7a91); font-weight: 700;
  padding: .85rem .65rem .25rem;
}

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.app-topbar {
  background: var(--tblr-bg-surface, #fff);
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.app-topbar .seccion-actual { font-weight: 600; font-size: 1.05rem; }
.app-topbar .buscador-global { max-width: 28rem; }

/* --------------------------------------------------------------------------
   Campos de formulario: un poco más altos y cómodos
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.input-group-text {
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.form-control-sm,
.form-select-sm {
  padding-top: .4rem;
  padding-bottom: .4rem;
}
/* Filtros de columna de las tablas Tabulator */
.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select {
  padding-top: .4rem;
  padding-bottom: .4rem;
  min-height: 2.1rem;
}

@media (max-width: 991.98px) {
  .app-topbar .buscador-global { max-width: 100%; }
}

/* Icono de marca redondeado (por si se usa en algún punto) */
.brand-mark {
  width: 2.1rem; height: 2.1rem; border-radius: .6rem;
  background: linear-gradient(135deg, #7a1f2b, #5c1620);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Tarjetas del panel (KPI) compactas — tamaños fijos (sin escalar con vw,
   para que no crezcan en tablet)
   -------------------------------------------------------------------------- */
.kpi .card-body { padding: .85rem 1rem; }
.kpi-principal { min-height: 6rem; }
.kpi-principal .card-body { padding: 1rem 1.15rem; }
.kpi-etiqueta { font-size: .72rem; }
.kpi-numero { font-size: 2.4rem; line-height: 1; margin: .15rem 0 0; }
.kpi-numero-sec { font-size: 1.55rem; }
.kpi-numero-ter { font-size: 1.25rem; }
.kpi-pie { font-size: .72rem; }

@media (max-width: 575.98px) {
  .kpi-numero { font-size: 2rem; }
  .kpi-numero-sec { font-size: 1.35rem; }
}

/* --------------------------------------------------------------------------
   Texto del acuerdo de acceso (formato profesional)
   -------------------------------------------------------------------------- */
.acuerdo-texto { font-size: .82rem; line-height: 1.45; text-align: justify; }
.acuerdo-texto p { margin: 0 0 .5rem; }
.acuerdo-texto .acuerdo-titulo { text-align: center; font-size: .9rem; margin-bottom: .6rem; }
.acuerdo-texto .acuerdo-sub { margin-top: .4rem; }
.acuerdo-texto .acuerdo-seccion { margin-top: .8rem; margin-bottom: .3rem; color: #7a1f2b; }
.acuerdo-texto .acuerdo-lista { padding-left: 2.2rem; text-indent: -1.4rem; margin-bottom: .25rem; }
.acuerdo-texto .acuerdo-parrafo { text-indent: 0; }