/* ============================================================ Sistema de diseño — dark theme tipo "panel de control", con variante clara. Oscuro por defecto; `data-theme="light"` en (fijado por el botón de tema en base.html) activa la variante clara. Todo se remapea sobre las variables nativas de Pico para que botones/inputs/cards heredan la paleta sin tocar cada plantilla. ============================================================ */ :root { --bg: #0d1117; --bg-secondary: #161b22; --bg-card: #21262d; --bg-input: #1c2128; --border: #30363d; --border-focus: #4f8ef7; --accent: #4f8ef7; --accent-hover: #3b7de8; --accent-muted: rgba(79, 142, 247, 0.12); --text: #e6edf3; --text-muted: #8b949e; --text-subtle: #484f58; --success: #3fb950; --success-hover: #2ea043; --error: #f85149; --warning: #d29922; --warning-hover: #bb8619; --radius: 8px; --sidebar-w: 240px; --accent-rgb: 79, 142, 247; --success-rgb: 63, 185, 80; --error-rgb: 248, 81, 73; --warning-rgb: 210, 153, 34; /* Remapeo de Pico: el resto del sitio usa var(--pico-*) tal como ya estaba, así que basta con redefinir estas variables para que todo herede la paleta nueva. */ --pico-background-color: var(--bg); --pico-color: var(--text); --pico-h1-color: var(--text); --pico-h2-color: var(--text); --pico-h3-color: var(--text); --pico-h4-color: var(--text); --pico-h5-color: var(--text); --pico-h6-color: var(--text); --pico-muted-color: var(--text-muted); --pico-muted-border-color: var(--border); --pico-border-radius: var(--radius); --pico-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --pico-font-size: 14px; --pico-card-background-color: var(--bg-card); --pico-card-border-color: var(--border); --pico-card-sectioning-background-color: var(--bg-card); --pico-form-element-background-color: var(--bg-input); --pico-form-element-border-color: var(--border); --pico-form-element-color: var(--text); --pico-form-element-placeholder-color: var(--text-subtle); --pico-form-element-active-background-color: var(--bg-input); --pico-form-element-active-border-color: var(--border-focus); --pico-form-element-focus-color: transparent; --pico-form-element-selected-background-color: var(--accent-muted); --pico-primary: var(--accent); --pico-primary-background: var(--accent); --pico-primary-border: var(--accent); --pico-primary-hover: var(--accent-hover); --pico-primary-hover-background: var(--accent-hover); --pico-primary-hover-border: var(--accent-hover); --pico-primary-focus: var(--accent-muted); --pico-primary-inverse: #fff; --pico-primary-underline: var(--accent); --pico-primary-hover-underline: var(--accent-hover); --pico-secondary: var(--text-muted); --pico-secondary-background: var(--bg-input); --pico-secondary-border: var(--border); --pico-secondary-hover: var(--text); --pico-secondary-hover-background: var(--bg-card); --pico-secondary-hover-border: var(--border); --pico-secondary-focus: var(--accent-muted); --pico-secondary-inverse: var(--text); --pico-ins-color: var(--success); --pico-del-color: var(--error); --pico-mark-background-color: var(--warning); --pico-mark-color: #1a1a1a; --pico-dropdown-background-color: var(--bg-card); --pico-dropdown-border-color: var(--border); --pico-dropdown-color: var(--text); --pico-dropdown-hover-background-color: var(--bg-input); --pico-table-border-color: var(--border); --pico-table-row-stripped-background-color: var(--bg-input); --pico-code-background-color: var(--bg-input); --pico-code-color: var(--text-muted); --pico-switch-background-color: var(--border); --pico-switch-checked-background-color: var(--accent); } :root[data-theme="light"] { --bg: #ffffff; --bg-secondary: #f6f8fa; --bg-card: #ffffff; --bg-input: #f6f8fa; --border: #d0d7de; --border-focus: #4f8ef7; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-muted: rgba(37, 99, 235, 0.1); --text: #1f2328; --text-muted: #57606a; --text-subtle: #8c959f; --success: #1a7f37; --success-hover: #116329; --error: #cf222e; --warning: #9a6700; --warning-hover: #7a5200; --accent-rgb: 37, 99, 235; --success-rgb: 26, 127, 55; --error-rgb: 207, 34, 46; --warning-rgb: 154, 103, 0; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); } button, [role="button"], input[type="submit"], input[type="button"] { font-weight: 600; letter-spacing: 0.3px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 100; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; font-size: 1.1rem; padding: 0; transition: background-color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { border-color: var(--border-focus); } /* Variante usada dentro de `.app-sidebar-brand` (junto al nombre de la tienda), en vez de flotar fija sobre toda la página. */ .theme-toggle-inline { position: static; width: 1.9rem; height: 1.9rem; font-size: 1rem; margin-left: auto; flex-shrink: 0; } html, body { height: 100%; margin: 0; } .app-layout { min-height: 100vh; } .app-sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; /* fija de verdad: nunca hace scroll, ni siquiera si el contenido creciera */ overflow: hidden; padding: 1.5rem 1rem; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; } .app-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; } .app-sidebar-logo { font-size: 1.6rem; line-height: 1; } .app-sidebar-brand-title { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; } .app-sidebar-brand-subtitle { margin: 0; font-size: 0.8rem; color: var(--pico-muted-color); } .app-sidebar-email { margin: 0.75rem 0 1.25rem; font-size: 0.75rem; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-sidebar-legal { font-size: 0.75rem; color: var(--pico-muted-color); margin: 0; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); display: flex; gap: 0.4rem; } .app-sidebar-version { font-size: 0.75rem; color: var(--pico-muted-color); margin: 0.35rem 0 0; } .app-sidebar nav ul { list-style: none; padding: 0; margin: 0; } .app-sidebar nav li { margin-bottom: 0.25rem; } .app-sidebar nav li.app-sidebar-section-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); padding: 0 0.75rem; margin: 1.25rem 0 0.4rem; } .app-sidebar nav li:first-child.app-sidebar-section-label { margin-top: 0; } .app-sidebar nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: var(--pico-border-radius); text-decoration: none; color: var(--text); white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .app-sidebar nav a:hover { background: var(--accent-muted); color: var(--accent); } .app-sidebar nav .icon { font-size: 1.1rem; } .icon-rappi svg, .icon-uber-eats svg { vertical-align: -3px; } .app-sidebar nav li.nav-active a { background: var(--accent-muted); color: var(--accent); font-weight: 600; } .app-sidebar nav a.nav-danger { color: var(--error); } .app-sidebar nav a.nav-danger:hover { background: rgba(var(--error-rgb), 0.12); color: var(--error); } .app-sidebar nav li.nav-active a.nav-danger { background: rgba(var(--error-rgb), 0.12); color: var(--error); } .danger-zone { max-width: 640px; border-color: rgba(var(--error-rgb), 0.35); } .danger-zone h2 { color: var(--error); margin-bottom: 0.75rem; } .app-content { margin-left: var(--sidebar-w); min-height: 100vh; padding: 2rem; } .profile-account-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: 900px; } .profile-account-line { margin: 0; color: var(--pico-muted-color); } .profile-catalog-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 1.5rem; color: var(--pico-muted-color); } .profile-catalog-line a { overflow-wrap: anywhere; } /* Fila que junta el logo y el QR — mismo patrón que .edit-product-layout (imagen + campos en "Editar producto"): el logo mide un ancho fijo, el QR aprovecha el resto del espacio en vez de dejarlo vacío. */ .profile-media-row { display: flex; align-items: flex-start; gap: 2rem; max-width: 900px; margin-bottom: 1.5rem; flex-wrap: wrap; } .profile-qr-card { display: flex; gap: 1.25rem; align-items: flex-start; flex: 1 1 320px; min-width: 280px; /* misma altura que la imagen del logo (.edit-product-image img / .edit-product-image-placeholder, 240px) — así ambas cajas quedan a nivel arriba y abajo en vez de que el QR se vea "más chico". */ min-height: 240px; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } @media (max-width: 700px) { .profile-media-row { flex-direction: column; } } .profile-qr-preview { flex-shrink: 0; width: 120px; height: 120px; /* fondo blanco fijo (no var(--bg-card)): el QR se genera sin color de fondo propio, y en tema oscuro un fondo transparente lo haría ilegible para cualquier cámara. */ background: #fff; padding: 0.4rem; border-radius: calc(var(--radius) / 2); } .profile-qr-title { margin: 0 0 0.4rem; } .profile-qr-download { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; } @media (max-width: 480px) { .profile-qr-card { flex-direction: column; align-items: center; text-align: center; } } .button-success { flex-shrink: 0; width: auto; background: var(--success); border-color: var(--success); color: #fff; } .button-success:hover, .button-success:focus-visible { background: var(--success-hover); border-color: var(--success-hover); } .plan-card-coming-soon { position: relative; overflow: hidden; } .plan-card-coming-soon .plan-card-body, .plan-card-coming-soon > button { filter: blur(3px); opacity: 0.5; pointer-events: none; } .plan-card-coming-soon-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; color: var(--text); background: rgba(0, 0, 0, 0.15); } .coming-soon-section { position: relative; overflow: hidden; } .coming-soon-section-content { filter: blur(3px); opacity: 0.5; pointer-events: none; } .coming-soon-section-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; color: var(--text); background: rgba(0, 0, 0, 0.15); } .button-success:disabled { background: var(--pico-secondary-background); border-color: var(--pico-secondary-background); color: var(--pico-secondary-inverse, #fff); opacity: 0.6; cursor: not-allowed; } .button-warning { background: var(--warning); border-color: var(--warning); color: #1a1a1a; } .button-warning:hover, .button-warning:focus-visible { background: var(--warning-hover); border-color: var(--warning-hover); color: #1a1a1a; } .button-danger { background: #dc2626; border-color: #dc2626; color: #fff; } .button-danger:hover, .button-danger:focus-visible { background: #b91c1c; border-color: #b91c1c; } /* Variante roja de los botones "outline" de Pico (ej. el toggle de "Cambiar el subdominio de tu tienda" — una acción que rompe de inmediato el link ya compartido). Pico controla el color de un botón outline vía las variables --pico-color/--pico-border-color en un selector :is(button,[type=submit],[type=button],[role=button]).outline — hay que igualar esa forma de selector para que nuestra variante gane por especificidad, no solo por orden en el archivo. */ :is(button, [type="submit"], [type="button"], [role="button"]).outline.outline-danger { --pico-color: #dc2626; --pico-border-color: #dc2626; } :is(button, [type="submit"], [type="button"], [role="button"]).outline.outline-danger:is( :hover, :active, :focus ) { --pico-color: #b91c1c; --pico-border-color: #b91c1c; } .copy-feedback { color: var(--pico-ins-color, green); font-size: 0.85rem; } .alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1.1rem; border-radius: var(--pico-border-radius); margin-bottom: 1.5rem; font-size: 0.95rem; max-width: 900px; } .alert-icon { flex-shrink: 0; line-height: 1.4; } .alert-info { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.3); } .store-payment-notice { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 0.75rem 1rem; margin-top: 1rem; font-size: 0.9rem; } .store-payment-notice-icon { flex-shrink: 0; font-size: 1.3rem; line-height: 1.4; } .store-payment-notice strong { color: var(--pico-primary); } .store-payment-notice p { margin: 0.35rem 0 0; color: var(--pico-muted-color); } .alert-success { background: rgba(var(--success-rgb), 0.12); color: var(--success); border: 1px solid rgba(var(--success-rgb), 0.3); } .alert-error { background: rgba(var(--error-rgb), 0.12); color: var(--error); border: 1px solid rgba(var(--error-rgb), 0.3); } .import-errors { color: var(--error); margin: -1rem 0 1.5rem; padding-left: 1.5rem; font-size: 0.9rem; } .import-steps { color: var(--pico-muted-color); padding-left: 1.25rem; margin-bottom: 1rem; } .import-steps li { margin-bottom: 0.5rem; } .edit-product-layout { display: flex; align-items: flex-start; gap: 2rem; max-width: 900px; flex-wrap: wrap; } .edit-product-image { flex: 0 0 240px; } .profile-logo-field { max-width: 200px; margin-bottom: 1.5rem; } .edit-product-image img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--pico-border-radius); margin-bottom: 1rem; } .edit-product-image-placeholder { width: 100%; height: 240px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); border: 1px dashed var(--border); border-radius: var(--pico-border-radius); color: var(--pico-muted-color); margin-bottom: 1rem; } .edit-product-fields { flex: 1 1 320px; min-width: 280px; } @media (max-width: 700px) { .edit-product-layout { flex-direction: column; } .edit-product-image { flex-basis: auto; max-width: 240px; } } .store-logo { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); margin-bottom: 0.5rem; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .product-card { display: flex; flex-direction: column; height: 100%; } .product-card img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--pico-border-radius); } .product-card-body { flex-grow: 1; } .product-card-description { text-align: justify; hyphens: auto; overflow-wrap: break-word; } .product-card-meta { font-size: 0.8rem; color: var(--pico-muted-color); margin-bottom: 0.25rem; } .unit-label { font-size: 0.8rem; color: var(--pico-muted-color); } .product-card-actions { /* empuja las acciones al fondo de la tarjeta, sin importar cuánto texto tenga arriba (nombre/descripción), para que todas las tarjetas de una misma fila queden alineadas */ margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; } .product-card-actions form { margin: 0; } .catalog-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .catalog-header h1 { margin-bottom: 0.25rem; } .catalog-view-online { display: inline-flex; align-items: center; gap: 0.35rem; width: auto; margin: 0 0 0.5rem; padding: 0.3rem 0.8rem; font-size: 0.8rem; } .catalog-product-counter, .catalog-featured-counter { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .catalog-product-counter { margin-bottom: 0.15rem; } .catalog-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; } .catalog-action { position: relative; } .catalog-action summary { list-style: none; } .catalog-action summary::-webkit-details-marker { display: none; } .catalog-action-trigger { display: inline-flex; align-items: center; gap: 0.35rem; width: auto; margin: 0; padding: 0.55rem 1rem; font-size: 0.85rem; white-space: nowrap; cursor: pointer; } .catalog-action-trigger::after { content: "▾"; font-size: 0.7rem; transition: transform 0.15s ease; } .catalog-action[open] .catalog-action-trigger::after { transform: rotate(180deg); } .catalog-action-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 20; width: min(420px, 92vw); max-height: 80vh; overflow-y: auto; padding: 1.25rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35); } .catalog-filters { /* Grid en vez de flex: un