/* =====================================================================
   TEMAS METALIZADOS · parte del cliente
   Archivo: public/frontend/css/mexico-gsm-temas.css
   Mejora los colores del tema (Admin > Configuración > Apariencia >
   Color del tema) y agrega colores nuevos: Oro, Plata, Bronce, Oro rosa,
   Titanio y Verde neón.
   El encabezado y el pie de página toman un degradado metalizado.
   Tu Header Code se carga después y puede cambiar todo esto.
   ===================================================================== */

/* ---------- Negro grafito ---------- */
html[data-bs-theme="black"] {
    --bs-primary: #7a8594; --bs-primary-rgb: 122,133,148;
    --bs-primary-hover: #9aa4b2; --bs-primary-active: #5f6977;
    --bs-primary-border: #7a8594; --bs-primary-hover-border: #9aa4b2; --bs-primary-active-border: #5f6977;
    --bs-link-color: #b8c1cc; --bs-link-color-rgb: 184,193,204; --bs-link-hover-color: #9aa4b2; --bs-link-hover-color-rgb: 154,164,178;
    --bs-light-primary: rgba(122,133,148, .14);
    --bs-primary-footer-bg: #0f1216; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #07080a, #7a8594);
    --mx-foot-bg: linear-gradient(180deg, #12161b, #07080a);
    --mxt-metal: linear-gradient(115deg, #07080a 0%, #22272e 28%, #4f5763 47%, #22272e 58%, #07080a 100%);
    --mxt-btn: linear-gradient(135deg, #5f6977, #262c34);
    --mxt-glow: rgba(122,133,148, .6);
}

/* ---------- Azul zafiro ---------- */
html[data-bs-theme="blue"] {
    --bs-primary: #2563eb; --bs-primary-rgb: 37,99,235;
    --bs-primary-hover: #3b82f6; --bs-primary-active: #1d4ed8;
    --bs-primary-border: #2563eb; --bs-primary-hover-border: #3b82f6; --bs-primary-active-border: #1d4ed8;
    --bs-link-color: #60a5fa; --bs-link-color-rgb: 96,165,250; --bs-link-hover-color: #3b82f6; --bs-link-hover-color-rgb: 59,130,246;
    --bs-light-primary: rgba(37,99,235, .14);
    --bs-primary-footer-bg: #071a4d; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #03102f, #2563eb);
    --mx-foot-bg: linear-gradient(180deg, #071a4d, #030b22);
    --mxt-metal: linear-gradient(115deg, #03102f 0%, #0b3aa4 28%, #2f6bf0 47%, #0b3aa4 58%, #03102f 100%);
    --mxt-btn: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --mxt-glow: rgba(37,99,235, .6);
}

/* ---------- Turquesa ---------- */
html[data-bs-theme="cyan"] {
    --bs-primary: #06a6c2; --bs-primary-rgb: 6,166,194;
    --bs-primary-hover: #22d3ee; --bs-primary-active: #0e7490;
    --bs-primary-border: #06a6c2; --bs-primary-hover-border: #22d3ee; --bs-primary-active-border: #0e7490;
    --bs-link-color: #22d3ee; --bs-link-color-rgb: 34,211,238; --bs-link-hover-color: #22d3ee; --bs-link-hover-color-rgb: 34,211,238;
    --bs-light-primary: rgba(6,166,194, .14);
    --bs-primary-footer-bg: #053843; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #022a33, #06a6c2);
    --mx-foot-bg: linear-gradient(180deg, #053843, #021a20);
    --mxt-metal: linear-gradient(115deg, #022a33 0%, #076b80 28%, #10b6d4 47%, #076b80 58%, #022a33 100%);
    --mxt-btn: linear-gradient(135deg, #22d3ee, #0e7490);
    --mxt-glow: rgba(6,166,194, .6);
}

/* ---------- Verde esmeralda ---------- */
html[data-bs-theme="green"] {
    --bs-primary: #0ea371; --bs-primary-rgb: 14,163,113;
    --bs-primary-hover: #34d399; --bs-primary-active: #047857;
    --bs-primary-border: #0ea371; --bs-primary-hover-border: #34d399; --bs-primary-active-border: #047857;
    --bs-link-color: #34d399; --bs-link-color-rgb: 52,211,153; --bs-link-hover-color: #34d399; --bs-link-hover-color-rgb: 52,211,153;
    --bs-light-primary: rgba(14,163,113, .14);
    --bs-primary-footer-bg: #053d2a; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #022c1e, #0ea371);
    --mx-foot-bg: linear-gradient(180deg, #053d2a, #021a12);
    --mxt-metal: linear-gradient(115deg, #022c1e 0%, #065f46 28%, #10a774 47%, #065f46 58%, #022c1e 100%);
    --mxt-btn: linear-gradient(135deg, #34d399, #047857);
    --mxt-glow: rgba(14,163,113, .6);
}

/* ---------- Naranja cobre ---------- */
html[data-bs-theme="orange"] {
    --bs-primary: #ea6a0c; --bs-primary-rgb: 234,106,12;
    --bs-primary-hover: #fb923c; --bs-primary-active: #c2410c;
    --bs-primary-border: #ea6a0c; --bs-primary-hover-border: #fb923c; --bs-primary-active-border: #c2410c;
    --bs-link-color: #fb923c; --bs-link-color-rgb: 251,146,60; --bs-link-hover-color: #fb923c; --bs-link-hover-color-rgb: 251,146,60;
    --bs-light-primary: rgba(234,106,12, .14);
    --bs-primary-footer-bg: #431907; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #2e1003, #ea6a0c);
    --mx-foot-bg: linear-gradient(180deg, #431907, #1c0a03);
    --mxt-metal: linear-gradient(115deg, #2e1003 0%, #8a3a07 28%, #e2690f 47%, #8a3a07 58%, #2e1003 100%);
    --mxt-btn: linear-gradient(135deg, #fb923c, #c2410c);
    --mxt-glow: rgba(234,106,12, .6);
}

/* ---------- Morado amatista ---------- */
html[data-bs-theme="purple"] {
    --bs-primary: #8b5cf6; --bs-primary-rgb: 139,92,246;
    --bs-primary-hover: #a78bfa; --bs-primary-active: #7c3aed;
    --bs-primary-border: #8b5cf6; --bs-primary-hover-border: #a78bfa; --bs-primary-active-border: #7c3aed;
    --bs-link-color: #a78bfa; --bs-link-color-rgb: 167,139,250; --bs-link-hover-color: #a78bfa; --bs-link-hover-color-rgb: 167,139,250;
    --bs-light-primary: rgba(139,92,246, .14);
    --bs-primary-footer-bg: #2a0f5e; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #160733, #8b5cf6);
    --mx-foot-bg: linear-gradient(180deg, #2a0f5e, #12052b);
    --mxt-metal: linear-gradient(115deg, #160733 0%, #4c1d95 28%, #7c4dff 47%, #4c1d95 58%, #160733 100%);
    --mxt-btn: linear-gradient(135deg, #a78bfa, #6d28d9);
    --mxt-glow: rgba(139,92,246, .6);
}

/* ---------- Rosa fucsia ---------- */
html[data-bs-theme="pink"] {
    --bs-primary: #ec4899; --bs-primary-rgb: 236,72,153;
    --bs-primary-hover: #f472b6; --bs-primary-active: #db2777;
    --bs-primary-border: #ec4899; --bs-primary-hover-border: #f472b6; --bs-primary-active-border: #db2777;
    --bs-link-color: #f472b6; --bs-link-color-rgb: 244,114,182; --bs-link-hover-color: #f472b6; --bs-link-hover-color-rgb: 244,114,182;
    --bs-light-primary: rgba(236,72,153, .14);
    --bs-primary-footer-bg: #4a0d2a; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #33071c, #ec4899);
    --mx-foot-bg: linear-gradient(180deg, #4a0d2a, #1f0512);
    --mxt-metal: linear-gradient(115deg, #33071c 0%, #9d174d 28%, #e0337f 47%, #9d174d 58%, #33071c 100%);
    --mxt-btn: linear-gradient(135deg, #f472b6, #be185d);
    --mxt-glow: rgba(236,72,153, .6);
}

/* ---------- Rojo rubí ---------- */
html[data-bs-theme="red"] {
    --bs-primary: #e11d48; --bs-primary-rgb: 225,29,72;
    --bs-primary-hover: #f43f5e; --bs-primary-active: #be123c;
    --bs-primary-border: #e11d48; --bs-primary-hover-border: #f43f5e; --bs-primary-active-border: #be123c;
    --bs-link-color: #fb7185; --bs-link-color-rgb: 251,113,133; --bs-link-hover-color: #f43f5e; --bs-link-hover-color-rgb: 244,63,94;
    --bs-light-primary: rgba(225,29,72, .14);
    --bs-primary-footer-bg: #4c0519; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #33040d, #e11d48);
    --mx-foot-bg: linear-gradient(180deg, #4c0519, #1f020a);
    --mxt-metal: linear-gradient(115deg, #33040d 0%, #9f1239 28%, #e11d48 47%, #9f1239 58%, #33040d 100%);
    --mxt-btn: linear-gradient(135deg, #f43f5e, #be123c);
    --mxt-glow: rgba(225,29,72, .6);
}

/* ---------- Jade ---------- */
html[data-bs-theme="teal"] {
    --bs-primary: #0d9e8f; --bs-primary-rgb: 13,158,143;
    --bs-primary-hover: #2dd4bf; --bs-primary-active: #0f766e;
    --bs-primary-border: #0d9e8f; --bs-primary-hover-border: #2dd4bf; --bs-primary-active-border: #0f766e;
    --bs-link-color: #2dd4bf; --bs-link-color-rgb: 45,212,191; --bs-link-hover-color: #2dd4bf; --bs-link-hover-color-rgb: 45,212,191;
    --bs-light-primary: rgba(13,158,143, .14);
    --bs-primary-footer-bg: #063d37; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #022b27, #0d9e8f);
    --mx-foot-bg: linear-gradient(180deg, #063d37, #021a17);
    --mxt-metal: linear-gradient(115deg, #022b27 0%, #0f6b63 28%, #16a596 47%, #0f6b63 58%, #022b27 100%);
    --mxt-btn: linear-gradient(135deg, #2dd4bf, #0f766e);
    --mxt-glow: rgba(13,158,143, .6);
}

/* ---------- Oro ---------- */
html[data-bs-theme="oro"] {
    --bs-primary: #b8860b; --bs-primary-rgb: 184,134,11;
    --bs-primary-hover: #d4a017; --bs-primary-active: #8a6212;
    --bs-primary-border: #b8860b; --bs-primary-hover-border: #d4a017; --bs-primary-active-border: #8a6212;
    --bs-link-color: #f5c542; --bs-link-color-rgb: 245,197,66; --bs-link-hover-color: #d4a017; --bs-link-hover-color-rgb: 212,160,23;
    --bs-light-primary: rgba(184,134,11, .14);
    --bs-primary-footer-bg: #3a2905; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #241803, #b8860b);
    --mx-foot-bg: linear-gradient(180deg, #3a2905, #170f01);
    --mxt-metal: linear-gradient(115deg, #241803 0%, #6e4d0b 28%, #c9971a 47%, #6e4d0b 58%, #241803 100%);
    --mxt-btn: linear-gradient(135deg, #d4a017, #7a5410);
    --mxt-glow: rgba(184,134,11, .6);
}

/* ---------- Plata ---------- */
html[data-bs-theme="plata"] {
    --bs-primary: #64748b; --bs-primary-rgb: 100,116,139;
    --bs-primary-hover: #94a3b8; --bs-primary-active: #475569;
    --bs-primary-border: #64748b; --bs-primary-hover-border: #94a3b8; --bs-primary-active-border: #475569;
    --bs-link-color: #cbd5e1; --bs-link-color-rgb: 203,213,225; --bs-link-hover-color: #94a3b8; --bs-link-hover-color-rgb: 148,163,184;
    --bs-light-primary: rgba(100,116,139, .14);
    --bs-primary-footer-bg: #1f242b; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #121519, #64748b);
    --mx-foot-bg: linear-gradient(180deg, #1f242b, #0c0e11);
    --mxt-metal: linear-gradient(115deg, #121519 0%, #3d4550 28%, #8a95a3 47%, #3d4550 58%, #121519 100%);
    --mxt-btn: linear-gradient(135deg, #94a3b8, #475569);
    --mxt-glow: rgba(100,116,139, .6);
}

/* ---------- Bronce ---------- */
html[data-bs-theme="bronce"] {
    --bs-primary: #cd7f32; --bs-primary-rgb: 205,127,50;
    --bs-primary-hover: #e09a55; --bs-primary-active: #a35f1f;
    --bs-primary-border: #cd7f32; --bs-primary-hover-border: #e09a55; --bs-primary-active-border: #a35f1f;
    --bs-link-color: #e8a86b; --bs-link-color-rgb: 232,168,107; --bs-link-hover-color: #e09a55; --bs-link-hover-color-rgb: 224,154,85;
    --bs-light-primary: rgba(205,127,50, .14);
    --bs-primary-footer-bg: #3a1d09; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #241105, #cd7f32);
    --mx-foot-bg: linear-gradient(180deg, #3a1d09, #170b03);
    --mxt-metal: linear-gradient(115deg, #241105 0%, #6b3a12 28%, #b06c2c 47%, #6b3a12 58%, #241105 100%);
    --mxt-btn: linear-gradient(135deg, #e09a55, #8a4f1a);
    --mxt-glow: rgba(205,127,50, .6);
}

/* ---------- Oro rosa ---------- */
html[data-bs-theme="oro-rosa"] {
    --bs-primary: #c97683; --bs-primary-rgb: 201,118,131;
    --bs-primary-hover: #e79aa3; --bs-primary-active: #a85864;
    --bs-primary-border: #c97683; --bs-primary-hover-border: #e79aa3; --bs-primary-active-border: #a85864;
    --bs-link-color: #f3b6bd; --bs-link-color-rgb: 243,182,189; --bs-link-hover-color: #e79aa3; --bs-link-hover-color-rgb: 231,154,163;
    --bs-light-primary: rgba(201,118,131, .14);
    --bs-primary-footer-bg: #3d1820; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #2a1015, #c97683);
    --mx-foot-bg: linear-gradient(180deg, #3d1820, #18080b);
    --mxt-metal: linear-gradient(115deg, #2a1015 0%, #7a3a45 28%, #c47c86 47%, #7a3a45 58%, #2a1015 100%);
    --mxt-btn: linear-gradient(135deg, #d98c97, #9c4f5b);
    --mxt-glow: rgba(201,118,131, .6);
}

/* ---------- Titanio ---------- */
html[data-bs-theme="titanio"] {
    --bs-primary: #0ea5e9; --bs-primary-rgb: 14,165,233;
    --bs-primary-hover: #38bdf8; --bs-primary-active: #0284c7;
    --bs-primary-border: #0ea5e9; --bs-primary-hover-border: #38bdf8; --bs-primary-active-border: #0284c7;
    --bs-link-color: #7dd3fc; --bs-link-color-rgb: 125,211,252; --bs-link-hover-color: #38bdf8; --bs-link-hover-color-rgb: 56,189,248;
    --bs-light-primary: rgba(14,165,233, .14);
    --bs-primary-footer-bg: #141c28; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #0a0f18, #0ea5e9);
    --mx-foot-bg: linear-gradient(180deg, #141c28, #080b11);
    --mxt-metal: linear-gradient(115deg, #0a0f18 0%, #1f2a3a 28%, #4a5a70 47%, #1f2a3a 58%, #0a0f18 100%);
    --mxt-btn: linear-gradient(135deg, #38bdf8, #0369a1);
    --mxt-glow: rgba(14,165,233, .6);
}

/* ---------- Verde neón ---------- */
html[data-bs-theme="neon"] {
    --bs-primary: #16a34a; --bs-primary-rgb: 22,163,74;
    --bs-primary-hover: #4ade80; --bs-primary-active: #15803d;
    --bs-primary-border: #16a34a; --bs-primary-hover-border: #4ade80; --bs-primary-active-border: #15803d;
    --bs-link-color: #86efac; --bs-link-color-rgb: 134,239,172; --bs-link-hover-color: #4ade80; --bs-link-hover-color-rgb: 74,222,128;
    --bs-light-primary: rgba(22,163,74, .14);
    --bs-primary-footer-bg: #072d14; --bs-primary-footer-color: #d6dbe1; --bs-primary-footer-hover-color: #ffffff;
    --bs-primary-thumb: linear-gradient(135deg, #04170a, #16a34a);
    --mx-foot-bg: linear-gradient(180deg, #072d14, #021008);
    --mxt-metal: linear-gradient(115deg, #04170a 0%, #0f5a26 28%, #22c55e 47%, #0f5a26 58%, #04170a 100%);
    --mxt-btn: linear-gradient(135deg, #4ade80, #15803d);
    --mxt-glow: rgba(22,163,74, .6);
}

/* ---------- reglas comunes (usan los colores de arriba) ---------- */
html[data-bs-theme] body:not(#mxt) .gsm-header {
    background: var(--mxt-metal, var(--bs-primary)) !important;
    background-size: 100% 100% !important;
    box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .08) !important;
}
html[data-bs-theme] body:not(#mxt) .btn-primary {
    --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--bs-primary-hover); --bs-btn-active-bg: var(--bs-primary-active);
    background: var(--mxt-btn, var(--bs-primary)) !important; border-color: transparent !important; color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    box-shadow: 0 10px 22px -12px var(--mxt-glow, rgba(0, 0, 0, .5)), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
html[data-bs-theme] body:not(#mxt) .btn-primary:hover { filter: brightness(1.08); }
html[data-bs-theme] body:not(#mxt) .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); }
html[data-bs-theme] body:not(#mxt) .text-primary { color: var(--bs-link-color, var(--bs-primary)) !important; }
html[data-bs-theme] body:not(#mxt) .bg-primary { background: var(--mxt-btn, var(--bs-primary)) !important; }

/* ---------- IMAGEN POR DEFECTO (servicios, grupos, distribuidores sin foto) ----------
   Ya no sale negra: toma el color del tema elegido (también el personalizado),
   con brillo metálico. Reemplaza a las viejas preset-1.png ... preset-10.png */
html[data-bs-theme] body:not(#mxt) div.text-primary:has(> svg[viewBox="0 0 600 400"]) {
    color: transparent !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .28)), var(--mxt-btn, var(--bs-primary)) !important;
    border-radius: 12px; overflow: hidden;
}
html[data-bs-theme] body:not(#mxt) :is(img[src*="default-thumb.png"], img[src*="/resource/preset-"]) {
    object-position: -9999px -9999px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect x='4' y='4' width='112' height='72' rx='11' fill='none' stroke='%23fefefe' stroke-width='6'/%3E%3Ccircle cx='31' cy='27' r='9' fill='%23fefefe'/%3E%3Cpath d='M9 72 L48 35 L71 57 L86 44 L111 72 Z' fill='%23fefefe'/%3E%3C/svg%3E") center / 42% auto no-repeat, linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .28)), var(--mxt-btn, var(--bs-primary)) !important;
}

/* ---------- TEXTOS DEL COLOR DEL TEMA QUE SIEMPRE SE LEAN ----------
   Con colores personalizados muy oscuros (azul rey, morado, rojo vino...) algunos
   textos quedaban casi del mismo tono que el fondo oscuro (precios del inicio,
   tu nombre en el panel, #número de pedidos y facturas...). Ahora usan la versión
   clara del color del tema (la misma de los enlaces), así se leen con cualquier color. */
html[data-bs-theme] body:not(#mxt) :is(#mxRecent, #mxBest) .mx-svc-price,
html[data-bs-theme] body:not(#mxt) #mxDash .mx-hello h4 .mx-notr,
html[data-bs-theme] body:not(#mxt) #mxDash .mx-hello-role,
html[data-bs-theme] body:not(#mxt) #mxDash .mx-recent-all,
html[data-bs-theme] body:not(#mxt) #mxDash .mx-ototal-ico,
html[data-bs-theme] body:not(#mxt) #mxDash #menu button i,
html[data-bs-theme] body:not(#mxt) #mxOh .mx-id,
html[data-bs-theme] body:not(#mxt) #mxOh .mx-field i,
html[data-bs-theme] body:not(#mxt) #mxInv .mx-inv,
html[data-bs-theme] body:not(#mxt) #mxAb .mx-ab-step strong,
html[data-bs-theme] body:not(#mxt) #mxAb .mx-gw-empty i,
html[data-bs-theme] body:not(#mxt) #mxStm .mx-ref i,
html[data-bs-theme] body:not(#mxt) #gsmAuthModal a[data-switch-view="forgot"],
html[data-bs-theme] body:not(#mxt) #gsmAuthModal .toggle-password:hover,
html[data-bs-theme] body:not(#mxt) #gsmAuthModal #view-register .badge,
html[data-bs-theme] body:not(#mxt) .gsm-dropdown a i {
    color: var(--bs-link-color, rgb(var(--bs-primary-rgb))) !important;
}
html[data-bs-theme] body:not(#mxt) :is(#mxRecent, #mxBest) .mx-svc-price,
html[data-bs-theme] body:not(#mxt) #mxDash .mx-hello-role,
html[data-bs-theme] body:not(#mxt) #mxOh .mx-id,
html[data-bs-theme] body:not(#mxt) #mxInv .mx-inv {
    border-color: rgba(var(--bs-link-color-rgb, var(--bs-primary-rgb)), .4) !important;
}
/* insignia #3 (bronce): texto oscuro para que se lea sobre el bronce */
html[data-bs-theme] body:not(#mxt) :is(#mxRecent, #mxBest) .mx-svc-rank.r3 { color: #431407 !important; }