/* ===================================================================== temas.css · MiniMarketVip · Motor de temas (SistemasVIP) --------------------------------------------------------------------- Un tema = un juego de valores. La estructura y el JS NO cambian nunca. El tema activo se aplica con (lo hace js/tema.js, que lo lee de la config del tenant / localStorage). Para AGREGAR un tema nuevo: copia un bloque :root[data-tema="x"] de abajo, cambia los valores y sumalo a la lista en tema.js. Nada mas. ===================================================================== */ /* ---------- TOKENS CANONICOS + defaults (tema "bodega") ---------- */ :root{ /* superficies */ --bg:#faf6ee; --surface:#ffffff; --surface-2:#f3ede1; --input:#fbf8f2; --hover:#f6f1e8; /* bordes / texto */ --border:#e6ddcd; --border-focus:var(--brand); --text:#2a1f18; --muted:#756b5e; /* marca */ --brand:#168054; --brand-2:#0f6a44; --on-brand:#ffffff; --accent2:#d64034; /* estados */ --success:#16a34a; --danger:#dc2626; --warning:#b45309; --info:#2563eb; /* forma / tipografia */ --radius:12px; --font-ui:'Inter',system-ui,'Segoe UI',sans-serif; --font-display:'Fraunces',Georgia,serif; /* decor */ --bg-image:radial-gradient(circle at 12% 8%,rgba(214,64,52,.06),transparent 40%),radial-gradient(circle at 90% 95%,rgba(22,128,84,.07),transparent 42%); --card-shadow:0 20px 50px -22px rgba(120,80,40,.35); --stripe:linear-gradient(90deg,#d64034 0 33.3%,#f2a71b 33.3% 66.6%,#168054 66.6%); --ring:0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); --esquema:light; /* ---- ALIAS legacy: nombres que ya usan login / admin / pos ---- No borrar. Mantienen compatibilidad para no tocar el HTML viejo. */ --bg-base:var(--bg); --bg-card:var(--surface); --bg-input:var(--input); --bg-hover:var(--hover); --surface2:var(--surface-2); --text-muted:var(--muted); --accent:var(--brand); --accent-h:var(--brand-2); --accent-hover:var(--brand-2); --sidebar-w:220px; } /* ===================== LOS 5 TEMAS ===================== */ /* 1 · BODEGA — calido, tienda de barrio (claro) */ :root[data-tema="bodega"]{ --bg:#faf6ee; --surface:#fff; --surface-2:#f3ede1; --input:#fbf8f2; --hover:#f6f1e8; --border:#e6ddcd; --text:#2a1f18; --muted:#756b5e; --brand:#168054; --brand-2:#0f6a44; --on-brand:#fff; --accent2:#d64034; --success:#16a34a; --danger:#dc2626; --warning:#b45309; --info:#2563eb; --radius:12px; --font-display:'Fraunces',Georgia,serif; --font-ui:'Inter',system-ui,sans-serif; --bg-image:radial-gradient(circle at 12% 8%,rgba(214,64,52,.06),transparent 40%),radial-gradient(circle at 90% 95%,rgba(22,128,84,.07),transparent 42%); --card-shadow:0 20px 50px -22px rgba(120,80,40,.35); --stripe:linear-gradient(90deg,#d64034 0 33.3%,#f2a71b 33.3% 66.6%,#168054 66.6%); --esquema:light; } /* 2 · CAJA VERDE — POS pro (claro) */ :root[data-tema="caja"]{ --bg:#eef2f0; --surface:#fff; --surface-2:#e8edeb; --input:#f4f6f5; --hover:#eef2f0; --border:#e2e6e4; --text:#12211b; --muted:#616b65; --brand:#0b3d2e; --brand-2:#127a58; --on-brand:#fff; --accent2:#127a58; --success:#16a34a; --danger:#dc2626; --warning:#b45309; --info:#2563eb; --radius:10px; --font-display:'Space Grotesk',system-ui,sans-serif; --font-ui:'Inter',system-ui,sans-serif; --bg-image:none; --card-shadow:0 18px 44px -20px rgba(11,61,46,.4); --stripe:none; --esquema:light; } /* 3 · NOCHE CORAL — oscuro con marca propia (NO el negro/ambar generico) */ :root[data-tema="noche"]{ --bg:#0c141a; --surface:#131e26; --surface-2:#1a2731; --input:#16232c; --hover:#1a2731; --border:#26343f; --text:#e8eef2; --muted:#7d94a3; --brand:#ff6b4a; --brand-2:#ff8a3a; --on-brand:#1a0f08; --accent2:#ffb03a; --success:#22c55e; --danger:#f87171; --warning:#fbbf24; --info:#38bdf8; --radius:16px; --font-display:'Bricolage Grotesque',system-ui,sans-serif; --font-ui:'Inter',system-ui,sans-serif; --bg-image:radial-gradient(circle at 20% 0%,#1b3a4b 0%,transparent 55%),radial-gradient(circle at 100% 100%,#14212b 0%,transparent 50%); --card-shadow:0 24px 60px -24px rgba(0,0,0,.75); --stripe:none; --esquema:dark; } /* 4 · ANDINO — violeta + naranja (claro) */ :root[data-tema="andino"]{ --bg:#f6f4fb; --surface:#fff; --surface-2:#efeaf8; --input:#faf8ff; --hover:#f3eefb; --border:#e7e2f2; --text:#251a3a; --muted:#6e6484; --brand:#6d3bef; --brand-2:#5a2fd0; --on-brand:#fff; --accent2:#ff7a1a; --success:#16a34a; --danger:#dc2626; --warning:#c2410c; --info:#2563eb; --radius:14px; --font-display:'Plus Jakarta Sans',system-ui,sans-serif; --font-ui:'Plus Jakarta Sans',system-ui,sans-serif; --bg-image:radial-gradient(circle at 90% 10%,rgba(255,122,26,.10),transparent 40%),radial-gradient(circle at 0% 100%,rgba(109,59,239,.10),transparent 45%); --card-shadow:0 20px 50px -22px rgba(109,59,239,.32); --stripe:linear-gradient(90deg,#6d3bef,#ff7a1a); --esquema:light; } /* 5 · CLASICO — blanco / azul minimal (claro) */ :root[data-tema="clasico"]{ --bg:#f2f4f7; --surface:#fff; --surface-2:#eaeef3; --input:#f7f9fb; --hover:#eef2f6; --border:#e3e8ee; --text:#1a2433; --muted:#5f6976; --brand:#2563eb; --brand-2:#1d4ed8; --on-brand:#fff; --accent2:#2563eb; --success:#16a34a; --danger:#dc2626; --warning:#b45309; --info:#0891b2; --radius:10px; --font-display:'Inter',system-ui,sans-serif; --font-ui:'Inter',system-ui,sans-serif; --bg-image:none; --card-shadow:0 16px 40px -20px rgba(37,99,235,.28); --stripe:none; --esquema:light; } /* 6 · FIESTA — colorido tipo centro comercial (Real Plaza) (claro) */ :root[data-tema="fiesta"]{ --bg:#fdf2f8; --surface:#ffffff; --surface-2:#fce7f3; --input:#fff5fb; --hover:#fbe6f4; --border:#f5cfe6; --text:#2a1030; --muted:#8a5a7a; --brand:#e11d74; --brand-2:#c2185b; --on-brand:#ffffff; --accent2:#f59e0b; --success:#10b981; --danger:#ef4444; --warning:#f59e0b; --info:#3b82f6; --radius:16px; --font-display:'Baloo 2','Plus Jakarta Sans',system-ui,sans-serif; --font-ui:'Plus Jakarta Sans',system-ui,sans-serif; --bg-image: radial-gradient(circle at 8% 6%,rgba(225,29,116,.12),transparent 38%), radial-gradient(circle at 92% 4%,rgba(245,158,11,.13),transparent 40%), radial-gradient(circle at 100% 100%,rgba(59,130,246,.10),transparent 42%), radial-gradient(circle at 0% 100%,rgba(16,185,129,.10),transparent 42%); --card-shadow:0 20px 50px -22px rgba(225,29,116,.32); --stripe:linear-gradient(90deg,#e11d74 0 20%,#f59e0b 20% 40%,#10b981 40% 60%,#3b82f6 60% 80%,#8b5cf6 80%); --esquema:light; } /* transicion suave al cambiar de tema (solo lo visual) */ html{ transition:background-color .35s ease, color .35s ease; } /* ===== Quitar las flechas de subir/bajar de TODOS los input number (global) ===== */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; }