/**
 * Tema claro/oscuro reutilizable en todo el sitio.
 * Se activa con el atributo `data-theme="dark"` en <html>, controlado por
 * js/theme.js (detección de sistema + toggle + localStorage).
 *
 * La base del proyecto es Bootstrap 5.2.3 (css/styles.css), que NO trae
 * modo oscuro nativo (eso llegó en 5.3) y además mezcla variables CSS con
 * colores fijos según el componente. Por eso aquí se redeclaran tanto las
 * variables raíz como, donde hace falta, las propiedades de cada
 * componente puntual.
 *
 * Para migrar esto a otro documento: agrega el <link> a este archivo y el
 * <script> a js/theme.js en el <head>, y opcionalmente un botón
 * `data-theme-toggle` en algún lugar de la página. No requiere tocar nada
 * más de este archivo.
 */

/* ===== Cambio de tema instantáneo =====
   Botones, acordeones, formularios, etc. tienen su propia transición CSS
   (para hover/focus). Esas mismas reglas se disparan también cuando cambia
   `data-theme`, así que TODOS esos elementos animaban a la vez y el cambio
   de tema se sentía lento (~1s). js/theme.js agrega esta clase a <html>
   justo antes de cambiar de tema y la quita dos frames después, así el
   swap de colores es instantáneo sin perder las transiciones normales. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* ===== Foco visible para teclado (accesibilidad) =====
   Bootstrap 5.2 solo pone un anillo de foco claro en botones y campos de
   formulario; los enlaces normales y de la barra se quedan con el outline
   fino del navegador, casi invisible sobre el rosa/morado de marca. Esto da
   un anillo consistente a CUALQUIER elemento enfocado con Tab, en ambos
   temas, sin afectar al foco por ratón (:focus-visible). */
:focus-visible {
  outline: 3px solid #6c5ce7;
  outline-offset: 2px;
}
html[data-theme="dark"] :focus-visible {
  outline-color: #b3a6ff;
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* ===== Variables raíz de Bootstrap ===== */
  --bs-body-color: #e9ecef;
  --bs-body-color-rgb: 233, 236, 239;
  --bs-body-bg: #14161a;
  --bs-body-bg-rgb: 20, 22, 26;
  --bs-border-color: #3a3f47;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-light: #2a2e35;
  --bs-light-rgb: 42, 46, 53;
  --bs-dark: #e9ecef;
  --bs-dark-rgb: 233, 236, 239;
  --bs-highlight-bg: #4d3b00;

  /* Paleta de marca (ver bloque --brand-* en styles.css): en modo oscuro
     cada --bs-primary/secondary/success/info/warning usa el propio pastel
     "200" de su familia -- el mismo #ff99c1/#cc99ff/#99ccff/#ffcc99/#99ffcc
     que ya brilla bien sobre fondo oscuro en el resto del sitio (botón
     principal, degradados de texto). En claro usan el 400/600 (ver
     styles.css) porque el pastel puro es demasiado suave para servir de
     fondo de botón/badge por sí solo. */
  --bs-primary: #ff99c1;
  --bs-primary-rgb: 255, 153, 193;
  --bs-secondary: #cc99ff;
  --bs-secondary-rgb: 204, 153, 255;
  --bs-success: #99ffcc;
  --bs-success-rgb: 153, 255, 204;
  --bs-info: #99ccff;
  --bs-info-rgb: 153, 204, 255;
  --bs-warning: #ffcc99;
  --bs-warning-rgb: 255, 204, 153;
  --bs-link-color: #cc99ff;
  --bs-link-color-rgb: 204, 153, 255;
  --bs-link-hover-color: #e0c2ff;
  --bs-link-hover-color-rgb: 224, 194, 255;
}

/* Forzado explícito: algunos elementos (encabezados, párrafos sueltos)
   no heredan bien el color en ciertos navegadores/versiones si hay reglas
   de especificidad mayor en styles.css que fijan un color propio. */
html[data-theme="dark"] body,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6,
html[data-theme="dark"] p {
  color: var(--bs-body-color);
}

/* ===== Barra de navegación ===== */
html[data-theme="dark"] .navbar {
  --bs-navbar-color: rgba(255, 255, 255, 0.65);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.3);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.15);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* section/navbar.php fuerza fondo blanco con la utilidad .bg-white; se
   redefine solo para el navbar (no globalmente, .bg-white se usa en más
   sitios donde sí debe seguir siendo blanco literal). Se mantiene el
   glassmorfismo (blur) definido en styles.css, solo cambian los tonos. */
html[data-theme="dark"] .navbar.bg-white {
  background-color: rgba(20, 22, 26, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
/* Misma razón que .navbar.bg-white de arriba: blog/includes/header.php
   fuerza fondo blanco con .bg-white en la barra de herramientas del blog
   ("Blog / Inicio > Blog ..."), y su texto (h5, breadcrumb) sí depende de
   --bs-body-color para el tema oscuro — sin este override queda texto
   claro sobre fondo blanco fijo, invisible. */
html[data-theme="dark"] .blog-toolbar.bg-white {
  background-color: #1c1f26 !important;
}
/* Misma razón: blog/ver_entrada.php envuelve el contenido del artículo en
   un <article class="bg-white">, fijo a blanco sin este override. */
html[data-theme="dark"] article.bg-white {
  background-color: #1c1f26 !important;
}

/* ===== Acordeones (preguntas.php, androidApps.php, servicios.php) =====
   Glassmorfismo: base en styles.css, aquí solo cambian los tonos. */
html[data-theme="dark"] .accordion {
  --bs-accordion-color: #e9ecef;
  --bs-accordion-bg: rgba(28, 31, 38, 0.55);
  --bs-accordion-border-color: rgba(255, 255, 255, 0.12);
  --bs-accordion-btn-color: #e9ecef;
  --bs-accordion-btn-bg: rgba(28, 31, 38, 0.55);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e9ecef'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cc99ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #6c5ce7;
  --bs-accordion-active-bg: rgba(42, 36, 64, 0.75);
}
html[data-theme="dark"] .accordion-item {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* ===== Popovers (precios.php, precios-beta; glassmorfismo, base en styles.css) ===== */
html[data-theme="dark"] .popover {
  --bs-popover-bg: rgba(28, 31, 38, 0.55);
  --bs-popover-border-color: rgba(255, 255, 255, 0.15);
  --bs-popover-header-bg: rgba(38, 42, 51, 0.5);
  --bs-popover-header-color: #e9ecef;
  --bs-popover-body-color: #e9ecef;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ===== Dropdowns (glassmorfismo, base en styles.css) ===== */
html[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: rgba(28, 31, 38, 0.55);
  --bs-dropdown-color: #e9ecef;
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-color: #e9ecef;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ===== Tarjetas (glassmorfismo, ver styles.css para la base) ===== */
html[data-theme="dark"] .card {
  --bs-card-cap-bg: rgba(255, 255, 255, 0.05);
  --bs-card-bg: rgba(28, 31, 38, 0.55);
  /* styles.css redeclara --bs-card-cap-color DIRECTO en .card (pasado al
     800 del rosa para pasar contraste en claro) -- eso bloquea la
     herencia normal desde <html>, así que el pastel de oscuro hay que
     reponerlo aquí mismo, sobre .card, no en el bloque raíz de arriba. */
  --bs-card-cap-color: #ff99c1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .card.shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
/* Mismo problema que .text-bg-* h1-h6/p más abajo: un <h2>/<h3> normal
   dentro de .card-header (ej. los títulos de categoría en preguntas.php)
   hereda el rosa pastel de --bs-card-cap-color, pero el catch-all de
   arriba (h1-h6/p -> var(--bs-body-color)) es una regla propia sobre el
   propio encabezado y le gana a la herencia. */
html[data-theme="dark"] .card-header h1,
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-header h6 {
  color: inherit !important;
}

/* ===== Listas ===== */
html[data-theme="dark"] .list-group {
  --bs-list-group-color: #e9ecef;
  --bs-list-group-bg: #1c1f26;
  --bs-list-group-border-color: rgba(255, 255, 255, 0.12);
  --bs-list-group-action-color: #cfd3d8;
  --bs-list-group-action-hover-color: #f8f9fa;
  --bs-list-group-action-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-list-group-action-active-color: #f8f9fa;
  --bs-list-group-action-active-bg: rgba(255, 255, 255, 0.1);
  --bs-list-group-disabled-color: #6c757d;
  --bs-list-group-disabled-bg: #1c1f26;
  --bs-list-group-active-bg: #6c5ce7;
  --bs-list-group-active-border-color: #6c5ce7;
}

/* ===== Pestañas ===== */
html[data-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: #3a3f47;
  --bs-nav-tabs-link-hover-border-color: #3a3f47 #3a3f47 #3a3f47;
  --bs-nav-tabs-link-active-color: #f8f9fa;
  --bs-nav-tabs-link-active-bg: #1c1f26;
  --bs-nav-tabs-link-active-border-color: #3a3f47 #3a3f47 #1c1f26;
}
html[data-theme="dark"] .nav-tabs .nav-link:not(.active) {
  color: #adb5bd;
}

/* ===== Modales (glassmorfismo, base en styles.css) ===== */
html[data-theme="dark"] .modal {
  --bs-modal-color: #e9ecef;
  --bs-modal-border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .modal-content {
  --bs-modal-bg: rgba(28, 31, 38, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.6);
}

/* ===== Diálogos de Summernote (glassmorfismo, base en styles.css) =====
   Clases propias (.note-modal-*), no las de Bootstrap: sin este bloque el
   fondo se queda blanco fijo (viene así por defecto de Summernote) con
   texto claro heredado del tema oscuro del sitio — casi ilegible. */
html[data-theme="dark"] .note-modal-content {
  background-color: rgba(28, 31, 38, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .note-modal-title,
html[data-theme="dark"] .note-form-label,
html[data-theme="dark"] .note-modal-body label,
html[data-theme="dark"] .note-modal .note-help-block {
  color: #e9ecef;
}
html[data-theme="dark"] .note-modal .close {
  color: #e9ecef;
  opacity: 0.75;
}
/* El lienzo de escritura (.note-editable) es la misma historia: fondo
   blanco fijo por defecto de Summernote, que en tema oscuro se queda como
   un recuadro claro suelto en medio del panel. */
html[data-theme="dark"] .note-editable {
  background-color: #1c1f26;
  color: #e9ecef;
}
html[data-theme="dark"] .note-editable.card-block,
html[data-theme="dark"] .note-editor.note-frame {
  border-color: #3a3f47;
}
/* Barra de herramientas, botones, desplegables y popover de edición
   inline (al hacer clic en una imagen/enlace ya insertados): mismo
   problema que arriba, todo viene blanco/gris claro fijo por defecto,
   así que se recrea aquí el equivalente al tema "darkly" de Summernote,
   que esta build (-lite, sin variante oscura propia) no trae incluido. */
html[data-theme="dark"] .note-toolbar {
  background-color: rgba(28, 31, 38, 0.7);
  border-color: #3a3f47;
  color: #e9ecef;
}
html[data-theme="dark"] .note-btn {
  background-color: #22252c;
  border-color: #3a3f47;
  color: #e9ecef;
}
html[data-theme="dark"] .note-btn.active,
html[data-theme="dark"] .note-btn.focus,
html[data-theme="dark"] .note-btn:active,
html[data-theme="dark"] .note-btn:focus,
html[data-theme="dark"] .note-btn:hover {
  background-color: #33373f;
  border-color: #4a4f58;
  color: #fff;
}
html[data-theme="dark"] .note-dropdown-menu,
html[data-theme="dark"] .note-popover.popover,
html[data-theme="dark"] .note-popover-content {
  background-color: #1c1f26;
  border-color: #3a3f47;
  color: #e9ecef;
}
html[data-theme="dark"] a.note-dropdown-item {
  color: #e9ecef;
}
html[data-theme="dark"] .note-dropdown-item:hover {
  background-color: #33373f;
}
html[data-theme="dark"] .note-popover.bottom .note-popover-arrow:after {
  border-bottom-color: #1c1f26;
}
html[data-theme="dark"] .note-popover.top .note-popover-arrow:after {
  border-top-color: #1c1f26;
}
html[data-theme="dark"] .note-popover.right .note-popover-arrow:after {
  border-right-color: #1c1f26;
}
html[data-theme="dark"] .note-popover.left .note-popover-arrow:after {
  border-left-color: #1c1f26;
}
html[data-theme="dark"] .note-statusbar {
  background-color: rgba(255, 255, 255, 0.04);
  border-top-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .note-statusbar .note-resizebar .note-icon-bar {
  border-top-color: rgba(255, 255, 255, 0.3);
}
html[data-theme="dark"] .note-placeholder {
  color: #8a92a1;
}

/* ===== Tablas ===== */
html[data-theme="dark"] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.045);
  --bs-table-active-bg: rgba(255, 255, 255, 0.08);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Filas de categoría de la tabla de precios (Más vendido, Recomendado,
   Para los peques, Música, Favoritos, Otros): .table-info es un cian
   pastel fijo (#cff4fc) con texto negro, igual de "luminoso" que las
   alertas sobre el fondo casi negro del tema oscuro. Mismo tratamiento
   que .alert-info: fondo cian entintado oscuro + texto cian claro. */
html[data-theme="dark"] .table-info {
  --bs-table-color: #7fe3f4;
  --bs-table-bg: #0f333d;
  --bs-table-border-color: #1f5866;
  --bs-table-striped-bg: #123a46;
  --bs-table-striped-color: #7fe3f4;
  --bs-table-active-bg: #1f5866;
  --bs-table-active-color: #7fe3f4;
  --bs-table-hover-bg: #163f4b;
  --bs-table-hover-color: #7fe3f4;
}

/* ===== Comparador de versiones de prompts (panelstatus, pestaña Prompts) =====
   Diff línea a línea entre dos versiones de un prompt. Las filas usan
   .table-success (añadida) y .table-danger (eliminada) de Bootstrap; aquí solo
   se define la rejilla (números de línea, signo, texto monoespaciado) y el
   resaltado de las palabras que cambiaron dentro de una línea retocada.
   El color NO es la única señal: cada fila lleva su signo + / − y un texto
   oculto para lectores de pantalla. */
.diff-caja {
  max-height: 70vh;
  overflow-y: auto; /* un prompt largo no debe empujar el editor fuera de la pantalla */
}

.diff-tabla {
  font-size: 0.875rem;
}

.diff-tabla td {
  vertical-align: top;
}

/* Números de línea y signo: se atenúan para que no compitan con el texto,
   pero sin bajar del contraste AA (≈5.8:1 en claro, ≈7.9:1 en oscuro).
   No se les pone color propio a propósito: así heredan el de la fila y siguen
   legibles dentro de las filas verdes y rojas. */
.diff-num,
.diff-signo {
  opacity: 0.7;
  user-select: none;
  white-space: nowrap;
}

.diff-num {
  width: 3.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.diff-signo {
  width: 1.75rem;
  text-align: center;
  font-weight: 700;
}

.diff-texto {
  width: 100%;
  white-space: pre-wrap;   /* respeta la sangría del prompt y parte las líneas largas */
  word-break: break-word;  /* en móvil, antes que provocar scroll horizontal */
  font-family: var(--bs-font-monospace);
}

/* Una línea vacía seguiría siendo un cambio: sin esto la fila se aplastaría */
.diff-texto:empty::before {
  content: "\00a0";
}

/* Palabras que cambiaron dentro de una línea retocada. El amarillo de <mark>
   sobre una fila ya coloreada se lee como un tercer color sin significado;
   aquí es el MISMO color de la fila, solo que más saturado. */
.diff-texto mark {
  padding: 0 0.15em;
  border-radius: 0.2rem;
  color: inherit;
}

.diff-tabla .table-success mark {
  background-color: #a3d9bd;
}

.diff-tabla .table-danger mark {
  background-color: #f1aeb5;
}

/* Tema oscuro: .table-success y .table-danger son pasteles fijos con texto
   negro (mismo caso que .table-info de arriba). Un diff entero de filas así
   sobre el fondo casi negro deslumbra, así que se entintan en oscuro. */
html[data-theme="dark"] .table-success {
  --bs-table-color: #8fe3b3;
  --bs-table-bg: #10331f;
  --bs-table-border-color: #1e5335;
  --bs-table-striped-bg: #143a25;
  --bs-table-striped-color: #8fe3b3;
  --bs-table-active-bg: #1e5335;
  --bs-table-active-color: #8fe3b3;
  --bs-table-hover-bg: #17402a;
  --bs-table-hover-color: #8fe3b3;
}

html[data-theme="dark"] .table-danger {
  --bs-table-color: #f2a0aa;
  --bs-table-bg: #3d1319;
  --bs-table-border-color: #5f1f28;
  --bs-table-striped-bg: #44161d;
  --bs-table-striped-color: #f2a0aa;
  --bs-table-active-bg: #5f1f28;
  --bs-table-active-color: #f2a0aa;
  --bs-table-hover-bg: #4b1a21;
  --bs-table-hover-color: #f2a0aa;
}

html[data-theme="dark"] .diff-tabla .table-success mark {
  background-color: #1c5c39;
}

html[data-theme="dark"] .diff-tabla .table-danger mark {
  background-color: #6e2029;
}

/* ===== Barras de progreso (pestaña Ventas) ===== */
html[data-theme="dark"] .progress {
  --bs-progress-bg: #2a2e35;
  --bs-progress-bar-bg: #6c5ce7;
}

/* ===== Checkboxes/switches (modal de Novedades) ===== */
html[data-theme="dark"] .form-check-input {
  background-color: #1c1f26;
  border-color: rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] .form-check-input:checked {
  background-color: #6c5ce7;
  border-color: #6c5ce7;
}

/* ===== Formularios ===== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea.form-control {
  color: #e9ecef;
  background-color: #1c1f26;
  border-color: #3a3f47;
}
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  color: #f8f9fa;
  background-color: #1c1f26;
}
html[data-theme="dark"] .form-control::placeholder {
  color: #6c757d;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
  background-color: #14161a;
  color: #6c757d;
}

/* ===== Utilidades de Bootstrap 5.3 que la 5.2.3 (base del proyecto) no trae =====
   .text-body-secondary y .bg-body-tertiary / .bg-body-secondary se usan en el
   panel (y en alguna página pública). En 5.2.3 no existen: el texto salía a
   color normal y los fondos, transparentes. Se completan aquí con los mismos
   valores que 5.3 para el tema claro; el tema oscuro los redefine más abajo. */
.text-body-secondary { color: #6c757d !important; }        /* = .text-muted de 5.2.3 */
.bg-body-tertiary    { background-color: #f8f9fa !important; }
.bg-body-secondary   { background-color: #e9ecef !important; }

/* ===== Texto atenuado ===== */
html[data-theme="dark"] .text-muted {
  color: #9aa1a9 !important;
}
html[data-theme="dark"] .text-body-secondary {
  color: #9aa1a9 !important;
}
html[data-theme="dark"] .bg-body-tertiary {
  background-color: #1c1f26 !important;
}
html[data-theme="dark"] .bg-body-secondary {
  background-color: #22252c !important;
}

/* ===== Salida de comandos / resultados (pre) ===== */
html[data-theme="dark"] pre {
  color: #e9ecef;
}

/* ===== Badges neutros ===== */
html[data-theme="dark"] .text-bg-secondary {
  color: #14161a !important;
}

/* ===== Barras flotantes/sticky (glassmorfismo, base en styles.css) ===== */
html[data-theme="dark"] .glass-toolbar.bg-body {
  background-color: rgba(28, 31, 38, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

/* ===== Scrollbar (Chromium/Android WebView) ===== */
html[data-theme="dark"] {
  scrollbar-color: #4a4f58 #1c1f26;
}
html[data-theme="dark"] ::-webkit-scrollbar {
  background-color: #1c1f26;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #4a4f58;
  border-radius: 6px;
}

/* ===== Botones "Me gusta / Comentar / Compartir" (publicación de Facebook, precios-beta) =====
   Son .btn-light, que fija bg/color claros por variable de Bootstrap sin
   adaptarse al tema; se redeclaran esas mismas variables en oscuro para que
   combinen con el fondo de la tarjeta en vez de quedar como un recuadro
   claro suelto. */
html[data-theme="dark"] .fb-action-btn {
  --bs-btn-color: #e9ecef;
  --bs-btn-bg: #2a2e35;
  --bs-btn-border-color: #2a2e35;
  --bs-btn-hover-color: #f8f9fa;
  --bs-btn-hover-bg: #343841;
  --bs-btn-hover-border-color: #3a3f47;
  --bs-btn-active-color: #f8f9fa;
  --bs-btn-active-bg: #3a3f47;
  --bs-btn-active-border-color: #3a3f47;
  --bs-btn-disabled-color: #9aa1a9;
  --bs-btn-disabled-bg: #2a2e35;
  --bs-btn-disabled-border-color: #2a2e35;
}

/* ===== Estados activos/"primary" (azul → índigo, ver variables raíz) =====
   styles.css fija #1e30f3 directamente (sin variable) en varios
   componentes; se redeclaran aquí sus propias variables de Bootstrap con
   el nuevo índigo para que combinen con --bs-primary de arriba. */
html[data-theme="dark"] .link-primary {
  color: #ff99c1 !important;
}
html[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #ff99c1;
  --bs-btn-border-color: #ff99c1;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ff99c1;
  --bs-btn-hover-border-color: #ff99c1;
  --bs-btn-focus-shadow-rgb: 255, 153, 193;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ff99c1;
  --bs-btn-active-border-color: #ff99c1;
  --bs-btn-disabled-color: #ff99c1;
  --bs-btn-disabled-border-color: #ff99c1;
}
/* Los otros 4 outline-* de marca: en claro su texto base usa el tono 800
   de su familia (ver styles.css) porque el 400/600 vivo no pasa contraste
   sobre blanco -- pero ese mismo 800 es casi invisible sobre el fondo
   oscuro del sitio (1.9:1). En oscuro pasan al pastel 200, igual que
   .btn-outline-primary de arriba. */
html[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #cc99ff;
  --bs-btn-border-color: #cc99ff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #cc99ff;
  --bs-btn-hover-border-color: #cc99ff;
  --bs-btn-focus-shadow-rgb: 204, 153, 255;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #cc99ff;
  --bs-btn-active-border-color: #cc99ff;
  --bs-btn-disabled-color: #cc99ff;
  --bs-btn-disabled-border-color: #cc99ff;
}
html[data-theme="dark"] .btn-outline-success {
  --bs-btn-color: #99ffcc;
  --bs-btn-border-color: #99ffcc;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #99ffcc;
  --bs-btn-hover-border-color: #99ffcc;
  --bs-btn-focus-shadow-rgb: 153, 255, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #99ffcc;
  --bs-btn-active-border-color: #99ffcc;
  --bs-btn-disabled-color: #99ffcc;
  --bs-btn-disabled-border-color: #99ffcc;
}
html[data-theme="dark"] .btn-outline-info {
  --bs-btn-color: #99ccff;
  --bs-btn-border-color: #99ccff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #99ccff;
  --bs-btn-hover-border-color: #99ccff;
  --bs-btn-focus-shadow-rgb: 153, 204, 255;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #99ccff;
  --bs-btn-active-border-color: #99ccff;
  --bs-btn-disabled-color: #99ccff;
  --bs-btn-disabled-border-color: #99ccff;
}
html[data-theme="dark"] .btn-outline-warning {
  --bs-btn-color: #ffcc99;
  --bs-btn-border-color: #ffcc99;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffcc99;
  --bs-btn-hover-border-color: #ffcc99;
  --bs-btn-focus-shadow-rgb: 255, 204, 153;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcc99;
  --bs-btn-active-border-color: #ffcc99;
  --bs-btn-disabled-color: #ffcc99;
  --bs-btn-disabled-border-color: #ffcc99;
}
/* .btn-outline-danger no es de marca, pero su rojo por defecto (#dc3545)
   tampoco pasa contraste en oscuro (3.6:1) -- mismo rojo suave que
   .text-danger/.alert-danger en oscuro. */
html[data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #f1969f;
  --bs-btn-border-color: #f1969f;
  --bs-btn-disabled-color: #f1969f;
  --bs-btn-disabled-border-color: #f1969f;
}
/* .btn-outline-dark no es de marca; su negro por defecto (#212529) es
   prácticamente invisible sobre el fondo oscuro del sitio (~1.05:1,
   "Comprar por WhatsApp" en index.php). Se sube a blanco, mismo patrón
   que el resto de los outline-* en oscuro. */
html[data-theme="dark"] .btn-outline-dark {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}
html[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-link-active-bg: #6c5ce7;
}
html[data-theme="dark"] .nav-pills {
  --bs-nav-pills-link-active-bg: #6c5ce7;
}
html[data-theme="dark"] .pagination {
  --bs-pagination-active-bg: #6c5ce7;
  --bs-pagination-active-border-color: #6c5ce7;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(108, 92, 231, 0.25);
}
/* ===== Tabla de precios (#miTabla, precios/worktable) =====
   El hover de fila (#fbe4ff, casi blanco) y el color de enlace en hover
   (azul #0d6efd) quedan como un recuadro claro suelto sobre fondo oscuro. */
html[data-theme="dark"] #miTabla tbody tr:not(.table-info):not(.collapse-row):hover {
  background-color: rgba(255, 153, 193, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] #miTabla a:hover {
  color: #e0c2ff !important;
}

/* ===== Decoración de puntos (sobre.php, sección de perfil) ===== */
html[data-theme="dark"] .profile .dots-2 svg,
html[data-theme="dark"] .profile .dots-4 svg {
  fill: #6c5ce7;
}

/* ===== Addon de los buscadores (preguntas/precios/worktable) =====
   .input-group-text fija colores claros sin variable de Bootstrap: se
   veía como una casilla gris clara pegada al input ya oscurecido. */
html[data-theme="dark"] .input-group-text {
  color: #e9ecef;
  background-color: #262a33;
  border-color: #3a3f47;
}

/* ===== Alertas =====
   Los 5 tonos usan fondos pasteles casi blancos con texto oscuro (mismo
   valor en claro/oscuro); sobre fondo oscuro quedan como un recuadro claro
   suelto. Se oscurece el fondo y se aclara el texto conservando el matiz
   de cada variante. */
html[data-theme="dark"] .alert-danger {
  --bs-alert-color: #f1969f;
  --bs-alert-bg: #3a1f24;
  --bs-alert-border-color: #5c2830;
}
html[data-theme="dark"] .alert-success {
  --bs-alert-color: #7ee2ab;
  --bs-alert-bg: #163429;
  --bs-alert-border-color: #235c42;
}
html[data-theme="dark"] .alert-warning {
  --bs-alert-color: #ffda6a;
  --bs-alert-bg: #3d3210;
  --bs-alert-border-color: #6b551a;
}
html[data-theme="dark"] .alert-info {
  --bs-alert-color: #7fe3f4;
  --bs-alert-bg: #0f333d;
  --bs-alert-border-color: #1f5866;
}
html[data-theme="dark"] .alert-light {
  --bs-alert-color: #e9ecef;
  --bs-alert-bg: #2a2e35;
  --bs-alert-border-color: #3a3f47;
}

/* ===== Encabezado de tabla de precios (.promo-table-header) =====
   En claro es rosa sólido #ff99c1 con texto oscuro (fijo, ver styles.css).
   Ese mismo rosa pastel a máxima claridad sobre el fondo casi negro del
   tema oscuro "brilla" y cansa la vista aunque el contraste interno sea
   correcto. En oscuro se invierte: fondo entintado oscuro (mismo tono que
   ya usa el acordeón activo) + texto rosa claro, en vez de bloque claro. */
html[data-theme="dark"] .promo-table-header {
  background-color: #2a2440;
  color: #ffb8d9;
}

/* ===== Insignias/badges de marca =====
   .text-bg-* fija su color en RGB literal (sin variable, ver styles.css),
   así que necesitan su propio override aquí. En modo oscuro pasan al
   pastel "200" de su familia -- son claros, por eso el texto es negro
   (igual que .btn-primary, que ya usa este mismo patrón). */
html[data-theme="dark"] .text-bg-primary {
  background-color: #ff99c1 !important;
  color: #000 !important;
}
html[data-theme="dark"] .text-bg-secondary {
  background-color: #cc99ff !important;
  color: #000 !important;
}
html[data-theme="dark"] .text-bg-success {
  background-color: #99ffcc !important;
  color: #000 !important;
}
html[data-theme="dark"] .text-bg-info {
  background-color: #99ccff !important;
  color: #000 !important;
}
html[data-theme="dark"] .text-bg-warning {
  background-color: #ffcc99 !important;
  color: #000 !important;
}
html[data-theme="dark"] .badge.bg-primary {
  --bs-badge-color: #000;
  background-color: #ff99c1 !important;
}
/* El negro !important de arriba pone bien el color del propio .text-bg-*,
   pero un <h5>/<p> DENTRO (ej. el encabezado de cada asistente en
   Prompts) tiene su propia regla de la sección "texto" de arriba (más
   específica que la herencia), que los deja en gris claro -- ilegible
   sobre el pastel claro del fondo. Que hereden del contenedor en vez de
   usar ese gris. */
html[data-theme="dark"] .text-bg-primary h1,
html[data-theme="dark"] .text-bg-primary h2,
html[data-theme="dark"] .text-bg-primary h3,
html[data-theme="dark"] .text-bg-primary h4,
html[data-theme="dark"] .text-bg-primary h5,
html[data-theme="dark"] .text-bg-primary h6,
html[data-theme="dark"] .text-bg-primary p,
html[data-theme="dark"] .text-bg-secondary h1,
html[data-theme="dark"] .text-bg-secondary h2,
html[data-theme="dark"] .text-bg-secondary h3,
html[data-theme="dark"] .text-bg-secondary h4,
html[data-theme="dark"] .text-bg-secondary h5,
html[data-theme="dark"] .text-bg-secondary h6,
html[data-theme="dark"] .text-bg-secondary p,
html[data-theme="dark"] .text-bg-success h1,
html[data-theme="dark"] .text-bg-success h2,
html[data-theme="dark"] .text-bg-success h3,
html[data-theme="dark"] .text-bg-success h4,
html[data-theme="dark"] .text-bg-success h5,
html[data-theme="dark"] .text-bg-success h6,
html[data-theme="dark"] .text-bg-success p,
html[data-theme="dark"] .text-bg-info h1,
html[data-theme="dark"] .text-bg-info h2,
html[data-theme="dark"] .text-bg-info h3,
html[data-theme="dark"] .text-bg-info h4,
html[data-theme="dark"] .text-bg-info h5,
html[data-theme="dark"] .text-bg-info h6,
html[data-theme="dark"] .text-bg-info p,
html[data-theme="dark"] .text-bg-warning h1,
html[data-theme="dark"] .text-bg-warning h2,
html[data-theme="dark"] .text-bg-warning h3,
html[data-theme="dark"] .text-bg-warning h4,
html[data-theme="dark"] .text-bg-warning h5,
html[data-theme="dark"] .text-bg-warning h6,
html[data-theme="dark"] .text-bg-warning p,
html[data-theme="dark"] .text-bg-danger h1,
html[data-theme="dark"] .text-bg-danger h2,
html[data-theme="dark"] .text-bg-danger h3,
html[data-theme="dark"] .text-bg-danger h4,
html[data-theme="dark"] .text-bg-danger h5,
html[data-theme="dark"] .text-bg-danger h6,
html[data-theme="dark"] .text-bg-danger p {
  color: inherit !important;
}

/* ===== Texto de color plano (.text-primary, etc.) =====
   En claro usan el tono 800 de su familia (necesario para pasar contraste
   sobre fondo claro, ver styles.css). Ese mismo 800 es casi ilegible sobre
   el fondo oscuro del sitio, así que aquí pasan al pastel 200 -- claro,
   de marca, y ya usado en los degradados de texto del resto del sitio. */
html[data-theme="dark"] .text-primary {
  color: #ff99c1 !important;
}
html[data-theme="dark"] .text-secondary {
  color: #cc99ff !important;
}
html[data-theme="dark"] .text-success {
  color: #99ffcc !important;
}
html[data-theme="dark"] .text-info {
  color: #99ccff !important;
}
html[data-theme="dark"] .text-warning {
  color: #ffcc99 !important;
}
/* .text-danger no es parte de la paleta de marca (rojo de alerta/error),
   pero el rojo por defecto de Bootstrap (#dc3545) tampoco pasaba contraste
   sobre el fondo oscuro del sitio (3.6:1) -- se detectó al auditar TODO el
   sitio, no solo lo tocado hoy. Mismo rojo suave que ya usa .alert-danger
   en oscuro (ver arriba), ya probado ahí. */
html[data-theme="dark"] .text-danger {
  color: #f1969f !important;
}
/* Enlaces dentro de una entrada del blog (ver blog-custom.css .post-content
   a): en oscuro el 800 usado en claro es casi invisible, pasa al pastel. */
html[data-theme="dark"] .post-content a {
  color: #ff99c1;
}

/* ===== Tarjeta "captura de Facebook" (precios.php, index.php) =====
   .post-container recrea a propósito una publicación real de Facebook
   (fondo blanco, azul #1877f2, fecha gris) -- es una captura, no debe
   "adaptarse" al tema oscuro del sitio o deja de parecer real. El
   problema es que SÍ heredaba texto claro de las reglas generales de
   modo oscuro (ej. .post-user quedaba casi invisible sobre su propio
   fondo blanco, que nunca cambia). Se blinda todo el bloque contra eso. */
html[data-theme="dark"] .post-container {
  background-color: #fff !important;
  color: #050505 !important;
}
html[data-theme="dark"] .post-container .post-date,
html[data-theme="dark"] .post-container .privacy-icon {
  color: gray !important;
}
html[data-theme="dark"] .post-container .post-content a {
  color: #1461c9 !important;
}

/* ===== Barra fija "1 dispositivo / 2 dispositivos" (worktable.php) =====
   bg-white queda fijo a blanco por diseño (se usa también para superficies
   que deben seguir blancas), y aquí además convive con .text-dark, que en
   oscuro se vuelve claro: sobre fondo blanco el texto quedaría invisible. */
html[data-theme="dark"] .device-switch-bar {
  background-color: #1c1f26 !important;
}

/* ===== Botón de alternar tema ===== */
[data-theme-toggle] {
  line-height: 1;
}
