/**
 * CorpMVL — branding runtime (login, Classic, Vue shell bridge).
 * D4-5: palettes/fonts + dashboard/credit vía @import; soft-nav = .corp-nav-item--active;
 * soft table selected beats solid bg-blue-800!; dark legacy vars → corp-palettes.css.
 * Load AFTER Vite CSS (desktop.html.erb / mobile.html.erb).
 */
@import url('corp-palettes.css');
@import url('corp-fonts.css');
@import url('corp-dashboard.css');
@import url('corp-credit-reports.css');

:root {
  /* Tipografía Corp (D0-6…D0-8) — Plus Jakarta Sans + escala 12/14/16/20/28 */
  --corpmvl-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --default-font-family: var(--corpmvl-font-sans);

  --corpmvl-text-xs: 0.75rem; /* 12 */
  --corpmvl-text-sm: 0.875rem; /* 14 */
  --corpmvl-text-md: 1rem; /* 16 */
  --corpmvl-text-lg: 1.25rem; /* 20 */
  --corpmvl-text-xl: 1.75rem; /* 28 */

  --corpmvl-leading-xs: 1rem;
  --corpmvl-leading-sm: 1.25rem;
  --corpmvl-leading-md: 1.5rem;
  --corpmvl-leading-lg: 1.75rem;
  --corpmvl-leading-xl: 2.25rem;

  /* Marca — OpenProject Matamoros */
  --corpmvl-red: #e32027;
  --corpmvl-red-soft: #d41c22;
  --corpmvl-red-deep: #b8171d;
  --corpmvl-red-muted: #9a1218;
  --corpmvl-red-banner-top: #e32027;
  --corpmvl-red-banner-bottom: #b8171d;

  /* Acciones primarias (primary-button-color) */
  --corpmvl-accent: #b8171d;
  --corpmvl-accent-light: #e32027;
  --corpmvl-accent-deep: #9a1218;
  --corpmvl-accent-soft: #f5e8e8;
  --corpmvl-accent-muted: #ecc8c9;

  /* Superficies — shell.css Matamoros */
  --corpmvl-surface: #f5f0f0;
  --corpmvl-surface-elevated: #ffffff;
  --corpmvl-text: #3d3d3d;
  --corpmvl-muted: #5c5c5c;
  --corpmvl-border: #e8e0e0;
  --corpmvl-border-strong: #d4d1d1;
  --corpmvl-bg-dark: #141414;
  --corpmvl-bg-panel: #242424;
  --corpmvl-bg-elevated: #2e2d31;
  --corpmvl-bg-sidebar: #141414;
  --corpmvl-red-tint: #f5e8e8;
  --corpmvl-red-tint-hover: #ecc8c9;
  --corpmvl-shadow-sm: 0 1px 3px rgba(58, 56, 56, 0.06);
  --corpmvl-shadow-md: 0 4px 14px rgba(58, 56, 56, 0.08);

  /* Semánticos UI (D0-3 / D0-10 / D4-2) */
  --corpmvl-warning: #c2410c;
  --corpmvl-success: #15803d;
  --corpmvl-danger: #b8171d;

  --corpmvl-loading-logo: clamp(88px, 14vw, 120px);
  --corpmvl-loading-logo-h: clamp(75px, 12vw, 103px);
  --corpmvl-login-banner-h: 4.75rem;

  /* UI legacy */
  --button-primary-background: var(--corpmvl-red-deep);
  --button-primary-background-active: var(--corpmvl-red-muted);
  --text-button-primary: var(--corpmvl-red-deep);
  --text-button-primary-active: var(--corpmvl-red-muted);
  --menu-background-active: var(--corpmvl-red);
}

/* ─── Base ─── */
body {
  accent-color: var(--corpmvl-red);
}

meta[name="theme-color"] {
  content: var(--corpmvl-red-deep);
}

/* ─── Login / registro ─── */
.corp-login-brand-banner,
.login .corp-login-brand-banner--legacy {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: linear-gradient(
    180deg,
    var(--corpmvl-red-banner-top) 0%,
    var(--corpmvl-red) 55%,
    var(--corpmvl-red-banner-bottom) 100%
  ) !important;
  overflow: visible !important;
}

.corp-login-brand-banner {
  width: calc(100% + 2.5rem) !important;
  margin: -1.25rem -1.25rem 1rem;
  padding: 1rem 1.35rem 0.95rem;
  border-radius: 1.25rem 1.25rem 0 0;
  box-sizing: border-box;
}

/* D4-3: panel login — elevación / presencia */
.corp-login-panel {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.32) !important;
}

.login .corp-login-brand-banner--legacy {
  width: calc(100% + 50px) !important;
  margin: 0 -25px 1rem !important;
  padding: 1rem 1.35rem 0.95rem;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
}

.corp-product-logo,
.corp-login-brand-banner img,
.login .company-logo,
.login .corp-login-brand-banner--legacy .company-logo {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: var(--corpmvl-login-banner-h) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.login .hero-unit {
  width: min(520px, 92vw) !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

.flex.min-h-screen.flex-col.items-center.bg-neutral-950 {
  background: linear-gradient(
    160deg,
    #3a3838 0%,
    var(--corpmvl-bg-panel) 45%,
    var(--corpmvl-bg-dark) 100%
  ) !important;
}

/* Fallback: ocultar solo el link Zammad residual (no el “Powered by”) */
footer:not(.corp-powered-by) a[href="https://zammad.org"],
.login a[href="https://zammad.org"],
.signup a[href="https://zammad.org"] {
  display: none !important;
}

footer:not(.corp-powered-by) {
  color: #d8d2cb !important;
}

/* ─── Loading / splash ─── */
.splash {
  flex-direction: column;
  gap: 1rem;
}

.splash .icon-logo,
.splash .icon.icon-logo {
  width: var(--corpmvl-loading-logo) !important;
  height: var(--corpmvl-loading-logo-h) !important;
  margin: 0 !important;
}

.splash-title {
  font-size: clamp(1.25rem, 2.8vw, 1.5rem) !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--corpmvl-text);
  letter-spacing: 0.01em;
}

#loading-app .loading-animation {
  width: var(--corpmvl-loading-logo) !important;
  height: var(--corpmvl-loading-logo-h) !important;
  max-width: none;
  max-height: none;
}

#loading-app .loading-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* ─── Wizard legacy ─── */
.wizard-logo.icon-full-logo {
  width: min(320px, 90vw) !important;
  height: auto !important;
  max-height: 56px;
}

.wizard .btn--primary,
.wizard .btn.btn--primary {
  background: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-red-deep) !important;
}

.wizard .btn--primary:hover,
.wizard .btn--primary:focus {
  background: var(--corpmvl-red-muted) !important;
}

.wizard .u-highlight a,
.wizard-aside .u-highlight {
  color: var(--corpmvl-red) !important;
}

/* ─── Knowledge base pública (/help) — Matamoros ─── */
html:has(.wrapper.js-wrapper),
html:has(.wrapper.js-wrapper) body {
  background: #f5f0f0 !important;
  color: #3d3d3d !important;
}

.wrapper.js-wrapper {
  background: #f5f0f0;
  min-height: 100vh;
}

.wrapper .header {
  background: linear-gradient(
    180deg,
    var(--corpmvl-red) 0%,
    var(--corpmvl-red-deep) 100%
  ) !important;
  border-bottom: none !important;
  padding: 0.75rem 0 1.25rem !important;
  box-shadow: 0 2px 12px rgba(58, 56, 56, 0.12);
}

.wrapper .header .logo img {
  max-height: 3.5rem !important;
  width: auto !important;
  height: auto !important;
}

.wrapper .header .menu-item {
  color: #fff !important;
  font-weight: 500;
}

.wrapper .search-field input[type='search'] {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 10px rgba(58, 56, 56, 0.1);
  font-size: 1rem !important;
}

.wrapper .search-field input[type='search']:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.wrapper .search-field .icon {
  fill: var(--corpmvl-red-deep) !important;
}

/* Barra preview (Published / Edit) — verde Zammad → Matamoros */
.wrapper .topbar,
.wrapper .topbar[data-color='green'],
.wrapper .topbar[data-color='blue'],
.wrapper .topbar[data-color='yellow'],
.wrapper .topbar[data-color='red'],
.wrapper .topbar[data-color='grey'] {
  background: var(--corpmvl-red-muted) !important;
  color: #fff !important;
}

.wrapper .topbar-btn {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
}

.wrapper .topbar-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Tarjetas de categorías */
.wrapper .sections--grid .section-inner {
  border: 1px solid var(--corpmvl-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--corpmvl-shadow-sm) !important;
  color: #3d3d3d !important;
  background: #fff !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.wrapper .sections--grid .section > a:hover .section-inner {
  border-color: var(--corpmvl-red-muted) !important;
  box-shadow: var(--corpmvl-shadow-md) !important;
}

.wrapper .sections--grid .section-inner .title,
.wrapper .sections--list .section-inner .title,
.wrapper .sections--compact-text .section-title {
  color: #3d3d3d !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em;
}

.wrapper .section-inner .icon,
.wrapper .section-inner [data-font] {
  color: var(--corpmvl-red-deep) !important;
  fill: var(--corpmvl-red-deep) !important;
}

.wrapper .not-published-note {
  color: var(--corpmvl-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 400;
}

.wrapper .main--categories h1 {
  color: #3d3d3d !important;
  font-weight: 600;
}

.wrapper .breadcrumbs {
  background: #fff;
  border-bottom: 1px solid var(--corpmvl-border) !important;
  font-size: 0.875rem;
}

.wrapper .breadcrumb a {
  color: var(--corpmvl-red-deep) !important;
}

.wrapper .footer {
  background: #fff !important;
  border-top: 1px solid var(--corpmvl-border);
  color: var(--corpmvl-text) !important;
}

.wrapper .footer a,
.wrapper .footer .menu-item {
  color: var(--corpmvl-red-deep) !important;
}

.wrapper .btn--action {
  color: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-border) !important;
  background: #fff !important;
}

.wrapper .btn--action:hover {
  background: var(--corpmvl-red-tint) !important;
  border-color: var(--corpmvl-red-muted) !important;
}

.wrapper .sections--list .section-inner,
.wrapper .sections--compact-text .section-inner {
  border-radius: 8px;
  border: 1px solid var(--corpmvl-border);
  color: #3d3d3d !important;
}

.wrapper .sections--list .section > a:hover .section-inner,
.wrapper .sections--compact-text .section > a:hover .section-inner {
  background: var(--corpmvl-red-tint) !important;
}

.wrapper .result-title {
  color: #3d3d3d !important;
  font-weight: 600;
}

.wrapper .result a:hover {
  background: var(--corpmvl-red-tint) !important;
  border-color: var(--corpmvl-border) !important;
}

.wrapper .article-content a {
  color: var(--corpmvl-red-deep) !important;
}

.wrapper .tag {
  background: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

/* Admin KB legacy (agent UI) */
.knowledge-base .header,
.knowledge-base-header {
  background-color: var(--corpmvl-red-deep) !important;
}

.knowledge-base a,
.knowledge-base .header a {
  color: var(--corpmvl-red-deep);
}

.email-header,
.mailer-logo {
  border-bottom: 3px solid var(--corpmvl-red);
}

/* ═══════════════════════════════════════════════════════════
   Vue desktop / móvil — overrides runtime (sin rebuild imagen)
   Solo fondos oscuros en data-theme=dark (modo claro respeta tokens)
   ═══════════════════════════════════════════════════════════ */

/* Fondos oscuros — solo tema dark */
html[data-theme='dark'] .dark\:bg-gray-900,
html[data-theme='dark'] .bg-gray-900 {
  background-color: var(--corpmvl-bg-dark) !important;
}

html[data-theme='dark'] .dark\:bg-gray-800,
html[data-theme='dark'] .bg-gray-800 {
  background-color: var(--corpmvl-bg-sidebar) !important;
}

html[data-theme='dark'] .dark\:bg-gray-700,
html[data-theme='dark'] .bg-gray-700 {
  background-color: var(--corpmvl-bg-elevated) !important;
}

html[data-theme='dark'] .dark\:bg-gray-600,
html[data-theme='dark'] .bg-gray-600 {
  background-color: var(--corpmvl-bg-panel) !important;
}

html[data-theme='dark'] .dark\:bg-neutral-950,
html[data-theme='dark'] .bg-neutral-950 {
  background-color: var(--corpmvl-bg-dark) !important;
}

/*
 * Primario Matamoros — la escala blue/green ya se remapea en tokens.css (@theme).
 * NO aplicar .hover\:bg-* / .active\:bg-* / .dark\:bg-* sin :hover/:active/[data-theme]:
 * esas clases viven siempre en el DOM y pintarían rojo sólido en filas, nav y dropdowns
 * (contraste ilegible). Solo reforzar estados reales + botones.
 */

/* Activo real — sólido fuera de CommonTable (D4-4 soft selected: tr[data-test-id=table-row]) */
.bg-blue-800\!:not(tr):not([data-test-id='table-row']),
[class~='bg-blue-800!']:not(tr):not([data-test-id='table-row']),
tr.bg-blue-800\!:not([data-test-id='table-row']),
tr[class~='bg-blue-800!']:not([data-test-id='table-row']) {
  background-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

tr.bg-blue-800\!:not([data-test-id='table-row']) td,
tr[class~='bg-blue-800!']:not([data-test-id='table-row']) td,
tr.bg-blue-800\!:not([data-test-id='table-row']) a,
tr[class~='bg-blue-800!']:not([data-test-id='table-row']) a {
  color: #fff !important;
}

/* Hover / focus-visible reales (pseudo-clase) */
.hover\:bg-blue-600:hover,
.group-hover\/tab\:bg-blue-600:hover {
  background-color: var(--corpmvl-red-tint-hover) !important;
  color: var(--corpmvl-text) !important;
}

html[data-theme='dark'] .hover\:bg-blue-600:hover,
html[data-theme='dark'] .dark\:hover\:bg-blue-900:hover,
html[data-theme='dark'] .hover\:bg-blue-900:hover {
  background-color: color-mix(in srgb, var(--corpmvl-red) 22%, var(--corpmvl-bg-panel)) !important;
  color: #ece8e4 !important;
}

.active\:bg-blue-800:active,
.focus-visible\:bg-blue-800:focus-visible {
  background-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

/* Botones primarios / FAB (acento marca) */
button.bg-green-500,
a.bg-green-500,
button.bg-blue-800,
a.bg-blue-800 {
  background-color: var(--corpmvl-accent) !important;
  color: #fff !important;
  border-radius: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--corpmvl-shadow-sm);
}

button.bg-green-500:hover,
a.bg-green-500:hover,
button.bg-blue-800:hover,
a.bg-blue-800:hover {
  background-color: var(--corpmvl-red-muted) !important;
  color: #fff !important;
  box-shadow: var(--corpmvl-shadow-md);
}

button.bg-green-500.text-white,
.bg-green-500.text-white {
  background-color: var(--corpmvl-accent) !important;
  color: #fff !important;
}

/* Autocomplete / dropdown: fondo claro + texto oscuro (nunca rojo+gris) */
[role='listbox'],
[role='listbox'] [role='option'],
.common-select-menu,
.common-select-menu [role='option'],
div[id^='headlessui-listbox-options'],
div[id^='headlessui-combobox-options'] {
  background-color: var(--corpmvl-surface-elevated) !important;
  color: var(--corpmvl-text) !important;
}

[role='option']:hover,
[role='option'][data-headlessui-state~='active'],
[role='option'][aria-selected='true'] {
  background-color: var(--corpmvl-red-tint) !important;
  color: var(--corpmvl-text) !important;
}

html[data-theme='dark'] [role='listbox'],
html[data-theme='dark'] [role='listbox'] [role='option'],
html[data-theme='dark'] div[id^='headlessui-listbox-options'],
html[data-theme='dark'] div[id^='headlessui-combobox-options'] {
  background-color: var(--corpmvl-bg-elevated) !important;
  color: #ece8e4 !important;
}

html[data-theme='dark'] [role='option']:hover,
html[data-theme='dark'] [role='option'][data-headlessui-state~='active'] {
  background-color: color-mix(in srgb, var(--corpmvl-red) 28%, var(--corpmvl-bg-elevated)) !important;
  color: #fff !important;
}

/* Labels de formulario: contraste WCAG + micro-type FormKit */
html[data-theme='light'] .formkit-label,
html[data-theme='light'] label.formkit-label,
html[data-theme='light'] .formkit-label-container label {
  color: #3d3d3d !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  opacity: 1 !important;
}

/* Logo Matamoros (runtime swap + vite) */
.corp-matamoros-logo,
.corp-matamoros-logo-wrap svg {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

/*
 * CommonIcon name="logo" usa <use href="#icon-logo"> (sprite Vite).
 * El SVG exterior no trae paths del pájaro → el swap JS falla.
 * Forzar M Matamoros por CSS en header desktop / notificaciones.
 */
svg.corp-matamoros-logo,
svg.icon.corp-matamoros-logo,
#app-online-notification svg.icon,
header svg.icon:has(use[href='#icon-logo']),
header svg.icon:has(use[href*='icon-logo']) {
  background: url('/assets/corp-logo-mark.svg') center / contain no-repeat !important;
  color: transparent !important;
  fill: transparent !important;
}
svg.corp-matamoros-logo use,
svg.icon.corp-matamoros-logo use,
#app-online-notification svg.icon use,
header svg.icon:has(use[href='#icon-logo']) use,
header svg.icon:has(use[href*='icon-logo']) use {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Splash / loading — M Matamoros (spinner-loading.html.erb ya es Corp; refuerzo CSS) */
#loading-app .loading-animation {
  background: none !important;
}
.splash .icon-logo {
  background: url('/assets/corp-logo-mark.svg') center / contain no-repeat !important;
  color: transparent !important;
}
.splash .icon-logo use {
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   CorpMVL · contraste global, badges, sin mostaza, tipografía
   ═══════════════════════════════════════════════════════════ */

html,
body,
#app {
  font-family: var(--corpmvl-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--corpmvl-text);
}

html[data-theme='light'] body,
html[data-theme='light'] #app {
  background-color: #faf7f7 !important;
  color: #3d3d3d !important;
}

/* Badges de conteo / overviews: rojo marca + blanco (NUNCA rojo sobre rojo) */
.common-badge-info,
[data-test-id='common-badge'].bg-blue-500,
[data-test-id='common-badge'].text-blue-800,
.bg-blue-500.text-blue-800,
.dark\:bg-blue-950.text-blue-800,
.bg-blue-500.dark\:bg-blue-950,
nav [data-test-id='common-badge'],
aside [data-test-id='common-badge'] {
  background-color: var(--corpmvl-red-deep) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  min-width: 1.5rem;
  line-height: 1.2 !important;
  box-shadow: none !important;
  border: 0 !important;
}

html[data-theme='dark'] .common-badge-info,
html[data-theme='dark'] [data-test-id='common-badge'].bg-blue-500,
html[data-theme='dark'] nav [data-test-id='common-badge'],
html[data-theme='dark'] aside [data-test-id='common-badge'] {
  background-color: var(--corpmvl-red) !important;
  color: #ffffff !important;
}

/* CTA submit: mostaza (#ffce33) → rojo Matamoros */
button.bg-yellow-300,
a.bg-yellow-300,
.bg-yellow-300,
button[class*='bg-yellow-300'],
a[class*='bg-yellow-300'] {
  background-color: var(--corpmvl-red-deep) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-color: var(--corpmvl-red-deep) !important;
}

button.bg-yellow-300:hover,
a.bg-yellow-300:hover,
.bg-yellow-300:hover {
  background-color: var(--corpmvl-red-muted) !important;
  color: #ffffff !important;
}

/* Pestaña ticket activa (Open usaba yellow-500 mostaza) */
.\!bg-yellow-500,
[class~='!bg-yellow-500'],
[class*='bg-yellow-500'] {
  background-color: var(--corpmvl-red) !important;
  color: #ffffff !important;
}

[class*='bg-yellow-500'] .text-white\!,
[class*='bg-yellow-500'] span,
[class*='bg-yellow-500'] label {
  color: #ffffff !important;
}

/* Estados ticket en tabs — mostaza reemplazada arriba; closed sigue verde suave vía tokens green */
/* Artículo / paneles: menos rosa chillón, más superficie Matamoros */
html[data-theme='light'] .bg-blue-200,
html[data-theme='light'] [class*='bg-blue-200'] {
  background-color: #f5f0f0 !important;
}

/* Ola 3: quick search focus — soft Matamoros ring */
html[data-theme='light'] #primary-sidebar [class*='focus-within\\:outline']:focus-within,
html[data-theme='light'] #primary-sidebar .outline-blue-800:focus-within {
  outline-color: color-mix(in srgb, var(--corpmvl-red, #e32027) 55%, transparent) !important;
}

html[data-theme='light'] #primary-sidebar input[type='search'],
html[data-theme='light'] #primary-sidebar input[role='searchbox'] {
  color: var(--corpmvl-text, #3d3d3d) !important;
}

/* D4-4: quick search surface */
html[data-theme='light'] #primary-sidebar .corp-quick-search {
  background-color: #fff !important;
  border: 1px solid var(--corpmvl-border, #e8e0e0);
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] #primary-sidebar .corp-quick-search svg {
  fill: var(--corpmvl-muted, #5c5c5c) !important;
}

/* Tipografía cuerpo / tablas */
html[data-theme='light'] main,
html[data-theme='light'] [role='main'],
html[data-theme='light'] .text-gray-100,
html[data-theme='light'] .text-stone-200,
html[data-theme='light'] .text-neutral-400 {
  color: #3d3d3d !important;
}

html[data-theme='light'] .text-gray-300 {
  color: #5c5c5c !important;
}

/* BETA strip: texto claro */
[class*='BETA'],
button:has(+ *),
.beta-ui-switch,
aside [class*='beta'] {
  font-weight: 600;
}

/* Rayado de tablas: tint suave Matamoros, no rojo saturado */
html[data-theme='light'] tr.odd\:bg-blue-200:nth-child(odd),
html[data-theme='light'] .odd\:bg-blue-200:nth-child(odd) {
  background-color: var(--corpmvl-surface, #f5f0f0) !important;
}

html[data-theme='light'] tr.hover\:bg-blue-600:hover,
html[data-theme='light'] .hover\:bg-blue-600:hover {
  background-color: var(--corpmvl-red-tint, #f5e8e8) !important;
  color: var(--corpmvl-text, #3d3d3d) !important;
}

html[data-theme='light'] tr.hover\:bg-blue-600:hover td,
html[data-theme='light'] tr.hover\:bg-blue-600:hover a {
  color: var(--corpmvl-text, #3d3d3d) !important;
}

/*
 * CommonTable / ticket overview: never paint body rows solid brand red on hover.
 * Upstream uses hover:bg-blue-600 + text-blue-800 → red-on-red after Corp tokens.
 */
html[data-theme='light'] tr[data-test-id='table-row'],
html[data-theme='light'] tr[data-test-id='table-row'] td {
  color: var(--corpmvl-text, #3d3d3d);
}

html[data-theme='light'] tr[data-test-id='table-row']:hover,
html[data-theme='light'] tr[data-test-id='table-row']:focus-visible,
html[data-theme='light'] tr[data-test-id='table-row']:active {
  background-color: var(--corpmvl-red-tint-hover, #ecc8c9) !important;
  color: var(--corpmvl-text, #3d3d3d) !important;
}

html[data-theme='light'] tr[data-test-id='table-row']:hover td,
html[data-theme='light'] tr[data-test-id='table-row']:hover a,
html[data-theme='light'] tr[data-test-id='table-row']:hover .text-blue-800,
html[data-theme='light'] tr[data-test-id='table-row']:hover .text-blue-550,
html[data-theme='light'] tr[data-test-id='table-row']:hover [class*='text-blue-'],
html[data-theme='light'] tr[data-test-id='table-row']:focus-visible td,
html[data-theme='light'] tr[data-test-id='table-row']:focus-visible a,
html[data-theme='light'] tr[data-test-id='table-row']:active td,
html[data-theme='light'] tr[data-test-id='table-row']:active a {
  color: var(--corpmvl-text, #3d3d3d) !important;
}

/* Selected row (bulk / keyboard): soft Matamoros tint + inset (D4-4) */
html[data-theme='light'] tr[data-test-id='table-row'][class~='bg-blue-800!'],
html[data-theme='light'] tr[data-test-id='table-row'].bg-blue-800\! {
  background-color: color-mix(in srgb, var(--corpmvl-red) 14%, transparent) !important;
  color: var(--corpmvl-text, #3d3d3d) !important;
  box-shadow: inset 3px 0 0 var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] tr[data-test-id='table-row'][class~='bg-blue-800!'] td,
html[data-theme='light'] tr[data-test-id='table-row'][class~='bg-blue-800!'] a,
html[data-theme='light'] tr[data-test-id='table-row'][class~='bg-blue-800!'] span,
html[data-theme='light'] tr[data-test-id='table-row'][class~='bg-blue-800!'] [class*='text-blue-'],
html[data-theme='light'] tr[data-test-id='table-row'].bg-blue-800\! td,
html[data-theme='light'] tr[data-test-id='table-row'].bg-blue-800\! a,
html[data-theme='light'] tr[data-test-id='table-row'].bg-blue-800\! span {
  color: var(--corpmvl-text, #3d3d3d) !important;
}

html[data-theme='dark'] tr[data-test-id='table-row'][class~='bg-blue-800!'],
html[data-theme='dark'] tr[data-test-id='table-row'].bg-blue-800\! {
  background-color: color-mix(in srgb, var(--corpmvl-red) 18%, transparent) !important;
  color: #ece8e4 !important;
  box-shadow: inset 3px 0 0 var(--corpmvl-red-soft) !important;
}

html[data-theme='dark'] tr[data-test-id='table-row'][class~='bg-blue-800!'] td,
html[data-theme='dark'] tr[data-test-id='table-row'][class~='bg-blue-800!'] a,
html[data-theme='dark'] tr[data-test-id='table-row'][class~='bg-blue-800!'] span,
html[data-theme='dark'] tr[data-test-id='table-row'].bg-blue-800\! td,
html[data-theme='dark'] tr[data-test-id='table-row'].bg-blue-800\! a {
  color: #ece8e4 !important;
}

/* Título de ticket en listado: acento marca, no chillón */
html[data-theme='light'] tr[data-test-id='table-row'] a {
  color: var(--corpmvl-red-deep);
  text-decoration: none;
}

html[data-theme='light'] tr[data-test-id='table-row']:hover a {
  color: var(--corpmvl-red-deep) !important;
  text-decoration: underline;
}

/* Selected row: keep ticket title accent readable on soft tint */
html[data-theme='light'] tr[data-test-id='table-row'][class~='bg-blue-800!'] a,
html[data-theme='light'] tr[data-test-id='table-row'].bg-blue-800\! a {
  color: var(--corpmvl-red-deep) !important;
  font-weight: 600;
}

/* Toolbar editor: iconos visibles sobre acento */
.bg-blue-800\! svg,
[class~='bg-blue-800!'] svg,
button.bg-blue-800 svg {
  color: #fff !important;
  fill: currentColor;
}

.fill-green-500,
.fill-blue-800,
.fill-blue-550 {
  fill: var(--corpmvl-accent) !important;
}

.text-blue-550,
.text-blue-800 {
  color: var(--corpmvl-red-deep) !important;
}

.alert-success {
  background-color: var(--corpmvl-accent-soft) !important;
  color: var(--corpmvl-accent-deep) !important;
}

/* ─── Sidebar: tema explícito vía data-sidebar-theme (LayoutSidebar.vue) ─── */
#primary-sidebar[data-sidebar-theme='light'],
aside[data-sidebar-theme='light'] {
  background-color: var(--corpmvl-surface) !important;
  box-shadow: inset -1px 0 0 var(--corpmvl-border);
  color: var(--corpmvl-text);
}

#primary-sidebar[data-sidebar-theme='dark'],
aside[data-sidebar-theme='dark'] {
  background-color: var(--corpmvl-bg-sidebar) !important;
  box-shadow: none;
}

html:not([data-theme='dark']) #primary-sidebar[data-sidebar-theme='light'],
html[data-theme='light'] #primary-sidebar {
  background-color: var(--corpmvl-surface) !important;
  box-shadow: inset -1px 0 0 var(--corpmvl-border);
}

html[data-theme='light'] #primary-sidebar .text-neutral-400,
html[data-theme='light'] #primary-sidebar .text-gray-300 {
  color: var(--corpmvl-muted) !important;
}

/*
 * PageNavigation / sidebar (Ola 2 · D4-5): soft active via .corp-nav-item--active only.
 * corp-brand.css must load AFTER Vite CSS (see desktop.html.erb).
 */
#primary-sidebar a.corp-nav-item--active,
#primary-sidebar a.corp-nav-item--active:hover {
  background: color-mix(in srgb, var(--corpmvl-red, #e32027) 14%, transparent) !important;
  color: var(--corpmvl-text, #3d3d3d) !important;
  box-shadow: inset 3px 0 0 var(--corpmvl-red-deep, #b8171d) !important;
}

#primary-sidebar a.corp-nav-item--active *,
#primary-sidebar a.corp-nav-item--active:hover * {
  color: var(--corpmvl-text, #3d3d3d) !important;
  fill: currentColor !important;
}

html[data-theme='dark'] #primary-sidebar a.corp-nav-item--active,
html[data-theme='dark'] #primary-sidebar a.corp-nav-item--active:hover {
  background: color-mix(in srgb, var(--corpmvl-red, #e32027) 18%, transparent) !important;
  color: #ece8e4 !important;
  box-shadow: inset 3px 0 0 var(--corpmvl-red-soft, #d41c22) !important;
}

html[data-theme='dark'] #primary-sidebar a.corp-nav-item--active *,
html[data-theme='dark'] #primary-sidebar a.corp-nav-item--active:hover * {
  color: #ece8e4 !important;
  fill: currentColor !important;
}

/* Overview / nav hover inside sidebar: tint, not solid red */
html[data-theme='light'] #primary-sidebar a.corp-nav-item:hover:not(.corp-nav-item--active) {
  background-color: var(--corpmvl-red-tint, #f5e8e8) !important;
  color: var(--corpmvl-text, #3d3d3d) !important;
  box-shadow: none !important;
}

html[data-theme='light'] #primary-sidebar a.corp-nav-item:hover:not(.corp-nav-item--active) * {
  color: var(--corpmvl-text, #3d3d3d) !important;
  fill: currentColor !important;
}

html[data-theme='light'] #primary-sidebar .hover\:bg-blue-900:hover,
html[data-theme='light'] #primary-sidebar .group-hover\/tab\:bg-blue-600 {
  background-color: var(--corpmvl-red-tint-hover) !important;
}

html[data-theme='light'] #primary-sidebar .group-hover\/tab\:dark\:text-white {
  color: var(--corpmvl-red-deep) !important;
}

/*
 * User avatar initials: soft Matamoros discs + dark text (not neon pink / white-on-hot).
 */
html[data-theme='light'] [data-test-id='common-avatar'] {
  color: #3d3d3d !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border-color: #e8e0e0 !important;
}

html[data-theme='light'] [data-test-id='common-avatar'].bg-blue-800,
html[data-theme='light'] [data-test-id='common-avatar'].bg-blue-700,
html[data-theme='light'] [data-test-id='common-avatar'].bg-blue-900,
html[data-theme='light'] [data-test-id='common-avatar'].bg-green-500,
html[data-theme='light'] [data-test-id='common-avatar'].bg-pink-500,
html[data-theme='light'] [data-test-id='common-avatar'].bg-red-600,
html[data-theme='light'] [data-test-id='common-avatar'].bg-neutral-500 {
  /* Fallback if an old dark swatch still renders: keep initials light. */
  color: #fff !important;
}

/* Footer action cluster (gear + new ticket): light surface, not charcoal pill. */
html[data-theme='light'] #primary-sidebar [role='list'].rounded-xl.bg-gray-700,
html[data-theme='light'] #primary-sidebar [role='list'].bg-gray-700 {
  background-color: #fff !important;
  border: 1px solid var(--corpmvl-border, #e8e0e0) !important;
  box-shadow: var(--corpmvl-shadow-sm) !important;
  padding: 0.35rem !important;
}

html[data-theme='light'] #primary-sidebar [role='list'].rounded-xl.bg-gray-700 .text-stone-200,
html[data-theme='light'] #primary-sidebar [role='list'].bg-gray-700 .text-stone-200,
html[data-theme='light'] #primary-sidebar [role='list'].rounded-xl .text-stone-200 {
  color: var(--corpmvl-muted, #5c5c5c) !important;
}

html[data-theme='light'] #primary-sidebar [role='list'] .text-blue-800,
html[data-theme='light'] #primary-sidebar [role='list'] .text-blue-800\! {
  color: var(--corpmvl-red-deep, #b8171d) !important;
}

html[data-theme='light'] #primary-sidebar [role='list'] a:hover,
html[data-theme='light'] #primary-sidebar [role='list'] button:hover {
  background-color: var(--corpmvl-red-tint, #f5e8e8) !important;
  border-radius: 0.5rem;
}

/* ─── Formularios y paneles (modo claro) ─── */
html[data-theme='light'] .corp-content-panel {
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .formkit-outer,
html[data-theme='light'] [data-type='text'],
html[data-theme='light'] [data-type='textarea'],
html[data-theme='light'] [data-type='select'] {
  --fk-border-color: var(--corpmvl-border);
}

html[data-theme='light'] .formkit-input:not([type='checkbox']):not([type='radio']),
html[data-theme='light'] input.formkit-input,
html[data-theme='light'] textarea.formkit-input,
html[data-theme='light'] select.formkit-input {
  border-radius: 0.5rem;
  border-color: var(--corpmvl-border);
  background-color: var(--corpmvl-surface-elevated);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

html[data-theme='light'] .formkit-input:focus,
html[data-theme='light'] input.formkit-input:focus,
html[data-theme='light'] textarea.formkit-input:focus,
html[data-theme='light'] select.formkit-input:focus {
  border-color: var(--corpmvl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--corpmvl-accent) 18%, transparent);
  outline: none;
}

/* Dashboard / tarjetas de estadísticas */
html[data-theme='light'] [class*='rounded-xl'][class*='border'][class*='bg-neutral'],
html[data-theme='light'] [class*='rounded-lg'][class*='border'][class*='bg-neutral'] {
  border-color: var(--corpmvl-border) !important;
  box-shadow: var(--corpmvl-shadow-sm);
}

/* Pestañas de tipo de artículo — contenedor más limpio */
html[data-theme='light'] [role='tablist'].rounded-full {
  background-color: var(--corpmvl-surface) !important;
  border: 1px solid var(--corpmvl-border);
  box-shadow: var(--corpmvl-shadow-sm);
}


/* ═══════════════════════════════════════════════════════════
   Legacy UI — paleta Matamoros (modo claro, OpenProject Projects)
   Variables globales + navegación + sidebar vistas + contenido
   ═══════════════════════════════════════════════════════════ */
html[data-theme='light'] {
  /* Superficies */
  --background-primary: #f5f0f0;
  --background-primary-alt: #ece6e6;
  --background-secondary: #ffffff;
  --background-secondary-hover: #f5e8e8;
  --background-popover: #ffffff;
  --background-active: #e32027;
  --background-quaternary: #f5f0f0;
  --background-tertiary: #ece6e6;
  --background-modifier-border: rgba(232, 224, 224, 0.65);
  --background-modifier-hover: rgba(184, 23, 29, 0.06);

  /* Tipografía y enlaces */
  --text-normal: #3d3d3d;
  --text-muted: #5c5c5c;
  --text-link: #b8171d;
  --text-nav: #3d3d3d;
  --text-active: #ffffff;
  --text-button-primary: #b8171d;
  --text-button-primary-active: #9a1218;
  --header-primary: #3d3d3d;
  --header-secondary: #5c5c5c;
  --interactive-muted: #9a9696;
  --ghost-color: #c8c4c4;

  /* Botones y acentos */
  --button-primary-background: #b8171d;
  --button-primary-background-active: #9a1218;
  --button-background: #ffffff;
  --button-background-active: #ecc8c9;
  --button-active: #e32027;
  --button-active-active: #b8171d;
  --highlight: #e32027;
  --shadow-highlight: rgba(227, 32, 39, 0.22);

  /* Estados / iconos (verde Zammad → rojo Matamoros) */
  --supergood-color: #b8171d;
  --good-color: #d41c22;
  --ok-color: #e8585d;
  --bad-color: #e32027;
  --superbad-color: #9a1218;
  --text-inverted: #ffffff;

  /* Bordes */
  --border: #e8e0e0;
  --border-alt: #d4d1d1;
  --border-highlight: #e32027;

  /* Menú lateral primario (#navigation) */
  --menu-background-primary: #f5f0f0;
  --menu-background-secondary: #ffffff;
  --menu-background-primary-hover: rgba(184, 23, 29, 0.1);
  --menu-text: #3d3d3d;
  --menu-text-active: #3d3d3d;
  --menu-icon: #5c5c5c;
  --menu-icon-secondary: #3d3d3d;
  --nav-icon: #5c5c5c;
  --menu-background-active: color-mix(in srgb, #e32027 14%, transparent);
  --menu-border: 1px solid #e8e0e0;
  --menu-switch-background: #e8e0e0;
  --menu-switch-pointer: #ffffff;
  --menu-icon-secondary-hover-background: #ecc8c9;

  color-scheme: light;
}

/* ─── Navegación primaria ─── */
html[data-theme='light'] #navigation.navigation,
html[data-theme='light'] .navigation.vertical {
  background: var(--corpmvl-surface) !important;
  border-right: 1px solid var(--corpmvl-border);
}

html[data-theme='light'] #navigation .menu-item,
html[data-theme='light'] #navigation .nav-tab {
  color: var(--corpmvl-text);
  border-bottom-color: rgba(232, 224, 224, 0.6);
}

html[data-theme='light'] #navigation .menu-item .icon,
html[data-theme='light'] #navigation .nav-tab-icon .icon {
  fill: var(--corpmvl-muted);
}

html[data-theme='light'] #navigation .menu-item:hover,
html[data-theme='light'] #navigation .nav-tab:not(.is-active):hover {
  background: var(--corpmvl-red-tint-hover) !important;
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] #navigation .menu-item:hover .icon,
html[data-theme='light'] #navigation .menu-item:hover .menu-item-icon {
  fill: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] #navigation .menu-item.is-active,
html[data-theme='light'] #navigation .menu-item.is-hovered,
html[data-theme='light'] #navigation .nav-tab.is-active {
  background: color-mix(in srgb, var(--corpmvl-red, #e32027) 14%, transparent) !important;
  color: var(--corpmvl-text, #3d3d3d) !important;
  box-shadow: inset 3px 0 0 var(--corpmvl-red-deep, #b8171d) !important;
}

html[data-theme='light'] #navigation .menu-item.is-active .icon,
html[data-theme='light'] #navigation .menu-item.is-active .menu-item-icon,
html[data-theme='light'] #navigation .nav-tab.is-active .nav-tab-icon .icon {
  fill: var(--corpmvl-red-deep, #b8171d) !important;
}

html[data-theme='light'] #navigation .tasks-navigation .nav-tab {
  border-bottom-color: rgba(232, 224, 224, 0.6);
}

html[data-theme='light'] #navigation .search-holder,
html[data-theme='light'] #navigation .search {
  background: #fff;
  border-color: var(--corpmvl-border);
  color: var(--corpmvl-text);
}

/* ─── Barra inferior (#navigation .user-menu): perfil, Informando, Admin, Nuevo ─── */
html[data-theme='light'] #navigation .user-menu > li {
  background: var(--corpmvl-surface);
}

html[data-theme='light'] #navigation .user-menu > li:not(:last-child) {
  border-right-color: var(--corpmvl-border);
}

html[data-theme='light'] #navigation .user-menu .user-menu-icon {
  fill: var(--corpmvl-muted);
  transition: fill 0.15s ease;
}

html[data-theme='light'] #navigation .user-menu > li:hover .list-button::before,
html[data-theme='light'] #navigation .user-menu > li.open .list-button::before,
html[data-theme='light'] #navigation .user-menu > li.is-hovered .list-button::before {
  background: var(--corpmvl-red-tint-hover) !important;
}

html[data-theme='light'] #navigation .user-menu > li.is-active .list-button::before {
  background: var(--corpmvl-red) !important;
}

html[data-theme='light'] #navigation .user-menu > li:hover .user-menu-icon,
html[data-theme='light'] #navigation .user-menu > li.is-hovered .user-menu-icon,
html[data-theme='light'] #navigation .user-menu > li.open .user-menu-icon {
  fill: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] #navigation .user-menu > li.is-active .user-menu-icon {
  fill: #fff !important;
}

/* Nuevo (+) — rojo Matamoros (zammad.scss usa #38ae6a) */
html[data-theme='light'] #navigation .user-menu-icon.icon-plus {
  fill: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] #navigation .user-menu li.add:hover .list-button::before,
html[data-theme='light'] #navigation .user-menu li.add.is-active .list-button::before,
html[data-theme='light'] #navigation .user-menu li.add.is-hovered .list-button::before {
  background: var(--corpmvl-red) !important;
}

html[data-theme='light'] #navigation .user-menu li.add:hover .user-menu-icon.icon-plus,
html[data-theme='light'] #navigation .user-menu li.add.is-hovered .user-menu-icon.icon-plus,
html[data-theme='light'] #navigation .user-menu li.add.is-active .user-menu-icon.icon-plus,
html[data-theme='light'] #navigation .user-menu li.add.open .user-menu-icon.icon-plus {
  fill: #fff !important;
}

html[data-theme='light'] #navigation li.add .dropdown-nose {
  border-top-color: var(--corpmvl-red) !important;
}

html[data-theme='light'] #navigation .user-menu li.add .dropdown-menu li > a:hover {
  background: var(--corpmvl-red-tint-hover) !important;
  color: var(--corpmvl-red-deep) !important;
}

/* ─── Área de contenido (fondo shell Matamoros) ─── */
html[data-theme='light'] .main {
  background: var(--corpmvl-surface-elevated);
  border-left: 1px solid var(--corpmvl-border);
}

html[data-theme='light'] .main h1,
html[data-theme='light'] .main h2,
html[data-theme='light'] .page-header-title {
  color: var(--corpmvl-text);
}

/* ─── Sidebar secundario (lista de vistas / overviews) ─── */
html[data-theme='light'] .sidebar {
  background: var(--corpmvl-surface);
  border-right: 1px solid var(--corpmvl-border);
  color: var(--corpmvl-text);
}

html[data-theme='light'] .sidebar h2,
html[data-theme='light'] .sidebar h3 {
  color: #3d3d3d !important;
}

html[data-theme='light'] .sidebar.NavBarAdmin h2 {
  color: #3d3d3d !important;
}

/* NavBarAdmin — acordeón (modo claro y oscuro) */
.sidebar.NavBarAdmin .corp-nav-section {
  margin-bottom: 0.35rem;
}

.sidebar.NavBarAdmin .corp-nav-section-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.85rem 0 0.35rem !important;
  padding: 0.55rem 0.5rem !important;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  transition: background-color 0.15s ease;
}

.sidebar.NavBarAdmin .corp-nav-section:first-child .corp-nav-section-toggle {
  margin-top: 0 !important;
}

.sidebar.NavBarAdmin .corp-nav-section-toggle::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 0.15rem;
  opacity: 0.75;
}

.sidebar.NavBarAdmin .corp-nav-section.is-collapsed .corp-nav-section-toggle::after {
  transform: rotate(-45deg);
  margin-top: 0.15rem;
}

.sidebar.NavBarAdmin .corp-nav-section.is-collapsed .corp-nav-section-items {
  display: none;
}

.sidebar.NavBarAdmin .corp-nav-section-items {
  margin-bottom: 0.25rem;
}

.sidebar.NavBarAdmin .nav-pills > li > a,
.sidebar.NavBarAdmin .nav-pills.nav-stacked > li > a {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  height: auto !important;
  min-height: 2.65rem;
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  -webkit-font-smoothing: antialiased;
}

html[data-theme='light'] .sidebar.NavBarAdmin .corp-nav-section-toggle {
  color: #3d3d3d !important;
}

html[data-theme='light'] .sidebar.NavBarAdmin .corp-nav-section-toggle:hover {
  background: var(--corpmvl-red-tint);
}

html[data-theme='dark'] .sidebar.NavBarAdmin .corp-nav-section-toggle {
  color: var(--text-normal) !important;
}

html[data-theme='dark'] .sidebar.NavBarAdmin .corp-nav-section-toggle:hover {
  background: rgba(184, 23, 29, 0.18);
}

html[data-theme='light'] .nav-pills > li > a,
html[data-theme='light'] .nav-pills > li > a:focus,
html[data-theme='light'] .nav-pills > li > a:active {
  color: var(--corpmvl-text);
  font-weight: 500;
  border-radius: 6px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

html[data-theme='light'] .nav-pills > li:hover > a,
html[data-theme='light'] .nav-pills.nav-stacked > li:hover > a {
  background: var(--corpmvl-red-tint-hover) !important;
  color: var(--corpmvl-red-deep) !important;
  border-color: transparent !important;
}

html[data-theme='light'] .nav-pills > li.active > a,
html[data-theme='light'] .nav-pills > li.active > a:hover,
html[data-theme='light'] .nav-pills > li.active > a:focus,
html[data-theme='light'] .nav-pills.nav-stacked > li.active > a {
  background: var(--corpmvl-red) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: 6px;
  font-weight: 600;
}

html[data-theme='light'] .nav-pills .badge,
html[data-theme='light'] .nav-pills > .active > a > .badge {
  color: var(--corpmvl-muted);
  background: transparent;
  font-weight: 500;
}

html[data-theme='light'] .nav-pills > li.active > a > .badge {
  color: rgba(255, 255, 255, 0.85);
}

html[data-theme='light'] .nav-pills.nav-stacked .nav-pills-placeholder,
html[data-theme='light'] .label-subtle {
  color: #5c5c5c !important;
  font-size: 0.8125rem !important;
}

/* ─── Enlaces (sin romper tabs/botones activos) ─── */
html[data-theme='light'] a:not(.btn):not(.tab):not(.menu-item):not(.nav-tab) {
  color: var(--corpmvl-red-deep);
}

html[data-theme='light'] a:not(.btn):not(.tab):not(.menu-item):not(.nav-tab):hover {
  color: var(--corpmvl-red);
}

html[data-theme='light'] .u-highlight:not(.btn):not(.tab) {
  color: var(--corpmvl-red-deep);
}

html[data-theme='light'] a.btn {
  text-decoration: none;
}

/* Texto legible sobre fondos rojos / activos */
html[data-theme='light'] .tab.active,
html[data-theme='light'] a.tab.active,
html[data-theme='light'] .tab.active .tab-name,
html[data-theme='light'] .tab.active .tab-badge,
html[data-theme='light'] .nav-pills > li.active > a,
html[data-theme='light'] .nav-pills > li.active > a:hover,
html[data-theme='light'] .btn--text.is-selected,
html[data-theme='light'] .btn-group .btn--text.is-selected,
html[data-theme='light'] .btn--primary,
html[data-theme='light'] .btn--danger,
html[data-theme='light'] .btn--create,
html[data-theme='light'] .btn--positive,
html[data-theme='light'] .btn--success,
html[data-theme='light'] a.btn--success {
  color: #fff !important;
}

html[data-theme='light'] .tab.active .icon,
html[data-theme='light'] .btn--primary .icon,
html[data-theme='light'] .btn--danger .icon,
html[data-theme='light'] .btn--create .icon,
html[data-theme='light'] .btn--positive .icon,
html[data-theme='light'] .btn--success .icon,
html[data-theme='light'] a.btn--success .icon,
html[data-theme='light'] .btn--text.is-selected .icon {
  fill: #fff !important;
  opacity: 1;
}

/* ─── Pestañas (tabs) ─── */
html[data-theme='light'] .tabs {
  background: var(--corpmvl-surface);
  border-color: var(--corpmvl-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .tab {
  color: var(--corpmvl-muted);
  font-weight: 500;
}

html[data-theme='light'] .tab:hover:not(.active) {
  color: var(--corpmvl-red-deep);
  background: var(--corpmvl-red-tint);
}

html[data-theme='light'] a.tab:hover:not(.active) {
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .tab.active {
  background: var(--corpmvl-red) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

html[data-theme='light'] .tab.active:hover,
html[data-theme='light'] a.tab.active:hover,
html[data-theme='light'] .tab.active:focus,
html[data-theme='light'] a.tab.active:focus {
  background: var(--corpmvl-red) !important;
  color: #fff !important;
}

/* ─── Pestañas nav-tabs (Configuración + modales administración) ─── */
html[data-theme='light'] .page-content > .nav-tabs,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 1px solid var(--corpmvl-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--corpmvl-surface);
  box-shadow: var(--corpmvl-shadow-sm);
  position: relative;
}

html[data-theme='light'] .page-content > .nav-tabs > li,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li {
  margin: 0 0 0 -1px;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--corpmvl-border);
  background: var(--background-secondary, #fff);
  color: var(--corpmvl-muted);
  border-radius: 0;
  position: relative;
}

html[data-theme='light'] .page-content > .nav-tabs > li:first-child,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:first-child {
  margin-left: 0;
  border-radius: 7px 0 0 7px;
}

html[data-theme='light'] .page-content > .nav-tabs > li:last-child,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:last-child {
  border-radius: 0 7px 7px 0;
}

html[data-theme='light'] .page-content > .nav-tabs > li:only-child,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:only-child {
  border-radius: 7px;
}

html[data-theme='light'] .page-content > .nav-tabs > li > a,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.25rem;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: inherit !important;
  background: transparent;
  border: none !important;
  border-radius: 0;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

html[data-theme='light'] .page-content > .nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active):hover,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active):hover {
  background: var(--corpmvl-red-tint);
  color: var(--corpmvl-red-deep);
}

html[data-theme='light'] .page-content > .nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active) > a:hover,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active) > a:hover,
html[data-theme='light'] .page-content > .nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active) > a:focus,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active) > a:focus {
  color: var(--corpmvl-red-deep) !important;
  background: transparent;
  outline: none;
}

html[data-theme='light'] .page-content > .nav-tabs > li.active,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.active,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.corp-modal-tabs__nav-item--active {
  color: #fff;
  background: var(--corpmvl-red) !important;
  border-color: var(--corpmvl-red);
  z-index: 1;
}

html[data-theme='light'] .page-content > .nav-tabs > li.active > a,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.active > a,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.corp-modal-tabs__nav-item--active > a,
html[data-theme='light'] .page-content > .nav-tabs > li.active > a:hover,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.active > a:hover,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.corp-modal-tabs__nav-item--active > a:hover,
html[data-theme='light'] .page-content > .nav-tabs > li.active > a:focus,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.active > a:focus,
html[data-theme='light'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.corp-modal-tabs__nav-item--active > a:focus {
  color: #fff !important;
  background: transparent;
  outline: none;
}

html[data-theme='dark'] .page-content > .nav-tabs,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs {
  border-color: var(--border, #424046);
  background: var(--corpmvl-bg-panel, #2a2826);
  box-shadow: none;
}

html[data-theme='dark'] .page-content > .nav-tabs > li,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li {
  border-color: var(--border, #424046);
  background: var(--corpmvl-bg-dark, #1f1d1c);
  color: var(--text-muted, #a8a4a0);
}

html[data-theme='dark'] .page-content > .nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active):hover,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active):hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-normal, #ece8e4);
}

html[data-theme='dark'] .page-content > .nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active) > a:hover,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li:not(.active):not(.corp-modal-tabs__nav-item--active) > a:hover {
  color: var(--text-normal, #ece8e4) !important;
}

html[data-theme='dark'] .page-content > .nav-tabs > li.active,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.active,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.corp-modal-tabs__nav-item--active {
  background: var(--corpmvl-red, #c45c5c) !important;
  border-color: var(--corpmvl-red, #c45c5c);
  color: #fff;
}

html[data-theme='dark'] .page-content > .nav-tabs > li.active > a,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.active > a,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.corp-modal-tabs__nav-item--active > a,
html[data-theme='dark'] .page-content > .nav-tabs > li.active > a:hover,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.active > a:hover,
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li.corp-modal-tabs__nav-item--active > a:hover {
  color: #fff !important;
}

/* Modales — scroll horizontal si hay muchas pestañas */
.modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.modal--corp-tabbed .corp-modal-tabs__nav.nav-tabs > li {
  flex: 0 0 auto;
}

.modal--corp-tabbed .corp-modal-tabs__nav-item--error > a::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.modal--corp-tabbed .corp-modal-tabs__nav-item--error:not(.active):not(.corp-modal-tabs__nav-item--active) > a {
  color: var(--corpmvl-red, #e32027) !important;
}

/* ─── Botones — sistema Matamoros ─── */
html[data-theme='light'] .btn {
  border-color: var(--corpmvl-border);
  font-weight: 500;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

html[data-theme='light'] .btn:hover:not(.is-disabled):not([disabled]):not(.is-selected):not(.btn--primary):not(.btn--danger):not(.btn--create):not(.btn--positive):not(.btn--success):not(.btn--text) {
  background: var(--corpmvl-red-tint) !important;
  border-color: var(--corpmvl-border-strong);
  color: var(--corpmvl-text);
}

html[data-theme='light'] .btn:active:not(.is-selected):not(.btn--primary):not(.btn--danger):not(.btn--create):not(.btn--success) {
  background: var(--corpmvl-red-tint-hover) !important;
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .btn--text {
  color: var(--corpmvl-red-deep);
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 600;
  background: transparent;
}

html[data-theme='light'] .btn--text:hover:not(.is-selected) {
  background: var(--corpmvl-red-tint) !important;
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .btn--text:active:not(.is-selected) {
  background: var(--corpmvl-red-tint-hover) !important;
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .btn--text.is-selected,
html[data-theme='light'] .btn-group .btn--text.is-selected {
  background: var(--corpmvl-red-deep) !important;
  color: #fff !important;
  border-color: var(--corpmvl-red-deep) !important;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .btn--text.is-selected:hover,
html[data-theme='light'] .btn--text.is-selected:active,
html[data-theme='light'] .btn-group .btn--text.is-selected:hover {
  background: var(--corpmvl-red-muted) !important;
  color: #fff !important;
}

html[data-theme='light'] .btn--action {
  color: var(--corpmvl-muted);
  border-color: var(--corpmvl-border);
  background: var(--corpmvl-surface-elevated);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .btn--action:hover {
  background: var(--corpmvl-red-tint) !important;
  color: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-border-strong);
}

html[data-theme='light'] .btn--action:active {
  background: var(--corpmvl-red-tint-hover) !important;
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .table .btn--text.btn--secondary {
  color: var(--corpmvl-red-deep);
  background: var(--corpmvl-surface-elevated);
  border: 1px solid var(--corpmvl-border);
  border-radius: 6px;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .table .btn--text.btn--secondary:hover {
  background: var(--corpmvl-red-tint) !important;
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .btn--primary,
html[data-theme='light'] .btn.btn--primary {
  background: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .btn--primary:hover,
html[data-theme='light'] .btn--primary:active,
html[data-theme='light'] .btn.btn--primary:hover {
  background: var(--corpmvl-red-muted) !important;
  border-color: var(--corpmvl-red-muted) !important;
  color: #fff !important;
  box-shadow: var(--corpmvl-shadow-md);
}

html[data-theme='light'] .btn--danger {
  background: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .btn--danger:hover,
html[data-theme='light'] .btn--danger:active {
  background: var(--corpmvl-red-muted) !important;
  border-color: var(--corpmvl-red-muted) !important;
  color: #fff !important;
}

html[data-theme='light'] .btn--create,
html[data-theme='light'] .btn--positive,
html[data-theme='light'] .btn--success,
html[data-theme='light'] a.btn--success {
  background: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .btn--create:hover,
html[data-theme='light'] .btn--create:active,
html[data-theme='light'] .btn--positive:hover,
html[data-theme='light'] .btn--success:hover,
html[data-theme='light'] a.btn--success:hover,
html[data-theme='light'] a.btn--success:active {
  background: var(--corpmvl-red-muted) !important;
  border-color: var(--corpmvl-red-muted) !important;
  color: #fff !important;
  box-shadow: var(--corpmvl-shadow-md);
}

html[data-theme='light'] #navigation .btn--create .icon,
html[data-theme='light'] .btn--create .icon,
html[data-theme='light'] a.btn--success .icon {
  fill: #fff !important;
}

/* ─── Iconos verdes → Matamoros ─── */
html[data-theme='light'] .supergood-color,
html[data-theme='light'] .good-color,
html[data-theme='light'] .icon-checkmark,
html[data-theme='light'] .icon-status.ok,
html[data-theme='light'] .icon-task-state.closed,
html[data-theme='light'] .icon-task-state.published,
html[data-theme='light'] .task-state-closed-color {
  fill: var(--corpmvl-red-deep) !important;
  color: var(--corpmvl-red-deep);
}

html[data-theme='light'] .stat-graphic .icon path,
html[data-theme='light'] .mood-icon path,
html[data-theme='light'] .icon-mood-supergood path,
html[data-theme='light'] .icon-mood-good path,
html[data-theme='light'] .icon-mood-ok path,
html[data-theme='light'] .icon-mood-sad path,
html[data-theme='light'] .icon-mood-bad path,
html[data-theme='light'] .icon-mood-superbad path {
  fill: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .icon-mood-good path {
  fill: var(--corpmvl-red-soft) !important;
}

html[data-theme='light'] .icon-mood-ok path {
  fill: var(--corpmvl-red) !important;
}

html[data-theme='light'] .icon-stopwatch path,
html[data-theme='light'] .stopwatch-icon path {
  fill: var(--corpmvl-red-deep) !important;
}

/* Barras / leyendas dashboard — verde Zammad → Matamoros */
html[data-theme='light'] .frequency.stat-widget .primary,
html[data-theme='light'] .frequency.stat-widget .stats-row .primary {
  color: var(--corpmvl-red-deep) !important;
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .stat-circle.primary,
html[data-theme='light'] .stat-circle.supergood-color {
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .user-menu li.add .dropdown-menu {
  background-color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .user-menu li.add .dropdown-menu .divider {
  background: var(--corpmvl-red-soft) !important;
}

/*
 * Dropdowns en tema claro: Zammad usa color: --text-inverted (#fff) +
 * fondo --background-tertiary (gris claro) → texto invisible (p. ej. Actualizar).
 */
html[data-theme='light'] .dropdown-menu {
  background: #ffffff !important;
  color: #2a2724 !important;
  border: 1px solid var(--corpmvl-border, #e8e0e0) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 28px rgba(32, 24, 20, 0.16) !important;
}

html[data-theme='light'] .dropdown-menu > li,
html[data-theme='light'] .dropdown-menu > li > a {
  color: #2a2724 !important;
}

html[data-theme='light'] .dropdown-menu > li.dropdown-header {
  color: #7a746e !important;
  background: transparent !important;
  font-weight: 700;
}

html[data-theme='light'] .dropdown li:hover,
html[data-theme='light'] .dropdown li.is-active,
html[data-theme='light'] .dropdown-menu > li:hover,
html[data-theme='light'] .dropdown-menu > li.is-active {
  background: var(--corpmvl-red, #b8171d) !important;
  color: #fff !important;
}

html[data-theme='light'] .dropdown li:hover > a,
html[data-theme='light'] .dropdown li.is-active > a,
html[data-theme='light'] .dropdown-menu > li:hover > a,
html[data-theme='light'] .dropdown-menu > li.is-active > a {
  color: #fff !important;
  background: transparent !important;
}

/* Menú “+” de navegación: fondo rojo → mantener texto blanco */
html[data-theme='light'] .user-menu li.add .dropdown-menu,
html[data-theme='light'] #navigation .user-menu li.add .dropdown-menu {
  background-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
  border: none !important;
}

html[data-theme='light'] .user-menu li.add .dropdown-menu > li,
html[data-theme='light'] .user-menu li.add .dropdown-menu > li > a,
html[data-theme='light'] #navigation .user-menu li.add .dropdown-menu > li,
html[data-theme='light'] #navigation .user-menu li.add .dropdown-menu > li > a {
  color: #fff !important;
}


html[data-theme='light'] .chat-status[data-status='online'] .icon {
  fill: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] svg.icon-mood-supergood,
html[data-theme='light'] svg.icon-mood-good,
html[data-theme='light'] svg.icon-mood-ok,
html[data-theme='light'] svg.mood-icon {
  fill: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] svg.icon-mood-supergood path,
html[data-theme='light'] svg.icon-mood-good path,
html[data-theme='light'] svg.icon-mood-ok path,
html[data-theme='light'] svg.mood-icon path {
  fill: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .loading.icon {
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .nav-tab.task-state-closed.is-active {
  background-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

html[data-theme='light'] .btn--text.btn--positive {
  color: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .btn--text.btn--positive:hover {
  color: var(--corpmvl-red-deep) !important;
  background: var(--corpmvl-red-tint) !important;
}

html[data-theme='light'] .recipientList-controls:hover {
  background: var(--corpmvl-red-tint-hover) !important;
}

/*
 * Autocomplete Cliente / organización (nuevo ticket):
 * Zammad pinta .recipientList-name con --text-inverted (#fff). En tema claro el
 * dropdown es blanco → filas “vacías” (texto e iconos invisibles). Solo el
 * ítem :hover / .is-active se veía (fondo rojo + texto blanco).
 */
html[data-theme='light'] .recipientList-name,
html[data-theme='light'] .recipientList-detail,
html[data-theme='light'] .recipientList-status {
  color: #2a2724 !important;
}

html[data-theme='light'] .recipientList-icon,
html[data-theme='light'] .recipientList-arrow {
  fill: #2a2724 !important;
  opacity: 0.55;
}

html[data-theme='light'] .dropdown-menu > li:hover .recipientList-name,
html[data-theme='light'] .dropdown-menu > li.is-active .recipientList-name,
html[data-theme='light'] .recipientList-entry:hover .recipientList-name,
html[data-theme='light'] .recipientList-entry.is-active .recipientList-name,
html[data-theme='light'] .recipientList--new .recipientList-name {
  color: #ffffff !important;
}

html[data-theme='light'] .dropdown-menu > li:hover .recipientList-icon,
html[data-theme='light'] .dropdown-menu > li.is-active .recipientList-icon,
html[data-theme='light'] .dropdown-menu > li:hover .recipientList-arrow,
html[data-theme='light'] .dropdown-menu > li.is-active .recipientList-arrow,
html[data-theme='light'] .recipientList-entry:hover .recipientList-icon,
html[data-theme='light'] .recipientList-entry.is-active .recipientList-icon,
html[data-theme='light'] .recipientList-entry:hover .recipientList-arrow,
html[data-theme='light'] .recipientList-entry.is-active .recipientList-arrow,
html[data-theme='light'] .recipientList--new .recipientList-icon,
html[data-theme='light'] .recipientList--new .recipientList-arrow {
  fill: #ffffff !important;
  opacity: 1;
}

html[data-theme='light'] .dropdown-menu > li:hover .recipientList-detail,
html[data-theme='light'] .dropdown-menu > li.is-active .recipientList-detail,
html[data-theme='light'] .dropdown-menu > li:hover .recipientList-status,
html[data-theme='light'] .dropdown-menu > li.is-active .recipientList-status,
html[data-theme='light'] .recipientList-entry:hover .recipientList-detail,
html[data-theme='light'] .recipientList-entry.is-active .recipientList-detail,
html[data-theme='light'] .recipientList-entry:hover .recipientList-status,
html[data-theme='light'] .recipientList-entry.is-active .recipientList-status {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ─── Panel derecho — Flujo de actividad ─── */
html[data-theme='light'] .sidebar.optional h2,
html[data-theme='light'] .activity.sidebar h2,
html[data-theme='light'] .dashboard + .sidebar.optional h2 {
  color: #3d3d3d !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 1rem !important;
  -webkit-font-smoothing: antialiased;
}

html[data-theme='light'] .activity-entry .activity-remove .activity-remove-icon-holder,
html[data-theme='light'] .activity-entry .activity-mark-read .activity-remove-icon-holder {
  background: var(--corpmvl-border-strong) !important;
}

html[data-theme='light'] .activity-entry .activity-remove:hover .activity-remove-icon-holder {
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='light'] .activity-entry .activity-mark-read:hover .activity-remove-icon-holder {
  background: var(--corpmvl-red-soft) !important;
}

html[data-theme='light'] .activity-entry:not(:hover) .activity-mark-read {
  opacity: 0;
}

html[data-theme='light'] .activity-entry:hover .activity-mark-read,
html[data-theme='light'] .activity-entry:hover .activity-remove {
  opacity: 1;
}

html[data-theme='light'] .activity-mark-read {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  padding-right: 4px;
  cursor: pointer;
}

html[data-theme='light'] .activity-mark-read .icon {
  fill: #fff !important;
  width: 9px;
  height: 9px;
}

/* Tablas — tipografía legible (claro y oscuro) */
.table.table--light {
  color: inherit !important;
}

.table.table--light > thead > tr > th,
.table-overview .table > thead > tr > th,
.table-overview thead th,
.table > thead > tr > th,
.table thead th,
table.table thead th,
.scroll-table-container table > thead > tr > th,
.table.table--placeholder > thead > tr > th {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 13px 14px 11px !important;
  -webkit-font-smoothing: antialiased;
}

html[data-theme='light'] .table.table--light > thead > tr > th,
html[data-theme='light'] .table-overview .table > thead > tr > th,
html[data-theme='light'] .table-overview thead th,
html[data-theme='light'] .table > thead > tr > th,
html[data-theme='light'] .table thead th,
html[data-theme='light'] table.table thead th,
html[data-theme='light'] .scroll-table-container table > thead > tr > th,
html[data-theme='light'] .table.table--placeholder > thead > tr > th {
  background: #ece6e6 !important;
  color: #3d3d3d !important;
  border-bottom: 2px solid var(--corpmvl-border-strong) !important;
  border-top: none !important;
}

html[data-theme='dark'] .table.table--light > thead > tr > th,
html[data-theme='dark'] .table-overview .table > thead > tr > th,
html[data-theme='dark'] .table-overview thead th,
html[data-theme='dark'] .table > thead > tr > th,
html[data-theme='dark'] .table thead th,
html[data-theme='dark'] table.table thead th,
html[data-theme='dark'] .scroll-table-container table > thead > tr > th,
html[data-theme='dark'] .table.table--placeholder > thead > tr > th {
  border-bottom: 2px solid var(--border) !important;
}

.table > thead > tr > th .table-column-head,
.table > thead > tr > th .table-column-title,
thead th .table-column-title {
  font-size: inherit !important;
  font-weight: inherit !important;
  opacity: 1 !important;
}

html[data-theme='light'] .table > thead > tr > th .table-column-head,
html[data-theme='light'] .table > thead > tr > th .table-column-title,
html[data-theme='light'] thead th .table-column-title {
  color: #3d3d3d !important;
}

html[data-theme='light'] .table-overview tbody tr:hover,
html[data-theme='light'] .table tbody tr:hover {
  background: var(--corpmvl-red-tint);
}

.table-overview tbody td,
.table tbody td,
.table.table--light > tbody > tr > td,
.scroll-table-container tbody td,
.scroll-table tbody td,
.settings-list tbody td {
  font-size: 1.25rem !important;
  line-height: 1.55 !important;
  padding: 14px 16px !important;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

html[data-theme='dark'] .table-overview tbody td,
html[data-theme='dark'] .table tbody td,
html[data-theme='dark'] .table.table--light > tbody > tr > td,
html[data-theme='dark'] .scroll-table-container tbody td,
html[data-theme='dark'] .scroll-table tbody td,
html[data-theme='dark'] .settings-list tbody td {
  color: #ece8e4 !important;
  font-size: 1.25rem !important;
}

html[data-theme='dark'] .table-overview tbody td a,
html[data-theme='dark'] .table tbody td a,
html[data-theme='dark'] .scroll-table-container tbody td a {
  color: #ece8e4 !important;
}

html[data-theme='light'] .table-overview tbody td,
html[data-theme='light'] .table tbody td,
html[data-theme='light'] .table.table--light > tbody > tr > td,
html[data-theme='light'] .scroll-table-container tbody td,
html[data-theme='light'] .scroll-table tbody td,
html[data-theme='light'] .settings-list tbody td {
  border-color: var(--corpmvl-border);
  color: #3d3d3d !important;
}

.table-overview tbody td span,
.table tbody td span,
.table.table--light tbody td span,
.scroll-table-container tbody td span,
.settings-list tbody td span,
.table-overview tbody td a,
.table tbody td a,
.table.table--light tbody td a,
.scroll-table-container tbody td a {
  font-size: inherit !important;
}

html[data-theme='light'] .table-overview tbody td a,
html[data-theme='light'] .table tbody td a,
html[data-theme='light'] .table.table--light tbody td a,
html[data-theme='light'] .scroll-table-container tbody td a {
  color: var(--corpmvl-red-deep);
}

/* Tablas administración — settings-list, scroll-table */
.settings-list th,
.scroll-table-container table > thead > tr > th,
.scroll-table thead th {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 12px 14px !important;
}

html[data-theme='light'] .settings-list th,
html[data-theme='light'] .scroll-table-container table > thead > tr > th,
html[data-theme='light'] .scroll-table thead th {
  background: #ece6e6 !important;
  color: #3d3d3d !important;
}

.settings-list td {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  vertical-align: middle;
  padding: 12px 14px !important;
}

html[data-theme='light'] .settings-list td {
  color: #3d3d3d !important;
}

/* Etiquetas de formulario — solo color en claro; tamaño hereda del tema */
html[data-theme='light'] label,
html[data-theme='light'] .checkbox.form-group label,
html[data-theme='light'] .label,
html[data-theme='light'] .form-group label {
  color: #3d3d3d !important;
}

/* Modales complejos — filas de acciones / filtros sin solapamiento */
html[data-theme='light'] .modal-body .horizontal-filters,
html[data-theme='light'] .modal-body .horizontal-filter {
  width: 100%;
}

html[data-theme='light'] .modal-body .horizontal-filter {
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.5rem;
}

html[data-theme='light'] .modal-body .horizontal-filter-attribute,
html[data-theme='light'] .modal-body .horizontal-filter-value,
html[data-theme='light'] .modal-body .horizontal-filter-group {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
}

html[data-theme='light'] .modal--large .horizontal-filter-attribute,
html[data-theme='light'] .modal--veryLarge .horizontal-filter-attribute,
html[data-theme='light'] .modal--dynamicSize .horizontal-filter-attribute {
  max-width: none;
  flex: 1 1 10rem;
}

html[data-theme='light'] .modal-body .filter-controls {
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: 0.35rem;
}

html[data-theme='light'] .modal-body .form-field-group {
  margin-bottom: 1rem;
  padding: 1rem;
}

html[data-theme='light'] .modal-body select,
html[data-theme='light'] .modal-body input[type='text'],
html[data-theme='light'] .modal-body textarea {
  font-size: 0.9375rem;
  min-height: 2.375rem;
}

/* ─── Formularios legacy ─── */
html[data-theme='light'] .form-control,
html[data-theme='light'] input[type='text'],
html[data-theme='light'] input[type='email'],
html[data-theme='light'] input[type='search'],
html[data-theme='light'] input[type='password'],
html[data-theme='light'] textarea,
html[data-theme='light'] select {
  border-color: var(--corpmvl-border);
  border-radius: 6px;
  color: var(--corpmvl-text);
  background: var(--corpmvl-surface-elevated);
}

html[data-theme='light'] .form-control:focus,
html[data-theme='light'] input:focus,
html[data-theme='light'] textarea:focus,
html[data-theme='light'] select:focus {
  border-color: var(--corpmvl-red);
  box-shadow: 0 0 0 3px rgba(227, 32, 39, 0.12);
  outline: none;
}

html[data-theme='light'] .hero-unit {
  border-color: var(--corpmvl-border);
  box-shadow: var(--corpmvl-shadow-md);
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════
   Modales globales — confirmación, error, alertas (legacy + Vue)
   ═══════════════════════════════════════════════════════════ */
html[data-theme='light'] .modal-backdrop.in,
html[data-theme='light'] .modal-backdrop.show {
  background: rgba(32, 28, 28, 0.45) !important;
  backdrop-filter: blur(2px);
}

/* Local modals: no caja gris sólida; atenuar como el resto de la UI */
html[data-theme='light'] .modal-backdrop.modal-backdrop--local,
html[data-theme='light'] .modal-backdrop--local {
  background: rgba(32, 28, 28, 0.4) !important;
}

html[data-theme='light'] .modal.modal--local {
  background: transparent !important;
  padding: 1rem !important;
}

html[data-theme='light'] .modal.modal--local .modal-dialog {
  box-shadow: 0 16px 40px rgba(32, 24, 20, 0.18) !important;
}

html[data-theme='light'] .modal.fade.in,
html[data-theme='light'] .modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: transparent !important;
}

/* Tamaños de modal — respetar formularios complejos (plantillas, webhooks, programador) */
html[data-theme='light'] .modal-dialog {
  margin: 1.25rem auto;
  width: auto;
  max-width: min(660px, calc(100vw - 2.5rem));
}

html[data-theme='light'] .modal--small .modal-dialog {
  max-width: min(480px, calc(100vw - 2.5rem));
}

html[data-theme='light'] .modal--large .modal-dialog {
  max-width: min(740px, calc(100vw - 2rem));
}

html[data-theme='light'] .modal--veryLarge .modal-dialog {
  max-width: min(990px, calc(100vw - 2rem));
}

html[data-theme='light'] .modal--dynamicSize .modal-dialog {
  max-width: min(960px, calc(100vw - 2rem)) !important;
  width: max-content !important;
  min-width: min(640px, calc(100vw - 2rem));
  padding: 0 1rem;
}

html[data-theme='light'] .modal-content {
  border-radius: 12px;
  border: 1px solid var(--corpmvl-border);
  box-shadow: var(--corpmvl-shadow-md);
  overflow: hidden;
  background: var(--corpmvl-surface-elevated);
}

html[data-theme='light'] .modal-header {
  padding: 1.25rem 1.5rem 1rem;
  background: linear-gradient(
    180deg,
    var(--corpmvl-surface) 0%,
    var(--corpmvl-surface-elevated) 100%
  );
  border-bottom: 1px solid var(--corpmvl-border);
}

html[data-theme='light'] .modal-header h1,
html[data-theme='light'] .modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--corpmvl-text);
  text-align: left;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0;
}

html[data-theme='light'] .modal-body {
  padding: 1rem 1.5rem 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--corpmvl-text);
}

html[data-theme='light'] .modal--small .modal-body {
  font-size: 1rem;
  line-height: 1.5;
}

html[data-theme='light'] .modal--small .modal-body p {
  font-size: 1rem;
  color: var(--corpmvl-text);
}

html[data-theme='light'] .modal-body p {
  margin: 0 0 0.75rem;
  color: var(--corpmvl-text);
}

html[data-theme='light'] .modal-body p:last-child {
  margin-bottom: 0;
}

html[data-theme='light'] .modal-body pre {
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--corpmvl-surface);
  border: 1px solid var(--corpmvl-border);
  border-radius: 8px;
  border-left: 3px solid var(--corpmvl-red);
  font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--corpmvl-red-deep);
  white-space: pre-wrap;
  word-break: break-word;
}

html[data-theme='light'] .modal-body pre code {
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

html[data-theme='light'] .modal-alerts-container,
html[data-theme='light'] .modal-sticky-alerts-container {
  padding: 0 1.5rem;
}

html[data-theme='light'] .modal .alert {
  border-radius: 8px;
  border: 1px solid var(--corpmvl-border);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
}

html[data-theme='light'] .modal .alert--warning {
  background: #fff6da;
  border-color: #e8a830;
  color: #4a3300;
}

html[data-theme='light'] .modal .alert--danger,
html[data-theme='light'] .modal .alert--error {
  background: var(--corpmvl-red-tint);
  border-color: var(--corpmvl-accent-muted);
  color: var(--corpmvl-red-deep);
}

html[data-theme='light'] .modal .alert--success,
html[data-theme='light'] .modal .alert--info {
  background: var(--corpmvl-red-tint);
  border-color: var(--corpmvl-border);
  color: var(--corpmvl-text);
}

html[data-theme='light'] .modal-footer {
  padding: 1rem 1.5rem 1.25rem;
  background: var(--corpmvl-surface);
  border-top: 1px solid var(--corpmvl-border);
  gap: 0.75rem;
  justify-content: flex-end;
}

html[data-theme='light'] .modal-rightFooter,
html[data-theme='light'] .modal-leftFooter,
html[data-theme='light'] .modal-centerFooter {
  justify-content: flex-end;
}

html[data-theme='light'] .modal-footer .btn,
html[data-theme='light'] .modal-footer button.btn {
  min-width: 7.5rem;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--corpmvl-shadow-sm);
}

html[data-theme='light'] .modal-footer .btn--success,
html[data-theme='light'] .modal-footer .js-submit,
html[data-theme='light'] .modal-footer .btn--primary {
  background: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

html[data-theme='light'] .modal-footer .btn--success:hover,
html[data-theme='light'] .modal-footer .js-submit:hover,
html[data-theme='light'] .modal-footer .btn--primary:hover {
  background: var(--corpmvl-red-muted) !important;
  border-color: var(--corpmvl-red-muted) !important;
  color: #fff !important;
  box-shadow: var(--corpmvl-shadow-md);
}

html[data-theme='light'] .modal-footer .btn--danger {
  background: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

html[data-theme='light'] .modal-footer .btn--danger:hover {
  background: var(--corpmvl-red-muted) !important;
  color: #fff !important;
}

html[data-theme='light'] .modal-footer .btn--text.btn--subtle,
html[data-theme='light'] .modal-footer .js-cancel {
  min-width: auto;
  color: var(--corpmvl-muted) !important;
  background: var(--corpmvl-surface-elevated) !important;
  border: 1px solid var(--corpmvl-border) !important;
  box-shadow: none;
}

html[data-theme='light'] .modal-footer .js-cancel:hover {
  background: var(--corpmvl-red-tint) !important;
  color: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-border-strong) !important;
}

html[data-theme='light'] .modal-close {
  color: var(--corpmvl-muted);
  opacity: 0.9;
  transition: color 0.15s ease;
}

html[data-theme='light'] .modal-close:hover {
  color: var(--corpmvl-red-deep);
}

html[data-theme='light'] .modal-close .icon-diagonal-cross {
  fill: currentColor;
}

html[data-theme='light'] .modal-loader {
  background: rgba(255, 255, 255, 0.82);
}

/* Vue desktop — CommonDialog / confirmaciones */
html[data-theme='light'] [role='dialog'] {
  border-radius: 12px;
  border: 1px solid var(--corpmvl-border);
  box-shadow: var(--corpmvl-shadow-md);
}

/* D4-5: legacy dark menu/CTA vars viven en corp-palettes.css (por paleta). */
html[data-theme='dark'] {
  color-scheme: dark;
}

/* Dashboard / iconos — modo oscuro (verde → Matamoros) */
html[data-theme='dark'] .supergood-color,
html[data-theme='dark'] .good-color,
html[data-theme='dark'] .icon-checkmark,
html[data-theme='dark'] .icon-status.ok,
html[data-theme='dark'] .icon-task-state.closed,
html[data-theme='dark'] .icon-task-state.published,
html[data-theme='dark'] .task-state-closed-color {
  color: var(--corpmvl-red-soft) !important;
  fill: var(--corpmvl-red-soft) !important;
}

html[data-theme='dark'] .stat-graphic .icon path,
html[data-theme='dark'] .mood-icon path,
html[data-theme='dark'] .icon-mood-supergood path,
html[data-theme='dark'] .icon-mood-good path,
html[data-theme='dark'] .icon-mood-ok path,
html[data-theme='dark'] svg.icon-mood-supergood path,
html[data-theme='dark'] svg.icon-mood-good path,
html[data-theme='dark'] svg.icon-mood-ok path,
html[data-theme='dark'] svg.mood-icon path {
  fill: var(--corpmvl-red-soft) !important;
}

html[data-theme='dark'] .icon-stopwatch path,
html[data-theme='dark'] .stopwatch-icon path {
  fill: var(--corpmvl-red) !important;
}

html[data-theme='dark'] .frequency.stat-widget .primary,
html[data-theme='dark'] .frequency.stat-widget .stats-row .primary,
html[data-theme='dark'] .stat-circle.primary,
html[data-theme='dark'] .stat-circle.supergood-color {
  color: var(--corpmvl-red-soft) !important;
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='dark'] .loading.icon {
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='dark'] .nav-tab.task-state-closed.is-active {
  background-color: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

/* Classic dark nav active: soft tint (Ola 2). Opt-in matamoros keeps solid via palette vars. */
html[data-theme='dark'][data-corp-palette='matamoros'] #navigation .menu-item.is-active,
html[data-theme='dark'][data-corp-palette='matamoros'] #navigation .menu-item.is-hovered,
html[data-theme='dark'][data-corp-palette='matamoros'] #navigation .nav-tab.is-active {
  background: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

html[data-theme='dark'] .nav-pills > li.active > a,
html[data-theme='dark'] .nav-pills.nav-stacked > li.active > a {
  background: var(--corpmvl-red-deep) !important;
  color: #fff !important;
}

html[data-theme='dark'] .btn--primary,
html[data-theme='dark'] .btn--create,
html[data-theme='dark'] .btn--positive,
html[data-theme='dark'] .btn--success,
html[data-theme='dark'] a.btn--success {
  background: var(--corpmvl-red-deep) !important;
  border-color: var(--corpmvl-red-deep) !important;
}

html[data-theme='dark'] .zammad-switch--green input:checked + label {
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='dark'] #navigation .user-menu-icon.icon-plus {
  fill: var(--corpmvl-red-soft) !important;
}

html[data-theme='dark'] #navigation .user-menu li.add:hover .list-button::before,
html[data-theme='dark'] #navigation .user-menu li.add.is-active .list-button::before {
  background: var(--corpmvl-red-deep) !important;
}

html[data-theme='dark'] .activity-entry .activity-mark-read:hover .activity-remove-icon-holder {
  background: var(--corpmvl-red-soft) !important;
}

html[data-theme='dark'] .sidebar.optional h2,
html[data-theme='dark'] .activity.sidebar h2,
html[data-theme='dark'] .dashboard + .sidebar.optional h2 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* ─── Preferencias — selector paleta (legacy profile) ─── */
.corp-palette-settings__hint {
  font-size: 0.8125rem;
  color: var(--corpmvl-muted, #5c5c5c);
  margin: 0.35rem 0 0.75rem;
}

.corp-palette-settings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.corp-palette-settings__card {
  display: block;
  padding: 0.75rem;
  border: 1px solid var(--corpmvl-border, #e8e0e0);
  border-radius: 10px;
  background: var(--background-secondary, #fff);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.corp-palette-settings__card:hover {
  border-color: var(--corpmvl-border-strong, #d4d1d1);
}

.corp-palette-settings__card.is-active {
  border-color: var(--corpmvl-red-deep, #b8171d);
  box-shadow: 0 0 0 2px rgba(184, 23, 29, 0.15);
}

.corp-palette-settings__swatches {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.corp-palette-settings__swatch {
  flex: 1;
  min-width: 0;
  height: 1.25rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme='dark'] .corp-palette-settings__swatch {
  border-color: rgba(255, 255, 255, 0.12);
}

.corp-palette-settings__title {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.corp-palette-settings__desc {
  font-size: 0.75rem;
  color: var(--corpmvl-muted, #5c5c5c);
  margin: 0;
  line-height: 1.35;
}

html[data-theme='dark'] .corp-palette-settings__card {
  background: var(--corpmvl-bg-panel, #2a2826);
  border-color: var(--border, #424046);
}

html[data-theme='dark'] .corp-palette-settings__card.is-active {
  border-color: var(--corpmvl-red-soft, #d47070);
  box-shadow: 0 0 0 2px rgba(196, 92, 92, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   Modales administración — pestañas CorpMVL (claro + oscuro)
   ═══════════════════════════════════════════════════════════ */

html[data-theme='light'] .modal--corp-tabbed .modal-dialog,
html[data-theme='dark'] .modal--corp-tabbed .modal-dialog {
  width: min(1040px, calc(100vw - 1.25rem));
  min-width: min(820px, calc(100vw - 1.25rem));
  max-width: min(1040px, calc(100vw - 1.25rem));
}

html[data-theme='light'] .modal--corp-tabbed.modal--veryLarge .modal-dialog,
html[data-theme='dark'] .modal--corp-tabbed.modal--veryLarge .modal-dialog {
  width: min(1080px, calc(100vw - 1rem));
  min-width: min(860px, calc(100vw - 1rem));
  max-width: min(1080px, calc(100vw - 1rem));
}

/* Altura estable entre pestañas — área amplia para reducir scroll */
.modal--corp-tabbed .modal-content {
  min-height: 38rem;
}

.modal--corp-tabbed .modal-body {
  padding: 1.15rem 1.75rem 1.5rem;
  min-height: 30rem;
  font-size: 1.125rem;
  line-height: 1.55;
}

.modal--corp-tabbed .corp-modal-tabs {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 28rem;
}

.modal--corp-tabbed .corp-modal-tabs__panes {
  flex: 1;
  min-height: 28rem;
  position: relative;
}

.modal--corp-tabbed .corp-modal-tabs__pane {
  padding: 0;
  min-height: 28rem;
}

.modal--corp-tabbed .corp-modal-tabs__pane.active {
  display: flex;
  flex-direction: column;
  min-height: 28rem;
}

/* Contenido — rejilla 2 columnas + altura generosa */
.modal--corp-tabbed .corp-modal-tabs__scroll {
  height: min(30rem, calc(100vh - 17rem));
  min-height: 26rem;
  max-height: min(30rem, calc(100vh - 17rem));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.65rem 1rem;
  scrollbar-gutter: stable;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 0.15rem;
  align-content: start;
}

.modal--corp-tabbed .corp-modal-tabs__scroll > .form-group,
.modal--corp-tabbed .corp-modal-tabs__scroll > [data-attribute-name] {
  min-width: 0;
}

.modal--corp-tabbed .corp-modal-tabs__scroll > .form-group.form-group--block,
.modal--corp-tabbed .corp-modal-tabs__scroll > [data-attribute-name='note'],
.modal--corp-tabbed .corp-modal-tabs__scroll > [data-attribute-name='role_ids'],
.modal--corp-tabbed .corp-modal-tabs__scroll > [data-attribute-name='group_ids'],
.modal--corp-tabbed .corp-modal-tabs__scroll > [data-attribute-name='street'],
.modal--corp-tabbed .corp-modal-tabs__scroll > .richtext.form-group,
.modal--corp-tabbed .corp-modal-tabs__scroll > .user_permission.form-group,
.modal--corp-tabbed .corp-modal-tabs__scroll > .group_permissions.form-group {
  grid-column: 1 / -1;
}

.modal--corp-tabbed .corp-modal-tabs__scroll::-webkit-scrollbar {
  width: 8px;
}

.modal--corp-tabbed .corp-modal-tabs__scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(58, 56, 56, 0.22);
}

/* Campos del formulario */
.modal--corp-tabbed .form-group {
  margin-bottom: 1.125rem;
}

.modal--corp-tabbed .formGroup-label label {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--corpmvl-text, #3a3634);
  line-height: 1.45;
}

.modal--corp-tabbed .formGroup-label label span {
  color: var(--corpmvl-red, #e32027);
}

.modal--corp-tabbed .form-control,
.modal--corp-tabbed input[type='text'],
.modal--corp-tabbed input[type='email'],
.modal--corp-tabbed input[type='password'],
.modal--corp-tabbed input[type='number'],
.modal--corp-tabbed select,
.modal--corp-tabbed textarea {
  border-radius: 8px;
  min-height: 3rem;
  font-size: 1.1875rem;
  line-height: 1.45;
  border-color: var(--corpmvl-border, #e8e0e0);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal--corp-tabbed .controls,
.modal--corp-tabbed .help-block,
.modal--corp-tabbed .token-input,
.modal--corp-tabbed .select2-container {
  font-size: 1.1875rem;
}

.modal--corp-tabbed .form-control:focus,
.modal--corp-tabbed input:focus,
.modal--corp-tabbed select:focus,
.modal--corp-tabbed textarea:focus {
  border-color: var(--corpmvl-red, #e32027);
  box-shadow: 0 0 0 3px rgba(227, 32, 39, 0.12);
  outline: none;
}

.modal--corp-tabbed [data-attribute-name='note'] textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.5;
}

/* Roles y permisos — rejilla legible */
.modal--corp-tabbed [data-attribute-name='role_ids'] .controls,
.modal--corp-tabbed [data-attribute-name='group_ids'] .controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.65rem 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--corpmvl-border, #e8e0e0);
  border-radius: 10px;
  background: var(--corpmvl-surface, #faf7f5);
  min-height: 18rem;
  max-height: min(24rem, calc(100vh - 22rem));
  overflow-y: auto;
  box-sizing: border-box;
}

.modal--corp-tabbed [data-attribute-name='role_ids'] .checkbox,
.modal--corp-tabbed [data-attribute-name='group_ids'] .checkbox {
  margin: 0;
  padding: 0.45rem 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

.modal--corp-tabbed [data-attribute-name='role_ids'] .checkbox label,
.modal--corp-tabbed [data-attribute-name='group_ids'] .checkbox label,
.modal--corp-tabbed [data-attribute-name='role_ids'] .label-text,
.modal--corp-tabbed [data-attribute-name='group_ids'] .label-text {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
}

.modal--corp-tabbed [data-attribute-name='role_ids'] .help-block,
.modal--corp-tabbed [data-attribute-name='group_ids'] .help-block {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--corpmvl-muted, #5c5c5c);
  line-height: 1.45;
}

/* Historial — campos solo lectura */
.modal--corp-tabbed [data-corp-tab='meta'] .form-group .controls {
  font-size: 1.125rem;
  line-height: 1.5;
}

.modal--corp-tabbed .help-block,
.modal--corp-tabbed .help-message {
  font-size: 1rem;
  line-height: 1.45;
}

.modal--corp-tabbed .has-error .form-control,
.modal--corp-tabbed .has-error input,
.modal--corp-tabbed .has-error select,
.modal--corp-tabbed .has-error textarea {
  border-color: var(--corpmvl-red, #e32027);
}

.modal--corp-tabbed .modal-header h1,
.modal--corp-tabbed .modal-title {
  font-size: 1.375rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .modal--corp-tabbed .corp-modal-tabs__scroll {
    grid-template-columns: 1fr;
  }
}

/* Oscuro — paneles de permisos en modales */
html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

html[data-theme='dark'] .modal--corp-tabbed [data-attribute-name='role_ids'] .controls,
html[data-theme='dark'] .modal--corp-tabbed [data-attribute-name='group_ids'] .controls {
  background: var(--corpmvl-bg-dark, #1f1d1c);
  border-color: var(--border, #424046);
}

html[data-theme='dark'] .modal--corp-tabbed .corp-modal-tabs__nav-item--error:not(.active):not(.corp-modal-tabs__nav-item--active) > a {
  color: var(--corpmvl-red-soft, #ff8585) !important;
}

/* Modales globales — tema oscuro (paridad con claro) */
html[data-theme='dark'] .modal-backdrop.in,
html[data-theme='dark'] .modal-backdrop.show {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

html[data-theme='dark'] .modal.fade.in,
html[data-theme='dark'] .modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

html[data-theme='dark'] .modal-dialog {
  margin: 1.25rem auto;
  width: auto;
  max-width: min(660px, calc(100vw - 2.5rem));
}

html[data-theme='dark'] .modal--veryLarge .modal-dialog {
  max-width: min(990px, calc(100vw - 2rem));
}

html[data-theme='dark'] .modal-content {
  border-radius: 12px;
  border: 1px solid var(--border, #424046);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  background: var(--corpmvl-bg-panel, #2a2826);
}

html[data-theme='dark'] .modal-header {
  padding: 1.25rem 1.5rem 1rem;
  background: linear-gradient(
    180deg,
    var(--corpmvl-bg-dark, #1f1d1c) 0%,
    var(--corpmvl-bg-panel, #2a2826) 100%
  );
  border-bottom: 1px solid var(--border, #424046);
}

html[data-theme='dark'] .modal-header h1,
html[data-theme='dark'] .modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-normal, #ece8e4);
  letter-spacing: -0.01em;
}

html[data-theme='dark'] .modal-body {
  padding: 1.15rem 1.75rem 1.25rem;
  color: var(--text-normal, #ece8e4);
  font-size: 1.125rem;
}

html[data-theme='dark'] .modal--corp-tabbed .formGroup-label label {
  color: #ece8e4;
  font-size: 1.125rem;
}

html[data-theme='dark'] .modal-body .form-control,
html[data-theme='dark'] .modal-body input[type='text'],
html[data-theme='dark'] .modal-body input[type='email'],
html[data-theme='dark'] .modal-body input[type='password'],
html[data-theme='dark'] .modal-body select,
html[data-theme='dark'] .modal-body textarea {
  background: var(--corpmvl-bg-dark, #1f1d1c);
  border-color: var(--border, #424046);
  color: var(--text-normal, #ece8e4);
  border-radius: 8px;
  font-size: 1.1875rem;
  min-height: 3rem;
}

html[data-theme='dark'] .modal-footer {
  padding: 0.85rem 1.5rem 1.15rem;
  border-top: 1px solid var(--border, #424046);
  background: var(--corpmvl-bg-panel, #2a2826);
}

html[data-theme='dark'] .modal-footer .btn,
html[data-theme='dark'] .modal-footer button.btn {
  font-size: 1rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
}

html[data-theme='dark'] .form-control:focus,
html[data-theme='dark'] .modal-body input:focus,
html[data-theme='dark'] .modal-body textarea:focus,
html[data-theme='dark'] .modal-body select:focus {
  border-color: var(--corpmvl-red-soft, #c45c5c);
  box-shadow: 0 0 0 3px rgba(196, 92, 92, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   Lote 1 UX — connection lost / toasts / password / powered-by
   ═══════════════════════════════════════════════════════════ */

/* Connection lost modal (Coffee UI) */
.corp-connection-lost-modal .modal-dialog {
  max-width: 620px !important;
  width: calc(100% - 2rem) !important;
}

.corp-connection-lost-modal .modal-content {
  border-radius: 14px !important;
  border: 1px solid var(--corpmvl-border, #e5e1dc) !important;
  box-shadow: 0 20px 48px rgba(32, 24, 20, 0.26) !important;
  overflow: hidden;
}

.corp-connection-lost-modal .modal-header {
  background: var(--corpmvl-red, #b8171d) !important;
  color: #fff !important;
  padding: 1.25rem 1.6rem !important;
  border-bottom: none !important;
}

.corp-connection-lost-modal .modal-title,
.corp-connection-lost-modal .modal-header h1 {
  color: #fff !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.corp-connection-lost-modal .modal-body {
  padding: 1.75rem 1.75rem 1.9rem !important;
  background: #fff !important;
}

.corp-connection-lost__lead {
  margin: 0 0 0.7rem !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1f1b18 !important;
  line-height: 1.4 !important;
}

.corp-connection-lost__hint {
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 550 !important;
  color: #4a4541 !important;
  line-height: 1.5 !important;
}

/* Fallback: any reconnect modal without corp class yet */
.modal .modal-body:has(.corp-connection-lost) {
  padding: 1.75rem 1.75rem 1.9rem !important;
}

/* Professional success / error toasts (#notify / noty) */
#notify {
  top: 20px !important;
  z-index: 10050 !important;
}

#notify .noty_bar .noty_message {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  min-width: min(520px, calc(100vw - 2rem)) !important;
  max-width: 600px !important;
  padding: 1.25rem 1.55rem !important;
  border-radius: 12px !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 32px rgba(32, 24, 20, 0.22) !important;
  border: 1px solid transparent !important;
  text-align: left !important;
}

#notify .noty_bar.noty_type_success .noty_message,
#notify .noty_bar[class*='success'] .noty_message {
  background: #1f7a45 !important;
  color: #fff !important;
  border-color: #176338 !important;
}

#notify .noty_bar.noty_type_error .noty_message,
#notify .noty_bar[class*='error'] .noty_message {
  background: var(--corpmvl-red, #b8171d) !important;
  color: #fff !important;
  border-color: #8f1217 !important;
}

#notify .noty_bar.noty_type_information .noty_message,
#notify .noty_bar.noty_type_alert .noty_message {
  background: #2a2826 !important;
  color: #fff !important;
}

#notify .noty_bar .icon,
#notify .noty_bar .icon-checkmark,
#notify .noty_bar .icon-error {
  width: 1.65rem !important;
  height: 1.65rem !important;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

#notify .noty_text {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Password field: Ver / Generar al final del input (inline) */
.corp-pw-field {
  position: relative;
  display: block;
  width: 100%;
}

.corp-pw-field input[type='password'],
.corp-pw-field input[type='text'] {
  width: 100%;
  padding-right: 5.5rem !important;
}

.corp-pw-field--with-generate input[type='password'],
.corp-pw-field--with-generate input[type='text'] {
  padding-right: 11.5rem !important;
}

.corp-pw-actions {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  transform: none;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  z-index: 2;
}

.corp-pw-btn {
  appearance: none;
  border: 1.5px solid var(--corpmvl-border, #d5d0cb);
  background: #fff;
  color: var(--corpmvl-red-deep, #8f1217);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0 0.9rem;
  height: 100%;
  min-height: 0;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.corp-pw-btn__label {
  font-size: 1rem;
  font-weight: 700;
}

.corp-pw-btn:hover {
  background: var(--corpmvl-red-tint, #f8e9e9);
  border-color: var(--corpmvl-red-muted, #c45c5c);
}

.corp-pw-btn--generate {
  background: var(--corpmvl-red, #b8171d);
  border-color: var(--corpmvl-red, #b8171d);
  color: #fff;
}

.corp-pw-btn--generate:hover {
  background: var(--corpmvl-red-deep, #8f1217);
  color: #fff;
}

/* Login: single Ver button uses more horizontal room inside the input */
.corp-pw-field--toggle-only input[type='password'],
.corp-pw-field--toggle-only input[type='text'] {
  padding-right: 4.75rem !important;
}

/* Activity stream: clear-all + select-all */
.corp-activity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.corp-activity-header h2 {
  margin-bottom: 0 !important;
  flex: 1 1 auto;
  min-width: 8rem;
}

.corp-activity-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.corp-activity-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  color: #3d3d3d !important;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.corp-activity-select-all input[type='checkbox'] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--corpmvl-red, #b8171d);
  cursor: pointer;
  margin: 0;
}

.corp-activity-clear-all,
button.corp-activity-clear-all {
  flex-shrink: 0;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--corpmvl-red-deep, #8f1217) !important;
  text-decoration: none !important;
  padding: 0.15rem 0 !important;
  white-space: nowrap;
  line-height: 1.3 !important;
}

.corp-activity-clear-all:hover {
  color: var(--corpmvl-red, #b8171d) !important;
  text-decoration: underline !important;
}

.corp-activity-selection-status {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--corpmvl-red-deep, #8f1217);
  margin: 0 0 0.65rem;
}

/* Always show row check / X (selection + remove) with stronger contrast */
html[data-theme='light'] .activity-entry .activity-mark-read,
html[data-theme='light'] .activity-entry .activity-remove {
  opacity: 1 !important;
}

html[data-theme='light'] .activity-entry .activity-mark-read .activity-remove-icon-holder {
  background: #cfc9c3 !important;
  border: 1px solid #a8a29c !important;
}

html[data-theme='light'] .activity-entry.corp-activity-selected .activity-mark-read .activity-remove-icon-holder,
html[data-theme='light'] .activity-entry.is-selected .activity-mark-read .activity-remove-icon-holder {
  background: var(--corpmvl-red, #b8171d) !important;
  border-color: var(--corpmvl-red-deep, #8f1217) !important;
}

html[data-theme='light'] .activity-entry.corp-activity-selected,
html[data-theme='light'] .activity-entry.is-selected {
  background: rgba(184, 23, 29, 0.07);
  border-radius: 8px;
}

/* Powered by + Matamoros — contraste OK sobre fondo login oscuro */
.poweredBy.corp-powered-by,
.corp-powered-by {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  margin: 28px 0 16px !important;
  color: #d8d2cb !important;
  font-size: 0.875rem !important;
}

.corp-powered-by__logo {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.corp-powered-by__muted {
  color: #cfc8c0 !important;
  font-weight: 500;
}

.corp-powered-by__brand {
  color: #f2a0a3 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.corp-powered-by__brand:hover {
  color: #ffc9cb !important;
  text-decoration: underline !important;
}

/* Tema claro: un poco más suave, sigue legible sobre charcoal del login */
html[data-theme='light'] .corp-powered-by,
html[data-theme='light'] .corp-powered-by__muted {
  color: #d0c9c1 !important;
}

html[data-theme='light'] .corp-powered-by__brand {
  color: #f5b0b3 !important;
}

/* Hide upstream Zammad marks if still present before JS rewrite */
.poweredBy a[href='https://zammad.org'],
.poweredBy .icon-logo,
.poweredBy .logotype {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   Overview “Opciones” — ancho forzado + tipografía legible + centrado
   ═══════════════════════════════════════════════════════════ */
html[data-theme='light'] .modal.modal--corp-overview-settings.fade.in,
html[data-theme='light'] .modal.modal--corp-overview-settings.show,
.modal.modal--corp-overview-settings.fade.in,
.modal.modal--corp-overview-settings.show {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 1050 !important;
}

/* Centrado por JS en px (left/top). Sin transform: Bootstrap lo anula en .modal.in */
html[data-theme='light'] .modal.modal--corp-overview-settings .modal-dialog,
html[data-theme='light'] .modal.modal--corp-overview-settings.modal--veryLarge .modal-dialog,
html[data-theme='light'] .modal.modal--corp-overview-settings.modal--large .modal-dialog,
html[data-theme='light'] .modal.modal--corp-overview-settings.fade.in .modal-dialog,
html[data-theme='light'] .modal.modal--corp-overview-settings.show .modal-dialog,
.modal.modal--corp-overview-settings .modal-dialog,
.modal.modal--corp-overview-settings.fade.in .modal-dialog,
.modal.modal--corp-overview-settings.show .modal-dialog {
  position: fixed !important;
  /* left/top: seteados por corp-auth.js / settings.coffee — fallback CSS: */
  left: max(12px, calc(50vw - min(36vw, 590px))) !important;
  top: max(12px, 8vh) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  flex: none !important;
  width: min(72vw, 1180px) !important;
  min-width: min(720px, calc(100vw - 2rem)) !important;
  max-width: min(1180px, calc(100vw - 2rem)) !important;
  margin: 0 !important;
  box-shadow: none !important;
}

html[data-theme='light'] .modal.modal--corp-overview-settings .modal-content,
.modal.modal--corp-overview-settings .modal-content {
  width: 100% !important;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px !important;
  border: 1px solid var(--corpmvl-border, #e8e0e0) !important;
  box-shadow: 0 20px 50px rgba(32, 24, 20, 0.22) !important;
  background: #fff !important;
}

html[data-theme='light'] .modal.modal--corp-overview-settings .modal-header,
.modal.modal--corp-overview-settings .modal-header {
  padding: 1.4rem 1.85rem 1.2rem !important;
  flex-shrink: 0;
  background: #fff !important;
  border-bottom: 1px solid var(--corpmvl-border, #e8e0e0) !important;
}

html[data-theme='light'] .modal.modal--corp-overview-settings .modal-header h1,
html[data-theme='light'] .modal.modal--corp-overview-settings .modal-title,
.modal.modal--corp-overview-settings .modal-header h1,
.modal.modal--corp-overview-settings .modal-title {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #2a2a2a !important;
}

html[data-theme='light'] .modal.modal--corp-overview-settings .modal-header .close,
.modal.modal--corp-overview-settings .modal-header .js-close,
.modal.modal--corp-overview-settings .modal-header .icon {
  color: var(--corpmvl-red, #b8171d) !important;
  fill: var(--corpmvl-red, #b8171d) !important;
  opacity: 1 !important;
}

html[data-theme='light'] .modal.modal--corp-overview-settings .modal-body,
.modal.modal--corp-overview-settings .modal-body {
  padding: 1.35rem 1.85rem 1.45rem !important;
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff !important;
}

html[data-theme='light'] .modal.modal--corp-overview-settings .modal-footer,
.modal.modal--corp-overview-settings .modal-footer {
  padding: 1.2rem 1.85rem 1.35rem !important;
  flex-shrink: 0;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  background: #faf8f8 !important;
  border-top: 1px solid var(--corpmvl-border, #e8e0e0) !important;
}

html[data-theme='light'] .modal.modal--corp-overview-settings .modal-footer .btn,
.modal.modal--corp-overview-settings .modal-footer .btn {
  font-size: 1.2rem !important;
  font-weight: 650 !important;
  padding: 0.8rem 1.6rem !important;
  min-height: 3.1rem !important;
  border-radius: 8px !important;
}

/* Labels de campo */
.modal.modal--corp-overview-settings .formGroup-label > label,
.modal.modal--corp-overview-settings .form-group > .formGroup-label label,
.modal.modal--corp-overview-settings .form-group > label,
.modal.modal--corp-overview-settings .control-label,
.modal.modal--corp-overview-settings label.control-label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  margin-bottom: 0.55rem !important;
  color: #5c5c5c !important;
  display: block !important;
}

.modal.modal--corp-overview-settings .form-group {
  margin-bottom: 1.25rem !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
}

/* Form grid */
.modal.modal--corp-overview-settings .modal-body > form,
.modal.modal--corp-overview-settings form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 1.25rem !important;
  row-gap: 0 !important;
  align-items: start !important;
}

.modal.modal--corp-overview-settings form > .form-group[data-attribute-name^='view::'],
.modal.modal--corp-overview-settings form > .form-group.checkboxTicketAttributes,
.modal.modal--corp-overview-settings form > .form-group.checkbox {
  grid-column: 1 / -1 !important;
}

.modal.modal--corp-overview-settings form > .form-group[data-attribute-name='order::by'],
.modal.modal--corp-overview-settings form > .form-group[data-attribute-name='order::direction'],
.modal.modal--corp-overview-settings form > .form-group[data-attribute-name='group_by'],
.modal.modal--corp-overview-settings form > .form-group[data-attribute-name='group_direction'] {
  grid-column: auto !important;
  min-width: 0;
}

.modal.modal--corp-overview-settings .form-group.checkbox,
.modal.modal--corp-overview-settings .form-group.checkboxTicketAttributes {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
}

/* Checkboxes — tipografía grande */
.modal.modal--corp-overview-settings .checkbox.checkbox--list,
.modal.modal--corp-overview-settings .form-group.checkbox .checkbox--list,
.modal.modal--corp-overview-settings .form-group.checkboxTicketAttributes .checkbox--list,
.modal.modal--corp-overview-settings .form-group.checkbox > .formGroup-label > .checkbox,
.modal.modal--corp-overview-settings .form-group.checkboxTicketAttributes > .formGroup-label > .checkbox {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-count: unset !important;
  gap: 0.45rem 1.35rem !important;
  max-height: min(46vh, 420px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.1rem 1.25rem !important;
  margin: 0.2rem 0 0 !important;
  border: 1px solid var(--corpmvl-border, #e8e0e0) !important;
  border-radius: 10px !important;
  background: #faf8f8 !important;
  box-shadow: none !important;
  height: auto !important;
  align-items: start !important;
  font-size: 1.2rem !important;
}

.modal.modal--corp-overview-settings .checkbox.checkbox--list .checkbox-replacement,
.modal.modal--corp-overview-settings .checkbox.checkbox--list > label,
.modal.modal--corp-overview-settings .form-group.checkbox .checkbox--list > label,
.modal.modal--corp-overview-settings .form-group.checkboxTicketAttributes .checkbox--list > label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  margin: 0 !important;
  padding: 0.55rem 0.3rem !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #2a2a2a !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

.modal.modal--corp-overview-settings .checkbox.checkbox--list .label-text {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  color: #2a2a2a !important;
  flex: 1 1 auto;
  min-width: 0;
}

.modal.modal--corp-overview-settings .checkbox.checkbox--list .help-text {
  display: inline !important;
  margin: 0 0 0 0.25rem !important;
  font-size: 1.05rem !important;
  color: #6b6b6b !important;
}

.modal.modal--corp-overview-settings .checkbox.checkbox--list .icon,
.modal.modal--corp-overview-settings .checkbox.checkbox--list svg {
  width: 1.4rem !important;
  height: 1.4rem !important;
  flex-shrink: 0;
  margin-top: 0.12rem !important;
}

.modal.modal--corp-overview-settings .checkbox.checkbox--list .checkbox-child,
.modal.modal--corp-overview-settings .form-group.checkbox .checkbox-child {
  padding-left: 0.25rem !important;
  margin-top: 0 !important;
}

/* Selects / listas desplegables */
.modal.modal--corp-overview-settings select,
.modal.modal--corp-overview-settings .form-control,
.modal.modal--corp-overview-settings .controls select,
.modal.modal--corp-overview-settings .controls .form-control {
  font-size: 1.2rem !important;
  font-weight: 550 !important;
  color: #2a2a2a !important;
  min-height: 3.15rem !important;
  height: auto !important;
  padding: 0.65rem 1.05rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--corpmvl-border, #e8e0e0) !important;
  background: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  line-height: 1.35 !important;
}

.modal.modal--corp-overview-settings select option {
  color: #2a2a2a !important;
  background: #fff !important;
  font-size: 1.15rem !important;
}

.modal.modal--corp-overview-settings .form-group:focus-within select,
.modal.modal--corp-overview-settings .form-group:focus-within .form-control {
  border-color: var(--corpmvl-red, #b8171d) !important;
  box-shadow: 0 0 0 3px rgba(184, 23, 29, 0.12) !important;
}

@media (max-width: 900px) {
  html[data-theme='light'] .modal.modal--corp-overview-settings .modal-dialog,
  .modal.modal--corp-overview-settings .modal-dialog {
    width: calc(100vw - 1.5rem) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    /* left/top via JS; no transform (Bootstrap kills it / offsets under #content) */
    transform: none !important;
    -webkit-transform: none !important;
  }

  .modal.modal--corp-overview-settings .modal-body > form,
  .modal.modal--corp-overview-settings form {
    grid-template-columns: 1fr !important;
  }

  .modal.modal--corp-overview-settings .checkbox.checkbox--list,
  .modal.modal--corp-overview-settings .form-group.checkbox .checkbox--list,
  .modal.modal--corp-overview-settings .form-group.checkboxTicketAttributes .checkbox--list,
  .modal.modal--corp-overview-settings .form-group.checkbox > .formGroup-label > .checkbox,
  .modal.modal--corp-overview-settings .form-group.checkboxTicketAttributes > .formGroup-label > .checkbox {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Capas visuales globales — canvas / componente / formulario
   Las mezclas usan las variables activas de cada paleta.
   ═══════════════════════════════════════════════════════════ */
html[data-theme='light'] {
  --corp-canvas-bg: color-mix(
    in srgb,
    var(--corpmvl-surface, #f5f0f0) 78%,
    var(--corpmvl-red-tint-hover, #ecc8c9) 22%
  );
  --corp-component-bg: color-mix(
    in srgb,
    var(--corpmvl-surface-elevated, #fff) 98%,
    transparent
  );
  --corp-ticket-window-bg: color-mix(
    in srgb,
    var(--corpmvl-surface, #f5f0f0) 48%,
    var(--corpmvl-red-tint-hover, #ecc8c9) 52%
  );
  --corp-form-section-bg: color-mix(
    in srgb,
    var(--corpmvl-surface-elevated, #fff) 82%,
    var(--corpmvl-red-tint, #f5e8e8) 18%
  );
  --corp-input-bg: color-mix(
    in srgb,
    var(--corpmvl-surface-elevated, #fff) 97%,
    var(--corpmvl-red-tint, #f5e8e8) 3%
  );
  --corp-component-border: color-mix(
    in srgb,
    var(--corpmvl-border-strong, #d4d1d1) 72%,
    var(--corpmvl-red-deep, #b8171d) 28%
  );
  --corp-component-shadow:
    0 1px 2px rgba(42, 35, 35, 0.06),
    0 12px 32px rgba(58, 42, 42, 0.12);
}

html[data-theme='dark'] {
  --corp-canvas-bg: color-mix(
    in srgb,
    var(--corpmvl-bg-dark, #1f1d1c) 88%,
    var(--corpmvl-red, #c45c5c) 12%
  );
  --corp-component-bg: color-mix(
    in srgb,
    var(--corpmvl-bg-elevated, #32302e) 98%,
    transparent
  );
  --corp-ticket-window-bg: color-mix(
    in srgb,
    var(--corpmvl-bg-dark, #1f1d1c) 76%,
    var(--corpmvl-red, #c45c5c) 24%
  );
  --corp-form-section-bg: color-mix(
    in srgb,
    var(--corpmvl-bg-elevated, #32302e) 86%,
    var(--corpmvl-red, #c45c5c) 14%
  );
  --corp-input-bg: color-mix(
    in srgb,
    var(--corpmvl-bg-dark, #1f1d1c) 92%,
    var(--corpmvl-red, #c45c5c) 8%
  );
  --corp-component-border: color-mix(
    in srgb,
    var(--border, #48444a) 72%,
    var(--corpmvl-red, #c45c5c) 28%
  );
  --corp-component-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 14px 36px rgba(0, 0, 0, 0.34);
}

/* El shell queda un nivel por detrás de los componentes. */
html[data-theme='light'] .content,
html[data-theme='dark'] .content {
  background-color: var(--corp-canvas-bg) !important;
}

html[data-theme='light'] .content .main,
html[data-theme='dark'] .content .main {
  background: transparent !important;
}

/* Componentes elevados reutilizables. */
.content .box,
.content .panel,
.content .form-field-group,
.modal-content,
.popover,
.dropdown-menu {
  background-color: var(--corp-component-bg) !important;
  border-color: var(--corp-component-border) !important;
  box-shadow: var(--corp-component-shadow);
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
}

.content .box,
.content .panel,
.modal-content {
  border-radius: 12px;
}

/* El formulario se distingue tanto del canvas como de su tarjeta. */
.content .formset-inset,
.content .form-field-group,
.modal-body .form-field-group {
  background-color: var(--corp-form-section-bg) !important;
  border: 1px solid var(--corp-component-border) !important;
  border-radius: 10px;
}

.content .formset-inset {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent);
}

.content .box.box--newTicket {
  background-color: var(--corp-component-bg) !important;
  box-shadow: var(--corp-component-shadow) !important;
  border: 1px solid var(--corp-component-border) !important;
}

.content .newTicket {
  width: 100%;
  min-height: 100%;
  background-color: var(--corp-ticket-window-bg) !important;
  border-left: 1px solid color-mix(
    in srgb,
    var(--corp-component-border) 62%,
    transparent
  );
  border-right: 1px solid color-mix(
    in srgb,
    var(--corp-component-border) 62%,
    transparent
  );
}

.content .box.box--newTicket .page-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(
    in srgb,
    var(--corp-component-border) 66%,
    transparent
  );
}

.content .box.box--newTicket .page-header h1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.content .box.box--newTicket .page-header h1::before {
  content: '';
  display: inline-block;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 2.1rem;
  background-color: var(--corpmvl-red-deep, #b8171d);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 3h16a2 2 0 0 1 2 2v4a3 3 0 0 0 0 6v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a3 3 0 0 0 0-6V5a2 2 0 0 1 2-2Zm2 4v2h2V7H6Zm0 4v2h2v-2H6Zm0 4v2h2v-2H6Zm5-8v2h7V7h-7Zm0 4v2h7v-2h-7Zm0 4v2h5v-2h-5Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 3h16a2 2 0 0 1 2 2v4a3 3 0 0 0 0 6v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a3 3 0 0 0 0-6V5a2 2 0 0 1 2-2Zm2 4v2h2V7H6Zm0 4v2h2v-2H6Zm0 4v2h2v-2H6Zm5-8v2h7V7h-7Zm0 4v2h7v-2h-7Zm0 4v2h5v-2h-5Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Controles opacos sobre secciones translúcidas para conservar legibilidad. */
.content .box .form-control,
.content .box input:not([type='checkbox']):not([type='radio']),
.content .box select,
.content .box textarea,
.content .box .richtext,
.content .box .token-input,
.modal-content .form-control,
.modal-content input:not([type='checkbox']):not([type='radio']),
.modal-content select,
.modal-content textarea {
  background-color: var(--corp-input-bg) !important;
  border-color: var(--corp-component-border) !important;
}

.content .box .form-control:focus,
.content .box input:focus,
.content .box select:focus,
.content .box textarea:focus,
.modal-content .form-control:focus,
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--corpmvl-red, #e32027) !important;
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--corpmvl-red, #e32027) 18%,
    transparent
  ) !important;
}

@media (max-width: 767px) {
  .content .newTicket {
    border-left: 0;
    border-right: 0;
  }

  .content .box.box--newTicket {
    border-radius: 0;
    box-shadow: none !important;
  }

  .content .formset-inset {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   D1-4 · Ticket chrome (tipografía Corp en detalle)
   ═══════════════════════════════════════════════════════════ */

.ticket-detail-view,
[class*='ticket-detail'] {
  font-family: var(--corpmvl-font-sans);
}




/* ═══════════════════════════════════════════════════════════
   Ticket create · contraste Corp (toggleButtons / checkbox / plantilla)
   ═══════════════════════════════════════════════════════════ */

/* Canal (Received call / Outbound / correo): tabs más visibles */
html[data-theme='light'] #ticket-create [role='tablist'],
html[data-theme='light'] form#ticket-create [role='tablist'] {
  background-color: #ece6e6 !important;
  border: 1px solid #c8b8b8 !important;
  box-shadow: inset 0 0 0 1px rgba(184, 23, 29, 0.08);
}

html[data-theme='light'] #ticket-create [role='tab'],
html[data-theme='light'] form#ticket-create [role='tab'] {
  color: #3d3d3d !important;
  font-weight: 600;
}

html[data-theme='light'] #ticket-create [role='tab'][aria-selected='true'],
html[data-theme='light'] form#ticket-create [role='tab'][aria-selected='true'] {
  color: #1a1a1a !important;
}

html[data-theme='light'] #ticket-create [role='tab'] svg,
html[data-theme='light'] form#ticket-create [role='tab'] svg {
  color: var(--corpmvl-red-deep, #9a1218) !important;
  opacity: 1 !important;
}

/* Marker pill behind active channel tab */
html[data-theme='light'] #ticket-create [role='tablist'] [class*='bg-white'],
html[data-theme='light'] form#ticket-create [role='tablist'] .bg-white {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(42, 36, 36, 0.12);
}

/* Checkboxes boolean (FormKit): borde y caja visibles */
html[data-theme='light'] #ticket-create [data-type='checkbox'] .formkit-decorator,
html[data-theme='light'] form#ticket-create [data-type='checkbox'] [data-decorator],
html[data-theme='light'] #ticket-create input[type='checkbox'],
html[data-theme='light'] form#ticket-create input[type='checkbox'] {
  border: 2px solid #8a7a7a !important;
  background-color: #ffffff !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  border-radius: 0.25rem !important;
  accent-color: var(--corpmvl-red, #b8171d);
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme='light'] #ticket-create [data-type='checkbox'] .formkit-decorator[data-checked],
html[data-theme='light'] form#ticket-create [data-type='checkbox'] [data-checked] .formkit-decorator {
  background-color: var(--corpmvl-red, #b8171d) !important;
  border-color: var(--corpmvl-red-deep, #9a1218) !important;
}

/* Intención (tipo) y selects del bloque metadata: borde más marcado */
html[data-theme='light'] #ticket-create [data-type='select'] .formkit-input,
html[data-theme='light'] #ticket-create [data-type='treeselect'] .formkit-input,
html[data-theme='light'] form#ticket-create [data-type='select'] .formkit-input,
html[data-theme='light'] form#ticket-create [data-type='treeselect'] .formkit-input {
  border: 1.5px solid #a89898 !important;
  background-color: #ffffff !important;
  min-height: 2.5rem;
}

html[data-theme='light'] #ticket-create [data-attribute-name='tipo'],
html[data-theme='light'] form#ticket-create [data-attribute-name='tipo'],
html[data-theme='light'] #ticket-create [name='tipo'],
html[data-theme='light'] form#ticket-create [name='tipo'] {
  outline: none;
}

html[data-theme='light'] #ticket-create [data-attribute-name='tipo'] .formkit-input,
html[data-theme='light'] #ticket-create [data-attribute-name='tipo'] [class*='select'],
html[data-theme='light'] form#ticket-create [data-attribute-name='tipo'] .formkit-input {
  border: 2px solid var(--corpmvl-red, #b8171d) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--corpmvl-red, #b8171d) 16%, transparent);
}

html[data-theme='light'] #ticket-create [data-attribute-name='tipo'] .formkit-label,
html[data-theme='light'] form#ticket-create [data-attribute-name='tipo'] .formkit-label {
  color: var(--corpmvl-red-deep, #9a1218) !important;
  font-weight: 700 !important;
}

/* Aplicar plantilla: nunca rojo-sobre-rojo al hover */
html[data-theme='light'] .corp-apply-template__btn,
html[data-theme='light'] .corp-apply-template button {
  color: var(--corpmvl-red-deep, #9a1218) !important;
  border: 1px solid color-mix(in srgb, var(--corpmvl-red, #b8171d) 35%, transparent);
  background-color: #ffffff !important;
}

html[data-theme='light'] .corp-apply-template button:hover,
html[data-theme='light'] .corp-apply-template button.hover\:bg-blue-600\!:hover,
html[data-theme='light'] .corp-apply-template button[class*='hover:bg-blue-600']:hover {
  background-color: var(--corpmvl-red, #b8171d) !important;
  color: #ffffff !important;
  border-color: var(--corpmvl-red-deep, #9a1218) !important;
}

html[data-theme='light'] .corp-apply-template button:hover span,
html[data-theme='light'] .corp-apply-template button:hover svg {
  color: #ffffff !important;
}

html[data-theme='light'] .corp-ticket-create-toolbar {
  padding: 0.75rem 1rem;
  border: 1px solid var(--corpmvl-border, #e0d6d6);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

/* Intención: FormKit usa name/id, no siempre data-attribute-name */
html[data-theme='light'] #ticket-create .formkit-outer:has([name='tipo']),
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='tipo']),
html[data-theme='light'] #ticket-create .formkit-outer:has([id*='tipo']),
html[data-theme='light'] form#ticket-create .formkit-outer:has([id*='tipo']) {
  scroll-margin-top: 6rem;
}

html[data-theme='light'] #ticket-create .formkit-outer:has([name='tipo']) .formkit-input,
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='tipo']) .formkit-input,
html[data-theme='light'] #ticket-create .formkit-outer:has([name='tipo']) [role='combobox'],
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='tipo']) [role='combobox'] {
  border: 2px solid var(--corpmvl-red, #b8171d) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--corpmvl-red, #b8171d) 16%, transparent);
}

html[data-theme='light'] #ticket-create .formkit-outer:has([name='tipo']) .formkit-label,
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='tipo']) .formkit-label {
  color: var(--corpmvl-red-deep, #9a1218) !important;
  font-weight: 700 !important;
}

/* FormKit checkbox wrapper: caja visible aunque el input esté oculto */
html[data-theme='light'] #ticket-create [data-type='checkbox'] .formkit-inner,
html[data-theme='light'] form#ticket-create [data-type='checkbox'] .formkit-inner {
  gap: 0.5rem;
}

html[data-theme='light'] #ticket-create [data-type='checkbox'] .formkit-decorator,
html[data-theme='light'] form#ticket-create [data-type='checkbox'] .formkit-decorator,
html[data-theme='light'] #ticket-create [data-type='checkbox'] span[class*='border'],
html[data-theme='light'] form#ticket-create [data-type='checkbox'] span[class*='border'] {
  border: 2px solid #6a5a5a !important;
  background: #fff !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  border-radius: 0.25rem !important;
  display: inline-flex !important;
  opacity: 1 !important;
}


/* Checkboxes desktop: stone-200 es casi invisible sobre blanco */
html[data-theme='light'] #ticket-create [data-type='checkbox'] .formkit-decorator.border-stone-200,
html[data-theme='light'] form#ticket-create [data-type='checkbox'] .formkit-decorator,
html[data-theme='light'] #ticket-create [data-test-id='checkbox-label'] .formkit-decorator {
  border-color: #5c5555 !important;
  border-width: 2px !important;
  color: #5c5555 !important;
  background-color: #ffffff !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
}

html[data-theme='light'] #ticket-create [data-is-checked='true'] .formkit-decorator {
  border-color: var(--corpmvl-red, #b8171d) !important;
  color: var(--corpmvl-red, #b8171d) !important;
  background-color: #fff5f5 !important;
}

/* CORP TOGGLE SWITCH CONTRAST */
/* Boolean OA = FieldToggle (role=switch). OFF usa bg-stone-200 + ring-neutral-100 → invisible en blanco. */
html[data-theme='light'] [data-type='toggle'] button[role='switch'],
html[data-theme='light'] form#ticket-create [data-type='toggle'] button[role='switch'],
html[data-theme='light'] #ticket-create [data-type='toggle'] button[role='switch'],
html[data-theme='light'] main button[role='switch'].bg-stone-200,
html[data-theme='light'] main button[role='switch'] {
  background-color: #b7a8a8 !important;
  box-shadow:
    inset 0 0 0 1px #6f5f5f,
    0 0 0 1px rgba(42, 36, 36, 0.12) !important;
  opacity: 1 !important;
  outline: none;
}

html[data-theme='light'] [data-type='toggle'] button[role='switch'] > div,
html[data-theme='light'] main button[role='switch'] > div {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(42, 36, 36, 0.35) !important;
  border: 1px solid #8a7a7a;
}

/* ON — rojo Matamoros (reemplaza blue-800 Corp) */
html[data-theme='light'] [data-type='toggle'] button[role='switch'][aria-checked='true'],
html[data-theme='light'] form#ticket-create [data-type='toggle'] button[role='switch'][aria-checked='true'],
html[data-theme='light'] #ticket-create [data-type='toggle'] button[role='switch'][aria-checked='true'],
html[data-theme='light'] main button[role='switch'][aria-checked='true'],
html[data-theme='light'] main button[role='switch'].bg-blue-800\!,
html[data-theme='light'] main button[role='switch'][class*='bg-blue-800'] {
  background-color: var(--corpmvl-red, #b8171d) !important;
  box-shadow:
    inset 0 0 0 1px var(--corpmvl-red-deep, #9a1218),
    0 0 0 1px color-mix(in srgb, var(--corpmvl-red, #b8171d) 25%, transparent) !important;
}

html[data-theme='light'] [data-type='toggle'] button[role='switch'][aria-checked='true'] > div,
html[data-theme='light'] main button[role='switch'][aria-checked='true'] > div {
  background-color: #ffffff !important;
  border-color: #ffffff;
  color: var(--corpmvl-red-deep, #9a1218) !important;
}

/* Label del toggle legible */
html[data-theme='light'] [data-type='toggle'] .formkit-label,
html[data-theme='light'] form#ticket-create [data-type='toggle'] .formkit-label {
  color: #3d3d3d !important;
  font-weight: 600;
  opacity: 1 !important;
}

/* CORP FORM SECTIONS P4 */
/* Visual grouping on create + edit: Classification → Softland location → area detail */
html[data-theme='light'] #ticket-create .formkit-outer:has([name='audiencia'])::before,
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='audiencia'])::before,
html[data-theme='light'] [data-test-id='ticket-attributes'] .formkit-outer:has([name='audiencia'])::before {
  content: "Clasificación";
  display: block;
  width: 100%;
  grid-column: 1 / -1;
  margin: 0.75rem 0 0.35rem;
  padding-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corpmvl-red-deep, #9a1218);
  border-bottom: 1px solid color-mix(in srgb, var(--corpmvl-red, #b8171d) 28%, transparent);
}

html[data-theme='light'] #ticket-create .formkit-outer:has([name='marca'])::before,
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='marca'])::before,
html[data-theme='light'] [data-test-id='ticket-attributes'] .formkit-outer:has([name='marca'])::before {
  content: "Ubicación / Softland";
  display: block;
  width: 100%;
  grid-column: 1 / -1;
  margin: 0.9rem 0 0.35rem;
  padding-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corpmvl-red-deep, #9a1218);
  border-bottom: 1px solid color-mix(in srgb, var(--corpmvl-red, #b8171d) 28%, transparent);
}

html[data-theme='light'] #ticket-create .formkit-outer:has([name='ops_motivo'])::before,
html[data-theme='light'] #ticket-create .formkit-outer:has([name='rrhh_motivo'])::before,
html[data-theme='light'] #ticket-create .formkit-outer:has([name='cred_marca'])::before,
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='ops_motivo'])::before,
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='rrhh_motivo'])::before,
html[data-theme='light'] form#ticket-create .formkit-outer:has([name='cred_marca'])::before {
  content: "Detalle del área";
  display: block;
  width: 100%;
  grid-column: 1 / -1;
  margin: 0.9rem 0 0.35rem;
  padding-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--corpmvl-red-deep, #9a1218);
  border-bottom: 1px solid color-mix(in srgb, var(--corpmvl-red, #b8171d) 28%, transparent);
}

/* Softland tree_select: make parent branches readable */
html[data-theme='light'] #ticket-create [data-type='treeselect'] [role='option'][aria-level='1'],
html[data-theme='light'] form#ticket-create [data-type='treeselect'] [role='option'][aria-level='1'] {
  font-weight: 700;
  color: var(--corpmvl-red-deep, #9a1218);
}

/* CORP TREESELECT CONTRAST P4b */
/* Corp remaps hover:bg-blue-* to pale red tint → nearly invisible on white popovers. */
html[data-theme='light'] [data-type='option'],
html[data-theme='light'] [role='listbox'] [role='option'],
html[data-theme='light'] [role='option'] button[data-type='option'] {
  color: #1a1a1a !important;
}

html[data-theme='light'] [role='option']:hover,
html[data-theme='light'] [role='option']:hover button[data-type='option'],
html[data-theme='light'] [role='option'] button[data-type='option']:hover,
html[data-theme='light'] [data-test-id='option-button']:hover,
html[data-theme='light'] .hover\:bg-blue-600:hover[data-type='option'],
html[data-theme='light'] button.hover\:bg-blue-600:hover,
html[data-theme='light'] [class*='hover:bg-blue-600']:hover[data-type='option'],
html[data-theme='light'] [class*='hover:bg-blue-800']:hover {
  background-color: var(--corpmvl-red, #b8171d) !important;
  color: #ffffff !important;
}

html[data-theme='light'] [role='option']:hover span,
html[data-theme='light'] [role='option']:hover svg,
html[data-theme='light'] [data-test-id='option-button']:hover span,
html[data-theme='light'] [data-test-id='option-button']:hover svg,
html[data-theme='light'] [role='option']:hover button,
html[data-theme='light'] [data-test-id='option-button']:hover {
  color: #ffffff !important;
  fill: currentColor;
}

html[data-theme='light'] [role='option'][aria-selected='true'],
html[data-theme='light'] [role='option'][aria-selected='true'] button[data-type='option'] {
  background-color: color-mix(in srgb, var(--corpmvl-red, #b8171d) 18%, #ffffff) !important;
  color: #1a1a1a !important;
  font-weight: 600;
}

/* Parent branches (Cadena / Tiendas / Móviles) */
html[data-theme='light'] [role='listbox'] [role='option'][aria-disabled='true'],
html[data-theme='light'] [data-test-id='option-button'][aria-description] {
  font-weight: 700;
  color: var(--corpmvl-red-deep, #9a1218) !important;
}

html[data-theme='light'] [role='listbox'] {
  background: #ffffff !important;
  border: 1px solid #b8a8a8 !important;
  box-shadow: 0 8px 24px rgba(42, 36, 36, 0.18) !important;
}