/* ==========================================================================
   ChurSys — Identidad visual sobre ArchitectUI Pro
   --------------------------------------------------------------------------
   Este archivo NO reimplementa el tema: ArchitectUI pone la base
   (architectui/assets/styles/main.css). Aquí solo se ajusta:

     1. Tokens de marca de ChurSys.
     2. La barra lateral / cabecera con el logotipo y la suscripción.
     3. Los componentes heredados del marcado antiguo (small-box, hero,
        card-outline, DataTables, etc.).
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --ch-accent: #3f6ad8;
  --ch-accent-rgb: 63, 106, 216;
  --ch-brand: #ffffff;
  --ch-brand-ink: #343a40;
  --ch-surface-2: #f1f4f6;
  --ch-canvas: #f1f4f6;
  --ch-radius: .375rem;
  --ch-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
}

/* Logo ChurSys: se alterna la versión blanca/negra según el fondo */
.ch-logo--on-dark { display: none; }
.ch-logo--on-light { display: inline-block; }

.app-header.header-text-light .ch-logo--on-dark,
.app-sidebar.sidebar-text-light .ch-logo--on-dark,
[data-bs-theme="dark"] .ch-logo--on-dark,
.bg-dark .ch-logo--on-dark,
.text-bg-dark .ch-logo--on-dark {
  display: inline-block;
}

.app-header.header-text-light .ch-logo--on-light,
.app-sidebar.sidebar-text-light .ch-logo--on-light,
[data-bs-theme="dark"] .ch-logo--on-light,
.bg-dark .ch-logo--on-light,
.text-bg-dark .ch-logo--on-light {
  display: none;
}

/* Icono de la barra lateral (church): blanco -> negro sobre fondo claro */
img.ch-logo-icon {
  filter: brightness(0);
}

.app-sidebar.sidebar-text-light img.ch-logo-icon,
[data-bs-theme="dark"] img.ch-logo-icon,
.bg-dark img.ch-logo-icon,
.text-bg-dark img.ch-logo-icon {
  filter: none;
}

.app-header.header-text-light .js-theme-settings,
.app-header.header-text-light .btn-link,
.app-header.header-text-light .text-body,
.app-header.header-text-light .header-megamenu.nav-link,
.app-header.header-text-light .widget-heading,
.app-header.header-text-light .widget-subheading {
  color: #fff !important;
}

.app-header.header-text-light .widget-subheading {
  color: rgba(255, 255, 255, .75) !important;
}

body {
  font-family: var(--ch-font-sans);
}

/* El contenedor del tema ya tiene fondo; reforzamos el lienzo de ChurSys */
.app-theme-white.app-container {
  background: var(--ch-canvas);
}

/* ==========================================================================
   2. Tarjetas
   --------------------------------------------------------------------------
   ArchitectUI oculta las tarjetas (opacity: 0) hasta que su JS les añade
   .animated. Como no dependemos de ese arranque, las mostramos siempre.
   ========================================================================== */

.card,
.main-card {
  opacity: 1 !important;
  transform: none !important;
}

.card {
  border: 0;
  border-radius: var(--ch-radius);
  box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03),
              0 .9375rem 1.40625rem rgba(4, 9, 20, .03),
              0 .25rem .53125rem rgba(4, 9, 20, .05),
              0 .125rem .1875rem rgba(4, 9, 20, .03);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: auto;
  min-height: 3.5rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  font-weight: 600;
}

/* El tema fija 3.5rem de alto en la cabecera. Las vistas con filtros
   necesitan crecer; el alto mínimo conserva la métrica del tema. */
.card-header > .row {
  flex: 1 1 100%;
  margin-top: 0;
  margin-bottom: 0;
  row-gap: .5rem;
}

/* Columnas que solo contienen botones: ancho automático, sin salto y
   alineadas al extremo derecho de la cabecera. */
.card-header .row > [class*="col-"]:has(> .btn) {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  white-space: nowrap;
}

.card-header .row > [class*="col-"]:has(> .btn) > .btn + .btn {
  margin-left: .35rem;
}

/* Botones compactos en la cabecera: así caben en la misma fila que los
   filtros sin empujar la columna a una segunda línea. */
.card-header .row > [class*="col-"]:has(> .btn) > .btn {
  padding-right: .55rem;
  padding-left: .55rem;
}

/* En escritorio, la fila de filtros + acciones se mantiene en una línea:
   las columnas de filtros pueden encogerse unos píxeles, la de botones no. */
@media (min-width: 768px) {
  .card-header > .row {
    flex-wrap: nowrap;
  }
  .card-header .row > [class*="col-"] {
    min-width: 0;
    flex-shrink: 1;
  }
  .card-header .row > [class*="col-"]:has(> .btn) {
    flex-shrink: 0;
  }
}

.card-header .card-title {
  margin-bottom: 0;
  font-size: 1.05rem;
}

.card-footer {
  background: #fafbfc;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.card-tools {
  float: right;
}

/* Tarjetas con borde de color (marcado heredado de AdminLTE) */
.card-outline {
  border-top: 3px solid var(--ch-accent);
}

.card-outline.card-primary { border-top-color: #3f6ad8; }
.card-outline.card-success { border-top-color: #3ac47d; }
.card-outline.card-info    { border-top-color: #16aaff; }
.card-outline.card-warning { border-top-color: #f7b924; }
.card-outline.card-danger  { border-top-color: #d92550; }

.card-primary.card-outline { border-top-color: #3f6ad8; }

/* ==========================================================================
   3. Cabecera y barra lateral
   ========================================================================== */

.app-header__logo .logo-src {
  width: 150px;
  height: 28px;
  background: none;
}

/* Al plegar la barra lateral el hueco del logo queda en 80px: ocultamos
   la marca para que no desborde y quede solo el botón de menú. */
.closed-sidebar .app-header .app-header__logo > a,
.closed-sidebar .app-header .app-header__logo img {
  display: none !important;
}

/* Botón de plegado: hereda el estilo del hamburger del tema */
.hamburger {
  padding: 0;
}

/* La barra lateral necesita desplazamiento propio: el tema lo delega en
   perfect-scrollbar (JS), que aquí no se carga. */
.app-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .2) transparent;
}

.app-sidebar::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .2);
  border-radius: 3px;
}

/* Suscripción dentro de la barra lateral */
#subscription-container {
  border-radius: var(--ch-radius);
  margin: .25rem .75rem .5rem;
  padding: .35rem .5rem;
  background: var(--ch-surface-2);
  color: #495057;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En modo plegado el temporizador no cabe: se oculta */
.closed-sidebar #subscription-container {
  visibility: hidden;
}

/* El contenedor interior es un flex-item: sin min-width:0 no se encoge en
   modo rail (80px) y los iconos quedaban fuera del área visible. */
.app-sidebar__inner {
  position: relative;
  z-index: 15;
  min-width: 0;
  width: 100%;
}

/* Capa decorativa del tema: no debe interceptar clics del menú. */
.app-sidebar-bg {
  pointer-events: none;
}

/* Enlaces del menú: permitir etiquetas largas sin desbordar */
.vertical-nav-menu li a {
  text-overflow: ellipsis;
}

.vertical-nav-menu ul {
  padding-top: .25em;
  padding-bottom: .25em;
}

/* Los iconos Font Awesome del menú heredan el tamaño del tema */
.vertical-nav-menu i.metismenu-icon {
  font-size: 1.35rem;
  width: 34px;
  height: 34px;
  line-height: 34px;
  left: 5px;
  margin-top: -17px;
  opacity: .5;
}

.vertical-nav-menu i.metismenu-state-icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
  right: .6rem;
  margin-top: -12px;
  font-size: 1.1rem;
  opacity: .45;
}

.vertical-nav-menu li a {
  height: 2.35rem;
  line-height: 2.35rem;
  padding-left: 45px;
}

/* Barra lateral plegada: ArchitectUI la reduce a una franja de iconos
   de 80px (.closed-sidebar). El ancho y el padding del contenido los
   gestiona el propio tema, no se sobreescriben aquí. */

@media (max-width: 991.98px) {
  .app-container .app-sidebar {
    transform: translateX(-280px);
  }
  .app-container.sidebar-mobile-open .app-sidebar {
    transform: translateX(0);
    z-index: 13;
  }
  .app-container.sidebar-mobile-open .sidebar-mobile-overlay {
    display: block;
  }
}

/* En el cajón móvil se muestra la marca de la barra lateral */
@media (max-width: 991.98px) {
  .app-container.fixed-sidebar.fixed-header .app-sidebar .app-header__logo {
    display: flex;
  }
}

/* ==========================================================================
   4. Cabecera de página
   ========================================================================== */

.app-page-title {
  background: #fff;
  border-radius: var(--ch-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .03),
              0 .9375rem 1.40625rem rgba(4, 9, 20, .03);
}

.app-page-title .page-title-heading {
  font-size: 1.25rem;
  font-weight: 600;
}

.page-title-icon {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  padding: 0;
  margin-right: 1rem;
}

.page-title-icon i {
  margin: auto;
}

/* Las vistas ya vienen envueltas en .container-fluid; el área de contenido
   del tema aporta su propio padding, así que evitamos el doble margen. */
.app-main__inner > .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   5. Métricas del dashboard (marcado .small-box)
   ========================================================================== */

.small-box {
  position: relative;
  display: block;
  border-radius: var(--ch-radius);
  overflow: hidden;
  margin-bottom: 0;
  color: #fff;
  box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .05);
}

.small-box > .inner {
  padding: 1rem 1.25rem;
}

.small-box > .inner h3 {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.small-box > .inner p {
  margin: 0;
  font-size: .95rem;
  opacity: .9;
}

.small-box .small-box-icon,
.small-box > .icon > i {
  position: absolute;
  top: .75rem;
  right: 1rem;
  font-size: 3rem;
  opacity: .25;
  transition: transform .3s ease;
}

.small-box:hover .small-box-icon,
.small-box:hover > .icon > i {
  transform: scale(1.1);
}

.small-box > .small-box-footer,
.small-box > .small-box-footer:hover {
  display: block;
  padding: .5rem 1rem;
  background: rgba(0, 0, 0, .1);
  color: inherit;
  text-align: center;
  font-size: .85rem;
  text-decoration: none;
}

.small-box > .small-box-footer:hover {
  background: rgba(0, 0, 0, .18);
}

/* ==========================================================================
   6. Encabezado "hero" del dashboard
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ch-radius);
  background: linear-gradient(135deg, #3f6ad8 0%, #26509e 100%);
  color: #fff;
  box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .08);
}

.hero .chursys-halftone {
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
}

.hero .chursys-halftone canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hero .hero-body {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

.hero .hero-body h3 {
  margin: 0 0 .35rem;
  font-weight: 700;
}

.hero .hero-sub {
  margin: 0;
  opacity: .85;
}

/* ==========================================================================
   7. Tablas y DataTables
   ========================================================================== */

/* Tablas compactas: más filas visibles y acciones en una sola línea */
.app-main .table > :not(caption) > * > * {
  padding: .3rem .45rem;
  vertical-align: middle;
}

.app-main .table {
  font-size: .85rem;
}

.app-main .table thead th {
  padding: .4rem .45rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6c757d;
  font-weight: 700;
  border-bottom-width: 1px;
}

/* Celdas con acciones: nunca partir los botones en varias líneas */
.app-main .table td:has(> .btn),
.app-main .table td:has(> .btn-group),
.app-main .table td:has(> form > .btn),
.app-main .table td.ch-actions {
  white-space: nowrap;
  min-width: 108px;
}

/* En pantallas pequeñas los botones se mantienen en una línea; la tabla
   hace scroll horizontal dentro de la tarjeta. */

.app-main .table td .btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
  vertical-align: middle;
}

.app-main .table td .btn {
  white-space: nowrap;
}

/* Botones de acción compactos */
.app-main .table td .btn.btn-xs,
.app-main .table td .btn.btn-sm {
  padding: .2rem .38rem;
  font-size: .72rem;
  line-height: 1.25;
}

.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child {
  align-items: center;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #ced4da;
  border-radius: var(--ch-radius);
  padding: .25rem .5rem;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  justify-content: flex-end;
  gap: .25rem;
}

/* El padding/borde va en el .page-link, no en el <li>: si no, se duplica
   y la paginación queda con huecos enormes. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .page-link {
  border-radius: var(--ch-radius);
}

.dataTables_wrapper .dataTables_paginate .active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current .page-link {
  background-color: var(--ch-accent);
  border-color: var(--ch-accent);
  color: #fff !important;
}

.dataTables_wrapper .dt-buttons .btn {
  margin-right: .25rem;
}

/* DataTables Responsive fija table-layout:fixed y comprime la columna de
   acciones. Usamos layout automático para que los botones quepan en una
   línea; el contenedor de la tabla hace scroll horizontal si hace falta. */
.app-main table.dataTable {
  table-layout: auto !important;
}

.dataTables_wrapper > .row > div:has(> table),
.dataTables_wrapper > div:has(> table) {
  overflow-x: auto;
}

/* Separación entre botones de acción dentro de las tablas */
.table td > .btn + .btn,
.table td > .btn-group + .btn,
.table td > .btn + .btn-group,
.table td > .btn + form,
.table td > form + .btn {
  margin-left: .3rem;
}

/* ==========================================================================
   8. Utilidades heredadas
   ========================================================================== */

#errorMessage.error {
  display: none;
  color: #d92550;
  font-size: .8rem;
}

#errorMessage.error.visible {
  display: block;
}

.btn-block {
  display: block;
  width: 100%;
}

.brand-image {
  max-height: 34px;
  width: auto;
}

/* ==========================================================================
   9. Componentes heredados de AdminLTE 3
   --------------------------------------------------------------------------
   Las vistas del ERP y de reportes usan todavía info-box, callout y
   timeline. Se reestilizan con la métrica y los colores de ArchitectUI
   para que no queden sin formato.
   ========================================================================== */

/* --- Paleta de colores heredada --- */
.bg-teal      { background-color: #20c997 !important; color: #fff !important; }
.bg-blue      { background-color: #3f6ad8 !important; color: #fff !important; }
.bg-olive     { background-color: #3d9970 !important; color: #fff !important; }
.bg-navy      { background-color: #001f3f !important; color: #fff !important; }
.bg-lightblue { background-color: #3c8dbc !important; color: #fff !important; }
.bg-purple    { background-color: #605ca8 !important; color: #fff !important; }.bg-fuchsia   { background-color: #f012be !important; color: #fff !important; }
.bg-maroon    { background-color: #d81b60 !important; color: #fff !important; }
.bg-orange    { background-color: #fd7e14 !important; color: #fff !important; }
.bg-lime      { background-color: #01ff70 !important; color: #111 !important; }
.bg-red       { background-color: #d92550 !important; color: #fff !important; }
.bg-yellow    { background-color: #f7b924 !important; color: #111 !important; }
.bg-green     { background-color: #3ac47d !important; color: #fff !important; }
.bg-aqua      { background-color: #16aaff !important; color: #fff !important; }
.bg-gray,
.bg-grey      { background-color: #6c757d !important; color: #fff !important; }
.bg-gray-light { background-color: #f1f4f6 !important; color: #212529 !important; }

/* --- Info box (tarjetas de métricas del ERP) --- */
.info-box {
  display: flex;
  min-height: 84px;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: var(--ch-radius);
  overflow: hidden;
  box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .05),
              0 .125rem .1875rem rgba(4, 9, 20, .04);
}

.info-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 84px;
  width: 84px;
  font-size: 1.9rem;
  color: #fff;
}

.info-box-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: .75rem 1rem;
}

.info-box-text {
  display: block;
  overflow: hidden;
  color: #6c757d;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.info-box-number {
  display: block;
  color: #212529;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Variante: la caja completa lleva color */
.info-box[class*="bg-"] .info-box-text { color: rgba(255, 255, 255, .85); }
.info-box[class*="bg-"] .info-box-number { color: #fff; }

/* Colores claros: conservar texto oscuro */
.info-box.bg-light .info-box-text,
.info-box.bg-white .info-box-text { color: #6c757d; }
.info-box.bg-light .info-box-number,
.info-box.bg-white .info-box-number { color: #212529; }
.info-box.bg-warning .info-box-text { color: rgba(0, 0, 0, .65); }
.info-box.bg-warning .info-box-number { color: #212529; }

/* --- Callout (avisos) --- */
.callout {
  position: relative;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-left: 5px solid #dee2e6;
  border-radius: var(--ch-radius);
  box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .04);
}

.callout h5 {
  margin-top: 0;
  font-weight: 600;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-info    { border-left-color: #16aaff; }
.callout-success { border-left-color: #3ac47d; }
.callout-warning { border-left-color: #f7b924; }
.callout-danger  { border-left-color: #d92550; }
.callout-primary { border-left-color: #3f6ad8; }

/* --- Timeline (versionamiento / historiales) --- */
.timeline {
  position: relative;
  margin: 0 0 1rem;
  padding: 0;
}

.timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 31px;
  width: 4px;
  background: #e9ecef;
  border-radius: 2px;
  content: "";
}

.timeline > div {
  position: relative;
  margin-bottom: 1rem;
}

.timeline > div > i {
  position: absolute;
  top: 0;
  left: 15px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #6c757d;
  color: #fff;
  font-size: .95rem;
  line-height: 32px;
  text-align: center;
}

.timeline > div > .timeline-item {
  position: relative;
  margin-right: .5rem;
  margin-left: 60px;
  background: #fff;
  border-radius: var(--ch-radius);
  box-shadow: 0 .46875rem 2.1875rem rgba(4, 9, 20, .05);
}

.timeline > div > .timeline-item > .time {
  float: right;
  padding: .6rem .75rem;
  color: #868e96;
  font-size: .8rem;
}

.timeline-header {
  margin: 0;
  padding: .65rem .75rem;
  border-bottom: 1px solid #f1f4f6;
  font-size: 1rem;
  font-weight: 600;
}

.timeline-body {
  padding: .75rem;
  color: #495057;
}

.timeline-footer {
  padding: .75rem;
  background: #fafbfc;
  border-bottom-right-radius: var(--ch-radius);
  border-bottom-left-radius: var(--ch-radius);
}

.time-label {
  position: relative;
  margin-bottom: .75rem;
}

.time-label > span {
  display: inline-block;
  margin-left: 60px;
  padding: .3rem .7rem;
  border-radius: 1rem;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}

/* Botones planos heredados */
.btn-tool {
  padding: .25rem .55rem;
  border: 0;
  background: transparent;
  color: #6c757d;
  line-height: 1.2;
}

.btn-tool:hover,
.btn-tool:focus {
  background: #eef2f8;
  color: var(--ch-accent);
}

.card-tools .btn-tool {
  margin-left: .15rem;
}

.card-maximized {
  position: fixed;
  inset: 1rem;
  z-index: 1050;
  overflow: auto;
}

.btn-flat {
  border-radius: .25rem !important;
}

/* Cabeceras de contenido heredadas */
.content-header {
  margin-bottom: 1rem;
}

/* ==========================================================================
   10. Panel de configuración de tema
   ========================================================================== */

.ui-theme-settings {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  z-index: 1055;
  width: 400px;
  max-width: 92vw;
  height: calc(100vh - 60px);
  background: #fff;
  box-shadow: -10px 0 30px rgba(15, 23, 42, .15);
  transform: translateX(100%);
  transition: transform .28s ease;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .25) transparent;
}

.ui-theme-settings::-webkit-scrollbar {
  width: 6px;
}

.ui-theme-settings::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .25);
  border-radius: 3px;
}

.ui-theme-settings.settings-open {
  transform: translateX(0);
}

.ui-theme-settings .theme-settings__inner {
  width: 100%;
  min-height: 100%;
  height: auto;
}

.ui-theme-settings .btn-close {
  flex: none;
}

.ch-theme-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(15, 23, 42, .28);
}

.ch-theme-settings-overlay[hidden] {
  display: none;
}

.js-theme-settings i {
  transition: transform .25s ease;
}

.js-theme-settings.is-active i {
  transform: rotate(90deg);
}

@media (max-width: 767.98px) {
  .ui-theme-settings {
    display: block !important;
    top: 0;
    height: 100vh;
  }
}

/* ==========================================================================
   11. Páginas de acceso (login heredado de AdminLTE)
   ========================================================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-box {
  width: 100%;
  max-width: 400px;
}

.login-logo {
  text-align: center;
  margin-bottom: 1rem;
}

/* Modales: cabecera con color de marca */
.modal-header.bg-primary {
  border-top-left-radius: var(--bs-modal-border-radius, .5rem);
  border-top-right-radius: var(--bs-modal-border-radius, .5rem);
}

/* Avisos de novedades: el color lo define color_label_time (bg-blue, bg-green...) */
[id^="modal-feature-"] .modal-title,
[id^="modal-feature-"] .modal-title i {
  color: #fff;
}

[id^="modal-feature-"] .modal-header.bg-yellow .modal-title,
[id^="modal-feature-"] .modal-header.bg-yellow .modal-title i {
  color: #212529 !important;
}

[id^="modal-feature-"] .modal-header.bg-yellow .btn-close {
  filter: none;
}