/**
 * Skins de layout staff (organización / densidad de pantalla).
 * Independiente del tema de color (data-ui-theme).
 *
 * html[data-ui-skin="classic"]  → layout actual, más aire
 * html[data-ui-skin="compact"]  → denso, menos whitespace (default)
 */

/* --- Classic: sin cambios estructurales (baseline) --- */
html[data-ui-skin="classic"] {
  --ui-space-page: 1.5rem;
  --ui-space-block: 1.5rem;
  --ui-space-card: 1rem;
  --ui-control-h: 2.5rem;
  --ui-row-pad: 0.75rem;
}

/* --- Compact: densificar dashboard y managers --- */
html[data-ui-skin="compact"] {
  --ui-space-page: 0.65rem;
  --ui-space-block: 0.5rem;
  --ui-space-card: 0.55rem;
  --ui-control-h: 2rem;
  --ui-row-pad: 0.4rem;
}

/* Skins: matiz de intensidad en botones de acción del listado */
html[data-ui-skin="classic"] .studies-table .btn-action.btn-info,
html[data-ui-skin="classic"] .studies-table .btn-action.btn-view,
html[data-ui-skin="classic"] .studies-table .btn-action.btn-download {
  background: transparent !important;
  border-width: 1.5px !important;
}
html[data-ui-skin="classic"] .studies-table .btn-action.btn-info {
  border-color: rgba(var(--ui-brand-rgb), 0.4) !important;
  color: var(--ui-brand-dark) !important;
}
html[data-ui-skin="classic"] .studies-table .btn-action.btn-view {
  border-color: var(--ui-brand) !important;
  color: var(--ui-brand) !important;
}
html[data-ui-skin="classic"] .studies-table .btn-action.btn-download {
  border-color: color-mix(in srgb, var(--ui-brand-accent) 50%, var(--ui-border)) !important;
  color: var(--ui-brand-dark) !important;
}

html[data-ui-skin="rail"] .studies-table .btn-action.btn-view {
  background: var(--ui-brand) !important;
  border-color: var(--ui-brand-dark) !important;
  color: #fff !important;
}
html[data-ui-skin="rail"] .studies-table .btn-action.btn-view:hover,
html[data-ui-skin="rail"] .studies-table .btn-action.btn-view:focus {
  background: var(--ui-brand-dark) !important;
  filter: brightness(1.05);
}

html[data-ui-skin="topnav"] .studies-table .btn-action.btn-info,
html[data-ui-skin="topnav"] .studies-table .btn-action.btn-view,
html[data-ui-skin="topnav"] .studies-table .btn-action.btn-download {
  border-radius: 999px !important;
}

html[data-ui-skin="compact"] .studies-table .btn-action.btn-info {
  background: rgba(var(--ui-brand-rgb), 0.08) !important;
}
html[data-ui-skin="compact"] .studies-table .btn-action.btn-view {
  background: rgba(var(--ui-brand-rgb), 0.14) !important;
}

html[data-ui-skin="compact"] .main-content .container-fluid {
  padding: var(--ui-space-page) !important;
}

html[data-ui-skin="compact"] .main-content .container-fluid > .row:first-child {
  margin-bottom: var(--ui-space-block) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Banner: barra delgada en una sola fila (desktop) */
html[data-ui-skin="compact"] .welcome-card {
  padding: 0.45rem 0.85rem !important;
  margin-bottom: 0 !important;
  border-radius: 0.45rem !important;
  box-shadow: var(--ui-shadow, 0 1px 4px rgba(0,0,0,.08)) !important;
}

html[data-ui-skin="compact"] .welcome-card .row.align-items-center {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.25rem;
}

html[data-ui-skin="compact"] .welcome-title {
  font-size: 1rem !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

html[data-ui-skin="compact"] .welcome-subtitle {
  display: none !important;
}

html[data-ui-skin="compact"] .welcome-stats {
  gap: 0.75rem !important;
  margin-top: 0 !important;
}

html[data-ui-skin="compact"] .stat-number {
  font-size: 1.15rem !important;
  margin-bottom: 0 !important;
}

html[data-ui-skin="compact"] .stat-label {
  font-size: 0.58rem !important;
  letter-spacing: 0.2px;
}

html[data-ui-skin="compact"] .welcome-logo-container {
  display: none !important;
}

/* Filtros: menos aire, labels small ocultos en desktop compact */
html[data-ui-skin="compact"] .search-filters {
  margin-bottom: var(--ui-space-block) !important;
  padding: 0.55rem 0.75rem !important;
  border-radius: 0.45rem !important;
}

html[data-ui-skin="compact"] .search-filters .filter-title {
  font-size: 0.8rem !important;
  margin-bottom: 0.35rem !important;
}

html[data-ui-skin="compact"] .search-filters .row {
  --bs-gutter-x: 0.4rem;
  --bs-gutter-y: 0.35rem;
}

html[data-ui-skin="compact"] .search-filters small {
  display: none !important;
}

html[data-ui-skin="compact"] .search-filters .form-control,
html[data-ui-skin="compact"] .search-filters .form-select,
html[data-ui-skin="compact"] .search-filters .btn {
  min-height: var(--ui-control-h);
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  font-size: 0.85rem !important;
}

/* Modalidades: chips densos, menos margen */
html[data-ui-skin="compact"] .modality-filters {
  margin-bottom: var(--ui-space-block) !important;
  padding: 0.45rem 0.65rem !important;
  border-radius: 0.45rem !important;
}

html[data-ui-skin="compact"] .modality-filters > div:first-child {
  margin-bottom: 0.3rem !important;
}

html[data-ui-skin="compact"] .modality-filters .filter-label {
  font-size: 0.78rem !important;
}

html[data-ui-skin="compact"] .modality-btn {
  padding: 0.25rem 0.55rem !important;
  font-size: 0.75rem !important;
  line-height: 1.2;
}

html[data-ui-skin="compact"] #cacheStatus {
  font-size: 0.7rem !important;
}

/* Tabla / lista: filas más bajas */
html[data-ui-skin="compact"] .card {
  border-radius: 0.45rem !important;
}

html[data-ui-skin="compact"] .card-header {
  padding: 0.45rem 0.75rem !important;
}

html[data-ui-skin="compact"] .card-title {
  font-size: 0.9rem !important;
}

html[data-ui-skin="compact"] .studies-table th,
html[data-ui-skin="compact"] .studies-table td {
  padding: var(--ui-row-pad) 0.5rem !important;
  font-size: 0.85rem;
  vertical-align: middle;
}

html[data-ui-skin="compact"] .studies-table .btn-sm {
  padding: 0.2rem 0.45rem !important;
  font-size: 0.75rem !important;
  min-height: 1.85rem;
}

html[data-ui-skin="compact"] .card-footer {
  padding: 0.45rem 0.75rem !important;
}

/* Desktop compact: banner en una línea título | stats */
@media (min-width: 992px) {
  html[data-ui-skin="compact"] .welcome-card .col-12.col-lg-8,
  html[data-ui-skin="compact"] .welcome-card .col-12.col-lg-4 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  html[data-ui-skin="compact"] .welcome-card .row.align-items-center {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  html[data-ui-skin="compact"] .welcome-stats {
    flex-wrap: nowrap !important;
  }
}

/* Móvil compact: aún más denso */
@media (max-width: 767.98px) {
  html[data-ui-skin="compact"] .main-content .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.4rem !important;
  }

  html[data-ui-skin="compact"] .welcome-card {
    padding: 0.35rem 0.5rem !important;
  }

  html[data-ui-skin="compact"] .search-filters,
  html[data-ui-skin="compact"] .modality-filters {
    padding: 0.4rem 0.5rem !important;
    margin-bottom: 0.4rem !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr {
    margin: 0.45rem !important;
    padding: 0.55rem !important;
  }
}

/* Compact + mobile: cards de estudio más densas (todos los skins densos) */
@media (max-width: 767.98px) {
  html[data-ui-skin="compact"] .studies-table tbody tr,
  html[data-ui-skin="rail"] .studies-table tbody tr {
    margin: 0.35rem 0.4rem !important;
    padding: 0.45rem 0.55rem !important;
    row-gap: 0.1rem !important;
    border-radius: 0.4rem !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Paciente"],
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Paciente"] {
    padding-bottom: 0.25rem !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Paciente"] .fw-semibold,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Paciente"] .fw-semibold {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Paciente"] small,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Paciente"] small {
    font-size: 0.7rem !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Fecha"],
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Fecha"] {
    font-size: 0.72rem !important;
    padding: 0.05rem 0 !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Estudio"],
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Estudio"] {
    font-size: 0.75rem !important;
    padding: 0.05rem 0 !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Antecedentes"],
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Antecedentes"] {
    padding: 0.25rem 0 0 0 !important;
    margin-top: 0 !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Acciones"],
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Acciones"] {
    padding-top: 0.35rem !important;
  }

  /* Acciones táctiles: no achicar en compact/rail (antes 30px quedaban impracticables) */
  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Acciones"] .btn-action,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Acciones"] .btn-action,
  html[data-ui-skin="topnav"] .studies-table tbody tr > td[data-label="Acciones"] .btn-action,
  html[data-ui-skin="classic"] .studies-table tbody tr > td[data-label="Acciones"] .btn-action {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.95rem !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions-report .btn-action,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions-report .btn-action,
  html[data-ui-skin="topnav"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions-report .btn-action,
  html[data-ui-skin="classic"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions-report .btn-action {
    padding: 0.55rem 0.85rem !important;
    font-size: 1.05rem !important;
    min-height: 48px !important;
    min-width: 48px !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions,
  html[data-ui-skin="topnav"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions,
  html[data-ui-skin="classic"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100%;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions-main,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions-main {
    gap: 0.55rem !important;
  }

  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Modalidad"] .badge,
  html[data-ui-skin="compact"] .studies-table tbody tr > td[data-label="Estado"] .badge,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Modalidad"] .badge,
  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Estado"] .badge {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.35rem !important;
  }
}


/* --- Rail: barra de controles + cards densas (look distinto) --- */
html[data-ui-skin="rail"] {
  --ui-space-page: 0.5rem;
  --ui-space-block: 0.4rem;
  --ui-space-card: 0.4rem;
  --ui-control-h: 1.85rem;
  --ui-row-pad: 0.35rem;
}

html[data-ui-skin="rail"] .main-content .container-fluid {
  padding: var(--ui-space-page) !important;
}

html[data-ui-skin="rail"] .main-content .container-fluid > .row:first-child {
  margin-bottom: 0.35rem !important;
  padding: 0 !important;
}

/* Welcome como franja de métricas */
html[data-ui-skin="rail"] .welcome-card {
  padding: 0.35rem 0.65rem !important;
  margin-bottom: 0 !important;
  border-radius: 0.35rem !important;
}

html[data-ui-skin="rail"] .welcome-title {
  font-size: 0.92rem !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

html[data-ui-skin="rail"] .welcome-subtitle,
html[data-ui-skin="rail"] .welcome-logo-container {
  display: none !important;
}

html[data-ui-skin="rail"] .welcome-stats {
  gap: 0.4rem !important;
  margin: 0 !important;
}

html[data-ui-skin="rail"] .stat-item {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  min-width: auto;
}

html[data-ui-skin="rail"] .stat-number {
  font-size: 0.95rem !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

html[data-ui-skin="rail"] .stat-label {
  font-size: 0.5rem !important;
  letter-spacing: 0.3px;
  opacity: 0.85;
}

@media (min-width: 992px) {
  html[data-ui-skin="rail"] .welcome-card .col-12.col-lg-8,
  html[data-ui-skin="rail"] .welcome-card .col-12.col-lg-4 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  html[data-ui-skin="rail"] .welcome-card .row.align-items-center {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
}

/* Controles: toolbar horizontal denso (vence CSS móvil de la página) */
html[data-ui-skin="rail"] .search-filters {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 0.25rem !important;
  padding: 0.3rem 0.45rem !important;
  border-radius: 0.35rem !important;
  border-left: 3px solid var(--ui-brand) !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible;
}

html[data-ui-skin="rail"] .search-filters .filter-title,
html[data-ui-skin="rail"] .search-filters small,
html[data-ui-skin="rail"] .filter-quick-dates .text-muted.small {
  display: none !important;
}

html[data-ui-skin="rail"] .search-filters > .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.25rem 0.3rem !important;
  margin: 0 !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

html[data-ui-skin="rail"] .search-filters > .row > [class*="col-"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  order: 0 !important;
}

/* Fila 1: fechas + id + atajos + buscar */
html[data-ui-skin="rail"] .search-filters .filter-date-from,
html[data-ui-skin="rail"] .search-filters .filter-date-to {
  width: 7.6rem !important;
  flex: 0 0 7.6rem !important;
  max-width: 7.6rem !important;
}

html[data-ui-skin="rail"] .search-filters .filter-patient-id {
  width: 7rem !important;
  flex: 0 0 7rem !important;
  max-width: 7rem !important;
}

html[data-ui-skin="rail"] .search-filters .filter-quick-dates {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

html[data-ui-skin="rail"] .search-filters .filter-quick-dates > .d-flex {
  flex-wrap: wrap !important;
  gap: 0.2rem !important;
  align-items: center !important;
}

html[data-ui-skin="rail"] .search-filters .filter-search-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
}

html[data-ui-skin="rail"] .search-filters .filter-search-btn .btn-search {
  width: auto !important;
  min-width: 0 !important;
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
}

html[data-ui-skin="rail"] .search-filters .filter-search-btn .btn-search .fa-search {
  margin-right: 0.25rem !important;
}

/* Aplana filas anidadas: todos los controles en el mismo wrap (sin scroll horizontal) */
html[data-ui-skin="rail"] .search-filters .filter-search-institution-row,
html[data-ui-skin="rail"] .search-filters .filter-search-institution-row > .row {
  display: contents !important;
}

html[data-ui-skin="rail"] .search-filters .filter-search-field {
  flex: 1 1 10rem !important;
  min-width: 8rem !important;
  max-width: 18rem !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[data-ui-skin="rail"] .search-filters .filter-institution,
html[data-ui-skin="rail"] .search-filters .filter-report-status {
  flex: 1 1 9rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(12rem, 100%) !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[data-ui-skin="rail"] .search-filters #assignmentSourceFilterWrap,
html[data-ui-skin="rail"] .search-filters #pinWorkspaceOnTopWrap {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[data-ui-skin="rail"] .search-filters .form-check {
  display: inline-flex !important;
  align-items: center !important;
  min-height: var(--ui-control-h);
  height: var(--ui-control-h);
  padding: 0 0.4rem !important;
  margin: 0 !important;
  border: 1px solid var(--ui-border, #dee2e6);
  border-radius: 0.3rem;
  background: var(--ui-surface-elevated, transparent);
  white-space: nowrap;
}

html[data-ui-skin="rail"] .search-filters .form-check-input {
  width: 1.5rem !important;
  height: 0.85rem !important;
  margin: 0 !important;
}

html[data-ui-skin="rail"] .search-filters .form-check-label {
  font-size: 0.7rem !important;
  margin-left: 0.3rem !important;
  color: var(--ui-text-muted, #6c757d);
  line-height: 1;
}

html[data-ui-skin="rail"] .search-filters .form-control,
html[data-ui-skin="rail"] .search-filters .form-select,
html[data-ui-skin="rail"] .search-filters .btn {
  min-height: var(--ui-control-h) !important;
  height: var(--ui-control-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  font-size: 0.75rem !important;
  border-radius: 0.3rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html[data-ui-skin="rail"] .search-filters .form-select {
  padding-right: 1.6rem !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Botones no deben estirarse al 100% */
html[data-ui-skin="rail"] .search-filters .btn,
html[data-ui-skin="rail"] .search-filters .btn-group .btn {
  width: auto !important;
}

html[data-ui-skin="rail"] .search-filters .btn-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

html[data-ui-skin="rail"] .search-filters .btn-group .btn {
  font-size: 0.68rem !important;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  height: var(--ui-control-h) !important;
  line-height: 1 !important;
}

html[data-ui-skin="rail"] #quickDateLast7 {
  font-size: 0 !important;
}
html[data-ui-skin="rail"] #quickDateLast7::after {
  content: "7d";
  font-size: 0.68rem;
}

/* Modalidades: carril horizontal */
html[data-ui-skin="rail"] .modality-filters {
  margin-bottom: 0.25rem !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 0.35rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem;
  overflow: visible;
  border-left: 3px solid var(--ui-brand) !important;
}

html[data-ui-skin="rail"] .modality-filters > div:first-child {
  margin: 0 !important;
  flex: 0 0 auto;
  white-space: nowrap;
}

html[data-ui-skin="rail"] .modality-filters .filter-label {
  font-size: 0 !important;
  margin: 0 !important;
}
html[data-ui-skin="rail"] .modality-filters .filter-label::before {
  content: "Mod";
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
  color: var(--ui-text-muted, #6c757d);
}
html[data-ui-skin="rail"] .modality-filters .filter-label .badge {
  font-size: 0.65rem !important;
  vertical-align: middle;
}

html[data-ui-skin="rail"] .modality-filters .d-flex.flex-wrap {
  flex-wrap: wrap !important;
  flex: 1 1 auto;
  gap: 0.2rem !important;
  margin: 0 !important;
}

html[data-ui-skin="rail"] .modality-btn {
  padding: 0.1rem 0.4rem !important;
  font-size: 0.68rem !important;
  border-radius: 999px !important;
  white-space: nowrap;
  line-height: 1.2;
}

html[data-ui-skin="rail"] #cacheStatus {
  display: none !important;
}

/* Móvil / tablet / landscape: wrap natural, sin scroll horizontal */
@media (max-width: 991.98px) {
  html[data-ui-skin="rail"] .search-filters .filter-date-from,
  html[data-ui-skin="rail"] .search-filters .filter-date-to {
    flex: 0 1 6.5rem !important;
    width: 6.5rem !important;
    max-width: 100% !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-patient-id {
    flex: 0 1 6rem !important;
    width: 6rem !important;
    max-width: 100% !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-search-field {
    flex: 1 1 10rem !important;
    min-width: 8rem !important;
    max-width: 100% !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-institution,
  html[data-ui-skin="rail"] .search-filters .filter-report-status {
    flex: 1 1 8.5rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767.98px) {
  html[data-ui-skin="rail"] .search-filters {
    top: 56px;
    padding: 0.25rem 0.35rem !important;
    overflow: visible !important;
  }

  html[data-ui-skin="rail"] .search-filters > .row {
    flex-wrap: wrap !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-date-from,
  html[data-ui-skin="rail"] .search-filters .filter-date-to {
    flex: 1 1 calc(50% - 0.2rem) !important;
    width: calc(50% - 0.2rem) !important;
    max-width: calc(50% - 0.2rem) !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-patient-id {
    flex: 1 1 5.5rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-quick-dates {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-search-btn {
    flex: 0 0 auto !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-search-btn .btn-search {
    min-width: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0 !important;
  }
  html[data-ui-skin="rail"] .search-filters .filter-search-btn .btn-search i {
    font-size: 0.85rem !important;
    margin: 0 !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-search-field {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  html[data-ui-skin="rail"] .search-filters .filter-institution,
  html[data-ui-skin="rail"] .search-filters .filter-report-status {
    flex: 1 1 calc(50% - 0.2rem) !important;
    width: calc(50% - 0.2rem) !important;
    max-width: calc(50% - 0.2rem) !important;
    min-width: 0 !important;
  }

  html[data-ui-skin="rail"] .modality-filters {
    margin-bottom: 0.25rem !important;
    padding: 0.2rem 0.3rem !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
}


html[data-ui-skin="rail"] .card {
  border-radius: 0.35rem !important;
  border: 1px solid var(--ui-border, #dee2e6) !important;
}

html[data-ui-skin="rail"] .card-header {
  padding: 0.35rem 0.6rem !important;
  border-bottom: 1px solid var(--ui-border, #dee2e6) !important;
}

html[data-ui-skin="rail"] .card-title {
  font-size: 0.85rem !important;
}

html[data-ui-skin="rail"] .studies-table th,
html[data-ui-skin="rail"] .studies-table td {
  padding: var(--ui-row-pad) 0.45rem !important;
  font-size: 0.82rem;
  vertical-align: middle;
}

html[data-ui-skin="rail"] .studies-table .btn-sm {
  padding: 0.15rem 0.4rem !important;
  font-size: 0.72rem !important;
  min-height: 1.7rem;
}

html[data-ui-skin="rail"] .card-footer {
  padding: 0.35rem 0.6rem !important;
}

/* Rail mobile: layout de card más compacto (menos filas) */
@media (max-width: 767.98px) {
  html[data-ui-skin="rail"] .main-content .container-fluid {
    padding: 0.35rem !important;
  }

  html[data-ui-skin="rail"] .search-filters {
    top: 56px; /* bajo mobile-header fijo */
  }

  html[data-ui-skin="rail"] .studies-table tbody tr {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "paciente modalidad"
      "fecha estado"
      "estudio estudio"
      "acciones acciones" !important;
    column-gap: 0.35rem !important;
  }

  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Antecedentes"] {
    display: none !important;
  }

  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Modalidad"] {
    justify-self: end !important;
  }

  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Estado"] {
    justify-self: end !important;
  }

  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions-main {
    gap: 0.5rem !important;
  }

  html[data-ui-skin="rail"] .studies-table tbody tr > td[data-label="Acciones"] .study-card-actions {
    justify-content: space-between !important;
    width: 100%;
  }
}



/* Managers genéricos: densificar filtros/cards en Rail */
html[data-ui-skin="rail"] .informes-filters-card,
html[data-ui-skin="compact"] .informes-filters-card {
  margin-bottom: 0.35rem !important;
}
html[data-ui-skin="rail"] .informes-filters-card .card-header,
html[data-ui-skin="rail"] .informes-filters-card .card-body {
  padding: 0.4rem 0.6rem !important;
}
html[data-ui-skin="rail"] .informes-filters-card .row {
  --bs-gutter-x: 0.4rem;
  --bs-gutter-y: 0.35rem;
}
html[data-ui-skin="rail"] .informes-filters-card .form-control,
html[data-ui-skin="rail"] .informes-filters-card .form-select,
html[data-ui-skin="rail"] .informes-filters-card .btn {
  min-height: var(--ui-control-h, 1.85rem);
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  font-size: 0.8rem !important;
}
html[data-ui-skin="rail"] .filter-priority {
  flex: 0 1 8rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ==========================================================================
 * Skin topnav — barra superior con menú (sin sidebar)
 * Densidad de contenido alineada a compact/rail.
 * ========================================================================== */
html[data-ui-skin="topnav"] {
  --ui-space-page: 0.75rem;
  --ui-space-block: 0.55rem;
  --ui-space-card: 0.6rem;
  --ui-control-h: 2rem;
  --ui-row-pad: 0.4rem;
  --ui-topnav-h: 3.25rem;
}

html[data-ui-skin="topnav"] .sidebar,
html[data-ui-skin="topnav"] .sidebar-overlay,
html[data-ui-skin="topnav"] .mobile-header,
html[data-ui-skin="topnav"] #sidebarToggleShow,
html[data-ui-skin="topnav"] .ui-fullscreen-btn--desktop,
html[data-ui-skin="topnav"] .ui-chrome-actions,
html[data-ui-skin="topnav"] .ui-pwa-install-btn--desktop,
html[data-ui-skin="topnav"] .ui-pwa-install-btn--floating {
  display: none !important;
}

/* En topnav: instalar + fullscreen a la izquierda de cuenta */
html[data-ui-skin="topnav"] .ui-topnav__actions .ui-pwa-install-btn--inline {
  display: inline-flex !important;
}

html[data-ui-skin="topnav"] #sidebarLayout.layout-container,
html[data-ui-skin="topnav"] .layout-container.ui-topnav-layout {
  padding-top: var(--ui-topnav-h, 3.25rem);
}

/* Páginas sin #sidebarLayout (viewer, scaffolds): dejar espacio bajo la barra fija */
html[data-ui-skin="topnav"] body.ui-topnav-body-pad {
  padding-top: var(--ui-topnav-h, 3.25rem);
}

html[data-ui-skin="topnav"] #sidebarLayout .main-content,
html[data-ui-skin="topnav"] #mainContentRoot,
html[data-ui-skin="topnav"] .layout-container.sidebar-hidden .main-content {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

html[data-ui-skin="topnav"] .main-content .container-fluid {
  padding: var(--ui-space-page) !important;
}

.ui-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  height: var(--ui-topnav-h, 3.25rem);
  background: var(--ui-topnav-bg, #fff);
  border-bottom: 1px solid var(--ui-topnav-border, #e2e8f0);
  box-shadow: var(--ui-shadow, 0 1px 6px rgba(0, 0, 0, 0.06));
  color: var(--ui-topnav-text, #0f172a);
  overflow: visible;
}

.ui-topnav[hidden] {
  display: none !important;
}

.ui-topnav__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 0 0.75rem;
  max-width: 100%;
  overflow: visible;
  position: relative;
}

.ui-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  min-width: 0;
}

.ui-topnav__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ui-topnav__title {
  font-weight: 650;
  font-size: 0.95rem;
  white-space: nowrap;
}

.ui-topnav__toggle {
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
}

.ui-topnav__nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.ui-topnav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  flex-wrap: nowrap;
}

.ui-topnav__item.dropdown {
  position: relative;
}

.ui-topnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.4rem;
  color: var(--ui-topnav-muted, #64748b);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1.2;
}

.ui-topnav__link i {
  font-size: 0.85rem;
  opacity: 0.9;
}

.ui-topnav__link:hover {
  color: var(--ui-topnav-text, #0f172a);
  background: rgba(var(--ui-brand-rgb, 15, 118, 110), 0.08);
}

.ui-topnav__link.is-active,
.ui-topnav__item.dropdown.show > .ui-topnav__link {
  color: var(--ui-topnav-active-text, var(--ui-brand));
  background: var(--ui-topnav-active, rgba(15, 118, 110, 0.12));
  font-weight: 600;
}

.ui-topnav__link.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: 0.15em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.ui-topnav__dropdown {
  display: none !important;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1060;
  min-width: 14rem;
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--ui-topnav-bg, #fff);
  border: 1px solid var(--ui-topnav-border, #e2e8f0);
  border-radius: 0.45rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.ui-topnav__item.dropdown.show > .ui-topnav__dropdown {
  display: block !important;
}

.ui-topnav__dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.88rem;
  color: var(--ui-topnav-text, #0f172a);
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  white-space: nowrap;
}

.ui-topnav__dropdown .dropdown-item:hover {
  background: rgba(var(--ui-brand-rgb, 15, 118, 110), 0.1);
}

.ui-topnav__dropdown .dropdown-item.active {
  background: var(--ui-topnav-active);
  color: var(--ui-topnav-active-text);
}

.ui-topnav__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.ui-topnav__icon-btn {
  color: var(--ui-topnav-text, #0f172a) !important;
  padding: 0.35rem 0.45rem !important;
  line-height: 1;
}

.ui-topnav__icon-btn:hover {
  color: var(--ui-brand) !important;
}

.ui-topnav__section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-topnav-muted);
}

.ui-topnav__section-list {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0;
}

@media (max-width: 991.98px) {
  html[data-ui-skin="topnav"] {
    --ui-topnav-h: auto;
  }

  .ui-topnav {
    height: auto;
    min-height: 3.25rem;
  }

  .ui-topnav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ui-topnav__title {
    font-size: 0.88rem;
  }

  .ui-topnav__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ui-topnav-bg);
    border-bottom: 1px solid var(--ui-topnav-border);
    box-shadow: var(--ui-shadow);
    padding: 0.5rem;
    max-height: min(70vh, 28rem);
    overflow: auto;
    z-index: 1055;
  }

  .ui-topnav--open .ui-topnav__nav {
    display: block;
  }

  .ui-topnav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .ui-topnav__link {
    width: 100%;
    padding: 0.55rem 0.65rem;
    justify-content: flex-start;
  }

  .ui-topnav__item.dropdown > .ui-topnav__dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    max-height: none;
    padding: 0 0 0.35rem 0.5rem;
    background: transparent;
  }

  html[data-ui-skin="topnav"] #sidebarLayout.layout-container {
    padding-top: 3.25rem;
  }
}

/* Densidad contenido topnav ≈ compact */
html[data-ui-skin="topnav"] .welcome-card {
  padding: 0.45rem 0.85rem !important;
  margin-bottom: 0.5rem !important;
}

html[data-ui-skin="topnav"] .welcome-subtitle,
html[data-ui-skin="topnav"] .welcome-logo-container {
  display: none !important;
}

html[data-ui-skin="topnav"] .search-filters,
html[data-ui-skin="topnav"] .modality-filters {
  padding: 0.55rem 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

html[data-ui-skin="topnav"] .studies-table th,
html[data-ui-skin="topnav"] .studies-table td {
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
}

/* ==========================================================================
 * Alias genéricos: páginas que usan .filters-card / .actions-bar en vez de
 * .search-filters / toolbar del dashboard (worklist, AI informes, etc.)
 * ========================================================================== */
html[data-ui-skin="compact"] .filters-card,
html[data-ui-skin="rail"] .filters-card,
html[data-ui-skin="topnav"] .filters-card {
  margin-bottom: var(--ui-space-block, 0.4rem) !important;
  padding: 0.45rem 0.65rem !important;
  border-radius: 0.4rem !important;
  background: var(--ui-surface-card, #fff) !important;
  border: 1px solid var(--ui-border, #dee2e6);
  box-shadow: var(--ui-shadow, 0 1px 4px rgba(0,0,0,.06)) !important;
}

html[data-ui-skin="rail"] .filters-card {
  padding: 0.3rem 0.5rem !important;
  margin-bottom: 0.25rem !important;
  border-left: 3px solid var(--ui-brand) !important;
}

html[data-ui-skin="compact"] .filters-card .form-label,
html[data-ui-skin="rail"] .filters-card .form-label,
html[data-ui-skin="topnav"] .filters-card .form-label {
  font-size: 0.7rem !important;
  margin-bottom: 0.15rem !important;
  color: var(--ui-text-muted, #6c757d);
}

html[data-ui-skin="compact"] .filters-card .form-control,
html[data-ui-skin="compact"] .filters-card .form-select,
html[data-ui-skin="compact"] .filters-card .btn,
html[data-ui-skin="rail"] .filters-card .form-control,
html[data-ui-skin="rail"] .filters-card .form-select,
html[data-ui-skin="rail"] .filters-card .btn,
html[data-ui-skin="topnav"] .filters-card .form-control,
html[data-ui-skin="topnav"] .filters-card .form-select,
html[data-ui-skin="topnav"] .filters-card .btn {
  min-height: var(--ui-control-h, 2rem) !important;
  height: var(--ui-control-h, 2rem) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
}

html[data-ui-skin="rail"] .filters-card .btn-group .btn {
  font-size: 0.68rem !important;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

html[data-ui-skin="compact"] .actions-bar,
html[data-ui-skin="rail"] .actions-bar,
html[data-ui-skin="topnav"] .actions-bar {
  gap: 0.35rem !important;
  margin-bottom: 0.35rem !important;
}

html[data-ui-skin="compact"] .btn-action-worklist,
html[data-ui-skin="rail"] .btn-action-worklist,
html[data-ui-skin="topnav"] .btn-action-worklist,
html[data-ui-skin="compact"] .actions-bar .btn,
html[data-ui-skin="rail"] .actions-bar .btn,
html[data-ui-skin="topnav"] .actions-bar .btn {
  padding: 0.25rem 0.65rem !important;
  font-size: 0.78rem !important;
  border-radius: 0.35rem !important;
  font-weight: 500 !important;
}

/* Worklist: vencer CSS local densificando welcome / sticky / tabla */
html[data-ui-skin="rail"] .worklist-sticky-top-row,
html[data-ui-skin="compact"] .worklist-sticky-top-row,
html[data-ui-skin="topnav"] .worklist-sticky-top-row {
  background: var(--ui-surface, #f8f9fa) !important;
  box-shadow: none !important;
  margin-bottom: 0.35rem !important;
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
}

html[data-ui-skin="rail"] .worklist-welcome-compact,
html[data-ui-skin="compact"] .worklist-welcome-compact {
  padding: 0.35rem 0.65rem !important;
  border-radius: 0.35rem !important;
}

html[data-ui-skin="rail"] .worklist-welcome-compact .worklist-welcome-title,
html[data-ui-skin="compact"] .worklist-welcome-compact .worklist-welcome-title {
  font-size: 0.92rem !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

html[data-ui-skin="rail"] .worklist-welcome-compact .worklist-welcome-subtitle {
  display: none !important;
}

html[data-ui-skin="compact"] .worklist-welcome-compact .worklist-welcome-subtitle {
  font-size: 0.75rem !important;
  margin: 0 !important;
}

html[data-ui-skin="rail"] .worklist-summary.worklist-summary--compact,
html[data-ui-skin="compact"] .worklist-summary.worklist-summary--compact {
  font-size: 0.78rem !important;
}

html[data-ui-skin="rail"] .worklist-summary.worklist-summary--compact .badge,
html[data-ui-skin="compact"] .worklist-summary.worklist-summary--compact .badge {
  font-size: 0.68rem !important;
  padding: 0.2rem 0.45rem !important;
}

html[data-ui-skin="rail"] #worklistTable,
html[data-ui-skin="compact"] #worklistTable,
html[data-ui-skin="topnav"] #worklistTable {
  background: var(--ui-surface-card, #fff) !important;
  border-radius: 0.4rem !important;
}

html[data-ui-skin="rail"] #worklistTable th,
html[data-ui-skin="rail"] #worklistTable td,
html[data-ui-skin="compact"] #worklistTable th,
html[data-ui-skin="compact"] #worklistTable td,
html[data-ui-skin="topnav"] #worklistTable th,
html[data-ui-skin="topnav"] #worklistTable td {
  padding: var(--ui-row-pad, 0.35rem) 0.45rem !important;
  font-size: 0.8rem !important;
  vertical-align: middle !important;
}

html[data-ui-skin="rail"] .dataTables_wrapper,
html[data-ui-skin="compact"] .dataTables_wrapper,
html[data-ui-skin="topnav"] .dataTables_wrapper {
  padding: 0.5rem !important;
  background: var(--ui-surface-card, #fff);
  border-radius: 0.4rem;
}

html[data-ui-skin="rail"] .worklist-table-search-wrap .form-control,
html[data-ui-skin="compact"] .worklist-table-search-wrap .form-control {
  min-height: var(--ui-control-h, 1.85rem) !important;
  height: var(--ui-control-h, 1.85rem) !important;
  font-size: 0.78rem !important;
}

@media (min-width: 992px) {
  html[data-ui-skin="rail"] .worklist-sticky-top-row {
    top: 0;
  }
  html[data-ui-skin="topnav"] .worklist-sticky-top-row {
    top: 0;
  }
}

/* Headers con gradiente fijo (config / informes / AI) → marca del tema */
html[data-ui-skin="rail"] .config-header,
html[data-ui-skin="compact"] .config-header,
html[data-ui-skin="topnav"] .config-header,
html[data-ui-skin="rail"] .header-section,
html[data-ui-skin="compact"] .header-section,
html[data-ui-skin="topnav"] .header-section,
html[data-ui-skin="rail"] .ai-informes-header,
html[data-ui-skin="compact"] .ai-informes-header,
html[data-ui-skin="topnav"] .ai-informes-header {
  background: var(--ui-brand, #0f766e) !important;
  box-shadow: var(--ui-shadow, 0 2px 8px rgba(0,0,0,.12)) !important;
  border-radius: 0.4rem !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.75rem !important;
}

html[data-ui-skin="rail"] .config-header h1,
html[data-ui-skin="compact"] .config-header h1,
html[data-ui-skin="rail"] .header-section h1,
html[data-ui-skin="compact"] .header-section h1,
html[data-ui-skin="rail"] .ai-informes-header h1,
html[data-ui-skin="compact"] .ai-informes-header h1 {
  font-size: 1.15rem !important;
  margin-bottom: 0.25rem !important;
}

html[data-ui-skin="rail"] .header-section p,
html[data-ui-skin="compact"] .header-section p,
html[data-ui-skin="rail"] .ai-informes-header p,
html[data-ui-skin="compact"] .ai-informes-header p {
  font-size: 0.8rem !important;
  margin: 0 !important;
  opacity: 0.9;
}

html[data-ui-skin="rail"] .btn-action-ai,
html[data-ui-skin="compact"] .btn-action-ai,
html[data-ui-skin="topnav"] .btn-action-ai {
  padding: 0.25rem 0.65rem !important;
  font-size: 0.78rem !important;
  border-radius: 0.35rem !important;
}

html[data-ui-skin="rail"] #estudiosTable,
html[data-ui-skin="compact"] #estudiosTable,
html[data-ui-skin="topnav"] #estudiosTable,
html[data-ui-skin="rail"] #informesTable,
html[data-ui-skin="compact"] #informesTable,
html[data-ui-skin="topnav"] #informesTable {
  background: var(--ui-surface-card, #fff) !important;
  border-radius: 0.4rem !important;
}

html[data-ui-skin="rail"] #estudiosTable th,
html[data-ui-skin="rail"] #estudiosTable td,
html[data-ui-skin="compact"] #estudiosTable th,
html[data-ui-skin="compact"] #estudiosTable td,
html[data-ui-skin="rail"] #informesTable th,
html[data-ui-skin="rail"] #informesTable td,
html[data-ui-skin="compact"] #informesTable th,
html[data-ui-skin="compact"] #informesTable td {
  padding: var(--ui-row-pad, 0.35rem) 0.45rem !important;
  font-size: 0.8rem !important;
  vertical-align: middle !important;
}

/* Bootstrap cards genéricas en managers densos */
html[data-ui-skin="rail"] .main-content .card,
html[data-ui-skin="compact"] .main-content .card {
  border-radius: 0.4rem !important;
  box-shadow: var(--ui-shadow, 0 1px 4px rgba(0,0,0,.06)) !important;
}

html[data-ui-skin="rail"] .main-content .card-header,
html[data-ui-skin="compact"] .main-content .card-header {
  padding: 0.45rem 0.75rem !important;
  font-size: 0.9rem !important;
}

html[data-ui-skin="rail"] .main-content .card-body,
html[data-ui-skin="compact"] .main-content .card-body {
  padding: 0.65rem 0.75rem !important;
}


/* === STAFF SECTIONS UNIVERSAL SKIN ALIASES === */
/* Editor de informes */
html[data-ui-skin="rail"] .editor-content-wrapper,
html[data-ui-skin="compact"] .editor-content-wrapper {
  padding: 0.5rem 0.75rem !important;
}
html[data-ui-skin="rail"] .editor-section .welcome-card,
html[data-ui-skin="compact"] .editor-section .welcome-card {
  padding: 0.45rem 0.75rem !important;
  margin-bottom: 0.5rem !important;
}
html[data-ui-skin="rail"] .editor-section .welcome-title {
  font-size: 1rem !important;
}
html[data-ui-skin="rail"] .editor-section .welcome-subtitle {
  display: none !important;
}
html[data-ui-skin="rail"] .study-info-banner,
html[data-ui-skin="compact"] .study-info-banner {
  margin-top: 0.35rem !important;
  padding: 0.35rem 0.5rem !important;
}

/* QA / Gateway / Email headers */
html[data-ui-skin="rail"] .main-content h1.h3,
html[data-ui-skin="compact"] .main-content h1.h3,
html[data-ui-skin="rail"] .main-content .h3,
html[data-ui-skin="compact"] .main-content .h3 {
  font-size: 1.15rem !important;
}
html[data-ui-skin="rail"] .main-content > .container-fluid,
html[data-ui-skin="compact"] .main-content > .container-fluid {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
html[data-ui-skin="rail"] #qaQueueTable th,
html[data-ui-skin="rail"] #qaQueueTable td,
html[data-ui-skin="compact"] #qaQueueTable th,
html[data-ui-skin="compact"] #qaQueueTable td {
  padding: var(--ui-row-pad, 0.35rem) 0.45rem !important;
  font-size: 0.8rem !important;
}

/* Email admin purple header → brand */
html[data-ui-skin="rail"] .main-content .header,
html[data-ui-skin="compact"] .main-content .header,
html[data-ui-skin="topnav"] .main-content .header {
  background: var(--ui-brand, #0f766e) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.4rem !important;
  margin-bottom: 0.75rem !important;
  box-shadow: var(--ui-shadow, 0 2px 8px rgba(0,0,0,.12)) !important;
}
html[data-ui-skin="rail"] .main-content .header h1,
html[data-ui-skin="compact"] .main-content .header h1 {
  font-size: 1.2rem !important;
  margin-bottom: 0.25rem !important;
}

/* Gateway ops */
html[data-ui-skin="rail"] .gateway-page .card,
html[data-ui-skin="compact"] .gateway-page .card {
  border-radius: 0.4rem !important;
}

/* Turnero / reception welcome */
html[data-ui-skin="rail"] .rt-module .welcome-card,
html[data-ui-skin="compact"] .rt-module .welcome-card {
  padding: 0.65rem 0.9rem !important;
  margin-bottom: 0.75rem !important;
}

/* Template / voice managers */
html[data-ui-skin="rail"] .template-manager,
html[data-ui-skin="compact"] .template-manager {
  max-width: 100% !important;
  padding: 0.75rem !important;
}
html[data-ui-skin="rail"] .template-list,
html[data-ui-skin="rail"] .template-editor,
html[data-ui-skin="compact"] .template-list,
html[data-ui-skin="compact"] .template-editor {
  background: var(--ui-surface-card, #fff) !important;
  padding: 0.75rem !important;
  border-radius: 0.4rem !important;
  box-shadow: var(--ui-shadow, 0 1px 4px rgba(0,0,0,.06)) !important;
}
html[data-ui-skin="rail"] .category-header,
html[data-ui-skin="compact"] .category-header {
  background: var(--ui-brand, #0f766e) !important;
  padding: 0.55rem 0.85rem !important;
  border-radius: 0.4rem !important;
}
html[data-ui-skin="rail"] .command-item,
html[data-ui-skin="compact"] .command-item {
  padding: 0.55rem 0.75rem !important;
  margin-bottom: 0.4rem !important;
  background: var(--ui-surface-card, #f8f9fa) !important;
}

/* User / patients managers: densify bootstrap tables under skin */
html[data-ui-skin="rail"] .main-content .table th,
html[data-ui-skin="rail"] .main-content .table td,
html[data-ui-skin="compact"] .main-content .table th,
html[data-ui-skin="compact"] .main-content .table td {
  padding: var(--ui-row-pad, 0.4rem) 0.5rem !important;
  font-size: 0.82rem !important;
  vertical-align: middle !important;
}

/* Audio recorder standalone */
html[data-ui-skin="rail"] .standalone-recorder,
html[data-ui-skin="compact"] .standalone-recorder {
  max-width: 720px !important;
  margin: 1rem auto !important;
  padding: 0.75rem !important;
}
html[data-ui-skin="rail"] .recording-item,
html[data-ui-skin="compact"] .recording-item {
  background: var(--ui-surface-muted, #f8f9fa) !important;
  padding: 0.55rem 0.75rem !important;
}

/* Viewer chrome */
html[data-ui-skin="rail"] .viewer-toolbar,
html[data-ui-skin="compact"] .viewer-toolbar {
  padding: 0.35rem 0.65rem !important;
  background: var(--ui-surface, #f8f9fa) !important;
}
html[data-ui-skin="rail"] .viewer-sidebar,
html[data-ui-skin="compact"] .viewer-sidebar {
  background: var(--ui-surface, #f8f9fa) !important;
  width: 260px !important;
  padding: 0.65rem !important;
}

/* Page chrome host when no welcome-stats */
.ui-page-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}


/* === user-management: Rail / Compact densos === */
html[data-ui-skin="rail"] .user-mgmt-header,
html[data-ui-skin="compact"] .user-mgmt-header {
  margin-bottom: 0.5rem !important;
}

html[data-ui-skin="rail"] .user-mgmt-title,
html[data-ui-skin="compact"] .user-mgmt-title {
  font-size: 1.15rem !important;
  margin-bottom: 0.15rem !important;
  line-height: 1.25 !important;
}

html[data-ui-skin="rail"] .user-mgmt-subtitle {
  display: none !important;
}

html[data-ui-skin="compact"] .user-mgmt-subtitle {
  font-size: 0.8rem !important;
}

html[data-ui-skin="rail"] .user-mgmt-actions .btn-custom,
html[data-ui-skin="compact"] .user-mgmt-actions .btn-custom,
html[data-ui-skin="topnav"] .user-mgmt-actions .btn-custom {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.78rem !important;
  border-radius: 0.35rem !important;
}

html[data-ui-skin="rail"] .stats-card,
html[data-ui-skin="compact"] .stats-card,
html[data-ui-skin="topnav"] .stats-card {
  background: var(--ui-brand, #0f766e) !important;
  border-radius: 0.4rem !important;
  padding: 0.55rem 0.75rem !important;
  margin-bottom: 0.35rem !important;
  border-left: 3px solid var(--ui-brand-accent, rgba(255,255,255,0.35));
  box-shadow: var(--ui-shadow, 0 1px 4px rgba(0,0,0,.08)) !important;
}

html[data-ui-skin="rail"] .stats-number,
html[data-ui-skin="compact"] .stats-number {
  font-size: 1.25rem !important;
  margin-bottom: 0.1rem !important;
  line-height: 1.2 !important;
}

html[data-ui-skin="rail"] .stats-label,
html[data-ui-skin="compact"] .stats-label {
  font-size: 0.72rem !important;
}

html[data-ui-skin="rail"] #statsContainer,
html[data-ui-skin="compact"] #statsContainer {
  margin-bottom: 0.45rem !important;
}

html[data-ui-skin="rail"] .filter-section,
html[data-ui-skin="compact"] .filter-section,
html[data-ui-skin="topnav"] .filter-section {
  background: var(--ui-surface-card, #fff) !important;
  border: 1px solid var(--ui-border, #dee2e6) !important;
  border-radius: 0.4rem !important;
  padding: 0.45rem 0.65rem !important;
  margin-bottom: 0.45rem !important;
  box-shadow: var(--ui-shadow, 0 1px 4px rgba(0,0,0,.06)) !important;
}

html[data-ui-skin="rail"] .filter-section {
  padding: 0.3rem 0.5rem !important;
  margin-bottom: 0.3rem !important;
  border-left: 3px solid var(--ui-brand) !important;
}

html[data-ui-skin="rail"] .filter-section .form-label,
html[data-ui-skin="compact"] .filter-section .form-label {
  font-size: 0.7rem !important;
  margin-bottom: 0.15rem !important;
  color: var(--ui-text-muted, #6c757d);
}

html[data-ui-skin="rail"] .filter-section .form-control,
html[data-ui-skin="rail"] .filter-section .form-select,
html[data-ui-skin="rail"] .filter-section .btn,
html[data-ui-skin="compact"] .filter-section .form-control,
html[data-ui-skin="compact"] .filter-section .form-select,
html[data-ui-skin="compact"] .filter-section .btn {
  min-height: var(--ui-control-h, 2rem) !important;
  height: var(--ui-control-h, 2rem) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
}

html[data-ui-skin="rail"] .main-content .container-fluid.py-4,
html[data-ui-skin="compact"] .main-content .container-fluid.py-4 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

html[data-ui-skin="rail"] .user-card,
html[data-ui-skin="compact"] .user-card {
  padding: 0.55rem 0.75rem !important;
  margin-bottom: 0.45rem !important;
  border-radius: 0.4rem !important;
  background: var(--ui-surface-card, #fff);
  border-color: var(--ui-border, #e0e0e0) !important;
}

html[data-ui-skin="rail"] .user-card:hover {
  transform: none !important;
}

html[data-ui-skin="rail"] .hierarchy-tree {
  margin-left: 0.75rem !important;
  padding-left: 0.65rem !important;
  border-left-color: var(--ui-border, #e0e0e0) !important;
}