/*=============================================
COMPONENTES — cobertura de Bootstrap por tokens

theme.css define los tokens y estiliza lo propio del
CRM (sidebar, chat, embudo), pero deja los componentes
de Bootstrap con sus colores de fabrica, pensados para
fondo claro.

Resultado en modo oscuro: breadcrumbs, labels, tarjetas,
tablas y menus quedaban oscuro sobre oscuro. Se nota
sobre todo en las pantallas del constructor dinamico,
que son casi puro Bootstrap.

Todo lo de aca sale de los tokens, asi que sirve para
los dos temas sin duplicar un solo color.

Se carga DESPUES de theme.css.
=============================================*/

body {
  background: var(--bg-app);
  color: var(--text-primary);
}

/*=============================================
BREADCRUMBS Y TITULOS

Era lo mas roto: el titulo de la pantalla se leia
casi negro sobre carbon.
=============================================*/

.breadcrumb {
  background: transparent;
  margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--accent-primary);
}

.breadcrumb-item.active {
  color: var(--text-primary);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

/*=============================================
TARJETAS
=============================================*/

.card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

.card-header,
.card-footer {
  background: var(--surface-muted);
  border-color: var(--divider);
  color: var(--text-primary);
}

/*=============================================
FORMULARIOS

Los labels usaban el gris de Bootstrap y los inputs
su fondo blanco fijo.
=============================================*/

label,
.form-label,
.col-form-label {
  color: var(--text-secondary);
}

.form-control,
.form-select,
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-muted);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.input-group-text {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-secondary);
}

.form-check-input {
  background-color: var(--surface-muted);
  border-color: var(--border-strong);
}

.form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.form-check-label {
  color: var(--text-secondary);
}

.form-text,
small.text-muted,
.text-muted {
  color: var(--text-muted) !important;
}

/*=============================================
TABLAS

Son la pantalla mas usada del CRM.
=============================================*/

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  color: var(--text-primary);
  border-color: var(--border);
}

.table > thead th {
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-color: var(--border);
  font-weight: 600;
}

.table > tbody td {
  border-color: var(--divider);
  color: var(--text-primary);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--surface-muted);
  color: var(--text-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--surface-muted);
  color: var(--text-primary);
}

/*=============================================
MODALES Y MENUS
=============================================*/

.modal-content {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

.modal-header,
.modal-footer {
  border-color: var(--divider);
}

.dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-muted);
  color: var(--text-primary);
}

.dropdown-divider {
  border-color: var(--divider);
}

/* El aspa de cerrar viene negra: invisible sobre carbon */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/*=============================================
BOTONES SECUNDARIOS

Quedaban sin fondo ni borde visible sobre carbon.
=============================================*/

.btn-default,
.btn-outline-secondary,
.btn-light {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-primary);
}

.btn-default:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/*=============================================
PAGINACION Y PESTAÑAS
=============================================*/

.page-link {
  background: var(--surface);
  border-color: var(--border);
}

.page-item.disabled .page-link {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-muted);
}

.nav-tabs {
  border-color: var(--border);
}

.nav-tabs .nav-link {
  color: var(--text-secondary);
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  border-color: var(--border);
  color: var(--text-primary);
}

.nav-tabs .nav-link.active {
  background: var(--surface);
  border-color: var(--border) var(--border) var(--surface);
  color: var(--text-primary);
}

/*=============================================
EDITORES DE TEXTO

Summernote trae su propio blanco fijo.
=============================================*/

.note-editor.note-frame {
  border-color: var(--border);
  background: var(--surface-muted);
}

.note-editor .note-toolbar,
.note-editor .note-statusbar {
  background: var(--surface-muted);
  border-color: var(--divider);
}

.note-editor .note-editable {
  background: var(--surface-muted);
  color: var(--text-primary);
}

.note-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="dark"] .note-icon-caret,
html[data-theme="dark"] .note-btn i {
  color: var(--text-primary);
}

/*=============================================
SELECT2
=============================================*/

.select2-container--bootstrap4 .select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-primary);
}

.select2-dropdown {
  background: var(--surface);
  border-color: var(--border);
}

.select2-results__option {
  color: var(--text-primary);
}

.select2-container--default .select2-results__option--highlighted {
  background: var(--accent-primary);
  color: #fff;
}

/*=============================================
SEPARADORES
=============================================*/

hr {
  border-color: var(--divider);
  opacity: 1;
}

/*=============================================
FOCO VISIBLE

Sin esto la navegacion por teclado no se ve.
=============================================*/

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/*=============================================
SIDEBAR COLAPSABLE

theme.css ya colapsa con #wrapper.toggled, pero esa
clase la pone el JS cuando el DOM ya existe. Como el
estado ahora se recuerda entre paginas, hace falta
aplicarlo ANTES de pintar: por eso se espeja sobre
html[data-sidebar="collapsed"], que se setea en el
<head>. Sin esto el sidebar se ve abrirse y cerrarse
en cada navegacion.
=============================================*/

html[data-sidebar="collapsed"] .sidebar-wrapper-new,
html[data-sidebar="collapsed"] #sidebar-wrapper {
  width: 68px;
}

html[data-sidebar="collapsed"] .menu-text,
html[data-sidebar="collapsed"] .sidebar-brand-name,
html[data-sidebar="collapsed"] .sidebar-item-actions,
html[data-sidebar="collapsed"] .sidebar-add-btn span {
  display: none;
}

html[data-sidebar="collapsed"] .sidebar-add-btn {
  padding: 10px 0;
}

/*=============================================
Colapsado: los iconos se centran y el texto no
alcanza a verse cortado durante la transicion.
=============================================*/

html[data-sidebar="collapsed"] .sidebar-nav-item,
#wrapper.toggled .sidebar-nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

html[data-sidebar="collapsed"] .sidebar-brand-new,
#wrapper.toggled .sidebar-brand-new {
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
}

/* La transicion va en el ancho, no en propiedades
   que provoquen reflujo del contenido */
.sidebar-wrapper-new,
#sidebar-wrapper {
  transition: width 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-wrapper-new,
  #sidebar-wrapper {
    transition: none;
  }
}

/*=============================================
MARCA DEL SIDEBAR

Sin logo: queda solo el nombre. Se le da el peso
tipografico que antes aportaba el icono.
=============================================*/

.sidebar-brand-name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sidebar-fg-strong);
  white-space: nowrap;
}

/* Si symbol_admin queda vacio, que no deje un hueco */
.sidebar-brand-mark:empty {
  display: none;
}

/*=============================================
UTILIDADES DE BOOTSTRAP CON COLOR FIJO

Las vistas usan bg-white 24 veces, text-dark 14 y
bg-light 5. Son utilidades con el color escrito a
mano, asi que en modo oscuro dejaban tarjetas
blancas con texto negro en medio de la interfaz
carbon. La pantalla de Archivos era el caso mas
visible.

Se redefinen por token en vez de tocar los 43
lugares donde se usan: en todos, la intencion real
era "superficie", no "blanco literal". En tema
claro los tokens resuelven a blanco, asi que el
resultado no cambia.
=============================================*/

.bg-white {
  background-color: var(--surface) !important;
  color: var(--text-primary);
}

.bg-light {
  background-color: var(--surface-muted) !important;
  color: var(--text-primary);
}

.text-dark {
  color: var(--text-primary) !important;
}

.border {
  border-color: var(--border) !important;
}

.bg-body,
.bg-body-tertiary {
  background-color: var(--surface) !important;
}

/*=============================================
El contenedor del dashboard y el area de contenido
=============================================*/

#page-content-wrapper {
  background: var(--bg-app);
  color: var(--text-primary);
}

/*=============================================
ICONOS DE ACCION

Varios botones de accion de las tablas dinamicas
heredan el color del texto; sobre carbon quedaban
negros sobre negro.
=============================================*/

.btn i,
.btn-default i {
  color: inherit;
}

/*=============================================
CHAT: lo que theme.css no alcanzo

theme.css cubre .chat-container, .chat-header,
.chat-body y .contact-list, pero chat.css deja con
color fijo tres selectores que siguen vivos en el
markup: cada item de la lista de contactos, la
burbuja del bot y los chips de respuesta rapida.
=============================================*/

.contact-item {
  background-color: var(--surface);
  color: var(--text-primary);
  border-color: var(--divider);
}

.contact-item:hover {
  background-color: var(--surface-muted);
}

.msg.bot {
  background-color: var(--business-bubble);
  color: var(--text-primary);
}

.quick-reply-chip {
  background-color: var(--surface-muted);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.quick-reply-chip:hover {
  background-color: var(--accent-soft);
  border-color: var(--accent-primary);
  color: var(--accent-text);
}