/* TiendaPOS — paleta basada en la guía de infografía (tarjetas blancas redondeadas con pestaña de color sobre fondo gris-azulado).
 * Se carga DESPUÉS de tiendapos.css y solo redefine variables y refuerza el estilo.
 * Colores: amarillo, naranja, café, verde, cian, azul, pizarra, morado y rosa; el azul es el color principal de la marca. */

:root {
  --c1: #f7b52c; --c2: #f26d3d; --c3: #7a6455; --c4: #4cae4f; --c5: #1fb5c9; --c6: #2f6fb0; --c7: #53689a; --c8: #8a4fa8; --c9: #ee4e9a;

  --tp-primary: #2f6fb0; --tp-primary-600: #245a93; --tp-primary-soft: #e3edf8; --tp-accent: #f7b52c;
  --tp-bg: #e9edf2; --tp-surface: #ffffff; --tp-border: #dbe2ea; --tp-text-soft: #5f6c7b;
  --tp-ok: #14909f; --tp-ok-soft: #def4f7;
  --tp-warn: #b86e00; --tp-warn-soft: #fff1d6;
  --tp-bad: #c9302c; --tp-bad-soft: #fde8e7;
  --bs-primary-rgb: 47, 111, 176; --bs-body-color: #1f2a37;
}
[data-bs-theme="dark"] {
  --c1: #ffc857; --c2: #ff8a5c; --c3: #b39a8a; --c4: #6cc86e; --c5: #4fd1e0; --c6: #5b9bdc; --c7: #8aa0d6; --c8: #b784d4; --c9: #ff7ab5;
  --tp-primary: #5b9bdc; --tp-primary-600: #8bb8e8; --tp-primary-soft: #12263f; --tp-accent: #ffc857;
  --tp-bg: #0f141b; --tp-surface: #18202b; --tp-border: #2a3544; --tp-text-soft: #9aa8b8;
  --tp-ok: #4fd1e0; --tp-ok-soft: #0f3138;
  --tp-warn: #ffc857; --tp-warn-soft: #3a2c0a;
  --tp-bad: #ff7b72; --tp-bad-soft: #3d1614;
  --bs-primary-rgb: 91, 155, 220; --bs-body-color: #e6edf5;
}

.btn-primary { --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-color: var(--tp-on-primary, #fff); --bs-btn-hover-color: var(--tp-on-primary, #fff); --bs-btn-active-color: var(--tp-on-primary, #fff); --bs-btn-disabled-color: var(--tp-on-primary, #fff); }
.tp-logo { color: var(--tp-on-primary, #fff); }

/* Color de acento elegido por la persona (se guarda en su navegador). theme-init.js define --tp-user y --tp-on-primary. */
html[data-accent] { --tp-primary: var(--tp-user); --tp-primary-600: color-mix(in srgb, var(--tp-user) 78%, #000); --tp-primary-soft: color-mix(in srgb, var(--tp-user) 13%, var(--tp-surface)); --tp-accent: var(--tp-user); }
html[data-accent][data-bs-theme="dark"] { --tp-primary: color-mix(in srgb, var(--tp-user) 72%, #fff); --tp-primary-600: color-mix(in srgb, var(--tp-user) 55%, #fff); --tp-primary-soft: color-mix(in srgb, var(--tp-user) 24%, var(--tp-surface)); }
/* El acento elegido también tiñe la barra lateral, el logo y el encabezado destacado (ui-soft.css los define con morado por defecto) */
html[data-accent] .tp-hero { background: linear-gradient(120deg, var(--tp-side-b), var(--tp-side-a) 70%, color-mix(in srgb, var(--tp-side-a) 75%, var(--c9))); box-shadow: 0 16px 34px color-mix(in srgb, var(--tp-side-a) 40%, transparent); }
html[data-accent] .tp-logo, html[data-accent] .tp-brand .tp-logo { background: linear-gradient(135deg, var(--tp-side-a), var(--tp-side-b)); color: #fff; box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), .3); }
html[data-accent] .tp-user-chip .tp-avatar { background: linear-gradient(135deg, var(--tp-side-a), var(--tp-side-b)); color: #fff; }
html[data-accent] body { background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--tp-user) 12%, transparent), transparent 60%), var(--tp-bg); background-attachment: fixed; }
.tp-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.tp-swatch { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--tp-surface); box-shadow: 0 0 0 1px var(--tp-border); cursor: pointer; padding: 0; }
.tp-swatch.on { box-shadow: 0 0 0 2px var(--tp-text-soft); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #07121f; --bs-btn-hover-color: #07121f; --bs-btn-active-color: #07121f; --bs-btn-disabled-color: #07121f; }
[data-bs-theme="dark"] .tp-logo { color: #07121f; }

/* Tarjetas: blancas, muy redondeadas y con sombra suave */
.tp-card { border-radius: 1.25rem; border-color: transparent; box-shadow: 0 8px 20px rgba(40, 60, 90, .08), 0 1px 2px rgba(40, 60, 90, .06); }
[data-bs-theme="dark"] .tp-card { border-color: var(--tp-border); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.tp-topbar, .tp-sidebar { border-color: var(--tp-border); }

/* ---- Color por módulo ---- */
body { --tp-mod: var(--tp-primary); }
body[data-mod="pos"], body[data-mod="ventas"] { --tp-mod: var(--c6); }
body[data-mod="caja"] { --tp-mod: var(--c1); }
body[data-mod="productos"] { --tp-mod: var(--c2); }
body[data-mod="inventario"] { --tp-mod: var(--c4); }
body[data-mod="compras"] { --tp-mod: var(--c3); }
body[data-mod="clientes"] { --tp-mod: var(--c5); }
body[data-mod="gastos"] { --tp-mod: var(--c9); }
body[data-mod="tienda"] { --tp-mod: var(--c6); }
body[data-mod="reportes"] { --tp-mod: var(--c8); }
body[data-mod="config"] { --tp-mod: var(--c7); }

.tp-page-head h1 { display: flex; align-items: center; gap: .6rem; }
.tp-page-head h1::before { content: ""; width: 6px; height: 1.35em; border-radius: 4px; background: var(--tp-mod); flex: 0 0 auto; }

/* Menú: cada módulo con el color de su pestaña */
.tp-nav a[data-mod] .bi { color: var(--mod-c, var(--tp-primary)); }
.tp-nav a[data-mod="pos"], .tp-nav a[data-mod="ventas"] { --mod-c: var(--c6); }
.tp-nav a[data-mod="caja"] { --mod-c: var(--c1); }
.tp-nav a[data-mod="productos"] { --mod-c: var(--c2); }
.tp-nav a[data-mod="inventario"] { --mod-c: var(--c4); }
.tp-nav a[data-mod="compras"] { --mod-c: var(--c3); }
.tp-nav a[data-mod="clientes"] { --mod-c: var(--c5); }
.tp-nav a[data-mod="gastos"] { --mod-c: var(--c9); }
.tp-nav a[data-mod="tienda"] { --mod-c: var(--c6); }
.tp-nav a[data-mod="reportes"] { --mod-c: var(--c8); }
.tp-nav a[data-mod="config"] { --mod-c: var(--c7); }
.tp-nav a.active[data-mod] { background: color-mix(in srgb, var(--mod-c, var(--tp-primary)) 15%, transparent); color: inherit; font-weight: 600; }
.tp-nav a.active[data-mod]::after { content: ""; margin-left: auto; width: 6px; height: 18px; border-radius: 4px; background: var(--mod-c, var(--tp-primary)); }

/* Indicadores con pestaña de color en el borde derecho, como en la guía */
.tp-card.tp-kpi { position: relative; overflow: hidden; padding-right: 1.9rem; }
.tp-card.tp-kpi::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: var(--tab, var(--tp-primary)); border-radius: 0 1.25rem 1.25rem 0; }
.row > :nth-child(9n+1) > .tp-card.tp-kpi { --tab: var(--c1); }
.row > :nth-child(9n+2) > .tp-card.tp-kpi { --tab: var(--c2); }
.row > :nth-child(9n+3) > .tp-card.tp-kpi { --tab: var(--c3); }
.row > :nth-child(9n+4) > .tp-card.tp-kpi { --tab: var(--c4); }
.row > :nth-child(9n+5) > .tp-card.tp-kpi { --tab: var(--c5); }
.row > :nth-child(9n+6) > .tp-card.tp-kpi { --tab: var(--c6); }
.row > :nth-child(9n+7) > .tp-card.tp-kpi { --tab: var(--c7); }
.row > :nth-child(9n+8) > .tp-card.tp-kpi { --tab: var(--c8); }
.row > :nth-child(9n+9) > .tp-card.tp-kpi { --tab: var(--c9); }

/* Imágenes de producto */
.tp-thumb { display: inline-grid; place-items: center; border-radius: 12px; object-fit: cover; font-weight: 700; flex: 0 0 auto; background: var(--tp-surface); }
.tp-thumb-ph { user-select: none; }
.tp-fav .tp-thumb { margin-bottom: .45rem; border-radius: 10px; }
.tp-favs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: max-content; }
.tp-results button .tp-thumb { margin-right: .6rem; }

/* Tarjetas de acceso (Configuración, Reportes): pestaña lateral con el color del módulo */
a.tp-card.text-reset, a.tp-card.text-decoration-none { position: relative; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; }
a.tp-card.text-reset:hover, a.tp-card.text-decoration-none:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(40, 60, 90, .14); }
a.tp-card.text-reset::after, a.tp-card.text-decoration-none::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: var(--tp-mod); border-radius: 0 1.25rem 1.25rem 0; }