/* ══════════════════════════════════════════════════════════════════ Alquimia v2 — sistema visual (s109, handoff/prompt-para-claude.md) TODO este archivo está scoped bajo `html.v2`: sin esa clase (PROD) ninguna regla aplica y el panel se ve exactamente como antes. El gate vive en un inline script del (hosts DEV) y se extiende a PROD agregando el host allí. ══════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens ──────────────────────────────────────────────────── */ html.v2 { /* motion (emil-design-eng: ease-out fuerte, UI < 300ms) */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --transition: .18s var(--ease-out); --dur-press: 120ms; --dur-hover: 150ms; --dur-pop: 200ms; --dur-modal: 220ms; /* forma (handoff: tarjetas 14 / controles 10 / chips 20) */ --radius: 14px; --radius-ctl: 10px; --radius-chip: 20px; } /* Paleta v2 dark — capas de fondo del handoff */ html.v2[data-theme="dark"] { --bg: #0b0d10; --sidebar-bg: #0f1216; --card: #14181e; --card-hover: #191f27; --border: #1c212a; --text: #eef1f4; --text2: #8a929c; --text3: #5b626c; --blue: #eef1f4; /* v1 usa --blue como color de títulos/números */ --green: #8eca3f; --green-soft: rgba(142, 202, 63, .13); --red: #e0554e; --orange: #e0a34a; --cyan: #6fa8e8; /* info */ --purple: #b18ae8; /* revendedor */ --input-bg: #0f1216; --input-border: #232a35; --chip-bg: #1a2028; --table-stripe: rgba(255, 255, 255, .022); --modal-bg: rgba(3, 5, 7, .72); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 28px rgba(0, 0, 0, .22); --scrollbar-track: #0f1216; --scrollbar-thumb: #262e3a; } /* Badges dark v2 — semánticos del handoff (éxito #a9dd6b / ámbar #e0a34a / rojo #e0554e / info #6fa8e8) */ html.v2[data-theme="dark"] .badge-green { background: rgba(142,202,63,.14); color: #a9dd6b; } html.v2[data-theme="dark"] .badge-orange { background: rgba(224,163,74,.14); color: #e8b76a; } html.v2[data-theme="dark"] .badge-red { background: rgba(224,85,78,.15); color: #ef8d87; } html.v2[data-theme="dark"] .badge-blue { background: rgba(111,168,232,.13); color: #9cc1ee; } html.v2[data-theme="dark"] .badge-cyan { background: rgba(111,168,232,.13); color: #9cc1ee; } html.v2[data-theme="dark"] .badge-purple { background: rgba(177,138,232,.14); color: #cbadf3; } /* ── 2. Tipografía ──────────────────────────────────────────────── */ html.v2 body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } html.v2 h1, html.v2 h2, html.v2 h3, html.v2 .metric-value, html.v2 .seg-count, html.v2 .v2-kpi-num, html.v2 .kanban-card-total, html.v2 .logo-text { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.02em; } /* números SIEMPRE tabulares (handoff) */ html.v2 table, html.v2 .metric-value, html.v2 .seg-count, html.v2 .v2-kpi-num, html.v2 .mini-amount, html.v2 .top-value, html.v2 .audit-time, html.v2 .bj-conv-time { font-variant-numeric: tabular-nums; } html.v2 .header h1 { font-size: 1.5rem; font-weight: 800; } html.v2 thead th, html.v2 .sortable-th { font-size: .72rem; letter-spacing: .06em; font-weight: 600; color: var(--text3); border-bottom: 1px solid var(--border); } /* ── 3. Capas / superficie ──────────────────────────────────────── */ html.v2[data-theme="dark"] .sidebar { border-right: 1px solid var(--border); } html.v2 .card, html.v2 .filter-bar, html.v2 .segmento-card, html.v2 .metric { border: 1px solid var(--border); box-shadow: none; } html.v2[data-theme="dark"] .login-card { border: 1px solid var(--border); } html.v2 tbody tr:nth-child(even) { background: var(--table-stripe); } html.v2 tbody tr:hover { background: var(--card-hover); } html.v2 tbody td { border-bottom: 1px solid var(--border); } /* ── 4. Sidebar ─────────────────────────────────────────────────── */ /* El sidebar es SIEMPRE oscuro (en ambos temas) → colores fijos, no var(--text*) (en modo claro var(--text) es oscuro y el hover dejaba el label invisible). */ html.v2 .nav-item { color: #8a929c; transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); } html.v2 .nav-item:hover { color: #e9edf1; background: rgba(255, 255, 255, .05); } html.v2 .nav-item.active { color: var(--green); background: var(--green-soft); font-weight: 600; } html.v2 .nav-item:active { transform: scale(.98); } /* status-dot sin glow (el glow era un tell) */ html.v2 .status-dot { box-shadow: none; } /* ── 5. Botones — feedback al presionar (emil: scale .97, 120ms) ── */ html.v2 .btn, html.v2 .btn-icon, html.v2 .btn-icon-danger, html.v2 .kb-view-btn, html.v2 .modal-close, html.v2 .chip-remove { transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); border-radius: var(--radius-ctl); } html.v2 .btn:active, html.v2 .btn-icon:active, html.v2 .btn-icon-danger:active { transform: scale(.97); } html.v2 .btn-primary { background: var(--green); color: #0f1216; } @media (hover: hover) and (pointer: fine) { html.v2 .btn-primary:hover { background: #9cd551; transform: none; } html.v2 .metric:hover { transform: none; box-shadow: none; border-color: #232a35; } } html.v2 .btn-sm { border-radius: 8px; } /* ── 6. Metrics / KPI (sin side-stripe: ban de impeccable) ──────── */ html.v2 .metric::before { display: none; } html.v2 .metric { padding: 1.1rem 1.35rem; } html.v2 .metric-label { font-size: .7rem; letter-spacing: .08em; color: var(--text3); } html.v2 .metric-value { font-size: 1.85rem; margin: .35rem 0 .2rem; } html.v2 .metric-sub.down { color: var(--orange); } /* caída = atención, no error */ /* ── 7. Inputs / forms — unificados (handoff Configuración #1) ──── */ html.v2 .form-input, html.v2 .form-select, html.v2 .search-input, html.v2 .date-input, html.v2 .filter-select, html.v2 .price-input, html.v2 .chip-add-input { background: var(--input-bg); border-color: var(--input-border); border-radius: var(--radius-ctl); transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); } html.v2 .form-input:focus, html.v2 .form-select:focus, html.v2 .search-input:focus, html.v2 .date-input:focus, html.v2 .price-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } html.v2 .form-label { color: var(--text3); font-size: .72rem; letter-spacing: .07em; } /* ── 8. Modal / toast — enter con ease fuerte, exit instantáneo ─── */ html.v2 .modal-overlay.open { animation: v2FadeIn var(--dur-pop) var(--ease-out); } html.v2 .modal { animation: v2ScaleIn var(--dur-modal) var(--ease-out); border: 1px solid var(--border); } @keyframes v2FadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes v2ScaleIn { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: scale(1) } } html.v2 .toast { animation: v2ToastIn var(--dur-modal) var(--ease-out); border-radius: var(--radius-ctl); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); } @keyframes v2ToastIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } } html.v2[data-theme="dark"] .toast-success { background: #3e6318; color: #e9f7d4; } /* página: fade sutil (product register: sin coreografías) */ html.v2 .page { animation: v2Page var(--dur-modal) var(--ease-out); } @keyframes v2Page { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } } /* dropdown de búsqueda de producto */ html.v2 .product-dropdown { animation: v2Pop var(--dur-pop) var(--ease-out); transform-origin: top center; border-radius: var(--radius-ctl); } @keyframes v2Pop { from { opacity: 0; transform: scale(.98) translateY(-2px) } to { opacity: 1; transform: scale(1) translateY(0) } } /* ── 9. Chips / badges (pill 20px) ──────────────────────────────── */ html.v2 .badge { border-radius: var(--radius-chip); font-weight: 600; padding: .22rem .62rem; } html.v2 .chip { border-radius: var(--radius-chip); } /* ── 10. Componentes v2 (usados por app.js sólo bajo isDesignV2) ── */ /* fila de KPIs (Pedidos) */ .v2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .v2-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.2rem; } .v2-kpi-label { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); font-weight: 600; } .v2-kpi-num { font-size: 1.55rem; font-weight: 800; color: var(--text); margin-top: .18rem; } .v2-kpi-sub { font-size: .74rem; color: var(--text3); margin-top: .1rem; } /* barra de chips-filtro (Pedidos estado / Actividad tipo) */ .v2-chipbar { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; } .v2-fchip { border: 1px solid var(--border); background: var(--card); color: var(--text2); font: 600 .8rem/1 'Inter', sans-serif; padding: .42rem .85rem; border-radius: var(--radius-chip); cursor: pointer; transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); } .v2-fchip:active { transform: scale(.96); } @media (hover: hover) and (pointer: fine) { .v2-fchip:hover { color: var(--text); border-color: #2a323e; } } .v2-fchip.on { background: var(--green-soft); border-color: transparent; color: var(--green); } .v2-fchip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--green-soft); } /* avatar con inicial */ .v2-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .74rem; color: #fff; } .v2-cellclient { display: flex; align-items: center; gap: .65rem; min-width: 0; } .v2-cellclient .cc-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-cellclient .cc-sub { font-size: .76rem; color: var(--text3); font-variant-numeric: tabular-nums; } .v2-star { color: var(--orange); font-size: .85em; } /* números a la derecha + chevron de fila */ html.v2 .v2-num { text-align: right; font-variant-numeric: tabular-nums; } html.v2 th.v2-num { text-align: right; } .v2-chev { color: var(--text3); font-size: 1rem; padding-left: .25rem; } html.v2 tbody tr.clickable { transition: background var(--dur-hover) var(--ease-out); } /* barra de proporción (segmentos clientes) */ .v2-propbar { height: 4px; border-radius: 4px; background: var(--border); margin-top: .55rem; overflow: hidden; } .v2-propbar > span { display: block; height: 100%; border-radius: 4px; } /* mini-barra bajo total gastado */ .v2-gastowrap { display: flex; flex-direction: column; align-items: flex-end; gap: .28rem; } .v2-gastobar { width: 92px; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; } .v2-gastobar > span { display: block; height: 100%; background: var(--green); border-radius: 3px; } /* grupos de categoría (productos) */ .v2-cat-head { display: flex; align-items: center; gap: .55rem; padding: 1rem .75rem .45rem; cursor: pointer; user-select: none; color: var(--text2); font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .v2-cat-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--green-soft); border-radius: 6px; } .v2-cat-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .v2-cat-count { color: var(--text3); font-weight: 600; } .v2-cat-caret { margin-left: auto; color: var(--text3); transition: transform var(--dur-pop) var(--ease-out); } .v2-cat-group.closed .v2-cat-caret { transform: rotate(-90deg); } .v2-cat-group.closed .v2-cat-body { display: none; } .v2-cat-head + .v2-cat-body table { margin-top: .1rem; } .v2-result-count { font-size: .78rem; color: var(--text3); } /* timeline actividad */ .v2-day-head { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); padding: 1.1rem .25rem .45rem; } .v2-day-head:first-child { padding-top: .25rem; } html.v2 .audit-icon { border-radius: 50%; font-size: .8rem; } html.v2 .audit-icon.v2-crear { background: var(--green-soft); color: var(--green); } html.v2 .audit-icon.v2-editar { background: rgba(111,168,232,.13); color: var(--cyan); } html.v2 .audit-icon.v2-borrar { background: rgba(224,85,78,.13); color: var(--red); } html.v2 .audit-icon.v2-otro { background: var(--chip-bg); color: var(--text2); } .v2-audit-frase { font-weight: 600; font-size: .88rem; color: var(--text); } .v2-audit-frase .qn { color: var(--text2); font-weight: 500; } .v2-audit-tec { font-size: .72rem; color: var(--text3); margin-top: .12rem; font-family: 'JetBrains Mono', monospace; } /* chips de permisos (configuración) */ .v2-perm { display: inline-block; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text2); font-size: .7rem; font-weight: 600; padding: .16rem .5rem; border-radius: var(--radius-chip); margin: 0 .18rem .18rem 0; } .v2-rolbadge { border-radius: var(--radius-chip); } /* medidor de fuerza de contraseña (debajo del input, sin márgenes negativos) */ .v2-strength { display: flex; align-items: center; gap: .55rem; margin: .5rem 0 0; } .v2-strength[hidden] { display: none; } .v2-strength-bar { flex: 0 0 120px; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; } /* fill por transform (scaleX), no width: sin reflow (emil/impeccable) */ .v2-strength-bar > span { display: block; height: 100%; width: 100%; border-radius: 4px; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-pop) var(--ease-out), background var(--dur-pop) var(--ease-out); } .v2-strength-label { font-size: .74rem; color: var(--text3); } /* catálogos: estado + antigüedad */ .v2-cat-estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; } .v2-cat-estado .dot { width: 7px; height: 7px; border-radius: 50%; } .v2-cat-estado.ok { color: #a9dd6b; } .v2-cat-estado.ok .dot { background: #a9dd6b; } .v2-cat-estado.old { color: var(--orange); } .v2-cat-estado.old .dot { background: var(--orange); } /* ── s109c: bandeja — fecha sticky (aprobado por Dani → PROD) ───── */ /* El separador de fecha queda FIJO arriba del hilo mientras scrolleás (patrón WhatsApp: cada fecha empuja a la anterior). Los .bj-day-sep son hijos directos del contenedor scrolleable, así que sticky nativo alcanza — sin JS, sin animación (el pin es posicional). */ html.v2 .bj-day-sep { position: sticky; top: .45rem; z-index: 4; /* sobre burbujas e imágenes del hilo */ border: 1px solid var(--border); /* separa la píldora del contenido que pasa por detrás */ } /* ── 11. Accesibilidad / reduced motion ─────────────────────────── */ html.v2 :focus-visible { outline-color: var(--green); } @media (prefers-reduced-motion: reduce) { html.v2 .page, html.v2 .modal, html.v2 .modal-overlay.open, html.v2 .toast, html.v2 .product-dropdown { animation: none; } html.v2 .btn:active, html.v2 .btn-icon:active, html.v2 .btn-icon-danger:active, html.v2 .v2-fchip:active, html.v2 .nav-item:active { transform: none; } html.v2 * { transition-duration: .01ms !important; } }