, and a dedicated first | per row holding a
.mobile-summary + collapsible .mobile-details) — column-priority hiding
(.col-priority-low, above) stays the default for simpler tables; this is
for tables where hiding columns still leaves too much to read from a
horizontally-scrolled row. Toggle behavior is delegated globally in
js/app.js §9, so no per-view script is needed. These two base rules hide
the mobile-only markup at any width by default; the @media blocks below
swap that per breakpoint. */
.mobile-summary,
.mobile-details { display: none; }
@media (max-width: 767px) {
.app { grid-template-columns: 1fr; }
.hamburger { display: inline-flex; }
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 240px;
padding: 24px 14px;
transform: translateX(-100%);
transition: transform .2s ease;
z-index: 100;
box-shadow: var(--shadow-lg);
}
.sidebar-logo { text-align: left; padding: 0 10px; }
.sidebar-logo span { display: inline; }
.nav-section-label { display: block; }
.nav-link { justify-content: flex-start; padding: 8px 10px; }
.nav-link .label { display: inline; }
.nav-user { display: block; }
body.drawer-open .sidebar { transform: translateX(0); }
body.drawer-open .sidebar-scrim { display: block; opacity: 1; }
/* top:64px deja espacio para el .hamburger fijo (top:14px, 40px alto) --
sin esto el título de la página queda debajo del botón (Fase 4, ajuste
post-entrega, encontrado al probar el nuevo .header-actions a 390px). */
.main { padding: 64px 16px 84px; }
.two-col { grid-template-columns: 1fr; }
.three-col { grid-template-columns: 1fr; }
.dashboard-grid { grid-template-columns: 1fr; }
/* Phase D — verified at 320px per §15's viewport matrix: two 150px tiles
plus a 12px gap (312px) already just fits 320, but leaves only 8px of
breathing room against the .main padding below, so this nudges the
minimum down slightly for a less cramped 2-per-row layout on the
narrowest supported phones. */
.stats-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.bottom-tabs { display: flex; }
/* Phase E — §15's "column-priority hiding": on simple list tables (PO,
Invoices, Checks, Items…), the lower-priority columns (called out per
table via .col-priority-low on both the | and its matching | )
drop out below mobile width instead of forcing horizontal scroll to
read the columns that actually matter at a glance (number/name/amount/
status). Table stays a real — .table-wrap's existing
overflow-x:auto remains the floor for any table that's still too wide
after this. Also compacts every table's padding/font-size generally,
per the reported issue that rows needed horizontal scroll to be
legible on phone widths even before counting hidden columns. */
.table-wrap table { font-size: 12px; }
.table-wrap th { padding: 8px 10px; }
.table-wrap td { padding: 9px 10px; }
.col-priority-low { display: none; }
/* Phase E — §15's "complex multi-line form" pattern: on phone widths,
line-item entry tables (PO/Invoice line items — opt in with
.line-items-table) switch from a horizontally-scrolling table row to
one-item-at-a-time stacked fields, so editing Qty/Price never requires
scrolling right. Reported directly against PO create's Line Items. */
.line-items-table thead { display: none; }
.line-items-table,
.line-items-table tbody,
.line-items-table tr,
.line-items-table td {
display: block;
width: 100% !important;
}
.line-items-table { min-width: 0 !important; }
.line-items-table tr.item-row {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
padding: 12px;
margin-bottom: 12px;
}
.line-items-table td {
padding: 6px 0;
border-bottom: none;
}
.line-items-table td[data-label]::before {
content: attr(data-label);
display: block;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ink-soft);
margin-bottom: 4px;
}
/* !important: some line-items-table instances set a fixed px width inline
on the input itself (e.g. invoices/create.php's Qty This Invoice field,
90px to fit its old table column) — that inline style otherwise beats
any external rule and would leave a tiny 90px input sitting under a
full-width label on the stacked mobile card. */
.line-items-table input,
.line-items-table select,
.line-items-table .item-picker-cell { width: 100% !important; }
.line-items-table td:last-child { padding-top: 4px; }
.line-items-table td:last-child .remove-item { width: 100%; }
/* Receivers "Unit Price" cell wraps the input with edit/history icon
buttons in a flex row (.price-field-wrap, see po_receipts/create.php) —
forcing the input itself to width:100% (the generic rule above) would
push those buttons out past the card edge. Let flex handle the sizing
instead, same as it already does on desktop. */
.line-items-table .price-field-wrap { width: 100%; }
.line-items-table .price-field-wrap input { width: auto !important; flex: 1 1 auto; }
/* Phase F — full-screen search sheets: the Advanced Item/Vendor Search
modal (js/item-picker.js, js/vendor-picker.js) is a centered 860px
dialog with the results table capped at 50vh on desktop; below mobile
width that left a cramped, double-scrolling box. Here it expands to
fill the viewport so results get real room, with the header/filters/
pagination/actions pinned and only the table itself scrolling. */
.modal-overlay.adv-search-modal { padding: 0; align-items: stretch; }
.adv-search-modal .modal.modal-wide {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
padding: 16px;
display: flex;
flex-direction: column;
}
.adv-search-modal .modal > h3,
.adv-search-modal .adv-filters,
.adv-search-modal .adv-pagination,
.adv-search-modal .modal-actions { flex: 0 0 auto; }
.adv-search-modal .table-wrap { flex: 1 1 auto; max-height: none; }
/* Mobile Card Table — see the component comment above .col-priority-low's
media block for the opt-in markup this expects. */
.mobile-card-table { border-collapse: separate; border-spacing: 0; }
.mobile-card-table thead { display: none; }
.mobile-card-table,
.mobile-card-table tbody,
.mobile-card-table tr,
.mobile-card-table td { display: block; width: 100%; }
.mobile-card-table tbody { display: grid; gap: 12px; }
.mobile-card-table tr.row-card {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow);
}
/* Hide the desktop cells — their data is represented by the mobile
summary/details below instead. */
.mobile-card-table tr.row-card > td { display: none; }
.mobile-card-table tr.row-card > td.mobile-cell { display: block; border: 0; padding: 0; }
/* purchase_orders/show.php's Receipts table nests a desktop-only expand/
collapse sub-row (.row-expand-toggle / .row-detail, unrelated to this
component) inside a .mobile-card-table. Its own toggle button lives in
a regular (non-.mobile-cell) | , so it's already hidden on mobile by
the rule above — but the sub-row itself is a sibling | , not a | ,
so without this it would be forced open by the generic
".mobile-card-table tr { display:block }" rule above, regardless of its
default-closed ".row-detail" state. The card's own mobile-details panel
(opt-in content, not this sub-row) covers the same info on mobile. */
.mobile-card-table tr.row-detail { display: none; }
.mobile-card-table tr.row-detail.open { display: block; }
.mobile-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 12px;
align-items: start;
padding: 14px;
cursor: pointer;
user-select: none;
}
.mobile-summary-main { min-width: 0; }
.mobile-title {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
font-weight: 700;
font-size: 14px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.mobile-subtitle {
margin-top: 3px;
color: var(--ink-mid);
font-size: 13px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.mobile-summary-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 7px;
text-align: right;
}
.mobile-chevron {
display: inline-flex;
width: 26px;
height: 26px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--ink-mid);
font-size: 14px;
line-height: 1;
transition: transform .18s ease, background .18s ease;
}
.row-card.is-expanded .mobile-chevron { transform: rotate(180deg); }
.mobile-metrics {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 2px;
}
.mobile-metric {
min-width: 0;
padding: 8px 9px;
border: 1px solid var(--border);
border-radius: 7px;
background: rgba(127,127,127,.035);
}
.mobile-metric-label {
display: block;
margin-bottom: 2px;
color: var(--ink-soft);
font-size: 10px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .03em;
}
.mobile-metric-value {
display: block;
min-width: 0;
color: var(--ink);
font-size: 13px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.mobile-details { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.row-card.is-expanded .mobile-details { display: block; }
.mobile-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.mobile-detail {
display: grid;
grid-template-columns: 42% minmax(0, 58%);
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
line-height: 1.35;
}
.mobile-detail:last-child { border-bottom: 0; }
.mobile-detail-label { color: var(--ink-soft); font-weight: 500; }
.mobile-detail-value { min-width: 0; color: var(--ink); overflow-wrap: anywhere; text-align: right; }
/* Secondary line within a detail value — e.g. items' Purchasing/
Manufacturing UOM ratio under the base Unit of Measure. */
.mobile-detail-value .detail-sub { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }
.mobile-details-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.mobile-details-actions .btn { flex: 1 1 auto; min-width: 90px; }
/* Opt-in for icon-only buttons (e.g. a 📈 history button) that shouldn't
stretch to the same minimum width as labeled actions. */
.mobile-details-actions .btn-compact { flex: 0 0 auto; min-width: 42px; }
/* Prevent the outer wrapper/table-wrap from clipping a card's shadow or
forcing horizontal scroll now that rows are stacked cards, not a wide
table. Opt in by giving the wrapper div class="mobile-card-wrap". */
.mobile-card-wrap,
.mobile-card-wrap > .table-wrap { overflow: visible; }
}
@media (min-width: 768px) {
.mobile-cell { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
DOVETAIL LAYER — Propuesta A (rediseño 2026-09-29)
Todo lo de arriba es la base heredada de ink-signal (con tokens y acentos
ya reemplazados por el build). Esta capa reestiliza los componentes según
DESIGN.md y agrega el shell de barra superior (.dt-*) que View.php emite
solo cuando UI_THEME=dovetail. Correcciones de accesibilidad sobre
DESIGN.md: texto atenuado #8f8f8f (no #7c7c7c) y borde de inputs #6b6b6b
(no #454545) para cumplir WCAG AA.
═══════════════════════════════════════════════════════════════════════════ */
:root {
color-scheme: dark;
--snow: #ffffff;
--coal: #141414;
--steel: #313131;
--graphite: #454545;
--field-border: #6b6b6b;
--row-line: #262626;
--hover-row: #242424;
--amber-dim: #5a4726;
--green-dim: #2f5139;
--red-dim: #5d2d2d;
--blue-dim: #2f4478;
--dt-max: 1200px;
}
/* ─── Base ──────────────────────────────────────────────────────────────── */
body {
font-size: 14px;
line-height: 1.5;
letter-spacing: -.012em;
font-feature-settings: "liga" on;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--snow); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg.dt-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dt-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .85px;
text-transform: uppercase;
color: var(--ink-mid);
}
/* ─── Typography of existing components ─────────────────────────────────── */
.page-header h1 {
font-family: var(--font-body);
font-size: 32px;
font-weight: 600;
letter-spacing: -.6px;
line-height: 1.2;
text-transform: none;
color: var(--snow);
}
.page-header p { font-size: 14px; color: var(--ink-mid); margin-top: 6px; }
.form-section-title {
font-family: var(--font-body);
font-size: 20px;
font-weight: 600;
letter-spacing: -.42px;
text-transform: none;
color: var(--snow);
margin: 40px 0 16px;
padding-bottom: 0;
border-bottom: 0;
}
.form-section-title .preview-link { font-size: 14px; font-weight: 500; color: var(--ink-mid); }
.form-section-title .preview-link:hover { color: var(--snow); }
.text-soft { color: var(--ink-mid); font-size: 13px; }
.text-soft a { color: var(--ink-mid); text-decoration: underline; text-underline-offset: 2px; }
.text-soft a:hover { color: var(--snow); }
.preview-link { color: var(--accent); font-weight: 500; }
.required { color: var(--red); }
/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 10px 16px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: -.17px;
text-transform: none;
line-height: 1.2;
}
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.btn-primary { background: var(--snow); color: #0a0a0a; border-color: var(--snow); }
.btn-primary:hover { background: #dcdcdc; border-color: #dcdcdc; color: #0a0a0a; }
.btn-outline { background: transparent; color: var(--snow); border-color: var(--graphite); }
.btn-outline:hover { background: transparent; color: var(--snow); border-color: var(--ink-mid); }
.btn-ghost { color: var(--ink-mid); }
.btn-ghost:hover { color: var(--snow); background: var(--surface); }
.btn-danger, .btn-red { background: transparent; color: var(--red); border-color: var(--red-dim); }
.btn-danger:hover, .btn-red:hover { background: #2a1717; border-color: var(--red); }
.btn-green { background: transparent; color: var(--green); border-color: var(--green-dim); }
.btn-green:hover { background: #16261b; border-color: var(--green); }
.btn-icon { width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 16px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn[aria-busy="true"]::after { border-color: rgba(10,10,10,.25); border-top-color: #0a0a0a; }
/* ─── Forms ─────────────────────────────────────────────────────────────── */
label {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: -.1px;
text-transform: none;
color: var(--snow);
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], input[type=search], select, textarea {
min-height: 40px;
padding: 9px 12px;
border: 1px solid var(--field-border);
border-radius: 8px;
background: #0a0a0a;
color: var(--snow);
font-size: 14px;
}
textarea { min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--ink-soft); }
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(103,152,255,.25);
}
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(240,138,138,.25);
}
.form-hint { color: var(--ink-soft); }
.switch-track { background: var(--graphite); }
/* ─── Cards & tables ────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--surface); border-radius: 8px; color: var(--ink); }
.card-header { background: transparent; border-bottom: 1px solid var(--steel); padding: 14px 20px; }
.card-header h3 { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .85px; color: var(--ink-mid); }
th {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ink-mid);
background: var(--surface);
border-bottom: 1px solid var(--steel);
padding: 12px 16px;
}
td { font-size: 14px; padding: 12px 16px; border-bottom: 1px solid var(--row-line); }
tbody tr:nth-child(even) td { background: transparent; }
tbody tr:hover td { background: var(--hover-row) !important; }
td a:not(.btn) { color: var(--snow); text-decoration: none; }
td a:not(.btn):hover { color: var(--accent); text-decoration: underline; }
td a.preview-link { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.amount-col { font-family: var(--font-body); font-weight: 500; }
td > a:not(.btn):first-child { white-space: nowrap; }
form > input[type=search] { width: auto; flex: 1 1 260px; max-width: 420px; }
.combobox-option:hover, .combobox-option[aria-selected="true"] { background: rgba(103,152,255,.12); }
/* ─── Stats (KPI tiles) ─────────────────────────────────────────────────── */
.stats-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 8px; }
.stat-card { background: var(--surface); border: 1px solid var(--surface); border-radius: 8px; padding: 20px 24px; }
.stat-value { font-family: var(--font-body); font-size: 40px; font-weight: 600; letter-spacing: -.84px; line-height: 1.2; color: var(--snow); }
.stat-label {
font-family: var(--font-body);
font-size: 13px;
text-transform: none;
letter-spacing: 0;
color: var(--ink-mid);
margin-top: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.stat-card .stat-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--graphite); flex: none; }
.stat-card.accent .stat-value, .stat-card.green .stat-value, .stat-card.red .stat-value,
.stat-card.amber .stat-value, .stat-card.blue .stat-value { color: var(--snow); }
.stat-card.accent .stat-label::before, .stat-card.blue .stat-label::before { background: var(--accent); }
.stat-card.green .stat-label::before { background: var(--green); }
.stat-card.red .stat-label::before { background: var(--red); }
.stat-card.amber .stat-label::before { background: var(--amber); }
a.stat-card-link:hover { border-color: var(--graphite); transform: none; }
/* ─── Badges ────────────────────────────────────────────────────────────── */
.badge, .badge-role-admin, .badge-role-ap-mgr, .badge-role-ap, .badge-role-user {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 4px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
vertical-align: middle;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-pending { color: var(--amber); border-color: var(--amber-dim); }
.badge-approved { color: var(--green); border-color: var(--green-dim); }
.badge-declined { color: var(--red); border-color: var(--red-dim); }
.badge-paid { color: var(--accent); border-color: var(--blue-dim); }
.badge-role-admin { color: #b4a4ff; border-color: #463d78; }
.badge-role-ap-mgr { color: var(--accent); border-color: var(--blue-dim); }
.badge-role-ap { color: var(--green); border-color: var(--green-dim); }
.badge-role-user { color: var(--ink-mid); border-color: var(--graphite); }
/* ─── Alerts ────────────────────────────────────────────────────────────── */
.alert {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--ink);
background: var(--coal);
border: 1px solid var(--steel);
border-left-width: 3px;
border-radius: 8px;
padding: 12px 16px;
}
.alert-success { border-color: var(--green-dim); border-left-color: var(--green); }
.alert-error { border-color: var(--red-dim); border-left-color: var(--red); }
.alert-warning { border-color: var(--amber-dim); border-left-color: var(--amber); }
.alert-info { border-color: var(--blue-dim); border-left-color: var(--accent); }
/* ─── Filter tabs / bars ────────────────────────────────────────────────── */
.filter-tabs { gap: 4px; flex-wrap: wrap; }
.filter-tab {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: -.1px;
text-transform: none;
color: var(--ink-mid);
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 8px;
}
.filter-tab:hover { color: var(--snow); }
.filter-tab.active { color: var(--snow); background: var(--surface); border-color: var(--steel); }
.win-pagination { justify-content: space-between; margin-top: 16px; gap: 12px; }
.win-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin: 0; }
/* ─── Misc components ───────────────────────────────────────────────────── */
.empty { padding: 32px 20px; background: var(--coal); border-radius: 8px; }
.card .empty { background: transparent; }
.empty p { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; color: var(--ink-mid); }
.empty-icon { color: var(--graphite); }
.upload-zone { border: 1px dashed var(--graphite); background: var(--coal); border-radius: 8px; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: rgba(103,152,255,.06); }
.modal { background: var(--surface); border: 1px solid var(--steel); border-radius: 8px; }
.modal h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: -.42px; text-transform: none; }
.modal-overlay { background: rgba(0,0,0,.7); }
.toast { background: #262626; border-color: var(--steel); border-radius: 8px; }
.skip-link { background: var(--snow); color: #0a0a0a; border-radius: 8px; }
.due-red { color: var(--red); background: rgba(240,138,138,.1); }
.due-yellow { color: var(--amber); background: rgba(229,181,103,.08); }
.confirm-inline { border-color: var(--red-dim); background: #1a1111; border-radius: 8px; }
/* ═══ Shell — barra superior (markup .dt-* emitido por View::layout) ═════ */
.dt-topbar {
position: sticky;
top: 0;
z-index: 60;
height: 64px;
display: flex;
align-items: center;
gap: 24px;
padding: 0 24px;
background: #0a0a0a;
border-bottom: 1px solid var(--surface);
}
.dt-brand {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 1px;
color: var(--snow);
text-decoration: none;
white-space: nowrap;
}
.dt-brand span { color: var(--ink-soft); }
.dt-nav { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.dt-nav > a, .dt-nav > details > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
color: var(--ink-mid);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
list-style: none;
height: 100%;
}
.dt-nav > details > summary::-webkit-details-marker { display: none; }
.dt-nav > a:hover, .dt-nav > details > summary:hover { color: var(--snow); }
.dt-nav > a[aria-current="page"], .dt-nav > details.is-active > summary { color: var(--snow); border-bottom-color: var(--accent); }
.dt-nav > a[aria-current="page"] svg, .dt-nav > details.is-active > summary svg:first-child { color: var(--accent); }
.dt-nav > details { position: relative; height: 100%; }
.dt-nav > details[open] > summary { color: var(--snow); }
.dt-nav > details > summary .dt-caret { transition: transform .15s; }
.dt-nav > details[open] > summary .dt-caret { transform: rotate(180deg); }
.dt-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 220px;
padding: 6px;
background: #1a1a1a;
border: 1px solid var(--steel);
border-radius: 8px;
display: grid;
gap: 2px;
z-index: 70;
}
.dt-menu a {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 0 12px;
border-radius: 6px;
color: var(--ink-mid);
text-decoration: none;
font-weight: 500;
}
.dt-menu a:hover { background: var(--surface); color: var(--snow); }
.dt-menu a[aria-current="page"] { background: var(--surface); color: var(--snow); box-shadow: inset 2px 0 0 var(--accent); }
.dt-menu a[aria-current="page"] svg { color: var(--accent); }
.dt-top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.dt-ctx { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; margin-right: 8px; text-align: right; }
.dt-ctx b { font-weight: 500; color: var(--snow); font-size: 13px; }
.dt-ctx small { color: var(--ink-soft); font-size: 12px; }
.dt-icon-btn {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 8px;
border: 1px solid transparent;
background: none;
color: var(--ink-mid);
cursor: pointer;
text-decoration: none;
}
.dt-icon-btn:hover { color: var(--snow); border-color: var(--steel); }
.dt-icon-btn svg.dt-i { width: 18px; height: 18px; }
.dt-top-right form { display: inline; }
.dt-menu-btn { display: none; }
.dt-main { min-height: calc(100vh - 64px); }
.dt-page { max-width: var(--dt-max); margin: 0 auto; padding: 40px 24px 64px; }
.dt-page > .page-header { margin-bottom: 32px; align-items: flex-end; }
/* Drawer (móvil / tablet) */
.dt-drawer {
position: fixed;
top: 0; bottom: 0; left: 0;
width: min(84vw, 320px);
z-index: 100;
background: var(--coal);
border-right: 1px solid var(--steel);
padding: 20px 12px 24px;
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
transform: translateX(-100%);
visibility: hidden;
transition: transform .2s ease, visibility .2s;
}
body.drawer-open .dt-drawer { transform: translateX(0); visibility: visible; }
body.drawer-open .sidebar-scrim { display: block; opacity: 1; }
.dt-drawer .dt-who { padding: 8px 12px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--surface); }
.dt-drawer .dt-who .dt-brand { display: block; margin-bottom: 12px; }
.dt-drawer .dt-who b { display: block; color: var(--snow); font-weight: 500; }
.dt-drawer .dt-who small { color: var(--ink-soft); font-size: 13px; }
.dt-drawer a, .dt-drawer button.dt-dlink {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 0 12px;
border-radius: 8px;
border: 0;
background: none;
color: var(--ink-mid);
font: 500 15px var(--font-body);
text-decoration: none;
cursor: pointer;
text-align: left;
}
.dt-drawer a svg.dt-i, .dt-drawer button.dt-dlink svg.dt-i { width: 20px; height: 20px; }
.dt-drawer a:hover, .dt-drawer button.dt-dlink:hover { color: var(--snow); background: var(--surface); }
.dt-drawer a[aria-current="page"] { color: var(--snow); background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
.dt-drawer a[aria-current="page"] svg { color: var(--accent); }
.dt-drawer .dt-grp { font: 11px var(--font-mono); letter-spacing: .85px; text-transform: uppercase; color: var(--ink-soft); padding: 16px 12px 4px; }
.dt-drawer .dt-sep { height: 1px; background: var(--surface); margin: 8px 0; }
.dt-drawer form { margin-top: auto; }
.dt-drawer button.dt-dlink.is-danger { color: var(--red); }
/* ═══ Login partido 50/50 (markup .dt-auth emitido por View::renderAuth) ═ */
.dt-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.dt-auth-pane { display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(24px, 6vw, 96px); background: #0a0a0a; }
.dt-auth .auth-card { background: transparent; border: 0; padding: 0; max-width: 400px; box-shadow: none; }
.dt-auth .auth-logo { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 1px; color: var(--snow); margin-bottom: 40px; }
.dt-auth .auth-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: .85px; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 12px; }
.dt-auth .auth-card h2 { font-family: var(--font-body); font-size: 40px; font-weight: 600; letter-spacing: -.84px; line-height: 1.2; text-transform: none; margin-bottom: 32px; }
.dt-auth .form-group { margin-bottom: 20px; }
.dt-auth .btn-primary { width: 100%; min-height: 44px; }
.dt-auth-aside {
border-left: 1px solid var(--surface);
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
background-color: #0a0a0a;
background-image: linear-gradient(var(--surface) 1px, transparent 1px), linear-gradient(90deg, var(--surface) 1px, transparent 1px);
background-size: 56px 56px;
background-position: -1px -1px;
}
.dt-preview { width: 100%; max-width: 460px; background: var(--surface); border-radius: 8px; padding: 32px; }
.dt-preview h2 { font-size: 24px; font-weight: 600; letter-spacing: -.5px; line-height: 1.33; margin: 12px 0 24px; }
.dt-flow { list-style: none; display: grid; gap: 4px; }
.dt-flow li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--coal); color: var(--ink); }
.dt-flow li .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--graphite); display: grid; place-items: center; font: 11px var(--font-mono); color: var(--ink-mid); flex: none; }
.dt-flow li small { margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.dt-flow li.cur { outline: 1px solid var(--accent); }
.dt-flow li.cur .n { border-color: var(--accent); color: var(--accent); }
/* ═══ Responsive ════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.dt-nav, .dt-ctx { display: none; }
.dt-menu-btn { display: grid; }
.dt-topbar { gap: 8px; padding: 0 12px; }
}
@media (max-width: 767px) {
.dt-page { padding: 24px 16px 48px; }
.dt-page > .page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 26px; letter-spacing: -.4px; }
.stat-value { font-size: 32px; letter-spacing: -.6px; }
.stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-card { padding: 14px 16px; }
.dt-auth { grid-template-columns: 1fr; }
.dt-auth-aside { display: none; }
.dt-auth-pane { padding: 48px 20px; }
.dt-auth .auth-card h2 { font-size: 32px; letter-spacing: -.6px; }
.dt-brand span { display: none; }
.btn { min-height: 44px; }
.btn-sm { min-height: 36px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea { font-size: 16px; min-height: 44px; }
.table-wrap td { font-size: 13px; }
}
@media (pointer: coarse) {
.dt-icon-btn { width: 44px; height: 44px; }
}
/* ═══ Contenido reacomodado (Propuesta A) — markup .dt-* de los controllers ═ */
.dt-mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }
.page-header h1 .dt-mono { font-size: inherit; letter-spacing: -.5px; }
.dt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dt-grow { flex: 1; }
.dt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dt-actions form { display: inline-flex; margin: 0; }
.btn-danger-ghost { background: transparent; color: var(--red); border-color: transparent; }
.btn-danger-ghost:hover { background: #2a1717; color: var(--red); }
.dt-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-mid); text-decoration: none; font-weight: 500; font-size: 14px; }
.dt-link:hover { color: var(--snow); }
.dt-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 40px 0 16px; }
.dt-sec h2 { font-size: 20px; font-weight: 600; letter-spacing: -.42px; color: var(--snow); }
.dt-sec h2 .text-soft { font-size: 20px; font-weight: 400; }
.dt-sec-first { margin-top: 0; }
.dt-eyebrow-gap { margin-bottom: 16px; }
.dt-signed { margin-top: 32px; }
.dt-sub { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; white-space: normal; }
.dt-bar { display: block; height: 4px; background: var(--steel); border-radius: 2px; overflow: hidden; margin-top: 12px; }
.dt-bar i { display: block; height: 100%; background: var(--accent); }
/* Needs action (cliente) */
.dt-needs { border: 1px solid var(--amber-dim); background: #17130b; border-radius: 8px; padding: 8px; margin-bottom: 24px; }
.dt-needs-h { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; color: var(--snow); }
.dt-needs-h svg { color: var(--amber); }
.dt-needs-h b { font-weight: 500; }
.dt-action-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 48px; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.dt-action-row:hover { background: rgba(255,255,255,.04); }
.dt-action-row .dt-mono { color: var(--snow); }
/* Needs action (interno) */
.dt-act-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dt-act { background: var(--surface); border: 1px solid var(--surface); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; transition: border-color .15s; }
.dt-act:hover { border-color: var(--graphite); }
.dt-act-top { display: flex; align-items: center; gap: 8px; color: var(--ink-mid); font-weight: 500; }
.dt-act-val { font-size: 56px; line-height: 1.14; letter-spacing: -2.02px; font-weight: 600; color: var(--snow); font-variant-numeric: tabular-nums; }
.dt-act-foot { display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); font-size: 13px; }
.dt-act.is-bad .dt-act-top svg { color: var(--red); }
.dt-act.is-warn .dt-act-top svg { color: var(--amber); }
.dt-act.is-mine .dt-act-top svg { color: var(--accent); }
/* Pipeline */
.dt-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-radius: 8px; overflow: hidden; }
.dt-pipe a { position: relative; display: flex; flex-direction: column; padding: 20px 24px; text-decoration: none; border-right: 1px solid var(--row-line); transition: background .15s; }
.dt-pipe a:last-child { border-right: 0; }
.dt-pipe a:hover { background: var(--hover-row); }
.dt-pipe-l { font: 12px var(--font-mono); letter-spacing: .85px; text-transform: uppercase; color: var(--ink-mid); }
.dt-pipe-v { font-size: 40px; letter-spacing: -.84px; font-weight: 600; color: var(--snow); line-height: 1.2; margin-top: 8px; font-variant-numeric: tabular-nums; }
.dt-pipe-h { color: var(--ink-soft); font-size: 13px; }
/* Split + paneles */
.dt-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 40px; }
.dt-panel { background: var(--surface); border-radius: 8px; padding: 24px; }
.dt-panel + .dt-panel { margin-top: 16px; }
.dt-panel h3 { font-size: 16px; font-weight: 600; color: var(--snow); margin-bottom: 14px; }
.dt-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--row-line); color: var(--ink-soft); }
.dt-kv:last-child { border-bottom: 0; }
.dt-kv b { font-size: 24px; letter-spacing: -.5px; font-weight: 600; color: var(--snow); font-variant-numeric: tabular-nums; }
.dt-person { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 6px 0; }
.dt-person .dt-bar { grid-column: 1 / -1; margin-top: 0; }
.dt-more { margin-top: 24px; background: var(--coal); border: 1px solid var(--surface); border-radius: 8px; }
.dt-more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; font-weight: 500; color: var(--snow); }
.dt-more summary::-webkit-details-marker { display: none; }
.dt-more summary .badge { margin-left: auto; }
.dt-more[open] .dt-caret { transform: rotate(180deg); }
.dt-more-body { padding: 0 20px 20px; }
.dt-more-body p { margin-top: 12px; }
/* Lista de pedidos */
.dt-segs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; }
.dt-seg { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; color: var(--ink-mid); font-weight: 500; text-decoration: none; white-space: nowrap; }
.dt-seg:hover { color: var(--snow); }
.dt-seg[aria-current="true"] { background: var(--surface); color: var(--snow); border-color: var(--steel); }
.dt-seg-c { font: 12px var(--font-mono); color: var(--ink-soft); }
.dt-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.dt-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.dt-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.dt-search input[type=search] { padding-left: 36px; }
.dt-date { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-mid); font-weight: 500; }
.dt-date input { width: 160px; }
/* Tablas .dt-cards (se vuelven tarjetas en celular) */
.dt-cards td.dt-c-main a { font-family: var(--font-mono); font-size: 13px; }
.dt-cards td.dt-c-main .dt-mono { color: var(--snow); }
.dt-cards td.dt-c-status { white-space: nowrap; }
.dt-cards td.dt-c-status .badge + .badge { margin-left: 4px; }
/* Detalle de pedido */
.dt-order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -20px 0 24px; }
.dt-hint { margin: -8px 0 20px; }
.dt-next { margin: -8px 0 24px; }
.dt-stepper { list-style: none; display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); margin: 0 0 24px; padding: 0; }
.dt-stepper li { position: relative; padding-top: 22px; padding-right: 8px; font-size: 13px; color: var(--ink-soft); }
.dt-stepper li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--steel); }
.dt-stepper li::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #0a0a0a; border: 2px solid var(--graphite); }
.dt-stepper li.done { color: var(--ink-mid); }
.dt-stepper li.done::before, .dt-stepper li.done::after { background: var(--accent); border-color: var(--accent); }
.dt-stepper li.cur { color: var(--snow); font-weight: 500; }
.dt-stepper li.cur::after { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(103,152,255,.18); }
.dt-stepper li.cur.neg::after { border-color: var(--red); box-shadow: 0 0 0 4px rgba(240,138,138,.18); }
.dt-stepper li:last-child::before { right: auto; width: 12px; }
.dt-stepper small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.dt-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.dt-detail-main > .form-section-title:first-of-type { margin-top: 40px; }
.dt-meta { display: grid; gap: 14px; }
.dt-meta dt { font: 12px var(--font-mono); letter-spacing: .85px; text-transform: uppercase; color: var(--ink-mid); }
.dt-meta dd { color: var(--snow); margin-top: 2px; overflow-wrap: anywhere; }
.dt-hist { list-style: none; display: grid; gap: 14px; border-left: 1px solid var(--steel); padding-left: 16px; }
.dt-hist li { position: relative; }
.dt-hist li::before { content: ""; position: absolute; left: -20px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--graphite); }
.dt-hist li:first-child::before { background: var(--accent); }
.dt-hist b { font-weight: 500; color: var(--snow); display: block; }
.dt-hist span { display: block; color: var(--ink-soft); font-size: 12px; }
.dt-hist q { display: block; color: var(--ink-mid); font-size: 13px; margin-top: 4px; }
.dt-qty { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; }
.dt-qty input[type=number] { width: 84px; min-height: 36px; text-align: right; border-radius: 0; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.dt-qty input::-webkit-inner-spin-button, .dt-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dt-step { width: 36px; min-height: 36px; background: #0a0a0a; color: var(--snow); border: 1px solid var(--field-border); font: 500 16px var(--font-body); cursor: pointer; }
.dt-step[data-step="-1"] { border-radius: 8px 0 0 8px; }
.dt-step[data-step="1"] { border-radius: 0 8px 8px 0; }
.dt-step:hover { background: var(--surface); }
.dt-qty .qty-save { margin-left: 8px; }
.dt-qty-ro { font-variant-numeric: tabular-nums; }
.dt-lines td.dt-c-qty { text-align: right; }
.dt-lines td.dt-c-status { text-align: right; width: 56px; }
.dt-remove { color: var(--ink-soft); }
.dt-remove:hover { color: var(--red); border-color: var(--red-dim); }
@media (max-width: 1100px) {
.dt-split, .dt-detail { grid-template-columns: minmax(0, 1fr); }
.dt-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dt-pipe a:nth-child(2n) { border-right: 0; }
.dt-pipe a:nth-child(-n+2) { border-bottom: 1px solid var(--row-line); }
}
@media (max-width: 767px) {
.page-header .dt-actions { width: 100%; }
.page-header .dt-actions > .btn, .page-header .dt-actions > form { flex: 1 1 auto; }
.page-header .dt-actions form .btn { width: 100%; }
.dt-act-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dt-act { padding: 16px 20px; }
.dt-act-val { font-size: 40px; letter-spacing: -.84px; }
.dt-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: center; }
.dt-act-top { grid-column: 1; grid-row: 1; }
.dt-act-foot { grid-column: 1 / -1; grid-row: 2; }
.dt-act-val { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
.dt-pipe-v { font-size: 32px; }
.dt-pipe a { padding: 16px; }
.dt-sec { margin-top: 32px; }
.dt-date { flex: 1 1 140px; }
.dt-date input { width: 100%; }
.dt-order-meta { margin-top: -12px; }
.dt-stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
.dt-stepper li:nth-child(3n)::before { right: auto; width: 12px; }
/* Tabla → tarjetas */
.card:has(> .table-wrap > .dt-cards) { background: transparent; border: 0; }
.table-wrap:has(> .dt-cards) { overflow: visible; }
.dt-cards, .dt-cards tbody { display: block; }
.dt-cards thead { display: none; }
.dt-cards tbody { display: grid; gap: 8px; }
.dt-cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 16px; background: var(--surface); border-radius: 8px; }
.dt-cards td { display: block; padding: 0; border: 0; background: transparent !important; font-size: 13px; color: var(--ink-mid); }
.dt-cards td.dt-c-main { flex: 1 1 55%; min-width: 0; font-size: 14px; color: var(--ink); order: 0; }
.dt-cards td.dt-c-status { order: 1; margin-left: auto; }
.dt-cards td[data-label] { order: 2; }
.dt-cards td[data-label]::before { content: attr(data-label) " "; color: var(--ink-soft); }
.dt-cards td.amount-col { text-align: left; }
.dt-cards td.dt-c-line { display: none; }
/* Líneas del pedido: cantidad con − / + de 44px */
.dt-lines td.dt-c-uom { order: 1; margin-left: auto; }
.dt-lines td.dt-c-qty { order: 3; flex: 1 1 auto; text-align: left; margin-top: 6px; }
.dt-lines td.dt-c-qty::before { display: none; }
.dt-lines td.dt-c-status { order: 4; width: auto; margin-top: 6px; }
.dt-qty { justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
.dt-step { width: 44px; min-height: 44px; }
.dt-qty input[type=number] { width: 84px; min-height: 44px; text-align: center; }
/* Catálogo "Add Line Items" (markup existente, sin cambios): renglón → tarjeta */
#add_lines_table tr:first-child:has(th) { display: none; }
#add_lines_table tr[data-search] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--row-line); }
#add_lines_table tr[data-search] td { display: block; padding: 0; border: 0; background: transparent !important; }
#add_lines_table tr[data-search] td:nth-child(1) { font-family: var(--font-mono); font-size: 13px; color: var(--snow); }
#add_lines_table tr[data-search] td:nth-child(2) { order: 5; flex: 1 1 100%; font-size: 13px; color: var(--ink-mid); }
#add_lines_table tr[data-search] td:nth-child(3), #add_lines_table tr[data-search] td:nth-child(4) { font-size: 12px; color: var(--ink-soft); text-align: left; }
#add_lines_table tr[data-search] td:nth-child(4)::before { content: "On order "; }
#add_lines_table tr[data-search] td:nth-child(5) { margin-left: auto; }
#add_lines_table tr[data-search] td:nth-child(5) input { width: 96px !important; }
/* Detalle: acciones fijas abajo */
body:has(.dt-order) .dt-page { padding-bottom: 112px; }
body:has(.dt-order) .page-header .dt-actions {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background: #0a0a0a; border-top: 1px solid var(--surface);
flex-wrap: nowrap;
}
body:has(.dt-order) .page-header .dt-actions > .btn, body:has(.dt-order) .page-header .dt-actions > form { flex: 1 1 0; min-width: 0; }
body:has(.dt-order) .page-header .dt-actions .btn { min-height: 44px; padding: 8px 10px; white-space: normal; text-align: center; line-height: 1.2; }
body:has(.dt-order) .page-header .dt-actions .btn-danger-ghost,
body:has(.dt-order) .page-header .dt-actions .btn-danger { flex: 0 0 auto; }
body:has(.dt-order) .page-header .dt-actions > form:has(.btn-danger-ghost),
body:has(.dt-order) .page-header .dt-actions > form:has(.btn-danger) { flex: 0 0 auto; }
body:has(.dt-order) .page-header .dt-actions .btn-danger-ghost { font-size: 0; gap: 0; width: 44px; padding: 0; border-color: var(--graphite); }
body:has(.dt-order) .page-header .dt-actions .btn-danger-ghost svg { width: 18px; height: 18px; }
}
/* ═══ Tablas y filtros en pantallas angostas (todas las pantallas) ═════════ */
@media (max-width: 1100px) {
/* Filtros de estado: una sola fila deslizable en vez de 3 renglones desordenados */
.filter-tabs {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-left: -16px;
margin-right: -16px;
padding: 0 16px 4px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab { flex: none; white-space: nowrap; }
}
@media (max-width: 767px) {
/* Cualquier tabla (.dt-auto, marcada por el script del layout) → tarjetas
con "etiqueta: valor", sin scroll horizontal. */
.card:has(> .table-wrap > .dt-auto) { background: transparent; border: 0; }
.table-wrap:has(> .dt-auto) { overflow: visible; max-height: none !important; }
.dt-auto, .dt-auto thead, .dt-auto tbody { display: block; }
.dt-auto .dt-auto-head { display: none; }
.dt-auto tbody { display: grid; gap: 8px; }
.dt-auto tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; background: var(--surface); border-radius: 8px; padding: 14px 16px; }
.dt-auto td {
display: block;
flex: 1 1 calc(50% - 8px);
min-width: 0;
padding: 0;
border: 0;
background: transparent !important;
text-align: left;
font-size: 14px;
white-space: normal;
overflow-wrap: anywhere;
}
.dt-auto td:empty { display: none; }
.dt-auto td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-soft); font-size: 12px; font-weight: 500; }
.dt-auto td:not([data-label])::before { display: none; }
.dt-auto td:not([data-label]):not(.dt-auto-pick) { flex-basis: 100%; }
.dt-auto td.dt-auto-pick { flex: 0 0 auto; order: -2; padding-top: 2px; }
.dt-auto td.dt-auto-title { order: -1; flex: 1 1 calc(100% - 40px); font-size: 15px; font-weight: 500; color: var(--snow); padding-bottom: 12px; border-bottom: 1px solid var(--row-line); }
.dt-auto td.dt-auto-title::before { display: none; }
.dt-auto td.dt-auto-title a { font-family: var(--font-mono); font-size: 14px; }
.dt-auto td.amount-col { text-align: left; }
.dt-auto td .badge { margin-top: 2px; }
.dt-auto td form { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-auto td input[type=number], .dt-auto td input[type=text] { width: 110px !important; }
}
@media (max-width: 767px) {
/* Internal Users: el botón Activate/Deactivate va al final de la tarjeta, a todo lo ancho */
.dt-main[data-page="admin_users"] .dt-auto td.dt-auto-actions { order: 99; flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--row-line); }
.dt-main[data-page="admin_users"] .dt-auto td.dt-auto-actions form { display: block !important; width: 100%; }
.dt-main[data-page="admin_users"] .dt-auto td.dt-auto-actions .btn { width: 100%; min-height: 44px; }
}
@media (max-width: 767px) {
/* Items: badge de Status arriba a la derecha junto al SKU; Edit y
Deactivate/Activate lado a lado, mismo ancho, al final de la tarjeta. */
.dt-main[data-page="admin_products"] .dt-auto tr:not(.dt-auto-head) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 0; }
.dt-main[data-page="admin_products"] .dt-auto td { padding-right: 8px; }
.dt-main[data-page="admin_products"] .dt-auto td.dt-auto-title { grid-column: 1; order: -2; padding-bottom: 0; border-bottom: 0; align-self: center; font-family: var(--font-mono); font-size: 14px; }
.dt-main[data-page="admin_products"] .dt-auto td[data-label="Status"] { grid-column: 2; order: -1; justify-self: end; align-self: center; padding-right: 0; }
.dt-main[data-page="admin_products"] .dt-auto td[data-label="Status"]::before { display: none; }
.dt-main[data-page="admin_products"] .dt-auto td[data-label="Status"] .badge { margin-top: 0; }
.dt-main[data-page="admin_products"] .dt-auto td[data-label="Description"] { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--row-line); }
.dt-main[data-page="admin_products"] .dt-auto td.dt-auto-actions { order: 99; padding-top: 12px; border-top: 1px solid var(--row-line); }
.dt-main[data-page="admin_products"] .dt-auto td.dt-auto-actions + td.dt-auto-actions { padding-left: 6px; padding-right: 0; }
.dt-main[data-page="admin_products"] .dt-auto td.dt-auto-actions:has(+ td.dt-auto-actions) { grid-column: 1; padding-right: 6px; }
.dt-main[data-page="admin_products"] .dt-auto td.dt-auto-actions form { display: block !important; width: 100%; }
.dt-main[data-page="admin_products"] .dt-auto td.dt-auto-actions .btn { width: 100%; min-height: 44px; }
}
@media (max-width: 767px) {
/* Internal Users: Status arriba a la derecha junto al nombre (mismo acomodo que Items) */
.dt-main[data-page="admin_users"] .dt-auto tr:not(.dt-auto-head) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 0; }
.dt-main[data-page="admin_users"] .dt-auto td { padding-right: 8px; }
.dt-main[data-page="admin_users"] .dt-auto td.dt-auto-title { grid-column: 1; order: -2; padding-bottom: 0; border-bottom: 0; align-self: center; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Status"] { grid-column: 2; order: -1; justify-self: end; align-self: center; padding-right: 0; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Status"]::before { display: none; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Status"] > .badge { margin-top: 0; }
/* Si el Status llega como texto simple ("Active"/"Inactive"), se muestra con forma de badge neutro */
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Status"]:not(:has(.badge)) {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 8px; border: 1px solid var(--graphite); border-radius: 4px;
font-size: 12px; font-weight: 500; color: var(--ink-mid);
}
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Status"]:not(:has(.badge))::after { content: ""; order: -1; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Email"] { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--row-line); }
.dt-main[data-page="admin_users"] .dt-auto td.dt-auto-actions { grid-column: 1 / -1; padding-right: 0; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Role"] { grid-column: 1 / -1; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="New order alerts"] { grid-column: 1; order: 10; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Export failed alerts"] { grid-column: 2; order: 11; padding-right: 0; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="New order alerts"] form,
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Export failed alerts"] form { display: block; width: 100%; }
.dt-main[data-page="admin_users"] .dt-auto td[data-label="New order alerts"] .btn,
.dt-main[data-page="admin_users"] .dt-auto td[data-label="Export failed alerts"] .btn { width: 100%; min-height: 40px; }
}
@media (max-width: 767px) {
/* Review Queue (OE): badge de Status arriba a la derecha junto al numero de orden */
.dt-auto:has(td[data-label="Created By"]) tr:not(.dt-auto-head) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 0; }
.dt-auto:has(td[data-label="Created By"]) td { padding-right: 8px; }
.dt-auto:has(td[data-label="Created By"]) td.dt-auto-title { grid-column: 1; order: -2; padding-bottom: 0; border-bottom: 0; align-self: center; }
.dt-auto:has(td[data-label="Created By"]) td[data-label="Status"] { grid-column: 2; order: -1; justify-self: end; align-self: center; padding-right: 0; }
.dt-auto:has(td[data-label="Created By"]) td[data-label="Status"]::before { display: none; }
.dt-auto:has(td[data-label="Created By"]) td[data-label="Status"] .badge { margin-top: 0; }
.dt-auto:has(td[data-label="Created By"]) td[data-label="Company"] { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--row-line); }
}
@media (max-width: 767px) {
/* Review Queue con checkbox de seleccion: el checkbox va a la izquierda del numero de orden */
.dt-auto:has(td[data-label="Created By"]) tr:has(> td.dt-auto-pick) { position: relative; }
.dt-auto:has(td[data-label="Created By"]) td.dt-auto-pick { position: absolute; top: 14px; left: 16px; height: 24px; display: flex; align-items: center; padding: 0; }
.dt-auto:has(td[data-label="Created By"]) tr:has(> td.dt-auto-pick) td.dt-auto-title { padding-left: 32px; min-height: 24px; }
}
@media (max-width: 767px) {
/* Line items de la orden: "#1.- SKU" en la primera linea, descripcion como subtitulo, Quantity y UOM al final */
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) tr:not(.dt-auto-head) { gap: 4px 0; align-items: baseline; }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td.dt-auto-title { order: 0; flex: 0 0 auto; padding: 0 8px 0 0; border: 0; font-size: 17px; font-weight: 600; color: var(--snow); }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td.dt-auto-title::before { display: inline; content: "#"; margin: 0; color: inherit; font-size: inherit; }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td.dt-auto-title::after { content: ".-"; }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="SKU"] { order: 1; flex: 0 1 auto; font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--snow); }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="Description"] { order: 2; flex: 1 1 100%; font-size: 13px; color: var(--ink-mid); padding-bottom: 8px; }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="SKU"]::before, .dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="Description"]::before { display: none; }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="Quantity"], .dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="UOM"] { order: 3; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--row-line); }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="UOM"] { order: 4; }
}
/* Vista de orden (OE / customer, markup original): badge de Status arriba a la derecha, sin la etiqueta "Created" */
.dt-page:has(> p.text-soft > .badge:first-child) { position: relative; }
.dt-page > p.text-soft:has(> .badge:first-child) {
position: absolute; top: 44px; right: 24px; margin: 0 !important;
font-size: 0; line-height: 0;
}
.dt-page > p.text-soft > .badge:first-child { font-size: 12px; line-height: 1.5; }
.dt-page:has(> p.text-soft > .badge:first-child) > .page-header { padding-right: 170px; }
@media (max-width: 767px) {
.dt-page:has(> p.text-soft > .badge:first-child) { padding-top: 56px; }
.dt-page > p.text-soft:has(> .badge:first-child) { top: 20px; right: 16px; }
.dt-page:has(> p.text-soft > .badge:first-child) > .page-header { padding-right: 0; }
}
/* Claim / Release: boton centrado */
.dt-page > form[action$="/claim"], .dt-page > form[action$="/unclaim"] { display: flex; justify-content: center; }
/* Shipping (vista de orden): etiqueta suave + valor destacado */
.dt-kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--row-line); }
.form-section-title + .dt-kv { border-top: 1px solid var(--row-line); }
.dt-kv-k { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.dt-kv-v { font-size: 15px; color: var(--snow); overflow-wrap: anywhere; }
@media (max-width: 767px) {
.dt-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
}
@media (max-width: 767px) {
/* Adjust quantities (OE): una sola fila por linea "#1.- SKU [nueva cantidad]"; sin Current ni UOM */
.dt-auto:has(td[data-label="Current"]) tr:not(.dt-auto-head) { flex-wrap: nowrap; align-items: center; gap: 0; }
.dt-auto:has(td[data-label="Current"]) td[data-label="Current"],
.dt-auto:has(td[data-label="Current"]) td[data-label="UOM"] { display: none; }
.dt-auto:has(td[data-label="Current"]) td.dt-auto-title { order: 0; flex: 0 0 auto; padding: 0 8px 0 0; border: 0; font-size: 16px; font-weight: 600; color: var(--snow); }
.dt-auto:has(td[data-label="Current"]) td.dt-auto-title::before { display: inline; content: "#"; margin: 0; color: inherit; font-size: inherit; }
.dt-auto:has(td[data-label="Current"]) td.dt-auto-title::after { content: ".-"; }
.dt-auto:has(td[data-label="Current"]) td[data-label="SKU"] { order: 1; flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--snow); }
.dt-auto:has(td[data-label="Current"]) td[data-label="SKU"]::before,
.dt-auto:has(td[data-label="Current"]) td[data-label="New"]::before { display: none; }
.dt-auto:has(td[data-label="Current"]) td[data-label="New"] { order: 2; flex: 0 0 auto; }
.dt-auto:has(td[data-label="Current"]) td[data-label="New"] input { width: 7.5em !important; }
}
/* Vista de orden OE: botones de accion centrados, todos al 50% del mismo contenedor */
.dt-page form:is([action$="/approve"], [action$="/reject"], [action$="/request-changes"], [action$="/notes"], [action$="/adjust"], [action$="/po-number"], [action$="/export"], [action$="/close"], [action$="/invoice"]) { display: block !important; margin-right: 0 !important; max-width: none !important; width: 100%; }
.dt-page form:is([action$="/approve"], [action$="/reject"], [action$="/request-changes"], [action$="/notes"], [action$="/adjust"], [action$="/po-number"], [action$="/export"], [action$="/close"], [action$="/invoice"]) > button.btn { display: block; width: 50%; min-width: 160px; max-width: 100%; margin: 0 auto; text-align: center; white-space: nowrap; }
/* ═══ Logo de la compañía (reemplaza el texto de marca) ═══════════════ */
.dt-brand { display: flex; align-items: center; }
.dt-brand img { height: 26px; width: auto; display: block; }
.dt-drawer .dt-who .dt-brand img { height: 30px; }
.dt-auth .auth-logo img { height: 34px; width: auto; display: none; }
.dt-auth-logo { width: min(440px, 72%); height: auto; }
@media (max-width: 767px) {
.dt-auth .auth-logo img { display: block; }
}
/* ═══ Tabs de My Company ═════════════════════════════════════════════ */
.co-tabs { display: flex; gap: 2px; margin: 0 0 24px; border-bottom: 1px solid var(--surface); overflow-x: auto; scrollbar-width: none; }
.co-tabs::-webkit-scrollbar { display: none; }
.co-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 16px; font: inherit; font-size: 14px; color: var(--ink-mid); cursor: pointer; white-space: nowrap; }
.co-tab:hover { color: var(--snow); }
.co-tab[aria-selected="true"] { color: var(--snow); border-bottom-color: var(--accent); }
.co-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.co-panel[hidden] { display: none; }
#co-panel-users > .form-section-title:first-child,
#co-panel-addresses > .form-section-title:first-child { display: none; }
/* Tabla con scroll vertical propio (p. ej. Ship via codes) y encabezado fijo */
.table-scroll { max-height: 60vh; overflow-y: auto; }
.table-scroll th { position: sticky; top: 0; z-index: 5; background: var(--surface); }
/* Botón de filtro rápido en uso (p. ej. presets de fecha en Reports) */
.btn.is-active, .btn.is-active:hover { background: var(--snow); color: #0a0a0a; border-color: var(--snow); }
/* ── Fase 1 (flujo): filas clicables, resumen de dirección, estados sin tarjeta ── */
tr.dt-rowlink { cursor: pointer; }
tr.dt-rowlink:focus-within td { background: var(--hover-row, rgba(103,152,255,.06)); }
tr.dt-rowlink td.dt-c-main a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 760px) { .dt-cards tr.dt-rowlink:hover { background: var(--hover-row, rgba(103,152,255,.06)); } }
.dt-addr-summary { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--row-line); border-radius: 8px; color: var(--ink-mid); font-size: 14px; }
.dt-addr-summary #ship_to_summary { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dt-other-status { margin: -4px 0 20px; font-size: 13px; }
.dt-other-status a { color: var(--ink-mid); text-decoration: underline; text-underline-offset: 2px; }
.dt-other-status a:hover { color: var(--snow); }
#ordersClear[hidden], #ship_to_fields[hidden] { display: none !important; }
#ordersResults[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
/* ── Fase 2 (formularios): acciones de formulario, paneles de alta, interruptor, diálogo ── */
.dt-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.dt-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.dt-section-head .form-section-title { margin: 0; }
#co-panel-users .dt-section-head, #co-panel-addresses .dt-section-head { justify-content: flex-end; }
#co-panel-users .dt-section-head .form-section-title, #co-panel-addresses .dt-section-head .form-section-title { display: none; }
.dt-add-panel { margin: 0 0 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--row-line); border-radius: 8px; }
.dt-add-panel[hidden] { display: none !important; }
.field-error[hidden] { display: none !important; }
.dt-switch-form { margin: 0; }
.dt-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; max-width: 640px; }
.dt-switch input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dt-switch-track { flex: none; position: relative; width: 40px; height: 22px; margin-top: 1px; border-radius: 999px; background: var(--steel, #333); border: 1px solid var(--graphite, #444); transition: background .15s, border-color .15s; }
.dt-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-mid, #bbb); transition: transform .15s, background .15s; }
.dt-switch input:checked + .dt-switch-track { background: var(--accent); border-color: var(--accent); }
.dt-switch input:checked + .dt-switch-track::after { transform: translateX(18px); background: #0a0a0a; }
.dt-switch input:focus-visible + .dt-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt-switch-label { font-size: 14px; color: var(--ink); }
dialog.dt-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--graphite, #444); border-radius: 12px; }
dialog.dt-dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog.dt-dialog h3 { margin: 0 0 8px; }
dialog.dt-dialog form { max-width: none !important; margin-top: 0 !important; }
/* ── Fase 3 (consistencia y accesibilidad) ── */
.dt-usermenu { position: relative; }
.dt-usermenu > summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--steel); color: var(--ink-mid); cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; }
.dt-usermenu > summary::-webkit-details-marker { display: none; }
.dt-usermenu > summary:hover, .dt-usermenu[open] > summary { color: var(--snow); border-color: var(--graphite); }
.dt-usermenu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt-usermenu > summary .dt-caret { transition: transform .15s; }
.dt-usermenu[open] > summary .dt-caret { transform: rotate(180deg); }
.dt-menu.dt-menu-right { left: auto; right: 0; }
.dt-menu form { display: block; margin: 0; }
.dt-menu .dt-menu-btn-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--ink-mid); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.dt-menu .dt-menu-btn-item:hover { background: var(--surface); color: var(--red); }
.dt-menu a:focus-visible, .dt-menu .dt-menu-btn-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 1100px) { .dt-usermenu { display: none; } }
.dt-back { margin: 0 0 8px; font-size: 14px; }
/* Dashboard: tarjetas que requieren atención vs. en cero */
a.stat-card-link.is-attn { border-color: var(--amber); }
a.stat-card-link.is-attn .stat-value { color: var(--amber); }
a.stat-card-link.is-zero { opacity: .6; }
a.stat-card-link.is-zero:hover, a.stat-card-link.is-zero:focus-visible { opacity: 1; }
@media (max-width: 767px) {
/* Line items (OE, con Unit price editable): "#1.- SKU" / descripcion / Quantity | UOM | Unit price en una sola fila */
.dt-auto:has(td[data-label^="Unit price"]) tr:not(.dt-auto-head) { gap: 4px 0; align-items: baseline; }
.dt-auto:has(td[data-label^="Unit price"]) td.dt-auto-title { order: 0; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label="SKU"] { order: 1; flex: 1 1 0; min-width: 0; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label="Description"] { order: 2; flex: 1 1 100%; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label="Quantity"], .dt-auto:has(td[data-label^="Unit price"]) td[data-label="UOM"], .dt-auto:has(td[data-label^="Unit price"]) td[data-label^="Unit price"] { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--row-line); padding-right: 12px; min-width: 0; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label="Quantity"] { order: 3; flex: 1 1 0; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label="UOM"] { order: 4; flex: 0 0 56px; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label^="Unit price"] { order: 5; flex: 1.2 1 0; padding-right: 0; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label^="Unit price"]::before { content: "Unit price"; }
.dt-auto:has(td[data-label^="Unit price"]) td[data-label="Quantity"] input, .dt-auto:has(td[data-label^="Unit price"]) td[data-label^="Unit price"] input { width: 100% !important; min-width: 0; box-sizing: border-box; text-align: left; }
}
@media (max-width: 767px) {
.dt-auto:has(td[data-label^="Unit price"]) td[data-label^="Unit price"] input::placeholder { font-size: 13px; }
}
@media (max-width: 767px) {
/* Line items: badge (Unavailable, etc.) en la esquina superior derecha de la tarjeta */
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) tr:not(.dt-auto-head) { position: relative; }
.dt-auto:has(td[data-label="SKU"]):has(td[data-label="Quantity"]) td[data-label="SKU"] .badge { position: absolute; top: 14px; right: 16px; margin: 0; }
}
/* Formulario de lineas (OE): el motivo ocupa todo el ancho; "No changes" y Save pasan al renglon siguiente */
#oe_lines_form > div { gap: 10px 12px !important; }
#oe_lines_form #oe_lines_reason_wrap { flex: 1 1 100% !important; min-width: 0 !important; }
#oe_lines_form #oe_lines_reason_wrap input { width: 100%; }
#oe_lines_form #oe_lines_state { margin-left: 0 !important; flex: 1 1 auto; }
#oe_lines_form #oe_lines_save { margin-left: auto; }
@media (max-width: 767px) {
#oe_lines_form #oe_lines_save { min-height: 36px; padding: 6px 14px; font-size: 13px; }
}
| |