/* Paleta de acentos seleccionables (UI-005). Los colores solo se definen aqui,
   en :root; el resto del CSS usa var(--...). */
:root {
  --accent-blue-1: #2563eb;      --accent-blue-2: #1d4ed8;
  --accent-teal-1: #0d9488;      --accent-teal-2: #0f766e;
  --accent-green-1: #16a34a;     --accent-green-2: #15803d;
  --accent-orange-1: #ea580c;    --accent-orange-2: #c2410c;
  --accent-red-1: #dc2626;       --accent-red-2: #b91c1c;
  --accent-pink-1: #db2777;      --accent-pink-2: #be185d;
  --accent-violet-1: #7c3aed;    --accent-violet-2: #6d28d9;
  --contrast-text-light: #000000;
  --contrast-border-light: #6b7280;
  --contrast-text-dark: #ffffff;
  --contrast-border-dark: #94a3b8;
}

/* Acento: mayor especificidad que el bloque de marca inline del layout, asi
   que solo se aplica si el usuario elige un color; con "default" manda la
   marca de la empresa. */
html[data-accent="blue"][data-theme]   { --color-brand-primary: var(--accent-blue-1);   --color-brand-secondary: var(--accent-blue-2); }
html[data-accent="teal"][data-theme]   { --color-brand-primary: var(--accent-teal-1);   --color-brand-secondary: var(--accent-teal-2); }
html[data-accent="green"][data-theme]  { --color-brand-primary: var(--accent-green-1);  --color-brand-secondary: var(--accent-green-2); }
html[data-accent="orange"][data-theme] { --color-brand-primary: var(--accent-orange-1); --color-brand-secondary: var(--accent-orange-2); }
html[data-accent="red"][data-theme]    { --color-brand-primary: var(--accent-red-1);    --color-brand-secondary: var(--accent-red-2); }
html[data-accent="pink"][data-theme]   { --color-brand-primary: var(--accent-pink-1);   --color-brand-secondary: var(--accent-pink-2); }
html[data-accent="violet"][data-theme] { --color-brand-primary: var(--accent-violet-1); --color-brand-secondary: var(--accent-violet-2); }

/* Tamano de fuente (Bootstrap usa rem) */
html[data-font-size="small"] { font-size: 14px; }
html[data-font-size="large"] { font-size: 18px; }

/* Densidad */
html[data-density="compact"] .card-body { padding: 0.75rem; }
html[data-density="compact"] .table > :not(caption) > * > * { padding-top: 0.3rem; padding-bottom: 0.3rem; }
html[data-density="compact"] .dash-stat-card,
html[data-density="compact"] .org-stat-card { padding: 0.65rem 0.8rem; }
html[data-density="wide"] .card-body { padding: 1.5rem; }
html[data-density="wide"] .table > :not(caption) > * > * { padding-top: 0.9rem; padding-bottom: 0.9rem; }

/* Sin animaciones */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Alto contraste */
html[data-contrast="high"][data-theme="light"] {
  --color-text-main: var(--contrast-text-light);
  --color-text-muted: var(--contrast-text-light);
  --color-border: var(--contrast-border-light);
}
html[data-contrast="high"][data-theme="dark"] {
  --color-text-main: var(--contrast-text-dark);
  --color-text-muted: var(--contrast-text-dark);
  --color-border: var(--contrast-border-dark);
}

/* Pagina de preferencias */
.pref-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: var(--color-text-main);
}
.pref-option.is-selected {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 1px var(--color-brand-primary);
}
.pref-swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pref-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
  cursor: pointer;
}
.pref-swatch.is-selected { box-shadow: 0 0 0 2px var(--color-brand-primary); }
.pref-swatch[data-value="default"] { background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary)); }
.pref-swatch[data-value="blue"]   { background: var(--accent-blue-1); }
.pref-swatch[data-value="teal"]   { background: var(--accent-teal-1); }
.pref-swatch[data-value="green"]  { background: var(--accent-green-1); }
.pref-swatch[data-value="orange"] { background: var(--accent-orange-1); }
.pref-swatch[data-value="red"]    { background: var(--accent-red-1); }
.pref-swatch[data-value="pink"]   { background: var(--accent-pink-1); }
.pref-swatch[data-value="violet"] { background: var(--accent-violet-1); }