/* * iB2B Modern UI — Overrides & Enhancements * Applies on top of Articulos/style.css. * Per-customer custom.css still loads last and can override color tokens. * * Design System: * --ib-accent Primary action color (orange brand default, overridden per-customer) * --ib-radius Border-radius scale * --ib-shadow-* Elevation scale * --ib-input-border Input border color * --ib-input-focus Input focus border + ring color */ /* style.css fija html,body{height:100%} lo que rompe position:sticky en mobile: el scroll ocurre en pero el sticky container queda en body. Restauramos el modelo estándar de scroll del viewport. */ html, body { height: auto !important; } /* ─── Design tokens ──────────────────────────────────────────── */ :root { --ib-accent: #e07b00; /* default brand orange; overridden by color_button in custom.css */ --ib-accent-dark: #c06a00; --ib-accent-light: rgba(224,123,0,.12); --ib-bg: #f4f6f9; --ib-surface: #ffffff; --ib-border: #e3e7ef; --ib-input-border: #d1d5db; --ib-input-focus: #4f8ef7; /* focus ring — blue (accessible on white) */ --ib-text-primary: #1a1d23; --ib-text-secondary:#5a6274; --ib-text-muted: #9aa0b0; --ib-danger: #dc3545; --ib-success: #28a745; --ib-radius-sm: 6px; --ib-radius: 10px; --ib-radius-lg: 16px; --ib-shadow-xs: 0 1px 2px rgba(0,0,0,.06); --ib-shadow-sm: 0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); --ib-shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06); --ib-shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); --ib-transition: 160ms cubic-bezier(.4,0,.2,1); --ib-font: 'Rubik', 'Inter', system-ui, -apple-system, sans-serif; } /* ─── Base typography ─────────────────────────────────────────── */ body { font-family: var(--ib-font); font-size: 14px; color: var(--ib-text-primary); background-color: var(--ib-bg); line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-family: var(--ib-font); letter-spacing: -.01em; } /* ─── Focus states (accessibility fix — removes the blanket "outline:none") */ *:focus { outline: none; box-shadow: none; /* reset; individual elements define their own below */ } input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 2px solid var(--ib-input-focus); outline-offset: 2px; box-shadow: none; } /* ─── Modern form inputs ──────────────────────────────────────── */ form input, form select, form textarea { width: 100%; height: 44px; min-height: 44px; background-color: var(--ib-surface); border: 1.5px solid var(--ib-input-border); border-radius: var(--ib-radius-sm); padding: 0 12px; font-size: 14px; font-family: var(--ib-font); color: var(--ib-text-primary); transition: border-color var(--ib-transition), box-shadow var(--ib-transition); box-shadow: var(--ib-shadow-xs); margin-bottom: 0; } form input:focus, form select:focus, form textarea:focus { border-color: var(--ib-input-focus); box-shadow: 0 0 0 3px rgba(79,142,247,.15); outline: none; background-color: #fff; } form input::placeholder, form textarea::placeholder { color: var(--ib-text-muted); font-size: 13px; } form input[type="submit"] { cursor: pointer; } form textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ib-text-secondary); margin-bottom: 5px; letter-spacing: .01em; text-transform: uppercase; } .form-group label.required-text { display: inline; font-size: 11px; color: var(--ib-danger); font-weight: 400; text-transform: none; letter-spacing: 0; vertical-align: middle; } /* Validation error messages */ .text-danger { font-size: 12.5px; color: var(--ib-danger); margin-bottom: 12px; padding: 8px 12px; background: rgba(220,53,69,.07); border-radius: var(--ib-radius-sm); border-left: 3px solid var(--ib-danger); } .text-danger:empty { display: none; } /* ASP.NET MVC adds .validation-summary-valid when no errors — hide it */ .validation-summary-valid { display: none !important; } /* ─── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 24px; font-size: 13px; font-weight: 600; font-family: var(--ib-font); letter-spacing: .04em; text-transform: uppercase; border-radius: var(--ib-radius-sm); border: none; cursor: pointer; transition: background-color var(--ib-transition), box-shadow var(--ib-transition), transform 60ms ease, opacity var(--ib-transition); position: relative; overflow: hidden; line-height: 1; } .btn:focus { outline: 2px solid var(--ib-input-focus); outline-offset: 2px; box-shadow: none; } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--ib-accent); color: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 2px 8px rgba(224,123,0,.25); } .btn-primary:hover { background-color: var(--ib-accent-dark); opacity: 1; box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 4px 16px rgba(224,123,0,.30); color: #fff !important; } .btn-primary.color_button { /* color_button from custom.css sets background-color; we enhance the rest */ box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.12); } .btn-secondary, .btn-default { background-color: #f1f3f7; color: var(--ib-text-secondary) !important; border: 1.5px solid var(--ib-border); box-shadow: var(--ib-shadow-xs); } .btn-secondary:hover, .btn-default:hover { background-color: #e8eaf0; color: var(--ib-text-primary) !important; opacity: 1; } /* Sweep effect override — corrige conflictos de display/transform con hover.css */ .btn.hvr-sweep-to-right { display: inline-flex; vertical-align: initial; transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.12); } .btn.hvr-sweep-to-right:before { background: rgba(0,0,0,.12); } /* Full-width button utility */ .btn-block { width: 100%; display: flex; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── AUTH PAGES (Login, Recover, Register) */ /* ─── ══════════════════════════════════════════════════════════ */ /* Account page body */ body.account-body { background: var(--ib-bg); min-height: 100vh; display: flex; flex-direction: column; } body.account-body main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 16px; min-height: 0; } /* ─── Login card ──────────────────────────────────────────────── */ #login { display: flex; align-items: center; justify-content: center; padding: 0; } #login .floatingbox { width: 100%; max-width: 420px; margin: 0 auto; border-radius: var(--ib-radius-lg); border: 1px solid var(--ib-border); box-shadow: var(--ib-shadow-lg); padding: 0; overflow: hidden; float: none; position: relative; /* Reset the left/transform centering from style.css — we use flex justify-content:center instead */ left: auto; transform: none; } #login .floatingbox .col-xs-12:first-child { padding: 36px 36px 24px; } /* Login header with lines */ #login .login-header { margin-bottom: 24px; text-align: center; } #login .login-header h4 { padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ib-text-muted); text-transform: uppercase; margin: 0 auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; } #login .login-header h4::before, #login .login-header h4::after { content: ''; flex: 1; height: 1px; background: var(--ib-border); position: static; width: auto; margin: 0; } /* Brand logo */ #login .logo { margin: 0 auto 28px; text-align: center; background-repeat: no-repeat; background-size: contain; background-position: center; max-width: 200px; height: 64px; } #login .floatingbox img { max-height: 64px; width: auto; max-width: 200px; object-fit: contain; } /* Welcome copy */ #login form [style*="text-align:center"], #login form > div[style] { margin-bottom: 24px; } #login form h4 { font-size: 20px; font-weight: 700; color: var(--ib-text-primary); margin: 0 0 6px; text-transform: none; letter-spacing: -.01em; } #login form p { font-size: 13.5px; color: var(--ib-text-secondary); margin: 0; } /* Login form inputs */ #login form .form-group { margin-bottom: 14px; } #login form .form-group label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ib-text-secondary); margin-bottom: 6px; } #login form .btn { width: 100%; margin-left: 0; } #login form input[type="text"], #login form input[type="email"], #login form input[type="password"] { width: 100%; margin-left: 0; height: 48px; font-size: 14.5px; border-radius: var(--ib-radius-sm); } /* Submit button inside login */ #login form input[type="submit"], #login form button[type="submit"] { width: 100%; height: 48px; margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; border-radius: var(--ib-radius-sm); cursor: pointer; } /* Login options footer */ #login .login-options { background: var(--ib-bg); border-top: 1px solid var(--ib-border); border-radius: 0 0 var(--ib-radius-lg) var(--ib-radius-lg); padding: 16px 36px; font-size: 13px; color: var(--ib-text-secondary); text-align: center; } #login .login-options a { color: var(--ib-input-focus); font-weight: 600; text-decoration: none; } #login .login-options a:hover { text-decoration: underline; opacity: 1; } #login .login-options span { display: block; line-height: 1.8; } /* Password toggle button */ .input-password-wrapper { position: relative; } .input-password-wrapper input { width: 100% !important; margin-left: 0 !important; padding-right: 44px !important; } .btn-toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px 6px; height: auto; min-height: 0; line-height: 1; color: var(--ib-text-muted); cursor: pointer; font-size: 14px; border-radius: 4px; transition: color var(--ib-transition); } .btn-toggle-password:hover { color: var(--ib-text-primary); } .btn-toggle-password:focus { outline: 2px solid var(--ib-input-focus); outline-offset: 1px; } /* Footer copyright on auth pages */ .footer-login, .footer-registro { padding: 16px; text-align: center; font-size: 11.5px; color: var(--ib-text-muted); margin-top: 8px; } .footer-login .left, .footer-registro .left { float: none; display: block; text-align: center; } .copyright-login, .copyright-registro { display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Mobile login */ @media (max-width: 480px) { body.account-body main { padding: 16px 12px; } #login .floatingbox .col-xs-12:first-child { padding: 28px 20px 20px; } #login .login-options { padding: 14px 20px; } } /* ─── Register page ───────────────────────────────────────────── */ /* Override legacy padding-top: 120px from style.css (was for old position:fixed navbar). The nav links row overflows the sticky box by ~59px (header.css sets .navbar-container to height:1px with floated children — the floats are not contained). Compensate here. */ main { padding-top: 104px; } main.main-register { padding-top: 0 !important; } /* Section card headings */ .bkg-register { background: #fff; border: 1px solid var(--ib-border); border-radius: var(--ib-radius); padding: 20px 20px 12px; margin-bottom: 20px; box-shadow: var(--ib-shadow-xs); } /* Section header labels */ .bkg-register > label:first-child { display: flex !important; align-items: center; gap: 8px; font-size: 12px !important; font-weight: 700 !important; color: var(--ib-text-secondary) !important; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px !important; padding-bottom: 12px; border-bottom: 1px solid var(--ib-border); } .bkg-register > label:first-child i { color: var(--ib-accent); font-size: 14px; } .bkg-register > label:first-child span[style*="color:red"] { font-size: 10px !important; font-weight: 400 !important; color: var(--ib-danger) !important; text-transform: none; letter-spacing: 0; opacity: .8; margin-left: 4px !important; } /* Mobile: the visible-xs label */ @media (max-width: 767px) { .bkg-register > label.visible-xs:first-child, .bkg-register > label.visible-xs { display: flex !important; } .bkg-register > label.hidden-xs { display: none !important; } } /* Register wrapper */ .wrapper { padding: 0; } .wrapper hr { display: none; } /* Page title */ .user-welcome.text-center h4 { font-size: 22px; font-weight: 700; color: var(--ib-text-primary); text-transform: none; letter-spacing: -.01em; margin: 20px 0 24px; } /* Arrow icons on select (FA icons were added manually) */ i.arrow-form { display: none; /* we use CSS background arrow on the select instead */ } /* Register form selects already have CSS arrow — ensure consistent height */ .bkg-register .form-group select { height: 44px; } /* Register submit footer */ .fright { display: flex; justify-content: flex-end; } /* Vertical spacing scoped to form contexts — .fright is reused as buy-btn-container in catalog cards and must NOT carry extra padding-top there (causes button misalignment). */ form .fright, .bkg-register .fright { padding-top: 8px; margin-bottom: 8px; } /* Scoped to form contexts only — NOT inside catalog cards where .fright is reused as buy-btn-container */ form .fright .btn, .bkg-register .fright .btn { min-width: 180px; height: 48px; font-size: 14px; } /* Footer on register */ .footer-registro { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 8px; border-top: 1px solid var(--ib-border); margin-top: 8px; } .footer-registro .login-registro { text-align: right; } .footer-registro a { color: var(--ib-input-focus); font-weight: 600; } /* Mobile register */ @media (max-width: 767px) { .footer-registro { flex-direction: column; gap: 8px; text-align: center; } .footer-registro .login-registro { text-align: center; } .fright { justify-content: stretch; } .fright .btn { width: 100%; } } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── APP HEADER / NAVBAR */ /* ─── ══════════════════════════════════════════════════════════ */ .header { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 1000; background: #fff; border-bottom: 1px solid var(--ib-border); box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04); } .header .navbar { margin-bottom: 0; min-height: 56px; border: none; border-radius: 0; box-shadow: none; } /*.header .navbar > .container { min-height: 56px; }*/ /* Nav links */ #menuppal > li > a { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ib-text-secondary) !important; padding: 0 12px !important; height: 40px; display: flex; align-items: center; border-radius: var(--ib-radius-sm); transition: background var(--ib-transition), color var(--ib-transition); } #menuppal > li > a:hover { background: var(--ib-bg); color: var(--ib-text-primary) !important; opacity: 1; } #menuppal > li.active > a, #menuppal > li.active > a:hover { color: var(--ib-accent) !important; background: var(--ib-accent-light); } /* User menu — texto limpio, sin recuadro */ #menuUser > li > a { font-size: 13px; font-weight: 500; color: var(--ib-text-secondary) !important; display: flex; align-items: center; gap: 5px; padding: 0 6px; height: 36px; border-radius: var(--ib-radius-sm); border: none; background: transparent; transition: color var(--ib-transition), background var(--ib-transition); text-decoration: none !important; } #menuUser > li > a:hover { color: var(--ib-text-primary) !important; background: var(--ib-bg); opacity: 1; } /* Dropdown menu */ #menuUser .dropdown-menu { border: 1px solid var(--ib-border); border-radius: var(--ib-radius); box-shadow: var(--ib-shadow-md); padding: 6px; top: calc(100% + 6px); min-width: 180px; } #menuUser .dropdown-menu li a { font-size: 13px; color: var(--ib-text-primary) !important; padding: 8px 12px; border-radius: var(--ib-radius-sm); display: block; transition: background var(--ib-transition); } #menuUser .dropdown-menu li a:hover { background: var(--ib-bg); color: var(--ib-text-primary) !important; opacity: 1; } /* Cart icon */ #menuCarrito > li > a { padding: 0 6px !important; height: 36px; display: flex; align-items: center; position: relative; text-decoration: none !important; } /* Badge flotante sobre el ícono del carrito */ .cart-icon { position: relative; display: inline-flex; align-items: center; } .cart-icon .counter { position: absolute !important; top: -5px !important; right: -10px !important; background: var(--ib-accent) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; min-width: 18px !important; height: 18px !important; line-height: 18px !important; border-radius: 9px !important; padding: 0 5px !important; text-align: center !important; display: inline-block !important; box-shadow: 0 1px 4px rgba(0,0,0,.20) !important; white-space: nowrap !important; margin-left: 0 !important; } /* El JS vacía .counter con .text("") cuando el carrito está vacío. :empty lo oculta sin tocar el JS. */ .cart-icon .counter:empty { display: none !important; } /* Customer info bar */ .navbar > .container > .client-menu > .cuit p { font-size: 12px; color: var(--ib-text-secondary); } .cuit-fantasy-name { font-weight: 600; color: var(--ib-text-primary) !important; display: block; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text-green { color: #16a34a !important; font-weight: 600; } .text-red { color: var(--ib-danger) !important; font-weight: 600; } /* Mobile navbar */ @media (max-width: 767px) { main { /*padding-top: 0 !important;*/ } .header .navbar-collapse { border-top: 1px solid var(--ib-border); padding: 8px 0; } #menuppal > li > a { height: 44px; padding: 0 16px !important; border-radius: 0; } } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── CATALOG / ITEM CARDS */ /* ─── ══════════════════════════════════════════════════════════ */ .floatingbox { border-radius: var(--ib-radius); border: 1px solid var(--ib-border); box-shadow: var(--ib-shadow-sm); } .download-card { border-radius: var(--ib-radius); border: 1px solid var(--ib-border); box-shadow: var(--ib-shadow-sm); transition: box-shadow var(--ib-transition), transform var(--ib-transition); } .download-card:hover { box-shadow: var(--ib-shadow-md); transform: translateY(-2px); } /* Breadcrumb */ .breadcrumb { font-size: 12px; font-weight: 500; color: var(--ib-text-muted); gap: 6px; } .breadcrumb a { color: var(--ib-text-secondary) !important; font-weight: 500; } .breadcrumb .active { color: var(--ib-text-primary); font-weight: 600; } /* Page title */ .page-title { font-size: 18px; font-weight: 700; color: var(--ib-text-primary); letter-spacing: -.01em; text-transform: none; } /* Search input inside catalog */ .search-input { border: 1.5px solid var(--ib-input-border) !important; border-radius: var(--ib-radius-sm) !important; height: 40px !important; padding: 0 12px !important; font-size: 13px !important; transition: border-color var(--ib-transition), box-shadow var(--ib-transition) !important; } .search-input:focus { border-color: var(--ib-input-focus) !important; box-shadow: 0 0 0 3px rgba(79,142,247,.15) !important; outline: none !important; } /* Filter section — solo cuando tiene .floatingbox (Articulos/Items). En Products/List el .left-container no tiene .floatingbox, recibe solo el padding de style.css. overflow:hidden recorta los hijos a las esquinas redondeadas evitando artefactos visuales. */ .left-container.floatingbox { border-radius: var(--ib-radius); border: 1px solid var(--ib-border); box-shadow: var(--ib-shadow-xs); overflow: hidden; } /* En Products/List el sidebar no tiene .floatingbox — tarjeta minimalista sin borde extra para no crear un "recuadro" alrededor de "Temporada". */ #products .left-container:not(.floatingbox) { border-radius: var(--ib-radius); border: 1px solid var(--ib-border); box-shadow: var(--ib-shadow-xs); overflow: hidden; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── CART & CHECKOUT */ /* ─── ══════════════════════════════════════════════════════════ */ /* Cart item row */ .cart-item-row { border-bottom: 1px solid var(--ib-border); padding: 12px 0; transition: background var(--ib-transition); } .cart-item-row:hover { background: #fafbfc; } /* Order summary card */ .order-summary-card { background: var(--ib-surface); border: 1px solid var(--ib-border); border-radius: var(--ib-radius); box-shadow: var(--ib-shadow-sm); padding: 20px; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── SALES ORDER / ORDER HISTORY */ /* ─── ══════════════════════════════════════════════════════════ */ /* Order list table */ table.table { border-collapse: separate; border-spacing: 0; } table.table thead th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ib-text-muted); border-bottom: 2px solid var(--ib-border); padding: 10px 12px; white-space: nowrap; } table.table tbody tr { transition: background var(--ib-transition); } table.table tbody tr:hover { background: #f9fafc; } table.table tbody td { font-size: 13.5px; color: var(--ib-text-primary); border-bottom: 1px solid var(--ib-border); padding: 10px 12px; vertical-align: middle; } /* Status badges */ .badge, .label { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── ALERTS & NOTIFICATIONS */ /* ─── ══════════════════════════════════════════════════════════ */ .alert { border: none; border-radius: var(--ib-radius-sm); font-size: 13.5px; padding: 12px 16px; border-left: 4px solid transparent; } .alert-success { background: rgba(40,167,69,.08); color: #166534; border-left-color: var(--ib-success); } .alert-danger { background: rgba(220,53,69,.08); color: #991b1b; border-left-color: var(--ib-danger); } .alert-info { background: rgba(13,110,253,.08); color: #1d4ed8; border-left-color: #3b82f6; } .alert-warning { background: rgba(255,193,7,.12); color: #92400e; border-left-color: #f59e0b; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── MODALS */ /* ─── ══════════════════════════════════════════════════════════ */ .modal-content { border: none; border-radius: var(--ib-radius-lg); box-shadow: var(--ib-shadow-lg); overflow: hidden; } .modal-header { background: var(--ib-bg); border-bottom: 1px solid var(--ib-border); padding: 16px 20px; } .modal-header .modal-title { font-size: 15px; font-weight: 700; color: var(--ib-text-primary); text-transform: none; letter-spacing: -.01em; } .modal-body { padding: 20px; } .modal-footer { background: var(--ib-bg); border-top: 1px solid var(--ib-border); padding: 14px 20px; gap: 8px; } .close { font-size: 20px; color: var(--ib-text-muted); opacity: 1; transition: color var(--ib-transition); } .close:hover { color: var(--ib-text-primary); opacity: 1; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── ACCOUNT STATEMENT (AcctResc) */ /* ─── ══════════════════════════════════════════════════════════ */ .acct-resc-balance { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── UTILITY / SCROLLBAR */ /* ─── ══════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--ib-bg); } ::-webkit-scrollbar-thumb { background: #cbd0da; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9aa0b0; } /* ─── Register card wrapper ──────────────────────────────────── */ .register-card { position: static !important; transform: none !important; margin: 16px auto 32px !important; float: none !important; max-width: 900px; border-radius: var(--ib-radius-lg) !important; padding: 32px 32px 20px !important; } @media (max-width: 767px) { .register-card { padding: 20px 16px 16px !important; margin: 8px auto 20px !important; } } /* ─── Recover / RecoverMsg / RegisterMsg ─────────────────────── */ .main-register section#login .col-xs-12:first-child { padding: 36px 36px 24px; } /* ─── Base styles extracted from custom.css boilerplate ───────── These were duplicated in every per-client custom.css. custom.css should only contain brand colors + logo overrides. */ /* Registration page logo */ #registro .logo { height: 50px; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Button defaults */ .secondaryButton { color: #fff; } /* Promotion badge */ .btn.promotion_button.promotion { top: 3px; color: #fff; font-size: 20px; } /* Discount label */ .discount { padding: 1px 5px; font-weight: 500; margin-left: 5px; } /* Confirmed-order button — responsive sizing */ .btn.confirmed-button { width: 115px; } @media (max-width: 1024px) { .btn.confirmed-button { width: 127px; margin-bottom: 8px; } } @media (max-width: 768px) { .btn.confirmed-button { width: 130px; margin-bottom: 0; } } @media (max-width: 425px) { .btn.confirmed-button { width: 178px; } } @media (max-width: 375px) { .btn.confirmed-button { width: 152px; } } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── APP FOOTER */ /* ─── ══════════════════════════════════════════════════════════ */ footer.color_footer { background: #f8f9fb; border-top: 1px solid var(--ib-border); padding: 20px 0; font-size: 12.5px; color: var(--ib-text-secondary); margin-top: auto; } footer.color_footer a { color: var(--ib-text-secondary); text-decoration: none; transition: color var(--ib-transition); } footer.color_footer a:hover { color: var(--ib-text-primary); opacity: 1; } footer.color_footer .right { text-align: right; } @media (max-width: 767px) { footer.color_footer .right { text-align: left; margin-top: 8px; } } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── FLOATING BUTTONS (WhatsApp / Back-to-top) */ /* ─── ══════════════════════════════════════════════════════════ */ .ws-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; background: #25d366; color: #fff !important; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.40); transition: box-shadow var(--ib-transition), transform var(--ib-transition); text-decoration: none !important; } .ws-float:hover { box-shadow: 0 6px 24px rgba(37,211,102,.55); transform: translateY(-2px); opacity: 1; } .ws-float-m { font-size: 26px; line-height: 1; } .back-to-top { position: fixed; bottom: 84px; right: 24px; z-index: 998; background: #fff; border: 1px solid var(--ib-border); color: var(--ib-text-secondary); width: 40px; height: 40px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; box-shadow: var(--ib-shadow-sm); cursor: pointer; transition: box-shadow var(--ib-transition), color var(--ib-transition); text-align: center; line-height: 40px; } .back-to-top:hover { box-shadow: var(--ib-shadow-md); color: var(--ib-text-primary); } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── HOME PAGE */ /* ─── ══════════════════════════════════════════════════════════ */ #home .floatingbox { padding: 24px; } #home hr { border-color: var(--ib-border) !important; margin: 0 0 20px !important; } #home h5 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ib-text-muted); margin: 0 0 16px; } /* Family / trademark card grid wrapper — behaves like a Bootstrap .row */ .margenes-pastillas { margin-left: -15px; margin-right: -15px; } .margenes-pastillas::after { content: ""; display: table; clear: both; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── CATALOG FILTER SIDEBAR */ /* ─── ══════════════════════════════════════════════════════════ */ .padding-filters-mobile .left-container { padding: 12px; } .filtro-container { border-bottom: 1px solid var(--ib-border); } .filtro-container:last-child { border-bottom: none; } .btn-collapse { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; color: var(--ib-text-primary) !important; text-decoration: none !important; transition: color var(--ib-transition); } .btn-collapse:hover { color: var(--ib-accent) !important; opacity: 1; } .btn-collapse h4 { font-size: 12px !important; font-weight: 700 !important; margin: 0 !important; text-transform: uppercase; letter-spacing: .06em; } .btn-collapse::after { content: '▾'; font-size: 11px; color: var(--ib-text-muted); transition: transform var(--ib-transition); flex-shrink: 0; } .btn-collapse:not(.collapsed)::after { transform: rotate(-180deg); } /* ── Filtros: contenedores con padding uniforme ─────────────────── */ #trademarkListContainer, #familiesListContainer, .filtro-container { padding-top: 0 !important; } /* Listas: sin padding ni list-style */ #trademarkList, #familyList, #attrList, #promotionsList { list-style: none !important; padding: 0 0 6px !important; margin: 0 !important; } #trademarkList li, #familyList li, #attrList li, #promotionsList li { list-style: none; } /* Todos los labels dentro de filtros — alineación uniforme */ .filtro-container .checkbox label, .filtro-container label.checkbox, #trademarkList li label, #familyList li label, #attrList li label, #promotionsList li label { font-size: 12.5px !important; font-weight: 400 !important; color: var(--ib-text-secondary) !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 0 !important; padding: 4px 0 !important; display: flex !important; align-items: center; gap: 8px; /* Neutralizar los   del HTML */ white-space: normal; } /* El input[checkbox] dentro del label: tamaño y posición consistentes */ .filtro-container .checkbox label input[type="checkbox"], .filtro-container label.checkbox input[type="checkbox"], #trademarkList li label input[type="checkbox"], #familyList li label input[type="checkbox"], #attrList li label input[type="checkbox"], #promotionsList li label input[type="checkbox"] { flex-shrink: 0; margin: 0 !important; position: static !important; width: 14px; height: 14px; cursor: pointer; } /* Neutralizar el strong del "Seleccionar todas" para que no cambie el peso */ .filtro-container .checkbox label strong, .filtro-container label.checkbox strong { font-weight: 500; font-size: 12.5px; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── CATALOG TOOLBAR (sort + view switcher) */ /* ─── ══════════════════════════════════════════════════════════ */ .filterButtons { list-style: none; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; } .filterButtons li { list-style: none; } .filterButtons li a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 10px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--ib-border); border-radius: var(--ib-radius-sm); color: var(--ib-text-secondary) !important; background: var(--ib-surface); text-decoration: none !important; transition: border-color var(--ib-transition), background var(--ib-transition), color var(--ib-transition); letter-spacing: .03em; cursor: pointer; } .filterButtons li a:hover, .filterButtons li a.active { border-color: var(--ib-accent); background: var(--ib-accent-light); color: var(--ib-accent) !important; opacity: 1; } /* View switcher buttons. #products wrapper raises specificity to 110 — beats catalogo.css's `.dc-view-switcher { display: block }` (spec 10) which loads after modern.css. */ #products .dc-view-switcher { display: flex !important; justify-content: flex-end; gap: 4px; align-items: center; } .dc-view-switcher button { width: 32px; height: 32px; padding: 0; min-height: 0; border: 1.5px solid var(--ib-border); border-radius: var(--ib-radius-sm); background: var(--ib-surface); color: var(--ib-text-muted); display: flex; align-items: center; justify-content: center; transition: border-color var(--ib-transition), background var(--ib-transition), color var(--ib-transition); cursor: pointer; } .dc-view-switcher button:hover, .dc-view-switcher button[is-active="True"] { border-color: var(--ib-accent); background: var(--ib-accent-light); color: var(--ib-accent); } /* Catalog header row */ .download-cards.headers { background: var(--ib-bg) !important; border-radius: var(--ib-radius-sm) var(--ib-radius-sm) 0 0; border: 1px solid var(--ib-border); border-bottom: 2px solid var(--ib-border); margin-bottom: 0; box-shadow: none; } .download-cards.headers h6 { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ib-text-muted) !important; margin: 0; padding: 10px 0; } /* Export button */ .btn-app.export.excel { font-size: 12px; font-weight: 600; color: #ffffff !important; background: #3ca23c; border: none; border-radius: var(--ib-radius-sm); height: 36px; padding: 0 14px; transition: all var(--ib-transition); } .btn-app.export.excel:hover { background: #2e8a2e; opacity: 1; } /* Pagination */ .paginado .pagination { margin: 0; } .paginado .pagination > li > a, .paginado .pagination > li > span { border-radius: var(--ib-radius-sm) !important; border: 1.5px solid var(--ib-border); font-size: 12px; font-weight: 600; color: var(--ib-text-secondary) !important; margin: 0 2px; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; transition: all var(--ib-transition); } .paginado .pagination > li.active > a, .paginado .pagination > li.active > span { background: var(--ib-accent); border-color: var(--ib-accent); color: #fff !important; } #totals { font-size: 12.5px; color: var(--ib-text-muted); font-weight: 500; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── CART PAGE */ /* ─── ══════════════════════════════════════════════════════════ */ #shopping-cart .floatingbox { padding: 24px; } #shopping-cart .page-title { margin-bottom: 16px; } .btn-vaciar { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ib-danger) !important; text-decoration: none !important; padding: 6px 12px; border: 1.5px solid rgba(220,53,69,.25) !important; border-radius: var(--ib-radius-sm) !important; background: rgba(220,53,69,.04) !important; transition: all var(--ib-transition); } .btn-vaciar:hover { background: rgba(220,53,69,.08) !important; border-color: var(--ib-danger) !important; opacity: 1; } .btn-volver { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ib-text-secondary) !important; text-decoration: none !important; transition: color var(--ib-transition); } .btn-volver:hover { color: var(--ib-text-primary) !important; opacity: 1; } .pd-button-group hr { border-color: var(--ib-border); margin: 16px 0; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── SALES ORDERS LIST */ /* ─── ══════════════════════════════════════════════════════════ */ .nofilterButton { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ib-text-muted); background: none; border: 1.5px solid var(--ib-border); border-radius: var(--ib-radius-sm); padding: 6px 14px; height: 36px; cursor: pointer; margin-top: 12px; transition: border-color var(--ib-transition), color var(--ib-transition), background var(--ib-transition); } .nofilterButton:hover { border-color: var(--ib-text-secondary); color: var(--ib-text-primary); background: var(--ib-bg); } /* Order number link */ .url-pd a { color: var(--ib-input-focus) !important; font-weight: 600; text-decoration: none; transition: opacity var(--ib-transition); } .url-pd a:hover { text-decoration: underline; opacity: .8; } /* Calendar input — flex row para que el input y el botón sean ítems adyacentes. style.css usa .btn-calendar { position: absolute } como hack; lo anulamos con position: static para que el flujo flex funcione correctamente. */ .input-calendar { display: flex !important; align-items: stretch; border-collapse: unset !important; /* neutraliza display:table de Bootstrap .input-group */ } .input-calendar .datePickerContent { flex: 1 1 auto; min-width: 0; border-radius: var(--ib-radius-sm) 0 0 var(--ib-radius-sm) !important; } .input-calendar .button-calendar { flex: 0 0 auto; display: flex; align-items: stretch; } .button-calendar .btn-calendar { position: static !important; /* anula position:absolute de style.css */ top: auto !important; right: auto !important; background: var(--ib-bg) !important; border: 1.5px solid var(--ib-input-border) !important; border-left: none !important; border-radius: 0 var(--ib-radius-sm) var(--ib-radius-sm) 0 !important; height: 44px !important; min-height: 44px !important; width: auto !important; padding: 0 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; box-shadow: none !important; } /* Filter row margin helpers */ .margin-mobile { margin-bottom: 8px; } .padding-filter { padding-left: 0; padding-right: 8px; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── MY ACCOUNT / PROFILE */ /* ─── ══════════════════════════════════════════════════════════ */ /* Allow footer to stick to bottom */ .main-container { display: flex; flex-direction: column; min-height: 100vh; } .main-container main.content { flex: 1; } /* Ficha principal (imágenes + info): card abierta abajo para que .product-variants se una como continuación visual. */ #product_detail .pd-detail-content { padding: 24px; border-radius: var(--ib-radius) var(--ib-radius) 0 0; border: 1px solid var(--ib-border); border-bottom: none; box-shadow: var(--ib-shadow-sm); background: var(--ib-surface); } /* Tabla de variantes (colores / talles / cantidades) + botones de acción. Continuación visual de la card superior. Sin padding horizontal — los Bootstrap col-* internos ya aportan 15px c/u. Agregarlo reduciría el ancho disponible y la tabla con muchos talles desbordaría a la derecha (lo que no ocurre en producción). */ #product_detail .product-variants { background: var(--ib-surface); border: 1px solid var(--ib-border); border-top: none; border-radius: 0 0 var(--ib-radius) var(--ib-radius); box-shadow: var(--ib-shadow-sm); padding: 0 0 16px; margin: 0; } /* "Productos relacionados" viene después de .product-variants. En producción esta sección era flat — sin card border. Las slick-arrows usan left/right: -25px, así que necesitamos al menos 32px de padding lateral para que quepan dentro del contenedor. Sin border ni shadow: el slider ya tiene sus propias cards por producto. */ #product_detail .product-variants ~ .pd-detail-content { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; padding: 24px 32px !important; margin-top: 8px; } #product_detail .right-container { padding: 0; } /* Precio en la tabla de variantes: evita que "$" quede en una línea y el número en la siguiente. */ #detail-table td[data-title="Precio"], #detail-table td[name="taskPrice"] { white-space: nowrap; } /* Gutter entre panel de filtros y contenido principal del catálogo. La columna padre usa padding0 (Bootstrap gutter = 0), lo compensamos aquí para que el spacing viva en el contenedor y no en hijos individuales. */ #products .right-container { padding-left: 16px; } /* Separación entre la toolbar de sort/vistas y el header de la lista de productos */ #products .right-container .download-cards.headers { margin-top: 11px; } #product_detail .form-group label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ib-text-muted); margin-bottom: 2px; } #product_detail .form-group p { font-size: 14px; color: var(--ib-text-primary); font-weight: 500; margin: 0; } /* Edit / simple action buttons. style.css tiene background:transparent !important y padding:0 !important en .simple-button — necesitamos !important en todo para ganar la cascada. */ .simple-button, a.simple-button { font-size: 12.5px !important; font-weight: 600 !important; color: var(--ib-input-focus) !important; text-decoration: none !important; border: 1.5px solid rgba(79,142,247,.30) !important; border-radius: var(--ib-radius-sm) !important; padding: 6px 14px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(79,142,247,.06) !important; transition: background var(--ib-transition), border-color var(--ib-transition); } .simple-button:hover, a.simple-button:hover { background: rgba(79,142,247,.12) !important; border-color: var(--ib-input-focus) !important; padding: 6px 14px !important; height: 34px !important; opacity: 1; } /* El borde del botón ya es el indicador visual — el outline global de a:focus genera un borde doble en hover. Lo suprimimos aquí. */ .simple-button:focus, a.simple-button:focus { outline: none !important; box-shadow: none !important; } /* ─── ══════════════════════════════════════════════════════════ */ /* ─── CUSTOMER SELECT PAGE */ /* ─── ══════════════════════════════════════════════════════════ */ .customer-select #login { padding-top: 24px; } .customer-select .popupbox { max-width: 440px; border-radius: var(--ib-radius-lg); border: 1px solid var(--ib-border); box-shadow: var(--ib-shadow-lg); float: none; position: relative; left: auto; transform: none; margin: 0 auto; } .customer-select-body { padding: 28px 36px 24px; text-align: center; } .customer-select-icon { margin: 0 auto 20px; max-width: 72px; } .customer-select-icon img { width: 100%; height: auto; } .customer-select-title { display: block; font-size: 16px; font-weight: 700; color: var(--ib-text-primary); letter-spacing: .01em; line-height: 1.3; margin-bottom: 16px; } .customer-select-desc { margin-bottom: 20px; text-align: center; } .customer-select-desc p { font-size: 13.5px; color: var(--ib-text-secondary); margin: 0 0 4px; line-height: 1.5; } .select2-results__option { border-bottom: 1px solid var(--ib-border) !important; } @media (max-width: 480px) { .customer-select-body { padding: 20px 20px 16px; } } /* Specificity must beat #login .reg-footer { text-align: left } in style.css (specificity 111) */ #login .reg-footer { padding: 14px 24px; border-top: 1px solid var(--ib-border); background: var(--ib-bg); border-radius: 0 0 var(--ib-radius-lg) var(--ib-radius-lg); text-align: center; font-size: 13px; float: none; width: 100%; } #login .reg-footer a { color: var(--ib-input-focus) !important; font-weight: 600; text-decoration: none; } /* Select2 adjustments */ .select2-container--default .select2-selection--single { height: 44px; border: 1.5px solid var(--ib-input-border) !important; border-radius: var(--ib-radius-sm) !important; font-family: var(--ib-font); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; font-size: 14px; color: var(--ib-text-primary); padding-left: 12px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ib-input-focus) !important; box-shadow: 0 0 0 3px rgba(79,142,247,.15); } .select2-dropdown { border: 1.5px solid var(--ib-border) !important; border-radius: var(--ib-radius) !important; box-shadow: var(--ib-shadow-md) !important; font-family: var(--ib-font); font-size: 13.5px; } .select2-results__option { padding: 8px 12px !important; border-bottom: 1px solid var(--ib-border) !important; border-top: none !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ib-accent) !important; } /* ─── Responsive overrides ────────────────────────────────────── */ @media (max-width: 767px) { .page-title { font-size: 16px; } table.table thead th, table.table tbody td { font-size: 12px; padding: 8px; } .modal-content { border-radius: var(--ib-radius); } #shopping-cart .floatingbox { padding: 16px; } .padding-filter { padding-right: 0; } } @media (max-width: 480px) { .btn { height: 44px; font-size: 13px; } form input, form select { height: 44px; font-size: 15px; /* larger on mobile for easier tap */ } .ws-float { bottom: 16px; right: 16px; width: 48px; height: 48px; } .back-to-top { bottom: 76px; right: 16px; } } /* ═══════════════════════════════════════════════════════════════ */ /* CATÁLOGO — Card estilo Mercado Libre (vista grilla) */ /* Solo presentación. Respeta los hooks de JS (clases/ids/attrs) */ /* y el carrusel del !266. Scoped a .grid-list / .vista-grid. */ /* ═══════════════════════════════════════════════════════════════ */ /* SKU — chico y muted */ .grid-list .download-card__content-box__catagory, .grid-list .custom-sku-arti { font-size: 11px; font-weight: 500; color: var(--ib-text-muted); text-transform: none; letter-spacing: .02em; } /* Nombre del artículo */ .grid-list .download-card__content-box__title { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--ib-text-primary); margin: 3px 0 4px; } /* Marca / sinónimo */ .grid-list .download-card__content-box__brand { font-size: 12px; color: var(--ib-text-secondary); margin: 0; } /* Stock */ .grid-list .download-card__content-box__stock { font-size: 12px; color: var(--ib-text-secondary); text-transform: none; margin: 4px 0 0; float:none !important; } /* Precio anterior (tachado) — chico y gris, estilo ML */ .grid-list .download-card__content-box__price.price-old { font-size: 12px; font-weight: 400; color: var(--ib-text-muted); text-decoration: line-through; margin: 8px 0 0; } /* Precio principal — grande y destacado */ .grid-list .download-card__content-box__price { font-size: 20px; font-weight: 500; color: var(--ib-text-primary); margin: 2px 0 0; line-height: 1.2; } .grid-list .download-card__content-box__price.has-offer { margin-top: 0; } /* "+ IVA" chico al lado del precio */ .grid-list .download-card__content-box__price > span:not(.promotion):not(.price-off) { font-size: 12px !important; font-weight: 400; color: var(--ib-text-secondary); margin: 0 0 0 3px !important; vertical-align: baseline; } /* Badge "% OFF" verde estilo ML */ .grid-list .price-off { display: inline-block; font-size: 13px !important; font-weight: 500; color: var(--ib-success) !important; margin-left: 6px !important; white-space: nowrap; } /* Tag de promoción */ .grid-list .promotion { color: var(--ib-accent); margin-left: 4px; } /* Stepper de cantidad (vista grilla) */ .vista-grid .btn-number { background: var(--ib-bg); border: 1px solid var(--ib-input-border); color: var(--ib-text-primary); border-radius: var(--ib-radius-sm); transition: background var(--ib-transition); } .vista-grid .btn-number:hover { background: var(--ib-border); } .vista-grid .input-number { border: 1px solid var(--ib-input-border); border-radius: var(--ib-radius-sm); text-align: center; } /* Bootstrap define p { margin: 0 0 10px } — neutralizamos eso dentro de cualquier botón para que el

que wrappea el label no agregue espacio. */ .btn p, a.btn p { margin: 0 !important; } /* Botón "Agregar al carrito" — radio y peso consistentes (el color lo da color_button) */ .download-card__content-box__buy-btn { border-radius: var(--ib-radius-sm) !important; font-weight: 500; transition: filter var(--ib-transition); } .download-card__content-box__buy-btn:hover { filter: brightness(.96); } /* Badge "% OFF" verde — genérico (card / detalle / modal) */ .price-off { display: inline-block; font-size: 13px; font-weight: 500; color: var(--ib-success); margin-left: 6px; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════ */ /* DETALLE DE PRODUCTO — estilo Mercado Libre (Pass 3) */ /* Solo presentación. Preserva los hooks de slick y de cart. */ /* ═══════════════════════════════════════════════════════════════ */ .pd-detail-content { padding: 20px 24px; } /* Header row de las páginas de LISTADO (CustomerList, SalesOrder, etc.) Solo aplica cuando .pd-detail-content TAMBIÉN tiene .floatingbox — así no toca los .pd-row de la ficha de detalle de producto. */ .floatingbox.pd-detail-content > .pd-row:not(.paginado) { display: flex; align-items: center; justify-content: space-between; } /* Solo el div adyacente al h2.page-title — el label + botón Excel */ .floatingbox.pd-detail-content > .pd-row:not(.paginado) > h2.page-title + div { display: flex !important; align-items: center !important; gap: 10px !important; float: none !important; } .floatingbox.pd-detail-content > .pd-row:not(.paginado) > h2.page-title + div strong { font-size: 12px; font-weight: 600; color: var(--ib-text-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } /* SKU */ .product-detail__category { font-size: 12px; font-weight: 500; color: var(--ib-text-muted); text-transform: none; letter-spacing: .02em; } /* Título */ .product-detail__title { font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--ib-text-primary); margin: 4px 0 8px; } /* Marca / stock */ .product-detail__brand { font-size: 13px; color: var(--ib-text-secondary); margin: 0 0 4px; text-transform: none; } /* Precio anterior tachado */ .product-detail__price.price-old { font-size: 14px; font-weight: 400; color: var(--ib-text-muted); text-decoration: line-through; margin: 10px 0 0; } /* Precio principal grande */ .product-detail__price { font-size: 30px; font-weight: 500; color: var(--ib-text-primary); margin: 2px 0 0; line-height: 1.15; } /* "+ IVA" chico al lado del precio */ .product-detail__price > span:not(.promotion):not(.price-off) { font-size: 13px !important; font-weight: 400 !important; color: var(--ib-text-secondary); margin-left: 4px; } /* Caja de compra (cantidad + botón) */ .product-detail__buy-btn { border-radius: var(--ib-radius-sm) !important; font-weight: 500; transition: filter var(--ib-transition); } .product-detail__buy-btn:hover { filter: brightness(.96); } .qty-detil-mobile .btn-number { background: var(--ib-bg); border: 1px solid var(--ib-input-border); color: var(--ib-text-primary); border-radius: var(--ib-radius-sm); } .qty-detil-mobile .input-number { border: 1px solid var(--ib-input-border); border-radius: var(--ib-radius-sm); text-align: center; } /* Bootstrap .input-group usa display:table — en el modal el span.input-group-btn queda más alto que el botón interno, que no llena el span y cae desalineado. Fijamos toda la cadena a 40px (mismo valor que el input inline) y usamos flex para centrar verticalmente el ícono dentro del botón. */ .modal .qty-detil-mobile.input-group { display: flex !important; align-items: stretch; height: 40px; } .modal .qty-detil-mobile .input-group-btn { display: flex; align-items: stretch; width: auto; } .modal .qty-detil-mobile .input-group-btn .btn { height: 40px; display: flex; align-items: center; justify-content: center; } .modal .qty-detil-mobile .input-number { height: 40px !important; flex: 1; min-width: 0; } /* Encabezado de "Artículos relacionados" */ .pd-detail-content h4 { font-size: 15px; font-weight: 500; color: var(--ib-text-primary); text-transform: none; letter-spacing: -.01em; } /* ── Slider de productos relacionados ──────────────────────────── catalogo.css define .card-producto img { height: 300px } que overrides el atributo HTML height="250". Con padding 10px + margin-top 15px + imagen 300px + textos ~85px el total llega a ~410px, excediendo el max-height: 400px inline del article → el precio cae fuera del borde. Reducimos la imagen a 200px para que todo el contenido quepa. */ .pd-related .card-producto img { height: 200px !important; object-fit: contain; } /* Imágenes landscape en artículos relacionados: el height="200" fijo con width:auto puede superar el ancho del slide. max-width:100% lo capa sin romper imágenes portrait ni el layout del grid. */ .pd-related .download-card img { max-width: 100%; object-fit: contain; } /* El contenedor del slider tiene height:460px !important inline — overflow:hidden del slick-list corta el contenido extra. Dejamos las cards con altura automática para que el slick iguale alturas. */ .pd-related .card-producto { max-height: none !important; min-height: 0 !important; } /* Artículos relacionados: igualar altura de todas las cards al más alto. Slick usa float en el track; al pasarlo a flex los slides de una misma fila quedan alineados por stretch, y la card con height:100% se estira. */ .pd-related .slick-track { display: flex !important; align-items: stretch; } .pd-related .slick-slide { height: auto; display: flex !important; flex-direction: column; } .pd-related .slick-slide > div { display: flex; flex: 1; } .pd-related .slick-slide .download-card { height: 100%; box-sizing: border-box; } /* custom.css tiene min-width:130px !important en .price-color, que pisa el min-width:205px inline del h4 y deja el precio en dos líneas. white-space evita el wrap y min-width:fit-content garantiza que el contenedor se adapte al contenido real, sin depender de valores fijos. */ .modal-header .price-color { white-space: nowrap !important; min-width: fit-content !important; margin-left: 20px !important; } /* ═══════════════════════════════════════════════════════════════ */ /* MODAL VISTA RÁPIDA (quick-view) — estilo ML (Pass 2) */ /* Complementa el !266; sólo presentación, sin tocar el carrusel. */ /* ═══════════════════════════════════════════════════════════════ */ .modal-content { border-radius: var(--ib-radius-lg); border: 1px solid var(--ib-border); box-shadow: var(--ib-shadow-lg); } .modal-header { border-bottom: 1px solid var(--ib-border); } /* SKU dentro del modal */ .modal-content .custom-sku { font-size: 13px; color: var(--ib-text-secondary); text-transform: none; } .modal-content .custom-sku strong { color: var(--ib-text-primary); } /* Título del popup */ .custom-title-popup { color: var(--ib-text-primary); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════ */ /* CATALOG PREMIUM — Pass 4: spacing, image ratio, stock badge, */ /* action zone, sort toolbar, grid rhythm */ /* Scoped tightly — no side effects on list/nophoto views. */ /* ═══════════════════════════════════════════════════════════════ */ /* ── 1. Grid gap & rhythm ──────────────────────────────────────── */ #products .download-cards[data-view="grid-view"] { gap: 16px; margin-top: 12px; /* separa el toolbar de la primera fila de cards */ } /* ProductsList usa Bootstrap col-* en lugar de .download-card — sin margin-bottom nativo. El gap del flex container no llega a los col-* (están todos en un único .row). Añadimos margen inferior a los wrappers de columna para crear row gap. */ #products .download-cards[data-view="grid-view"] .row > [class*="col-"] { margin-bottom: 20px; } /* ── 2. Card container — unified elevation ─────────────────────── */ #products .download-cards[data-view="grid-view"] .download-card { background: #ffffff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--ib-radius); box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); transition: box-shadow var(--ib-transition), transform var(--ib-transition); overflow: hidden; } #products .download-cards[data-view="grid-view"] .download-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.06); transform: translateY(-3px); } /* ── 3. Image zone — fixed height, centered, no dead space ──────── */ #products .download-cards[data-view="grid-view"] .download-card__icon-box { padding: 8px 8px 4px !important; background: #ffffff; border-bottom: none; flex-shrink: 0; /* sin height fijo — la imagen determina la altura naturalmente */ overflow: hidden; } /* Carousel — no tocar la estructura interna de Bootstrap */ #products .download-cards[data-view="grid-view"] .download-card__icon-box .carousel.sliderx { width: 100%; } /* Imagen: llena el ancho de la card, altura libre y proporcional — igual que el original */ #products .download-cards[data-view="grid-view"] .download-card__icon-box .carousel-inner img, #products .download-cards[data-view="grid-view"] .download-card__icon-box .no-flex img { width: 100% !important; height: auto !important; display: block; margin: 0 auto; transition: transform 240ms ease; } #products .download-cards[data-view="grid-view"] .download-card:hover .download-card__icon-box img { transform: scale(1.04); } /* ── 4. Content zone — tighter, better hierarchy ──────────────── */ #products .download-cards[data-view="grid-view"] .download-card__content-box { padding: 12px 12px 10px !important; display: flex; flex-direction: column; gap: 0; } /* SKU */ #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__catagory, #products .download-cards[data-view="grid-view"] .grid-list .custom-sku-arti { font-size: 10.5px; color: var(--ib-text-muted); letter-spacing: .04em; line-height: 1.4; margin-bottom: 2px; } /* Product name */ #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__title { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--ib-text-primary); margin: 0 0 4px; } /* Brand / tag */ #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__brand { font-size: 11.5px; color: var(--ib-text-secondary); margin: 0 0 4px; line-height: 1.3; } /* ── 5. Stock — semantic color badge ──────────────────────────── */ #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__stock { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: .02em; margin: 4px 0 4px; display: block; width: 100%; } /* Stock SI → verde */ #products .download-cards[data-view="grid-view"] .grid-list p.download-card__content-box__stock { color: #15803d; } /* Stock NO → rojo. Detectamos el texto via :has o con attr selector si hubiera; como no hay clase diferenciada, usamos el texto via un truco de color por defecto + override desde JS. Dejamos la base verde y el JS puede agregar la clase .stock-out si lo implementan. Por ahora defaulteamos y marcamos. */ #products .download-cards[data-view="grid-view"] .grid-list p.download-card__content-box__stock.stock-out { color: var(--ib-danger); } /* ── 6. Price block — bigger, more separation ─────────────────── */ /* Divider before price block */ #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__price.price-old { font-size: 11.5px; font-weight: 400; color: var(--ib-text-muted); text-decoration: line-through; margin: 6px 0 0; line-height: 1.3; } #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__price { font-size: 22px !important; font-weight: 600; color: var(--ib-text-primary); line-height: 1.15; margin: 6px 0 0; display: flex !important; align-items: baseline; gap: 4px; flex-wrap: wrap; } #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__price.has-offer { color: var(--ib-text-primary); margin-top: 0; } /* IVA label next to price */ #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__price > span:not(.promotion):not(.price-off) { font-size: 11px !important; font-weight: 400; color: var(--ib-text-secondary); margin: 0 !important; align-self: flex-end; padding-bottom: 2px; } /* ── 7. Action zone — full-width button, compact stepper ──────── */ #products .download-cards[data-view="grid-view"] .vista-grid { margin-top: 10px; padding: 8px 0 0 !important; border-top: 1px solid rgba(0,0,0,.06); display: flex !important; align-items: center; gap: 6px; } /* Stepper compact — respeta Bootstrap table layout, solo sobreescribe dimensiones */ #products .download-cards[data-view="grid-view"] .quantity-selector-container { flex: 0 0 auto; width: auto !important; padding: 0 !important; } /* input-group-btn: fijar ancho para que no se aplaste en flex context */ #products .download-cards[data-view="grid-view"] .quantity-selector-container .input-group-btn { display: table-cell; width: 28px; min-width: 28px; } #products .download-cards[data-view="grid-view"] .vista-grid .btn-number { width: 28px !important; min-width: 28px; max-width: 28px; height: 28px; padding: 0; border-radius: var(--ib-radius-sm); background: var(--ib-bg); border: 1px solid var(--ib-input-border); color: var(--ib-text-secondary); font-size: 12px; opacity: 1 !important; /* visible aunque esté disabled */ } #products .download-cards[data-view="grid-view"] .vista-grid .btn-number[disabled] { opacity: 0.4 !important; cursor: not-allowed; pointer-events: none; } #products .download-cards[data-view="grid-view"] .vista-grid .input-number { width: 38px !important; min-width: 38px; height: 28px; text-align: center; font-size: 13px; font-weight: 600; padding: 0 2px; border: 1px solid var(--ib-input-border); border-radius: 0; margin: 0 !important; box-shadow: none; } /* Cart button — fills remaining space */ #products .download-cards[data-view="grid-view"] .buy-btn-container { flex: 1; padding: 0 !important; float: none !important; } #products .download-cards[data-view="grid-view"] .buy-btn-container .download-card__content-box__buy-btn { width: 100%; height: 34px; font-size: 16px !important; border-radius: var(--ib-radius-sm) !important; display: flex !important; align-items: center; justify-content: center; padding: 0; } /* ── 8. Nophoto-view (vista sin imagen / "modo excel") ───────────────── */ /* Cada artículo ocupa el ancho completo (fila de tabla) */ #products .download-cards[data-view="nophoto-view"] .download-card { width: 100%; } /* El icon-box tiene height:100px por inline style del template (ViewType==3) pero en esta vista no hay imagen — lo colapsamos con !important. */ #products .download-cards[data-view="nophoto-view"] .download-card__icon-box { height: 0 !important; overflow: hidden; padding: 0 !important; } /* El catalogo.css original fija height:36px en el content-box para nophoto. Ese valor era ignorado cuando flex:1 usaba flex-basis:0%, pero desde que se cambió a flex:0 0 auto el height:36px aplica y corta el contenido. Restauramos height:auto para que el contenido determine la altura. */ #products .download-cards[data-view="nophoto-view"] .download-card__content-box { height: auto !important; } /* ── 8b. Headers row — invisible en grid/list, solo visible en nophoto ── */ /* El .download-cards.headers siempre se renderiza pero en grid/list no tiene contenido visible. Sin este override aparece como línea. */ #products .download-cards.headers { background: transparent !important; border: none !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; margin-bottom:10px !important; } /* ── 9. Alineación filtros con primera fila de cards ─────────────── */ /* "FILTROS" label — quitar margin-bottom de Bootstrap */ #products .padding-filters-mobile > div > div > p { margin: 0 !important; margin-bottom:17px !important; } /* El panel de filtros baja para alinearse con el top de las cards */ #products .padding-filters-mobile { /*padding-top: 20px !important;*/ } /* ── 9. Wrapper principal — transparente, sin caja extra ────────── */ /* El .floatingbox.pd-detail-content envuelve todo (filtros + grilla). Sin fondo ni sombra: las cards y el sidebar flotan directo sobre el bg. */ #products .floatingbox.pd-detail-content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ── 10. Filter sidebar — breathing room ──────────────────────── */ #products .left-container.floatingbox { padding: 14px 14px 16px !important; } /* Stock checkbox toggle — modern pill style */ #products .btn-group-toggleform-group { border-radius: var(--ib-radius-sm) !important; border: 1.5px solid var(--ib-border) !important; overflow: hidden; margin-bottom: 8px; } /* ── 10. "Not available" — subtle, not alarming ────────────────── */ #products .download-cards[data-view="grid-view"] .btn-notavailable { background: var(--ib-bg) !important; color: var(--ib-text-muted) !important; border-radius: var(--ib-radius-sm); font-size: 10.5px; font-weight: 600; padding: 6px 8px; text-align: center; border: 1px solid var(--ib-border); margin-top: 10px; } /* ── 11. Responsive — mobile ──────────────────────────────────── */ /* Burger button: el color de fondo lo define cada silo en su custom.css (.navbar-toggle { background-color: #000 } o similar) y las líneas blancas las pone style.css. No tocar aquí. */ /* ── FIX: Header mobile — layout flex en .info-container ──────────── style.css usaba transform:matrix(1,0,0,1,90,30) para posicionar el search form (90px derecha, 30px abajo). Era un hack posicional que "funcionaba" porque el user-icon quedaba más arriba. Al removerlo el form solapaba el icon. La causa raíz es que no hay un layout flex real. Solución: .info-container como flex row en mobile → [.navbar-header: flex:1 — burger + search] [.client-menu: auto — user icon] */ @media (max-width: 767px) { .header{ height: 74px !important; } /* Flex row: distribuye el espacio entre header y user icon */ .header .navbar > .container.info-container { display: flex !important; align-items: center !important; padding: 0 12px !important; height: 100%; } /* navbar-header ocupa todo el espacio disponible */ .header .navbar > .container.info-container > .navbar-header { flex: 1 1 auto !important; float: none !important; display: flex !important; align-items: center !important; gap: 8px; min-width: 0; } /* Burger: tamaño fijo, no crece */ .header .navbar > .container.info-container > .navbar-header > .navbar-toggle { flex: 0 0 auto !important; margin: 0 !important; padding: 8px !important; } /* Search form: ocupa el espacio restante dentro del navbar-header */ .header .navbar > .container.info-container > .navbar-header > #formBusquedaProductos { flex: 1 1 auto !important; min-width: 0; padding: 0 !important; display: flex !important; } #formBusquedaProductos div { transform: none !important; width: 100% !important; max-width: none !important; height: 36px !important; display: flex !important; align-items: center !important; } #formBusquedaProductos button { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; flex-shrink: 0; } /* client-menu (user icon): tamaño fijo a la derecha */ .header .navbar > .container.info-container > .client-menu { flex: 0 0 auto !important; float: none !important; display: flex !important; align-items: center !important; padding: 0 0 0 16px !important; } } /* ── FIX: Padding lateral del card de detalle en mobile ───────── .pd-detail-content tiene padding:24px que sumado al padding de las col-xs-12 internas (sin .row que neutralice) acumula espacio asimétrico a la izquierda de la imagen. En mobile quitamos el padding lateral. */ @media (max-width: 767px) { #product_detail .pd-detail-content { padding: 16px 0 !important; /* details.css define margin-bottom:20px en ≤800px — lo neutralizamos */ margin-bottom: 0 !important; } #product_detail .product-variants { padding: 0 0 16px !important; } } /* ── FIX: Slick dots del slider de productos relacionados ──────── Con 20+ productos los dots se desbordan en múltiples filas. En mobile los ocultamos — las flechas prev/next son suficiente navegación. */ @media (max-width: 767px) { .pd-related .slick-dots { display: none !important; } } /* Header mobile */ @media (max-width: 767px) { /* navbar-container hereda min-height:56px del contenedor genérico; en mobile cuando el nav está colapsado ese espacio vacío tapa el contenido de abajo */ .navbar > .container.navbar-container { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* texto del cliente más compacto */ .navbar > .container > .client-menu .header-name { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar > .container > .client-menu .header-name strong, .navbar > .container > .client-menu .header-name span { font-size: 11px; } /* carrito: margen derecho para que no quede pegado al borde */ #menuCarrito { margin-right: 8px !important; } /* stock y precio en líneas separadas: flex column en la contenedora. Evita floats que colapsan la altura y rompen el vista-grid con los botones. */ .download-cards[data-view="grid-view"] .content.grid-list > div > a { display: flex !important; flex-direction: column !important; } /* Dentro de un flex column, los floats no aplican — reseteamos los de catalogo.css */ .download-cards[data-view="grid-view"] .download-card__content-box__stock { float: none !important; clear: none !important; width: auto !important; margin: 2px 0 !important; } .download-cards[data-view="grid-view"] .download-card__content-box__price { float: none !important; clear: none !important; display: block !important; width: auto !important; margin-top: 4px !important; } } @media (max-width: 767px) { #products .download-cards[data-view="grid-view"] { gap: 10px; /* Fix 2: separación entre botones de ordenamiento y primera card */ margin-top: 12px; } #products .download-cards[data-view="grid-view"] .download-card__content-box { padding: 10px 10px 8px !important; } #products .download-cards[data-view="grid-view"] .grid-list .download-card__content-box__price { font-size: 18px !important; } /* Mobile: stepper + botón en una sola fila (igual que imagen de referencia). Usamos flex puro en lugar de display:table para compatibilidad iOS Safari. */ #products .download-cards[data-view="grid-view"] .vista-grid { flex-direction: row !important; align-items: center !important; gap: 6px !important; padding: 10px 0 4px !important; } #products .download-cards[data-view="grid-view"] .quantity-selector-container { flex: 0 0 auto !important; width: auto !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; padding: 0 !important; } /* Bootstrap .input-group-btn usa display:table-cell — lo pisamos con flex */ #products .download-cards[data-view="grid-view"] .quantity-selector-container .input-group-btn { display: flex !important; align-items: center !important; width: auto !important; min-width: auto !important; } /* Botones +/- touch-friendly */ #products .download-cards[data-view="grid-view"] .vista-grid .btn-number { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; } #products .download-cards[data-view="grid-view"] .vista-grid .input-number { width: 40px !important; height: 36px !important; font-size: 15px !important; } #products .download-cards[data-view="grid-view"] .buy-btn-container { flex: 1 !important; min-width: 0 !important; width: auto !important; } #products .download-cards[data-view="grid-view"] .buy-btn-container .download-card__content-box__buy-btn { height: 36px !important; font-size: 16px !important; } #products .download-cards[data-view="list-view"] .download-card__content-box__price { float:left !important; } }