/* ─────────────────────────────────────────────────────────────────────────────
   Tema oscuro unificado — fondo NEGRO, texto BLANCO (sin azulados ni grises tenues).

   Por qué existe este archivo:
   El portal arrastra `styles-portal.css`, un tema compilado (azul-gris #202936 /
   texto #7c8fac) que se carga al final y gana por orden de cascada. Editar el SCSS
   (`styles.css`) no basta porque ese blob lo pisa. Esta hoja se carga DESPUÉS de
   `styles-portal.css`, así que es la autoridad final del modo nocturno y el único
   punto donde ajustarlo a nivel global. Usa `!important` y la misma especificidad
   para vencer las reglas codificadas del tema heredado.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --sf-dark-bg: #000000;        /* fondo del cuerpo */
  --sf-dark-surface: #101012;   /* tarjetas / superficies elevadas */
  --sf-dark-surface-2: #161618; /* inputs / superficies internas */
  --sf-dark-border: #2a2a2c;    /* bordes neutros (no azules) */
  --sf-dark-text: #f5f6f8;      /* texto principal (casi blanco) */
  --sf-dark-text-soft: #cdd2da; /* texto secundario: claro y legible */
}

[data-bs-theme="dark"] {
  /* Variables núcleo de Bootstrap → afectan a casi todos los componentes. */
  --bs-body-bg: var(--sf-dark-bg) !important;
  --bs-body-bg-rgb: 0, 0, 0 !important;
  --bs-body-color: var(--sf-dark-text) !important;
  --bs-body-color-rgb: 245, 246, 248 !important;
  --bs-emphasis-color: #ffffff !important;
  --bs-emphasis-color-rgb: 255, 255, 255 !important;
  --bs-secondary-color: var(--sf-dark-text-soft) !important;
  --bs-secondary-bg: var(--sf-dark-surface-2) !important;
  --bs-secondary-bg-rgb: 22, 22, 24 !important;
  --bs-tertiary-color: rgba(245, 246, 248, 0.6) !important;
  --bs-tertiary-bg: #0c0c0e !important;
  --bs-tertiary-bg-rgb: 12, 12, 14 !important;
  --bs-border-color: var(--sf-dark-border) !important;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.12) !important;
  --bs-heading-color: #ffffff !important;
  --bs-link-color: #6ea8fe !important;
  --bs-link-hover-color: #8bb9ff !important;
  --bs-link-color-rgb: 110, 168, 254 !important;
}

/* Cuerpo y contenedores de layout. */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .body-wrapper,
[data-bs-theme="dark"] .page-layout {
  background-color: var(--sf-dark-bg) !important;
  color: var(--sf-dark-text) !important;
}

/* Cromo del admin: barra superior y barra lateral en negro. */
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .left-sidebar,
[data-bs-theme="dark"] .sidebar-nav,
[data-bs-theme="dark"] .brand-logo {
  background-color: #050506 !important;
}

/* Superficies elevadas: tarjetas, menús, modales, offcanvas, acordeón, list-group. */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .accordion,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .list-group,
[data-bs-theme="dark"] .popover {
  background-color: var(--sf-dark-surface) !important;
  border-color: var(--sf-dark-border) !important;
  color: var(--sf-dark-text) !important;
}
[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--sf-dark-surface) !important;
  --bs-card-color: var(--sf-dark-text) !important;
  --bs-card-cap-bg: #141416 !important;
  background-image: none !important; /* anula el degradado azulado heredado */
}

/* Bootstrap usa `.bg-white` como fondo de muchas zonas → negro elevado en oscuro. */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--sf-dark-surface) !important;
}

/* Texto: principal casi blanco, secundario claro (sin el gris apagado #7c8fac). */
[data-bs-theme="dark"] {
  color: var(--sf-dark-text);
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] .section-title {
  color: #ffffff !important;
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] small.text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .form-text {
  color: var(--sf-dark-text-soft) !important;
}
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .link-dark,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .blockquote-footer,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label {
  color: var(--sf-dark-text) !important;
}

/* Tablas: fondo transparente (hereda el negro de la tarjeta), texto blanco. */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--sf-dark-text) !important;
  --bs-table-border-color: var(--sf-dark-border) !important;
  color: var(--sf-dark-text) !important;
}
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  color: var(--sf-dark-text) !important;
  background-color: transparent !important;
}
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table thead th {
  color: #ffffff !important;
}
/* Conserva las señales semánticas en celdas (p. ej. el Saldo en rojo/verde del
   estado de cuenta): la regla blanca de arriba, por especificidad, las pisaría y
   borraría el indicador. Tonos aclarados para que se lean sobre negro. */
[data-bs-theme="dark"] .table .text-danger  { color: #ea868f !important; }
[data-bs-theme="dark"] .table .text-success { color: #6cd39a !important; }
[data-bs-theme="dark"] .table .text-warning { color: #ffda6a !important; }
[data-bs-theme="dark"] .table .text-info    { color: #6edff6 !important; }
[data-bs-theme="dark"] .table .text-primary { color: #6ea8fe !important; }

/* Formularios. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--sf-dark-surface-2) !important;
  color: var(--sf-dark-text) !important;
  border-color: #33333a !important;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #8b9099 !important; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: #4b4b54 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.08) !important;
}

/* Separadores y bordes utilitarios. */
[data-bs-theme="dark"] hr { border-color: var(--sf-dark-border) !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-white,
[data-bs-theme="dark"] .border-light {
  border-color: var(--sf-dark-border) !important;
}

/* Botones pensados para fondo claro (btn-dark / btn-outline-dark) quedan casi invisibles
   sobre negro (su color/borde es #1d1d1f). En modo oscuro se invierten a claro para que se
   distingan (p. ej. el botón "Generar cargos" de Cuotas, que es btn-outline-dark). */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: #e9ecf1;
  --bs-btn-border-color: #6b6b73;
  --bs-btn-hover-color: #0b0b0c;
  --bs-btn-hover-bg: #e9ecf1;
  --bs-btn-hover-border-color: #e9ecf1;
  --bs-btn-active-color: #0b0b0c;
  --bs-btn-active-bg: #e9ecf1;
  --bs-btn-active-border-color: #e9ecf1;
  --bs-btn-disabled-color: #8b9099;
  --bs-btn-disabled-border-color: #3a3a40;
}
[data-bs-theme="dark"] .btn-dark {
  --bs-btn-bg: #2a2a2e;
  --bs-btn-border-color: #3a3a40;
  --bs-btn-color: #f5f6f8;
  --bs-btn-hover-bg: #37373d;
  --bs-btn-hover-border-color: #4a4a52;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #37373d;
  --bs-btn-active-color: #ffffff;
}

/* Landing (stackfire.com) — tarjetas de features (.card-animated). En modo oscuro el tema
   heredado las pinta de azul-gris (#465670 vía .text-bg-light). Las pasamos a NEGRO con
   MARCO BLANCO SUAVE (estilo Vercel), que se aclara al pasar el cursor. */
[data-bs-theme="dark"] .card-animated {
  background-color: #0a0a0a !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: var(--sf-dark-text) !important;
  --bs-card-title-color: #ffffff;
}
[data-bs-theme="dark"] .card-animated h5,
[data-bs-theme="dark"] .card-animated h6 {
  color: #ffffff !important;
}
[data-bs-theme="dark"] .card-animated p {
  color: var(--sf-dark-text-soft) !important;
}
[data-bs-theme="dark"] .card-animated:hover,
[data-bs-theme="dark"] .card-animated-link:hover .card-animated,
[data-bs-theme="dark"] .card-animated-link:focus-visible .card-animated {
  border-color: rgba(255, 255, 255, 0.34) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Blog — LISTADO (/blog). Las tarjetas y píldoras usan clases propias
   (.blog-card, .filter-pill, .post-tag…), no el .card de Bootstrap, así que el
   modo oscuro global no las alcanzaba y se quedaban en BLANCO. Mismo lenguaje
   que las cards de la landing: NEGRO con MARCO BLANCO SUAVE que se aclara al
   hover (estilo Vercel). El detalle del artículo ya tiene su dark en _blog.scss.
   ───────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .blog-page { color: var(--sf-dark-text) !important; }
[data-bs-theme="dark"] .blog-kicker { color: #8b9099 !important; }
[data-bs-theme="dark"] .blog-headline { color: #ffffff !important; }
[data-bs-theme="dark"] .blog-subtitle { color: var(--sf-dark-text-soft) !important; }

/* Marcas de esquina del grid (líneas gris claro) → tenues sobre negro. */
[data-bs-theme="dark"] .grid-module::before,
[data-bs-theme="dark"] .grid-module::after {
  background:
    linear-gradient(rgba(255, 255, 255, 0.18) 0 0) center/1px 100% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 0) center/100% 1px no-repeat !important;
}

/* Barra y píldoras de filtro. */
[data-bs-theme="dark"] .blog-filter-bar { border-bottom-color: var(--sf-dark-border) !important; }
[data-bs-theme="dark"] .filter-pill {
  background: var(--sf-dark-surface) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--sf-dark-text-soft) !important;
}
[data-bs-theme="dark"] .filter-pill.is-active,
[data-bs-theme="dark"] .filter-pill:hover {
  background: #f5f6f8 !important;
  border-color: #f5f6f8 !important;
  color: #0a0a0a !important;
}

/* Tarjetas: negro con marco blanco suave (igual que .card-animated). */
[data-bs-theme="dark"] .blog-card {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-bs-theme="dark"] .blog-card:hover {
  background: #0d0d0d !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Media / placeholders. */
[data-bs-theme="dark"] .blog-card-media,
[data-bs-theme="dark"] .neutral-placeholder {
  background: linear-gradient(145deg, #141416, #0e0e10) !important;
  border-color: var(--sf-dark-border) !important;
}
[data-bs-theme="dark"] .media-icon {
  background: #1a1a1c !important;
  color: #e9ecf1 !important;
}

/* Texto interno. */
[data-bs-theme="dark"] .blog-card-title a,
[data-bs-theme="dark"] .post-author { color: #ffffff !important; }
[data-bs-theme="dark"] .blog-card-summary { color: var(--sf-dark-text-soft) !important; }
[data-bs-theme="dark"] .post-date,
[data-bs-theme="dark"] .blog-card-meta { color: #9aa0a8 !important; }

/* Etiqueta de categoría. */
[data-bs-theme="dark"] .post-tag {
  background: var(--sf-dark-surface-2) !important;
  border-color: var(--sf-dark-border) !important;
  color: var(--sf-dark-text-soft) !important;
}
[data-bs-theme="dark"] .post-tag-product {
  background: #f5f6f8 !important;
  border-color: #f5f6f8 !important;
  color: #0a0a0a !important;
}

/* Enlace "Read article" y estado vacío. */
[data-bs-theme="dark"] .read-link { color: #ffffff !important; }
[data-bs-theme="dark"] .blog-empty { color: var(--sf-dark-text-soft) !important; }
[data-bs-theme="dark"] .blog-empty i { color: #e9ecf1 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Menús desplegables (⋯ de acciones en tablas, menú de usuario, etc.).
   El .dropdown-menu ya era oscuro, pero faltaba el .dropdown-item: heredaba el
   color oscuro de Bootstrap y quedaba INVISIBLE sobre el menú negro (p. ej. las
   opciones Editar/Eliminar de Unidades y Propietarios dentro de los tenants).
   ───────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .dropdown-item {
  color: var(--sf-dark-text) !important;
  background-color: transparent !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
[data-bs-theme="dark"] .dropdown-item.text-danger { color: #ea868f !important; }
[data-bs-theme="dark"] .dropdown-item.text-danger:hover,
[data-bs-theme="dark"] .dropdown-item.text-danger:focus {
  background-color: rgba(234, 134, 143, 0.16) !important;
  color: #f1a7ad !important;
}
[data-bs-theme="dark"] .dropdown-item.disabled,
[data-bs-theme="dark"] .dropdown-item:disabled { color: #6c727c !important; }
[data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--sf-dark-border) !important; }
[data-bs-theme="dark"] .dropdown-header { color: var(--sf-dark-text-soft) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Tabla de Facturas (CFDI inbox, #cfdi-table) — uniforme estilo Vercel en oscuro.
   El striping de _table.scss pinta los renglones impares con un box-shadow
   var(--bs-light) (azul-gris del tema heredado) que sobrevive en modo oscuro y se
   ve como "un color por renglón". Lo anulamos: fondo negro, contorno blanco suave
   y letra blanca (las celdas ya son transparentes por la regla .table de arriba).
   ───────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] #cfdi-table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  box-shadow: none !important;
}
[data-bs-theme="dark"] #cfdi-table {
  --bs-table-border-color: rgba(255, 255, 255, 0.18) !important;
}
[data-bs-theme="dark"] #cfdi-table > thead > tr > * { color: #ffffff !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Página de Cybersecurity (/static-pages/cybersecurity). Textos y tarjetas se
   diseñaron para fondo claro (grises oscuros #475569/#1e293b sobre blanco) y en
   modo oscuro quedaban ilegibles. Superficies → negro con marco blanco suave;
   textos → claros (mejora el contraste, estilo Vercel).
   ───────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .cybersecurity-subheading,
[data-bs-theme="dark"] .cybersecurity-metric-caption,
[data-bs-theme="dark"] .cybersecurity-pillar-card p,
[data-bs-theme="dark"] .cybersecurity-ops-card p {
  color: var(--sf-dark-text-soft) !important;
}
[data-bs-theme="dark"] .cybersecurity-pillar-card li,
[data-bs-theme="dark"] .cybersecurity-ops-card li,
[data-bs-theme="dark"] .cybersecurity-insight p,
[data-bs-theme="dark"] .cybersecurity-metric,
[data-bs-theme="dark"] .cybersecurity-metric strong,
[data-bs-theme="dark"] .cybersecurity-metric i,
[data-bs-theme="dark"] .cybersecurity-hero-card {
  color: var(--sf-dark-text) !important;
}
/* Superficies claras → negras con marco blanco suave. */
[data-bs-theme="dark"] .cybersecurity-hero-card,
[data-bs-theme="dark"] .cybersecurity-pillar-card,
[data-bs-theme="dark"] .cybersecurity-ops-card,
[data-bs-theme="dark"] .cybersecurity-badge {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-bs-theme="dark"] .cybersecurity-metric { background: rgba(255, 255, 255, 0.06) !important; }
[data-bs-theme="dark"] .cybersecurity-insight {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(59, 130, 246, 0.10)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
/* Iconos de viñeta (algunos eran negros → invisibles sobre negro). */
[data-bs-theme="dark"] .cybersecurity-pillar-card li i { color: #38bdf8 !important; }
[data-bs-theme="dark"] .cybersecurity-badge i { color: #38bdf8 !important; }
/* Chips: texto claro sobre fondo translúcido. */
[data-bs-theme="dark"] .cybersecurity-chip,
[data-bs-theme="dark"] .cybersecurity-insight .cybersecurity-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--sf-dark-text) !important;
}
/* Botón primario negro → marco sutil para que destaque sobre el fondo negro. */
[data-bs-theme="dark"] .cybersecurity-hero-actions .btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}