/* =====================================================================
   MEXICO GSM · PRO  (modo blanco completo + rendimiento)
   Archivo: public/frontend/css/mexico-gsm-pro.css

   Se carga AL FINAL del <head> (después de tu Header Code), así que en
   modo blanco tiene la última palabra sobre el encabezado y el pie.

   1) MODO BLANCO: el encabezado, el menú y los botones de arriba también
      se ponen claros (antes se quedaban negros).
      En modo oscuro no cambia nada.
   2) RENDIMIENTO: animaciones que repintaban la pantalla sin parar ahora
      usan la tarjeta de video (o se quedan quietas), y lo que no se ve
      (pestaña en segundo plano, pie de página lejos) no se dibuja.

   Para cambiar los tonos del modo blanco edita las variables --mxw-*.
   ===================================================================== */

html[data-mx-modo="blanco"] {
    --mxw-bg: #ffffff;            /* fondo del encabezado */
    --mxw-bg-2: #f6f8fb;          /* fondo del pie de página */
    --mxw-pill: #f1f5f9;          /* botones del menú */
    --mxw-pill-hover: #e8eef6;
    --mxw-line: #e2e8f0;          /* bordes */
    --mxw-line-2: #d5dde8;
    --mxw-text: #1e293b;          /* texto */
    --mxw-text-2: #5b6779;        /* texto secundario */
    --mxw-head: #0f172a;          /* títulos */
    --mxw-accent: var(--bs-link-color, var(--bs-primary));
}

/* ---------------------------------------------------------------------
   1. ENCABEZADO EN MODO BLANCO
   --------------------------------------------------------------------- */
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header {
    /* línea de color del tema arriba (toque único) + fondo blanco */
    background:
        var(--mxt-btn, linear-gradient(90deg, var(--bs-primary), var(--bs-primary))) top left / 100% 3px no-repeat,
        linear-gradient(180deg, var(--mxw-bg) 0%, #fbfcfe 100%) !important;
    background-size: 100% 3px, 100% 100% !important;
    border-bottom: 1px solid var(--mxw-line) !important;
    box-shadow: 0 10px 28px -20px rgba(15, 23, 42, .35) !important;
    color: var(--mxw-text) !important;
    /* colores del selector de idioma y del botón sol/luna */
    --mxl-line: var(--mxw-line-2);
    --mxl-bg: #ffffff;
    --mxl-text: var(--mxw-text);
    --mxl-accent: rgb(var(--bs-primary-rgb, 13, 148, 136));
    --mxl-ring: rgba(var(--bs-primary-rgb, 13, 148, 136), .15);
}
/* menú (píldoras) */
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-links > li > a {
    background: var(--mxw-pill) !important;
    border: 1px solid var(--mxw-line) !important;
    color: var(--mxw-text) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-links > li > a i,
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-links > li > a .chevron {
    color: var(--mxw-accent) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-links > li > a:hover,
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-links > li.is-open > a {
    background: var(--mxw-pill-hover) !important;
    border-color: rgba(var(--bs-primary-rgb, 13, 148, 136), .45) !important;
    color: var(--mxw-head) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-links > li.is-active > a {
    background: var(--mxt-btn, var(--bs-primary)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -10px var(--mxt-glow, rgba(0, 0, 0, .4)) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-links > li.is-active > a :is(i, .chevron) { color: #fff !important; }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-arrow {
    background: var(--mxw-pill) !important; color: var(--mxw-text) !important; border: 1px solid var(--mxw-line) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header.mx-2rows .nav-container { border-top-color: var(--mxw-line) !important; }

/* botón sol / luna */
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .mx-modo-web:hover {
    border-color: rgb(var(--bs-primary-rgb, 13, 148, 136)); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 148, 136), .15);
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .mx-modo-web .mx-luna { color: #4338ca; filter: none; }

/* tu nombre + saldo */
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn {
    color: var(--mxw-text) !important;
    background: #ffffff !important;
    border: 1px solid var(--mxw-line-2) !important;
    box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .4) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn :is(span, div, .text-white) {
    color: var(--mxw-text) !important; -webkit-text-fill-color: currentColor; text-shadow: none !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn .customer-name { color: var(--mxw-head) !important; font-weight: 700 !important; }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn .opacity-75 { color: var(--mxw-text-2) !important; }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn > div[style*="IBM Plex Mono"] { color: var(--mxw-accent) !important; font-weight: 700; }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn .rounded-circle { border-color: var(--mxw-line-2) !important; background: var(--mxw-pill); }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn svg :is(path, circle) { stroke: currentColor !important; }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .customer-header-auth > .btn .vr-lg { background-color: var(--mxw-line-2) !important; opacity: 1 !important; }

/* moneda, Entrar / Registrarse, botón de menú (celular) */
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .currency-btn {
    color: var(--mxw-text) !important; background: #fff !important; border: 1px solid var(--mxw-line-2) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .nav-auth .btn:not(.btn-primary) {
    color: var(--mxw-text) !important; border-color: var(--mxw-line-2) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .navbar-toggler {
    color: var(--mxw-text) !important; background: #fff !important; border: 1px solid var(--mxw-line-2) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-header .navbar-toggler:active { background: var(--mxw-pill) !important; }

/* submenús que bajan del encabezado */
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-dropdown {
    background: #fff !important; border: 1px solid var(--mxw-line) !important;
    box-shadow: 0 22px 44px -20px rgba(15, 23, 42, .35) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-dropdown a { color: var(--mxw-text) !important; }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .gsm-dropdown a:hover { background: var(--mxw-pill) !important; }

/* ---------------------------------------------------------------------
   2. PIE DE PÁGINA: sus colores (oscuro y blanco) ahora están dentro del
      propio pie: app/Helpers/client/components/footer1.php
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   3. RENDIMIENTO (aplica en los dos modos)
   --------------------------------------------------------------------- */

/* Brillo del botón "Realizar pedido" y "Pagar": antes movía "left"
   (recalculaba la página 60 veces por segundo). Ahora usa la tarjeta de video. */
html body:not(#mxP1):not(#mxP2) #mxSv .mx-sv-go::after,
html body:not(#mxP1):not(#mxP2) #mxAb .mx-pay::after {
    left: 0 !important; width: 35% !important;
    transform: translateX(-130%);
    animation: mxProSweep 5s ease-in-out infinite !important;
    will-change: transform;
}
@keyframes mxProSweep { 0%, 65% { transform: translateX(-130%); } 92%, 100% { transform: translateX(330%); } }

/* Punto verde "En línea": antes animaba la sombra (repintado continuo). */
html body:not(#mxP1):not(#mxP2) #mxSv .stat-val.text-success::before {
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .22) !important;
}

/* Cintas que se desplazan (tu Header Code): por la tarjeta de video */
:is(.gtbr-track, .tool-track) { will-change: transform; backface-visibility: hidden; }

/* Pestaña en segundo plano o cinta fuera de la pantalla: todo quieto */
html.mx-oculto *, html.mx-oculto *::before, html.mx-oculto *::after,
.mx-fuera, .mx-fuera *, .mx-fuera *::before, .mx-fuera *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    html body:not(#mxP1):not(#mxP2) #mxSv .mx-sv-go::after,
    html body:not(#mxP1):not(#mxP2) #mxAb .mx-pay::after { animation: none !important; display: none; }
}

/* ---------------------------------------------------------------------
   4. MINIATURAS DE SERVICIOS (rediseño)
   Las imágenes de servicios son CUADRADAS (como las de "Somos revendedor
   oficial"). Antes iban en casillas anchas y se recortaban; ahora van en
   casillas cuadradas, más grandes, y se ven completas y nítidas.
   Tamaños: edita los números de --mx-th (lista) y --mx-th-sm (laterales).
   --------------------------------------------------------------------- */
html { --mx-th: 88px; --mx-th-sm: 72px; --mx-th-big: 150px; }
@media (max-width: 767.98px) { html { --mx-th: 76px; --mx-th-sm: 64px; --mx-th-big: 120px; } }

html body:not(#mxP1):not(#mxP2):not(#mxP3) :is(.mx-svc-thumb, .mx-pin-thumb) > :is(img, div) {
    width: var(--mx-th) !important; height: var(--mx-th) !important; min-width: var(--mx-th) !important;
    aspect-ratio: 1 / 1;
    object-fit: cover !important; object-position: center !important;
    border-radius: 14px !important;
    transform: none !important;
    background-color: var(--mx-s3, #161b22) !important;
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .75) !important;
}
/* columnas laterales (relacionados y destacados): un poco más chicas */
html body:not(#mxP1):not(#mxP2):not(#mxP3) :is(#mxRel .mx-svc-thumb, .mx-pin-thumb) > :is(img, div) {
    width: var(--mx-th-sm) !important; height: var(--mx-th-sm) !important; min-width: var(--mx-th-sm) !important;
    border-radius: 12px !important;
}
/* imagen grande dentro de cada servicio */
html body:not(#mxP1):not(#mxP2):not(#mxP3) .mx-sv-img > :is(img, div) {
    width: var(--mx-th-big) !important; height: var(--mx-th-big) !important;
    aspect-ratio: 1 / 1; object-fit: cover !important; object-position: center !important; transform: none !important;
}
/* la tarjeta centra la imagen con el texto */
html body:not(#mxP1) :is(.mx-svc, .mx-pin-svc) { align-items: center !important; }
/* al pasar el mouse: solo brilla el borde (sin zoom ni capas extra: ahorra memoria) */
html body:not(#mxP1) :is(.mx-svc, .mx-pin-svc):hover :is(.mx-svc-thumb, .mx-pin-thumb) > img {
    border-color: rgba(var(--bs-primary-rgb, 13, 148, 136), .6) !important;
}

/* ---------------------------------------------------------------------
   5. TARJETAS DE SERVICIO PREMIUM (agregado)
   Lista de servicios, grupos, recientes, más vendidos y relacionados.
   Solo usa sombras y degradados fijos (nada se anima sin parar).
   --------------------------------------------------------------------- */
html body:not(#mxP1):not(#mxP2) .mx-svc {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--bs-primary-rgb, 13, 148, 136), .10), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) !important;
    background-color: var(--mx-s2, #161b22) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 30px -24px rgba(0, 0, 0, .9) !important;
    gap: 14px !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
html body:not(#mxP1):not(#mxP2) .mx-svc:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(var(--bs-primary-rgb, 13, 148, 136), .55) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 40px -24px rgba(var(--bs-primary-rgb, 13, 148, 136), .85) !important;
}

/* imagen: anillo del tema + brillo de cristal arriba */
html body:not(#mxP1):not(#mxP2):not(#mxP3) .mx-svc-thumb > :is(img, div) {
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 148, 136), .10), 0 12px 22px -12px rgba(0, 0, 0, .85) !important;
}
/* (brillo de cristal quitado: una capa extra por imagen consumía memoria) */
html body:not(#mxP1):not(#mxP2):not(#mxP3) .mx-svc:hover .mx-svc-thumb > :is(img, div) {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 148, 136), .35), 0 14px 26px -12px rgba(var(--bs-primary-rgb, 13, 148, 136), .7) !important;
}

/* título: 2 líneas limpias */
html body:not(#mxP1):not(#mxP2) .mx-svc-title {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: .1px;
}
html body:not(#mxP1):not(#mxP2) .mx-svc:hover .mx-svc-title { color: var(--bs-link-color, inherit) !important; }

/* etiquetas de precio y tiempo */
html body:not(#mxP1):not(#mxP2) .mx-svc-meta { gap: 7px !important; flex-wrap: wrap; }
html body:not(#mxP1):not(#mxP2) :is(.mx-svc-price, .mx-svc-time) {
    border-radius: 9px !important; padding: 4px 9px !important; line-height: 1.2 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html body:not(#mxP1):not(#mxP2) .mx-svc-price { font-weight: 800 !important; letter-spacing: .2px; }

/* flecha */
html body:not(#mxP1):not(#mxP2) .mx-svc-go { transition: transform .22s ease, background-color .22s ease, color .22s ease !important; }
html body:not(#mxP1):not(#mxP2) .mx-svc:hover .mx-svc-go {
    transform: translate(2px, -2px); background: rgb(var(--bs-primary-rgb, 13, 148, 136)) !important; color: #fff !important; border-color: transparent !important;
}

/* modo blanco */
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .mx-svc {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--bs-primary-rgb, 13, 148, 136), .07), transparent 55%) !important;
    background-color: #ffffff !important;
    border-color: #e3e9f1 !important;
    box-shadow: 0 12px 26px -22px rgba(15, 23, 42, .45) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) .mx-svc:hover { box-shadow: 0 20px 34px -22px rgba(var(--bs-primary-rgb, 13, 148, 136), .55) !important; }
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2):not(#mxP3) .mx-svc-thumb > :is(img, div) {
    border-color: rgba(15, 23, 42, .08) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 148, 136), .10), 0 10px 18px -12px rgba(15, 23, 42, .5) !important;
}
html[data-mx-modo="blanco"] body:not(#mxP1):not(#mxP2) :is(.mx-svc-price, .mx-svc-time) { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    html body:not(#mxP1):not(#mxP2) .mx-svc, html body:not(#mxP1):not(#mxP2) .mx-svc:hover { transform: none !important; }
}

/* ---------------------------------------------------------------------
   6. MEMORIA (agregado)
   Las tarjetas que están fuera de la pantalla no se dibujan hasta que
   te acercas (en listas de 200+ servicios ahorra mucha memoria).
   --------------------------------------------------------------------- */
html body:not(#mxP1) :is(#mxSl, #mxRecent, #mxBest) .mx-svc {
    content-visibility: auto;
    contain-intrinsic-size: auto 112px;
}

/* imagen grande dentro de cada servicio: centrada en el celular
   (antes quedaba a la izquierda de un recuadro ancho vacío) */
@media (max-width: 767.98px) {
    html body:not(#mxP1):not(#mxP2) #mxSv .mx-sv-img { width: max-content !important; max-width: 100%; margin-left: auto !important; margin-right: auto !important; align-self: center !important; }
}

/* =====================================================================
   AVISOS (éxito / error) - ESTILO PRO (agregado)
   Tarjeta oscura tipo cristal, más ancha, con franja de color, ícono en
   círculo y barra de tiempo (se cierra sola a los 5 segundos).
   Verde = salió bien · Rojo = error.
   ===================================================================== */
html body .notyf { padding: 18px !important; }
html body .notyf .notyf__toast,
html body .notyf .notyf__toast.toast-250 {
    position: relative; overflow: hidden;
    width: 380px !important; max-width: calc(100vw - 36px) !important;
    padding: 0 !important; border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(23, 28, 38, .97), rgba(12, 15, 21, .97)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .25) !important;
    color: #e6edf5 !important;
}
html body .notyf .notyf__ripple { display: none !important; }
/* franja de color */
html body .notyf .notyf__toast::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2;
    background: var(--mx-toast, #22c55e);
}
html body .notyf .notyf__toast--success { --mx-toast: #22c55e; --mx-toast-rgb: 34, 197, 94; }
html body .notyf .notyf__toast--error,
html body .notyf .notyf__toast:has(.notyf__icon--error) { --mx-toast: #ef4444; --mx-toast-rgb: 239, 68, 68; }
/* brillo suave del color del aviso */
html body .notyf .notyf__toast { background-image:
    radial-gradient(140% 120% at 0% 50%, rgba(var(--mx-toast-rgb, 34, 197, 94), .16), transparent 55%),
    linear-gradient(135deg, rgba(23, 28, 38, .97), rgba(12, 15, 21, .97)) !important; }
/* barra de tiempo */
html body .notyf .notyf__toast::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
    background: var(--mx-toast, #22c55e); opacity: .85; transform-origin: left center;
    animation: mxToastTime 5s linear forwards;
}
@keyframes mxToastTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html body .notyf .notyf__wrapper {
    position: relative; z-index: 1; display: flex !important; align-items: center !important; gap: 14px;
    padding: 16px 18px 18px 20px !important; border-radius: 0 !important;
}
/* ícono en círculo */
html body .notyf .notyf__icon {
    flex: 0 0 38px; width: 38px !important; height: 38px !important; margin: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(var(--mx-toast-rgb, 34, 197, 94), .16) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--mx-toast-rgb, 34, 197, 94), .45);
}
html body .notyf .notyf__icon > i {
    background: var(--mx-toast, #22c55e) !important; width: 22px !important; height: 22px !important; border-radius: 50% !important;
}
html body .notyf .notyf__icon--success::before, html body .notyf .notyf__icon--success::after,
html body .notyf .notyf__icon--error::before, html body .notyf .notyf__icon--error::after { background: #fff !important; }
/* texto */
html body .notyf .notyf__message {
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.45 !important;
    color: #f1f5f9 !important; word-break: break-word; letter-spacing: .1px;
}
@media (max-width: 575.98px) {
    html body .notyf { padding: 12px !important; }
    html body .notyf .notyf__toast, html body .notyf .notyf__toast.toast-250 { width: calc(100vw - 24px) !important; }
}
@media (prefers-reduced-motion: reduce) { html body .notyf .notyf__toast::after { animation: none; } }