/* FMLABTECH THEME OVERLAY (Navy + Orange · Rajdhani/Inter) * Activado con en header.php. * Reescribe colores/fuentes sobre style.css sin tocar el layout PHP. */ .theme-fmlab{ --fm-navy: #0a1628; --fm-navy-mid: #0f2040; --fm-navy-soft: #162d54; --fm-orange: #e84c00; --fm-orange-lt: #ff6a1f; --fm-white: #ffffff; --fm-offwhite: #f4f6f9; --fm-gray: #8a9ab5; --fm-gray-lt: #d0d8e8; --fm-text: #1a2640; --fm-text-mid: #4a5a70; --fm-line: #d0d8e8; --fm-success: #2e7d32; --fm-danger: #e84c00; --fm-font-h: 'Rajdhani', 'Segoe UI', system-ui, sans-serif; --fm-font: 'Inter', 'Segoe UI', system-ui, sans-serif; background: var(--fm-offwhite) !important; color: var(--fm-text); font-family: var(--fm-font); min-height:100vh; } .theme-fmlab *{ font-family: inherit; } .theme-fmlab h1, .theme-fmlab h2, .theme-fmlab h3, .theme-fmlab h4, .theme-fmlab h5, .theme-fmlab .hero h1, .theme-fmlab .page-head h1, .theme-fmlab .brand-text{ font-family: var(--fm-font-h); letter-spacing:.02em; color: var(--fm-text); font-weight:700; line-height:1.15; } .theme-fmlab em{ font-style:normal; color: var(--fm-orange); } .theme-fmlab .muted{ color: var(--fm-gray) !important; } .theme-fmlab p, .theme-fmlab li, .theme-fmlab label, .theme-fmlab td, .theme-fmlab th{ color: var(--fm-text); } .theme-fmlab a{ color: var(--fm-orange); text-decoration:none; } .theme-fmlab a:hover{ color: var(--fm-orange-lt); } /* ============================================================ Floaters globales (inyectados por header.php) ============================================================ */ .fm-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--fm-orange), var(--fm-orange-lt)); z-index:9999; box-shadow:0 0 12px rgba(232,76,0,.55); transition: width .12s linear; } .fm-cursor{ width:10px; height:10px; background:var(--fm-orange); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:opacity .2s; } .fm-cursor-ring{ width:34px; height:34px; border:2px solid var(--fm-orange); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9997; opacity:.6; transform:translate(-50%,-50%); transition:width .25s, height .25s, border-color .25s, opacity .25s; } .fm-cursor-ring.is-hover{ width:54px; height:54px; border-color: var(--fm-orange-lt); opacity:1; } @media (hover:none){ .fm-cursor, .fm-cursor-ring{ display:none; } } .fm-back-top{ position:fixed; right:20px; bottom:90px; width:42px; height:42px; background:var(--fm-orange); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); z-index:500; opacity:0; transform:translateY(16px); pointer-events:none; transition: opacity .25s, transform .25s, background .25s; } .fm-back-top.is-show{ opacity:1; transform:translateY(0); pointer-events:auto; } .fm-back-top:hover{ background: var(--fm-orange-lt); } /* ============================================================ Top bars (público y trabajador) — fondo blanco ============================================================ */ .theme-fmlab .topbar, .theme-fmlab .login-topbar{ position:fixed !important; top:0; left:0; right:0; z-index:200 !important; height:70px; padding:0 !important; background: #ffffff !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom:2px solid var(--fm-orange) !important; border-radius:0 !important; box-shadow: 0 4px 18px rgba(15,32,64,.08) !important; } .theme-fmlab .topbar .container.nav{ max-width:1400px; height:100%; padding:0 2rem !important; background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; -webkit-backdrop-filter:none; backdrop-filter:none; } .theme-fmlab main.container, .theme-fmlab .login-screen{ padding-top: 90px !important; } /* Anular fondos navy/oscuros remanentes del menu */ .theme-fmlab .login-topbar__nav a.active, .theme-fmlab .login-topbar__nav a.active:hover, .theme-fmlab .login-topbar__nav a:hover, .theme-fmlab .login-topbar__nav a:focus, .theme-fmlab .login-topbar__nav a:focus-visible, .theme-fmlab .main-nav a.active, .theme-fmlab .main-nav a:hover, .theme-fmlab .main-nav a:focus, .theme-fmlab .main-nav a:focus-visible{ background: transparent !important; color: var(--fm-orange) !important; filter:none !important; box-shadow:none !important; } /* Botones .btn dentro del hero / contenido: nunca con fondo negro al seleccionar */ .theme-fmlab .btn:focus, .theme-fmlab .btn:focus-visible, .theme-fmlab .btn:active, .theme-fmlab .btn.active{ background: var(--fm-orange) !important; color: var(--fm-white) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(232,76,0,.25) !important; filter: none !important; } .theme-fmlab .btn.ghost:focus, .theme-fmlab .btn.ghost:focus-visible, .theme-fmlab .btn.ghost:active{ background: rgba(232,76,0,.10) !important; color: var(--fm-orange) !important; border-color: var(--fm-orange) !important; box-shadow: 0 0 0 3px rgba(232,76,0,.18) !important; } .theme-fmlab .login-topbar__nav a.cta.active, .theme-fmlab .login-topbar__nav a.cta.active:hover{ background: var(--fm-orange) !important; color: var(--fm-white) !important; } .theme-fmlab .shopmenu__trigger:hover{ background: transparent !important; transform:none !important; } .theme-fmlab .shopmenu__item:focus-within > .shopmenu__l1-link, .theme-fmlab .shopmenu__item--l2:focus-within > a, .theme-fmlab .shopmenu__l3 li a:hover{ background: rgba(232,76,0,.08) !important; color: var(--fm-orange) !important; } .theme-fmlab .shopmenu__l1::-webkit-scrollbar-thumb, .theme-fmlab .shopmenu__l2::-webkit-scrollbar-thumb, .theme-fmlab .shopmenu__l3::-webkit-scrollbar-thumb{ background: rgba(232,76,0,.25) !important; } /* Centrar el menu — los enlaces ocupan el espacio entre marca y CTAs */ .theme-fmlab .login-topbar{ display:flex !important; align-items:center; gap:1.25rem; padding:0 1.75rem !important; } .theme-fmlab .login-topbar__nav{ flex:1 1 auto; justify-content:center !important; gap:1.1rem !important; flex-wrap:wrap; } .theme-fmlab .login-topbar__nav > a, .theme-fmlab .login-topbar__nav > .shopmenu{ margin:0 !important; } .theme-fmlab .login-topbar__nav > a:not(.cta):not(.nav-cart):not(.cart-link){ padding:.55rem 1.1rem !important; } /* Pequeño separador visual entre los enlaces de texto y el grupo de botones */ .theme-fmlab .login-topbar__nav > .shopmenu + a:not(.cta):not(.nav-cart):not(.cart-link){ margin-left:.25rem !important; } /* El carrito (CTA naranja idéntico a Clientes/Asesores) empuja al grupo derecho hacia el borde */ .theme-fmlab .login-topbar__nav > .cart-cta, .theme-fmlab .login-topbar__nav > .nav-cart, .theme-fmlab .login-topbar__nav > .cart-link{ margin-left:auto !important; } .theme-fmlab .login-topbar__nav > .cta{ margin-left:.5rem !important; } .theme-fmlab .login-topbar__nav > .cart-cta + .cta{ margin-left:.5rem !important; } @media(max-width:1100px){ .theme-fmlab .login-topbar__nav{ gap:.85rem !important; } .theme-fmlab .login-topbar__nav > a:not(.cta):not(.nav-cart):not(.cart-link){ padding:.5rem .8rem !important; } } @media(max-width:780px){ .theme-fmlab .login-topbar{ flex-wrap:wrap; padding:0 1rem !important; } .theme-fmlab .login-topbar__nav{ flex:1 1 100%; justify-content:stretch !important; flex-direction:column; gap:.35rem !important; background:#ffffff !important; border-top:1px solid var(--fm-line) !important; padding:.6rem 0 !important; } .theme-fmlab .login-topbar__nav > a, .theme-fmlab .login-topbar__nav > .shopmenu, .theme-fmlab .login-topbar__nav > .cta, .theme-fmlab .login-topbar__nav > .nav-cart, .theme-fmlab .login-topbar__nav > .cart-link{ margin:0 !important; } } /* Brand y logo en blanco → texto navy */ .theme-fmlab .brand, .theme-fmlab .brand-text, .theme-fmlab .login-topbar__brand, .theme-fmlab .login-topbar__brand.logo{ display:flex !important; align-items:center; gap:.5rem; color: var(--fm-navy) !important; font-family: var(--fm-font-h); font-size:1.4rem; font-weight:700; letter-spacing:.1em; text-decoration:none; } .theme-fmlab .login-topbar__brand img{ height:40px; width:auto; display:block; } .theme-fmlab .login-topbar__brand .logo-text{ font-family: var(--fm-font-h); font-weight:700; letter-spacing:.1em; } .theme-fmlab .brand-mark, .theme-fmlab .logo-icon{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; background: var(--fm-orange) !important; color: var(--fm-white) !important; font-family: var(--fm-font-h); font-weight:700; font-size:.7rem; letter-spacing:.04em; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); border-radius:0 !important; } /* Hamburguesa de 3 barras animada (móvil) */ .theme-fmlab .login-topbar__toggle.hamburger{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background: rgba(232,76,0,.08) !important; border:1px solid rgba(232,76,0,.4) !important; border-radius:3px !important; cursor:pointer; padding:8px; font-size:0; color:transparent; } .theme-fmlab .login-topbar__toggle.hamburger .bar{ display:block; width:22px; height:2px; background: var(--fm-navy); border-radius:2px; transition: transform .35s ease, opacity .25s ease, background .3s; transform-origin:center; } .theme-fmlab .login-topbar__toggle.hamburger.open .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); background: var(--fm-orange); } .theme-fmlab .login-topbar__toggle.hamburger.open .bar:nth-child(2){ opacity:0; transform: scaleX(0); } .theme-fmlab .login-topbar__toggle.hamburger.open .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); background: var(--fm-orange); } @media (max-width:780px){ .theme-fmlab .login-topbar__toggle.hamburger{ display:flex !important; } .theme-fmlab .login-topbar__brand img{ height:32px; } .theme-fmlab .logo-icon{ width:28px; height:28px; font-size:.62rem; } } /* Links de navegación → navy con subrayado naranja */ .theme-fmlab .main-nav a, .theme-fmlab .login-topbar__nav a{ color: var(--fm-navy) !important; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:600; padding:.5rem .9rem; border-radius:0 !important; position:relative; } .theme-fmlab .main-nav a::after, .theme-fmlab .login-topbar__nav a:not(.cta):not(.shopmenu__trigger):not(.cart-link)::after{ content:""; position:absolute; left:.9rem; right:.9rem; bottom:-2px; height:2px; background: var(--fm-orange); transform:scaleX(0); transform-origin:center; transition: transform .3s cubic-bezier(.25,.46,.45,.94); } .theme-fmlab .main-nav a:hover, .theme-fmlab .login-topbar__nav a:hover{ background:transparent !important; color: var(--fm-orange) !important; } .theme-fmlab .main-nav a:hover::after, .theme-fmlab .main-nav a.active::after, .theme-fmlab .login-topbar__nav a:hover::after, .theme-fmlab .login-topbar__nav a.active::after{ transform:scaleX(1); } /* Pill outline (poco usado) */ .theme-fmlab .nav-pill, .theme-fmlab .nav-pill.outline{ background: rgba(232,76,0,.08) !important; color: var(--fm-orange) !important; border:1px solid rgba(232,76,0,.4) !important; border-radius:2px !important; padding:.4rem .9rem !important; letter-spacing:.13em; } .theme-fmlab .nav-pill:hover{ background: rgba(232,76,0,.18) !important; color: var(--fm-orange-lt) !important; transform:none !important; } /* CTAs (Clientes / Asesores / Admin) — naranja sólido sobre blanco */ .theme-fmlab .cta{ background: var(--fm-orange) !important; color: var(--fm-white) !important; border:none !important; padding:.55rem 1.2rem !important; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%); border-radius:0 !important; transition: background .25s, transform .2s; } .theme-fmlab .cta:hover{ background: var(--fm-orange-lt) !important; transform: scale(1.04); color:#fff !important; } .theme-fmlab .cta::after{ display:none !important; } /* Carrito — botón idéntico a los CTAs (Clientes/Asesores/Admin) */ .theme-fmlab .nav-cart, .theme-fmlab .cart-link, .theme-fmlab .login-topbar__nav a.nav-cart, .theme-fmlab .login-topbar__nav a.cart-link{ display:inline-flex !important; align-items:center; gap:.45rem; align-self:center; background: var(--fm-orange) !important; color: var(--fm-white) !important; border:none !important; padding:.55rem 1.2rem !important; margin:0; font-family: var(--fm-font) !important; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; line-height:1; clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%); border-radius:0 !important; text-decoration:none !important; transition: background .25s, transform .2s, box-shadow .25s; cursor:pointer; flex-shrink:0; white-space:nowrap; box-sizing:border-box; } .theme-fmlab .nav-cart:hover, .theme-fmlab .cart-link:hover{ background: var(--fm-orange-lt) !important; color:#fff !important; transform: scale(1.04); box-shadow:0 6px 18px rgba(232,76,0,.32); } .theme-fmlab .nav-cart::after, .theme-fmlab .cart-link::after{ display:none !important; content:none !important; } .theme-fmlab .nav-cart svg, .theme-fmlab .cart-link svg{ flex-shrink:0; width:14px; height:14px; } .theme-fmlab .cart-link__badge{ background:#fff !important; color: var(--fm-orange) !important; font-weight:700; font-size:.65rem; padding:1px 6px; border-radius:999px; margin-left:2px; } /* Mobile: el carrito conserva su forma de botón (no se hereda el padding del menú abierto) */ @media (max-width:780px){ .theme-fmlab .login-topbar__nav a.nav-cart, .theme-fmlab .login-topbar__nav a.cart-link{ height:auto; padding:.8rem 1.2rem !important; font-size:.78rem; justify-content:center; margin:.4rem 0 0; } } /* Toggle hamburguesa del login-topbar */ .theme-fmlab .login-topbar__toggle{ color: var(--fm-navy) !important; background: transparent !important; border:1px solid var(--fm-line) !important; } /* Dropdown Tienda — abre sobre el header blanco */ .theme-fmlab .shopmenu__trigger{ color: var(--fm-navy) !important; } .theme-fmlab .shopmenu__trigger:hover{ color: var(--fm-orange) !important; } .theme-fmlab .shopmenu__panel, .theme-fmlab .shopmenu__l2, .theme-fmlab .shopmenu__l3{ background: #ffffff !important; border:1px solid var(--fm-line) !important; box-shadow:0 14px 36px rgba(15,32,64,.18) !important; border-radius:2px !important; } .theme-fmlab .shopmenu__l1-link, .theme-fmlab .shopmenu__l2 a, .theme-fmlab .shopmenu__l3 a, .theme-fmlab .shopmenu__l2-head a{ color: var(--fm-navy) !important; } .theme-fmlab .shopmenu__l1-link:hover, .theme-fmlab .shopmenu__l2 a:hover, .theme-fmlab .shopmenu__l3 a:hover{ background: rgba(232,76,0,.08) !important; color: var(--fm-orange) !important; } .theme-fmlab .shopmenu__l2-head a{ color: var(--fm-orange) !important; font-weight:700; } .theme-fmlab .shopmenu__arrow, .theme-fmlab .shopmenu__chevron{ color: var(--fm-gray) !important; } /* ============================================================ Hero ============================================================ */ .theme-fmlab .hero{ background: var(--fm-navy) !important; -webkit-backdrop-filter:none; backdrop-filter:none; color: var(--fm-white) !important; border:none !important; border-radius:0 !important; padding: 3rem 2.5rem !important; position:relative; overflow:hidden; } .theme-fmlab .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(rgba(232,76,0,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(232,76,0,.07) 1px, transparent 1px); background-size:48px 48px; animation: fmGrid 8s linear infinite; } @keyframes fmGrid{ from{background-position:0 0} to{background-position:48px 48px} } .theme-fmlab .hero h1, .theme-fmlab .hero h2, .theme-fmlab .hero h3, .theme-fmlab .hero p, .theme-fmlab .hero li, .theme-fmlab .hero .muted, .theme-fmlab .hero label, .theme-fmlab .hero span{ color: #ffffff !important; } /* Botones ghost dentro del hero / fondos oscuros: texto y borde blancos */ .theme-fmlab .hero .btn.ghost, .theme-fmlab .hero .btn.sm.ghost{ color: #ffffff !important; border-color: rgba(255,255,255,.45) !important; background: transparent !important; } .theme-fmlab .hero .btn.ghost:hover, .theme-fmlab .hero .btn.sm.ghost:hover{ background: var(--fm-orange) !important; border-color: var(--fm-orange) !important; color: #ffffff !important; } .theme-fmlab .hero h1{ font-size: clamp(2.2rem, 4.2vw, 4rem); } .theme-fmlab .hero input{ background: rgba(255,255,255,.05); border:1px solid rgba(232,76,0,.35); color:#fff; } /* ============================================================ Botones ============================================================ */ .theme-fmlab .btn{ background: var(--fm-orange) !important; color: var(--fm-white) !important; border: none !important; border-radius:0 !important; font-family: var(--fm-font); font-weight:600; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; padding:.8rem 1.6rem; clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%); transition: background .25s, transform .15s, gap .25s; } .theme-fmlab .btn:hover{ background: var(--fm-orange-lt) !important; box-shadow: 0 6px 18px rgba(232,76,0,.35); } .theme-fmlab .btn.primary, .theme-fmlab .btn-primary{ background: var(--fm-orange) !important; color:#fff !important; } .theme-fmlab .btn.ghost, .theme-fmlab .btn.sm.ghost{ background: transparent !important; color: var(--fm-text) !important; border:2px solid rgba(232,76,0,.45) !important; clip-path:none !important; padding:.75rem 1.5rem; } .theme-fmlab .btn.ghost:hover{ border-color: var(--fm-orange) !important; background: rgba(232,76,0,.08) !important; color: var(--fm-orange) !important; } .theme-fmlab .btn.sm{ padding:.55rem 1rem; font-size:.7rem; } /* Botón "dark" del login layout original */ .theme-fmlab .login-submit.dark, .theme-fmlab .btn.dark{ background: var(--fm-navy) !important; color: var(--fm-orange) !important; border:1.5px solid var(--fm-orange) !important; clip-path:none !important; } /* ============================================================ Section labels y títulos ============================================================ */ .theme-fmlab .page-head h1, .theme-fmlab .hero h1{ font-family: var(--fm-font-h); } .theme-fmlab .section-label, .theme-fmlab .page-head .muted{ display:inline-flex; align-items:center; gap:.6rem; font-size:.68rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color: var(--fm-orange); } .theme-fmlab .section-label::before{ content:""; display:block; width:24px; height:2px; background: var(--fm-orange); } /* ============================================================ Cards (productos, KPI, features) ============================================================ */ .theme-fmlab .card, .theme-fmlab .kpi, .theme-fmlab .feature, .theme-fmlab .auth-box, .theme-fmlab .table-wrap, .theme-fmlab .sidebar{ background: var(--fm-white) !important; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--fm-line) !important; border-top:3px solid transparent !important; border-radius:0 !important; box-shadow:0 4px 14px rgba(15,32,64,.06) !important; color: var(--fm-text); transition: border-top-color .25s, transform .25s, box-shadow .25s; } .theme-fmlab .card:hover, .theme-fmlab .feature:hover, .theme-fmlab .kpi:hover{ border-top-color: var(--fm-orange) !important; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(232,76,0,.10) !important; } .theme-fmlab .card h3, .theme-fmlab .card h2{ color: var(--fm-text); font-family: var(--fm-font-h); } .theme-fmlab .card img{ background: var(--fm-offwhite) !important; border-radius:0 !important; } .theme-fmlab .card-acc{ border-left:4px solid var(--fm-orange) !important; } .theme-fmlab .card-blue{ border-left:4px solid #2563eb !important; } .theme-fmlab .card-green{ border-left:4px solid #2e7d32 !important; } .theme-fmlab .card-red{ border-left:4px solid var(--fm-orange) !important; } /* ============================================================ Formularios ============================================================ */ .theme-fmlab input[type=text], .theme-fmlab input[type=email], .theme-fmlab input[type=password], .theme-fmlab input[type=tel], .theme-fmlab input[type=number], .theme-fmlab input[type=date], .theme-fmlab input[type=datetime-local], .theme-fmlab input[type=search], .theme-fmlab input[type=url], .theme-fmlab input:not([type]), .theme-fmlab select, .theme-fmlab textarea{ background: #fff !important; color: var(--fm-text) !important; border:1px solid var(--fm-line) !important; border-radius:0 !important; font-family: var(--fm-font) !important; transition: border-color .2s, box-shadow .2s; } .theme-fmlab input::placeholder, .theme-fmlab textarea::placeholder{ color:#a3aec4; } .theme-fmlab input:focus, .theme-fmlab select:focus, .theme-fmlab textarea:focus{ outline:none; border-color: var(--fm-orange) !important; box-shadow:0 0 0 3px rgba(232,76,0,.15) !important; } .theme-fmlab label{ color: var(--fm-text); font-weight:500; letter-spacing:.04em; font-size:.85rem; } .theme-fmlab input[type=checkbox], .theme-fmlab input[type=radio]{ accent-color: var(--fm-orange); } /* ============================================================ Tablas (paneles admin / cliente / asesor) ============================================================ */ .theme-fmlab .table-wrap{ background:#fff !important; } .theme-fmlab .table{ color: var(--fm-text) !important; background:transparent; } .theme-fmlab .table thead th{ color: var(--fm-orange); border-bottom:2px solid var(--fm-orange) !important; background: var(--fm-offwhite); text-transform:uppercase; letter-spacing:.5px; font-size:11px; font-family: var(--fm-font-h); font-weight:600; } .theme-fmlab .table tbody tr{ border-bottom:1px solid var(--fm-line); } .theme-fmlab .table tbody tr:hover{ background: rgba(232,76,0,.04); } /* ============================================================ Badges, chips, pills, alerts ============================================================ */ .theme-fmlab .badge{ background: rgba(232,76,0,.12) !important; color: var(--fm-orange) !important; border:1px solid rgba(232,76,0,.3); border-radius:0 !important; font-family: var(--fm-font-h); letter-spacing:.06em; } .theme-fmlab .badge-warning{ background:#fff5e0 !important; color:#a86a00 !important; border-color:#f0c98b; } .theme-fmlab .badge-danger{ background:#fde2da !important; color:#a02e00 !important; border-color:#f5b09a; } .theme-fmlab .badge-success{ background:#e0f0e2 !important; color:#1f5b25 !important; border-color:#9ec9a3; } .theme-fmlab .chip{ background:#fff !important; border:1px solid var(--fm-line) !important; color: var(--fm-text) !important; border-radius:0 !important; } .theme-fmlab .category-pill{ background:#fff !important; border:1px solid rgba(232,76,0,.4) !important; color: var(--fm-orange) !important; } .theme-fmlab .role-cliente{ background:#dfeaff !important; color:#1d3a8a !important; } .theme-fmlab .role-trabajador{ background:#dbf1de !important; color:#1f5b25 !important; } .theme-fmlab .role-admin{ background:var(--fm-navy) !important; color: var(--fm-orange) !important; border:1px solid var(--fm-orange); } .theme-fmlab .alert{ background:#fff5e0 !important; border:1px solid #f0c98b !important; color:#a86a00 !important; border-radius:0 !important; } .theme-fmlab .alert.ok{ background:#e0f0e2 !important; border-color:#9ec9a3 !important; color:#1f5b25 !important; } .theme-fmlab .alert.err{ background:#fde2da !important; border-color:#f5b09a !important; color:#a02e00 !important; } /* ============================================================ Carrusel de productos ============================================================ */ .theme-fmlab .related-products{ background: var(--fm-navy) !important; border:1px solid rgba(232,76,0,.18) !important; border-radius:0 !important; box-shadow:none !important; color:#fff; } .theme-fmlab .related-products--top{ background: linear-gradient(135deg, var(--fm-navy), var(--fm-navy-soft)) !important; } .theme-fmlab .related-products__title{ color: var(--fm-white) !important; font-family: var(--fm-font-h); } .theme-fmlab .related-products__title::before{ content:none; } .theme-fmlab .related-products__btn{ background: rgba(232,76,0,.10) !important; color: var(--fm-orange) !important; border:1px solid rgba(232,76,0,.4) !important; border-radius:0 !important; } .theme-fmlab .related-products__btn:hover:not(:disabled){ background: var(--fm-orange) !important; color:#fff !important; border-color: var(--fm-orange) !important; } .theme-fmlab .related-card{ background: var(--fm-navy-mid) !important; border:1px solid rgba(232,76,0,.18) !important; border-radius:0 !important; color:#fff; } .theme-fmlab .related-card:hover{ transform: translateY(-4px); border-color: var(--fm-orange) !important; box-shadow:0 12px 28px rgba(0,0,0,.35) !important; } .theme-fmlab .related-card__media{ background:#0a1e3a !important; } .theme-fmlab .related-card__title{ color: var(--fm-white) !important; font-family: var(--fm-font-h); } .theme-fmlab .related-card__brand{ color: var(--fm-orange) !important; } .theme-fmlab .related-card__price{ color: var(--fm-orange-lt) !important; font-family: var(--fm-font-h); } /* Botones "Ver" y "🛒" dentro de las cards del carrusel — texto/icono blanco sobre fondo oscuro */ .theme-fmlab .related-card .btn.ghost, .theme-fmlab .related-card .btn.ghost.sm, .theme-fmlab .related-card a.btn, .theme-fmlab .related-card .btn.sm, .theme-fmlab .related-card__form .btn, .theme-fmlab .related-card__form .btn.sm, .theme-fmlab .related-card__form button{ color: #ffffff !important; border:1px solid rgba(255,255,255,.35) !important; background: transparent !important; clip-path: none !important; } .theme-fmlab .related-card .btn.ghost:hover, .theme-fmlab .related-card .btn.ghost.sm:hover, .theme-fmlab .related-card a.btn:hover, .theme-fmlab .related-card .btn.sm:hover, .theme-fmlab .related-card__form .btn:hover, .theme-fmlab .related-card__form .btn.sm:hover, .theme-fmlab .related-card__form button:hover{ background: var(--fm-orange) !important; border-color: var(--fm-orange) !important; color: #ffffff !important; } /* Botón "Agregar al carrito" del grid de productos (index) — más grande con icono SVG blanco */ .theme-fmlab .add-cart-btn{ display:inline-flex !important; align-items:center; gap:.5rem; padding:.85rem 1.4rem !important; font-size:.9rem !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background: var(--fm-orange) !important; color:#ffffff !important; border:none !important; border-radius:0 !important; clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 0 100%); cursor:pointer; transition: background .25s, transform .15s, box-shadow .25s; } .theme-fmlab .add-cart-btn svg{ flex-shrink:0; stroke:#ffffff; } .theme-fmlab .add-cart-btn:hover{ background: var(--fm-orange-lt) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,76,0,.4); } /* Botón 🛒 del carrusel: 50% más grande con icono blanco */ .theme-fmlab .related-card__form .btn, .theme-fmlab .related-card__form .btn.sm, .theme-fmlab .related-card__form button{ padding: 11px 18px !important; font-size: 18px !important; line-height: 1 !important; min-width: 52px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .theme-fmlab .related-card__form .btn:hover, .theme-fmlab .related-card__form button:hover{ transform: scale(1.05); } /* ============================================================ Página de producto ============================================================ */ .theme-fmlab .product-page{ background:#fff !important; } .theme-fmlab .product-page__media{ background: var(--fm-offwhite) !important; border:1px solid var(--fm-line) !important; } .theme-fmlab .product-page__info h1{ color: var(--fm-text); font-family: var(--fm-font-h); } .theme-fmlab .product-page__price{ color: var(--fm-orange) !important; font-family: var(--fm-font-h); } .theme-fmlab .product-page__desc{ border-top-color: var(--fm-line) !important; } .theme-fmlab .product-page__desc-title{ color: var(--fm-text) !important; font-family: var(--fm-font-h); } .theme-fmlab .product-description a{ color: var(--fm-orange) !important; } /* Carrito */ .theme-fmlab .cart-row{ background:#fff !important; border:1px solid var(--fm-line) !important; } .theme-fmlab .cart-row__title{ color: var(--fm-text) !important; } /* ============================================================ Selector jerárquico de admin ============================================================ */ .theme-fmlab .cat-tree{ background:#fff !important; border:1px solid var(--fm-line) !important; border-radius:0 !important; } .theme-fmlab .cat-tree__node[open] > summary{ background: var(--fm-offwhite) !important; } .theme-fmlab .cat-tree__label{ color: var(--fm-text) !important; } .theme-fmlab .cat-tree__counter{ background: rgba(232,76,0,.12) !important; color: var(--fm-orange) !important; } .theme-fmlab .cat-tree__badge{ background:#dfeaff; color:#1d3a8a; } .theme-fmlab .cat-tree__badge--l2{ background:#dbf1de; color:#1f5b25; } .theme-fmlab .cat-tree__badge--l3{ background:#fde9c0; color:#8a5a00; } /* ============================================================ Sidebars (admin/cliente/asesor) ============================================================ */ .theme-fmlab .layout{ background: transparent; } .theme-fmlab .sidebar{ background:#fff !important; border:1px solid var(--fm-line) !important; } .theme-fmlab .sidebar a{ color: var(--fm-text) !important; letter-spacing:.04em; } .theme-fmlab .sidebar a:hover{ background: rgba(232,76,0,.06) !important; color: var(--fm-orange) !important; } .theme-fmlab .sidebar .active, .theme-fmlab .sidebar a.active{ background: rgba(232,76,0,.10) !important; color: var(--fm-orange) !important; border-left:3px solid var(--fm-orange); } /* ============================================================ Footer ============================================================ */ .theme-fmlab .footer{ background: #060e1c !important; color: var(--fm-gray) !important; border-top:none !important; padding:4rem 2.5rem 2rem; } .theme-fmlab .footer a{ color: var(--fm-orange); } .theme-fmlab .footer a:hover{ color: var(--fm-orange-lt); } .theme-fmlab .footer-grid strong{ color: var(--fm-orange) !important; font-family: var(--fm-font-h); letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; } .theme-fmlab .footer-grid{ border-bottom:1px solid rgba(232,76,0,.15); } /* WhatsApp flotante */ .theme-fmlab .whatsapp{ bottom:24px !important; right:24px !important; background:#25d366 !important; color:#fff !important; padding:0 !important; width:54px; height:54px; border-radius:50% !important; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 22px rgba(37,211,102,.45) !important; text-indent:-9999px; overflow:hidden; animation: fmWaPulse 2.2s ease-in-out infinite; } .theme-fmlab .whatsapp::before{ content:""; width:28px; height:28px; text-indent:0; background:url("data:image/svg+xml;utf8,") center/contain no-repeat; } @keyframes fmWaPulse{ 0%,100%{ box-shadow:0 4px 22px rgba(37,211,102,.45); } 50% { box-shadow:0 4px 32px rgba(37,211,102,.85); } } /* ============================================================ Compensar overflow / cursor ============================================================ */ .theme-fmlab.has-cursor, .theme-fmlab.has-cursor *{ cursor:none; } @media (hover:none){ .theme-fmlab.has-cursor, .theme-fmlab.has-cursor *{ cursor:auto; } } /* ============================================================ Responsive ============================================================ */ @media(max-width:780px){ .theme-fmlab .topbar{ height:64px; } .theme-fmlab main.container{ padding-top: 80px !important; } .theme-fmlab .topbar .container.nav{ padding:0 1rem !important; } .theme-fmlab .main-nav{ background: rgba(10,22,40,.98); border-top:1px solid rgba(232,76,0,.25); margin-top:8px; padding:8px; } .theme-fmlab .main-nav a{ color: var(--fm-gray-lt) !important; } }