/* Theme Name: Wolk Portal Theme URI: https://wolksoft.com Author: Wolk Software Description: Tema lite para el Portal de Clientes Wolk (wolksoft.com). Login como portada, PWA instalable, tres esquemas de color configurables, i18n ES/EN. Pensado para convivir con WooCommerce y el plugin Wolk Tienda. Version: 1.0.5 Requires at least: 6.0 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: wolk-portal */ /* ============================================================ TOKENS — 3 esquemas configurables (Customizer setea data-theme en ) ============================================================ */ :root{ --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif; --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --radius:20px; --maxw:460px; /* default = teal/navy */ --bg-1:#E8FBF8; --bg-2:#F5FBFF; --page:#ECEEF2; --surface:#FFFFFF; --surface-2:#F4F6F8; --ink:#0A1628; --ink-soft:#52617A; --muted:#94A3B8; --line:#E6EAEF; --brand:#13B5A6; --brand-2:#2EC4B6; --on-brand:#062E2A; --ring:rgba(19,181,166,.30); --accent-ink:#0B7A6F; --ok:#047857; --ok-soft:#D1FAE5; --gold:#B7791F; --gold-soft:#FEF3C7; --danger:#B91C1C; --danger-soft:#FEE2E2; --hist:#64748B; --hist-soft:#F1F5F9; --mesh-a:rgba(46,196,182,.45); --mesh-b:rgba(13,40,55,.10); } [data-theme="azul"]{ --bg-1:#E7ECFB; --bg-2:#F4F7FF; --brand:#1E40AF; --brand-2:#3B82F6; --on-brand:#FFFFFF; --ring:rgba(30,64,175,.28); --accent-ink:#1E40AF; --mesh-a:rgba(59,130,246,.40); --mesh-b:rgba(15,23,42,.10); } [data-theme="dark"]{ --bg-1:#08121F; --bg-2:#0B1A2E; --page:#06101C; --surface:#111D35; --surface-2:#16243F; --ink:#EEF3F9; --ink-soft:#9FB0C7; --muted:#6B7C96; --line:#22304C; --brand:#2EC4B6; --brand-2:#3DD5C7; --on-brand:#06231F; --ring:rgba(46,196,182,.35); --accent-ink:#5FE3D4; --ok:#34D399; --ok-soft:#0E3B33; --gold:#FBBF24; --gold-soft:#3A2E12; --danger:#F87171; --danger-soft:#3A1A1A; --hist:#7C8AA3; --hist-soft:#16243F; --mesh-a:rgba(46,196,182,.30); --mesh-b:rgba(46,196,182,.06); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body.wolk{ font-family:var(--body);background:var(--page);color:var(--ink); -webkit-font-smoothing:antialiased;line-height:1.45; } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} a{color:inherit} img{max-width:100%;display:block} :focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:8px} /* ============================================================ APP SHELL ============================================================ */ .wolk-app{min-height:100dvh;display:flex;flex-direction:column; background:linear-gradient(160deg,var(--bg-1),var(--bg-2));position:relative;overflow-x:hidden} .wolk-app::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(620px 420px at 90% -8%,var(--mesh-a),transparent 60%), radial-gradient(520px 420px at -12% 14%,var(--mesh-b),transparent 60%)} .wolk-shell{width:100%;max-width:var(--maxw);margin:0 auto;flex:1;position:relative;z-index:1; display:flex;flex-direction:column;padding:0 0 28px} /* topbar (logo + idioma) */ .wolk-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 6px} .wolk-logo{background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px 14px; box-shadow:0 8px 22px var(--ring);display:inline-grid;place-items:center} .wolk-logo img{height:28px;width:auto;max-width:150px;object-fit:contain} .wolk-lang{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;box-shadow:0 2px 8px rgba(15,23,42,.06)} .wolk-lang button{border:0;background:none;cursor:pointer;font:700 11.5px var(--body);color:var(--ink-soft);padding:5px 12px;border-radius:999px;transition:.15s} .wolk-lang button.on{background:var(--brand);color:var(--on-brand)} /* generic card / button */ .wcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:0 6px 20px rgba(10,22,40,.06)} .wbtn{border:0;cursor:pointer;font-family:var(--display);font-weight:700;border-radius:13px;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none} .wbtn-primary{color:var(--on-brand);background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 10px 22px var(--ring)} .wbtn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)} .wbtn-ghost{background:var(--surface-2);color:var(--ink)} .wbtn-ghost:hover{filter:brightness(.97)} .wbtn-block{width:100%;padding:15px;font-size:15px} /* notices */ .wolk-notice{margin:10px 20px 0;border-radius:12px;padding:11px 14px;font-size:13px;font-weight:600} .wolk-notice.err{background:var(--danger-soft);color:var(--danger)} .wolk-notice.ok{background:var(--ok-soft);color:var(--ok)} /* ============================================================ PWA install banner ============================================================ */ .wolk-install{display:none;margin:10px 16px 0;background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:10px 12px;align-items:center;gap:11px;box-shadow:0 8px 22px rgba(15,23,42,.08)} .wolk-install.show{display:flex} .wolk-install .ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--on-brand);font:700 16px var(--display)} .wolk-install .tx{flex:1;min-width:0} .wolk-install .tx b{font:700 12.5px var(--display)} .wolk-install .tx p{font-size:11px;color:var(--ink-soft);font-weight:500;margin-top:1px} .wolk-install .go{border:0;cursor:pointer;background:var(--brand);color:var(--on-brand);font:700 12px var(--body);padding:8px 13px;border-radius:9px;flex-shrink:0} .wolk-install .x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px} /* ============================================================ LOGIN ============================================================ */ .wolk-auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 24px 8px} .wolk-auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px;text-align:center} .wolk-auth-brand .chip{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px 20px;box-shadow:0 12px 28px var(--ring)} .wolk-auth-brand .chip img{height:36px;max-width:196px;object-fit:contain} .wolk-auth-brand p{font-size:12.5px;color:var(--ink-soft);font-weight:600} .wolk-tabs{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:12px;margin-bottom:16px} .wolk-tab{flex:1;border:0;cursor:pointer;font:700 13.5px var(--body);color:var(--ink-soft);background:transparent;padding:10px;border-radius:9px;transition:.15s} .wolk-tab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(10,22,40,.14)} .wgrp{margin-bottom:13px} .wgrp label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px} .wfield{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1.5px solid transparent;border-radius:12px;padding:0 12px;transition:.15s} .wfield:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--ring)} .wfield svg{width:18px;height:18px;color:var(--muted);flex-shrink:0} .wfield input{flex:1;border:0;outline:0;background:none;font:500 14.5px var(--body);color:var(--ink);padding:13px 0;min-width:0} .wfield input::placeholder{color:var(--muted)} .weye{border:0;background:none;cursor:pointer;color:var(--muted);padding:4px;display:grid;place-items:center} .wrow{display:flex;align-items:center;justify-content:space-between;margin:4px 0 16px} .wchk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);font-weight:600;cursor:pointer} .wchk input{width:16px;height:16px;accent-color:var(--brand)} .wforgot{font-size:12.5px;color:var(--accent-ink);font-weight:700;text-decoration:none} .wolk-divider{display:flex;align-items:center;gap:12px;margin:16px 0} .wolk-divider::before,.wolk-divider::after{content:"";flex:1;height:1px;background:var(--line)} .wolk-divider span{font-size:11px;color:var(--muted);font-weight:600} .wolk-bio{width:100%;border:1.5px solid var(--line);cursor:pointer;background:var(--surface);color:var(--ink);font:700 13.5px var(--body);padding:13px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:9px} .wolk-bio:hover{border-color:var(--brand);background:var(--surface-2)} .wolk-bio svg{width:19px;height:19px;color:var(--brand)} .wolk-foot{text-align:center;font-size:11px;color:var(--muted);font-weight:600;padding:18px 0 8px} /* ============================================================ PORTAL (perfil + secciones) ============================================================ */ .wolk-profile{display:flex;align-items:center;gap:14px;padding:6px 20px 14px} .wavatar{width:62px;height:62px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--on-brand);display:grid;place-items:center;font:800 25px var(--display);box-shadow:0 8px 20px var(--ring)} .wprofile-info{flex:1;min-width:0} .weyebrow{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase} .wname{font:800 20px var(--display);letter-spacing:-.02em;line-height:1.1;margin:1px 0 7px} .wbadges{display:flex;gap:6px;flex-wrap:wrap} .wbadge{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px} .wbadge.svc{background:var(--ring);color:var(--accent-ink)} .wbadge.ok{background:var(--ok-soft);color:var(--ok)} .wchips{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 14px;scrollbar-width:none} .wchips::-webkit-scrollbar{display:none} .wchip{flex:0 0 auto;border:1px solid var(--line);cursor:pointer;background:var(--surface);color:var(--ink); padding:8px 14px;border-radius:999px;font:600 13px var(--body);display:flex;align-items:center;gap:7px;transition:.15s} .wchip:hover{background:var(--surface-2)} .wchip svg{width:15px;height:15px} .wsection{padding:4px 20px 22px} .wsec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px} .wsec-title{font:800 16px var(--display);letter-spacing:-.015em} .wsec-action{background:none;border:0;cursor:pointer;color:var(--accent-ink);font:700 13px var(--body);display:flex;align-items:center;gap:4px;text-decoration:none} .wsec-action svg{width:14px;height:14px} .frow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)} .frow:last-child{border-bottom:0} .flabel{font-size:12.5px;color:var(--muted);font-weight:600} .fvalue{font-size:13.5px;color:var(--ink);font-weight:700;text-align:right;word-break:break-word} .wplan{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(10,22,40,.06)} .wplan + .wplan{margin-top:12px} .wplan-top{display:flex;align-items:center;gap:12px;padding:15px 16px} .wplan-ico{width:46px;height:46px;border-radius:13px;background:var(--ring);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0} .wplan-ico svg{width:24px;height:24px} .wplan-meta{flex:1;min-width:0} .wplan-name{font:800 15px var(--display)} .wplan-sub{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px} .wpill{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap} .wpill.active{background:var(--ok-soft);color:var(--ok)} .wpill.due{background:var(--danger-soft);color:var(--danger)} .wplan-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line)} .wcardline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);font-weight:600} .wcardline svg{width:15px;height:15px} .wproj,.wcase{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:14px;padding:13px 15px} .wproj + .wproj,.wcase + .wcase{margin-top:9px} .wproj.neg{border-left-color:var(--gold)} .wcase{border-left-color:var(--brand)} .wcase.closed{border-left-color:var(--hist);opacity:.92} .wproj-ico,.wcase-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--ok-soft);color:var(--ok)} .wproj.neg .wproj-ico{background:var(--gold-soft);color:var(--gold)} .wcase-ico{background:var(--ring);color:var(--accent-ink)} .wcase.closed .wcase-ico{background:var(--hist-soft);color:var(--hist)} .wproj-ico svg,.wcase-ico svg{width:19px;height:19px} .wproj-body,.wcase-body{flex:1;min-width:0} .wproj-top,.wcase-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:3px} .wproj-name,.wcase-asunto{font:800 14px var(--display);line-height:1.25} .wcase-asunto{font-family:var(--body)} .wproj-sub,.wcase-sub{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap} .wtag{padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:800} .wtag.acc,.wtag.open{background:var(--ok-soft);color:var(--ok)} .wtag.neg,.wtag.prog{background:var(--gold-soft);color:var(--gold)} .wtag.open{background:var(--ring);color:var(--accent-ink)} .wtag.closed{background:var(--hist-soft);color:var(--hist)} .wtoggle{width:100%;margin-top:10px;background:var(--surface-2);border:0;cursor:pointer;border-radius:11px;padding:11px;font:700 13px var(--body);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:6px} .wtoggle svg{width:15px;height:15px;transition:transform .2s} .whidden{display:none} .wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px} .wtile{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px;text-decoration:none} .wtile-ico{width:54px;height:54px;border-radius:16px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink);transition:.15s;position:relative} .wtile:active .wtile-ico{transform:scale(.94)} .wtile-ico svg{width:25px;height:25px} .wtile-label{font-size:11.5px;font-weight:600;text-align:center;color:var(--ink);line-height:1.2;max-width:80px} .winv{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)} .winv:last-child{border-bottom:0} .winv-ico{width:40px;height:40px;border-radius:12px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex-shrink:0} .winv-ico.pend{background:var(--gold-soft);color:var(--gold)} .winv-ico svg{width:19px;height:19px} .winv-body{flex:1;min-width:0} .winv-title{font:800 13.5px var(--display)} .winv-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px} .winv-amt{text-align:right;flex-shrink:0} .winv-amt b{font:800 14px var(--display)} .winv-amt span{display:block;font-size:10.5px;font-weight:800;margin-top:2px} .winv-amt .paid{color:var(--ok)} .winv-amt .pend{color:var(--gold)} .wempty{font-size:12.5px;color:var(--muted);font-style:italic;font-weight:500;padding:6px 0} .wlocked{margin:0 20px 16px;padding:15px 18px;border:1px dashed var(--line);border-radius:18px;display:flex;align-items:center;gap:13px} .wlocked .ic{width:42px;height:42px;border-radius:12px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;flex-shrink:0} .wlocked .ic svg{width:21px;height:21px} .wlocked b{font:800 14px var(--display);display:flex;align-items:center;gap:7px} .wlocked p{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:2px} .wsoon{font-size:10px;font-weight:800;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px} /* svg defaults for inline icons */ .wsection svg,.wchip svg,.wsec-action svg,.wcardline svg,.wplan-ico svg,.wproj-ico svg,.wcase-ico svg,.winv-ico svg,.wtile-ico svg,.wlocked svg,.wfield svg,.weye svg,.wolk-bio svg{ fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ============================================================ TIENDA (catálogo WooCommerce, mobile-first) ============================================================ */ .wshop{padding:4px 20px 24px} .wshop-cat{font:800 16px var(--display);letter-spacing:-.015em;margin:18px 0 12px;display:flex;align-items:center;gap:8px} .wshop-cat .count{font:700 11px var(--body);color:var(--muted);background:var(--surface-2);padding:2px 8px;border-radius:999px} .wshop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .wprod{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(10,22,40,.05);text-decoration:none;color:inherit;transition:.15s} .wprod:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,22,40,.10)} .wprod-img{aspect-ratio:1/1;background:var(--surface-2);display:grid;place-items:center;overflow:hidden} .wprod-img img{width:100%;height:100%;object-fit:cover} .wprod-img .ph{color:var(--muted)} .wprod-img .ph svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4} .wprod-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:6px;flex:1} .wprod-name{font:700 13px var(--body);line-height:1.3;color:var(--ink)} .wprod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px} .wprod-price{font:800 15px var(--display);color:var(--ink)} .wprod-price small{font-size:10px;color:var(--muted);font-weight:600;display:block;margin-top:-2px} .wprod-add{border:0;cursor:pointer;background:var(--brand);color:var(--on-brand);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0} .wprod-add svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} /* responsive: en desktop el shell se ensancha un poco para tienda */ @media (min-width:760px){ body.wolk-tienda-page .wolk-shell{--maxw:980px} body.wolk-tienda-page .wshop-grid{grid-template-columns:repeat(4,1fr)} } /* ============================================================ Valor fiscal sin completar ============================================================ */ .fvalue.empty{color:var(--muted);font-weight:600;font-style:italic} /* ============================================================ WooCommerce — Mi cuenta (de-uglify de las pantallas nativas) El tema base de WC sale sin estilos; acá lo metemos en el shell. ============================================================ */ .woocommerce-account .wsection{padding:4px 18px 26px} /* navegación: de lista con viñetas a fila de chips deslizable */ .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none} .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none} .woocommerce-MyAccount-navigation li{flex:0 0 auto} .woocommerce-MyAccount-navigation li a{display:inline-block;border:1px solid var(--line);background:var(--surface);color:var(--ink); padding:8px 14px;border-radius:999px;font:600 13px var(--body);text-decoration:none;white-space:nowrap;transition:.15s} .woocommerce-MyAccount-navigation li a:hover{background:var(--surface-2)} .woocommerce-MyAccount-navigation li.is-active a{background:var(--brand);color:var(--on-brand);border-color:transparent} /* contenido en tarjeta */ .woocommerce-MyAccount-content{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px;box-shadow:0 6px 20px rgba(10,22,40,.06);color:var(--ink)} .woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3,.woocommerce-Address-title h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em;margin:0 0 10px} .woocommerce-MyAccount-content p{color:var(--ink-soft);font-size:14px;margin:0 0 12px} .woocommerce-MyAccount-content a{color:var(--accent-ink);font-weight:600} /* layout de dos columnas (direcciones) -> apilado y legible */ .woocommerce-Addresses{display:grid;gap:14px;margin-top:14px} @media (min-width:600px){.woocommerce-Addresses{grid-template-columns:1fr 1fr}} .woocommerce-Address{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px} .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .woocommerce-Address address{font-style:normal;font-size:13.5px;color:var(--ink);line-height:1.6} /* formularios */ .woocommerce form .form-row{margin-bottom:13px;display:block} .woocommerce form label{display:block;font:700 12px var(--body);color:var(--ink-soft);margin-bottom:6px} .woocommerce form input.input-text,.woocommerce form input[type=email],.woocommerce form input[type=password], .woocommerce form input[type=tel],.woocommerce form input[type=text],.woocommerce form select,.woocommerce-input-wrapper input, .select2-container .select2-selection{width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px; padding:12px 14px;font:500 14.5px var(--body);color:var(--ink);outline:0;min-height:46px} .woocommerce form input:focus,.woocommerce form select:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--ring)} /* botones WC -> botón Wolk */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit, .woocommerce-Button{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer; font-family:var(--display);font-weight:700;font-size:14px;color:var(--on-brand); background:linear-gradient(135deg,var(--brand),var(--brand-2));padding:13px 20px;border-radius:13px; box-shadow:0 10px 22px var(--ring);text-decoration:none;transition:.15s} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{filter:brightness(1.04);transform:translateY(-1px);color:var(--on-brand)} /* tablas (pedidos) */ .woocommerce table.shop_table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:13.5px} .woocommerce table.shop_table th{background:var(--surface-2);padding:11px 12px;text-align:left;font:700 12px var(--body);color:var(--ink-soft)} .woocommerce table.shop_table td{padding:11px 12px;border-top:1px solid var(--line);color:var(--ink)} /* avisos */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{border:0;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;margin-bottom:14px;list-style:none} .woocommerce-message{background:var(--ok-soft);color:var(--ok)} .woocommerce-info{background:var(--ring);color:var(--accent-ink)} .woocommerce-error{background:var(--danger-soft);color:var(--danger)} /* ============================================================ LOGIN partido: acceso + invitación a la tienda ============================================================ */ body.wolk-login-page .wolk-shell{ --maxw:1040px; } .wolk-auth-grid{ display:grid; gap:22px; align-items:start; width:100%; } .wolk-auth-main{ min-width:0; } .wolk-auth-aside{ min-width:0; display:flex; flex-direction:column; gap:16px; } .wolk-welcome-title{ font:800 26px/1.15 var(--display); letter-spacing:-.02em; color:var(--ink); } .wolk-welcome-sub{ font-size:14.5px; color:var(--ink-soft); font-weight:500; max-width:44ch; } .wolk-shop-invite{ display:flex; align-items:center; gap:14px; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:15px 16px; box-shadow:0 8px 24px rgba(10,22,40,.07); transition:.15s; } .wolk-shop-invite:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,22,40,.12); } .wolk-shop-invite .ico{ width:46px;height:46px;border-radius:13px;flex-shrink:0;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--on-brand); } .wolk-shop-invite .ico svg,.wolk-shop-invite .go svg{ fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; } .wolk-shop-invite .ico svg{ width:24px;height:24px; } .wolk-shop-invite .tx{ flex:1;min-width:0; } .wolk-shop-invite .tx b{ display:block; font:800 15px var(--display); color:var(--ink); } .wolk-shop-invite .tx small{ display:block; font-size:12.5px; color:var(--ink-soft); font-weight:500; margin-top:2px; } .wolk-shop-invite .go{ color:var(--accent-ink); flex-shrink:0; display:grid; place-items:center; } .wolk-shop-invite .go svg{ width:22px;height:22px; } .wolk-shop-peek{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .wolk-shop-peek .peek{ display:flex;flex-direction:column;gap:6px;text-decoration:none; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;transition:.15s;color:inherit; } .wolk-shop-peek .peek:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(10,22,40,.10); } .wolk-shop-peek .peek img,.wolk-shop-peek .peek .ph{ width:100%; aspect-ratio:1/1; border-radius:9px; object-fit:cover; background:var(--surface-2); display:grid; place-items:center; color:var(--muted); } .wolk-shop-peek .peek .ph svg{ width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4; } .wolk-shop-peek .peek-name{ font:600 11.5px/1.3 var(--body); color:var(--ink); } .wolk-shop-peek .peek-price{ font:800 12.5px var(--display); color:var(--accent-ink); } @media (min-width:860px){ .wolk-auth-grid{ grid-template-columns:1fr 1fr; gap:36px; align-items:center; } .wolk-auth-aside{ order:-1; } /* invitación a la izquierda, acceso a la derecha */ .wolk-welcome-title{ font-size:30px; } } /* WooCommerce: contraseña perdida más contenida dentro del shell */ .woocommerce-ResetPassword{ max-width:440px; margin:0 auto; } .woocommerce-ResetPassword p{ font-size:14px; color:var(--ink-soft); } /* ============================================================ FICHA DE PRODUCTO (single product) app-like ============================================================ */ .wprod-single{ max-width:var(--maxw); margin:0 auto; padding:6px 0 8px; } .wback{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink-soft); font:700 13px var(--display); padding:8px 4px; margin-bottom:6px; } .wback svg{ width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; } .wback:hover{ color:var(--accent-ink); } .wfi{ display:grid; gap:18px; } .wfi-media{ display:flex; flex-direction:column; gap:10px; } .wfi-img{ background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; aspect-ratio:1/1; display:grid; place-items:center; box-shadow:0 10px 30px rgba(10,22,40,.08); } .wfi-img img{ width:100%; height:100%; object-fit:cover; display:block; } .wfi-img .ph{ color:var(--muted); } .wfi-img .ph svg{ width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.2; } .wfi-video{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; text-decoration:none; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font:700 13px var(--display); color:var(--ink); } .wfi-video svg{ width:15px;height:15px;fill:currentColor;stroke:none; color:var(--accent-ink); } .wfi-video:hover{ background:var(--surface); box-shadow:0 6px 16px rgba(10,22,40,.10); } .wfi-info{ display:flex; flex-direction:column; gap:12px; } .wfi-chips{ display:flex; flex-wrap:wrap; gap:7px; } .wchip{ text-decoration:none; font:700 11.5px var(--display); color:var(--accent-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:999px; padding:4px 11px; } .wchip:hover{ filter:brightness(.97); } .wfi-title{ font:800 24px/1.18 var(--display); letter-spacing:-.02em; color:var(--ink); } .wfi-price{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .wfi-price .amount{ font:800 30px var(--display); color:var(--ink); } .wfi-price .amount del{ color:var(--muted); font-size:.62em; font-weight:700; margin-right:4px; } .wfi-price .amount ins{ text-decoration:none; } .wfi-price .tag{ font:700 11px var(--display); color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px; } .wfi-iva{ font-size:13px; color:var(--ink-soft); font-weight:600; margin-top:-4px; } .wfi-stock{ align-self:flex-start; font:700 12px var(--display); border-radius:999px; padding:4px 11px; } .wfi-stock.ok{ color:#0f7a52; background:rgba(22,163,74,.12); } .wfi-stock.no{ color:#b42318; background:rgba(220,38,38,.10); } .wfi-short{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); } .wfi-short p{ margin:0 0 8px; } /* Carrito nativo de WooCommerce reestilizado */ .wfi-cart{ margin-top:6px; } .wfi-cart form.cart{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin:0; } .wfi-cart .quantity{ display:flex; align-items:center; } .wfi-cart .quantity input.qty{ width:68px; height:52px; text-align:center; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); font:700 16px var(--display); } .wfi-cart .single_add_to_cart_button, .wprod-single .single_add_to_cart_button{ flex:1; min-width:200px; height:52px; border:0; cursor:pointer; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--on-brand); font:800 15px var(--display); letter-spacing:.01em; box-shadow:0 10px 24px var(--brand-shadow); transition:.15s; } .wfi-cart .single_add_to_cart_button:hover{ transform:translateY(-2px); box-shadow:0 16px 32px var(--brand-shadow); } .wfi-cart .woocommerce-variation-add-to-cart{ display:flex; gap:10px; flex-wrap:wrap; width:100%; } .wfi-cart table.variations{ width:100%; border-collapse:collapse; margin:0 0 10px; } .wfi-cart table.variations td{ padding:4px 0; } .wfi-cart table.variations select{ width:100%; height:48px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); padding:0 12px; font:600 14px var(--body); } .wfi-desc{ margin-top:18px; } .wfi-desc h2{ font:800 17px var(--display); color:var(--ink); margin:0 0 8px; } .wfi-desc p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 10px; } @media (min-width:760px){ .wfi{ grid-template-columns:1fr 1fr; gap:30px; align-items:start; } .wfi-title{ font-size:28px; } .wfi-media{ position:sticky; top:80px; } } /* ============================================================ TIENDA app-like (búsqueda + chips + tarjetas) ============================================================ */ .wshop2{ padding:6px 0 24px; } /* Barra pegajosa: búsqueda + carrito */ .wshop-bar{ position:sticky; top:0; z-index:20; display:flex; gap:10px; align-items:center; padding:10px 0 12px; margin-bottom:2px; background:linear-gradient(var(--bg) 78%, transparent); } .wshop-search{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0 13px; height:46px; box-shadow:0 4px 14px rgba(10,22,40,.05); } .wshop-search svg{ width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round; } .wshop-search input{ flex:1; min-width:0; border:0; background:transparent; outline:none; font:500 15px var(--body); color:var(--ink); } .wshop-search input::placeholder{ color:var(--muted); } .wshop-cart{ position:relative; flex-shrink:0; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; box-shadow:0 4px 14px rgba(10,22,40,.05); transition:.15s; } .wshop-cart:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(10,22,40,.10); } .wshop-cart svg{ width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } .wshop-cart-count{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; display:none; place-items:center; border-radius:10px; background:var(--brand); color:var(--on-brand); font:800 11px var(--display); border:2px solid var(--bg); } .wshop-cart-count.has{ display:grid; } /* Chips de categoría (scroll horizontal) */ .wshop-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .wshop-chips::-webkit-scrollbar{ display:none; } .wchip{ flex:0 0 auto; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font:700 13px var(--display); padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; transition:.14s; white-space:nowrap; } .wchip .n{ font-size:11px; color:var(--muted); font-weight:700; } .wchip:hover{ border-color:var(--brand); color:var(--ink); } .wchip.on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); } .wchip.on .n{ color:var(--on-brand); opacity:.85; } /* Grilla de tarjetas */ .wshop-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; } .wcardp{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(10,22,40,.06); transition:.16s; } .wcardp:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,22,40,.12); } .wcardp-img{ display:block; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden; } .wcardp-img img{ width:100%; height:100%; object-fit:cover; display:block; } .wcardp-img .ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--muted); } .wcardp-img .ph svg{ width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.3; } .wcardp-body{ display:flex; flex-direction:column; gap:9px; padding:12px 13px 13px; flex:1; } .wcardp-name{ font:600 14px/1.32 var(--body); color:var(--ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; } .wcardp-name:hover{ color:var(--accent-ink); } .wcardp-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; } .wcardp-price{ display:flex; flex-direction:column; line-height:1.05; font:800 17px var(--display); color:var(--ink); } .wcardp-price small{ font:600 10.5px var(--body); color:var(--muted); margin-top:3px; } .wcardp-add{ flex-shrink:0; width:40px; height:40px; border:0; cursor:pointer; border-radius:13px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; transition:.15s; box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 40%, transparent); } .wcardp-add:hover{ transform:translateY(-1px) scale(1.04); } .wcardp-add:active{ transform:scale(.94); } .wcardp-add svg{ width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; grid-area:1/1; } .wcardp-add .i-check{ opacity:0; transform:scale(.5); transition:.18s; } .wcardp-add .i-plus{ transition:.18s; } .wcardp-add.done{ background:var(--ok, #1faa6b); } .wcardp-add.done .i-plus{ opacity:0; transform:scale(.5); } .wcardp-add.done .i-check{ opacity:1; transform:scale(1); } .wcardp-add.loading{ pointer-events:none; opacity:.65; } .wshop-noresults{ text-align:center; color:var(--muted); font-weight:600; padding:40px 16px; } /* Toast */ .wshop-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; font:700 13.5px var(--display); padding:11px 18px; border-radius:13px; box-shadow:0 12px 34px rgba(10,22,40,.30); z-index:9999; opacity:0; pointer-events:none; transition:.22s; display:flex; align-items:center; gap:9px; max-width:90vw; } .wshop-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .wshop-toast.err{ background:#b23b3b; } .wshop-toast svg{ width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; } @media (min-width:560px){ .wshop-grid2{ grid-template-columns:repeat(3,1fr); gap:15px; } } @media (min-width:860px){ .wshop-grid2{ grid-template-columns:repeat(4,1fr); } .wcardp-img{ aspect-ratio:1/1; } } /* ============================================================ LOGIN biométrico (Secure Passkeys) — identidad Wolk ============================================================ */ .wolk-passkey{ margin-top:4px; } .wolk-passkey .wolk-passkey-btn, .wolk-passkey button, .wolk-passkey input[type=submit]{ display:flex !important; align-items:center; justify-content:center; gap:10px; width:100% !important; height:48px; padding:0 20px !important; border:0 !important; border-radius:13px !important; cursor:pointer; background:linear-gradient(135deg,var(--brand),var(--brand-2)) !important; color:var(--on-brand) !important; font:800 14.5px var(--display) !important; transition:.15s; } .wolk-passkey .wolk-passkey-btn:hover, .wolk-passkey button:hover{ transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 40%, transparent); } .wolk-passkey > div, .wolk-passkey .secure-passkeys-form{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } /* ============================================================ FICHA DE PRODUCTO WooCommerce — app-like (no "woocommerce pelón") ============================================================ */ .single-product .wolk-shell{ --maxw:1040px; } .woocommerce-breadcrumb{ font-size:12.5px; color:var(--muted); margin:0 0 16px; } .woocommerce-breadcrumb a{ color:var(--accent-ink); text-decoration:none; } /* Layout: galería + resumen lado a lado en desktop */ .single-product div.product{ display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; } .single-product div.product > .woocommerce-product-gallery{ float:none; width:auto; margin:0; flex:1 1 320px; } .single-product div.product > .summary{ float:none; width:auto; margin:0; flex:1 1 340px; } .single-product div.product > .woocommerce-tabs, .single-product div.product > .related, .single-product div.product > .upsells{ flex:1 1 100%; width:100%; } /* Galería redondeada dentro de tarjeta */ .single-product .woocommerce-product-gallery{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:14px; box-shadow:0 8px 24px rgba(10,22,40,.06); } .single-product .woocommerce-product-gallery__image img, .single-product .woocommerce-product-gallery img{ border-radius:14px !important; } .single-product .woocommerce-product-gallery__trigger{ top:22px; right:22px; } /* Resumen */ .single-product .product_title{ font:800 30px/1.15 var(--display); letter-spacing:-.02em; color:var(--ink); margin:0 0 8px; } .single-product .summary .price{ color:var(--accent-ink); font:800 26px var(--display); margin:0 0 12px; } .single-product .summary .price del{ color:var(--muted); font-weight:600; font-size:.62em; margin-right:6px; } .single-product .summary .price ins{ text-decoration:none; } .woocommerce-product-details__short-description{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin-bottom:14px; } .single-product .stock.in-stock{ font:700 13px var(--body); color:var(--ok,#1faa6b); margin-bottom:10px; } .single-product .stock.out-of-stock{ color:#b23b3b; } /* Cantidad + agregar */ .single-product form.cart{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 16px; } .single-product .quantity .qty{ width:74px; height:48px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); text-align:center; font:700 15px var(--body); color:var(--ink); } .single-product .single_add_to_cart_button{ height:48px; border-radius:13px !important; padding:0 24px !important; font-weight:800 !important; } .single-product .product_meta{ font-size:12.5px; color:var(--muted); margin-top:10px; border-top:1px solid var(--line); padding-top:12px; } .single-product .product_meta a{ color:var(--accent-ink); text-decoration:none; } .single-product .product_meta > span{ display:block; margin-bottom:4px; } /* Badge oferta */ .woocommerce span.onsale{ position:absolute; top:12px; left:auto; right:12px; min-height:0; min-width:0; line-height:1.4; background:var(--brand); color:var(--on-brand); border-radius:999px; padding:4px 12px; font:800 11px var(--display); margin:0; } /* Tabs (Descripción / Valoraciones) */ .woocommerce-tabs ul.tabs{ list-style:none; display:flex; gap:8px; margin:0 0 14px; padding:0; } .woocommerce-tabs ul.tabs::before{ display:none; } .woocommerce-tabs ul.tabs li{ background:var(--surface); border:1px solid var(--line) !important; border-radius:999px !important; margin:0; padding:0; } .woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after{ display:none !important; } .woocommerce-tabs ul.tabs li a{ padding:8px 16px; font:700 13px var(--display); color:var(--ink-soft); } .woocommerce-tabs ul.tabs li.active{ background:var(--brand); border-color:var(--brand) !important; } .woocommerce-tabs ul.tabs li.active a{ color:var(--on-brand); } .woocommerce-tabs .panel{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; color:var(--ink-soft); font-size:14.5px; line-height:1.7; } .woocommerce-tabs .panel h2{ font:800 19px var(--display); color:var(--ink); margin:0 0 10px; } /* Productos relacionados / upsells como tarjetas */ .related > h2, .upsells > h2{ font:800 20px var(--display); color:var(--ink); margin:26px 0 14px; } .woocommerce ul.products{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:13px; } .woocommerce ul.products::before, .woocommerce ul.products::after{ display:none; } .woocommerce ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; padding:0 0 12px; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(10,22,40,.06); transition:.16s; display:flex; flex-direction:column; } .woocommerce ul.products li.product:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,22,40,.12); } .woocommerce ul.products li.product a img{ margin:0 0 8px; border-radius:0; width:100%; aspect-ratio:4/3; object-fit:cover; } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font:600 13.5px/1.32 var(--body); color:var(--ink); padding:0 12px; margin:0; } .woocommerce ul.products li.product .price{ display:block; padding:6px 12px 0; color:var(--accent-ink); font:800 15px var(--display); } .woocommerce ul.products li.product .price del{ color:var(--muted); font-size:.78em; margin-right:4px; } .woocommerce ul.products li.product .price ins{ text-decoration:none; } .woocommerce ul.products li.product .button{ margin:10px 12px 0; border-radius:11px !important; height:40px; } @media (min-width:760px){ .woocommerce ul.products{ grid-template-columns:repeat(4,1fr); gap:15px; } }