/* =============================================================================
   BlackBird admin — tema: Rubik + Quicksand, paleta marca (fix_admin carga después del tema)
   ============================================================================= */

:root {
  --bb-black: #000000;
  --bb-gray: #313131;
  --bb-gray-2: #b5b5b5;
  --bb-gray-bg: #f6f6f6;
  --bb-cian: #3dd5ff;
  --bb-verde: #5ce18e;
  --bb-amarillo: #ffd633;
  --bb-magenta: #ff4fa3;

  --bs-primary: var(--bb-black);
  --bs-primary-rgb: 0, 0, 0;
  --bs-accent: var(--bb-cian);
  --bs-accent-rgb: 61, 213, 255;
  --bs-gray-100: var(--bb-gray-bg);
  --bs-body-font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 500;
  --bs-body-color: var(--bb-gray);
  --bs-heading-color: var(--bb-black);
  --bs-link-color: var(--bb-gray);
  --bs-link-hover-color: var(--bb-black);
  --bs-border-color: rgba(181, 181, 181, 0.65);

  /* Hero isla / niño / imagen lateral zonas — caja fija 300×300 (escala en pantallas estrechas) */
  --bb-hero-photo-size: 300px;
}

body.g-sidenav-show.bg-gray-100 {
  background-color: var(--bb-gray-bg) !important;
  color: var(--bb-gray);
  font-family: var(--bs-body-font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
}

body.g-sidenav-show.bg-gray-100 b,
body.g-sidenav-show.bg-gray-100 strong {
  font-weight: 700;
}

/* Cuerpo de texto: Quicksand Medium (el tema pone p { font-weight: 400 } más abajo en la cascada) */
body.g-sidenav-show.bg-gray-100 p,
body.g-sidenav-show.bg-gray-100 .p {
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
}

h1,
.h1 {
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bb-black);
}

h1.fw-bold,
h1.font-weight-bold,
.h1.fw-bold {
  font-weight: 700;
}

h2,
.h2 {
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--bb-black);
}

h2.fw-bold,
h2.font-weight-bold,
.h2.fw-bold {
  font-weight: 700;
}

h3,
.h3 {
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--bb-black);
}

h3.fw-bold,
h3.font-weight-bold,
.h3.fw-bold {
  font-weight: 700;
}

/* Módulo admin usa h5 como título de sección → misma jerarquía visual que H2 */
h5,
.h5 {
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--bb-black);
}

h5.fw-bold,
h5.font-weight-bold,
.h5.fw-bold {
  font-weight: 700;
}

.text-xs,
small,
.small {
  font-family: "Quicksand", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

.text-xs.fw-semibold,
.text-xs.font-weight-bolder,
small.fw-semibold {
  font-weight: 600;
}

/* Barra superior — estilo Applications / Calendar (Corporate UI PRO): texto blanco sobre imagen */
.admin-header-glass {
  background-color: transparent !important;
  box-shadow: none !important;
}

.admin-header-glass .breadcrumb-text,
.admin-header-glass .breadcrumb-item,
.admin-header-glass .breadcrumb-item.active,
.admin-header-glass .nav-link {
  color: #fff !important;
}

.admin-header-glass .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.65);
}

.admin-header-glass h6.breadcrumb-text {
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff !important;
}

/* Barra superior derecha (Smart Home): cerrar sesión + avatar; sin búsqueda ni iconos extra */
.admin-header-user-nav .nav-link {
  line-height: 1;
}

.admin-header-avatar-img {
  object-fit: cover;
  vertical-align: middle;
}

/* Franja decorativa detrás del navbar (misma idea que calendar.html) */
.admin-main-hero-bg {
  pointer-events: none;
}

/*
 * Más superficie del gradiente detrás de los listados (el cristal solo se nota sobre el hero).
 * Corporate UI usa h-25 max-height-200; en pantallas altas la tarjeda quedaba sobre bg-gray.
 */
.main-content > .admin-main-hero-bg {
  min-height: 240px;
  max-height: none;
  height: min(32vh, 280px);
}

/*
 * calendar.html / listados: primera fila bajo el navbar (hero).
 * Formularios (tarjeta cristal): más arriba — estilo páginas tipo sweet-alerts / new-project.
 */
.admin-main-body .container-fluid > .row:first-child {
  margin-top: 4rem !important;
}

/* Listados con .admin-list-card: mismo encaje que invitaciones — tarjeta más arriba sobre el hero */
.admin-main-body .container-fluid > .row:first-child:has(.admin-list-card) {
  margin-top: 2rem !important;
}

/* Clases / calendario: primera fila más arriba; tarjetas usan .admin-list-card + .blur en la plantilla */
body.admin-page-class-schedule .admin-main-body .container-fluid.admin-class-schedule-page > .row:first-child {
  margin-top: 2rem !important;
}

/* Niños por padre: primera fila es banner rojo (sin .admin-list-card en esa fila) */
.admin-main-body .container-fluid.admin-parent-children-page > .row:first-child {
  margin-top: 2rem !important;
}

/*
 * Vista «Niños del tutor» — alineada a ecommerce products-list (Corporate UI PRO).
 * Sin la franja .admin-main-hero-bg global (en el demo no hay segundo degradado detrás del navbar);
 * barra Inicio / Usuarios: .admin-header-glass transparente; bordes de tarjeta/tabla como la referencia.
 */
body.admin-page-parent-children-ecommerce .main-content > .admin-main-hero-bg {
  display: none !important;
}

/* Barra de migas / título: sin caja; mismo contenedor que Inicio / Usuarios — totalmente transparente */
body.admin-page-parent-children-ecommerce .admin-header-glass {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.admin-page-parent-children-ecommerce .admin-header-glass .breadcrumb-text,
body.admin-page-parent-children-ecommerce .admin-header-glass .breadcrumb-item,
body.admin-page-parent-children-ecommerce .admin-header-glass .breadcrumb-item.active,
body.admin-page-parent-children-ecommerce .admin-header-glass .nav-link,
body.admin-page-parent-children-ecommerce .admin-header-glass h6.breadcrumb-text {
  color: #1e293b !important;
}

body.admin-page-parent-children-ecommerce .admin-header-glass .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(30, 41, 59, 0.45);
}

body.admin-page-parent-children-ecommerce .admin-header-glass .admin-header-actions .btn.btn-white {
  --bs-btn-color: #1e293b;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ced4da;
  --bs-btn-hover-color: #1e293b;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #ced4da;
  box-shadow: none;
}

body.admin-page-parent-children-ecommerce .admin-header-glass .admin-header-actions .btn.btn-white .ni {
  color: #64748b !important;
}

/* Sin CTAs en el navbar en esta vista: el bloque actions queda vacío; ocultar el contenedor para no reservar hueco */
body.admin-page-parent-children-ecommerce .admin-header-glass .admin-header-actions:not(:has(> *)) {
  display: none !important;
}

/* Cabecera: no usar .input-group en acciones — Corporate UI aplica box-shadow/border-radius al .input-group y se ve un marco bajo los botones */
.admin-header-glass .admin-header-actions {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.admin-page-parent-children-ecommerce .admin-header-glass .sidenav-toggler-line {
  background-color: #1e293b !important;
}

body.admin-page-parent-children-ecommerce .admin-main-body .container-fluid.admin-parent-children-page > .row:first-child {
  margin-top: 1rem !important;
}

body.admin-page-parent-children-ecommerce .admin-parent-children-hero {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 1rem rgba(12, 26, 36, 0.1) !important;
}

body.admin-page-parent-children-ecommerce .admin-parent-children-hero .admin-parent-children-hero-img {
  object-fit: cover;
  pointer-events: none;
}

body.admin-page-parent-children-ecommerce .admin-parent-children-hero .card-body {
  min-height: 8rem;
}

/* Zonas por isla — Smart Home (Corporate UI): isla + cuadrícula de zonas + imagen a la derecha */
body.admin-page-island-zones .admin-island-smart-home-hero.admin-island-zones-hero {
  background: #0f172a;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 1rem rgba(12, 26, 36, 0.1) !important;
}

body.admin-page-island-zones.admin-page-parent-children-ecommerce .admin-island-smart-home-hero .card-body {
  min-height: 0;
}

body.admin-page-island-zones .admin-island-smart-home-left {
  position: relative;
  background: linear-gradient(145deg, #1a3a5c 0%, #1e293b 42%, #0f172a 100%);
  overflow: hidden;
}

body.admin-page-island-zones .admin-island-smart-home-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -36deg,
    transparent,
    transparent 14px,
    rgba(255, 255, 255, 0.04) 14px,
    rgba(255, 255, 255, 0.04) 15px
  );
  pointer-events: none;
}

body.admin-page-island-zones .admin-island-smart-home-left-inner {
  position: relative;
  z-index: 1;
}

body.admin-page-island-zones .admin-island-smart-home-right {
  background: #0f172a;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.admin-page-island-zones .admin-island-smart-home-row {
  min-height: 0;
}

@media (min-width: 992px) {
  body.admin-page-island-zones .admin-island-smart-home-row {
    min-height: 0;
  }

  body.admin-page-island-zones .admin-island-smart-home-right {
    min-height: 0;
  }
}

/* Panel derecho: imagen de isla 300×300, centrada horizontal y vertical en la columna */
body.admin-page-island-zones .admin-island-smart-home-img-pane {
  position: relative;
  min-height: 0;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  background: #0f172a;
  text-align: center;
}

@media (min-width: 992px) {
  body.admin-page-island-zones .admin-island-smart-home-img-pane {
    min-height: 0;
    align-self: stretch;
  }
}

body.admin-page-island-zones .admin-island-smart-home-img {
  display: block;
  width: min(var(--bb-hero-photo-size), 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  max-width: var(--bb-hero-photo-size);
  max-height: var(--bb-hero-photo-size);
  flex: 0 0 auto;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  margin-left: auto;
  margin-right: auto;
}

body.admin-page-island-zones .admin-island-img-placeholder {
  flex: 0 0 auto;
  width: min(var(--bb-hero-photo-size), 100%);
  aspect-ratio: 1 / 1;
  max-width: var(--bb-hero-photo-size);
  max-height: var(--bb-hero-photo-size);
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem;
  background: linear-gradient(145deg, rgba(71, 85, 105, 0.85) 0%, rgba(15, 23, 42, 0.98) 100%);
}

body.admin-page-island-zones .admin-island-smart-home-count {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
}

body.admin-page-island-zones .admin-island-zone-tile.card {
  border-radius: 0.75rem !important;
  background-color: #fff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(12, 26, 36, 0.08) !important;
}

body.admin-page-island-zones .admin-zone-tile-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.admin-page-island-zones .admin-island-zones-grid {
  margin-bottom: 0;
}

body.admin-page-parent-children-ecommerce .admin-parent-children-products-card.card {
  border-radius: 0.75rem;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 0.125rem 0.5rem rgba(12, 26, 36, 0.06) !important;
  background-color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.admin-page-parent-children-ecommerce .admin-parent-children-products-card .card-header {
  background-color: transparent;
  padding-top: 1.25rem;
}

body.admin-page-parent-children-ecommerce .admin-parent-children-products-card .table thead th {
  border-bottom: 1px solid #e9ecef;
  font-size: 0.65rem;
}

.admin-main-body .container-fluid > .row:first-child:has(.admin-form-card) {
  margin-top: 2rem !important;
}

/* Menos padding superior en la página de formulario (acerca la tarjeta al navbar / hero) */
.admin-main-body .container-fluid.px-5.py-4:has(.admin-form-card) {
  padding-top: 1rem !important;
}

/*
 * Un solo scroll vertical (documento). Corporate UI activa PerfectScrollbar en
 * .main-content en Windows → segundo scrollbar. Anulamos el contenedor scrollable.
 * Sticky footer: el copyright queda al pie de la ventana si el contenido es corto.
 */
body.g-sidenav-show .main-content {
  overflow: visible !important;
  min-height: 100vh;
  height: auto !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}

body.g-sidenav-show .main-content .admin-main-body {
  flex: 1 0 auto;
}

body.g-sidenav-show .main-content > footer.footer {
  flex-shrink: 0;
  margin-top: auto;
}

body.g-sidenav-show .main-content.ps .ps__rail-x,
body.g-sidenav-show .main-content.ps .ps__rail-y {
  display: none !important;
}

/*
 * Corporate UI — new-project / sweet-alerts: tarjeta cristal más transparente sobre el hero
 */
.admin-form-card.card.blur.card-body {
  border-radius: var(--bs-border-radius-lg, 0.75rem);
  margin-top: 0 !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
    0 0.25rem 1.25rem -0.25rem rgba(12, 26, 36, 0.12);
}

/*
 * Corporate UI default dashboard — botones «Messages» / «Sync»
 * (btn-sm btn-white|btn-dark + btn-icon + btn-inner--icon / btn-inner--text)
 */
.btn.btn-icon.d-inline-flex,
.btn.btn-icon.d-flex {
  margin-bottom: 0;
}

.btn.btn-icon .btn-inner--icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}

.btn.btn-icon .btn-inner--icon .ni {
  font-size: 0.875rem;
  position: relative;
  top: 0.02rem;
}

.btn.btn-icon .btn-inner--text {
  font-weight: 600;
  white-space: nowrap;
}

/* CTAs en cabecera: legibles sobre el degradado */
.admin-header-glass .admin-header-actions .btn.btn-white {
  --bs-btn-color: var(--bb-black);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--bb-black);
  --bs-btn-hover-bg: var(--bb-gray-bg);
  --bs-btn-hover-border-color: var(--bb-gray-bg);
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: var(--bb-black);
  --bs-btn-active-bg: #e8e8e8;
  --bs-btn-active-border-color: #e8e8e8;
}

.admin-header-glass .admin-header-actions .btn.btn-outline-white {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.85);
  --bs-btn-hover-color: var(--bb-black);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: var(--bb-black);
  --bs-btn-active-bg: #f0f0f0;
  --bs-btn-active-border-color: #fff;
}

/* Tarjetas de listado: cristal esmerilado como card.blur (calendar / DataTables) */
.admin-list-card.card {
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  background-color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    0 0.125rem 5px -0.0625rem rgba(12, 26, 36, 0.1),
    0 0.0625rem 0.0625rem 0 rgba(12, 26, 36, 0.04);
}

.admin-list-card .card-header {
  background-color: transparent;
}

/* Sidebar: negro marca */
.sidenav.bg-slate-900,
.navbar-vertical.bg-slate-900 {
  background-color: var(--bb-black) !important;
}

.sidenav .navbar-brand span {
  color: #fff !important;
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(1rem - 2px);
}

/* Solo el menú lateral: enlaces blancos (no afecta la barra superior) */
.sidenav .navbar-collapse .nav-link,
.sidenav .navbar-collapse .nav-link-text {
  font-size: calc(1.04rem - 2px);
  color: #fff;
}

.sidenav .sidenav-normal,
.sidenav .sidenav-mini-icon {
  font-size: inherit;
}

.sidenav .navbar-collapse .nav-item {
  margin-right: 1.5rem;
}

.sidenav .navbar-collapse .nav-link {
  padding: 0.75rem 1rem;
}

.sidenav h6.text-secondary {
  color: var(--bb-gray-2) !important;
  font-size: calc(0.75rem - 2px) !important;
}

.sidenav.navbar-vertical .navbar-nav > .nav-item.border-start .nav-link.active {
  color: #fff !important;
}

.sidenav.navbar-vertical .navbar-nav > .nav-item.border-start .nav-link.active:before {
  border-color: var(--bb-cian) !important;
}

/*
 * Menú lateral: icono Heroicon (p. ej. Clases — academic-cap) usa stroke="currentColor".
 * El theme Corporate fuerza fill en .color-background/.color-foreground; sin eso, al estar activo
 * el trazo puede verse oscuro (#294C60) sobre fondo #1e293b. Forzar blanco como el resto del ítem.
 */
.sidenav.navbar-vertical.bg-slate-900 .navbar-nav > .nav-item > .nav-link .icon svg.admin-hero-icon {
  color: #fff !important;
}
.sidenav.navbar-vertical.bg-slate-900 .navbar-nav > .nav-item > .nav-link .icon svg.admin-hero-icon path {
  stroke: #fff !important;
}

/* Tablas y tarjetas */
.card {
  border-color: var(--bb-gray-2);
  background-color: #fff;
}

.card .card-header {
  border-bottom-color: rgba(181, 181, 181, 0.5);
}

/*
 * Títulos y subtítulos en tarjetas del admin: negro marca (text-secondary no se lee bien sobre cristal / degradado).
 */
body.g-sidenav-show.bg-gray-100 .admin-main-body .card .card-header h6,
body.g-sidenav-show.bg-gray-100 .admin-main-body .card .card-header h5,
body.g-sidenav-show.bg-gray-100 .admin-main-body .card .card-header h4,
body.g-sidenav-show.bg-gray-100 .admin-main-body .card .card-header h3 {
  color: var(--bb-black) !important;
}

body.g-sidenav-show.bg-gray-100 .admin-main-body .card .card-header p.text-secondary {
  color: var(--bb-black) !important;
}

body.g-sidenav-show.bg-gray-100 .admin-main-body .card.admin-form-card > h6 {
  color: var(--bb-black) !important;
}

body.g-sidenav-show.bg-gray-100 .admin-main-body .card.admin-form-card > p.text-secondary {
  color: var(--bb-black) !important;
}

.table {
  --bs-table-border-color: rgba(181, 181, 181, 0.6);
}

/* Listados (recursos, catálogos): thead y tbody con el mismo número de columnas; ancho estable */
.admin-main-body .admin-list-card .table {
  width: 100%;
  table-layout: auto;
}

/* Descargables: columna Autor — evita colapso de ancho con Simple-DataTables */
.admin-main-body .admin-list-card .admin-list-th-autor,
.admin-main-body .admin-list-card .admin-list-td-autor {
  min-width: 8.5rem;
  max-width: 22rem;
}

/* Retos — icono del tipo de recompensa: no colapsar en flex / DataTables */
.admin-main-body .admin-list-card .bb-challenge-reward-type .bb-challenge-reward-type-img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
  display: block;
}

.table > :not(caption) > * > * {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Botones de formulario: primario negro; outline primario alineado con marca */
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bb-black);
  --bs-btn-border-color: var(--bb-black);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bb-gray);
  --bs-btn-hover-border-color: var(--bb-gray);
  --bs-btn-focus-shadow-rgb: 61, 213, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bb-gray);
  --bs-btn-active-border-color: var(--bb-gray);
}

.btn-outline-primary {
  --bs-btn-color: var(--bb-black);
  --bs-btn-border-color: var(--bb-black);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bb-black);
  --bs-btn-hover-border-color: var(--bb-black);
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bb-black);
  --bs-btn-active-border-color: var(--bb-black);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bb-gray);
  --bs-btn-border-color: var(--bb-gray-2);
  --bs-btn-hover-color: var(--bb-black);
  --bs-btn-hover-bg: var(--bb-gray-bg);
  --bs-btn-hover-border-color: var(--bb-gray);
}

.btn-link {
  --bs-btn-color: var(--bb-gray);
  --bs-btn-hover-color: var(--bb-black);
}

.form-control,
.form-select {
  font-family: var(--bs-body-font-family);
  font-weight: 500;
  border-color: rgba(181, 181, 181, 0.85);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bb-cian);
  box-shadow: 0 0 0 0.2rem rgba(61, 213, 255, 0.25);
}

.text-right {
  text-align: right;
}

.round-button {
  background-color: var(--bb-cian);
  border: 1px solid var(--bb-gray-2);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
}

.round-button img {
  width: 20px;
  height: 20px;
}

.custom-header-color {
  color: var(--bb-gray);
  font-size: 78px;
  font-weight: bold;
}

#patient-info {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
}

form .form-control {
  margin-bottom: 0.5rem !important;
}

.sigma-tooltip {
  max-width: 340px;
  max-height: 380px;
  background-color: #fff;
  border: 1px solid #999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  cursor: auto;
  font-family: Arial;
  font-size: 12px;
  transform: translate(-70%, 20%);
  position: absolute;
}

.sigma-tooltip .icon {
  font-family: FontAwesome;
}

.sigma-tooltip-header {
  font-variant: small-caps;
  font-size: 120%;
  color: #000;
  border-bottom: 1px solid #999;
  padding: 10px;
}

.sigma-tooltip-body {
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: inherit;
  max-height: 280px;
}

.sigma-tooltip-body th {
  color: #999;
  text-align: left;
}

.sigma-tooltip-footer {
  padding: 10px;
  border-top: 1px solid #999;
}

.sigma-tooltip > .arrow {
  border-width: 10px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.sigma-tooltip.top {
  margin-top: -12px;
}

/* Listado instrumentos: fondo negro solo detrás del icono del sello */
.instrument-list-stamp-frame {
  display: inline-block;
  vertical-align: middle;
  background: #000;
  padding: 4px;
  border-radius: 0.25rem;
  line-height: 0;
}

.instrument-list-stamp-img {
  display: block;
  max-height: 40px;
  max-width: 64px;
  object-fit: cover;
  border-radius: 0.2rem;
}

/* Sidebar: flecha de acordeón sin Font Awesome */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  content: "\25BE";
}

.navbar-vertical.bg-white .navbar-nav .nav-link[data-bs-toggle="collapse"]:after {
  color: rgba(30, 41, 59, 0.5);
}

.g-sidenav-hidden .navbar-vertical .nav-item .collapse .nav .nav-item .nav-link[data-bs-toggle="collapse"]:after {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  content: "\25BE";
}

.g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link[data-bs-toggle="collapse"]:after {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  content: "\25BE";
}

/* Toasts Django → Corporate UI (notifications.html): fijo abajo-derecha */
.admin-toast-stack {
  z-index: 1080;
  max-width: 100%;
  box-sizing: border-box;
}

.admin-toast-stack .toast {
  max-width: min(350px, calc(100vw - 2rem));
}

/* Tablas listado admin — alineación tipo Corporate UI (Transactions Table) */
.card.border.shadow-xs .table tbody td {
  vertical-align: middle;
}

/* Iconos Nucleo en barra de acciones (Nuevo …) y en columnas Editar / Eliminar */
.btn-admin-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.btn-admin-toolbar .ni {
  font-size: 1rem;
  line-height: 1;
}
.btn-icon-table {
  min-width: 2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  text-decoration: none;
}
.btn-icon-table.btn-link {
  padding: 0.25rem !important;
}
.btn-icon-table .ni {
  font-size: 1rem;
  line-height: 1;
}
/* Heroicons (tablas Editar / Eliminar) — hereda color del enlace/botón */
.btn-icon-table .admin-hero-icon {
  display: block;
  pointer-events: none;
}
.btn-icon-table.text-danger:hover {
  background-color: rgba(220, 53, 69, 0.08);
}
.btn-icon-table.text-dark:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Simple-DataTables (Corporate UI — applications/datatables.html) */
.admin-list-card .dataTable-wrapper {
  width: 100%;
}
.admin-list-card .dataTable-wrapper .dataTable-top {
  padding-left: 1rem;
  padding-right: 1rem;
}
.admin-list-card .dataTable-wrapper .dataTable-bottom {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Checkboxes .form-check-input: sin Font Awesome */
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:after {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 700;
  content: "\2713";
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/*
 * Profesor — asignación de clases (users/professors/<id>/classes/):
 * Corporate usa appearance:none + :after con Font Awesome (no cargado en base_admin).
 * Sin contenedor .form-check el tic no aplica; con :checked el relleno oscuro puede
 * confundirse con el fondo de la fila → el control parece “desaparecer”.
 * Checkboxes nativos del SO en esta tabla solucionan contraste y accesibilidad.
 */
body.admin-page-professor-classes .admin-parent-children-products-card .table td .form-check .form-check-input[type="checkbox"] {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0;
  vertical-align: middle;
}
body.admin-page-professor-classes .admin-parent-children-products-card .table td .form-check .form-check-input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}

/*
 * Profesor — perfil (#profile) inspirado en Corporate UI Account Settings:
 * franja header-orange-purple (pattern-lines) + avatar + texto sobre la imagen.
 */
body.admin-page-professor-classes .admin-settings-profile-card#profile {
  background: #fff;
  padding: 0;
}
body.admin-page-professor-classes .admin-settings-profile-pattern {
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}
body.admin-page-professor-classes .admin-settings-profile-header-overlay {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(15, 23, 42, 0.45) 0%,
    rgba(15, 23, 42, 0.2) 45%,
    rgba(15, 23, 42, 0.5) 100%
  );
}
body.admin-page-professor-classes .admin-settings-profile-header {
  min-height: 5.5rem;
}
body.admin-page-professor-classes .admin-settings-profile-avatar-wrap {
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
}
body.admin-page-professor-classes .admin-settings-profile-avatar-img,
body.admin-page-professor-classes .admin-settings-profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
body.admin-page-professor-classes .admin-settings-profile-avatar-placeholder {
  min-height: 5.5rem;
}

/* Lecciones — pestañas por isla (contraste claro: inactivo gris, activo cian marca + texto oscuro) */
.admin-skill-island-tabs-wrap {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
/*
 * No usar nav-pills en estas listas: corporate-ui-dashboard.js initNavs() añade un .moving-tab
 * con "—" encima del primer botón. El estilo viene de .admin-skill-island-tabs (fix_admin).
 */
.admin-skill-island-tabs .moving-tab {
  display: none !important;
}
.admin-skill-island-tabs .nav-link {
  white-space: nowrap;
  border-radius: 0.5rem;
  color: #334155;
  background: #e2e8f0;
  border: 1px solid #94a3b8;
  font-weight: 500;
}
.admin-skill-island-tabs .nav-link:hover:not(.active) {
  background: #cbd5e1;
  color: #0f172a;
}
.admin-skill-island-tabs .nav-link.active {
  color: #0f172a;
  background: #3dd5ff;
  border-color: #0ea5e9;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Horarios (classes/clases/): filtros por instrumento en grid — sin scroll horizontal */
body.admin-page-class-schedule .admin-class-schedule-instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}
body.admin-page-class-schedule .admin-class-schedule-instrument-grid .admin-class-schedule-instrument-item {
  min-width: 0;
}
body.admin-page-class-schedule .admin-class-schedule-instrument-grid .nav-link {
  width: 100%;
  min-height: 2.5rem;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  line-height: 1.25;
}

/* Horarios: color por instrumento (variables --sch-* en cada enlace) */
body.admin-page-class-schedule .admin-class-schedule-instrument-link.nav-link {
  border-width: 1px;
  border-style: solid;
}
body.admin-page-class-schedule .admin-class-schedule-instrument-link.nav-link:not(.active) {
  background-color: var(--sch-bg) !important;
  border-color: var(--sch-border) !important;
  color: var(--sch-text) !important;
}
body.admin-page-class-schedule .admin-class-schedule-instrument-link.nav-link.active {
  background-color: var(--sch-bg-active) !important;
  border-color: var(--sch-border) !important;
  color: var(--sch-text) !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
body.admin-page-class-schedule .admin-class-schedule-instrument-link.nav-link:hover:not(.active) {
  filter: brightness(0.97);
}

.cursor-pointer {
  cursor: pointer;
}

/* Hero compacto — isla / niño: imagen 300×300 centrada + barra de datos (list_skills, lecciones, instrumentos, etc.) */
.admin-photo-hero-compact {
  background-color: #1e293b;
}
.admin-photo-hero-compact-figure {
  min-height: 0;
  width: 100%;
  text-align: center;
}
.admin-photo-hero-compact-img-wrap {
  width: min(100%, var(--bb-hero-photo-size));
  max-width: var(--bb-hero-photo-size);
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: var(--bb-hero-photo-size);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.admin-photo-hero-compact-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin-left: auto;
  margin-right: auto;
}
.admin-photo-hero-compact-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-shrink: 0;
  border-radius: 0.5rem;
  margin-left: auto;
  margin-right: auto;
}
.admin-photo-hero-compact-meta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Compat: si queda algún bloque antiguo con estas clases */
.admin-lesson-child-hero {
  background-color: #1e293b;
}
.admin-lesson-child-hero-img {
  object-fit: contain;
  object-position: center;
}

/* Login público — Corporate UI (sin navbar / sin menú lateral) */
body.admin-login-page {
  font-family: var(--bs-body-font-family);
  color: var(--bb-gray);
  background-color: #1e293b;
}

body.admin-login-page .admin-login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  /* Por defecto: bg-gray.jpg (verification/basic); velado suave para foto clara */
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}

body.admin-login-page .admin-login-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.58) 0%,
    rgba(30, 41, 59, 0.42) 50%,
    rgba(15, 23, 42, 0.65) 100%
  );
}

/* Panel admin: mismo fondo que verification/basic, velado un poco más ligero */
body.admin-login-page.admin-login-verification .admin-login-bg::after {
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.48) 0%,
    rgba(30, 41, 59, 0.35) 45%,
    rgba(15, 23, 42, 0.52) 100%
  );
}

/* Tarjeta de login admin (un ~10% más ancha que 19rem tras feedback) */
body.admin-login-page.admin-login-verification .admin-login-card-wrap {
  max-width: 20.9rem;
}

body.admin-login-page .main-content,
body.admin-login-page .footer {
  position: relative;
  z-index: 1;
}

body.admin-login-page .admin-login-brand-logo {
  display: inline-block;
  width: 85%;
  max-width: 320px;
  height: auto;
}

@media (min-width: 576px) {
  body.admin-login-page .admin-login-brand-logo {
    max-width: 380px;
  }
}

/* Páginas de error — Corporate UI Authentication Error (403 / 404 / 500), sin arte, solo contenido + footer */
body.admin-login-page.admin-error-page .admin-error-card {
  background-color: #fff;
}
body.admin-login-page.admin-error-page .admin-error-code {
  font-size: clamp(3.5rem, 12vw, 6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #1e293b 0%, #64748b 45%, #3dd5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.admin-login-page.admin-error-page .letter-spacing-1 {
  letter-spacing: 0.08em;
}

/*
 * Dashboard admin — KPI estilo Analytics (Corporate UI): cristal sobre el hero.
 * fix_admin fuerza .card { background #fff }; hay que ganar con mayor especificidad + !important.
 * Misma receta que .admin-form-card.card.blur (new-project / sweet-alerts).
 */
.admin-main-body .container-fluid.bb-admin-dashboard > .row:first-child {
  margin-top: 2rem !important;
}

.bb-admin-dashboard-kpi .bb-admin-kpi-card.card.blur {
  --bs-card-bg: transparent;
  border-radius: 0.75rem;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.42) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
    0 0.25rem 1.25rem -0.25rem rgba(12, 26, 36, 0.12) !important;
}

.bb-admin-dashboard-kpi .bb-admin-kpi-card.card.blur .card-body {
  background-color: transparent !important;
  color: var(--bb-black);
}

.bb-admin-dashboard-kpi .bb-admin-kpi-card.card.blur .card-body p,
.bb-admin-dashboard-kpi .bb-admin-kpi-card.card.blur .card-body h3 {
  color: var(--bb-black);
}

/* Dashboard admin — timeline (inspiración Corporate UI Projects / Timeline) */
.bb-admin-timeline {
  position: relative;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.bb-admin-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 0;
  border-left: 2px dashed var(--bb-gray-2);
  z-index: 0;
}

.bb-admin-timeline-item {
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: 1.35rem;
}

.bb-admin-timeline-item:last-child {
  padding-bottom: 0;
}

.bb-admin-timeline-dot {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bb-cian);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(49, 49, 49, 0.35);
  z-index: 1;
}

/* Dashboard admin — islas: imagen máximo 300×300 px, centrada (contain) */
.bb-admin-island-card .bb-admin-island-figure {
  box-sizing: border-box;
  width: min(100%, 300px);
  max-width: 300px;
  max-height: 300px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bb-admin-island-card .bb-admin-island-img {
  display: block;
  max-width: min(100%, 300px);
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.bb-admin-island-card .bb-admin-island-img-placeholder {
  box-sizing: border-box;
  width: min(100%, 300px);
  max-width: 300px;
  height: auto;
  max-height: 300px;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* Evaluación de reto — fondo como #profile en Account Settings: <img> header-orange-purple en capa absoluta */
.bb-challenge-evaluate-page .bb-challenge-evaluate-hero {
  border-radius: 0.5rem 0.5rem 0 0;
  color: #fff;
  background-color: #3d1f5c;
}

.bb-challenge-evaluate-page .bb-challenge-evaluate-hero .bb-challenge-evaluate-hero-bg {
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Legibilidad sobre la foto (el demo no usa velo oscuro; sombra suave en texto) */
.bb-challenge-evaluate-page .bb-challenge-evaluate-hero h2,
.bb-challenge-evaluate-page .bb-challenge-evaluate-hero .text-white-50 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.bb-challenge-evaluate-page .bb-challenge-evaluate-hero-inner {
  position: relative;
}

.bb-challenge-evaluate-page .bb-challenge-evaluate-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bb-challenge-evaluate-page .bb-challenge-evaluate-icon i {
  font-size: 1.75rem;
  color: #fff;
}

.bb-challenge-evaluate-page .bb-challenge-evaluate-hero h2,
.bb-challenge-evaluate-page .bb-challenge-evaluate-hero .h2 {
  color: #fff;
}

.bb-challenge-evaluate-page .bb-challenge-evaluate-hero .text-white-50 {
  color: rgba(255, 255, 255, 0.72) !important;
}

.bb-challenge-evaluate-meta {
  background: var(--bb-gray-bg);
  border-radius: 0.5rem;
  border: 1px solid rgba(181, 181, 181, 0.45);
}

.bb-challenge-evaluate-meta .bb-kv-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bb-gray-2);
  margin-bottom: 0.25rem;
}

.bb-challenge-evaluate-meta .bb-kv-value {
  font-size: 0.9375rem;
  color: var(--bb-gray);
  font-weight: 600;
  margin-bottom: 0;
}