/* DIGISTORE — Sistema A (tienda pública / carrito / checkout / login). Desde la Fase 14, el header/hero/footer/catálogo/etc. de estas páginas usan directamente los archivos CSS reales de producción (assets/css/streamvault/*.css, copias verbatim). Este archivo queda reducido a lo que esos archivos reales NO cubren porque son componentes propios de esta app (no existen en el tema WordPress): los tokens de color/fuente que usan .field, .input-shell, .card-box, .cart-line, .btn-secondary, .balance-pill, etc. (vía class="theme-storefront" en el ), y las tarjetas de login/recuperar/restablecer (.login-card), porque el login real es un modal — acá es una página dedicada, sin equivalente en los archivos reales. El acento morado del sitio real mezcla 3 tonos distintos en piezas de auth (#7B2FF7 oficial, #7c3aed del modal, #6366f1 de la cuenta nativa) — a pedido del cliente, acá se unifica todo a #7B2FF7 en vez de replicar esa inconsistencia. */ .theme-storefront{ --canvas:#10101a; --canvas-2:#1A1A2E; --surface-1:#1A1A2E; --surface-2:#22223a; --surface-3:#2a2a45; --border-hairline:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16); --text-primary:#ffffff; --text-secondary:rgba(255,255,255,.55); --text-tertiary:rgba(255,255,255,.35); /* streamvault/style.css (copia verbatim, cargada DESPUÉS de este archivo) trae su propio "body{ color:var(--text) }" con --text:#1a1a2e — pensado para SU fondo claro de WooCommerce. Mismo elemento (body), misma especificidad → gana el que carga último y el body queda con texto casi negro sobre fondo oscuro. Cualquier elemento propio (como el número de cantidad del carrito) que no fije su color explícito hereda ese negro y se vuelve invisible. Esta regla usa la clase (mayor especificidad que el selector "body" solo) para ganar siempre, sin importar el orden de carga. */ color:var(--text-primary); /* --violet-300 hace de "acento secundario" (naranja, resalta la palabra clave del hero); --violet-400 es el focus/hover de inputs y bordes (igual al acento base, como en checkout.css real: "focus border-color:var(--accent)"); --violet-500/600 son el acento principal. El tono de hover de BOTONES (#9b4fff) se aplica aparte, más abajo, solo donde el sitio real lo usa. */ --violet-300:#FF6B35; --violet-400:#7B2FF7; --violet-500:#7B2FF7; --violet-600:#7B2FF7; --violet-700:#6a1fd8; --gradient-brand:#7B2FF7; --glow-brand:0 8px 28px rgba(123,47,247,.35); --success:#10b981; --success-bg:rgba(16,185,129,.14); --success-border:rgba(16,185,129,.4); --danger:#ef4444; --danger-bg:rgba(239,68,68,.14); --danger-border:rgba(239,68,68,.4); --warning:#f59e0b; --warning-bg:rgba(245,158,11,.14); --warning-border:rgba(245,158,11,.4); --font-display:'Bebas Neue',sans-serif; --font-mono:'Bebas Neue',sans-serif; /* precios/totales grandes usan Bebas Neue, no monoespaciada — confirmado en products.css/components.css reales */ --font-body:'DM Sans',sans-serif; background-image: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(123,47,247,.3) 0%, transparent 70%), radial-gradient(ellipse 45% 35% at 15% 85%, rgba(255,107,53,.18) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 85% 85%, rgba(0,198,255,.12) 0%, transparent 60%); } /* Páginas con .hero-section propio (tienda.html) ya traen este mismo glow correctamente acotado dentro del hero (ver .hero-bg en hero.css) — el de arriba está pensado para páginas cortas de una sola pantalla (login/carrito/pedido) y en páginas largas el posicionamiento en % (15%/85% del alto) cae en medio del contenido, no al pie. Se desactiva acá y el remate de página lo da el glow del footer, de abajo. */ .no-body-glow{ background-image:none; } /* Remate del footer con el mismo lenguaje visual del hero (glow morado arriba + acentos naranja/celeste en las esquinas), para que la página "cierre" con la misma identidad con la que abre — pedido explícito del cliente en vez de dejar el glow a mitad de página. El margin-top:0 pisa una regla vieja de app.css (.site-footer{margin-top:var(--space-12)}, de antes de la Fase 14) que sigue viva porque cliente/*.html todavía la necesita para su footer viejo (.site-footer-top) — acá, en las páginas con el footer real, ese margen dejaba un hueco de 48px entre la zona clara y el footer con el fondo oscuro del body asomando. */ .site-footer{ position:relative; overflow:hidden; margin-top:0; } .site-footer::before{ content:''; position:absolute; inset:0; z-index:0; background-image: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(123,47,247,.22) 0%, transparent 70%), radial-gradient(ellipse 40% 55% at 8% 100%, rgba(255,107,53,.15) 0%, transparent 60%), radial-gradient(ellipse 40% 55% at 92% 100%, rgba(0,198,255,.12) 0%, transparent 60%); } .site-footer .ftr-top, .site-footer .ftr-bottom{ position:relative; z-index:1; } /* La zona clara (#shop-section) ya cierra redondeada arriba contra la brands-bar oscura (hero.css: border-radius:32px 32px 0 0) — a pedido del cliente, remata igual de redondeada abajo contra el footer (que ahora la toca sin hueco, ver margin-top:0 arriba), simétrico con la curva de arriba. !important porque hero.css se carga después en el y pisa esto. */ div#shop-section.woocommerce{ border-radius:32px !important; } /* Los botones del hero ("Ver catálogo completo"/"¿Cómo funciona?") saltan por ancla a #shop-section/#comoFunciona — sin esto, el salto nativo del navegador deja el título de destino tapado detrás del header fijo (.site-header, height:76px). scroll-margin-top le dice al navegador que se detenga 76px antes, dejando el título visible debajo del header. */ #shop-section, #comoFunciona{ scroll-margin-top:76px; } @media (max-width:768px){ #shop-section, #comoFunciona{ scroll-margin-top:60px; } } /* Hover de botones primarios: el sitio real cambia a #9b4fff en hover (no solo sombra) en .btn-hero-primary/.single_add_to_cart_button/#place_order/.sv-empty-cart-btn — mismo criterio acá para .btn-primary, que ya cubre "Comprar ahora"/"Confirmar pedido"/CTAs del hero. */ .theme-storefront .btn-primary:hover{ background:#9b4fff; } /* Tarjetas de login/recuperar/restablecer — antes vivían triplicadas inline en cada página (index.html, forgot-password.html, reset-password.html); se consolidan acá una sola vez. */ .login-card{ width:100%; max-width:380px; } .login-logo{ display:block; margin:0 auto var(--space-8); height:52px; width:auto; } .login-title{ text-align:center; font-size:26px; margin-bottom:var(--space-1); font-family:var(--font-display); letter-spacing:.5px; } .login-sub{ text-align:center; font-size:14px; margin-bottom:var(--space-8); } .back-link{ display:block; text-align:center; margin-top:var(--space-6); font-size:14px; } /* /cliente/codigo — bot de chat, no un formulario de búsqueda (pedido explícito del cliente: "no sea un buscador, debe ser un bot"). Tarjeta tipo app de mensajería: header con avatar, scroll de burbujas bot/usuario, composer fijo abajo. Misma identidad oscura/violeta del resto de Sistema A. Altura fija (no todo el alto de la página) para que se sienta como una ventana de chat real, no una página larga. */ .code-page{ padding-top:calc(76px + var(--space-10)); padding-bottom:var(--space-12); max-width:1180px; } /* Mismo fondo que .hero-bg + .hero-grid-lines de la tienda (glows violeta/naranja/celeste + grilla sutil de 64px) — acá va todo en una sola declaración background (en vez de 2 capas separadas como en el hero) porque .chat-card no necesita position:absolute de por medio, y así los hijos (header/mensajes/composer) no necesitan z-index para quedar por encima. */ .chat-card{ width:100%; max-width:480px; margin:0 auto; height:min(600px, 72vh); background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), radial-gradient(ellipse 80% 55% at 50% 0%, rgba(123,47,247,.3) 0%, transparent 70%), radial-gradient(ellipse 45% 35% at 15% 85%, rgba(255,107,53,.18) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 85% 85%, rgba(0,198,255,.12) 0%, transparent 60%), #080810; background-size:64px 64px, 64px 64px, auto, auto, auto, auto; border:1px solid var(--border-hairline); border-radius:var(--radius-lg); display:flex; flex-direction:column; overflow:hidden; } .chat-header{ flex:none; display:flex; align-items:center; gap:12px; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border-hairline); } .chat-bot-avatar{ width:40px; height:40px; border-radius:50%; flex:none; font-size:19px; background:#E8304A; display:flex; align-items:center; justify-content:center; } .chat-header-info{ flex:1; min-width:0; } .chat-bot-name{ font-family:var(--font-display); font-size:16px; letter-spacing:.4px; } .chat-bot-status{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-tertiary); margin-top:1px; } .chat-dot{ width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 5px var(--success); } .chat-header-links{ display:flex; gap:14px; flex:none; } .chat-header-links a{ font-size:12.5px; color:var(--text-secondary); text-decoration:none; white-space:nowrap; } .chat-header-links a:hover{ color:var(--text-primary); } @media (max-width:480px){ .chat-header-links{ display:none; } } .chat-messages{ flex:1; overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); } .chat-msg{ display:flex; } .chat-msg-bot{ justify-content:flex-start; } .chat-msg-user{ justify-content:flex-end; } .chat-bubble{ max-width:82%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5; } .chat-msg-bot .chat-bubble{ background:var(--surface-2); color:var(--text-primary); border-bottom-left-radius:4px; } .chat-msg-user .chat-bubble{ background:var(--violet-500); color:#fff; border-bottom-right-radius:4px; } .chat-bubble b{ color:inherit; } /* Indicador "escribiendo…" — 3 puntos que rebotan en cascada, igual que WhatsApp/Messenger. */ .chat-typing{ display:flex; gap:4px; padding:4px 2px; } .chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-tertiary); animation:chatTypingBounce 1.2s infinite; } .chat-typing span:nth-child(2){ animation-delay:.2s; } .chat-typing span:nth-child(3){ animation-delay:.4s; } @keyframes chatTypingBounce{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } /* El iframe muestra el HTML real del correo (tal cual llega del proveedor) — se le deja fondo blanco fijo a propósito, si no el texto del correo (pensado para fondo claro) queda invisible dentro de la burbuja oscura. */ .chat-code-frame{ display:block; width:100%; min-height:220px; border:1px solid var(--border-hairline); border-radius:var(--radius-md); background:#fff; margin-top:var(--space-2); } .chat-composer{ flex:none; display:flex; align-items:center; gap:8px; padding:var(--space-3) var(--space-4); border-top:1px solid var(--border-hairline); } .chat-composer input{ flex:1; background:var(--surface-2); border:1px solid var(--border-hairline); border-radius:var(--radius-pill); padding:10px 16px; font-size:14px; color:var(--text-primary); outline:none; transition:border-color .15s; } .chat-composer input::placeholder{ color:var(--text-tertiary); } .chat-composer input:focus{ border-color:var(--violet-400); } .chat-send-btn{ flex:none; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; background:var(--violet-500); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s; } .chat-send-btn svg{ width:17px; height:17px; } .chat-send-btn:hover{ background:#9b4fff; } .chat-send-btn:disabled{ opacity:.5; cursor:default; } @media (max-width:640px){ .code-page{ padding-top:calc(76px + var(--space-8)); } .chat-card{ height:min(600px, 78vh); } } /* Carrito — layout de 2 columnas (lista de productos + resumen fijo a la derecha), calcado de la estructura real de WooCommerce (tabla Producto/Total + caja "Total del carrito" aparte) pero con la identidad visual oscura/violeta de DIGISTORE en vez de su tema claro. */ .cart-layout{ display:grid; grid-template-columns:1fr 340px; gap:var(--space-6); align-items:start; margin-top:var(--space-6); } @media (max-width:860px){ .cart-layout{ grid-template-columns:1fr; } } .cart-items-col{ background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); overflow:hidden; } .cart-col-heading{ display:flex; justify-content:space-between; padding:var(--space-4) var(--space-5); font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-tertiary); border-bottom:1px solid var(--border-hairline); } #cartLines{ padding:0 var(--space-5); } .cart-line{ gap:var(--space-3); align-items:center; padding:var(--space-3) 0; } .cart-line-logo{ width:44px; height:44px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--border-hairline); } .cart-line-logo img{ object-fit:contain; padding:5px; } .cart-line-info{ display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; row-gap:2px; } .cart-line-name{ flex-basis:100%; font-size:14.5px; line-height:1.3; } .cart-line-price{ font-size:13px; } .cart-line-total{ font-family:'Inter',sans-serif; font-weight:700; font-size:15px; color:var(--text-primary); white-space:nowrap; flex:none; } .cart-qty{ margin-top:0; } .cart-qty button{ width:24px; height:24px; font-size:13px; transition:border-color .15s, background .15s; } .cart-qty button:hover{ border-color:var(--violet-400); background:var(--surface-3); } .cart-qty span{ color:var(--text-primary); font-size:13px; min-width:16px; } .cart-line-remove{ border-radius:8px; transition:background .15s, color .15s; } .cart-line-remove:hover{ background:var(--danger-bg); } .cart-summary-col{ position:sticky; top:calc(76px + var(--space-5)); } .cart-summary-card{ background:var(--surface-1); } .cart-summary-title{ font-family:'Inter',sans-serif; font-weight:700; font-size:18px; letter-spacing:0; margin-bottom:var(--space-4); } .sv-cart .cart-summary-row.total{ font-family:'Inter',sans-serif; } /* .sv-page{min-height:calc(100vh - 100px)} (layout.css) deja un hueco enorme abajo cuando el carrito tiene pocos productos (la página se estira a casi toda la pantalla igual). Se pisa acá con .sv-page.sv-cart (misma especificidad que .sv-page solo, pero doble selector gana por especificidad sin depender del orden de los en el ) para que el carrito mida lo que su contenido necesita, con un margen abajo parecido al de arriba en vez de ese vacío. */ .sv-page.sv-cart{ min-height:auto; padding-bottom:60px; } /* El carrito usa el sistema de colores de streamvault (--text/--muted, oscuros — ver .sv-page-title más arriba en layout.css), no el de tienda-theme.css (--text-primary blanco, pensado para texto sobre tarjetas oscuras). .empty-state es compartido con páginas de fondo oscuro (wallet, etc.), así que acá se pisa solo dentro de .sv-cart para que el texto no quede casi invisible sobre el fondo claro de esta página. */ .sv-cart .empty-state{ color:var(--muted); } .sv-cart .empty-state svg{ color:var(--text); opacity:.35; } .sv-cart .empty-state-title{ color:var(--text); } .sv-cart .empty-state p{ color:var(--muted); } /* Con el carrito vacío, .cart-layout y .sv-page-header se ocultan por JS (carrito.js) — lo único que queda es esto, así que se centra como pantalla propia en vez de quedar pegado a la izquierda dentro de .sv-inner (que es block, no centra el por su cuenta). :has(.empty-state) es a propósito: con el carrito CON productos, #emptyCartArea queda vacío (innerHTML='') — sin este condicional, min-height:50vh dejaba ~400px en blanco antes del footer incluso con el div sin contenido. */ .sv-cart #emptyCartArea:has(.empty-state){ display:flex; flex-direction:column; align-items:center; text-align:center; padding:80px 20px 60px; min-height:50vh; justify-content:center; } .sv-cart #emptyCartArea .empty-state{ padding:0 0 var(--space-4); } /* Página de pedido (/pedido) — calcada de los plugins reales de producción (digistore-licenses.php: "Tus datos de acceso" + digistore-sheet-sync.php: panel admin). A diferencia del resto de Sistema A (fondo oscuro), esta página usa la MISMA "zona clara" que el catálogo (#shop-section): el contenido que ve el cliente (resumen + licencias) es blanco/negro con acentos rojo-violeta, calcado 1:1 del CSS real del plugin — el panel admin se queda oscuro porque el plugin real también lo hardcodea así, sin importar el tema de la página (ver digistore-sheet-sync.php, #dgs-admin-panel con background:#1a1a2e fijo). */ .pedido-light-page{ background:#f0f0f6; } .pedido-light-page .sv-inner{ color:#1a1a2e; } .thankyou-card{ display:flex; align-items:flex-start; gap:var(--space-3); background:#fff; border-left:4px solid var(--violet-500); border-radius:12px; padding:var(--space-4); margin-bottom:var(--space-4); box-shadow:0 2px 16px rgba(0,0,0,.05); } .thankyou-check{ flex:none; width:30px; height:30px; border-radius:9px; margin-top:1px; background:rgba(123,47,247,.12); color:var(--violet-500); display:flex; align-items:center; justify-content:center; } .thankyou-title{ font-family:var(--font-display); font-size:19px; letter-spacing:.5px; color:#1a1a1a; margin-bottom:3px; } .thankyou-sub{ font-size:13px; color:#666; } .thankyou-sub strong{ color:#1a1a1a; } .resumen-box{ background:#fff; border:1px solid #eee; border-radius:12px; margin-bottom:var(--space-4); padding:var(--space-4); box-shadow:0 2px 16px rgba(0,0,0,.05); } .resumen-title{ font-family:var(--font-display); font-size:13.5px; letter-spacing:.5px; color:#1a1a1a; margin-bottom:var(--space-2); } .resumen-row{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-2) 0; border-bottom:1px solid #f5f5f5; } .resumen-row:last-child{ border-bottom:0; } .resumen-name{ font-weight:700; font-size:12.5px; color:#1a1a1a; } .resumen-qty{ font-size:11px; color:#999; margin-top:1px; } .resumen-price{ font-family:var(--font-mono); font-weight:600; font-size:12.5px; color:#1a1a1a; } .resumen-total{ padding-top:var(--space-3); margin-top:var(--space-1); border-top:1px solid #eee; border-bottom:0; } .resumen-total .resumen-name{ color:var(--violet-500); } .resumen-total .resumen-price{ font-size:15px; color:var(--violet-500); } .lic-section{ margin:var(--space-5) 0; } .lic-header-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); padding-bottom:var(--space-2); margin-bottom:var(--space-3); border-bottom:2px solid #E8304A; } .lic-title{ font-family:var(--font-display); font-size:14px; letter-spacing:.5px; color:#1a1a1a; } .lic-card{ background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; margin-bottom:var(--space-3); box-shadow:0 2px 16px rgba(0,0,0,.05); } .lic-card-head{ background:#fafafa; padding:var(--space-2) var(--space-4); border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; } .lic-card-name{ font-weight:700; font-size:12.5px; color:#1a1a1a; } .lic-badge{ background:#fff0f2; color:#E8304A; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; border:1px solid #fcc; } .lic-item{ padding:var(--space-3) var(--space-4); border-bottom:1px solid #f5f5f5; } .lic-item:last-child{ border-bottom:0; } .lic-fields{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#eee; border:1px solid #eee; border-radius:8px; overflow:hidden; margin-bottom:var(--space-3); } .lic-field{ background:#fff; padding:8px 10px; display:flex; flex-direction:column; gap:3px; } .lic-field-label{ font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:#bbb; font-weight:600; } .lic-field-value{ font-size:12px; font-weight:700; color:#1a1a1a; word-break:break-all; } .lic-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); } .lic-validity-col{ display:flex; flex-direction:column; gap:2px; } .lic-validity{ font-size:11.5px; color:#888; } .lic-validity span{ color:#27AE60; font-weight:700; } .lic-delivered{ font-size:10.5px; color:#aaa; } .lic-copy-btn{ display:inline-flex; align-items:center; gap:5px; background:#1a1a1a; color:#fff; border:1px solid #1a1a1a; border-radius:7px; padding:6px 12px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:background .15s, border-color .15s; } .lic-copy-btn:hover{ background:#E8304A; border-color:#E8304A; } .lic-copy-btn.ds-copied, .lic-copy-btn.lic-copied{ background:#27AE60 !important; border-color:#27AE60 !important; } .lic-copy-all{ font-size:11.5px; } @media (max-width:600px){ .lic-fields{ grid-template-columns:repeat(2,1fr); } } /* Panel admin — paleta calcada EXACTA de digistore-sheet-sync.php (#dgs-admin-panel), que la hardcodea así sin importar el tema de la página: fondo #1a1a2e, tarjetas de item #16213e, acento rosa #e94560, inputs azul-noche #0f3460 con borde #333. No usa los tokens --surface-*/ --violet-* del resto del sitio a propósito, para que quede igual de idéntico al original. */ .admin-panel-box{ background:#1a1a2e; border-radius:10px; margin-bottom:var(--space-4); padding:24px; color:#fff; font-family:var(--font-body); } .admin-panel-title{ font-size:16px; color:#e94560; margin-bottom:6px; letter-spacing:.3px; } .admin-panel-sub{ font-size:12px; color:#aaa; margin-bottom:16px; } .admin-panel-items-card{ background:#16213e; border-radius:8px; margin-bottom:16px; overflow:hidden; } .admin-panel-item{ padding:12px 14px; font-size:13px; display:flex; flex-direction:column; gap:3px; border-bottom:1px solid rgba(255,255,255,.06); } .admin-panel-item:last-child{ border-bottom:0; } .admin-panel-item strong{ color:#e94560; } .admin-panel-item span{ color:#aaa; font-size:11px; word-break:break-all; } .admin-panel-box .field{ margin-bottom:14px; } .admin-panel-box .field label{ font-size:12px; color:#aaa; margin-bottom:4px; display:block; } .admin-panel-box .select-shell{ min-height:40px !important; background:#0f3460 !important; border:1px solid #333 !important; } .admin-panel-box .select-shell select{ color:#fff !important; } .admin-panel-search{ position:relative; } .admin-panel-count{ color:#555; font-size:11px; font-weight:400; } .admin-panel-box input[type="text"], .admin-panel-box input[type="number"], .admin-panel-box input[readonly]{ width:100%; padding:9px 12px; border-radius:5px; border:1px solid #333; background:#0f3460; color:#fff; font-size:14px; box-sizing:border-box; font-family:var(--font-body); transition:border-color .15s, background .15s; } .admin-panel-box input[readonly]{ color:#aaa; cursor:default; } .admin-panel-box input[type="text"]:focus, .admin-panel-box input[type="number"]:focus{ outline:none; border-color:#e94560; } .admin-panel-box input[type="text"].valid{ border-color:#4ade80; } .admin-panel-dropdown{ position:absolute; z-index:20; left:0; right:0; max-height:220px; overflow-y:auto; background:#0f3460; border:1px solid #e94560; border-top:0; border-radius:0 0 6px 6px; box-shadow:0 4px 12px rgba(0,0,0,.5); } .admin-panel-drop-item{ padding:9px 12px; cursor:pointer; font-size:13px; color:#fff; border-bottom:1px solid #1a2a50; } .admin-panel-drop-item:hover{ background:#e94560; } .admin-panel-drop-item span{ color:#9aa; font-size:11.5px; } .admin-panel-grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } @media (max-width:600px){ .admin-panel-grid3{ grid-template-columns:1fr; } } .admin-panel-box .btn-row{ display:flex; gap:10px; margin-top:6px; } .admin-panel-box .btn-primary{ flex:2; background:#e94560; border-color:#e94560; padding:10px 20px; font-size:14px; min-height:auto; } .admin-panel-box .btn-primary:hover{ background:#d63b54; } .admin-panel-btn-ghost{ flex:1; background:#0f3460; border:1px solid #e94560; color:#e94560; padding:10px 16px; font-size:13px; min-height:auto; } .admin-panel-btn-ghost:hover{ background:#16213e; } .admin-panel-msg{ font-size:13px; min-height:18px; margin-top:2px; margin-bottom:8px; } .admin-panel-msg.ok{ color:#4ade80; } .admin-panel-msg.error{ color:#f87171; } /* ── Panel del revendedor en /pedido ("Registrá tu venta") — mismo esqueleto que .admin-panel-box de arriba (caja oscura, buscador con dropdown, grid de campos) pero repintado en violeta: esto NO es una acción de administrador, es el registro privado de cada revendedor sobre su propia venta (a quién se la vendió y por cuánto), nada que ver con reasignar el dueño real del pedido. */ .reseller-panel-box{ background:var(--surface-1); border-radius:10px; margin-bottom:var(--space-4); padding:24px; color:var(--text-primary); font-family:var(--font-body); border:1px solid var(--border-hairline); } .reseller-panel-title{ font-size:16px; color:var(--violet-300); margin-bottom:2px; letter-spacing:.3px; font-weight:700; } .reseller-panel-sub{ font-size:12px; color:var(--text-tertiary); margin-bottom:16px; } .reseller-panel-item-name{ font-size:13px; font-weight:700; margin-bottom:14px; color:var(--text-primary); } .reseller-panel-box .field{ margin-bottom:14px; } .reseller-panel-box .field label{ font-size:12px; color:var(--text-tertiary); margin-bottom:4px; display:block; } .reseller-panel-search{ position:relative; } .reseller-panel-box input[type="text"], .reseller-panel-box input[type="number"]{ width:100%; padding:9px 12px; border-radius:5px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-primary); font-size:14px; box-sizing:border-box; font-family:var(--font-body); transition:border-color .15s; } .reseller-panel-box input:focus{ outline:none; border-color:var(--violet-400); } .reseller-panel-dropdown{ position:absolute; z-index:20; left:0; right:0; max-height:200px; overflow-y:auto; background:var(--surface-2); border:1px solid var(--violet-400); border-top:0; border-radius:0 0 6px 6px; box-shadow:0 4px 12px rgba(0,0,0,.5); } .reseller-panel-drop-item{ padding:9px 12px; cursor:pointer; font-size:13px; color:var(--text-primary); border-bottom:1px solid var(--border-hairline); } .reseller-panel-drop-item:hover{ background:var(--violet-600); } .reseller-panel-drop-item span{ color:var(--text-tertiary); font-size:11.5px; } .reseller-panel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:600px){ .reseller-panel-grid{ grid-template-columns:1fr; } } .reseller-profit-box{ background:var(--success-bg); border:1px solid var(--success-border); border-radius:8px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .reseller-profit-box .lbl{ font-size:12px; color:var(--text-secondary); } .reseller-profit-box .val{ font-weight:700; color:var(--success); font-size:15px; } .reseller-panel-msg{ font-size:13px; min-height:18px; margin-top:2px; margin-bottom:8px; } .reseller-panel-msg.ok{ color:var(--success); } .reseller-panel-msg.error{ color:var(--danger); } /* Pregunta "¿mismo cliente para todo el pedido?" — solo aparece con 2+ productos, para no obligar a escribir el mismo nombre varias veces (ver renderResellerPanel()). */ .reseller-same-client-q{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border-hairline); border-radius:8px; padding:10px 12px; margin-bottom:16px; font-size:13px; } .reseller-same-client-btns{ display:flex; gap:8px; } .reseller-same-client-btns .btn{ padding:6px 12px; font-size:12.5px; } .reseller-same-client-btns .btn.chosen{ background:var(--violet-500); border-color:var(--violet-400); color:#fff; } .reseller-item-synced-note{ font-size:12px; color:var(--text-tertiary); padding:9px 12px; background:var(--surface-2); border-radius:5px; border:1px solid var(--border-hairline); } .reseller-item-synced-note a{ color:var(--violet-300); cursor:pointer; } /* Campo "Perfil": número fijo (no editable) + nombre pegado — mismo hábito que ya se usaba a mano en el Sheet (ej "2Erika" = perfil 2, cliente Erika). El revendedor solo puede escribir el nombre; el número lo protege el backend (ResellerController::relinkProfileName()). */ .perfil-field-row{ display:flex; align-items:center; gap:8px; } .perfil-chip{ flex:0 0 auto; min-width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--violet-600); color:var(--violet-200); font-weight:700; font-size:14px; border-radius:5px; border:1px solid var(--border-strong); } .perfil-field-row input{ flex:1 1 auto; height:38px; min-width:0; padding:0 12px; font-size:14px; font-family:var(--font-body); background:var(--surface-2); border:1.5px solid var(--border-strong); border-radius:5px; color:var(--text-primary); outline:0; transition:border-color .15s ease, background .15s ease; } .perfil-field-row input::placeholder{ color:var(--text-tertiary); } .perfil-field-row input:focus{ border-color:var(--violet-400); background:var(--surface-3); } .perfil-hint{ font-size:11.5px; color:var(--text-tertiary); margin-top:5px; } /* ── Panel admin (las 6 páginas de /admin/) — paleta clara + rosa, calcada de las tarjetas de /pedido ("Tus datos de acceso"), a pedido del cliente ("de todo deja el mismo stylo de colores de la tienda"). Mismo mecanismo que .shop-light-zone de arriba: redefine acá los tokens que .card-box/.btn-primary/.data-table/.select-shell/.icon-btn/.pill-tab/etc. ya consumen vía var(), así se re-visten solos sin duplicar cada componente. .admin-page ya está en el de las 6 páginas (ver admin/*.html) — combinado con .theme-storefront para ganarle en especificidad al bloque de arriba (mismo selector .theme-storefront) sin depender del orden de las reglas en el archivo. */ .theme-storefront.admin-page{ --canvas:#F3F2F8; --canvas-2:#EAE8F2; --surface-1:#FFFFFF; --surface-2:#F4F3F9; --surface-3:#EBE9F4; --border-hairline:rgba(20,15,40,.08); --border-strong:rgba(20,15,40,.16); --text-primary:#1C1730; --text-secondary:#5B5578; --text-tertiary:#8B85A3; /* Mismo rosa #E8304A que ya usan .lic-header-row/.lic-badge/.lic-copy-btn:hover en /pedido — acá hace de acento único (antes eran los violetas de .theme-storefront) para que todo lo que ya usa var(--violet-*)/var(--gradient-brand) (links, .btn-primary, .pill-tab.active, focus de inputs, ::selection) quede en la misma familia de color. */ --violet-300:#E8304A; --violet-400:#E8304A; --violet-500:#E8304A; --violet-600:#C81F38; --violet-700:#A81730; --gradient-brand:#E8304A; --glow-brand:0 8px 28px rgba(232,48,74,.35); background-image:none; } /* Header del panel admin — mismo negro translúcido que el header real de la tienda (streamvault/header.css .site-header, no cargado en las páginas admin, así que no hay choque de selectores), a pedido del cliente. El resto de la página se queda clara/rosa — solo esta barra vuelve a los tokens oscuros originales de .theme-storefront, por eso los colores de abajo van a mano (var(--text-*)/var(--surface-*) ya están pisados por el claro del bloque de arriba y no sirven acá). */ .theme-storefront.admin-page .site-header{ background:rgba(6,6,14,.92); backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,.07); } .theme-storefront.admin-page .site-nav a{ color:rgba(255,255,255,.55); } .theme-storefront.admin-page .site-nav a:hover, .theme-storefront.admin-page .site-nav a.active{ color:#fff; background:rgba(255,255,255,.07); } .theme-storefront.admin-page .balance-pill{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); } .theme-storefront.admin-page .balance-pill span{ color:#fff; } .theme-storefront.admin-page .site-icon-btn{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7); } .theme-storefront.admin-page .site-icon-btn:hover{ color:#fff; background:rgba(255,255,255,.11); } .theme-storefront.admin-page .site-header-hamburger{ border-color:rgba(255,255,255,.2); color:#fff; } @media (max-width:760px){ .theme-storefront.admin-page .site-nav{ background:rgba(6,6,14,.97); border-bottom:1px solid rgba(255,255,255,.07); } .theme-storefront.admin-page .site-nav a:hover, .theme-storefront.admin-page .site-nav a.active{ background:rgba(255,255,255,.09); } } /* El hover fijo de .btn-primary de arriba (línea ~97) pisa el acento con un violeta a propósito para la tienda — acá se re-pisa con un rosa más oscuro que #E8304A, mismo criterio de "hover más intenso que el color base" pero en la familia rosa del panel admin. */ .theme-storefront.admin-page .btn-primary:hover{ background:#C81F38; } /* Los recuadros de los filtros/buscadores (.select-shell/.input-shell, usados en toolbars y en los campos de los modales) traían un borde marcado de 1.5px pensado para el fondo oscuro original — a pedido del cliente ("quita los rectángulos marcados") se quita el borde en el panel admin y queda solo el fondo (--surface-2) como única señal visual del campo. */ .theme-storefront.admin-page .select-shell, .theme-storefront.admin-page .input-shell{ border:none; box-shadow:0 1px 3px rgba(20,15,40,.1); } .theme-storefront.admin-page .input-shell:focus-within{ border:none; background:var(--surface-3); box-shadow:0 1px 3px rgba(20,15,40,.1); } /* Buscador de cliente con autocompletado (reemplaza el