/* StockClaro — Paletas de colores, elegibles aparte del diseño y de la barra (data-colores en <body>).
   Cada paleta redefine las variables de los tres diseños: 1 (--a-*), 2 «Fresco» (--f-*) y 3 «Noche Pro» (--n-*). Sin data-colores = la paleta propia del diseño. */

/* Océano: azules y cian */
body[data-colores="oceano"] { --a-primario: #0284c7; --a-oscuro: #0c2d48; --a-oscuro2: #0f4c75; --a-acento: #06b6d4;
  --f-indigo: #0ea5e9; --f-violeta: #0284c7; --f-rosa: #06b6d4; --f-grad: linear-gradient(120deg, #0ea5e9, #0284c7 55%, #06b6d4); --f-brillo: rgba(2, 132, 199, .32); --f-anillo: rgba(2, 132, 199, .15); --f-suave: #e8f6fd; --f-borde: rgba(2, 132, 199, .14);
  --n-cian: #38bdf8; --n-violeta: #60a5fa; --n-grad: linear-gradient(120deg, #38bdf8, #6366f1); --n-brillo: rgba(56, 189, 248, .38); --n-anillo: rgba(56, 189, 248, .16); }
/* Menta: verdes frescos */
body[data-colores="menta"] { --a-primario: #059669; --a-oscuro: #064e3b; --a-oscuro2: #065f46; --a-acento: #34d399;
  --f-indigo: #10b981; --f-violeta: #059669; --f-rosa: #14b8a6; --f-grad: linear-gradient(120deg, #10b981, #059669 55%, #14b8a6); --f-brillo: rgba(5, 150, 105, .32); --f-anillo: rgba(5, 150, 105, .15); --f-suave: #e7f8f1; --f-borde: rgba(5, 150, 105, .14);
  --n-cian: #34d399; --n-violeta: #a3e635; --n-grad: linear-gradient(120deg, #34d399, #a3e635); --n-brillo: rgba(52, 211, 153, .38); --n-anillo: rgba(52, 211, 153, .16); }
/* Atardecer: naranjos y coral */
body[data-colores="atardecer"] { --a-primario: #ea580c; --a-oscuro: #431407; --a-oscuro2: #7c2d12; --a-acento: #f59e0b;
  --f-indigo: #f97316; --f-violeta: #ea580c; --f-rosa: #f43f5e; --f-grad: linear-gradient(120deg, #f59e0b, #f97316 50%, #f43f5e); --f-brillo: rgba(234, 88, 12, .32); --f-anillo: rgba(234, 88, 12, .15); --f-suave: #fff1e6; --f-borde: rgba(234, 88, 12, .14);
  --n-cian: #fb923c; --n-violeta: #f472b6; --n-grad: linear-gradient(120deg, #fbbf24, #f472b6); --n-brillo: rgba(251, 146, 60, .38); --n-anillo: rgba(251, 146, 60, .16); }
/* Frambuesa: rosados y fucsia */
body[data-colores="frambuesa"] { --a-primario: #db2777; --a-oscuro: #500724; --a-oscuro2: #831843; --a-acento: #f472b6;
  --f-indigo: #ec4899; --f-violeta: #db2777; --f-rosa: #f43f5e; --f-grad: linear-gradient(120deg, #a855f7, #ec4899 55%, #f43f5e); --f-brillo: rgba(219, 39, 119, .3); --f-anillo: rgba(219, 39, 119, .15); --f-suave: #fdeef6; --f-borde: rgba(219, 39, 119, .14);
  --n-cian: #f472b6; --n-violeta: #c084fc; --n-grad: linear-gradient(120deg, #f472b6, #c084fc); --n-brillo: rgba(244, 114, 182, .38); --n-anillo: rgba(244, 114, 182, .16); }
/* Grafito: sobrio, grises con acento azul */
body[data-colores="grafito"] { --a-primario: #334155; --a-oscuro: #0f172a; --a-oscuro2: #1e293b; --a-acento: #38bdf8;
  --f-indigo: #475569; --f-violeta: #334155; --f-rosa: #0ea5e9; --f-grad: linear-gradient(120deg, #334155, #475569 55%, #0ea5e9); --f-brillo: rgba(51, 65, 85, .3); --f-anillo: rgba(51, 65, 85, .15); --f-suave: #eef2f6; --f-borde: rgba(51, 65, 85, .14);
  --n-cian: #e2e8f0; --n-violeta: #94a3b8; --n-grad: linear-gradient(120deg, #e2e8f0, #94a3b8); --n-brillo: rgba(226, 232, 240, .3); --n-anillo: rgba(226, 232, 240, .14); }

/* Diseño 1 (clásico) con otra paleta: barra, botones y acentos */
body[data-diseno="1"][data-colores] .bg-app { background: linear-gradient(135deg, var(--a-oscuro), var(--a-oscuro2)) !important; }
body[data-diseno="1"][data-colores] .btn-primary { --bs-btn-bg: var(--a-primario); --bs-btn-border-color: var(--a-primario); --bs-btn-hover-bg: var(--a-oscuro2); --bs-btn-hover-border-color: var(--a-oscuro2); --bs-btn-active-bg: var(--a-oscuro); }
body[data-diseno="1"][data-colores] .btn-outline-primary { --bs-btn-color: var(--a-primario); --bs-btn-border-color: var(--a-primario); --bs-btn-hover-bg: var(--a-primario); --bs-btn-hover-border-color: var(--a-primario); }
body[data-diseno="1"][data-colores] .text-primary { color: var(--a-primario) !important; }
body[data-diseno="1"][data-colores] .nav-pills .nav-link.active { background: var(--a-primario); }
body[data-diseno="1"][data-colores] .navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--a-acento); }
body[data-diseno="1"][data-colores] .tabbar a.active { color: var(--a-primario); }
body[data-diseno="1"][data-colores] .form-control:focus, body[data-diseno="1"][data-colores] .form-select:focus { border-color: var(--a-primario); }
body[data-diseno="1"][data-colores] .text-acento { color: var(--a-acento) !important; }
/* Diseño 2: el fondo acompaña a la paleta */
body[data-diseno="2"][data-colores] { background-color: var(--f-suave); background-image: radial-gradient(900px 500px at 100% -10%, var(--f-anillo), transparent 60%), radial-gradient(800px 500px at -10% 10%, var(--f-anillo), transparent 60%); }

/* Muestras del selector */
.mc-col { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #d9dbe8; cursor: pointer; }
.mc-col.activo { box-shadow: 0 0 0 2px var(--a-primario, #4f46e5); }