/* Digital Resource + Digital Solutions · Spectrum 2.0 · Shared visual layer.
   Layout, business state, visibility and brand image geometry are unchanged. */
:root {
  /* Modern shared finish: restrained depth, warm surfaces and clear focus. */
  --dr-modern-radius: 14px;
  --dr2-canvas: #f4f5f2;
  --dr2-surface: #ffffff;
  --dr2-text: #203a40;
  --dr2-muted: #687b7d;
  --dr2-line: #dfe6e1;
  --dr2-primary: #14675e;
  --dr2-teal: #0f716e;
  --dr2-violet: #7054a4;
  --dr2-ochre: #946124;
  --dr2-indigo: #5556a9;
  --dr2-coral: #a64b36;
  --dr2-rose: #a23e68;
  --dr2-cyan: #16758b;
  --dr2-indigo-soft: #e6e6fa;
  --dr2-coral-soft: #fae5db;
  --dr2-rose-soft: #f6e2ec;
  --dr2-cyan-soft: #ddf0f5;
  --dr2-nav: #ffffff;
  --dr2-header: #ffffff;
  --dr2-hero: #e4eee5;
  --dr2-teal-soft: #deefea;
  --dr2-violet-soft: #ece5f6;
  --dr2-ochre-soft: #f4e9d8;
  --dr2-blue-soft: #e0edf8;
  --dr2-input: #ffffff;
  --dr2-on-accent: #ffffff;
  --dr-bg-canvas: var(--dr2-canvas);
  --dr-bg-surface: var(--dr2-surface);
  --dr-text-primary: var(--dr2-text);
  --dr-text-secondary: var(--dr2-muted);
}

:root.dark, :root[data-theme="dark"], :root[data-bs-theme="dark"],
:root:has(body.dark), :root:has(body.dark-mode), :root:has(body[data-theme="dark"]) {
  --dr2-canvas: #17242f;
  --dr2-surface: #213340;
  --dr2-text: #edf4f8;
  --dr2-muted: #b8cbd6;
  --dr2-line: #476071;
  --dr2-primary: #126f8b;
  --dr2-teal: #8ed9cc;
  --dr2-violet: #cfbaf4;
  --dr2-ochre: #e9c385;
  --dr2-indigo: #c2c4ff;
  --dr2-coral: #f0b29b;
  --dr2-rose: #f0b3cf;
  --dr2-cyan: #9ddce9;
  --dr2-indigo-soft: #343851;
  --dr2-coral-soft: #4b3731;
  --dr2-rose-soft: #483247;
  --dr2-cyan-soft: #25434e;
  --dr2-nav: linear-gradient(165deg, #234443, #293d51 62%, #39334f);
  --dr2-header: linear-gradient(110deg, #254542, #2d3d54 68%, #443e34);
  --dr2-hero: linear-gradient(125deg, #285651, #334d69 58%, #504264);
  --dr2-teal-soft: #284b46;
  --dr2-violet-soft: #403650;
  --dr2-ochre-soft: #493e2c;
  --dr2-blue-soft: #293f56;
  --dr2-input: #1b2c39;
  color-scheme: dark;
}

html body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: radial-gradient(ellipse at 95% 0%, color-mix(in srgb, var(--dr2-violet-soft) 85%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 95%, var(--dr2-teal-soft), transparent 60%), var(--dr2-canvas) !important;
  color: var(--dr2-text);
}

/* Page-level canvas. Keep visibility and dimensions owned by each application. */
body :is(main, .main-content, .main-wrapper, .content-wrapper, .page-content) {
  background-color: transparent !important;
}
body :is(.card, .panel, .box, .widget, .metric, .stat-card, .kpi-card, .modal-content,
  [data-slot="card"], section.bg-white, article.bg-white, form.bg-white) {
  background-color: var(--dr2-surface) !important;
  color: var(--dr2-text);
  border-color: var(--dr2-line) !important;
  box-shadow: 0 5px 20px rgb(32 62 76 / .055);
}

/* Navigation is a recognizable colored surface, in both themes. */
body :is(.side, .sidebar, .appnav, aside.navigation, [data-sidebar="sidebar"], [data-slot="sidebar-inner"], .admin-sidebar),
body.dr-quala-app.admin-layout > .top,
body.admin-layout > .top {
  background: var(--dr2-nav) !important;
  color: var(--dr2-text) !important;
  border-color: var(--dr2-line) !important;
}
body :is(.topbar, .appbar, .navbar, header.top:not(.admin-layout > .top), .main-header, .app-header),
body [data-slot="sidebar-inset"] > header {
  background: var(--dr2-header) !important;
  border-color: var(--dr2-line) !important;
  color: var(--dr2-text);
}
body :is(.sidebar, .side, .admin-sidebar, .menu, .top-menu, [data-sidebar="sidebar"])
  :is(a, button):not(.active):not([data-active="true"]):not(.logout):not(.logout-btn) {
  color: var(--dr2-text) !important;
}
body :is(.sidebar, .side, .menu, .top-menu, [data-sidebar="sidebar"])
  :is(a, button):hover {
  background-color: var(--dr2-blue-soft) !important;
}
body :is(.sidebar, .side, .menu, .top-menu, .nav, [data-sidebar="sidebar"])
  :is(a.active, button.active, [aria-current="page"], [data-active="true"]) {
  background: linear-gradient(110deg, #126b85, #196e6b) !important;
  color: #fff !important;
  border-color: #126b85 !important;
  box-shadow: inset 3px 0 #8bd5f5;
}
body :is(.sidebar, .side, .menu, .top-menu, [data-sidebar="sidebar"])
  :is(a.active, button.active, [aria-current="page"], [data-active="true"]) :is(span, svg) { color: inherit !important; }
body :is(.sidebar-header, .sidebar .brand, .side .brand, .top-left) { border-color: var(--dr2-line) !important; }

/* Hero and access: richer complementary colors, neutral form fields. */
body :is(.promo, .login-hero, .login-aside, .hero-panel, .hero-main, .auth-aside),
body #app section.from-sky-50,
body main > section.from-white,
body main > section:has(> .flex .tracking-\[\.18em\]) {
  background: var(--dr2-hero) !important;
  border-color: var(--dr2-line) !important;
}
body :is(.login, .login-panel, .login-card, .auth-card) {
  background-color: var(--dr2-surface) !important;
  border-color: var(--dr2-line) !important;
}
body #app .max-w-5xl > section:not(.from-sky-50) { background: var(--dr2-surface) !important; }
body #app > .min-h-svh { background: transparent !important; }
.dr-login-standardized :is(.promo, .login-hero, .login-aside) {
  background: var(--dr2-hero) !important;
}
.dr-login-standardized :is(.promo::before, .promo::after) { opacity: .35; }
body .login-panel:has(.login-copy) { background: var(--dr2-hero) !important; color: var(--dr2-text) !important; }
body .login-copy :is(h1, p, .eyebrow), body .login-foot { color: var(--dr2-text) !important; }
body .login-copy em { color: var(--dr2-teal) !important; }
body .login-form-wrap { background: var(--dr2-surface) !important; }
body .hero-side { background: var(--dr2-header) !important; color: var(--dr2-text) !important; }
body .hero-side .eyebrow { color: var(--dr2-teal) !important; }
body .hero-side > small { color: var(--dr2-muted) !important; opacity: 1 !important; }
body .coverage > div { background: var(--dr2-surface) !important; color: var(--dr2-text); }
body .coverage span { color: var(--dr2-muted) !important; }

/* Decorative hues identify sibling cards; status colors retain their meaning. */
body :is(.stats, .stats-grid, .metrics, .kpis, .dashboard-stats, .cards, .grid, .row)
  > :is(.metric, .stat-card, .kpi-card, article, .card):not(.alert):not(.error):not(.success):nth-child(4n+1) {
  background: var(--dr2-teal-soft) !important;
  border-block-start: 3px solid var(--dr2-teal) !important;
}
body :is(.stats, .stats-grid, .metrics, .kpis, .dashboard-stats, .cards, .grid, .row)
  > :is(.metric, .stat-card, .kpi-card, article, .card):not(.alert):not(.error):not(.success):nth-child(4n+2) {
  background: var(--dr2-violet-soft) !important;
  border-block-start: 3px solid var(--dr2-violet) !important;
}
body :is(.stats, .stats-grid, .metrics, .kpis, .dashboard-stats, .cards, .grid, .row)
  > :is(.metric, .stat-card, .kpi-card, article, .card):not(.alert):not(.error):not(.success):nth-child(4n+3) {
  background: var(--dr2-ochre-soft) !important;
  border-block-start: 3px solid var(--dr2-ochre) !important;
}
body :is(.stats, .stats-grid, .metrics, .kpis, .dashboard-stats, .cards, .grid, .row)
  > :is(.metric, .stat-card, .kpi-card, article, .card):not(.alert):not(.error):not(.success):nth-child(4n) {
  background: var(--dr2-blue-soft) !important;
  border-block-start: 3px solid #347caf !important;
}
body :is(.panel, .card, .widget) > :is(.card-header, .panel-header),
body table thead th {
  background: var(--dr2-blue-soft) !important;
  color: var(--dr2-text) !important;
  border-color: var(--dr2-line) !important;
}
body table { background-color: var(--dr2-surface) !important; color: var(--dr2-text); }
body table tbody tr:nth-child(even):not(.selected):not(.error):not(.success) {
  background-color: color-mix(in srgb, var(--dr2-blue-soft) 27%, var(--dr2-surface));
}
body table tbody tr:hover { background-color: var(--dr2-blue-soft); }
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea) {
  background-color: var(--dr2-input) !important;
  color: var(--dr2-text) !important;
  border-color: var(--dr2-line) !important;
  accent-color: var(--dr2-primary);
}
body :is(input, textarea)::placeholder { color: var(--dr2-muted) !important; opacity: 1; }
body :is(.btn.primary, .btn-primary, button.primary, .button.primary, .cta, button[type="submit"]) {
  background: linear-gradient(115deg, #126b85, #196e6b) !important;
  color: #fff !important;
  border-color: #126b85 !important;
}
body :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #9372c4;
  outline-offset: 3px;
}
body :is(.panel, .card, .sidebar, .side, main, .promo, .login, .topbar)
  :is(h1, h2, h3, h4, label) { color: var(--dr2-text); }
body :is(.muted, .sub, .help, .text-muted, .text-muted-foreground) { color: var(--dr2-muted); }

/* Tailwind application adapter: JAC native and embedded modules. */
body [data-slot="sidebar-inset"], body #app > div.bg-slate-50 { background: transparent !important; }
body main > .grid > a.bg-white:nth-child(3n+1),
body main section > .grid > a.bg-white:nth-child(3n+1) { background: var(--dr2-teal-soft) !important; }
body main > .grid > a.bg-white:nth-child(3n+2),
body main section > .grid > a.bg-white:nth-child(3n+2) { background: var(--dr2-violet-soft) !important; }
body main > .grid > a.bg-white:nth-child(3n),
body main section > .grid > a.bg-white:nth-child(3n) { background: var(--dr2-ochre-soft) !important; }
body :is(.text-slate-900, .text-slate-800) { color: var(--dr2-text) !important; }
body :is(.text-slate-500, .text-slate-600) { color: var(--dr2-muted) !important; }

/* Dark mode must also neutralize explicit white/light utilities from older pages. */
:is(html.dark, html[data-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"]) :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100) {
  background-color: var(--dr2-surface) !important;
  color: var(--dr2-text);
}
:is(html.dark, html[data-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"]) :is(.bg-sky-50, .bg-sky-100, .bg-blue-50) { background-color: var(--dr2-blue-soft) !important; }
:is(html.dark, html[data-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"]) :is(.bg-emerald-50, .bg-emerald-100) { background-color: var(--dr2-teal-soft) !important; }
:is(html.dark, html[data-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"]) :is(.bg-violet-50, .bg-violet-100) { background-color: var(--dr2-violet-soft) !important; }
:is(html.dark, html[data-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"]) :is(.bg-amber-50, .bg-amber-100) { background-color: var(--dr2-ochre-soft) !important; }
:is(html.dark, html[data-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"]) :is(.text-sky-700, .text-sky-800, .text-blue-700) { color: #abd9f4 !important; }
:is(html.dark, html[data-theme="dark"], body.dark, body.dark-mode, body[data-theme="dark"]) :is(.text-emerald-700, .text-emerald-800) { color: #ade5d2 !important; }

@media print {
  html body { background: white !important; color: black !important; }
  body :is(.card, .panel, table, article) { box-shadow: none !important; }
}
/* September refresh. Do not change visibility, input geometry or status colors. */
body :is(.panel,.widget,.stat-card,.kpi-card,[data-slot="card"]) {
  border-radius:var(--dr-modern-radius);
  box-shadow:0 1px 2px rgb(20 45 60 / .05),0 8px 24px rgb(20 45 60 / .045);
}
body :is(h1,h2,.page-title){letter-spacing:-.025em;text-wrap:balance}
body :is(.page-kicker,.eyebrow){color:var(--dr2-teal);font-weight:700}
body :is(input,select,textarea):focus-visible,
body :is(button,a):focus-visible {
  outline:3px solid var(--dr2-teal);outline-offset:3px;
}
body :is(.table, .table-responsive) thead th {
  background:var(--dr2-blue-soft);color:var(--dr2-text);font-weight:650;
}
body :is(.table, .table-responsive) tbody tr:hover {
  background:var(--dr2-teal-soft);
}
body :is(.measurement-hero,.workspace-page-head,.page-header) {
  border-color:var(--dr2-line);
}
body[data-dr-app="misteryshopper"] {
  --bg:var(--dr2-canvas);--card:var(--dr2-surface);--line:var(--dr2-line);
  --text:var(--dr2-text);--muted:var(--dr2-muted);--brand:#126b85;--brand2:#196e6b;
}
body[data-dr-app="misteryshopper"] .measurement-hero {background:var(--dr2-hero)}
body[data-dr-app="misteryshopper"] [data-dr-nav] .menu {min-width:0;max-width:100%}
body[data-dr-app="misteryshopper"] [data-dr-nav] .menu button {min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
body[data-dr-app="misteryshopper"] .metric-card.primary {
  background:var(--dr2-teal-soft);border-color:var(--dr2-line);
}
body[data-dr-app="misteryshopper"] .metric-card.primary :is(span,strong,small) {color:var(--dr2-text)}
@media(min-width:981px){
  body[data-dr-app="misteryshopper"][data-dr-menu="collapsed"]>.wrap {grid-template-rows:minmax(0,1fr)!important}
}
@media(prefers-reduced-motion:reduce){
  .dr-workspace-button {transition:none!important}
}

/* Spectrum 3 finish: a quieter, more dimensional product language.
   Presentation only: no element is hidden, reordered or made interactive here. */
:root {
  --dr3-radius-sm: 9px;
  --dr3-radius-md: 14px;
  --dr3-radius-lg: 20px;
  --dr3-shadow-sm: 0 1px 2px rgb(20 45 60 / .06), 0 4px 12px rgb(20 45 60 / .035);
  --dr3-shadow-md: 0 2px 4px rgb(20 45 60 / .05), 0 14px 34px rgb(20 45 60 / .075);
  --dr3-shadow-float: 0 18px 48px rgb(20 45 60 / .14);
  --dr3-highlight: rgb(255 255 255 / .72);
  --dr3-glow-a: rgb(53 173 167 / .12);
  --dr3-glow-b: rgb(112 84 164 / .10);
  --dr3-glow-c: rgb(235 160 102 / .09);
}
:root.dark, :root[data-theme="dark"], :root[data-bs-theme="dark"],
:root:has(body.dark), :root:has(body.dark-mode), :root:has(body[data-theme="dark"]) {
  --dr3-highlight: rgb(255 255 255 / .07);
  --dr3-shadow-sm: 0 1px 2px rgb(0 0 0 / .20), 0 5px 16px rgb(0 0 0 / .12);
  --dr3-shadow-md: 0 2px 5px rgb(0 0 0 / .18), 0 16px 38px rgb(0 0 0 / .20);
  --dr3-shadow-float: 0 20px 52px rgb(0 0 0 / .32);
  --dr3-glow-a: rgb(47 185 176 / .10);
  --dr3-glow-b: rgb(160 126 224 / .10);
  --dr3-glow-c: rgb(226 156 94 / .08);
}

html body {
  background:
    radial-gradient(circle at 7% -8%, var(--dr3-glow-a), transparent 33rem),
    radial-gradient(circle at 96% 8%, var(--dr3-glow-b), transparent 38rem),
    radial-gradient(circle at 55% 110%, var(--dr3-glow-c), transparent 34rem),
    var(--dr2-canvas) !important;
}

body[data-dr-app] {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body[data-dr-app] :is(h1, h2, h3, .page-title) {
  color: var(--dr2-text);
  letter-spacing: -.032em;
}
body[data-dr-app] :is(.eyebrow, .page-kicker, .section-kicker) {
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Shells read as part of one product family without becoming visually heavy. */
body[data-dr-app] :is(.topbar, .appbar, .navbar, .main-header, .app-header),
body[data-dr-app] [data-slot="sidebar-inset"] > header {
  background: color-mix(in srgb, var(--dr2-header) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--dr2-line) 82%, transparent) !important;
  box-shadow: 0 1px 0 var(--dr3-highlight), 0 8px 24px rgb(20 45 60 / .035);
  backdrop-filter: saturate(125%) blur(12px);
}
body[data-dr-app] [data-dr-nav] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dr2-teal-soft) 38%, var(--dr2-nav)) 0%,
      var(--dr2-nav) 34%, color-mix(in srgb, var(--dr2-violet-soft) 20%, var(--dr2-nav)) 100%) !important;
  border-color: color-mix(in srgb, var(--dr2-line) 88%, transparent) !important;
  box-shadow: inset -1px 0 var(--dr3-highlight), 8px 0 30px rgb(20 45 60 / .035);
}
body[data-dr-app] [data-dr-nav] :is(.nav-label, .nav-section-label, .side-copy) {
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}
body[data-dr-app] [data-dr-nav] :is(a, button, summary):where(:not(.brand, .dr-topbar-logo, .sidebar-close)) {
  transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body[data-dr-app] [data-dr-nav] :is(a, button, summary):hover {
  background: color-mix(in srgb, var(--dr2-blue-soft) 78%, var(--dr2-surface)) !important;
  transform: translateX(2px);
}
body[data-dr-app] [data-dr-nav] :is(a, button, summary):is(.active, .dr-nav-active, [aria-current="page"], [data-active="true"]) {
  background: linear-gradient(115deg, #126b85, #167779 58%, #236b63) !important;
  box-shadow: 0 7px 18px rgb(18 107 133 / .20), inset 0 1px rgb(255 255 255 / .18) !important;
}

/* Cards and panels: crisp edge, soft elevation and a subtle top highlight. */
body[data-dr-app] :is(.card, .panel, .box, .widget, .metric, .stat-card, .kpi-card,
  .summary-card, .dash-card, .modal-content, [data-slot="card"]) {
  border-color: color-mix(in srgb, var(--dr2-line) 86%, transparent) !important;
  box-shadow: var(--dr3-shadow-sm);
}
body[data-dr-app] :is(.card, .panel, .widget, .dash-card, [data-slot="card"]) {
  border-radius: var(--dr3-radius-md);
}
body[data-dr-app] :is(.page-header, .page-head, .hero-row, .jac-overview-hero,
  .measurement-hero, .dr-panel-heading) {
  background:
    linear-gradient(128deg,
      color-mix(in srgb, var(--dr2-teal-soft) 78%, var(--dr2-surface)),
      color-mix(in srgb, var(--dr2-blue-soft) 70%, var(--dr2-surface)) 55%,
      color-mix(in srgb, var(--dr2-violet-soft) 54%, var(--dr2-surface))) !important;
  border: 1px solid color-mix(in srgb, var(--dr2-line) 82%, transparent) !important;
  box-shadow: var(--dr3-shadow-md);
}
body[data-dr-app] :is(.metric, .stat-card, .kpi-card, .summary-card, .dash-kpi, .jac-overview-metric) {
  position: relative;
  overflow: hidden;
  box-shadow: var(--dr3-shadow-sm) !important;
}
body[data-dr-app] :is(.metric, .stat-card, .kpi-card, .summary-card, .dash-kpi, .jac-overview-metric)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, var(--dr3-highlight), transparent 42%);
  opacity: .45;
}

/* Inputs and actions use the same geometry and interaction rhythm everywhere. */
body[data-dr-app] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
  border-radius: var(--dr3-radius-sm) !important;
  border-color: color-mix(in srgb, var(--dr2-line) 90%, var(--dr2-muted)) !important;
  box-shadow: inset 0 1px 2px rgb(20 45 60 / .035), 0 1px 0 var(--dr3-highlight);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body[data-dr-app] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea):hover {
  border-color: color-mix(in srgb, var(--dr2-primary) 38%, var(--dr2-line)) !important;
}
body[data-dr-app] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea):focus {
  border-color: var(--dr2-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dr2-primary) 14%, transparent) !important;
}
body[data-dr-app] :is(.btn, .button, button):not(.sidebar-close):not([data-dr-rail-label]) {
  border-radius: var(--dr3-radius-sm);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
body[data-dr-app] :is(.btn.primary, .btn-primary, button.primary, button.save, .button.primary, .cta, button[type="submit"]) {
  background: linear-gradient(120deg, #116987, #167878 62%, #276e61) !important;
  box-shadow: 0 8px 20px rgb(18 107 133 / .18), inset 0 1px rgb(255 255 255 / .20);
}
body[data-dr-app] :is(.btn.primary, .btn-primary, button.primary, button.save, .button.primary, .cta, button[type="submit"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgb(18 107 133 / .23), inset 0 1px rgb(255 255 255 / .24);
}
body[data-dr-app] :is(button, .btn, .button):active { transform: translateY(0); }
body[data-dr-app] :is(button, .btn, .button):disabled { box-shadow: none !important; transform: none !important; }
body[data-dr-app] :is(form[action*="delete"], form[action*="eliminar"], form[action*="remove"]) button[type="submit"],
body[data-dr-app] :is(.btn-danger, .button-danger, button.danger, [data-variant="destructive"]) {
  background: linear-gradient(120deg, #a83b3f, #c95345) !important;
  border-color: #a83b3f !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgb(168 59 63 / .18) !important;
}
body[data-dr-app] :is(form[action*="delete"], form[action*="eliminar"], form[action*="remove"]) button[type="submit"]:hover,
body[data-dr-app] :is(.btn-danger, .button-danger, button.danger, [data-variant="destructive"]):hover {
  background: linear-gradient(120deg, #922f35, #b8443d) !important;
  box-shadow: 0 10px 22px rgb(168 59 63 / .24) !important;
}

/* Dense data remains compact while gaining scanability. */
body[data-dr-app] :is(.table-wrap, .table-responsive) {
  border: 1px solid var(--dr2-line);
  border-radius: var(--dr3-radius-md);
  background: var(--dr2-surface);
  box-shadow: var(--dr3-shadow-sm);
}
body[data-dr-app] table {
  border-collapse: separate;
  border-spacing: 0;
}
body[data-dr-app] table thead th {
  background: color-mix(in srgb, var(--dr2-blue-soft) 70%, var(--dr2-surface)) !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
}
body[data-dr-app] table tbody tr { transition: background-color .12s ease; }
body[data-dr-app] table tbody tr:hover {
  background: color-mix(in srgb, var(--dr2-teal-soft) 64%, var(--dr2-surface)) !important;
}

body[data-dr-app] :is(.badge, .chip, .pill, .tag, [data-slot="badge"]) {
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
}
body[data-dr-app] :is(.modal-content, .dialog-content, [role="dialog"]) {
  border-radius: var(--dr3-radius-lg) !important;
  box-shadow: var(--dr3-shadow-float) !important;
}
body[data-dr-app] ::selection { background: color-mix(in srgb, var(--dr2-teal) 28%, transparent); }
body[data-dr-app] * { scrollbar-color: color-mix(in srgb, var(--dr2-muted) 45%, transparent) transparent; }

@media (max-width: 980px) {
  body[data-dr-app] [data-dr-nav] { backdrop-filter: saturate(120%) blur(14px); }
  body[data-dr-app] [data-dr-nav] :is(a, button, summary):hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-dr-app] *, body[data-dr-app] *::before, body[data-dr-app] *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Per-application refinements found during the live visual audit. */
body[data-dr-app] :is(.alert, .error, .err, .notice, .flash, .result):empty {
  display: none !important;
}
body[data-dr-app="bi"] header.top,
body[data-dr-app="codificacion"] header.top,
body[data-dr-app="scraping-vehiculos"] header.top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-inline: 18px !important;
}
body[data-dr-app="bi"] header.top > a[href*="logout"],
body[data-dr-app="codificacion"] header.top > a[href*="logout"],
body[data-dr-app="scraping-vehiculos"] header.top > a[href*="logout"] {
  margin-left: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--dr2-primary) 24%, var(--dr2-line)) !important;
  border-radius: var(--dr3-radius-sm) !important;
  background: color-mix(in srgb, var(--dr2-teal-soft) 60%, var(--dr2-surface)) !important;
  color: var(--dr2-primary) !important;
  box-shadow: none !important;
}
body[data-dr-app="bi"] header.top > a[href*="logout"]:hover,
body[data-dr-app="codificacion"] header.top > a[href*="logout"]:hover,
body[data-dr-app="scraping-vehiculos"] header.top > a[href*="logout"]:hover {
  background: var(--dr2-primary) !important;
  color: var(--dr2-on-accent) !important;
}
body[data-dr-app="bi"] [data-dr-nav] img,
body[data-dr-app="scraping-vehiculos"] [data-dr-nav] img,
body[data-dr-app="categorizar-vehiculos"] [data-dr-nav] .side-logo {
  width: auto !important;
  min-width: 54px;
  height: 44px !important;
  object-fit: contain !important;
  object-position: center !important;
}
body[data-dr-app="categorizar-vehiculos"] .side-user {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}
body[data-dr-app="categorizar-vehiculos"] .side-user > div:nth-child(2) {
  min-width: 0;
  overflow: hidden;
}
body[data-dr-app="categorizar-vehiculos"] .side-user :is(b, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-dr-app="categorizar-vehiculos"] .side-user > a {
  min-width: max-content;
  white-space: nowrap !important;
}
body[data-dr-app="quala"] .dr-reference-layout,
body[data-dr-app="scraping-vehiculos"] .dr-reference-layout,
body[data-dr-app="categorizar-vehiculos"] .dr-reference-layout {
  gap: 16px;
}
@media (min-width: 981px) {
  body[data-dr-app="scraping-vehiculos"] .dr-reference-panel,
  body[data-dr-app="categorizar-vehiculos"] .dr-reference-panel {
    margin-bottom: 14px !important;
  }
}