/* ============================================ OroCredit — Utilities transversales Adoptado en cada shadow root via loadSheet('/app/app.css'). Los tokens (variables CSS) viven en tokens.css cargado en ; aqui van solo las clases helper que cualquier componente quiere tener disponibles dentro de su shadow root. ============================================ */ .font-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } .font-mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; } .font-sans { font-family: var(--font-sans); } /* Eyebrow: micro-titular en mayusculas con tracking generoso, usado sobre titulares display o como sub-cabecera de seccion. */ .eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); } /* Numeros tabulares — alinea digitos en columnas, util en tablas con cifras monetarias o cantidades. */ .tnum { font-variant-numeric: tabular-nums; } /* Divisoria con detalle dorado al centro. */ .hr-gold { height: 1px; background: linear-gradient( 90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent ); border: 0; } /* Cabecera de seccion canonica del body de las views. Patron compartido por Inventario, Presupuestos, Compras/Ventas, Empenos: eyebrow numerado en dorado + titulo display mediano + subtitle muted. */ .section { display: flex; flex-direction: column; } .section__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .section__head--with-action { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .section__head-left { display: flex; flex-direction: column; gap: 4px; } .section__eyebrow { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-strong); font-weight: 700; } .section__title { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin: 4px 0; letter-spacing: -0.015em; } .section__subtitle { font-size: 13px; color: var(--fg-muted); margin: 0; max-width: 720px; } /* Number inputs · sin spinners nativos por defecto (política Diego 2026-07-13 · "nunca lo he necesitado · quitarlo de raíz"). Los layouts propios de los componentes canónicos (`oc-cotizador`, `oc-check-products-stock`, etc.) ganan chrome limpio. Si algún consumer futuro los necesita, los rehabilita local con la clase `oc-native-spinners` sobre el input concreto. */ input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type='number'] { -moz-appearance: textfield; appearance: textfield; } /* Escape hatch · si algún caso futuro requiere los spinners nativos (poco probable · sin uso interno hoy), añadir esta clase al input. */ input[type='number'].oc-native-spinners::-webkit-outer-spin-button, input[type='number'].oc-native-spinners::-webkit-inner-spin-button { -webkit-appearance: auto; margin: initial; } input[type='number'].oc-native-spinners { -moz-appearance: number-input; appearance: auto; } /* ============================================ Cross-shadow · pills + chips + glyphs de líneas de Lote / Albarán ============================================ Estos estilos empezaron viviendo en `lotes.css` cuando solo los usaba el grid compacto de `` (mismo shadow). En D.A (2026-08-25) la card expandida embebe `` · sus celdas se pintan en el shadow del componente-tabla, que NO adopta `lotes.css` · las clases `.lotes__pill*` / `.lotes__chip-pending` / `.lotes__lineitem-glyph` quedaban sin estilo. Promoción a `app.css` (cargada por CUALQUIER componente que use `loadSheet('/app/app.css')`) resuelve el gap sin tocar el componente-tabla. El prefijo `.lotes__` se conserva por bajo coste de churn · si aparece un tercer consumer se renombra a `.oc-pill*` como pauta canónica del design system. */ .lotes__lineitem-glyph { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: var(--fg-muted); } .lotes__pills { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-end; } .lotes__pills--expanded { flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 4px; justify-content: flex-start; } .lotes__pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px 0 8px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .lotes__pill-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; } .lotes__pill-x { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.05); cursor: pointer; color: inherit; padding: 0; margin-left: 2px; } .lotes__pill-x:hover { background: rgba(0, 0, 0, 0.15); } .lotes__pill--controlada { background: var(--gold-soft); color: var(--gold-strong); } .lotes__pill--joyeria { background: oklch(0.95 0.030 200); color: oklch(0.50 0.090 200); } .lotes__pill--fundida { background: oklch(0.95 0.040 300); color: oklch(0.50 0.120 300); } .lotes__chip-pending { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--bg-subtle); color: var(--fg-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; border: 1px dashed var(--border); } /* Chip de la columna "Estado" del historial TPV Ornatum · 3 variantes * semánticas (success · error · neutral) alimentadas por el estado de la * factura post-emisión. Se renderiza en el shadow del `` * · reside aquí (no en `tpv-ornatum-view.css`) por la misma razón que * `.lotes__pill*` · el componente-tabla solo adopta `app.css`. Si aparece * un tercer consumer se renombra a `.oc-chip*` como pauta canónica del * design system. */ .tpv-tabla__chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; } .tpv-tabla__chip--success { background: var(--oc-positive-bg); color: var(--oc-positive); border-color: var(--oc-positive); } .tpv-tabla__chip--error { background: var(--oc-negative-bg); color: var(--oc-negative); border-color: var(--oc-negative); } .tpv-tabla__chip--neutral { background: var(--bg-subtle); color: var(--fg-faint); border-color: var(--border); } /* Celda "Artículo" del `` embebido en la card expandida * (D.A) · nombre encima, código_referencia mono debajo. Vive aquí (no en * lotes.css) por la misma razón que las pills · se renderiza en el shadow * de ``. */ .lotes__expanded-articulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lotes__expanded-articulo-nombre { font-size: var(--text-sm); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lotes__expanded-articulo-ref { font-size: 11px; color: var(--fg-muted); } /* ============================================ Cross-shadow · popover desglose por material (D.B · sesión 2026-08-25) ============================================ Estilos del popover del `` y del slot del `` del acuerdo en el grid Gestionar de Lote. Ambos pintan el mismo desglose (agrupado por tipo Metal/Gema/Otro + fila "Fino total" en Metal). El primer consumer renderiza el chrome completo (position fixed calculado en JS · clase `.oab__pop`); el segundo usa el chrome del `` y solo inserta el contenido inner (clase `.oab__pop-inner`). Los estilos internos son comunes · promoción a `app.css` evita duplicación entre shadows. */ .oab__pop { position: fixed; transform: translateX(-50%); z-index: 2000; min-width: 240px; max-width: 340px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px 14px; pointer-events: none; animation: oabPopIn 140ms ease; } @keyframes oabPopIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .oab__pop-inner { display: flex; flex-direction: column; } .oab__pop-title { display: block; margin-bottom: 10px; color: var(--fg-muted); } .oab__pop-grupo { margin-bottom: 10px; } .oab__pop-grupo:last-child { margin-bottom: 0; } .oab__pop-grupo-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-strong); margin-bottom: 4px; } .oab__pop-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } .oab__pop-item { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 3px 0; font-size: 12px; color: var(--fg); } .oab__pop-item-nombre { color: var(--fg); } .oab__pop-item-peso { color: var(--fg); text-align: right; min-width: 60px; } .oab__pop-item-calidad { color: var(--fg-muted); text-align: right; min-width: 44px; } .oab__pop-item--fino { border-top: 1px solid var(--border-hairline); margin-top: 3px; padding-top: 6px; font-weight: 600; } .oab__pop-item--fino .oab__pop-item-nombre { color: var(--gold-strong); } .oab__pop-item--fino .oab__pop-item-peso { color: var(--gold-strong); }