/* ============================================================================
   Headwind MDM 7.x — Tema "KiNi Sky" (Dim / Dim-Light)
   v3 — adaptado al DOM real del panel 7.02.4 + capa de correccion de
   superficies claras hardcodeadas (ver theme-toggle.js).

   Aca se resuelve: 1) toggle oscuro/claro  2) acento SKY  3) contraste real
   4) alineacion de la barra lateral  5) dashboard en tarjetas  6) acciones de
   tabla  7) paginador integrado  8) inputs redondeados  9) pantallas con
   colores fijos (edicion de configuracion y otras).
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* ==========================================================================
   SUPERFICIES BASE (las usa tambien theme-toggle.js)
   ========================================================================== */
:root {
  --kini-surface-1: #0e1116;
  --kini-surface-2: #171c24;
  --kini-surface-3: #202834;
  --kini-surface-4: #2a3442;
}
html[data-theme="dim-light"] {
  --kini-surface-1: #ffffff;
  --kini-surface-2: #ffffff;
  --kini-surface-3: #f2f5f9;
  --kini-surface-4: #e6ebf2;
}

/* ==========================================================================
   1. DIM (OSCURO, POR DEFECTO) — acento SKY
   ========================================================================== */
:root,
html:not([data-theme="dim-light"]) {
  --mat-sys-primary: #38bdf8;
  --mat-sys-on-primary: #08121d;
  --mat-ripple-color: rgba(56, 189, 248, .28);

  --mat-sys-surface: #0e1116;
  --mat-sidenav-content-background-color: #0e1116;
  --mat-card-elevated-container-color: #171c24;
  --mat-tab-background-color: #202834;
  --mat-sys-surface-variant: #2a3442;
  --m3-surface-card: #171c24;

  --mat-sys-on-surface: #e8eef6;
  --mat-table-header-headline-color: #c3d0de;
  --text-muted: #9fb0c4;

  --mat-sidenav-container-background-color: #12161d;
  --mat-sidenav-container-text-color: #e8eef6;
  --mat-sidenav-container-width: 258px;
  --mat-toolbar-container-background-color: #12161d;
  --mat-toolbar-container-text-color: #e8eef6;

  --mat-sys-corner-small: 10px;
  --mat-sys-corner-medium: 14px;
  --mat-sys-corner-large: 18px;
  --mat-menu-container-shape: 14px;
  --border-color: #2b3442;
  --border-hover: #3d4a5c;

  --mat-sys-success: #4ade80;
  --mat-sys-error: #fb7185;
  --mat-sys-info: #38bdf8;
  --mat-sys-warning: #fbbf24;

  --card-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -8px rgba(0, 0, 0, .55);
  --dropdown-shadow: 0 12px 34px -6px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   2. DIM-LIGHT (CLARO) — acento SKY con contraste AA
   ========================================================================== */
html[data-theme="dim-light"] {
  --mat-sys-primary: #0284c7;
  --mat-sys-on-primary: #ffffff;
  --mat-ripple-color: rgba(2, 132, 199, .18);

  --mat-sys-surface: #ffffff;
  --mat-sidenav-content-background-color: #ffffff;
  --mat-card-elevated-container-color: #ffffff;
  --mat-tab-background-color: #f2f5f9;
  --mat-sys-surface-variant: #e6ebf2;

  --mat-sys-on-surface: #0f1720;
  --mat-table-header-headline-color: #4a5768;
  --text-muted: #5a6675;

  --mat-sidenav-container-background-color: #12161d;
  --mat-sidenav-container-text-color: #f1f5f9;
  --mat-toolbar-container-background-color: #ffffff;
  --mat-toolbar-container-text-color: #0f1720;

  --border-color: #dfe4ea;
  --border-hover: #b9c3cf;
  --mat-sys-success: #15803d;
  --mat-sys-error: #dc2626;
  --mat-sys-info: #0284c7;
  --mat-sys-warning: #b45309;
  --card-shadow: 0 1px 2px rgba(15, 23, 32, .06), 0 8px 24px -12px rgba(15, 23, 32, .18);
  --dropdown-shadow: 0 12px 28px -8px rgba(15, 23, 32, .22);
}

html:not([data-theme="dim-light"]) body { color-scheme: dark; }
html[data-theme="dim-light"] body { color-scheme: light; }
body {
  background-color: var(--mat-sys-surface) !important;
  color: var(--mat-sys-on-surface) !important;
}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
html, body, input, textarea, select, button,
.mat-typography, .mat-mdc-form-field, .mat-mdc-table, .mat-toolbar,
.mat-mdc-menu-panel, .mat-mdc-select-panel, .mat-datepicker-content,
.mat-mdc-tab-group, .mat-mdc-dialog-surface {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ==========================================================================
   4. BARRA LATERAL — alineacion corregida (punto 4)
   El nodo es un mat-tree-node con "padding-left:0" inline y el icono pegado
   al borde: el !important del stylesheet gana sobre ese estilo inline.
   ========================================================================== */
.container-side {
  background-color: var(--mat-sidenav-container-background-color) !important;
  border-right: 1px solid var(--border-color) !important;
}
.container-side .mat-tree-node {
  padding: 10px 14px 10px 14px !important;
  margin: 3px 10px !important;
  border-radius: var(--mat-sys-corner-medium) !important;
  color: var(--mat-sidenav-container-text-color) !important;
  align-items: center !important;
  gap: 0 !important;
  transition: background .16s ease, transform .16s ease, color .16s ease !important;
}
/* separacion icono <-> texto (antes quedaba pegado al borde izquierdo) */
.container-side .mat-tree-node .menu-icon {
  margin: 0 14px 0 2px !important;
  font-size: 21px !important;
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 auto !important;
  opacity: .92;
}
.container-side .mat-tree-node .menu-text {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container-side .mat-tree-node:hover {
  background: var(--kini-surface-3) !important;
  color: #ffffff !important;
  transform: translateX(2px);
}
.container-side .mat-tree-node:hover .menu-icon { opacity: 1; }
.container-side .mat-tree-node.active,
.container-side .mat-tree-node.active:hover {
  background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 0 var(--mat-sys-primary);
}
.container-side .mat-tree-node.active .menu-icon { color: var(--mat-sys-primary) !important; }
.container-side .mat-tree-node.active .menu-text { font-weight: 700 !important; }
.container-side .menu-logo,
.container-side .menu-toggle { color: var(--mat-sidenav-container-text-color) !important; }
.container-side .menu-title { font-weight: 700 !important; letter-spacing: .2px; }
.container-side .mat-divider { border-color: var(--border-color) !important; }

/* ==========================================================================
   5. BARRA SUPERIOR + BOTON DE TEMA (punto 1)
   ========================================================================== */
.header.mat-toolbar,
.mat-toolbar.header {
  background-color: var(--mat-toolbar-container-background-color) !important;
  color: var(--mat-toolbar-container-text-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 0 0 var(--border-color);
}
.header .user-name { font-weight: 600 !important; }

.kini-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: var(--kini-surface-3);
  color: var(--mat-sys-on-surface);
  cursor: pointer;
  padding: 0;
  transition: border-color .16s ease, color .16s ease, transform .16s ease, background .16s ease;
}
.kini-theme-toggle:hover {
  border-color: var(--mat-sys-primary);
  color: var(--mat-sys-primary);
  transform: translateY(-1px);
}
.kini-theme-toggle:active { transform: scale(.94); }
.kini-theme-toggle .material-icons { font-size: 19px; }

/* ==========================================================================
   6. TARJETAS / CONTENIDO
   ========================================================================== */
.mat-mdc-card,
.container-main .table {
  background-color: var(--mat-card-elevated-container-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--mat-sys-corner-medium) !important;
  box-shadow: var(--card-shadow) !important;
}
.mat-mdc-card-title,
.table-title {
  font-weight: 700 !important;
  color: var(--mat-sys-on-surface) !important;
  letter-spacing: .2px;
}
.table-header { border-bottom: 1px solid var(--border-color) !important; }
.mat-badge-content {
  background: var(--mat-sys-primary) !important;
  color: var(--mat-sys-on-primary) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
}

/* ==========================================================================
   7. DASHBOARD — cada bloque dentro de una tarjeta con margen en los 4 lados
   (punto 5). El DOM real es: core-dashboard > .dashboard.scroll-wrap >
   section.dashboard-section (los graficos ya viven dentro de cada section).
   ========================================================================== */
.dashboard.scroll-wrap {
  padding: 20px 20px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
section.dashboard-section {
  background-color: var(--mat-card-elevated-container-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--mat-sys-corner-medium) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 20px !important;
  margin: 0 !important;
  overflow: hidden;
}
section.dashboard-section > * { margin-top: 0 !important; }
section.dashboard-section h1,
section.dashboard-section h2,
section.dashboard-section h3,
section.dashboard-section .section-title {
  color: var(--mat-sys-on-surface) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  border-bottom: 0 !important;
}

/* ==========================================================================
   8. TABLA + ACCIONES (punto 6)
   ========================================================================== */
.table,
.mat-mdc-table-container,
core-devices-table { border-radius: var(--mat-sys-corner-medium); overflow: hidden; }
.mat-mdc-card:has(.mat-mdc-table),
.mat-mdc-card.table {
  overflow: hidden !important;
  border-radius: var(--mat-sys-corner-medium) !important;
}
.mat-mdc-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}
.mat-mdc-header-row { background: var(--mat-tab-background-color) !important; }
.mat-mdc-header-cell {
  background: transparent !important;
  color: var(--mat-table-header-headline-color) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.mat-mdc-cell {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border-color) !important;
  vertical-align: middle;
  font-size: 13px !important;
}
.mat-mdc-row { transition: background .15s ease !important; }
.mat-mdc-row:hover { background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent) !important; }
.mat-mdc-no-data-row td { color: var(--text-muted) !important; }

/* La tabla tiene scroll horizontal: la columna de acciones queda FIJADA a la
   derecha para que los botones de cada fila se vean siempre. */
.mat-mdc-header-cell:last-child,
.mat-mdc-cell:last-child {
  position: sticky !important;
  right: 0 !important;
  background-color: var(--mat-card-elevated-container-color) !important;
  box-shadow: -10px 0 14px -10px rgba(0, 0, 0, .45);
  z-index: 2;
}
.mat-mdc-header-cell:last-child {
  background-color: var(--mat-tab-background-color) !important;
  z-index: 3;
}
/* OJO: position:sticky NO funciona si un ancestro tiene overflow:hidden.
   El scroll horizontal lo hace .table-container, asi que liberamos la tabla. */
.mat-mdc-table,
.mdc-data-table,
.mat-mdc-row,
.mdc-data-table__content { overflow: visible !important; }
.mat-mdc-row:hover .mat-mdc-cell:last-child {
  background-color: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-card-elevated-container-color)) !important;
}

/* Acciones de fila: botones tipo "pill" con borde y hover de acento */
core-actions-cell .cell,
.mat-mdc-cell.core-actions-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}
core-actions-cell button.mat-mdc-icon-button {
  width: 34px !important;
  height: 34px !important;
  padding: 5px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--mat-sys-corner-small) !important;
  background: var(--kini-surface-3) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .12s ease !important;
}
core-actions-cell button.mat-mdc-icon-button .material-icons { font-size: 18px !important; }
core-actions-cell button.mat-mdc-icon-button:hover {
  border-color: var(--mat-sys-primary) !important;
  color: var(--mat-sys-primary) !important;
  background: color-mix(in srgb, var(--mat-sys-primary) 14%, transparent) !important;
  transform: translateY(-1px);
}
core-actions-cell button.mat-mdc-icon-button:active { transform: scale(.94); }

/* ==========================================================================
   9. PAGINADOR integrado a la tarjeta (punto 7)
   ========================================================================== */
.mat-mdc-paginator {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-color) !important;
  font-size: 12.5px !important;
}
.mat-mdc-paginator-container {
  padding: 10px 18px !important;
  min-height: 0 !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.mat-mdc-paginator-page-size-label,
.mat-mdc-paginator-range-label { color: var(--text-muted) !important; margin: 0 8px 0 0 !important; }
.mat-mdc-paginator .mat-mdc-select-trigger {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--mat-sys-corner-small) !important;
  padding: 3px 8px !important;
  background: var(--kini-surface-3) !important;
  min-width: 62px;
}
.mat-mdc-paginator .mat-mdc-select-value { color: var(--mat-sys-on-surface) !important; font-weight: 600; }
.mat-mdc-paginator .mat-mdc-paginator-navigation-previous,
.mat-mdc-paginator .mat-mdc-paginator-navigation-next,
.mat-mdc-paginator .mat-mdc-paginator-navigation-first,
.mat-mdc-paginator .mat-mdc-paginator-navigation-last {
  border-radius: var(--mat-sys-corner-small) !important;
  color: var(--mat-sys-on-surface) !important;
}
.mat-mdc-paginator .mat-mdc-paginator-navigation-previous:hover,
.mat-mdc-paginator .mat-mdc-paginator-navigation-next:hover {
  background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent) !important;
  color: var(--mat-sys-primary) !important;
}
.mat-mdc-paginator .mat-mdc-paginator-navigation-previous[disabled],
.mat-mdc-paginator .mat-mdc-paginator-navigation-next[disabled] { color: var(--text-muted) !important; opacity: .45; }

/* ==========================================================================
   10. BOTONES
   ========================================================================== */
.mat-mdc-raised-button,
.mat-mdc-unelevated-button,
.mat-mdc-button,
.mat-mdc-outlined-button {
  border-radius: var(--mat-sys-corner-medium) !important;
  font-weight: 600 !important;
  letter-spacing: .1px;
  transition: transform .12s cubic-bezier(0, 0, .2, 1), filter .18s ease, background .18s ease !important;
}
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.primary,
.mat-mdc-unelevated-button.primary,
.mat-mdc-button.primary {
  background: var(--mat-sys-primary) !important;
  color: var(--mat-sys-on-primary) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--mat-sys-primary) 30%, transparent) !important;
}
.mat-mdc-raised-button.mat-primary .mdc-button__label,
.mat-mdc-unelevated-button.mat-primary .mdc-button__label,
.mat-mdc-raised-button.primary .mdc-button__label,
.mat-mdc-unelevated-button.primary .mdc-button__label,
.mat-mdc-button.primary .mdc-button__label,
.mat-mdc-raised-button.mat-primary .material-icons,
.mat-mdc-unelevated-button.mat-primary .material-icons,
.mat-mdc-raised-button.primary .material-icons,
.mat-mdc-unelevated-button.primary .material-icons,
.mat-mdc-button.primary .material-icons { color: var(--mat-sys-on-primary) !important; }
.mat-mdc-raised-button.mat-primary:hover,
.mat-mdc-unelevated-button.mat-primary:hover,
.mat-mdc-unelevated-button.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mat-mdc-raised-button:active,
.mat-mdc-unelevated-button:active,
.mat-mdc-button:active { transform: scale(.97) !important; }
.mat-mdc-outlined-button {
  border: 1px solid var(--border-color) !important;
  color: var(--mat-sys-on-surface) !important;
}
.mat-mdc-outlined-button:hover {
  background: var(--mat-tab-background-color) !important;
  border-color: var(--border-hover) !important;
}

/* ==========================================================================
   11. FORMULARIOS / INPUTS bien redondeados (punto 8)
   ========================================================================== */
.mat-mdc-form-field .mat-mdc-text-field-wrapper,
.mdc-text-field--outlined { border-radius: 16px !important; }
.mdc-notched-outline__leading {
  border-radius: 16px 0 0 16px !important;
  border-color: var(--border-color) !important;
}
.mdc-notched-outline__trailing {
  border-radius: 0 16px 16px 0 !important;
  border-color: var(--border-color) !important;
}
.mdc-notched-outline__notch { border-color: var(--border-color) !important; }
.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__trailing,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__trailing,
.mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline__notch {
  border-color: var(--mat-sys-primary) !important;
  border-width: 2px !important;
}
.mat-mdc-form-field-infix { padding-top: 14px !important; padding-bottom: 12px !important; }
.mat-mdc-input-element { color: var(--mat-sys-on-surface) !important; }
.mat-mdc-floating-label { font-weight: 600; }
.mat-mdc-select-trigger,
.date-control,
.mat-date-range-input,
.mat-mdc-input-element { border-radius: var(--mat-sys-corner-small) !important; }
.mat-mdc-form-field .mat-mdc-text-field-wrapper { background: var(--kini-surface-2) !important; }
textarea.mat-mdc-input-element { border-radius: 14px !important; padding: 10px 12px !important; }

/* Interruptores / toggles / checkboxes redondeados con el acento */
.mat-button-toggle-group,
.mat-button-toggle-standalone {
  border-radius: var(--mat-sys-corner-medium) !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
  background: var(--kini-surface-3) !important;
}
.mat-button-toggle {
  color: var(--mat-sys-on-surface) !important;
  background: transparent !important;
  border-radius: var(--mat-sys-corner-medium) !important;
}
.mat-button-toggle-focus-overlay { background-color: transparent !important; }
.mat-button-toggle-checked {
  background: color-mix(in srgb, var(--mat-sys-primary) 20%, transparent) !important;
  color: var(--mat-sys-primary) !important;
  border-radius: var(--mat-sys-corner-medium) !important;
}
.mat-button-toggle-checked .mat-button-toggle-focus-overlay { opacity: 0 !important; }
.mdc-checkbox__background,
.mat-mdc-checkbox .mdc-checkbox__background {
  border-radius: 5px !important;
  border-color: var(--border-hover) !important;
}
.mat-mdc-slide-toggle .mdc-switch__track { border-radius: 9999px !important; }

/* ==========================================================================
   12. PESTANAS / PANELES DESPLEGABLES / DIALOGOS / SNACKBARS
   ========================================================================== */
.mat-mdc-tab-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.mat-mdc-tab .mdc-tab__text-label { font-weight: 600 !important; }
.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label { color: var(--mat-sys-primary) !important; }
.mat-mdc-tab-group .mat-mdc-tab-body-content { color: var(--mat-sys-on-surface) !important; }
.mat-mdc-select-panel,
.mat-mdc-menu-panel,
.mat-datepicker-content,
.cdk-overlay-pane .mat-mdc-select-panel {
  background: var(--mat-card-elevated-container-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--mat-sys-corner-medium) !important;
  box-shadow: var(--dropdown-shadow) !important;
}
.mat-mdc-menu-panel { padding: 6px !important; }
.mat-mdc-menu-item,
.mat-mdc-option {
  border-radius: var(--mat-sys-corner-small) !important;
  color: var(--mat-sys-on-surface) !important;
}
.mat-mdc-menu-item:hover,
.mat-mdc-option:hover {
  background: var(--mat-tab-background-color) !important;
  color: var(--mat-sys-primary) !important;
}
.mat-mdc-menu-item .material-icons { color: var(--text-muted) !important; }
.mat-mdc-menu-item:hover .material-icons { color: var(--mat-sys-primary) !important; }
.mat-mdc-option.mdc-list-item--selected,
.mat-mdc-option.mat-mdc-option-active {
  background: color-mix(in srgb, var(--mat-sys-primary) 16%, transparent) !important;
  color: var(--mat-sys-primary) !important;
}
.mat-mdc-dialog-surface {
  background: var(--mat-card-elevated-container-color) !important;
  color: var(--mat-sys-on-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--mat-sys-corner-large) !important;
  box-shadow: var(--dropdown-shadow) !important;
}
.mat-mdc-snack-bar-container {
  --mdc-snackbar-container-color: var(--mat-card-elevated-container-color);
  --mdc-snackbar-supporting-text-color: var(--mat-sys-on-surface);
  border: 1px solid var(--border-color) !important;
  border-radius: var(--mat-sys-corner-medium) !important;
}
.mat-mdc-tooltip .mdc-tooltip__surface {
  background: var(--kini-surface-4) !important;
  color: var(--mat-sys-on-surface) !important;
  border-radius: var(--mat-sys-corner-small) !important;
}

/* ==========================================================================
   13. SUPERFICIES CLARAS HARDCODEADAS EN LA APP (punto 9)
   La app trae valores fijos del tema claro (Material 3) en varias pantallas:
   en oscuro quedaban casi blancas con texto claro encima. Se corrigen aca y
   theme-toggle.js cubre el resto de forma automatica.
   ========================================================================== */
html:not([data-theme="dim-light"]) .mat-mdc-tab-group,
html:not([data-theme="dim-light"]) .mat-mdc-tab-group.details-tabs,
html:not([data-theme="dim-light"]) core-configuration-details,
html:not([data-theme="dim-light"]) core-configuration-common,
html:not([data-theme="dim-light"]) core-configuration-design,
html:not([data-theme="dim-light"]) .container-block,
html:not([data-theme="dim-light"]) .form-app,
html:not([data-theme="dim-light"]) .form-fieldset,
html:not([data-theme="dim-light"]) .form-fieldset.config-row,
html:not([data-theme="dim-light"]) .search-menu-container,
html:not([data-theme="dim-light"]) .cookie-notice,
html:not([data-theme="dim-light"]) .form-file,
html:not([data-theme="dim-light"]) .color-picker,
html:not([data-theme="dim-light"]) .privacy-card,
html:not([data-theme="dim-light"]) .success-message,
html:not([data-theme="dim-light"]) .error-message,
html:not([data-theme="dim-light"]) .badge-locked,
html:not([data-theme="dim-light"]) .mat-pseudo-checkbox {
  background-color: var(--kini-surface-2) !important;
  color: var(--mat-sys-on-surface) !important;
}
html:not([data-theme="dim-light"]) .form-fieldset.config-row:hover,
html:not([data-theme="dim-light"]) .form-fieldset:hover {
  background-color: var(--kini-surface-3) !important;
}
html:not([data-theme="dim-light"]) .mat-pseudo-checkbox {
  background-color: transparent !important;
  border-color: var(--border-hover) !important;
}
html:not([data-theme="dim-light"]) .success-message {
  background-color: color-mix(in srgb, var(--mat-sys-success) 16%, transparent) !important;
}
html:not([data-theme="dim-light"]) .error-message {
  background-color: color-mix(in srgb, var(--mat-sys-error) 16%, transparent) !important;
}
html[data-theme="dim-light"] .mat-mdc-tab-group,
html[data-theme="dim-light"] .form-fieldset,
html[data-theme="dim-light"] .container-block {
  background-color: var(--mat-card-elevated-container-color) !important;
  color: var(--mat-sys-on-surface) !important;
}

/* ==========================================================================
   14. DETALLES
   ========================================================================== */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 22%, transparent);
  border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
* { scrollbar-width: thin; }

/* La app tambien usa class="primary" en BOTONES: si se pinta .primary sin
   excluir botones, el texto queda del color del fondo (invisible). */
.danger:not(button):not(.mat-mdc-button-base)  { color: var(--mat-sys-error) !important; }
.info:not(button):not(.mat-mdc-button-base)    { color: var(--mat-sys-info) !important; }
.primary:not(button):not(.mat-mdc-button-base) { color: var(--mat-sys-primary) !important; }

/* Evita el destello blanco al cambiar de tema */
html { background-color: var(--mat-sys-surface); }