/* ============================================================
   HUB Supply — overrides locales (heredado de Hub Core)
   Tailwind va precompilado (build-css.md); la marca va en variables.
   Aquí van solo ajustes finos y utilidades que Tailwind no cubre.
   ============================================================ */

/* ─── Marca: kraft por defecto. core/marca.php los pisa con el color del cliente ─── */
:root {
  --brand-50: 251 246 239; --brand-100: 245 233 216; --brand-200: 234 208 174;
  --brand-300: 221 176 126; --brand-400: 204 142 79;  --brand-500: 184 115 47;
  --brand-600: 168 90 27;   --brand-700: 142 72 21;   --brand-800: 120 53 15;
  --brand-900: 94 42 12;    --brand-950: 58 25 7;
  --brand-btn: 120 53 15; --brand-btn-hover: 94 42 12; --brand-on: 255 255 255; --brand-text: 120 53 15;
}
[data-theme="dark"] { --brand-btn: 168 90 27; --brand-btn-hover: 142 72 21; --brand-text: 204 142 79; }

/* ─── Tokens de tema (RGB sin envolver para alpha-value de Tailwind) ─── */
:root,
[data-theme="dark"] {
  --bg-base:        2 6 23;        /* slate-950 */
  --surface-1:     15 23 42;       /* slate-900 */
  --surface-2:     30 41 59;       /* slate-800 */
  --surface-3:     51 65 85;       /* slate-700 */
  --sidebar-bg:    26 35 50;       /* gris medio custom — entre slate-900 y slate-800 */
  --fg-primary:   241 245 249;     /* slate-100 */
  --fg-secondary: 203 213 225;     /* slate-300 */
  --fg-muted:     148 163 184;     /* slate-400 */
  --fg-subtle:    100 116 139;     /* slate-500 */
  --edge:          30 41 59;       /* slate-800 */
  --edge-strong:   51 65 85;       /* slate-700 */
  --kpi-surface:   11 17 32;       /* entre slate-950 y slate-900: ficha KPI más oscura
                                      que surface-1, pero sin fundirse con el fondo */
  --scrollbar-track: #0b1220;
  --scrollbar-thumb: #334155;
  --scrollbar-thumb-hover: #475569;
  --autofill-text: #e2e8f0;
  --autofill-bg:   #1e293b;
}

[data-theme="light"] {
  --bg-base:       248 250 252;    /* slate-50 */
  --surface-1:     255 255 255;    /* white */
  --surface-2:     241 245 249;    /* slate-100 */
  --surface-3:     226 232 240;    /* slate-200 */
  --sidebar-bg:    226 232 240;    /* slate-200 — gris más oscuro contra body slate-50 */
  --fg-primary:     15 23 42;      /* slate-900 — texto principal (sin cambio, ya máximo) */
  --fg-secondary:   30 41 59;      /* slate-800 — bumped desde 700 para más legibilidad */
  --fg-muted:       71 85 105;     /* slate-600 — bumped desde 500 */
  --fg-subtle:     100 116 139;    /* slate-500 — bumped desde 400 (WCAG AA OK) */
  --edge:          226 232 240;    /* slate-200 */
  --edge-strong:   203 213 225;    /* slate-300 */
  --kpi-surface:   255 255 255;    /* en claro la ficha va en blanco: el contraste lo da
                                      el riel de color, no el fondo */
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --autofill-text: #0f172a;
  --autofill-bg:   #ffffff;
}

html, body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb   { background: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--autofill-text);
  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset;
  caret-color: var(--autofill-text);
}

[x-cloak] { display: none !important; }

/* Dashboard cards — Opción A: gradiente por módulo + lift on hover + fade-in staggered. */
.dash-card {
  transition: transform 0.22s ease, box-shadow 0.3s ease, filter 0.2s ease, border-color 0.2s ease;
  animation: dash-card-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -14px var(--dash-shadow, rgba(0, 0, 0, 0.25));
  filter: brightness(1.06) saturate(1.05);
}
@keyframes dash-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash-card { animation: none; }
  .dash-card:hover { transform: none; }
}

/* Override de tipografía dentro de dash-cards: las cards son más compactas
   ahora (p-4 + icon 40px), por lo que reducimos el text-2xl que los widgets
   usan por default a text-xl. Los widgets siguen funcionando standalone fuera
   del dashboard sin perder tamaño. */
.dash-card .text-2xl { font-size: 1.25rem; line-height: 1.75rem; }

/* Mostrar/ocultar elementos según el tema actual.
   Uso: <img data-theme-show="dark"> aparece solo en dark; "light" solo en light. */
[data-theme="dark"]  [data-theme-show="light"] { display: none !important; }
[data-theme="light"] [data-theme-show="dark"]  { display: none !important; }

/* ─── Badges semánticos en light mode ────────────────────────────────────
   Las paletas Tailwind (emerald/rose/amber/sky/violet/indigo) en su shade
   300/400 se diseñaron para texto claro sobre fondo oscuro. En light mode
   quedan ilegibles. Override quirúrgico: oscurecemos los shades 300/400
   cuando data-theme="light" y subimos un poco la opacidad de los fondos
   tinted para mantener presencia. */
/* Texto de acento: el color de la marca es del cliente (core/marca.php), así que el
   tono legible se calcula (--brand-text, >= 4,5:1 contra el fondo de cada tema) en
   lugar de fijar uno. */
.text-brand-400, .text-brand-500,
.hover\:text-brand-400:hover       { color: rgb(var(--brand-text)) !important; }
[data-theme="light"] .text-brand-300,
[data-theme="light"] .hover\:text-brand-300:hover { color: rgb(var(--brand-text)) !important; }
[data-theme="light"] .text-emerald-300 { color: rgb(4 120 87)  !important; } /* emerald-700 */
[data-theme="light"] .text-emerald-400 { color: rgb(5 150 105) !important; } /* emerald-600 */
[data-theme="light"] .text-rose-300    { color: rgb(159 18 57) !important; } /* rose-700 */
[data-theme="light"] .text-rose-400    { color: rgb(190 18 60) !important; } /* rose-700 */
[data-theme="light"] .text-amber-300   { color: rgb(180 83 9)  !important; } /* amber-700 */
[data-theme="light"] .text-amber-400   { color: rgb(217 119 6) !important; } /* amber-600 */
[data-theme="light"] .text-sky-300     { color: rgb(3 105 161) !important; } /* sky-700 */
[data-theme="light"] .text-sky-400     { color: rgb(2 132 199) !important; } /* sky-600 */
[data-theme="light"] .text-violet-300  { color: rgb(91 33 182) !important; } /* violet-700 */
[data-theme="light"] .text-violet-400  { color: rgb(124 58 237) !important; } /* violet-600 */
[data-theme="light"] .text-indigo-300  { color: rgb(67 56 202) !important; } /* indigo-700 */
[data-theme="light"] .text-indigo-400  { color: rgb(79 70 229) !important; } /* indigo-600 */
/* HUB Supply (2026-09-26): el 600 de ámbar, esmeralda y cielo no llega a 4,5:1 sobre
   blanco ni sobre su propio fondo teñido (el ámbar ~2,8:1: "no se lee"). Van al 700. */
[data-theme="light"] .text-amber-400   { color: rgb(180 83 9)  !important; } /* amber-700 */
[data-theme="light"] .text-emerald-400 { color: rgb(4 120 87)  !important; } /* emerald-700 */
[data-theme="light"] .text-sky-400     { color: rgb(3 105 161) !important; } /* sky-700 */
/* Los tonos 100/200 (texto sobre fondo teñido, hechos para el tema oscuro) no tenían
   corrección y en claro quedaban casi blancos: al 800. Y los 300 que faltaban. */
[data-theme="light"] .text-amber-100,
[data-theme="light"] .text-amber-200   { color: rgb(146 64 14) !important; } /* amber-800 */
[data-theme="light"] .text-emerald-200 { color: rgb(6 95 70)   !important; } /* emerald-800 */
[data-theme="light"] .text-rose-200    { color: rgb(159 18 57) !important; } /* rose-800 */
[data-theme="light"] .text-sky-200     { color: rgb(7 89 133)  !important; } /* sky-800 */
[data-theme="light"] .text-violet-200  { color: rgb(91 33 182) !important; } /* violet-800 */
[data-theme="light"] .text-orange-200,
[data-theme="light"] .text-orange-300  { color: rgb(154 52 18) !important; } /* orange-800 */
[data-theme="light"] .text-fuchsia-300 { color: rgb(134 25 143) !important; } /* fuchsia-800 */
[data-theme="light"] .text-purple-300  { color: rgb(107 33 168) !important; } /* purple-800 */
[data-theme="light"] .hover\:text-amber-100:hover  { color: rgb(120 53 15) !important; } /* amber-900 */
[data-theme="light"] .hover\:text-violet-200:hover { color: rgb(76 29 149) !important; } /* violet-900 */

/* Bumps de opacidad de los fondos tinted (de /10 → /20) para que el badge
   "se vea" sobre fondo claro sin perder el efecto pastel. */
[data-theme="light"] .bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.20) !important; }
[data-theme="light"] .bg-rose-500\/10    { background-color: rgb(244 63 94  / 0.20) !important; }
[data-theme="light"] .bg-amber-500\/10   { background-color: rgb(245 158 11 / 0.20) !important; }
[data-theme="light"] .bg-sky-500\/10     { background-color: rgb(14 165 233 / 0.20) !important; }
[data-theme="light"] .bg-violet-500\/10  { background-color: rgb(139 92 246 / 0.20) !important; }
[data-theme="light"] .bg-indigo-500\/10  { background-color: rgb(99 102 241 / 0.20) !important; }
[data-theme="light"] .bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.25) !important; }
[data-theme="light"] .bg-rose-500\/15    { background-color: rgb(244 63 94  / 0.25) !important; }
[data-theme="light"] .bg-amber-500\/15   { background-color: rgb(245 158 11 / 0.25) !important; }
[data-theme="light"] .bg-emerald-500\/20 { background-color: rgb(16 185 129 / 0.30) !important; }
[data-theme="light"] .bg-rose-500\/20    { background-color: rgb(244 63 94  / 0.30) !important; }
[data-theme="light"] .bg-amber-500\/20   { background-color: rgb(245 158 11 / 0.30) !important; }
[data-theme="light"] .bg-sky-500\/20     { background-color: rgb(14 165 233 / 0.30) !important; }
[data-theme="light"] .bg-violet-500\/20  { background-color: rgb(139 92 246 / 0.30) !important; }

/* Botones: CSS plano (no @apply — Tailwind se carga vía CDN runtime que no procesa directivas de build). */
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.btn-primary {
  background-color: rgb(var(--brand-btn));
  color: rgb(var(--brand-on));
  font-weight: 500;
}
.btn-primary:hover { background-color: rgb(var(--brand-btn-hover)); }

/* Botones y chips sólidos que Core escribe como "bg-brand-600 text-white": con un
   color claro del cliente el blanco no se leería, así que toman el rol de botón,
   que ya trae su color de texto (--brand-on). */
.bg-brand-500.text-white, .bg-brand-600.text-white, .bg-brand-700.text-white {
  background-color: rgb(var(--brand-btn)) !important;
  color: rgb(var(--brand-on)) !important;
}
.hover\:bg-brand-600.text-white:hover, .hover\:bg-brand-700.text-white:hover {
  background-color: rgb(var(--brand-btn-hover)) !important;
}

.btn-secondary {
  background-color: rgb(var(--surface-2));
  color: rgb(var(--fg-primary));
}
.btn-secondary:hover { background-color: rgb(var(--surface-3)); }

.btn-danger {
  background-color: #e11d48; /* rose-600 */
  color: #fff;
}
.btn-danger:hover { background-color: #be123c; /* rose-700 */ }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Componentes: campos de formulario y tarjetas ─────────────────────────
   Mismo criterio que los .btn-* de arriba: CSS plano, porque Tailwind entra por
   CDN en runtime y no procesa @apply.

   Motivo: la cadena de clases del input estaba repetida 331 veces y la de la
   tarjeta 165, en 64 variantes distintas que ya habían divergido entre sí.
   Cambiar el estilo de los campos era una edición en 331 lugares.

   Estas clases codifican SOLO la base compartida (fondo, borde, radio, padding).
   Todo lo variable — w-full, font-mono, text-right, pl-10 para el icono de
   búsqueda, p-5/p-4 en las tarjetas — sigue siendo utilidad de Tailwind.

   Van envueltas en :where() a propósito. :where() aporta especificidad CERO, así
   que CUALQUIER utilidad de Tailwind (0,1,0) le gana siempre, sin depender del
   orden de fuente. Esto no es cosmético: 288 campos dependen de que `w-full`,
   `pl-10` (input con icono de búsqueda) o `py-1` pisen la base, y el CDN de
   Tailwind inyecta su <style> en runtime — su posición relativa a este archivo
   no es algo sobre lo que convenga apostar.

   Los estados sí llevan especificidad propia (:focus, :disabled) y por eso
   funcionan normalmente. */

:where(.input, .select, .textarea) {
  padding: 0.5rem 0.75rem;          /* px-3 py-2 */
  border-radius: 0.5rem;            /* rounded-lg */
  background-color: rgb(var(--surface-2));
  color: rgb(var(--fg-primary));
  border: 1px solid rgb(var(--edge-strong));
  outline: none;                    /* el foco de teclado lo pinta :focus-visible más abajo */
  transition: border-color 0.15s ease-in-out;
}

/* Afordancia para quien usa mouse: :focus-visible NO dispara al clickear, así
   que sin esto el campo clickeado no daría ninguna señal de estar activo.
   Reemplaza al `focus:border-brand-500` que traían ~90 de los usos. */
:where(.input, .select, .textarea):focus {
  border-color: rgb(var(--brand-500));
}

:where(.input, .select, .textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

:where(.input, .textarea)::placeholder {
  color: rgb(var(--fg-subtle));
}

:where(.card) {
  background-color: rgb(var(--surface-1));
  border: 1px solid rgb(var(--edge));
  border-radius: 0.75rem;           /* rounded-xl */
}

/* ─── Contenedor de scroll para tablas ──────────────────────────────────────
   Las tablas de facturas / clientes / inventario tienen 8 columnas y en un
   teléfono simplemente desbordan el layout. Esto las hace desplazables en
   horizontal en vez de romper la página.

   OJO al aplicarla: overflow-x crea un contexto de scroll que RECORTA lo
   posicionado en absoluto dentro. No usar en tablas que contengan dropdowns,
   comboboxes o menús de acción (ej. el editor de líneas de factura) — ahí el
   arreglo correcto es la vista de tarjetas en móvil, no el scroll. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* no encadenar el scroll al body al llegar al borde */
}

/* En impresión el scroll no existe: que la tabla fluya completa. */
@media print {
  .table-wrap { overflow-x: visible !important; }
}

/* ─── Foco visible global (accesibilidad / navegación por teclado) ──────────
   Los módulos usan `outline-none` en ~211 líneas para matar el outline feo del
   browser, pero en la mayoría no lo reemplazan por nada: el operador que tabula
   entre 15 campos de una factura no ve dónde está parado.

   Esta regla lo resuelve de forma central, sin tocar los módulos. Usa
   :focus-visible (no :focus) para que el foco NO aparezca al hacer click con el
   mouse — solo al navegar por teclado, que es cuando hace falta.

   `!important` es deliberado: `.outline-none` de Tailwind tiene la misma
   especificidad (0,1,0) y el CDN inyecta su <style> en runtime, así que el
   orden de fuente no es confiable. Mismo criterio que los overrides de badges
   en light mode más arriba. */
:root,
:root { --focus-ring: rgb(var(--brand-text)); }  /* legible en los dos temas (core/marca.php) */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

/* Inputs y selects: además del outline, un halo suave. Sin offset, porque un
   outline separado del borde en campos contiguos de un form se lee como ruido. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

/* Los iconos de acción en tablas van dentro de <a>; sin esto el outline se
   dibuja pegado al glifo y casi no se ve. */
td a:focus-visible,
th a:focus-visible {
  outline-offset: 3px !important;
}

/* El outline no debe imprimirse nunca. */
@media print {
  *:focus-visible { outline: none !important; box-shadow: none !important; }
}

@media print {
  aside, header, footer, .no-print { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; }
}

/* ─── DataTables (Tailwind plugin) override a tokens del proyecto ───────────
   dataTables.tailwindcss.css usa la variante `dark:` de Tailwind basada en
   prefers-color-scheme. Si el usuario tiene Windows en modo dark pero el
   theme del proyecto está forzado a light, los controles salen oscuros.
   Aquí mapeamos a `var(--surface-2)` etc. para respetar [data-theme].
   ============================================================================ */
div.dt-container { color: rgb(var(--fg-primary)); font-size: 0.875rem; }

div.dt-container .dt-search input,
div.dt-container .dt-length select,
div.dt-container input[type="search"],
div.dt-container select {
  background-color: rgb(var(--surface-2));
  color: rgb(var(--fg-primary));
  border: 1px solid rgb(var(--edge-strong));
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  outline: none;
}
div.dt-container input:focus,
div.dt-container select:focus {
  border-color: rgb(var(--brand-600));
  box-shadow: 0 0 0 2px rgb(var(--brand-600) / 0.25);
}

div.dt-container .dt-info,
div.dt-container .dt-length label,
div.dt-container .dt-search label {
  color: rgb(var(--fg-muted));
}

/* Tabla: header + striping basado en tokens (anula el bg-gray-* del plugin) */
div.dt-container table.dataTable thead th,
div.dt-container table.dataTable thead td {
  background-color: rgb(var(--surface-2) / 0.5);
  color: rgb(var(--fg-muted));
  border-bottom: 1px solid rgb(var(--edge-strong));
}
div.dt-container table.dataTable tbody tr {
  background-color: transparent !important;
}
div.dt-container table.dataTable.stripe tbody tr.odd,
div.dt-container table.dataTable.display tbody tr.odd {
  background-color: rgb(var(--surface-2) / 0.35) !important;
}
div.dt-container table.dataTable tbody tr:hover,
div.dt-container table.dataTable.hover tbody tr:hover,
div.dt-container table.dataTable.display tbody tr:hover {
  background-color: rgb(var(--surface-2) / 0.6) !important;
}
div.dt-container table.dataTable tbody td {
  border-top: 1px solid rgb(var(--edge));
}

/* ── Sidebar: hover "premium" con el color de identidad de cada módulo ────────
   El color viene por la variable --mod-color (seteada en nav.php desde el
   module.json). Solo aplica a items NO activos (.is-active mantiene bg-brand).
   Funciona en dark/light y en el modo colapsado (riel de iconos). */
#hubcore-nav .nav-item {
  position: relative;
  transition: background-color .18s ease, color .18s ease;
}
/* Barra de acento a la izquierda (crece en vertical al hacer hover) */
#hubcore-nav .nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 62%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mod-color, #94a3b8);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .18s ease;
  pointer-events: none;
}
/* Tinte de fondo con el propio color del módulo (14%) + texto pleno */
#hubcore-nav .nav-item:not(.is-active):hover {
  background: color-mix(in srgb, var(--mod-color, #94a3b8) 14%, transparent);
  color: rgb(var(--fg-primary));
}
#hubcore-nav .nav-item:not(.is-active):hover::before {
  transform: translateY(-50%) scaleY(1);
}
/* El icono del módulo se aviva un poco en hover */
#hubcore-nav .nav-item:not(.is-active):hover i {
  filter: brightness(1.15) saturate(1.12);
}
/* Fallback si el navegador no soporta color-mix() */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  #hubcore-nav .nav-item:not(.is-active):hover {
    background: rgb(var(--surface-3) / 0.7);
  }
}
/* Respetar preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  #hubcore-nav .nav-item,
  #hubcore-nav .nav-item::before,
  #hubcore-nav .nav-item i { transition: none; }
  #hubcore-nav .nav-item:not(.is-active):hover::before { transform: translateY(-50%) scaleY(1); }
}

/* ─── Módulo Reportes: fichas KPI y mosaicos del catálogo ─────────────────
   Todo esto vive en app.css y NO en clases de Tailwind a propósito: app.css
   se carga aparte y no pasa por el build (ver build-css.md), así que agregar
   un matiz nuevo no obliga a recompilar tailwind.build.css. Con utilidades
   sueltas (bg-emerald-800 y compañía) el color no existiría hasta el próximo
   build y el mosaico saldría gris sin avisar.
   ────────────────────────────────────────────────────────────────────── */

/* Fichas KPI — composición vertical: ícono y etiqueta arriba, valor abajo a
   ancho completo. Apilar le devuelve ~55px de ancho útil al número, que es lo
   que se recortaba en monitores de 1366px. El color identifica la métrica
   desde el riel; el valor va neutro, que contrasta mejor sobre fondo oscuro. */
.kpi-card {
  background: rgb(var(--kpi-surface));
  border: 1px solid rgb(var(--edge));
  border-top: 3px solid var(--kpi-hue);
  border-radius: 10px;
  padding: 12px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.kpi-crown { display: flex; align-items: center; gap: 7px; min-width: 0; }
.kpi-crown > i {
  font-size: 13px; width: 14px; flex-shrink: 0; text-align: center;
  color: var(--kpi-hue-lo);
}
.kpi-label {
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.075em; line-height: 1.35;
  color: rgb(var(--fg-muted)); min-width: 0;
}
.kpi-value {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  color: rgb(var(--fg-primary));
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* `brand` acá es el kraft de HUB Supply, no el azul de Hub Core. */
.kpi-brand   { --kpi-hue: rgb(var(--brand-500)); --kpi-hue-lo: rgb(var(--brand-text)); }
.kpi-emerald { --kpi-hue: #10b981; --kpi-hue-lo: #34d399; }
.kpi-amber   { --kpi-hue: #f59e0b; --kpi-hue-lo: #fbbf24; }
.kpi-sky     { --kpi-hue: #0ea5e9; --kpi-hue-lo: #38bdf8; }
.kpi-rose    { --kpi-hue: #f43f5e; --kpi-hue-lo: #fb7185; }
.kpi-violet  { --kpi-hue: #8b5cf6; --kpi-hue-lo: #a78bfa; }

[data-theme="light"] .kpi-emerald { --kpi-hue-lo: #047857; }
[data-theme="light"] .kpi-amber   { --kpi-hue-lo: #b45309; }
[data-theme="light"] .kpi-sky     { --kpi-hue-lo: #0369a1; }
[data-theme="light"] .kpi-rose    { --kpi-hue-lo: #be123c; }
[data-theme="light"] .kpi-violet  { --kpi-hue-lo: #6d28d9; }

/* Mosaicos del catálogo — color pleno por familia temática: cuerpo en el
   matiz 800, franja del ícono en el 900. El anillo de hover se pinta
   sobreescribiendo --tw-ring-color, así el `ring-1 ring-transparent
   hover:ring-2` que ya trae el tile sigue funcionando sin tocarlo. */
.rt-body   { background: var(--rt-body); }
.rt-stripe { background: var(--rt-stripe); }
.rt:hover  { --tw-ring-color: var(--rt-ring); }

.rt-ventas     { --rt-body: #065f46; --rt-stripe: #064e3b; --rt-ring: #34d399; }
.rt-factura    { --rt-body: #92400e; --rt-stripe: #78350f; --rt-ring: #fbbf24; }
.rt-cobranza   { --rt-body: #9f1239; --rt-stripe: #881337; --rt-ring: #fb7185; }
.rt-inventario { --rt-body: #075985; --rt-stripe: #0c4a6e; --rt-ring: #38bdf8; }
.rt-personas   { --rt-body: #5b21b6; --rt-stripe: #4c1d95; --rt-ring: #a78bfa; }
.rt-sistema    { --rt-body: #115e59; --rt-stripe: #134e4a; --rt-ring: #2dd4bf; }
.rt-sql        { --rt-body: #3730a3; --rt-stripe: #312e81; --rt-ring: #818cf8; }
.rt-template   { --rt-body: #5b21b6; --rt-stripe: #4c1d95; --rt-ring: #a78bfa; }
.rt-off        { --rt-body: #1e293b; --rt-stripe: #0f172a; --rt-ring: transparent; }

/* Logo de HUB Supply (core/layout/_logo.php): el sufijo va SIEMPRE en kraft, aunque
   la distribuidora haya elegido otro color: es la marca del producto, no la suya. */
.logo-supply { color: #78350F; }
[data-theme="dark"] .logo-supply { color: #CC8E4F; }


/* Colores de estado del tablero (rojo vencido, ámbar por vencer, verde al día): se
   escriben en 700 para el tema claro; en el oscuro ese tono no se lee sobre
   slate-900, así que sube a 400. */
[data-theme="dark"] .text-rose-700    { color: rgb(251 113 133) !important; } /* rose-400 */
[data-theme="dark"] .text-amber-700   { color: rgb(251 191 36)  !important; } /* amber-400 */
[data-theme="dark"] .text-emerald-700 { color: rgb(52 211 153)  !important; } /* emerald-400 */